@import url("https://fonts.googleapis.com/css2?family=Jersey+10&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Signika:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iansui&family=Outfit:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Iansui&family=Outfit:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");
@import url("./footer.css");
@font-face {
  font-family: "Modica Oft";
  src: url("../fonts/modica.otf");
}

* {
  font-style: normal;
}

*::selection {
  color: #fce96b;
  background-color: #0065c3;
}

/* Fondo iOS multicolor global - pastel blobs fijos al viewport.
   Aplica a TODAS las páginas porque styles.css se carga en todas.
   Dark mode: ver regla [data-theme="dark"] body más abajo. */
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(60vw 55vh at 8% 12%, rgba(125, 166, 255, 0.35), transparent 60%),
    radial-gradient(55vw 50vh at 92% 18%, rgba(255, 153, 204, 0.28), transparent 62%),
    radial-gradient(50vw 55vh at 50% 95%, rgba(168, 139, 250, 0.28), transparent 65%),
    radial-gradient(40vw 45vh at 95% 80%, rgba(134, 239, 172, 0.22), transparent 65%),
    radial-gradient(35vw 40vh at 5% 85%, rgba(253, 224, 71, 0.2), transparent 65%),
    linear-gradient(180deg, #f5f7fb 0%, #eaf0f8 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

[data-theme="dark"] body {
  background:
    radial-gradient(60vw 55vh at 8% 12%, rgba(56, 114, 255, 0.3), transparent 60%),
    radial-gradient(55vw 50vh at 92% 18%, rgba(236, 72, 153, 0.22), transparent 62%),
    radial-gradient(50vw 55vh at 50% 95%, rgba(139, 92, 246, 0.28), transparent 65%),
    radial-gradient(40vw 45vh at 95% 80%, rgba(20, 184, 166, 0.18), transparent 65%),
    radial-gradient(35vw 40vh at 5% 85%, rgba(251, 146, 60, 0.15), transparent 65%),
    linear-gradient(180deg, #0b1120 0%, #0f172a 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

h1 {
  text-align: center;
  color: #333;
  display: none;
}

.cajonBtnMeli {
  display: flex;
  justify-content: end;
}

.bg-Hr-primary {
  margin-top: -5px;
  border-bottom: 1px dashed grey;
}

.bg-Hr-primary > p {
  color: grey;
  margin-top: 5px;
  margin-bottom: 0px;
  font-weight: 400;
  font-size: small;
}

.mac-buttons {
  background-color: cornflowerblue;
  padding: 5px;
  width: 92%;
  border-radius: 10px 10px 0 0;
  position: absolute;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px; /* Espacio entre los botones y el párrafo */
}
.button {
  width: 12px; /* Diámetro de los círculos */
  height: 12px;
  border-radius: 50%;
  margin: 0 3px; /* Espacio entre los botones */
  cursor: pointer; /* Cambia el cursor al pasar sobre los botones */
  border: 1px solid #ccc; /* Borde ligero */
  background: #fff; /* Fondo blanco para el bisel */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5); /* Sombra y bisel interno */
  transition: all 0.2s; /* Transición suave para efectos */
}

.button.red {
  background: linear-gradient(to bottom, #ff4d4d, #cc0000); /* Degradado rojo */
}

.button.yellow {
  background: linear-gradient(to bottom, #ffff66, #cccc00); /* Degradado amarillo */
}

.button.green {
  background: linear-gradient(to bottom, #66ff66, #009900); /* Degradado verde */
}

/* Efecto hover para los botones */
.button:hover {
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.7); /* Sombra más intensa y bisel al pasar el mouse */
  transform: translateY(-1px); /* Eleva el botón ligeramente */
}

.redStrong {
  font-weight: 700;
  color: cornflowerblue;
}

.redStrong2 {
  font-weight: 700;
  color: red;
}

.redStrong3 {
  font-weight: 700;
  color: rgb(0, 150, 0);
}

.redStrong4 {
  font-weight: 700;
  color: orangered;
}

.lookBase {
  text-align: center;
  background-color: white; /* Fondo similar a macOS */
  border: 1px solid cornflowerblue;
  padding: 30px 15px 15px 15px;
  color: rgb(69, 69, 69);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin-top: 22px; /* Espacio adicional para separar del input */
}

.AndesmarMeli,
.OcaMeli,
.AndreaniMeli,
.NovogarMeli,
.CDSMeli {
  align-items: center;
  justify-content: center;
  width: 20px;
}

.conjuntoDeBotonesMeli > button {
  width: fit-content;
}

.NovogarMeli2 {
  align-items: center;
  justify-content: center;
  width: 20px;
  filter: invert(1);
}

form {
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
}

@media (max-width: 600px) {
  form {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.six {
  background: linear-gradient(135deg, #e0f2ff, #b2dffb); /* Mismo degradado */
  border-radius: 5px; /* Bordes suaves */
  padding: 0.2rem; /* Espaciado interno */
  margin-bottom: 0.5rem; /* Espaciado inferior */
  border: 1px solid #a3cde6; /* Borde sutil */
}

.badge-large {
  font-size: 1rem;
  min-width: 25px !important;
  z-index: 1000 !important;
}

.form-switch .form-check-input {
  display: flex;
  margin-left: 10px !important;
  width: 53px !important;
}

.badge-large2 {
  font-size: 1.1rem;
  top: 0px !important;
  padding: 5px;
  min-width: 28px !important;
  z-index: 1000 !important;
}

.PisoyDepto {
  padding: 0.5rem;
  border: dashed 2px #0a84ff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  margin-bottom: 0.3rem;
  gap: 10px;
}

.cp,
.localidad {
  flex: 1;
}

.piso,
.depto {
  width: 20%;
}

.email {
  width: 60%;
}

.Andrean {
  background: linear-gradient(180deg, #0a84ff 0%, #0071e3 100%);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  width: fit-content;
  box-shadow:
    0 2px 6px rgba(10, 132, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  letter-spacing: -0.01em;
}

#localidad {
  height: 38px;
}

#codigoPostalDestinatario {
  height: 38px;
}

/* Estilos Camiones */
.trucks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.truck {
  text-align: center;
}
.truck img {
  display: none;
  width: 100%;
  height: auto;
  border: 2px dashed #ccc;
  border-radius: 8px;
}
.label {
  margin-top: 5px;
  padding: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.2rem;
}

.truck img.envio-verde {
  background-color: #32d554;
  border: 2px dashed green;
  box-shadow: 0 0px 5px #515151a5;
}

.truck img.desactivado {
  filter: grayscale(100%) brightness(70%);
}

@keyframes titilar {
  0% {
    background-color: rgb(129, 0, 0);
  }
  50% {
    background-color: orangered;
  }
  100% {
    background-color: rgb(129, 0, 0);
  }
}

.truck .label.titilando {
  color: white;
  animation: titilar 1s infinite;
  border: none;
  box-shadow: 0 0px 5px #515151a5;
}

/* Fin Estilos Camiones */
.doble {
  display: flex;
  justify-items: stretch;
  align-items: center;
  gap: 1rem;
  color: white;
  padding: 0.3rem;
}

.dobleText {
  margin-left: 20px;
  margin-right: 20px;
  color: #292929;
  display: flex;
  justify-content: space-between;
}

.doble input {
  margin: 0;
}

.doble label {
  margin: 0;
}

#Andesmar-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 1;
  margin-bottom: 20px;
  margin-top: 25px;
}

#Andesmar {
  max-width: 400px;
}

label {
  display: block;
  margin-bottom: 8px;
}

input,
select,
textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 16px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

textarea {
  resize: vertical;
}

button {
  background-color: cornflowerblue;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: rgb(11, 72, 185);
}

.spinner-container {
  display: none;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c97;
  backdrop-filter: blur(8px);
  z-index: 1000000;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.spinner-container.active {
  display: flex;
  visibility: visible;
  pointer-events: auto;
}

.spinner-container--meli {
  background: rgba(52, 70, 112, 0.24);
  backdrop-filter: blur(10px);
}

.spinner-meli-sheet {
  position: relative;
  width: 112px;
  height: 112px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.spinner-meli-sheet__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid rgba(52, 131, 250, 0.18);
  border-top-color: #3483fa;
  border-right-color: #fff159;
  box-shadow:
    0 0 0 10px rgba(255, 241, 89, 0.12),
    0 16px 30px rgba(0, 38, 108, 0.16);
  animation: meli-brand-ring-spin 0.95s linear infinite;
}

.spinner-meli-sheet__img {
  width: 66px;
  height: 66px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 12px rgba(0, 38, 108, 0.16));
}

.spinner {
  border: 3px solid cornflowerblue;
  border-radius: 50%;
  border-top: 8px solid #ffffff;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes meli-brand-ring-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* RESPUESTA ANDESMAR (SIN USO) */

.contenedorRespuesta {
  margin-top: 1rem;
  background-color: #e1f4e5;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.contenedorRespuesta img {
  width: 200px;
}

.contenedorRespuesta h2 {
  font-family: "Signika Negative", sans-serif;
  color: #32d554;
  margin-top: 0;
  padding-top: 1rem;
  font-size: 2rem;
}

.botonDescarga {
  font-family: "Signika Negative", sans-serif;
  font-weight: 800;
  margin-bottom: 1rem;
  font-size: 2rem;
  background-color: #32d554;
  color: white;
  border-radius: 15px;
  padding: 1rem;
}

.contenedorError {
  margin-top: 1rem;
  background-color: #52c6b8;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.contenedorError p {
  font-family: "Signika Negative", sans-serif;
  color: white;
  margin: 0;
}

.contenedorError img {
  width: 200px;
}

.mensajeErrorUndefinedContainer {
  margin-top: 1rem;
  background-color: red;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.mensajeErrorUndefinedContainer p {
  color: white;
  font-size: 2rem;
  font-weight: 600px;
}

/* FIN RESPUESTA ANDESMAR (SIN USO) */

/* ULTIMAS ETIQUETAS CONTENEDOR */
#ultimasEtiquetas {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  background-color: gray;
  border-radius: 0 0 10px 10px;
}

.ultimasEtiquetasTitulo {
  font-size: medium;
  font-family: "Signika Negative", sans-serif;
  background-color: #333;
  padding: 0.5rem;
  margin: 0;
  margin-top: 0.5rem;
  color: white;
}

.reDescarga {
  text-align: center;
  align-items: center;
  font-family: "Signika Negative", sans-serif;
  font-size: small;
  border-radius: 20px;
  font-weight: 400px;
  gap: 0.2rem;
  display: flex;
  background-color: #32305b;
  margin: 0.3rem;
  margin-top: 0;
  text-align: center;
  justify-content: baseline;
}

.reDescarga img {
  width: 20px;
  filter: invert(100%);
}

#ultimasEtiquetas button:last-child {
  color: white;
  font-weight: 800;
}

#ultimasEtiquetas button:last-child {
  text-align: center;
  align-items: center;
  filter: invert(0%);
  border: 2px dashed rgb(255, 255, 255);
  background-color: black;
  border-radius: 20px;
}

#ultimasEtiquetas button:last-child::before {
  text-align: center;
  content: "última";
  position: relative;
  top: 0;
  left: -2px;
  background-color: red;
  color: white;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  z-index: 1000;
}

/* FIN ULTIMAS ETIQUETAS CONTENEDOR */

/* BULTOS */
#respuesta2 {
  display: none;
  background-color: #349cfa;
  padding: 0.5rem;
  border-radius: 5px;
  color: white;
  font-weight: 600;
  margin-top: 0;
}

#respuestaNegativa {
  display: none;
  background-color: red;
  padding: 0.5rem;
  border-radius: 5px;
  color: white;
  font-weight: 600;
  margin-top: 0;
}

.nuevo {
  color: white;
}

.PaqID-Container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cliente-Container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.PaqID {
  border-radius: 10px 10px 0 0;
  width: fit-content;
  text-align: center;
  padding: 4px 8px 10px 8px;
  margin-bottom: -5px;
  margin-top: 0px;
  color: #ffffff;
  font-weight: 500;
  border: 1px solid cornflowerblue;
  background-color: rgb(255, 68, 0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fuente de macOS */
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  z-index: -100;
}

.cliente {
  width: 100%;
  text-align: center;
  padding: 8px;
  margin-bottom: -5px;
  color: indigo;
  font-weight: 500;
  border: 1px solid cornflowerblue;
  background-color: rgb(231, 220, 255);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fuente de macOS */
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  z-index: -100;
}

.cliente2 {
  width: fit-content;
  text-align: center;
  padding: 8px;
  padding-bottom: 3px;
  margin-bottom: 0px;
  color: indigo;
  font-weight: 500;
  border-radius: 12px 12px 0 0;
  border: 1px solid #ccc;
  border-bottom: none;
  background-color: rgb(231, 220, 255);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fuente de macOS */
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.clientePosventa {
  width: fit-content;
  text-align: center;
  padding: 8px;
  margin-bottom: -5px;
  margin-left: 20px;
  color: indigo;
  font-weight: 500;
  border-radius: 12px 12px 0 0;
  border: 1px solid #ccc;
  border-bottom: none;
  background-color: rgb(231, 220, 255);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fuente de macOS */
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  z-index: -1;
}

.clientePosventa-gris {
  width: fit-content;
  text-align: center;
  padding: 8px;
  margin-bottom: -5px;
  margin-left: 20px;
  color: grey;
  font-weight: 500;
  border-radius: 12px 12px 0 0;
  border: 1px solid #aaa;
  border-bottom: none;
  background-color: rgb(220, 220, 220);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fuente de macOS */
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  z-index: -1;
}

.clientePosventa-rojo {
  width: fit-content;
  text-align: center;
  padding: 8px;
  margin-bottom: -5px;
  margin-left: 20px;
  color: red;
  font-weight: 500;
  border-radius: 12px 12px 0 0;
  border: 1px solid #ff9999;
  border-bottom: none;
  background-color: rgb(255, 204, 204);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fuente de macOS */
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  z-index: -1;
}

.clientePosventa-orange {
  width: fit-content;
  text-align: center;
  padding: 8px;
  margin-bottom: -5px;
  margin-left: 20px;
  color: #ff8c00;
  font-weight: 500;
  border-radius: 12px 12px 0 0;
  border: 1px solid #ff8c00;
  border-bottom: none;
  background-color: rgb(254, 221, 164);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fuente de macOS */
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  z-index: -1;
}

.cliente3 {
  width: fit-content;
  text-align: center;
  padding: 8px 10px 15px 8px;
  margin-bottom: -10px;
  color: indigo;
  font-weight: 500;
  border-radius: 12px 12px 0 0;
  border: 1px solid #ccc;
  background-color: rgb(231, 220, 255);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fuente de macOS */
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  z-index: -100;
}

.apiSeguimiento .card-text:first-child {
  background-color: rgb(231, 239, 255);
  color: #007bff;
  font-weight: 600;
  padding: 10px;
  border-radius: 10px;
}

.cliente > img {
  margin-right: 5px;
}

.cliente > img {
  width: 30px;
}

.clientePosventa-gris > img {
  width: 30px;
}

.clientePosventa-rojo > img {
  width: 30px;
}

.cliente2 > img {
  width: 30px;
}

.clientePosventa > img {
  width: 30px;
}

.cliente3 > img {
  width: 30px;
}

.info-paq {
  margin-right: 5px;
}

#bultos {
  background-color: #bebebe;
}

#mensajePersonalizado {
  display: none;
}

.contenedorDatosCliente {
  background: whitesmoke;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 16px 0;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #d2d2d7;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: #1d1d1f;
}

#observaciones {
  text-transform: lowercase;
  height: 6rem;
  border: dashed 2px #349cfa;
  background-color: rgb(240, 251, 253);
  border-radius: 5px !important;
}

.custom-tooltip {
  color: yellow !important;
  max-width: none;
}

#tipoElectrodomestico {
  border-radius: 5px !important;
  color: whitesmoke;
  background-color: #349cfa;
  border: 1px solid #349cfa;
  font-weight: 600;
  margin-bottom: 10px;
}

.tipoElectrodomesticoBna {
  font-family: "Roboto", sans-serif;
  color: #333;
  font-weight: 600 !important;
  background-color: #e6f7ff;
  border: 1px solid #66b2ff;
  border-radius: 12px !important;
  padding: 8;
  font-weight: 500;
  margin-bottom: 5px !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
  position: relative;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tipoElectrodomesticoBna:hover {
  background-color: #cceeff;
  border-color: #3399ff;
}

.tipoElectrodomesticoBna:focus {
  outline: none;
  border-color: #0056b3;
  background-color: #b3e0ff;
}

.tipoElectrodomesticoBna::after {
  content: "\25BC"; /* Down arrow */
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
  color: #333;
}

.mb-2 {
  column-gap: 0.5rem;
}

.mostrarMasButton {
  border-radius: 20px;
  color: white;
  background-color: red;
  margin-left: 0.3rem;
  padding: 10px;
  margin-bottom: 0.3rem;
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.135); /* Ajusta los valores según tus preferencias */
}

.input-group-text {
  border-radius: 6px 6px 0 0;
  width: 100%;
  background-color: cornflowerblue;
  color: white;
  justify-content: center;
  text-align: center;
}

.input-group-text > i {
  font-size: 1rem;
}

.card-body-medidas {
  margin-top: 5px;
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.3);
  border: 1px solid grey;
  border-radius: 10px;
  padding-inline: 1rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  margin-bottom: 5px;
}

.form-control-medidas {
  color: cornflowerblue;
  border: none;
  margin-bottom: 0;
  border-radius: 0;
}

.bultoImput {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 0 !important;
}

.bultoImput > .input-group {
  flex: 1 1 0;
  max-width: 62px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}

.bultoImput > .input-group[style*="display: none"] {
  display: none !important;
}

.bultoImput > .input-group .input-group-text {
  width: 100%;
  height: 38px;
  padding: 0;
  border-radius: 8px 8px 0 0;
}

.bultoImput > .input-group .form-control-medidas {
  width: 100%;
  height: 38px;
  border: 1px solid #d1d5db;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 6px 7px;
  font-size: 0.95rem;
  line-height: 1;
  box-sizing: border-box;
}

.bultoImput > .input-group .form-control-medidas::-webkit-outer-spin-button,
.bultoImput > .input-group .form-control-medidas::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.bultoImput > .input-group .form-control-medidas[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.alert-success {
  margin-bottom: 5px;
}

.andesmarBNA {
  margin-top: 2rem !important;
}

/* FIN BULTOS */

.idModalDiv {
  display: none;
}

#reclamarButton {
  display: none;
}

.btnFacturar {
  text-align: center;
}

#deptoDestinatario,
#pisolDestinatario,
#codigoPostalDestinatario,
#emailDestinatario,
#localidad {
  margin-bottom: 0;
}

.PisoyDepto {
  border: dashed 2px #0a84ff;
}

.hidden {
  display: none !important;
}

/* VOLUMENES ESTILO iOS */
.containerVolumen {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: linear-gradient(135deg, #e0f2ff, #b2dffb);
  border-radius: 0 0 10px 10px;
  margin-bottom: 10px;
  margin-top: -12px;
  padding: 10px;
}

.volumen-container {
  border: 1px solid #a3cde6;
  border-radius: 12px;
  padding: 15px;
  margin: 5px;
  text-align: center;
  background: linear-gradient(135deg, #f0faff, #d0eaff);
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.volumen-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.volumen-container > img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.volumen-label {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
  color: #003366;
}

#volumenTotalcm,
#volumenTotal {
  color: #005599;
  font-size: 1.2rem;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
}

.cubic {
  font-size: 0.9rem;
  font-family: "Chakra Petch", sans-serif;
  color: #0077cc;
}

.provincia {
  display: none;
}
/* FIN VOLUMENES */

/* FOOTER */

.logo-novogar {
  width: 100px;
  padding: 0.5rem;
}

/* Footer principal movido a footer.css */

.logo-foot {
  width: 120px;
}

#Meli-trends {
  width: 40px;
}

.www {
  font-family: "Modica Oft";
  font-size: larger;
}

/* FIN FOOTER */

/* ============================================================
   RESULT CARDS — Andreani / Andesmar / Cruz del Sur
   Diseño compacto con header tinteado de marca + zona de acción.
   Soporta dark mode.
   ============================================================ */

#descargaAndreani,
#descargaAndesmar,
#descargaCruzDelSur {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  padding: 0 !important;
  margin: 1rem 0 0.5rem !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

/* Reset de todos los hijos directos — matamos márgenes/paddings de Bootstrap
   para que el espaciado sea 100% controlado por nuestras reglas. */
#descargaAndreani > *,
#descargaAndesmar > *,
#descargaCruzDelSur > * {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#descargaAndreani > *.mt-3,
#descargaAndesmar > *.mt-3,
#descargaCruzDelSur > *.mt-3 {
  margin-top: 0 !important;
}

/* Header tinteado con color de marca (banda superior con título dentro) */
#descargaAndreani > .row:first-child,
#descargaAndesmar > .row:first-child,
#descargaCruzDelSur > .row:first-child {
  padding: 0.6rem 0.85rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#descargaAndreani > .row:first-child {
  background: linear-gradient(90deg, rgba(252, 82, 44, 0.12) 0%, rgba(252, 82, 44, 0.04) 100%);
  border-bottom: 1px solid rgba(252, 82, 44, 0.2);
}

#descargaAndesmar > .row:first-child {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.04) 100%);
  border-bottom: 1px solid rgba(37, 99, 235, 0.2);
}

#descargaCruzDelSur > .row:first-child {
  background: linear-gradient(90deg, rgba(30, 64, 175, 0.12) 0%, rgba(30, 64, 175, 0.04) 100%);
  border-bottom: 1px solid rgba(30, 64, 175, 0.22);
}

#descargaAndreani > .row:first-child > .col-12,
#descargaAndesmar > .row:first-child > .col-12,
#descargaCruzDelSur > .row:first-child > .col-12 {
  padding: 0 !important;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

/* Título del header — plano, sin pill ni borde */
#titleAndreani,
#titleAndesmar,
#titleCruzDelSur {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
  text-align: center;
}

#titleAndreani {
  color: #b91c1c;
}

#titleAndesmar {
  color: #1d4ed8;
}

#titleCruzDelSur {
  color: var(--sl-color-primary-800);
}

#titleAndreani > span,
#titleAndesmar > span,
#titleCruzDelSur > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Ocultar el GIF con fondo blanco — reemplazamos con un ícono limpio via ::before */
#titleAndreani .surprise,
#titleAndesmar .surprise,
#titleCruzDelSur .surprise {
  display: none !important;
}

#titleAndreani > span::before,
#titleAndesmar > span::before,
#titleCruzDelSur > span::before {
  content: "\F30A";
  font-family: "bootstrap-icons" !important;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
}

#titleAndreani > span::before {
  background: rgba(220, 38, 38, 0.14);
  color: #b91c1c;
}

#titleAndesmar > span::before {
  background: rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
}

#titleCruzDelSur > span::before {
  background: rgba(30, 64, 175, 0.14);
  color: #1e3a8a;
}

[data-theme="dark"] #titleAndreani > span::before {
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
}

[data-theme="dark"] #titleAndesmar > span::before {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
}

[data-theme="dark"] #titleCruzDelSur > span::before {
  background: rgba(96, 165, 250, 0.22);
  color: #bfdbfe;
}

#numeroDeEnvio,
#numeroDeEnvioCruzDelSur {
  font-weight: 600;
  opacity: 0.85;
}

/* Fila del nombre del destinatario (sólo si tiene contenido visible) */
#descargaAndreani > .row:not(:first-child):has(> .col-12 > h4:not([style*="display: none"])),
#descargaAndesmar > .row:not(:first-child):has(> .col-12 > h4:not([style*="display: none"])),
#descargaCruzDelSur > .row:not(:first-child):has(> .col-12 > h4:not([style*="display: none"])) {
  padding: 0.6rem 0.85rem 0 !important;
}

#titleAndreaniName,
#nombreAndreani,
#titleAndesmarName,
#nombreCruzDelSur {
  margin: 0 !important;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  text-align: center;
  font-style: normal !important;
}

/* Cuerpo (acción = botón / spinner) */
#apiResponse,
#apiResponseCruzDelSur {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem !important;
}

/* Fila que contiene el botón (Andesmar) */
#descargaAndesmar > .row:last-child {
  padding: 0.75rem 0.85rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Fila del error (Andreani / CDS) — sólo con contenido */
#descargaAndreani > .row:last-child:has(#errorResponse:not(:empty)),
#descargaCruzDelSur > .row:last-child:has(#errorResponseCruzDelSur:not(:empty)) {
  padding: 0 0.85rem 0.85rem !important;
}

/* Cuando el error está vacío, colapsamos la fila entera */
#descargaAndreani > .row:last-child:has(#errorResponse:empty),
#descargaCruzDelSur > .row:last-child:has(#errorResponseCruzDelSur:empty) {
  display: none !important;
}

/* === BUG FIX: cuando hay error, ocultamos el botón de "Cargando..." === */
#descargaAndreani:has(#errorResponse:not(:empty)) #apiResponse {
  display: none !important;
}

#descargaCruzDelSur:has(#errorResponseCruzDelSur:not(:empty)) #apiResponseCruzDelSur {
  display: none !important;
}

/* Botones iOS pill */
#descargaAndreani .btn,
#descargaAndesmar .btn,
#descargaCruzDelSur .btn {
  border-radius: 999px !important;
  padding: 0.5rem 1.1rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  letter-spacing: -0.01em;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease !important;
  margin: 0 !important;
  height: auto !important;
  width: auto !important;
}

#descargaAndreani .btn-danger {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28) !important;
}

#descargaAndreani .btn-danger:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.38) !important;
}

#descargaAndesmar .btn-primary {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28) !important;
}

#descargaAndesmar .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.38) !important;
}

#descargaCruzDelSur .btn-dark-blue {
  background: linear-gradient(180deg, #1e40af 0%, #0c1e5e 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.32) !important;
}

#descargaCruzDelSur .btn-dark-blue:hover:not(:disabled) {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.45) !important;
}

.btn-dark-blue > i,
.btn-danger > i,
.btn-primary > i,
.btn-success > i {
  font-size: 0.95rem;
}

.btn-dark-blue > span {
  margin-right: 0;
}

#descargaAndreani .btn:disabled,
#descargaCruzDelSur .btn:disabled {
  opacity: 0.8;
  cursor: wait;
}

/* Mensajes de error / info */
#errorResponse,
#errorResponseCruzDelSur {
  font-size: 0.78rem;
  font-weight: 500;
  color: #b91c1c !important;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  word-break: break-word;
  line-height: 1.4;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

#errorResponse::before,
#errorResponseCruzDelSur::before {
  content: "\F623";
  font-family: "bootstrap-icons" !important;
  font-size: 0.95rem;
  line-height: 1.2;
  flex-shrink: 0;
}

#errorResponseCruzDelSur {
  color: #1e3a8a !important;
  background: rgba(30, 64, 175, 0.08);
  border-color: rgba(30, 64, 175, 0.22);
}

#errorResponse:empty,
#errorResponseCruzDelSur:empty {
  display: none;
}

/* "Corrija remito" — mensaje informativo arriba del botón */
.corrija-remito {
  margin: 0 !important;
  padding: 0 0.85rem !important;
  font-size: 0.82rem;
  font-weight: 500;
  color: #475569;
  text-align: center;
  transition: color 0.18s ease;
}

.corrija-remito .btn {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: #475569 !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 0.3rem 0.6rem !important;
}

.corrija-remito .btn:hover {
  background: transparent !important;
  color: #0f172a !important;
}

/* ===== Dark mode ===== */
[data-theme="dark"] #descargaAndreani,
[data-theme="dark"] #descargaAndesmar,
[data-theme="dark"] #descargaCruzDelSur {
  background: #1e293b;
  border-color: rgba(71, 85, 105, 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] #descargaAndreani > .row:first-child {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.22) 0%, rgba(239, 68, 68, 0.08) 100%);
  border-bottom-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] #descargaAndesmar > .row:first-child {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0.08) 100%);
  border-bottom-color: rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] #descargaCruzDelSur > .row:first-child {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.28) 0%, rgba(37, 99, 235, 0.1) 100%);
  border-bottom-color: rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] #titleAndreani {
  color: #fca5a5;
}

[data-theme="dark"] #titleAndesmar {
  color: #93c5fd;
}

[data-theme="dark"] #titleCruzDelSur {
  color: #bfdbfe;
}

[data-theme="dark"] #titleAndreaniName,
[data-theme="dark"] #nombreAndreani,
[data-theme="dark"] #titleAndesmarName,
[data-theme="dark"] #nombreCruzDelSur {
  color: #cbd5e1 !important;
}

[data-theme="dark"] #errorResponse {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.32);
  color: #fca5a5 !important;
}

[data-theme="dark"] #errorResponseCruzDelSur {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(96, 165, 250, 0.32);
  color: #bfdbfe !important;
}

[data-theme="dark"] .corrija-remito,
[data-theme="dark"] .corrija-remito .btn {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .corrija-remito:hover,
[data-theme="dark"] .corrija-remito .btn:hover {
  color: #f1f5f9 !important;
}

.error {
  width: 250px;
  padding-bottom: 400px;
}

.errorp {
  color: red;
  font-weight: 900;
  font-size: 1.2rem;
  font-family: "Chakra Petch", sans-serif;
}

.surprise {
  width: 35px;
}

.btn-warning {
  margin: 0 !important;
}

@media (max-width: 490px) {
  .btn-warning {
    margin-bottom: 10px !important;
  }
}

/* FIN BOTON DESCARGA */

/* COTIZADOR */

.grid-container {
  border-radius: 15px;
  display: grid;
  grid-template-columns: 1fr; /* Una columna para ancho completo */
  gap: 15px;
  padding: 20px;
  background-color: #f7f9fc;
  box-sizing: border-box;
}

.cotizacion-container {
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  background: #ffffff;
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Pequeño cuadrado para el ícono */
.icono-transporte {
  padding: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.icono-transporte > img {
  width: 35px;
}

/* Estilos específicos por transporte */
.andreani {
  border: 1px solid #e53935;
  background: linear-gradient(135deg, #ffebee, #ffcdd2, #ff8a80, #e57373);
}

.andreani > span {
  color: rgb(152, 0, 0);
}

.andreani .icono-transporte {
  background: #e53935; /* Rojo */
}

.andesmar {
  border: 1px solid #1e88e5;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb, #90caf9, #42a5f5);
}

.andesmar > span {
  color: #00539b;
  border-radius: 5px;
  padding: 5px;
}

.andesmar .icono-transporte {
  background: #1e88e5; /* Azul */
}

.tercer-transporte {
  border: 1px solid #8e24aa;
  background: linear-gradient(135deg, #f3e5f5, #e1bee7, #ce93d8, #ab47bc);
}

.tercer-transporte > span {
  color: #8e24aa;
}

.tercer-transporte .icono-transporte {
  background: #8e24aa; /* Lila */
}

.cuarto-transporte {
  border: 1px solid #0d47a1;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb, #629fd1, #1a73e8);
}

.cuarto-transporte > span {
  color: #0d47a1;
  border-radius: 5px;
  padding: 5px;
}

.cuarto-transporte .icono-transporte {
  background: #0d47a1;
}

.sucursal-container {
  margin-top: 5px;
  border-radius: 10px;
  background-color: #ffffff;
}

.sucursal-details {
  padding: 10px;
  border: 1px solid #0d47a1;
  border-radius: 8px;
}

.sucursal-details h5 {
  background-color: #0d47a1;
  width: fit-content;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  color: white;
  margin-bottom: 10px;
}

.cds-img {
  width: 200px;
  margin-bottom: -15px;
  margin-top: -25px;
}

.sucursal-details h4 {
  font-size: 22px;
  font-weight: 600;
  color: #0d47a1;
}

.sucursal-details p {
  font-weight: 400;
  font-size: 14px;
  margin: 5px;
  color: #333;
}

.bi-clock-fill,
.bi-telephone-fill,
.bi-house-fill {
  font-weight: 900;
  font-size: x-large;
  color: #0d47a1;
}

.reloj-e3 {
  color: #9f5f00;
}

.check-e3 {
  color: #168732;
}

.check-e3-transferencia {
  color: #591336;
}

.cancel-e3 {
  color: #931c15;
}

.error-e3 {
  color: #553ba0;
}

.proceso-e3 {
  color: #5a4900;
}

.tranferencia-e3 {
  color: #5a0020;
}

.transferencia-ok-e3 {
  color: #065a1b;
}

.map {
  border-radius: 10px;
  margin-top: 10px;
  height: 150px !important;
  border: 2px dashed #0d47a1;
}

.valor-cotizacion {
  color: #333;
  font-size: 1.5rem;
  font-family: "Chakra Petch", sans-serif !important;
  font-weight: 700;
}

.plazo-ios {
  color: #0000ff; /* Gris típico de iOS */
  font-size: 0.85rem; /* Tamaño de texto más pequeño */
  font-weight: 400; /* Fuente fina */
  font-style: normal;
  margin-top: 4px; /* Espaciado superior */
  display: block; /* Asegura que el plazo esté debajo */
  text-align: left; /* Alineado a la izquierda */
  letter-spacing: 0.2px; /* Espaciado entre letras para mejor legibilidad */
}

.cotizacion-label {
  font-weight: 600;
  font-size: 1.2rem;
  color: #333;
}

.cotizacion-label .imgParcel {
  width: 170px;
  opacity: 0.3;
  overflow: hidden;
  display: none;
}

/* Título */
.titulo-cotizacion {
  grid-column: span 1;
  background-color: grey;
  color: white;
  border-radius: 5px;
  width: fit-content;
  padding: 0.5rem;
  margin: -25px auto 0px;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
}

/* FIN COTIZADOR */

/* CARDS BUSCADOR */

.card {
  transition: transform 0.2s;
  cursor: pointer;
  margin-bottom: 25px !important;
}

.card:hover {
  transform: scale(1.05);
}

.card-title {
  font-family: "Reddit Sans Condensed", sans-serif;
  text-transform: capitalize;
  color: rgb(55, 119, 238);
  font-weight: 400 !important;
  font-size: 1.3rem;
  margin-bottom: 5px;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ultima-palabra {
  font-weight: 700;
}

.card-title-meli {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  text-transform: capitalize;
  color: rgb(55, 119, 238);
  font-weight: 400 !important;
  font-size: 1.5rem;
  margin-bottom: 5px;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

p.card-text {
  margin-bottom: 10px;
}

.cpLocalidad {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-transform: capitalize;
  font-size: 0.8rem;
  font-weight: 400 !important;
  width: fit-content;
  max-width: 100%;
  background-color: rgb(76, 76, 76);
  color: white;
  border-radius: 8px;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-mark {
  margin-right: 5px !important;
  height: 100%;
}

.email-container {
  text-wrap: wrap !important;
}
.cpLocalidadBna {
  max-width: 70%;
  font-family: "Chakra Petch", sans-serif !important;
  padding: 6px 12px !important;
  font-size: 0.85rem;
  font-weight: 400 !important;
  width: fit-content;
  background-color: cornflowerblue;
  border: solid 1px #007aff;
  color: white;
  border-radius: 18px;
  margin-bottom: 8px !important;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.cpLocalidad-meli {
  font-family: "Roboto Condensed", sans-serif;
  padding: 6px 12px !important;
  font-size: 0.85rem;
  font-weight: 400 !important;
  width: fit-content;
  background-color: cornflowerblue;
  border: solid 1px #007aff;
  color: white;
  border-radius: 18px;
  margin-bottom: 8px !important;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.correo-meli {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px !important;
  font-size: 0.85rem;
  width: fit-content;
  border-radius: 25px;
  margin-bottom: 8px !important;
  overflow: hidden;
}

.correo-andesmar {
  min-width: 30px;
  min-height: 30px;
  background-color: #007aff;
  color: white;
  border: solid 1px #007aff;
}

.correo-cds {
  min-width: 30px;
  min-height: 30px;
  background-color: #003366;
  color: white;
  border: solid 1px #03284d;
}

.correo-oca {
  min-width: 30px;
  min-height: 30px;
  background-color: #8e24aa;
  color: white;
  border: solid 1px #761591;
}

.correo-andreani {
  min-width: 30px;
  min-height: 30px;
  background-color: #ff3b30;
  color: white;
  border: solid 1px #ff3b30;
}

.correo-full {
  min-width: 30px;
  min-height: 30px;
  background-color: #43a047;
  color: white;
  border: solid 1px #43a047;
}

.correo-mercado-libre {
  min-width: 30px;
  background-color: #ffe600;
  color: black;
  border: solid 1px cornflowerblue;
}

.correo-novogar-simbel {
  min-width: 30px;
  background: linear-gradient(360deg, #fed1d1, #ffffff);
  color: rgb(255, 255, 255);
  border: solid 1px cornflowerblue;
}

.correo-novogar,
.correo-santafe,
.correo-rafaela,
.correo-sannicolas {
  background-color: green;
  color: white;
  border: solid 1px greenyellow;
  min-width: fit-content;
}

.logistica-propia-sweet-alert {
  background-color: rgb(244, 244, 179);
  padding: 10px;
  border-radius: 20px;
}

.meli-box1 {
  display: flex;
  gap: 5px;
}

p.card-text:nth-child(3) {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-weight: 300;
  margin-bottom: 5px;
}

p.card-text:nth-child(4) {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-weight: 300;
  margin-bottom: 5px;
}

p.card-text:nth-child(5) {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-weight: 300;
  margin-bottom: 5px;
}

p.card-text:nth-child(6) {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-weight: 300;
  margin-bottom: 5px;
}

p.card-text:nth-child(7) {
  color: green;
  font-family: "Reddit Sans Condensed", sans-serif;
  font-weight: 400;
  margin-bottom: 0;
}

p.card-text:nth-child(8) {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-weight: 300;
  margin-bottom: 5px;
}

p.card-text-bna {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  font-weight: 300;
  margin-bottom: 5px;
}

p.card-text-bna2 {
  color: green;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  font-weight: 300;
  margin-bottom: 5px;
}

p.card-text:nth-child(9) {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-weight: 300;
  margin-bottom: 5px;
}

.pago {
  background-color: white;
  border-radius: 10px;
  border-bottom: solid 2px cornflowerblue;
  padding: 0.5rem;
  font-size: 14px !important;
}

.pago > p {
  font-size: 14px !important;
}

.contenedor-pago {
  background-color: rgb(255, 231, 231) !important;
}

.facturacion {
  background-color: white;
  border-radius: 10px;
  border-bottom: solid 2px cornflowerblue;
  padding: 0.5rem;
}

.facturacion > p {
  font-size: 14px !important;
  margin-bottom: -5px;
}

.facturacion p:nth-child(1) {
  color: white;
  font-weight: 800;
  background-color: red;
  width: fit-content;
  border-radius: 5px;
  margin-bottom: 5px;
  padding: 0.2rem;
}

.pago p {
  font-family: "Reddit Sans Condensed", sans-serif;
}

input[disabled] {
  border: none !important;
}

.strong-costo {
  font-weight: 900;
  color: green;
  border-bottom: solid 1px green;
  background-color: rgb(225, 255, 225);
  padding: 5px;
  border-radius: 5px;
}

.strong-costo2 {
  font-weight: 900;
  color: green;
}

.pago p:nth-child(9) {
  color: white;
  font-weight: 800;
  background-color: red;
  width: fit-content;
  border-radius: 5px;
  font-size: 16px !important;
  padding: 0.2rem;
}

.card-text-pago {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-weight: 300;
  margin-bottom: 5px;
}

.card-text-facturacion {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-weight: 300;
  margin-bottom: 5px;
}

.descripcion-div {
  margin-bottom: 8px;
}

.contenedorPrompter {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #fff; /* Opcional */
}

.orden {
  display: inline-block;
  white-space: nowrap;
  font-family: "Rubik", sans-serif;
  font-size: x-large;
  font-weight: 400;
  margin: 0;
}

/* Animación solo si se le agrega la clase */
.scroll {
  animation: mover 6s linear infinite;
}

@keyframes mover {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.contenedorRemito {
  font-family: "Chakra Petch", sans-serif !important;
  margin-bottom: 10px !important;
  text-align: center;
  color: #333;
  background-color: #ffffff;
  border: 1px solid #ccc;
  font-weight: 500 !important;
  padding: 10px 15px;
  border-radius: 15px 15px 0 0;
  margin-bottom: -5px !important;
}

.remitoCard {
  margin-bottom: 10px !important;
  text-align: center;
  padding: 10px;
  width: fit-content;
  border-radius: 12px;
  border: 1px solid cornflowerblue;
  background-color: #ffffff;
  color: #007aff;
  font-size: 1.1rem;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.lock-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.little-card-meli > p {
  font-family: "Reddit Sans Condensed", sans-serif;
  text-transform: capitalize;
  font-size: 0.9rem;
  font-weight: 300;
  margin-bottom: 0.5rem;
}

.collapps-envio-meli {
  margin-bottom: 0.5rem;
}

.btn-warning {
  margin-bottom: 0 !important;
}

div.card-body > p > i {
  font-size: 1rem;
}

.spinner-border {
  margin: auto;
}

#spinner {
  margin-bottom: 1.5rem;
  color: red;
  display: flex; /* Mostrar el spinner al cargar */
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .card {
    margin: 10px;
  }
}

.spinner-border {
  width: 1.2rem;
  height: 1.2rem;
  border-width: 0.5em;
}

.spinner-border-porcentaje {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 0.3em;
}

.spinner-border2 {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 0.5em;
}

.spinner-border37892 {
  width: 116px;
  height: 116px;
  border-width: 0;
  position: relative;
  margin: 24px auto 40px;
  color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner-border37892::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0) 58%,
      rgba(255, 99, 99, 0.12) 59%,
      rgba(255, 99, 99, 0.12) 64%,
      rgba(255, 255, 255, 0) 65%
    ),
    conic-gradient(
      from 220deg,
      rgba(255, 59, 48, 0) 0deg,
      rgba(255, 59, 48, 0) 210deg,
      #ffc9c4 252deg,
      #ff4d4d 300deg,
      #22c55e 334deg,
      rgba(34, 197, 94, 0.14) 360deg
    );
  box-shadow:
    0 12px 20px rgba(255, 77, 77, 0.14),
    inset 0 0 0 1px rgba(255, 77, 77, 0.08);
  animation: spinner37892Spin 1.1s linear infinite;
}

.spinner-border37892::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, #fff8f8 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 120, 120, 0.18),
    0 4px 12px rgba(255, 77, 77, 0.08);
  z-index: 0;
}

/* Variante e3 — cian + magenta, sobreescribe el degradé rojo/verde default. */
.spinner-border37892--e3::before {
  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0) 58%,
      rgba(34, 211, 238, 0.18) 59%,
      rgba(217, 70, 239, 0.18) 64%,
      rgba(255, 255, 255, 0) 65%
    ),
    conic-gradient(
      from 220deg,
      rgba(34, 211, 238, 0) 0deg,
      rgba(34, 211, 238, 0) 205deg,
      #67e8f9 245deg,
      #22d3ee 280deg,
      #c026d3 320deg,
      #d946ef 345deg,
      rgba(217, 70, 239, 0.16) 360deg
    ) !important;
  box-shadow:
    0 10px 22px rgba(217, 70, 239, 0.18),
    inset 0 0 0 1px rgba(165, 243, 252, 0.28) !important;
}
.spinner-border37892--e3::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.99) 0%, #ecfeff 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(165, 243, 252, 0.4),
    0 4px 14px rgba(217, 70, 239, 0.15) !important;
}
.spinner-border37892--e3 .spinner-image {
  filter: drop-shadow(0 3px 9px rgba(217, 70, 239, 0.22));
}

.meli-search-spinner {
  display: none;
}

.meli-brand-page #spinner {
  color: #3483fa;
}

.meli-brand-page .spinner-border37892.meli-search-spinner {
  width: 116px;
  height: 116px;
  border-width: 0;
  position: relative;
  margin: 24px auto 40px;
  color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meli-brand-page .spinner-border37892.meli-search-spinner::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0) 58%,
      rgba(255, 241, 89, 0.16) 59%,
      rgba(255, 241, 89, 0.16) 64%,
      rgba(255, 255, 255, 0) 65%
    ),
    conic-gradient(
      from 220deg,
      rgba(52, 131, 250, 0) 0deg,
      rgba(52, 131, 250, 0) 210deg,
      #7db8ff 252deg,
      #3483fa 300deg,
      #fff159 332deg,
      rgba(255, 241, 89, 0.2) 360deg
    );
  box-shadow:
    0 12px 20px rgba(52, 131, 250, 0.16),
    inset 0 0 0 1px rgba(52, 131, 250, 0.08);
  animation: spinner37892Spin 1.1s linear infinite;
}

.meli-brand-page .spinner-border37892.meli-search-spinner::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, #fff5f5 100%);
  box-shadow:
    inset 0 0 0 1px rgba(252, 165, 165, 0.22),
    0 4px 12px rgba(239, 68, 68, 0.1);
  z-index: 0;
}

.meli-search-placeholder {
  position: relative;
  overflow: hidden;
  width: min(100%, 1160px);
  margin: 0 auto;
  min-height: 390px;
  display: grid;
  align-items: start;
  justify-items: stretch;
  gap: 24px;
  padding: 34px 34px 28px;
  border: 1px dashed rgba(96, 165, 250, 0.42);
  border-radius: 34px;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 32%),
    radial-gradient(circle at bottom right, rgba(245, 158, 11, 0.06), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(248, 250, 252, 0.985));
  box-shadow: none;
  text-align: center;
  isolation: isolate;
}

.meli-search-placeholder::before,
.meli-search-placeholder::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
}

.meli-search-placeholder::before {
  width: 180px;
  height: 180px;
  top: -56px;
  left: -40px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0));
}

.meli-search-placeholder::after {
  width: 150px;
  height: 150px;
  right: -36px;
  bottom: -44px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0));
}

.meli-search-placeholder__media,
.meli-search-placeholder__content {
  position: relative;
  z-index: 1;
}

.meli-search-placeholder__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.meli-search-placeholder__gif {
  width: min(258px, 58vw);
  max-width: 258px;
  height: auto;
  display: block;
  filter: none;
  opacity: 1;
  transition: opacity 0.22s ease;
}

.meli-search-placeholder__media.is-loading .meli-search-placeholder__gif {
  opacity: 0;
}

.meli-search-placeholder__content {
  display: grid;
  gap: 6px;
  justify-items: center;
  max-width: 540px;
  justify-self: center;
}

.meli-search-placeholder__kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.14);
  font-family: "Inter", sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1d4ed8;
}

.meli-search-placeholder__title {
  max-width: 15ch;
  font-family: "Inter", sans-serif;
  font-size: clamp(1.16rem, 2.1vw, 1.72rem);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #0f172a;
}

.meli-search-placeholder__text {
  max-width: 48ch;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #475569;
}

.meli-search-placeholder__hero {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.meli-meta-spinner {
  width: 98px;
  height: 98px;
  border-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  box-shadow: none;
}

.meli-meta-spinner--hero {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 0;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
  pointer-events: none;
}

.meli-search-placeholder__media:not(.is-loading) .meli-meta-spinner--hero {
  opacity: 0;
  visibility: hidden;
}

.meli-meta-spinner__img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  animation: none;
  filter: none;
}

.meli-last9-section {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.meli-last9-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  text-align: left;
}

.meli-last9-section__copy {
  display: grid;
  gap: 4px;
}

.meli-last9-section__eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.meli-last9-section__title {
  font-family: "Inter", sans-serif;
  font-size: 1.15rem;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.meli-last9-section__badge {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(191, 219, 254, 0.9);
  background: rgba(239, 246, 255, 0.9);
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  color: #1d4ed8;
}

.meli-last9-section__hint {
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #64748b;
  text-align: left;
  max-width: 60ch;
}

.meli-last9-carousel {
  position: relative;
  padding-top: 4px;
}

.meli-last9-carousel::before,
.meli-last9-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52px;
  z-index: 2;
  pointer-events: none;
}

.meli-last9-carousel::before {
  left: 0;
  background: linear-gradient(90deg, rgba(248, 250, 252, 0.98), rgba(248, 250, 252, 0));
}

.meli-last9-carousel::after {
  right: 0;
  background: linear-gradient(270deg, rgba(248, 250, 252, 0.98), rgba(248, 250, 252, 0));
}

.meli-last9-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 10px;
}

.meli-last9-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.meli-last9-carousel__track {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  min-width: 100%;
}

.meli-last9-carousel.is-static .meli-last9-carousel__track {
  width: 100%;
  flex-wrap: wrap;
}

.meli-last9-card {
  width: 246px;
  min-width: 246px;
  display: grid;
  gap: 0;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #ededed;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  text-align: left;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.meli-last9-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.16s ease;
  z-index: 3;
}

.meli-last9-card:hover {
  transform: translateY(-2px);
  border-color: #e0e0e0;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.meli-last9-card:hover::after {
  border-color: #3483fa;
}

.meli-last9-card--loading {
  pointer-events: none;
}

.meli-last9-card__media {
  position: relative;
  height: 182px;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
  padding: 18px 16px 14px;
}

.meli-last9-card__media.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.meli-last9-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.meli-last9-card__spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, rgba(255, 241, 89, 0.14), rgba(255, 255, 255, 0.92) 62%),
    rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(4px);
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
  z-index: 2;
}

.meli-last9-card__spinner::before {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(52, 131, 250, 0.18);
  border-top-color: #3483fa;
  border-right-color: #fff159;
  box-shadow: 0 0 0 5px rgba(255, 241, 89, 0.16);
  animation: meli-brand-ring-spin 0.9s linear infinite;
}

.meli-last9-card__media:not(.is-loading) .meli-last9-card__spinner {
  opacity: 0;
  visibility: hidden;
}

.meli-last9-card__media .meli-meta-spinner__img {
  width: 28px;
  height: 28px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 3px 8px rgba(0, 38, 108, 0.18));
}

.meli-last9-card__image-fallback {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 1.4rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}

.meli-last9-card__body {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px 16px 10px;
  justify-items: start;
}

.meli-last9-card__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.meli-last9-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  background: #3483fa;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.meli-last9-card__badge--time {
  background: #fff;
  color: #3483fa;
  border: 1px solid #d6e6ff;
  text-transform: none;
}

.meli-last9-card__badge--ghost {
  background: rgba(226, 232, 240, 0.8);
  color: #475569;
}

.meli-last9-card__title {
  min-height: 2.6em;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 500;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meli-last9-card__seller {
  width: 100%;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-size: 0.88rem;
  line-height: 1.2;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meli-last9-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

.meli-last9-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  color: #666;
}

.meli-last9-card__meta span:first-child {
  text-align: left;
}

.meli-last9-card__meta--soft {
  color: #666;
  font-size: 0.75rem;
  font-weight: 500;
}

.meli-last9-card__meta span:last-child {
  text-align: right;
}

.meli-last9-card__price {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #333;
}

.meli-last9-card__shipping {
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 0.93rem;
  line-height: 1.3;
  color: #00a650;
}

.meli-last9-card__pack {
  width: 100%;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  line-height: 1.3;
  color: #00a650;
  font-weight: 600;
}

.meli-last9-card__pack--muted {
  color: #f97316;
}

.meli-last9-card__footer {
  margin-top: auto;
  padding: 0 16px 14px;
}

.meli-last9-card__button {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #e3edfb;
  color: #3483fa;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}

.meli-last9-card__button:hover {
  transform: none;
  background: #d9e7fa;
  color: #2968c8;
}

.meli-last9-card__button.is-loading,
.meli-last9-card__button:disabled {
  cursor: default;
  transform: none;
  background: #f5f5f5;
  color: #999;
}

.meli-last9-card__button-spinner {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.meli-last9-card__button-spinner::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(52, 131, 250, 0.18);
  border-top-color: #3483fa;
  border-right-color: #fff159;
  animation: meli-brand-ring-spin 0.85s linear infinite;
}

.meli-last9-card__button-spinner .meli-meta-spinner__img {
  width: 12px;
  height: 12px;
  position: relative;
  z-index: 1;
}

.meli-last9-card__skeleton {
  display: block;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(226, 232, 240, 0.9),
    rgba(241, 245, 249, 0.96),
    rgba(226, 232, 240, 0.9)
  );
  background-size: 200% 100%;
  animation: meli-last9-skeleton 1.25s ease-in-out infinite;
}

.meli-last9-card__skeleton--short {
  width: 42%;
  height: 24px;
}

.meli-last9-card__skeleton--title {
  width: 86%;
  height: 38px;
  border-radius: 14px;
}

.meli-last9-card__skeleton--line {
  width: 100%;
  height: 14px;
}

.meli-last9-empty {
  padding: 22px 18px;
  border-radius: 18px;
  text-align: center;
  background: rgba(248, 250, 252, 0.92);
  border: 1px dashed rgba(148, 163, 184, 0.35);
  font-family: "Inter", sans-serif;
  color: #64748b;
}

.meli-search-placeholder__chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.meli-search-placeholder__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px dashed rgba(148, 163, 184, 0.34);
  box-shadow: none;
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e293b;
}

@media (max-width: 767px) {
  .meli-search-placeholder {
    min-height: 330px;
    padding: 28px 16px 22px;
    border-radius: 26px;
    gap: 18px;
  }

  .meli-meta-spinner {
    width: 88px;
    height: 88px;
  }

  .meli-meta-spinner--hero {
    width: 60px;
    height: 60px;
  }

  .meli-meta-spinner__img {
    width: 50px;
    height: 50px;
  }

  .meli-search-placeholder__gif {
    width: min(208px, 62vw);
  }

  .meli-search-placeholder__title {
    max-width: 16ch;
  }

  .meli-search-placeholder__text {
    font-size: 0.96rem;
  }

  .meli-last9-section {
    gap: 10px;
  }

  .meli-last9-section__head {
    grid-template-columns: 1fr;
  }

  .meli-last9-section__badge {
    justify-self: start;
  }

  .meli-last9-carousel::before,
  .meli-last9-carousel::after {
    width: 26px;
  }

  .meli-last9-card {
    width: 224px;
    min-width: 224px;
  }
}

.meli-search-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.meli-search-placeholder__hero,
.meli-search-placeholder__content,
.meli-last9-section {
  width: 100%;
}

.meli-search-placeholder__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.meli-last9-card {
  transform-origin: center center;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease;
}

.meli-last9-card:hover {
  transform: scale(1.012);
  border-color: #ededed;
  box-shadow: none;
}

.meli-last9-card__badges {
  align-items: center;
  min-height: 24px;
}

.meli-last9-card__badge--latest {
  background: #00a650;
  color: #fff;
}

.meli-last9-card__badge--time {
  margin-left: auto;
}

.meli-last9-card__meta--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
}

.meli-last9-card__meta-label {
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  line-height: 1.15;
  color: #8c8c8c;
}

.meli-last9-card__meta-value {
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  line-height: 1.25;
  color: #666;
  word-break: break-word;
}

.meli-last9-card__pack {
  margin-top: 2px;
}

.meli-last9-carousel {
  padding-top: 4px;
}

.meli-last9-carousel__viewport {
  padding: 4px 46px 10px;
}

.meli-last9-carousel::before,
.meli-last9-carousel::after {
  width: 70px;
}

.meli-last9-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 1px solid #d6e6ff;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #3483fa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: none;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

.meli-last9-carousel__arrow:hover {
  transform: translateY(-50%) scale(1.06);
  border-color: #3483fa;
  color: #2968c8;
}

.meli-last9-carousel__arrow--prev {
  left: 8px;
}

.meli-last9-carousel__arrow--next {
  right: 8px;
}

@keyframes meli-meta-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes meli-last9-skeleton {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.text-purple {
  color: purple; /* Cambia a lila */
}

.plazo-entrega {
  color: #8e24aa;
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 600;
  display: inline-block;
  line-height: 1.2;
  border-radius: 5px;
  padding: 2px 2px;
}

.plazo-entrega strong {
  color: #76208e;
  font-weight: 600;
  text-shadow: none;
}

.plazo-entrega2 {
  font-family: "Chakra Petch", sans-serif !important;
  color: #0d47a1;
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 600;
  display: inline-block;
  line-height: 1.2;
  border-radius: 5px;
  padding: 2px 2px;
}

.plazo-entrega2 strong {
  color: #083373;
  font-weight: 600;
  text-shadow: none;
}

.spinner-container {
  display: flex;
  align-items: center;
}

#cards-container {
  min-height: 100vh;
  background-color: white;
  padding: 20px;
  border-radius: 0 0 25px 25px;
  margin-bottom: 30px;
}

.meli-search-placeholder {
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: 16px 14px 16px;
  gap: 14px;
  align-items: stretch;
}

.meli-search-placeholder__intro {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: block;
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.meli-search-placeholder__hero {
  width: auto;
  flex: 0 0 168px;
  display: flex;
  justify-content: center;
}

.meli-search-placeholder__media {
  width: 132px;
  height: 132px;
  min-width: 132px;
  min-height: 132px;
  border-radius: 28px;
  background: radial-gradient(
    circle at 50% 35%,
    rgba(255, 221, 51, 0.2),
    rgba(255, 255, 255, 0) 70%
  );
}

.meli-search-placeholder__gif {
  width: 126px;
  max-width: 126px;
}

.meli-search-placeholder__content {
  width: auto;
  flex: 1 1 380px;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
}

.meli-search-placeholder__kicker {
  min-height: 24px;
  padding: 0 10px;
  font-size: 0.6rem;
  align-self: flex-start;
}

.meli-search-placeholder__title {
  max-width: 12ch;
  font-size: clamp(1.65rem, 2.75vw, 2.65rem);
  line-height: 0.9;
  text-wrap: balance;
}

.meli-search-placeholder__title span {
  white-space: nowrap;
}

.meli-search-placeholder__text {
  max-width: 34ch;
  font-size: 0.9rem;
  line-height: 1.32;
  color: #64748b;
}

.meli-search-placeholder__chips {
  justify-content: flex-start;
  gap: 8px;
  margin-top: 2px;
}

.meli-search-placeholder__chip {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.78rem;
}

.meli-last9-section {
  width: 100%;
  min-width: 0;
  align-self: stretch;
  gap: 8px;
}

.meli-last9-carousel {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-top: 2px;
}

.meli-last9-carousel__viewport {
  width: 100%;
  max-width: 100%;
  padding: 10px 58px 10px;
  overflow: hidden;
}

.meli-last9-carousel__track {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.meli-last9-carousel::before,
.meli-last9-carousel::after {
  width: 52px;
}

.meli-last9-carousel__arrow {
  top: 186px;
  width: 38px;
  height: 38px;
}

.meli-last9-carousel__arrow--prev {
  left: 10px;
}

.meli-last9-carousel__arrow--next {
  right: 10px;
}

@media (max-width: 767px) {
  .meli-search-placeholder {
    padding: 14px 8px 14px;
    gap: 12px;
  }

  .meli-search-placeholder__intro {
    width: 100%;
    display: block;
    text-align: center;
    gap: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .meli-search-placeholder__media {
    width: 92px;
    height: 92px;
    min-width: 92px;
    min-height: 92px;
    border-radius: 22px;
  }

  .meli-search-placeholder__gif {
    width: 84px;
    max-width: 84px;
  }

  .meli-search-placeholder__content {
    width: min(100%, 320px);
    flex: 1 1 auto;
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  .meli-search-placeholder__title {
    max-width: 14ch;
    font-size: 1.34rem;
    line-height: 0.95;
  }

  .meli-search-placeholder__text {
    max-width: 26ch;
    font-size: 0.77rem;
    line-height: 1.28;
  }

  .meli-search-placeholder__chip {
    min-height: 30px;
    font-size: 0.72rem;
  }

  .meli-search-placeholder__chips {
    justify-content: center;
    gap: 6px;
  }

  .meli-last9-carousel__viewport {
    padding: 8px 34px 8px;
  }

  .meli-last9-carousel::before,
  .meli-last9-carousel::after {
    width: 32px;
  }

  .meli-last9-carousel__arrow {
    top: 172px;
    width: 34px;
    height: 34px;
  }
}

#cards-container-meli {
  min-height: 100vh;
  background-color: white; /* Fondo negro */
  padding: 20px; /* Espacio interno */
  border-radius: 0 0 8px 8px; /* Bordes redondeados */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra */
  margin-bottom: 30px;
}

/* Estilo de las tarjetas */
#envios-cards .card {
  background-color: #f5f5f7; /* Fondo de la tarjeta */
  color: rgb(65, 65, 65);
  margin-bottom: 20px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0px 10px #00000067;
  border: dashed 2px cornflowerblue;
}

#envios-cards .card:hover {
  color: rgb(0, 0, 0);
  background-color: #ffe786;
  border: dashed 2px orange;
}

.user-title-meli {
  color: grey;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  font-size: 0.9rem;
  margin-top: -0.5rem;
}

.user-fecha-meli {
  color: white;
  border-radius: 12px;
  width: fit-content;
  font-family: "Signika Negative", sans-serif;
  font-size: 0.8rem;
  margin-top: -5px;
  margin-bottom: 10px;
  background-color: rgb(167, 167, 167);
  padding: 3px 6px;
  border-radius: 10px;
}

#meli-cards .card {
  background: linear-gradient(145deg, #ffffff, #f0f0f5);
  color: #1a1a1a;
  margin-bottom: 24px;
  border: solid 1px #d1d1d6;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  z-index: 1000;
}

#meli-cards .card:hover {
  color: #000000;
  transform: scale(1.05) translateY(-5px); /* Aumenta el tamaño con un efecto de escala */
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
  border: solid 1px #007aff;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease; /* Añade transición suave */
  z-index: 1000;
}

#meli-cards .card:hover p,
h5,
h6 {
  /* PENDIENTE */
}

.mt-5 {
  margin-top: 0 !important;
}

.card-body-meli {
  z-index: 10000;
  padding: 1rem 1rem 0 1rem;
}

.card-body > button {
  height: 38px !important;
}

.form-control-obs {
  margin-bottom: 0px !important;
}

.divObs {
  margin-bottom: 0px !important;
}

.form-label {
  margin-bottom: 5px !important;
}

/* Media query para pantallas medianas (tablets) */
@media (min-width: 768px) and (max-width: 991px) {
  #envios-cards .col-md-4 {
    flex: 0 0 50%; /* 2 tarjetas por fila */
    max-width: 50%; /* 2 tarjetas por fila */
  }

  #meli-cards .col-md-4 {
    flex: 0 0 50%; /* 2 tarjetas por fila */
    max-width: 50%; /* 2 tarjetas por fila */
  }
}

/* Media query para pantallas pequeñas (móviles) */
@media (max-width: 767px) {
  #envios-cards .col-md-4 {
    flex: 0 0 100%; /* 1 tarjeta por fila */
    max-width: 100%; /* 1 tarjeta por fila */
  }

  #meli-cards .col-md-4 {
    flex: 0 0 100%; /* 1 tarjeta por fila */
    max-width: 100%; /* 1 tarjeta por fila */
  }
}

/* ORDENAR MAS ANTIGUO Y NUEVO */
.input-group {
  border: solid 1px rgba(128, 128, 128, 0.475);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.input-group .form-control {
  border: none;
  box-shadow: none;
}

.form-control {
  height: auto !important;
}

.input-group .input-group-append .btn {
  background-color: cornflowerblue;
  color: white;
  border: none;
  transition: 0.5s;
}

.input-group .input-group-append .btn:hover {
  background-color: rgb(66, 130, 249);
}

.custom-select {
  min-width: 130px;
  margin-bottom: 0;
  border-radius: 5px !important;
  padding: 8px;
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  color: #495057;
  height: 47px;
}

.apiSeguimiento {
  height: fit-content;
  margin-bottom: 10px;
  border: 1px solid cornflowerblue;
  border-radius: 12px;
  padding: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.apiSeguimiento p > i {
  font-size: 1.2rem;
  color: #007aff;
}

.apiSeguimiento p {
  font-size: 1rem;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: #333;
  margin: 0;
}

.apiSeguimiento p:nth-child(3) {
  margin-bottom: -15px;
}

@media (min-width: 768px) {
  .col-md-3 {
    max-width: 100% !important;
  }
}

#filter-labels {
  min-width: 170px;
}

#simbel {
  width: 70px;
}

#simbel2 {
  width: 75px;
  padding-left: 5px;
}

#img-meli {
  overflow: visible;
  width: 30px;
  padding-left: 5px;
}

#img-e3 {
  overflow: visible;
  width: 30px;
  padding-left: 5px;
}

#bna2 {
  width: 70px;
  padding-left: 5px;
  filter: brightness(0) invert(1);
}

.mercado-btn {
  width: max-content;
  margin-right: 10px;
  background: cornflowerblue;
  border: #0065c3;
}

/* FIN ORDENAR MAS ANTIGUO Y NUEVO */

.em-circle {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-size: 1.1rem;
  position: absolute;
  top: -18px;
  right: -10px;
  background-color: #343348;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.em-circle-isFraud {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 15px 15px 0 0;
  position: absolute;
  top: -32px;
  left: 20px;
  background-color: orangered;
  border: solid cornflowerblue 1px;
  color: white;
  display: flex;
  font-weight: bolder;
  align-items: center;
  justify-content: center;
  z-index: -1 !important;
}

.em-circle-isFraud::before {
  content: "\f071";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 3px;
}

.em-circle-isNotFraud {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 15px 15px 0 0;
  position: absolute;
  top: -32px;
  left: 20px;
  background-color: #34c759;
  font-weight: bolder;
  border: solid cornflowerblue 1px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1 !important;
}

.em-circle-ME1 {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 5px;
  border-radius: 0;
  background-color: orange;
  border: cornflowerblue solid 1px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px !important;
  z-index: 0;
}

.em-circle-ME2 {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 5px;
  border-radius: 0;
  background-color: grey;
  border: cornflowerblue solid 1px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px !important;
  z-index: 0;
}

.em-circle-isNotFraud::before {
  content: "\f071";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 3px;
}

.em-circle-state {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 15px 15px 0 0;
  position: absolute;
  top: -32px;
  font-weight: bolder;
  width: fit-content;
  right: 20px;
  font-size: 0.75rem;
  background-color: grey;
  border: solid cornflowerblue 1px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -5 !important;
}

.em-circle-state::before {
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 3px;
}

.em-circle-state-time {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 8px 10px;
  border-radius: 0 0 15px 15px;
  position: relative;
  background-color: #007aff;
  margin-bottom: 5px;
  text-transform: uppercase;
  color: white;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.em-circle-state-time::before {
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: white;
}

.em-circle-state-time-facturado {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 5px;
  padding: 8px 10px;
  border-radius: 0 0 15px 15px;
  position: relative;
  background-color: #34c759;
  text-transform: uppercase;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.em-circle-state-time-facturado::before {
  content: "";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: white;
}

.em-circle-state-time-error-automata {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 5px;
  padding: 8px 10px;
  border-radius: 0 0 15px 15px;
  position: relative;
  background-color: #a78bfa;
  text-transform: uppercase;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.em-circle-state-time-error-automata::before {
  content: "";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: white;
}

.em-circle-state-time-cancelado {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 5px;
  padding: 8px 10px;
  border-radius: 0 0 15px 15px;
  position: relative;
  background-color: red;
  text-transform: uppercase;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.em-circle-state-time-cancelado::before {
  content: "";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: white;
}

.button-container {
  display: flex;
  gap: 10px;
}

.button-container .btn {
  width: fit-content;
  height: 48px;
}

.em-circle-state2 {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  position: absolute;
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 15px 15px 0 0;
  position: absolute;
  top: -32px;
  right: 20px;
  font-weight: bolder;
  background-color: grey;
  color: white;
  border: solid cornflowerblue 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #34c759;
}

.em-circle-state2::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 3px;
}

.em-circle-state3 {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-weight: 900;
  font-size: 1rem;
  padding-inline: 5px;
  padding: 10px;
  border-radius: 15px 0 15px 0;
  position: absolute;
  bottom: 0;
  right: 0;
  text-transform: uppercase;
  color: rgb(243, 243, 243);
  border-top: 1px solid rgb(251, 92, 34);
  background-color: orangered;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  display: none;
}

.em-circle-state4 {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-weight: 900;
  font-size: 1rem;
  padding-inline: 5px;
  padding: 10px;
  border-radius: 15px 0 15px 0;
  position: absolute;
  bottom: 0;
  right: 0;
  text-transform: uppercase;
  background-color: green;
  color: rgb(243, 243, 243);
  border-top: 1px solid greenyellow;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  display: none;
}

.botonesMeli {
  gap: 5px;
}

.margen-icon {
  margin-right: 5px;
}

.spinner-large {
  width: 3rem;
  height: 3rem;
  border-width: 0.3em;
}

.card-body-bna {
  border-radius: 15px;
  background-image: url("../Img/bna-premia-back.png");
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
  background-color: white;
}

.card-body-macro {
  border-radius: 15px;
  background-image: url("../Img/macro-premia-back.png");
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
  background-color: white;
}

.card-body-bapro {
  border-radius: 15px;
  background-image: url("../Img/bapro-premia-back2.png");
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
  background-color: white;
}

.card-body-bancor {
  border-radius: 15px;
  background-image: url("../Img/bancor-back.png");
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
  background-color: white;
}

.badge-large {
  z-index: 1; /* Asegura que el badge esté por encima del contenido */
}

.em-circle-state5 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  text-shadow: 0 0px 3px rgba(0, 0, 0, 0.553);

  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 25px;
  padding: 3px 8px;
  border-radius: 15px 0 15px 0;
  width: fit-content;
  margin-bottom: -15px;
  position: relative;
  top: -20px;
  left: -20px;

  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.em-circle-state6 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  text-shadow: 0 0px 3px rgba(0, 0, 0, 0.553);

  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 25px;
  padding: 3px 8px;
  border-radius: 15px 0 15px 0;
  width: fit-content;
  margin-bottom: -15px;
  position: relative;
  top: -20px;
  left: -20px;

  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.em-circle-state7 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  text-shadow: 0 0px 3px rgba(0, 0, 0, 0.553);

  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 25px;
  padding: 3px 8px;
  border-radius: 15px 0 15px 0;
  width: fit-content;
  margin-bottom: -15px;
  position: relative;
  top: -20px;
  left: -20px;

  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.em-circle-state-unknown {
  font-weight: 600;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 15px 0 15px 0;
  position: relative;
  width: fit-content;
  margin-bottom: -15px;
  top: -20px;
  left: -20px;
  right: -20px;
  background-color: grey;
  text-transform: uppercase;
  color: white;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 25px;
}

.em-circle-state-cliente {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-size: 1rem;
  width: fit-content;
  height: 30px;
  padding-inline: 5px;
  margin-top: -20px;
  border-radius: 0 0 12px 12px;
  margin-bottom: 5px;
  top: -15px;
  color: indigo;
  border-bottom: 2px solid indigo;
  background-color: rgb(231, 220, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  overflow: hidden;
}

#presea {
  width: 25px;
  margin-right: 5px;
}

.facturable {
  background-color: red;
  animation: titilar 1s infinite alternate;
  position: relative;
}

@keyframes titilar {
  0% {
    background-color: red;
  }
  50% {
    background-color: rgb(181, 1, 1); /* Cambia a otro color, como verde */
  }
  100% {
    background-color: red;
  }
}

.facturable::before {
  content: "\F101";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: white;
}

.em-state-andesmar {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-size: 1rem;
  padding-inline: 5px;
  padding: 5px 10px 1px 10px;
  border-radius: 12px 12px 0 0;
  position: absolute;
  top: -30px;
  right: 12px;
  background-color: grey;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.em-state-simbel {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-size: 1rem;
  height: 30px !important;
  padding-inline: 5px;
  padding: 5px 10px 5px 10px;
  border-radius: 12px 12px 0 0;
  position: absolute;
  top: -30px;
  right: 12px;
  background-color: crimson;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.em-state-e3 {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-size: 1rem;
  height: 30px !important;
  padding-inline: 5px;
  padding: 5px 10px 5px 10px;
  border-radius: 12px 12px 0 0;
  position: absolute;
  top: -30px;
  right: 12px;
  background: linear-gradient(to right, #4a90e2, #9b59b6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.em-state-meli {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-size: 1rem;
  padding-inline: 5px;
  padding: 5px 10px 1px 10px;
  border-radius: 12px 12px 0 0;
  position: absolute;
  top: -30px;
  right: 12px;
  background-color: #007aff;
  color: whitesmoke;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.em-state-bna {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-size: 1rem;
  height: 30px;
  padding-inline: 5px;
  padding: 5px 10px 5px 10px;
  border-radius: 0 15px 0 15px;
  position: absolute;
  top: 0px;
  right: 0px;
  border-bottom: solid 2px #ccc;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  overflow: hidden;
}

.em-state-bna > img {
  width: 50px;
}

.reclamo-andesmar {
  margin-top: 20px !important;
}

.comprobanteEntrega {
  margin-bottom: -15px !important;
}

.comprobanteEntregaFail,
.comprobanteEntregaSuccess {
  margin-bottom: -15px !important;
}

.em-state-bna2 {
  font-family: "Reddit Sans Condensed", sans-serif;
  font-size: 1rem;
  height: 30px !important;
  padding-inline: 5px;
  padding: 5px 10px 5px 10px;
  border-radius: 12px 12px 0 0;
  position: absolute;
  top: -30px;
  right: 20px;
  color: white;
  background-color: rgb(68, 46, 84);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  overflow: hidden;
}

.strong-slack {
  color: rgb(61, 61, 61);
  background-color: rgba(255, 255, 255, 0.664);
}

.strong-slack-header {
  background-color: rgb(0, 122, 255);
  color: white;
}

.toast-container {
  bottom: 80px !important;
}

.em-state-bna2 img {
  width: 50px !important;
}

.dimensions-info {
  background: linear-gradient(145deg, #ffffff, #f7f7f7);
  border-radius: 12px;
  padding: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 2px solid #d1d1d6;
  box-shadow: 0 0px 12px rgba(0, 0, 0, 0.1);
}

.dimensions-info h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  margin: 0 0 10px;
  color: #007aff;
  font-weight: 600;
}

.dimensions-info div {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 0.95em;
  color: #4a4a4a;
}

.scroll-ios-btn {
  position: fixed;
  right: 20px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
  background: linear-gradient(180deg, #2f6fec 0%, #1d4ed8 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    0 10px 24px rgba(47, 111, 236, 0.35),
    0 2px 6px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.scroll-ios-btn:hover,
.scroll-ios-btn:focus {
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px) scale(1.04);
  background: linear-gradient(180deg, #3b82f6 0%, #2f6fec 100%);
  box-shadow:
    0 14px 30px rgba(47, 111, 236, 0.45),
    0 3px 8px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.scroll-ios-btn:active {
  transform: scale(0.94);
  box-shadow:
    0 6px 16px rgba(47, 111, 236, 0.32),
    0 1px 3px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.scroll-ios-btn .fas {
  font-size: 16px;
  line-height: 1;
}

#scrollToTop {
  top: calc(50% - 56px);
}

#scrollToDown {
  top: calc(50% + 4px);
}

.blueSpinner {
  width: 50px;
  overflow: hidden;
}

.btnAndesmarMeli {
  margin-bottom: 5px !important;
}

.btnAndreaniMeli {
  margin-bottom: 0px !important;
}

.btnOcaMeli {
  margin-bottom: 0px !important;
}

.btnCDSMeli {
  height: 38px;
}

.errorMeli {
  text-align: center;
  width: 90%;
  font-weight: 600;
  text-align: left;
  font-family: "Chakra Petch", sans-serif;
  text-transform: uppercase;
  color: green;
  margin-top: 5px;
  font-size: small;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}

.errorMeliBna {
  width: 90%;
  font-weight: 800;
  text-align: left;
  font-family: "Chakra Petch", sans-serif;
  text-transform: uppercase;
  color: green;
  margin-top: 5px;
  font-size: small;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: -10px;
}

.trio-de-botones {
  display: flex;
  gap: 5px;
}

.editarDatos {
  margin-bottom: 5px !important;
}

.sugerencias {
  width: 91%;
  font-family: "Chakra Petch", sans-serif;
  font-size: 0.8rem;
  border: 1px solid #ccc;
  max-height: 150px;
  overflow-y: auto;
  position: absolute;
  background: white;
  z-index: 1000;
}

.sugerencia {
  padding: 10px;
  cursor: pointer;
}

.sugerencia:hover {
  background-color: cornflowerblue;
  color: white;
}

.mini-etiqueta-andi {
  margin-bottom: 5px !important;
}

.numeroDeEnvioGenerado {
  font-size: 0.9rem;
  margin-bottom: 5px !important;
  text-align: center;
  color: #ffffff;
  border: solid 1px #007aff;
  font-weight: 700 !important;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  background: linear-gradient(145deg, #007aff, #0051cb); /* Gradiente azul */
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.3s ease;
}

.numeroDeEnvioGenerado a {
  color: inherit;
  text-decoration: none;
}

.numeroDeEnvioGenerado a:hover {
  text-decoration: underline;
}

.numeroDeEnvioGeneradoBNA {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Rubik", sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-bottom: 0px;
  background-color: #ecf0f1;
  border: 1px solid #bdc3c7;
  padding: 12px 16px;
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}

.ordenBaPro {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  text-align: center;
  color: #2563eb;
  margin-bottom: 0px;
  border-right: 1px solid #c7d4f8;
  border-left: 1px solid #c7d4f8;
  border-top: 1px solid #c7d4f8;
  padding: 8px 12px;
  background-color: #e6eeff;
  box-shadow: 0 2px 8px rgba(60, 80, 200, 0.08);
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}

.ordenBancor {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  text-align: center;
  color: #8b5cf6;
  margin-bottom: 0px;
  border-right: 1px solid #d9c7ff;
  border-left: 1px solid #d9c7ff;
  border-top: 1px solid #d9c7ff;
  padding: 8px 12px;
  background-color: #f3e8ff;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.12);
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}

.numeroDeEnvioGeneradoBNA a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.numeroDeEnvioGeneradoBNA a:hover {
  text-decoration: underline;
  color: #2980b9;
}

.ordenBancor a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.ordenBancor a:hover {
  text-decoration: underline;
  color: #7c3aed;
}

/* MODAL ANDESMAR */
/* Contenedor principal de la línea de tiempo */
.timeline-container {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  border: 1px solid #ebebeb;
}

/* Contenedor de información superior (detalles de la guía, estado, etc.) */
.info-container {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.215);
}

.info-container h5 {
  font-size: 1.2rem;
  font-weight: 600;
  color: cornflowerblue; /* Azul estilo iOS */
  margin-bottom: 5px;
  margin-top: 10px;
}

.info-container p {
  font-size: 0.95rem;
  color: #333;
  margin: 5px 0;
  line-height: 1.6;
}

/* Estilo de títulos secundarios */
.info-container h6 {
  font-size: 1rem;
  font-weight: bold;
  color: #555;
  margin-top: 20px;
  margin-bottom: 10px;
  border-bottom: 2px solid cornflowerblue;
  padding-bottom: 5px;
}

/* Estilo para la línea de tiempo */
.timeline {
  position: relative;
  padding-left: 20px;
  list-style: none;
  margin: 20px 0;
  width: 100%;
}

/* Línea vertical */
.timeline::before {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  bottom: 0;
  width: 2px;
  background: cornflowerblue; /* Azul estilo iOS */
}

/* Elementos de la línea de tiempo */
.timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 20px 0;
  width: 100%;
}

.timeline-item:last-child {
  background-color: #fbf7bd;
  border: 2px dotted cornflowerblue; /* Azul estilo iOS */
  padding: 0.3rem;
  border-radius: 0 10px 10px 0;
}

/* Círculo numerado */
.timeline-circle {
  position: absolute;
  left: -25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange; /* Rojo estilo iOS */
  color: #fff;
  border-radius: 10%;
  width: 30px;
  height: 30px;
  font-size: 1rem;
  font-weight: bold;
  z-index: 1;
}

.ios-badge {
  min-width: 28px;
  background-color: #dc3545;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  font-family: "Chakra Petch", sans-serif;
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.ios-badge-green {
  min-width: 28px;
  background-color: #28a745;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  font-family: "Chakra Petch", sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.ios-badge-orange {
  min-width: 28px;
  background-color: orange;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  font-family: "Chakra Petch", sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

@keyframes spinner37892Spin {
  to {
    transform: rotate(360deg);
  }
}

.timeline-circle.last {
  position: absolute;
  left: -30px;
  background-color: orangered;
  width: fit-content;
  padding-inline: 5px;
}

@media (max-width: 780px) {
  .timeline-content h6 {
    padding-left: 30px;
  }

  .timeline-content p {
    padding-left: 30px;
  }
}

/* Contenido de la línea de tiempo */
.timeline-content {
  margin-left: 60px;
  padding-left: 10px;
  width: calc(100% - 40px); /* Restar el espacio ocupado por el círculo */
  border-left: 2px solid transparent;
}

.timeline-content h6 {
  font-size: 1rem;
  font-weight: bold;
  margin: 0;
  color: #000;
}

.timeline-content p {
  font-size: 0.9rem;
  margin: 5px 0;
  color: #666;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
    width: 100%; /* Asegurarse de que mantenga el ancho completo en móviles */
  }

  .timeline-circle {
    margin-bottom: 10px;
  }

  .timeline-content {
    margin-left: 0;
    padding-left: 0;
    width: 100%;
  }
}

.historialAndesmar {
  text-transform: uppercase;
  font-family: "Chakra Petch", sans-serif;
  width: fit-content;
  background-color: orangered;
  padding: 0.3rem;
  border-radius: 10px;
  color: white;
}

.Andesmar-track {
  border: 2px dashed #6394ed;
  border-radius: 10px;
  padding: 0.3rem;
  overflow: hidden;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* FIN MODAL ANDESMAR */

.import-container {
  margin-bottom: 1rem;
  padding: 1rem;
  border-bottom: cornflowerblue 2px solid;
  border-radius: 15px;
  background: linear-gradient(to top, rgb(183, 207, 250), rgb(221, 232, 252), white, white);
}

.importador-ios {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    sans-serif;
  border: 1px solid #d7dde7;
  border-bottom: 1px solid #d7dde7;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  padding: 14px;
  box-shadow: none !important;
}
.importador-ios__toggle {
  border: 1px solid #d4dbe6;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f9 100%);
  color: #1f2937;
  font-weight: 700;
  letter-spacing: 0.1px;
  box-shadow: none !important;
}
.importador-ios__toggle:focus,
.importador-ios__toggle:active,
.importador-ios__toggle:hover {
  box-shadow: none !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%);
  color: #111827;
}
.importador-ios__incidencias {
  border-radius: 12px;
  box-shadow: none !important;
}

#preAprobadosBadgeMobbex {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    sans-serif;
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  border: 1px solid transparent;
}

#preAprobadosBadgeMobbex.mobbex-badge--loading {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #1d4ed8;
}

#preAprobadosBadgeMobbex.mobbex-badge--empty {
  background: #e5e7eb !important;
  color: #6b7280 !important;
  border-color: #d1d5db;
}

#preAprobadosBadgeMobbex.mobbex-badge--active {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #b91c1c;
}

.swal2-popup.mobbex-incidencias-popup {
  border-radius: 14px !important;
  padding: 14px !important;
  border: 1px solid #dbe2ec !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%) !important;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    sans-serif !important;
}

.mobbex-incidencias-wrap {
  max-height: 55vh;
  overflow-y: auto;
  padding: 4px 6px;
}

.mobbex-inc-row {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.mobbex-inc-title {
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}
.mobbex-inc-sub {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}

.mobbex-inc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobbex-inc-input {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: "Inter", sans-serif;
}

.mobbex-inc-input:focus {
  outline: none;
  border-color: #7aa7ff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.mobbex-inc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
  border-radius: 14px;
}

.mobbex-inc-overlay.active {
  display: flex;
}

.mobbex-inc-spinner {
  width: 74px;
  height: 74px;
  animation: mobbexSpin 1.2s linear infinite;
}

.mobbex-inc-btn {
  min-width: 150px !important;
  height: 42px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  margin: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px;
  padding: 0 18px !important;
  transition: all 0.18s ease;
}

.mobbex-inc-btn--success {
  background: #16a34a !important;
  color: #fff !important;
  border-color: #15803d !important;
}
.mobbex-inc-btn--success:hover {
  background: #15803d !important;
}

.mobbex-inc-btn--neutral {
  background: #6b7280 !important;
  color: #fff !important;
  border-color: #4b5563 !important;
}
.mobbex-inc-btn--neutral:hover {
  background: #4b5563 !important;
}

.mobbex-inc-btn--primary {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #1d4ed8 !important;
}
.mobbex-inc-btn--primary:hover {
  background: #1d4ed8 !important;
}

#incidenciasMobbexBtn.is-loading {
  opacity: 0.9;
  cursor: not-allowed;
}

#incidenciasMobbexBtn.btn-loading-disabled {
  pointer-events: none;
}

@keyframes mobbexSpin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon-gray {
  color: gray;
}

.icon-indigo {
  color: indigo;
}

/* BOTON MARCAR FACTURADO */
.btn-danger:hover .icono {
  content: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn-danger:hover .icono::before {
  content: "\F5FF";
  font-family: "Bootstrap Icons";
}

/* FIN BOTON MARCAR FACTURADO */

/* SUGERENCIAS BNA */
.suggestions-container {
  font-size: small;
  max-height: 150px;
  overflow-y: auto;
  border: none;
  border-radius: 5px;
  background-color: white;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.list-group-item {
  cursor: pointer;
}

.list-group-item:hover {
  background-color: cornflowerblue;
  color: white;
}

/* FIN SUGERENCIAS BNA */

.btn-bna-collapse {
  min-height: 35px;
  font-weight: 600;
  font-size: 0.8rem;
  margin-top: 0 !important;
  border-radius: 15px;
}

.observaciones-btn {
  border-radius: 15px;
  min-height: 35px;
  font-weight: 600;
  font-size: 0.8rem;
}

.btn-bna-collapse:hover {
  color: whitesmoke !important;
  background-color: #007aff !important;
  border: 1px solid #0052ab !important;
}

.ios-card-text {
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  margin-bottom: -8px;
  width: 100%;
}

.ios-card-text:nth-child(3) {
  margin-bottom: -2px;
}

.ios-card-text:nth-child(1) {
  margin-top: -8px;
}

.text-content {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ios-icon {
  font-size: 20px;
  color: #007aff;
  margin-right: 10px;
}

.ios-icon2 {
  font-size: 20px;
  color: grey;
}

.ios-icon3 {
  font-size: 26px;
  color: #007aff;
  margin-right: 10px;
}

#direccion-bna .ios-icon.bi-house {
  content: "\f015";
}

#direccion-bna .ios-icon.bi-telephone {
  content: "\f879";
}

#direccion-bna .ios-icon.bi-envelope {
  content: "\f0e0";
}

.ios-card {
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}

.contenedorRemito {
  display: flex;
  align-items: center; /* Alinear verticalmente */
  justify-content: flex-start; /* Alinear horizontalmente al inicio */
}

.contenedorRemito {
  display: flex;
  align-items: center; /* Alinear verticalmente */
  justify-content: flex-start; /* Alinear horizontalmente al inicio */
}

/* SWITCH MEJORADO */
.form-check {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding-left: 0 !important;
}

div .form-check {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.form-check-input {
  width: 50px; /* Ancho aumentado */
  height: 25px; /* Alto aumentado */
  background-color: orangered; /* Color de fondo más atractivo */
  border: solid 2px rgba(128, 128, 128, 0.5); /* Borde más definido */
  border-radius: 50px; /* Bordes redondeados */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  position: relative; /* Para el pseudo-elemento */
  transition:
    background-color 0.3s,
    box-shadow 0.3s; /* Transición suave */
}

.form-check-input:checked {
  background-color: #4caf50; /* Color verde cuando está activo */
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5); /* Sombra verde al activarse */
}

.form-check-input:checked::before {
  transform: translateX(38px); /* Ajustar la posición del círculo */
}

.form-check-input::before {
  content: "";
  position: absolute;
  width: 30px; /* Aumento del ancho del círculo */
  height: 30px; /* Aumento de la altura del círculo */
  background-color: white; /* Color del círculo */
  border: solid 1px grey; /* Borde gris */
  border-radius: 50%; /* Círculo perfecto */
  transition: transform 0.3s; /* Transición suave */
  top: -4px; /* Ajuste de posición */
  left: -8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}

.form-check-inline .form-check-input {
  position: relative !important;
}

.form-check-input[type="checkbox"] {
  border-radius: 25px !important;
}

.estado-nombre {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-transform: capitalize;
  text-align: center;
}

.text-success {
  color: green;
}

.form-check-label {
  margin-top: 0 !important; /* Espaciado superior aumentado */
  font-size: 14px; /* Tamaño de fuente aumentado */
  color: #333; /* Color del texto */
  font-weight: bold; /* Texto en negrita */
  cursor: pointer;
  transition: color 0.3s; /* Transición suave para el color */
}

.form-check-label:hover {
  color: #4caf50; /* Color del texto al pasar el ratón */
}
/* FIN SWITCH MEJORADO */

/* Estilo para el alert */
.alert,
.alertError {
  position: absolute; /* Cambiar a absolute */
  right: 20px;
  background-color: #28a745;
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1000;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform: translateY(20px);
  opacity: 0;
}

/* Estilo para el alert */
.alertSku,
.alertErrorSku {
  position: relative; /* Cambiar a absolute */
  right: 20px;
  background-color: #28a745;
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1000;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform: translateY(20px);
  opacity: 0;
}

.alert-danger {
  background-color: red;
}

.alert.show,
.alertError.show {
  display: block;
  transform: translateY(0);
  opacity: 1;
}

.card-text-isSkuIncluded {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  text-align: center;
  font-size: small;
  border: 1px solid #ccc;
  background-color: #ffeef5;
  color: crimson;
  border-top: 2px solid crimson;
  font-family: "Rubik", sans-serif;
  padding: 2px 5px 15px 5px;
  border-radius: 15px 15px 0 0;
  margin: 8px 0;
  margin-bottom: -10px;
  margin-top: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.card-text-isSkuIncludedPlaceIt {
  text-align: center;
  font-size: small;
  border: 1px solid #ccc;
  background-color: #e5ffe5;
  color: #28831a;
  border-top: 2px solid #28831a;
  font-family: "Rubik", sans-serif;
  padding: 2px 5px 15px 5px;
  border-radius: 15px 15px 0 0;
  margin: 8px 0;
  margin-bottom: -10px;
  margin-top: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-text-isNotSkuIncludedPlaceIt {
  text-align: center;
  font-size: small;
  border: 1px solid #ccc;
  background-color: #ecf0f1;
  color: orangered;
  border-top: 2px solid orangered;
  font-family: "Rubik", sans-serif;
  padding: 2px 5px 15px 5px;
  border-radius: 15px 15px 0 0;
  margin: 8px 0;
  margin-bottom: -10px;
  margin-top: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.card-text-isSkuIncludedPlaceIt > i {
  font-size: 1.2rem;
  color: #28831a;
}

.card-text-isSkuIncluded > i {
  font-size: 1.2rem;
  color: crimson;
}

.card-text-isNotSkuIncludedPlaceIt > i {
  font-size: 1.2rem;
  color: orangered;
}

/* Estilo específico para alertError */
.alertError {
  background-color: red;
}

/* Cerrar botón */
.alert .close,
.alertError .close {
  cursor: pointer;
  margin-left: 10px;
  font-weight: bold;
  font-size: 18px;
  color: white;
  transition: color 0.3s;
}

.alert .close:hover,
.alertError .close:hover {
  color: #ffcc00;
}
/* Fin Estilo para el alert */

/* Alertas BNA y MELI */
.custom-alert,
.custom-alert-error {
  position: fixed;
  bottom: 110px; /* Colocarlo en la parte superior */
  right: 20px;
  background-color: #28a745;
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 10000000 !important;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform: translateY(-20px); /* Cambiar para que baje desde arriba */
  opacity: 0;
  visibility: hidden;
}

.custom-alert.show,
.custom-alert-error.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.custom-alert-error {
  background-color: red;
}

.custom-alert .close,
.custom-alert-error .close {
  cursor: pointer;
  margin-left: 10px;
  font-weight: bold;
  font-size: 18px;
  color: white;
  transition: color 0.3s;
}

.custom-alert .close:hover,
.custom-alert-error .close:hover {
  color: #ffcc00;
}
/* Alertas BNA y MELI */

.escaneoColecta {
  margin-right: 5px;
}

.table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.table th,
.table td {
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #e1e1e1;
}

.table th {
  background-color: #007aff;
  color: white;
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap;
}

.table tbody tr {
  transition:
    background-color 0.3s,
    color 0.3s; /* Transición para el efecto hover */
}

.table tbody tr:nth-child(odd) {
  background-color: #f9f9f9; /* Color de fondo para filas impares */
}

.table tbody tr:nth-child(odd):hover {
  background-color: rgba(0, 122, 255, 0.2); /* Azul claro al pasar el ratón en filas impares */
  cursor: pointer;
}

.table tbody tr:nth-child(even) {
  background-color: #ffffff;
}

.table tbody tr:nth-child(even):hover {
  background-color: rgba(255, 165, 0, 0.3);
  cursor: pointer;
}

/* Estilo de las celdas */
.table td {
  color: #333;
}

.modal-content {
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  overflow: hidden;
}

.modal-header {
  border-bottom: none;
  padding: 16px;
  background-color: #007aff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.modal-body {
  padding: 20px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.form-control {
  border-radius: 10px;
  border: 1px solid #007aff; /* Color azul iOS */
  padding: 12px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.btn-outline-secondary {
  color: #007bff; /* Color de texto */
  border-color: #007bff; /* Color del borde */
}

.btn-outline-secondary:hover {
  border-color: orangered; /* Color del borde */
  background-color: white;
  color: orangered;
}

.btn-success {
  background-color: #28a745;
}

.btn-success:hover {
  background-color: #006215; /* Efecto hover */
}

#ingresoForm {
  margin: 0;
  background-color: #ffffff; /* Color de fondo blanco */
  border-radius: 12px; /* Bordes redondeados */
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.132); /* Sombra suave */
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Tipografía de iOS */
}

.ingreso-egreso {
  gap: 5px;
}

.table td,
.table th {
  border-top: none !important;
}

/* Responsividad para dispositivos móviles */
@media (max-width: 768px) {
  .table th,
  .table td {
    padding: 8px; /* Espacio en celdas en móviles */
    font-size: 12px;
  }

  .modal-header {
    padding: 10px; /* Ajuste de espacio en el encabezado */
  }

  .modal-title {
    font-size: 14px; /* Ajuste de tamaño del título en móviles */
  }
}

/* FIN TABLA DE ENVIOS */

/* ESTILOS DE TABLAS */

.pendiente-despacho {
  color: red !important;
  font-weight: bold;
  background-color: rgba(255, 200, 47, 0.255);
  font-size: 0.9rem;
}

.estado-despachado,
.estado-entrega,
.estado-entrega2 {
  color: green !important;
  font-weight: bold;
  background-color: rgba(172, 255, 47, 0.255);
  font-size: 1rem;
  max-width: 600px;
  text-overflow: ellipsis;
}

.estado-entrega2 > i {
  font-size: 1.1rem;
}

.table td,
.table th {
  padding: 0.5rem !important;
}

.subdato-texto1 {
  background-color: orange;
  color: white;
  padding: 3px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
}

.subdato-texto2 {
  background-color: grey;
  color: white;
  padding: 3px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow-x: auto;
  display: inline-block;
}

.subdato-texto3 {
  background-color: green;
  color: white;
  padding: 3px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow-x: auto;
  display: inline-block;
}

.subdato-texto4 {
  background-color: #007bff;
  color: white;
  padding: 3px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow-x: auto;
  display: inline-block;
}

.subdato-texto5 {
  background-color: red;
  color: white;
  padding: 3px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow-x: auto;
  display: inline-block;
}

.valor-columna {
  color: green !important;
  font-weight: bold;
  text-align: right;
}

.remito-columna {
  font-weight: bold;
}

.tiempo-transcurrido {
  background-color: #f9f9f9;
  padding: 0.6rem 1.2rem;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  font-size: 0.9em;
  font-weight: 800;
  color: #2c3e50;
  border: 1px solid #bdc3c7;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  animation: pulse 1.5s infinite;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.tiempo-transcurrido:hover {
  background-color: #eaeaea;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.icono-tiempo {
  margin-right: 5px;
}

/* TRANSPORTE EN TABLAS */
.img-transporte {
  width: 120px;
}

.btn-mc-os-Check {
  margin-bottom: -12px;
  background-color: white;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
}

.btn-ios {
  display: inline-block;
  border-radius: 5px;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-andreani {
  background: linear-gradient(135deg, #ff4d4d, #ff1a1a);
  color: white;
}

.btn-andesmar {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
}

.btn-cds {
  background: linear-gradient(135deg, #0055a9, #03284d);
  color: white;
}

.btn-oca2 {
  background: linear-gradient(135deg, #5b2b82, #7a3e99);
  color: white;
}

.btn-placeit {
  background: linear-gradient(135deg, #0055a9, #7a3e99);
  color: white;
}

/*.btn-placeit:hover {
    cursor: not-allowed;
}*/

.btn-novogar {
  background: linear-gradient(135deg, #717171, #323232);
  color: white;
  font-size: 0.8rem !important;
}

.btn-novogar2 {
  background: linear-gradient(360deg, #ff8000, #ffb936); /* Tono amarillito ocaco */
  color: black;
  font-weight: 400;
  font-size: 0.8rem !important;
}

.btn-ios:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.img-transporte {
  width: 100px;
  height: auto;
  display: block;
}
/* FIN TRANSPORTE EN TABLAS */

#porcentajes {
  max-width: 100%;
  overflow-x: auto;
  padding: 12px 20px;
  border-radius: 10px;
  color: #333;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

#andreaniPorcentaje {
  color: #e74c3c;
  font-weight: 700;
}

#andesmarPorcentaje {
  color: #3498db;
  font-weight: 700;
}

.icon-state-ios {
  font-size: large;
}

#data-table th:nth-child(5),
#data-table td:nth-child(5) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carrito {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  text-align: center;
  font-size: small;
  border: 1px solid #ccc;
  background-color: #ecf0f1;
  color: #ef5350;
  border-top: 2px solid #ef5350;
  font-family: "Rubik", sans-serif;
  padding: 2px 5px 15px 5px;
  border-radius: 15px 15px 0 0;
  margin: 8px 0;
  margin-bottom: -10px;
  margin-top: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.puntos {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  text-align: center;
  font-size: small;
  border: 1px solid #ccc;
  background-color: #e9f6fc;
  color: #1a6b8a;
  border-top: 2px solid #1a6b8a;
  font-family: "Rubik", sans-serif;
  padding: 2px 5px 15px 5px;
  border-radius: 15px 15px 0 0;
  margin: 8px 0;
  margin-bottom: -10px;
  margin-top: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.puntos-icon {
  margin-right: 10px;
  font-size: 1.5em;
  color: #1a6b8a;
}

.carrito-icon {
  margin-right: 10px;
  font-size: 1.5em;
  color: #c62828;
}

.gratuito {
  background-color: orange;
  color: white !important;
  padding: 5px;
  border-radius: 5px;
}

.express-meli {
  background-color: green;
  color: white !important;
  padding: 5px;
  border-radius: 5px;
}

.express-meli2 {
  background-color: orangered;
  color: white !important;
  padding: 5px;
  border-radius: 5px;
}

.express-meli-sub {
  font-weight: 400 !important;
}

.cost-amount.neg {
  color: #d32f2f;
  font-weight: 700;
}

.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 1000;
}
.notification .close {
  cursor: pointer;
}

/* Estilos del carrusel */
.carousel {
  border: solid 1px cornflowerblue;
  background-color: white;
  border-radius: 0;
  margin-bottom: 5px;
  overflow: hidden;
}

.carousel-control-next,
.carousel-control-prev {
  color: cornflowerblue !important;
  background-color: cornflowerblue;
}

.macos-style-producto-meli {
  font-size: small;
  text-align: start;
  background-color: cornflowerblue;
  color: white;
  padding: 10px;
  border-radius: 10px 10px 0 0;
  z-index: 0;
}
/* Fin Estilos del carrusel */

.macos-style {
  text-align: center;
  background-color: white;
  padding: 10px 5px 5px;
  height: 38px;
  border: cornflowerblue solid 1px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: cornflowerblue;
  font-weight: 400;
  margin-top: -15px;
  margin-bottom: -1px;
  font-size: 16px;
}

.macos-style2 {
  text-align: center;
  background-color: white;
  padding: 10px 5px 5px;
  border: cornflowerblue solid 1px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: cornflowerblue;
  font-weight: 400;
  margin-top: -15px;
  margin-bottom: -1px;
  font-size: 16px;
}

.total-simbel {
  background-color: #c9fbc9;
  border-radius: 5px;
  padding: 5px;
}

.medidas-simbel {
  padding: 5px;
  border: 1px dashed cornflowerblue;
  margin-top: -1px;
  border-radius: 0 !important;
}

.payment-cell {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background-color: #f7f7f8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.payment-cell:hover {
  background-color: #f0f0f5;
  transform: scale(1.02);
}

.payment-cell img {
  width: 55px !important;
  height: auto;
  margin-right: 3px;
}

.payment-details {
  font-size: 14px;
  color: #333;
}

/* Nuevo estilo iOS para la columna Producto */
.product-cell {
  padding: 15px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #444;
  text-align: left;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.6;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
}

td.product-cell:hover {
  background-color: cornflowerblue;
  color: white !important;
}

td.product-cell:hover::after {
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  content: "Ver Fotos 📷";
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  z-index: 1;
}

/* Hover / active bien sutil tipo macOS */

/* Columna izquierda del chip: label + monto */
.value-chip-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* Columna derecha: CTA Ver pago */
.value-chip-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #007aff; /* azul iOS */
  white-space: nowrap;
}

.value-chip-cta i {
  font-size: 0.8rem;
}

/* MODAL COMENTARIOS EN FACTURACION */
.input-group .form-control {
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.input-group .form-control:focus {
  border-color: #007aff; /* Azul iOS */
  box-shadow: 0 0 8px rgba(0, 122, 255, 0.5);
  outline: none;
}

.pill-primary {
  background-color: #34c759;
  color: white;
  padding: 10px;
}

.btn-group-logistica > button {
  font-size: 14px;
  font-weight: 600;
}
/* FIN MODAL COMENTARIOS EN FACTURACION */

.open-modal-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 50px;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.open-modal-button:hover {
  background-color: #0056b3;
}

.notification {
  border: 1px solid cornflowerblue;
  bottom: 90px;
  position: fixed;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 15px;
  margin: 15px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  opacity: 0.9;
  z-index: 1000;
}

.filtered-pagination > button {
  background-color: orangered;
}

.notification .d-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification .close {
  background: none;
  padding: 5px;
  border: none;
  font-size: 1.5rem;
  color: orangered;
  cursor: pointer;
  transition: color 0.2s ease;
  position: absolute;
  top: 5px;
  right: 5px;
}

.notification .close:hover {
  color: #d32f2f;
}

.notification .btn {
  background-color: orangered;
  border: none;
  border-radius: 10px;
  color: #fff;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
}

.notification .btn:hover {
  background-color: #005bb5;
}

.notification .btn .icon {
  margin-right: 8px;
  font-size: 1.2rem;
}
/* FIN NOTIFICACION DE NUEVAS VENTAS */

.alerta {
  font-size: 13px;
  font-weight: 600;
  color: white;
  background-color: #ff3b30;
  padding: 8px;
  border-radius: 5px;
  border: none;
  text-align: center;
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2);
  animation: backgroundBlink 1s ease-in-out infinite alternate;
  transition: transform 0.2s;
}

.alerta:hover {
  transform: scale(1.05);
}

@keyframes backgroundBlink {
  0% {
    background-color: #ff3b30;
  } /* Rojo típico de alerta */
  100% {
    background-color: #a32100;
  } /* Naranja vibrante */
}

.notificationModal2 {
  background-color: #28a745; /* Color verde */
  color: white;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.notificationModal2 .close {
  cursor: pointer;
  margin-left: 5px;
  color: red;
}

#statusCard {
  border: solid 1px cornflowerblue;
  background-color: rgba(255, 255, 255, 0.851);
  backdrop-filter: blur(10px);
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1050;
  display: none;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#statusCard2 {
  max-width: 350px;
  border: solid 1px cornflowerblue;
  background-color: rgba(255, 255, 255, 0.851); /* Fondo blanco con transparencia */
  backdrop-filter: blur(10px); /* Efecto de desenfoque */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  display: none;
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

.card-body {
  padding: 20px; /* Padding más amplio */
}
.btn-timer {
  padding: 10px;
  margin-inline-end: 5px; /* Espaciado entre botones */
  border-radius: 5px; /* Bordes redondeados en botones */
}
#timer {
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

.email-notification1 {
  font-size: 1.3rem;
  color: red;
}

.email-notification2 {
  font-size: 1.3rem;
  color: green;
}

/* QUERY DE MERCADO LIBRE */

.query-modal-content {
  width: 600px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.query-modal-header {
  border-bottom: none;
  background-color: #f7f7f7;
}

.query-modal-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  color: #333;
}

.alerta-query {
  text-align: center;
  background-color: #ffeeba; /* Color de fondo de alerta */
  border-bottom: 5px solid #ffc107; /* Color de borde */
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #856404; /* Color del texto */
}

.query-btn-prepararME1,
.query-btn-prepararME2 {
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 1rem;
  width: 45%; /* Ajusta el ancho de los botones */
}

.btn-ios-success {
  background-color: #4caf50; /* Verde */
  border: none;
  color: white;
  transition: 0.5s;
}

.btn-ios-danger {
  background-color: #f44336; /* Rojo */
  border: none;
  color: white;
  transition: 0.5s;
}

.btn-ios-danger:hover {
  color: white;
}

.btn-ios-success:hover {
  color: white;
}

.contenedor-botones-meli {
  margin-bottom: 40px;
}

#spinner3 {
  display: none;
  border: 8px solid #f3f3f3; /* Color de fondo */
  border-top: 8px solid orangered; /* Color del spinner */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: auto;
}

.botonImpresion .btn-mark {
  margin-top: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cantidad-Meli {
  max-width: 80px !important;
  color: white !important;
  background-color: red;
  font-weight: 900;
  font-size: 1.2rem !important; /* Tamaño de letra más grande */
  text-align: center;
}

.SKU-Meli {
  text-wrap: wrap !important;
  color: #333;
  font-weight: 700;
  font-size: small;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  background-color: #f0f0f0;
}

td.SKU-Meli {
  max-width: 100px !important;
  font-size: small;
  text-wrap: wrap;
}

td.imagen-Meli {
  padding: 0 !important;
  max-width: 120px;
  overflow: hidden;
  text-align: center;
}

td.imagen-Meli img {
  height: auto;
}

.producto-Meli {
  font-size: small;
  max-width: 220px;
  color: #333;
  font-weight: 500;
  font-size: 1rem;
  text-align: left;
  padding: 5px;
  border-radius: 5px;
  background-color: #f0f0f0;
}

.table-striped > thead > tr > th {
  background-color: #000;
  border-radius: 0px !important;
  font-size: 1rem !important;
}

.select-imprimir {
  font-weight: 900;
  width: min-content;
  background-color: #000;
  color: #0051cb;
  background-color: transparent; /* Fondo transparente */
  border: none; /* Sin borde */
  padding: 5px; /* Espaciado interno */
  font-size: 12px; /* Tamaño de fuente */
  cursor: pointer; /* Cambia el cursor al pasar por encima */
}

.card-facturacion-meli {
  border: 1px solid #d0d0d0;
  border-radius: 12px 12px 5px 5px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  background-color: #ffffff; /* Fondo blanco para un look limpio */
}

.card-header-facturacion-meli {
  border-radius: 12px 12px 0 0;
  background-color: #007aff; /* Azul similar al de Apple */
  color: white;
  padding: 12px;
  font-weight: bold;
  font-size: 1.1rem; /* Aumentar el tamaño de la fuente */
  border-bottom: 1px solid #d0d0d0;
}

.card-header-facturacion-meli-presea {
  border-radius: 12px 12px 0 0;
  background-color: #a75cb6; /* Color morado */
  color: white;
  padding: 12px;
  font-weight: bold;
  font-size: 1.1rem; /* Aumentar el tamaño de la fuente */
  border-bottom: 1px solid #d0d0d0;
}

.card-body-facturacion-meli {
  padding: 20px;
}

div .card-body-facturacion-meli input,
select,
textarea {
  margin-bottom: 0px !important ;
  border-radius: 0 0 5px 5px !important;
}

.contenedorDatosCliente > input,
.doble-tel-remito > input,
.label-mensaje-personalizado,
#respuestaNegativa,
#respuesta2 {
  margin-bottom: 2px;
}

input[disabled] {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
}
.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}
.btn-primary.success {
  background-color: #28a745;
  border-color: #28a745;
}

.oculto {
  display: none;
}

.card-body-facturacion-meli div div label {
  margin-bottom: 0 !important;
  font-size: 0.8rem;
  background-color: rgb(211, 226, 253);
  color: rgb(81, 81, 81);
  border-radius: 5px 5px 0 0;
  padding: 3px;
  border: 1px solid #ccc;
  border-bottom: none;
}

#passwordModal {
  z-index: 10000000;
}

.contenedor-switches {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white; /* Color de fondo claro */
  border: 1px solid #ccc; /* Borde gris claro */
  border-radius: 0 0 0px 0px; /* Bordes redondeados */
  padding: 15px; /* Espaciado interno */
  padding-top: 2px;
  padding-bottom: 0px;
  margin-top: -5px !important;
}

.contenedor-switches div {
  justify-content: center;
  align-items: center;
}

.no-data {
  font-size: 1.2rem !important;
  color: gray !important;
  font-weight: 800;
  text-align: center;
  margin-top: 20px;
}

:root {
  /* Tokens estilo macOS */
  --accent-blue: #0a84ff; /* Azul macOS */
  --accent-green: #30d158; /* Verde macOS */
  --accent-red: #ff453a;
  --accent-yellow: #ffd60a;
  --accent-cyan: #64d2ff;

  --surface: rgba(255, 255, 255, 0.65);
  --surface-strong: rgba(255, 255, 255, 0.92); /* para fixed: más legible */
  --border: rgba(0, 0, 0, 0.06);
  --text: #1d1d1f;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  --radius: 16px;
  --blur: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: rgba(22, 22, 24, 0.55);
    --surface-strong: rgba(22, 22, 24, 0.85);
    --border: rgba(255, 255, 255, 0.12);
    --text: #f5f5f7;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  }
}

/* Contenedor */
.contadores {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Base unificada */
.counter,
.counterfila,
.fixed-counter,
.fixed-counter2 {
  --accent: var(--accent-blue);

  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  font-weight: 600;

  backdrop-filter: saturate(1.1) blur(var(--blur));
  -webkit-backdrop-filter: saturate(1.1) blur(var(--blur));

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  color: var(--text);
  padding: 14px 20px;
  text-align: center;
  font-size: 18px;
  line-height: 1;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
  text-shadow: none;
}

.counter:hover,
.counterfila:hover,
.fixed-counter:hover,
.fixed-counter2:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

/* Acento sutil: punto a la izquierda */
.counter::before,
.counterfila::before,
.fixed-counter::before,
.fixed-counter2::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03) inset;
}

/* Variantes */
.counter {
  --accent: var(--accent-blue);
  font-weight: 700;
}
.counterfila {
  --accent: var(--accent-green);
  font-weight: 700;
}

/* Mejor contraste cuando están fijos abajo */
.fixed-counter,
.fixed-counter2 {
  position: fixed;
  left: 25px;
  z-index: 1000;

  background: var(--surface-strong); /* menos transparencia */
  border-color: var(--border); /* fallback */
  /* Si el navegador soporta color-mix, añade un halo sutil del acento */
  border-color: color-mix(in oklab, var(--accent) 22%, var(--border));
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent);

  /* un pelín de text-shadow para legibilidad sobre fondos complejos */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
@media (prefers-color-scheme: dark) {
  .fixed-counter,
  .fixed-counter2 {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  }
}

.fixed-counter {
  bottom: 20px;
}
.fixed-counter2 {
  bottom: 100px;
  margin-bottom: -15px;
}

/* Iconos NEUTROS: toman el color del texto (sin colores chillones) */
.counter .icon,
.counterfila .icon,
.fixed-counter .icon,
.fixed-counter2 .icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 6px;
  color: currentColor;
  opacity: 0.9;
}
/* Forzar inline SVG a heredar color */
.counter .icon *,
.counterfila .icon *,
.fixed-counter .icon *,
.fixed-counter2 .icon * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Tipografías internas */
.counter .value,
.counterfila .value {
  font-size: 22px;
  font-weight: 750;
}
.counter .label,
.counterfila .label {
  font-size: 12px;
  opacity: 0.75;
  margin-left: 6px;
}

/* Estados opcionales (por si necesitás semáforos) */
.counter.is-danger {
  --accent: var(--accent-red);
}
.counter.is-warning {
  --accent: var(--accent-yellow);
}
.counter.is-info {
  --accent: var(--accent-cyan);
}

/* Variante más sólida si querés aún menos transparencia en cualquier estado */
.counter.is-solid,
.counterfila.is-solid {
  background: var(--surface-strong);
  border-color: var(--border);
}

/* Compacto en mobile */
@media (max-width: 560px) {
  .counter,
  .counterfila,
  .fixed-counter,
  .fixed-counter2 {
    font-size: 16px;
    padding: 12px 14px;
    gap: 8px;
  }
  .counter .value,
  .counterfila .value {
    font-size: 20px;
  }
}

.rotate {
  animation: rotation 1s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#sku-control-Meli {
  font-weight: 800;
}

.contador-container2 {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.contador2 {
  flex: 1;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  font-size: 1.3rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#contadorPreparados {
  background-color: #28a745;
  color: white;
  margin-right: 10px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    transform 0.2s;
}

#contadorPreparados:hover {
  background-color: #218838;
  transform: scale(1.05);
}

#contadorSinPreparar {
  background-color: #dc3545;
  color: white;
  cursor: pointer;
  transition:
    background-color 0.3s,
    transform 0.2s;
}

#contadorSinPreparar:hover {
  background-color: #c82333;
  transform: scale(1.05);
}

.alertContador {
  background: linear-gradient(190deg, rgba(255, 77, 77, 0.8), rgba(255, 26, 26, 0.8));
  color: white;
  margin-bottom: -10px !important;
  padding: 8px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  margin: 10px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.alertContador i {
  margin-right: 8px;
  margin-left: 4px;
}

.contador2 span {
  font-weight: bold;
}

.message {
  display: flex;
  align-items: center;
  justify-content: center;
}

.alerta-card-andesmar {
  position: relative;
  margin-bottom: 5px;
  margin-top: -5px;
  background-color: white;
  border: 1px solid #d1d1d6;
  border-radius: 5px;
  display: flex;
  align-items: center;
  z-index: 10;
}

/* Estilo del círculo rojo */
.alerta-card-andesmar .circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: crimson;
  margin-right: 10px;
  animation: pulse-circle 1.5s infinite;
}

/* Animación del círculo */
@keyframes pulse-circle {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.9); /* Rojo intenso */
  }
  50% {
    transform: scale(1.7);
    box-shadow: 0 0 40px rgba(255, 0, 0, 1); /* Rojo más brillante */
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.9); /* Rojo intenso */
  }
}

#click {
  width: 30px;
}

.alerta-card-andesmar .message {
  padding: 5px;
  font-size: 0.9rem;
  font-weight: 600;
  color: crimson;
}

#modalFecha {
  display: block;
  color: crimson;
  margin-bottom: 10px;
}

#modalAsunto {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 15px;
}

#modalCuerpo {
  font-size: 1rem;
  line-height: 1.5;
}

.div-mini-email {
  border: crimson dashed 2px;
  padding: 20px;
  border-radius: 10px;
}

.sku-modal-header {
  background-color: #f0f0f5;
  border-bottom: 1px solid #ccc;
}
.sku-modal-title {
  font-weight: bold;
  color: #333;
}
.sku-input-group {
  display: flex;
  align-items: stretch;
}
.sku-input,
#newEmailPorLogistica {
  border-radius: 10px 0px 0px 10px !important;
  flex: 1;
  margin-right: 0;
  height: 48px !important;
}
#addSkuButton,
#addSkuButtonPlaceIt,
#addEmailPorLogistica {
  border-radius: 0px 10px 10px 0px !important;
  height: 48px !important;
}

.sku-spinner {
  margin-top: 10px;
  text-align: center;
}

.sku-spinner {
  width: 2rem;
  height: 2rem;
  border-width: 0.4rem;
  color: orangered;
}

.sku-table {
  margin-top: 15px;
}
.sku-table th,
.sku-table td {
  text-align: center;
}

/* CALENDARIO */

.mc-os-modal-content {
  background-color: #f0f0f0;
  border-radius: 10px;
  border: none;
}
.mc-os-modal-header {
  background-color: #007bff;
  color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.mc-os-close {
  color: white;
}
.mc-os-dia {
  margin-bottom: -5px;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 5px;
  border-radius: 10px 10px 0 0;
  background-color: cornflowerblue;
  color: white;
}
.mc-os-circle {
  display: inline-block;
  border: 1px solid white;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  margin-right: 5px;
}
.mc-os-circle-red {
  background-color: red;
}
.mc-os-circle-blue {
  background-color: orange;
}
.mc-os-select {
  border-radius: 0 0 10px 10px !important;
}
.mc-os-calendar {
  border: solid cornflowerblue 2px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: white;
  border-radius: 0 0 10px 10px;
  padding: 10px;
  margin-top: 10px;
}
.mc-os-calendar > .font-weight-bold {
  color: cornflowerblue;
  margin-top: -10px;
}
.mc-os-calendar div {
  width: 14.28%;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  border: solid #ffff 1px;
}

.btn-group-cp > button {
  font-size: 13px;
}

.mc-os-calendar .mc-os-day-red {
  background-color: red;
  color: white;
}

.mc-os-calendar .mc-os-day-blue {
  background-color: blue;
  color: white;
}

.mc-os-calendar .mc-os-day-green {
  background-color: green;
  color: white;
}

.mc-os-calendar .mc-os-day-lila {
  background-color: #800080;
  color: white;
}

.mc-os-calendar .mc-os-day-red.past,
.mc-os-calendar .mc-os-day-blue.past,
.mc-os-calendar .mc-os-day-green.past,
.mc-os-calendar .mc-os-day-lila.past,
.mc-os-calendar .mc-os-day-all.past,
.mc-os-calendar .mc-os-day-sannicolas-bsas-santafe-rafaela.past,
.mc-os-calendar .mc-os-day-sannicolas-bsas-santafe.past,
.mc-os-calendar .mc-os-day-sannicolas-bsas-rafaela.past,
.mc-os-calendar .mc-os-day-sannicolas-santafe-rafaela.past,
.mc-os-calendar .mc-os-day-bsas-santafe-rafaela.past,
.mc-os-calendar .mc-os-day-sannicolas-bsas.past,
.mc-os-calendar .mc-os-day-sannicolas-santafe.past,
.mc-os-calendar .mc-os-day-sannicolas-rafaela.past,
.mc-os-calendar .mc-os-day-bsas-santafe.past,
.mc-os-calendar .mc-os-day-bsas-rafaela.past,
.mc-os-calendar .mc-os-day-santafe-rafaela.past {
  opacity: 0.5;
}

.mc-os-circle-green {
  background-color: green;
}

.mc-os-circle-lila {
  background-color: #800080; /* Lila */
}

.mc-os-day-all {
  background: linear-gradient(to right, #800080 25%, red 25% 50%, blue 50% 75%, green 75%);
  color: white;
}

.mc-os-day-sannicolas-bsas-santafe-rafaela {
  background: linear-gradient(to right, #800080 25%, red 25% 50%, blue 50% 75%, green 75%);
  color: white;
}

.mc-os-day-sannicolas-bsas-santafe {
  background: linear-gradient(to right, #800080 33.33%, red 33.33% 66.66%, blue 66.66%);
  color: white;
}

.mc-os-day-sannicolas-bsas-rafaela {
  background: linear-gradient(to right, #800080 33.33%, red 33.33% 66.66%, green 66.66%);
  color: white;
}

.mc-os-day-sannicolas-santafe-rafaela {
  background: linear-gradient(to right, #800080 33.33%, blue 33.33% 66.66%, green 66.66%);
  color: white;
}

.mc-os-day-bsas-santafe-rafaela {
  background: linear-gradient(to right, red 33.33%, blue 33.33% 66.66%, green 66.66%);
  color: white;
}

.mc-os-day-sannicolas-bsas {
  background: linear-gradient(to right, #800080 50%, red 50%);
  color: white;
}

.mc-os-day-sannicolas-santafe {
  background: linear-gradient(to right, #800080 50%, blue 50%);
  color: white;
}

.mc-os-day-sannicolas-rafaela {
  background: linear-gradient(to right, #800080 50%, green 50%);
  color: white;
}

.mc-os-day-bsas-santafe {
  background: linear-gradient(to right, red 50%, blue 50%);
  color: white;
}

.mc-os-day-bsas-rafaela {
  background: linear-gradient(to right, red 50%, green 50%);
  color: white;
}

.mc-os-day-santafe-rafaela {
  background: linear-gradient(to right, blue 50%, green 50%);
  color: white;
}

.mc-os-btn {
  background-color: #007bff;
  color: white;
}
.mc-os-month {
  background-color: cornflowerblue;
  padding: 10px;
  color: white;
  border-radius: 10px 10px 0 0;
  margin-top: 10px;
  margin-bottom: -20px;
  font-size: 1.25rem;
  font-weight: bold;
}

.modal-select-logistica {
  display: flex;
}

.modal-select-logistica div {
  padding: 0 5px 0 5px;
  margin-top: 0;
}
/* MODAL LOCALIDADES MELI */

/* MODAL CODIGO POSTAL */
.cp-custom-alert {
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  position: relative;
  z-index: 1000;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
}
.cp-custom-alert-info-principal {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.cp-custom-alert-info {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.cp-custom-alert-success {
  color: #ffffff;
  background-color: #4cd964;
  border-color: #4cd964;
}

.cp-custom-alert-danger {
  color: #ffffff;
  background-color: #ff3b30;
  border-color: #ff3b30;
}

#cp-alertContainer {
  position: relative;
  margin-top: 10px;
}
/* FIN MODAL CODIGO POSTAL */

.AlertCalendario {
  background-color: #e3f9e5;
  color: #003300;
  border: 1px solid #b5e8b5;
  border-radius: 12px;
  padding: 10px 20px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-align: center;
  margin-bottom: 5px;
  margin-top: -10px;
}

#consoleOutput {
  border-radius: 10px;
  border: 1px solid cornflowerblue !important;
}

.alert-modal-logRosario {
  background-color: orangered;
  font-size: small;
  text-align: center;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  padding: 5px;
  align-items: center;
  color: whitesmoke;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.alert-modal-logRosario i {
  text-align: center;
  margin-right: 8px;
  color: yellow;
  font-size: 20px;
}

.Alert33 {
  padding: 10px;
  border-radius: 5px;
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.Alert34 {
  padding: 10px;
  border-radius: 5px;
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.custom-spinner33 {
  border-width: 0.6em;
}

@media (max-width: 768px) {
  .estado-column {
    min-width: 300px !important;
  }
}

@media (max-width: 1200px) {
  .estado-column {
    min-width: 400px;
  }
}

.Alert35 {
  padding: 10px;
  border-radius: 5px;
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.Alert36 {
  padding: 10px;
  border-radius: 5px;
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.progress {
  height: 20px;
  margin-top: 10px;
}

.progress-bar {
  background-color: #17a2b8;
}

.custom-spinner333 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.hidden {
  display: none; /* Oculta el elemento */
}

.historial-list-group-item {
  background-color: #007bff;
  color: white;
  border-radius: 0;
  padding: 10px 15px;
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}

.historial-list-group-item:hover {
  background-color: #0056b3;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.text-bg-primary {
  padding: 10px;
  background-color: green;
  color: white;
}

.text-bg-primary:hover {
  padding: 10px;
  background-color: #155724;
  color: white;
}

.text-bg-danger {
  padding: 10px;
  background-color: orangered;
  color: white;
}

.historial-list-group-item {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  padding: 10px 15px;
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}

.historial-list-group-item:hover {
  background-color: #e0f7fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#current-month {
  margin-top: -0px;
}

.historial-fw-bold {
  background-color: #6841ea;
  padding: 5px;
  border-radius: 5px;
  color: whitesmoke !important;
  width: fit-content;
  font-weight: bold;
}

.list-group-item-primary {
  border-radius: 0;
}

.historial-ms-2 {
  margin-left: 0.5rem;
}

.historial-me-auto {
  margin-right: auto;
}

.historial-strong {
  color: #007aff;
}

.historial-list-group-item div {
  color: #333;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#fechasList .list-group-item {
  font-size: 13px;
}

#fechasList .list-group-item:nth-child(1) {
  font-weight: 700;
  background-color: pink;
}

#fechasList .list-group-item:nth-child(1):hover {
  font-weight: 700;
  color: white;
  background-color: #ff69b4;
}

.fixed-size {
  margin-left: 2px;
  width: 38.8px;
  height: 37.2px;
}

.fixed-size i,
.fixed-size .spinner-border {
  width: 19.2px;
  height: 19.2px;
}

#fechasList .list-group-item:nth-child(1)::after {
  content: "Último";
  background-color: red;
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  margin-left: 10px;
  display: inline-block;
}

.loader33 {
  color: #3c44ff;
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  text-indent: -9999em;
  z-index: 100000;
  animation: mulShdSpin 1.3s infinite linear;
  transform: translateZ(0);
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow:
      0 -3em 0 0.2em,
      2em -2em 0 0em,
      3em 0 0 -1em,
      2em 2em 0 -1em,
      0 3em 0 -1em,
      -2em 2em 0 -1em,
      -3em 0 0 -1em,
      -2em -2em 0 0;
  }
  12.5% {
    box-shadow:
      0 -3em 0 0,
      2em -2em 0 0.2em,
      3em 0 0 0,
      2em 2em 0 -1em,
      0 3em 0 -1em,
      -2em 2em 0 -1em,
      -3em 0 0 -1em,
      -2em -2em 0 -1em;
  }
  25% {
    box-shadow:
      0 -3em 0 -0.5em,
      2em -2em 0 0,
      3em 0 0 0.2em,
      2em 2em 0 0,
      0 3em 0 -1em,
      -2em 2em 0 -1em,
      -3em 0 0 -1em,
      -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow:
      0 -3em 0 -1em,
      2em -2em 0 -1em,
      3em 0em 0 0,
      2em 2em 0 0.2em,
      0 3em 0 0em,
      -2em 2em 0 -1em,
      -3em 0em 0 -1em,
      -2em -2em 0 -1em;
  }
  50% {
    box-shadow:
      0 -3em 0 -1em,
      2em -2em 0 -1em,
      3em 0 0 -1em,
      2em 2em 0 0em,
      0 3em 0 0.2em,
      -2em 2em 0 0,
      -3em 0em 0 -1em,
      -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow:
      0 -3em 0 -1em,
      2em -2em 0 -1em,
      3em 0 0 -1em,
      2em 2em 0 -1em,
      0 3em 0 0,
      -2em 2em 0 0.2em,
      -3em 0 0 0,
      -2em -2em 0 -1em;
  }
  75% {
    box-shadow:
      0em -3em 0 -1em,
      2em -2em 0 -1em,
      3em 0em 0 -1em,
      2em 2em 0 -1em,
      0 3em 0 -1em,
      -2em 2em 0 0,
      -3em 0em 0 0.2em,
      -2em -2em 0 0;
  }
  87.5% {
    box-shadow:
      0em -3em 0 0,
      2em -2em 0 -1em,
      3em 0 0 -1em,
      2em 2em 0 -1em,
      0 3em 0 -1em,
      -2em 2em 0 0,
      -3em 0em 0 0,
      -2em -2em 0 0.2em;
  }
}

.etiquetas-notice-host-mcsono {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}

.etiquetas-notice-host-mcsono:empty {
  display: none;
}

.etiquetas-notice-host-mcsono sl-alert::part(base) {
  border-radius: 12px;
  box-shadow: none;
}

.spinner-wrapper-mcsono {
  min-height: 0;
}

.spinner-mcsono {
  width: 100%;
  justify-content: center;
}

.etiquetas-loading-card-mcsono {
  width: min(100%, 360px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.92));
  box-shadow: none;
}

.etiquetas-sl-spinner-mcsono {
  font-size: 34px;
  --track-width: 4px;
  --indicator-color: #2563eb;
  --track-color: rgba(37, 99, 235, 0.16);
}

.etiquetas-loading-copy-mcsono {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #0f172a;
  text-align: left;
}

.etiquetas-loading-copy-mcsono strong {
  font-size: 0.95rem;
  font-weight: 800;
}

.etiquetas-loading-copy-mcsono span {
  color: #64748b;
  font-size: 0.82rem;
}

.etiquetaList-mcsono.is-loading {
  opacity: 0.48;
  pointer-events: none;
}

.footer-btn-primary-mcsono.is-busy {
  pointer-events: none;
  opacity: 0.82;
}

.time-etiquetas-container {
  background-color: cornflowerblue;
  padding: 5px;
  font-weight: 400;
  border-radius: 5px;
  color: white;
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
  .time-etiquetas-container {
    font-size: 0.5em;
  }
}

#logContainer {
  margin-top: 0px;
  border-radius: 12px;
  background-color: #f0f0f5;
  color: #333333;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fuente más moderna */
  display: none;
  max-height: 150px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #d1d1d6;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
}

#logContainer div {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
}

#logContainer div:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 5px;
  border-radius: 8px;
}

#logContainer div:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
  padding: 5px;
  border-radius: 8px;
}

/* Se fue el overlay de comentarios de DOS generaciones atrás.

   `#commentDiv` era `display:none; position:absolute` con z-index 1000000, y
   quien lo mostraba le escribía `style.display` a mano. Cuando el popup pasó a
   ser un <sl-dialog>, esta regla —un ID, que le gana a `.lp-modal`— lo dejaba
   escondido: el diálogo abría, el host medía 0x0 y no se veía nada.

   Con ella se van sus compañeras, todas sin un solo uso en el proyecto:
   `.comment-overlay`, `.comment-container`, `#commentTextarea` y
   `.comentario-meli-titulo` (que NO es `.comentario-meli-titulo-mcsono`). */

.spinner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(168, 33, 33, 0.14));
}

.meli-brand-page #spinner .spinner-image {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 38, 108, 0.18));
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.button-container-cds {
  display: flex;
  align-items: flex-start;
}

.button-container-cds > button {
  text-align: center;
  text-align: center;
  margin-right: 4px;
  height: 48px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-dark-blue {
  background-color: #003366;
  color: white;
  border: none;
}

.btn-dark-blue:disabled {
  background-color: #003366;
  color: white;
  opacity: 0.6;
  cursor: not-allowed;
}

button.btn.disabled,
.btn:disabled {
  cursor: not-allowed !important;
}

.btn[disabled] {
  cursor: not-allowed !important;
}

.btn-dark-blue:hover {
  background-color: #03284d;
  color: white;
}

.btn-oca {
  background-color: #5b2b82;
  color: white;
  border: none;
}

.btn-oca:disabled {
  background-color: #5b2b82;
  color: white;
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-oca:hover {
  background-color: #45176a;
  color: white;
}

.button-icon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
  vertical-align: middle;
}

.correo-mini {
  border: 1px solid grey;
  background-color: #2f399b;
  padding: 5px;
  border-radius: 5px;
  width: fit-content;
}

.correo-mini > img {
  width: 40px;
}

.select-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 10px;
  background: linear-gradient(180deg, #a9c8ff, #f0f0f5);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #688bf3;
}

.select-item {
  display: flex;
  flex-direction: column;
}

.macos-button-porcentaje {
  right: 65px;
  bottom: 70px;
  position: fixed;
  background-color: #f9f9f9;
  color: #2c3e50;
  border: 1px solid #bdc3c7;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  white-space: nowrap;
  z-index: 1000;
}

.pill-preparacion {
  color: red;
  font-weight: 600 !important;
}

.percentage-card {
  flex: 1 0 auto;
  max-width: 200px;
  background: linear-gradient(to bottom, #f9f9f9, #e1e8f0);
  border: 1px solid #d0d0d0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: #2c3e50;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.3s ease;
  margin-bottom: 15px;
}

.percentage-card:hover {
  background: linear-gradient(to bottom, #e1e8f0, #f9f9f9);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 762px) {
  .percentage-card {
    max-width: none;
    width: 100%;
    margin: 10px 0;
  }
}

@media (max-width: 762px) {
  #porcentajes,
  .estadisticas-header {
    display: none !important;
  }
}

.percentage-card h2 {
  font-size: 1.5em;
  margin: 0;
}

.percentage-card p {
  font-size: 1em;
  color: #7f8c8d;
}

.percentage-card img {
  width: 50px;
}

.conteo {
  display: flex;
  justify-content: center;
  justify-items: center;
  width: fit-content !important;
  margin: 0 !important;
  padding: 0 !important;
}

.percentage-card:nth-child(1):hover {
  background: linear-gradient(to bottom, #ffffff, rgba(220, 53, 69, 0.7));
}

.percentage-card:nth-child(2):hover {
  background: linear-gradient(to bottom, #ffffff, rgba(0, 123, 255, 0.7));
}

.percentage-card:nth-child(3):hover {
  background: linear-gradient(to bottom, #ffffff, rgba(0, 51, 102, 0.7));
}

.percentage-card:nth-child(4):hover {
  background: linear-gradient(to bottom, #ffffff, rgba(91, 43, 130, 0.7));
}

.percentage-card:nth-child(5):hover {
  background: linear-gradient(to bottom, #ffffff, rgba(255, 0, 120, 0.7));
}

.percentage-card2:hover {
  background: linear-gradient(to bottom, #ffffff, rgba(0, 51, 102, 0.5)) !important;
}

.conteo-Andreani {
  background-color: rgba(0, 51, 102, 0.7);
  padding: 5px;
  border-radius: 5px;
  color: white;
}

.conteo-andesmar {
  background-color: rgba(0, 51, 102, 0.7);
  padding: 5px;
  border-radius: 5px;
  color: white;
}

.conteo-cds {
  background-color: rgba(0, 51, 102, 0.7);
  padding: 5px;
  border-radius: 5px;
  color: white;
}

.conteo-oca {
  background-color: rgba(0, 51, 102, 0.7);
  padding: 5px;
  border-radius: 5px;
  color: white;
}

.conteo-placeit {
  background-color: rgba(0, 51, 102, 0.7);
  padding: 5px;
  border-radius: 5px;
  color: white;
}

.text-purple {
  color: #800080;
}

.pie-chart {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(var(--color) calc(var(--percentage) * 1%), #e0e0e0 0);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  margin: 15px auto;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.pie-chart:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.pie-chart::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent; /* Mantener transparente */
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 6px solid rgba(255, 255, 255, 0.5); /* Borde interno */
  transform: translate(-50%, -50%);
}

.pie-chart::after {
  content: attr(data-percentage);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
}

.text-dark-blue {
  color: #003366;
}

img.gray-filter {
  width: 160px;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(50%) contrast(20%);
}

.estadisticas-header {
  text-align: center;
  font-size: 1rem;
  color: grey;
  border-radius: 12px;
  padding: 10px 20px;
  margin-bottom: -20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* FIN ALERTA MERCADO LIBRE */

.error-comment {
  width: 35px;
}

.btn-delete-bna {
  position: absolute;
  right: 0;
  border-radius: 15px 0 0 15px;
  border: none;
}

.btn-delete-bna:hover {
  color: yellow;
}

.ios-style-popup {
  border-radius: 20px;
  padding: 20px;
  font-family:
    "San Francisco",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    sans-serif;
}

.ios-style-title {
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
}

.ios-style-content {
  font-size: 1.1em;
  color: #666;
}

.ios-style-confirm-button {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
}

.ios-style-confirm-button:hover {
  background-color: #005bb5;
}

.counter2 {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.counter2:hover {
  transform: scale(1.1);
}

.counter2.imported {
  background-color: #4caf50; /* Verde */
}

.counter2.existing {
  background-color: #ff9800; /* Naranja */
}

.counter2.skipped {
  background-color: #f44336; /* Rojo */
}

.counter2.changed {
  background-color: #2196f3; /* Azul */
}

.counter2.cancelled {
  background-color: orchid; /* Orquidea */
}

/* Estilo MacOS para SweetAlert2 */
.swal2-macos-popup {
  border-radius: 16px !important;
  padding: 30px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  background: #f4f4f7;
}

.swal2-macos-title {
  font-size: 1.875em !important;
  color: #333 !important;
  font-weight: 800;
}

.swal2-macos-button {
  border-radius: 8px !important;
  padding: 8px 24px !important;
  background-color: #007aff !important;
  color: white !important;
  font-weight: 500;
  font-size: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ALERTAS FACTURACION MELI */
.alert-ios-meli {
  position: fixed;
  bottom: 100px;
  right: 20px;
  background-color: #f8f9fa;
  color: #212529;
  border: 1px solid #ced4da;
  border-radius: 10px;
  padding: 10px 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  z-index: 1050;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

.alert-ios-meli i {
  margin-right: 10px;
}

.alert-ios-meli .close-btn {
  background: none;
  border: none;
  color: #212529;
  font-size: 16px;
  margin-left: 10px;
  cursor: pointer;
}
/* ALERTAS FACTURACION MELI */

/* PAGINATION TIENDAS VIRTUALES */
#filtered-pagination {
  padding-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  overflow-x: auto;
  white-space: nowrap;
}

.pagination-button {
  border-top: 1px solid #007aff;
  border-bottom: 1px solid #007aff;
  padding: 10px 15px;
  border-radius: 0;
  background-color: white;
  margin-left: -1px;
  color: #007aff;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.pagination-button:nth-child(1) {
  border: 1px solid #007aff;
  border-radius: 10px 0 0 10px;
  font-weight: bolder;
  background-color: #007aff;
  color: white;
}

.pagination-button:nth-child(7) {
  border: 1px solid #007aff;
  border-radius: 0 10px 10px 0;
  font-weight: bolder;
  background-color: #007aff;
  color: white;
}

.pagination-button:hover {
  background-color: #0051ba;
  color: white;
  font-weight: bolder;
}

.pagination-button:disabled {
  border: 1px solid #007aff;
  background-color: #b0d4ff;
  color: #0051ba;
  opacity: 0.8;
  font-weight: bolder;
  cursor: not-allowed;
}

.active-page {
  background-color: #0051ba;
  color: yellow;
  font-weight: bolder;
}

.no-data-message {
  color: #0051ba;
}
/* FIN PAGINATION TIENDAS VIRTUALES */

.macos-popup {
  border-radius: 12px;
  background-color: #f0f4f8;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  padding: 20px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.macos-title {
  font-size: 20px;
  font-weight: bold;
  color: #2c3e50;
  text-align: center;
}

.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -35px;
}

.macos-input {
  border: 2px solid #007aff;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  margin-bottom: 5px;
  width: 100%;
  transition:
    border 0.3s,
    box-shadow 0.3s;
}

.macos-input:focus {
  border-color: #005bb5;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 122, 255, 0.5);
}

.input-description {
  font-size: 14px;
  color: #7f8c8d;
  text-align: center;
}

.macos-button {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    transform 0.2s;
  width: 100%;
  margin-top: -10px;
}

.macos-button:hover {
  background-color: #005bb5; /* Color más oscuro al pasar el mouse */
  transform: translateY(-1px); /* Efecto de elevación */
}

.swal2-validation-message {
  text-align: center;
  font-size: small;
  font-weight: 600;
}

/* WIFI — toast de conexión perdida (flat, estilo card LogiPaq) */
.notification-ios-wifi {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  max-width: 330px;
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #fff;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #dc2626;
  padding: 18px 20px 16px;
  border-radius: 14px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.86rem;
  line-height: 1.45;
  z-index: 2000;
  animation: fadeIn 0.4s;
}

.notification-ios-wifi.blink {
  animation:
    fadeIn 0.6s,
    wifiPulse 1.6s infinite alternate;
}

@keyframes wifiPulse {
  from {
    border-left-color: #dc2626;
  }
  to {
    border-left-color: #fca5a5;
  }
}

.wifi-icon-ios-wifi {
  width: 84px;
  margin: 0 auto 4px;
  display: block;
}

.close-btn-ios-wifi {
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  font-size: 13px;
  color: #9ca3af;
  line-height: 1;
}
.close-btn-ios-wifi:hover {
  color: #dc2626;
}

.retry-button-ios-wifi {
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 7px 18px;
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.retry-button-ios-wifi:hover {
  background: #b91c1c;
  color: #fff;
}

.LogiPaq-wifi {
  font-family: "Titan One", sans-serif;
  font-size: 1.3rem;
  color: #3483fa;
  letter-spacing: 0.01em;
}
/* FIN WIFI */

.spinner-danger-ml {
  margin-left: 10px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top: 6px solid #721c24;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
}

#camera-preview {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  display: none;
}

#camera-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#camera-preview::after {
  content: "Escanea Codigo de Barras";
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  border: 2px dashed rgba(255, 255, 0, 0.8);
  border-radius: 10px;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1.5em;
  pointer-events: none;
}

.focus-area-camera {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 20%;
  border: 2px dashed #00ff00;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: block;
}

.modal-content {
  background-color: rgba(255, 255, 255, 0.9);
}

#btnSlack > img {
  width: 25px;
}

.slack-error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  background-color: #f5c2c7;
  padding: 15px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  border-inline-end: 1px solid #ccc;
  border-inline-start: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-bottom: none;
}

.slack-error-header {
  text-align: center;
  display: flex;
  align-items: center;
  color: #721c24;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}

.slack-error-header2 {
  font-size: medium;
  font-family: "Rubik", sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  color: #2f610b;
  font-weight: 500;
  text-transform: uppercase;
}

.slack-error-logo {
  width: 30px;
  margin-right: 8px;
}

.slack-error-message {
  color: #dc3545;
  text-align: center;
  font-size: 12px;
  font-family: "Rubik", sans-serif;
}

.slack-error-message2 {
  color: green;
  text-align: center;
  font-size: 12px;
  font-family: "Rubik", sans-serif;
}

.card-facturacion-meli {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 15px;
  background-color: #f9f9f9;
  margin: 10px;
}

.mensaje-desconto {
  font-weight: bold;
}

.prettyContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#comentarioInput {
  border-radius: 10px !important;
}

.import-spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo difuminado */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000; /* Asegúrate de que esté por encima de otros elementos */
}

.import-spinner-container {
  text-align: center;
}

.import-spinner-progress {
  margin-top: 12px;
  color: #ffffff;
  font-size: 30px;
  font-family: "Rubik", sans-serif !important;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 16px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.spinner-container-colecta {
  position: relative;
  text-align: center;
}

.spinner-gif-colecta {
  width: 100px !important;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

#fecha-tiendas-virtuales {
  position: relative;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  width: fit-content;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #007aff;
  border: 1px solid rgba(0, 122, 255, 0.3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  font-family: "San Francisco", "Helvetica Neue", sans-serif;
}

.dropdown-menu {
  z-index: 100000 !important;
}

.disabled {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.remitoCardMeli {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  text-align: center;
  padding: 0.5rem;
  width: fit-content;
  border-radius: 10px 10px 0 0;
  border: solid 1px rgb(145, 182, 250);
  color: black;
  font-size: 1.4rem;
  font-family: "Rubik", sans-serif !important;
  font-weight: 400;
  margin-bottom: 14px !important;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
  transition: 0.5s;
  margin-bottom: -5px !important;
}

.remitoCardMeli:hover {
  color: cornflowerblue;
}

.estadisticas-placeIt1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #ededed;
  padding: 5px 0 20px 0;
  border-radius: 12px 0 0 12px;
  border: 1px solid #ccc;
}

.estadisticas-placeIt2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #ededed;
  padding: 5px 0 20px 0;
  border-radius: 0 12px 12px 0;
  border: 1px solid #ccc;
  margin-left: -1px;
}

.estadisticas-pit {
  display: flex;
  justify-content: center;
  align-items: center;
}

.porcentaje-bordes:last-child {
  border-radius: 0 0 10px 10px;
}

.estadisticas-1 {
  margin-bottom: 0;
  background-color: orangered;
  padding: 10px;
  color: white;
  width: fit-content;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.estadisticas-1 i {
  font-size: 20px;
  margin-right: 5px;
}

.estadisticas-2 {
  margin-bottom: 0;
  background-color: green;
  padding: 10px;
  color: white;
  width: fit-content;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.estadisticas-2 i {
  font-size: 20px;
  margin-right: 5px;
}

.alert-modal-placeit {
  font-size: 1rem;
  text-align: center;
  background-color: #f0f0f5;
  padding: 10px;
  border-radius: 12px;
  color: #333;
}

.alert-modal-Pi {
  background-color: #007aff;
  padding: 10px;
  color: white;
  border-radius: 5px;
  width: fit-content;
}

.porcentaje-resaltado {
  font-size: 1.1rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Rubik", sans-serif;
  color: #004085;
  background: linear-gradient(to bottom, #e0f0ffcc, #cce5ffcc);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #a4d0f5;
  box-shadow:
    0 2px 4px rgba(0, 123, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: inline-block;
  line-height: 1.4;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: all 0.2s ease;
  margin-bottom: 4px;
}

.badge-envios-total {
  font-size: 1.05rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Rubik", sans-serif;
  color: #004085;
  background: linear-gradient(to bottom, #e0f0ffcc, #cce5ffcc);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #a4d0f5;
  box-shadow:
    0 2px 4px rgba(0, 123, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: inline-block;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.estadisticas-header {
  font-size: 1rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Rubik", sans-serif;
  color: #1c1c1e;
  background: linear-gradient(to bottom, #ffffffcc, #f0f0f5cc);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #d2d2d7;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: inline-block;
  line-height: 1.4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.2s ease;
  margin-bottom: 2px;
}

.btn-excel-log {
  font-size: 1.05rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Rubik", sans-serif;
  color: #155724;
  background-color: #d4edda;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #155724;
  box-shadow:
    0 2px 4px rgba(21, 87, 36, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: inline-block;
  margin-left: 6px;
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.2s ease;
}

.btn-excel-log:hover {
  background-color: #c3e6cb;
  transform: scale(1.05);
}

.total-despachos {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estilo para la línea de tiempo PlaceIt*/
.timeline {
  position: relative;
  padding-left: 30px;
  margin: 20px 0;
  list-style: none;
  border-left: 0px solid #d1d1d6;
}

.timeline-placeit {
  position: relative;
  padding-left: 30px;
  margin: 20px 0;
  list-style: none;
  border-left: 0px solid #d1d1d6;
}

.timeline-placeit-item {
  position: relative;
  margin-bottom: 20px;
  padding-left: 20px;
}

.timeline-placeit-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -24px;
  top: -20px;
  width: 30px;
  height: 30px;
  background-color: orangered;
  border: 1px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Ícono de reloj para todos los elementos excepto el último */
.timeline-placeit-item:not(:last-child)::before {
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeline-placeit-item:last-child::before {
  font-weight: 900;
  content: "";
  color: white;
  background-color: green;
}

.timeline-placeit-item-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 5px;
}

.timeline-placeit-item-date {
  font-size: 0.9rem;
}

.timeline-placeit-item-content {
  border-radius: 10px;
  margin-top: 5px;
  font-size: 0.9rem;
}

.timeline-placeit-item-button {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 15px;
  background-color: green;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
}

.timeline-placeit-item-button:hover {
  background-color: #005bb5;
}
/* Fin Estilo para la línea de tiempo */

/* STOCK PRECIO */
.title-stock-tv {
  font-size: 0.9em;
  font-weight: 600;
  color: #1c1c1e;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.icon-title-stock-tv {
  font-size: 0.8em;
  margin-right: 6px;
  color: #8e8e93;
  padding: 5px;
  text-align: center;
}

.status-box-stock-tv {
  text-align: center;
  padding: 3px 12px;
  border-radius: 15px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  background-color: #ecf0f1;
  padding-top: 40px;
  margin-top: -40px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

.status-box-stock-tv-meli {
  text-align: center;
  padding: 3px 12px;
  border-radius: 0 0 15px 15px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid cornflowerblue;
  background-color: #ecf0f1;
  margin-top: -6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

.icon-stock-tv {
  font-size: 0.9em;
  margin-right: 6px;
}

.status-text-stock-tv {
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
}

.stock-bajo-stock-tv {
  color: #ff3b30;
  font-family: "Rubik", sans-serif;
}

.stock-pi-bajo-stock-tv {
  color: #ff3b30;
  font-family: "Rubik", sans-serif;
}

.sin-stock {
  color: #ff3b30;
  font-family: "Rubik", sans-serif;
}

.stock-normal-stock-tv {
  color: #28831a;
  font-family: "Rubik", sans-serif;
}

.stock-pi-normal-stock-tv {
  color: purple;
  font-family: "Rubik", sans-serif;
}

#dateRangePicker.flatpickr-input {
  max-width: 250px;
}

.tituloCorreo {
  margin-left: 0 !important;
}

.tituloCorreo2 {
  font-size: 0.8rem;
}

.pie-chart33 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    #28a745 0% var(--paqueteria),
    #dc3545 var(--paqueteria) var(--fin),
    #e9ecef var(--fin) 100%
  );
}

.pie-chart34 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    #ff0078 0% var(--paqueteria),
    #17a2b8 var(--paqueteria) var(--fin),
    #e9ecef var(--fin) 100%
  );
}

/* CONTENEDOR POSVENTA */
.mac-cell-posventa {
  margin-top: 5px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #f8f8f8;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.mac-cell-posventa .venta-id {
  font-family: "Rubik", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  color: #333;
  gap: 10px;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.mac-cell-posventa .venta-id:hover {
  background-color: rgba(0, 122, 255, 0.1);
  border-radius: 5px;
}

.green-clipboard {
  color: #28a745 !important;
}

.mac-cell-posventa .venta-id i {
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s;
}

.mac-cell-posventa .venta-id i:hover {
  transform: scale(1.2);
}

.icon-user-plus {
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s;
  color: grey !important;
  z-index: 1000;
}

.icon-user-plus:hover {
  transform: scale(1.2);
}

.mac-cell-posventa .estado-select {
  max-width: 250px;
  padding: 6px 10px;
  border-radius: 8px !important;
  border: 1px solid #ccc;
  font-size: 14px;
  background: #fff;
  appearance: none;
  outline: none;
  transition: border-color 0.2s;
}

.mac-cell-posventa .estado-select:focus {
  border-color: #4caf50;
}
/* FIN CONTENEDOR POSVENTA */

/* AVATARS */
.avatar-container {
  position: fixed;
  right: 20px;
  bottom: 200px;
  height: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition:
    transform 0.3s ease,
    margin-bottom 0.3s ease;
  margin-bottom: -30px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.avatar:hover {
  margin-bottom: 0;
  border: 4px solid orange;
}

.avatar:hover img {
  transform: scale(1.2);
}

/* Avatar seleccionado (el destacado abajo del todo) */
.selected-avatar {
  position: fixed;
  right: 15px;
  bottom: 110px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #32d554;
  background-color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  animation: pulseAvatar 2s infinite;
}

/* Efecto de pulso para el avatar seleccionado */
@keyframes pulseAvatar {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 153, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(0, 153, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 153, 255, 0);
  }
}

/* Imagen del avatar */
.selected-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Contenedor relativo para posicionar el indicador */
.selected-avatar-wrapper {
  position: fixed;
  right: 15px;
  bottom: 110px;
  width: max-content;
  height: max-content;
  z-index: 1001;
}

/* Indicador online fuera del avatar */
.online-indicator {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #32d554;
  border: 3px solid white;
  border-radius: 50%;
  bottom: -10px;
  right: -10px;
  animation: pulseOnline 1.5s infinite;
  z-index: 1002;
}

/* Efecto pulsante */
@keyframes pulseOnline {
  0% {
    box-shadow: 0 0 0 0 rgba(50, 213, 84, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(50, 213, 84, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(50, 213, 84, 0);
  }
}

/* Circulito verde (online) */
.online-indicator {
  position: absolute;
  bottom: 0px;
  right: 10px;
  width: 22px;
  height: 22px;
  background-color: #32d554;
  border: 3px solid white;
  border-radius: 50%;
  z-index: 1002;
}
/* FIN AVATARS */

/* AVATARS BURBUJAS */
.bubble-filaDeDatos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 10px;
  padding: 5px;
  z-index: 1000;
  max-width: 250px;
  position: absolute;
  bottom: -20px;
  left: -90px;
  margin-left: 80px;
}

.avatar-filaDeDatos {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 5px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.mensaje-filaDeDatos {
  font-size: 0.6rem;
  color: white;
  background-color: #4cd964;
  border-radius: 18px 18px 18px 18px;
  padding: 6px 10px;
  text-align: start;
  white-space: nowrap;
  margin-top: -20px;
  margin-left: 39px;
  position: relative;

  /* Efecto bisel leve */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

.mensaje-filaDeDatos::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-top: none;
  border-bottom: 9px solid #4cd964;
  transform: rotate(80deg);
}

.mensaje-filaDeDatos.orange-day::before {
  border-bottom-color: orange;
}

.mensaje-filaDeDatos.red-day::before {
  border-bottom-color: red;
}

.orange-day {
  background-color: orange !important;
}

.red-day {
  background-color: red !important;
}

/* FIN AVATARS BURBUJAS */

.filtro-menu {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  padding: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  width: 200px;
  border-radius: 8px;
}

.oculto {
  display: none;
}

th {
  position: relative;
}

#filtro-estado-btn {
  border: none;
  background: none;
  cursor: pointer;
  margin-left: 5px;
}

/* Estilo macOS para el dropdown de skills */
.skill-filter-dropdown .dropdown-menu.custom-skill-menu {
  max-height: 200px;
  overflow-y: auto;
  padding: 0.3rem 0;
  z-index: 1050;
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
  border-radius: 12px 0 0 12px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #dcdcdc;
  backdrop-filter: saturate(180%) blur(20px); /* Estilo macOS */
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.skill-filter-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  border-radius: 8px;
  text-transform: capitalize;
}

.skill-filter-dropdown .dropdown-item:hover {
  background-color: rgba(0, 122, 255, 0.1) !important;
  color: #007aff !important;
  border: none !important;
  cursor: pointer;
}

.skill-filter-dropdown .dropdown-item input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  accent-color: #007aff;
  transform: scale(1.1);
}

.skill-filter-dropdown .dropdown-item > input {
  width: auto !important;
}

.tabla-posventa > thead > tr > th {
  text-align: center;
  vertical-align: middle;
}

.tabla-posventa > thead > tr > th > .th-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* Estilo macOS para el dropdown de skills */

/* Ocultar el encabezado de la columna Stock */
.stock-header {
  display: none;
}

.sku-table2 th:nth-child(2),
.sku-table2 td:nth-child(2) {
  display: none;
}
/* Ocultar el encabezado de la columna Stock */

/* =========================================================
   TIPEO CARDS — redesign light/dark, iOS pill, glass + accent
   ========================================================= */
:root {
  --tipeo-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --tipeo-border: rgba(226, 232, 240, 0.9);
  --tipeo-card-bg: #ffffff;
  --tipeo-card-border: #e8edf3;
  --tipeo-card-shadow: none;
  --tipeo-card-shadow-hover: none;
  --tipeo-block-bg: #f8fafc;
  --tipeo-block-bg-hover: #eff4fb;
  --tipeo-block-border: #e8edf3;
  --tipeo-text: #0f172a;
  --tipeo-text-muted: #64748b;
  --tipeo-monto-bg: #ecfdf5;
  --tipeo-monto-border: #a7f3d0;
  --tipeo-monto-text: #047857;
  --tipeo-btn-bg: #ffffff;
  --tipeo-btn-border: #e2e8f0;
  --tipeo-btn-color: #475569;
  --tipeo-btn-hover-bg: #0f172a;
  --tipeo-btn-hover-color: #ffffff;
}

[data-theme="dark"] {
  --tipeo-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.4) 100%);
  --tipeo-border: rgba(71, 85, 105, 0.55);
  --tipeo-card-bg: rgba(30, 41, 59, 0.85);
  --tipeo-card-border: rgba(71, 85, 105, 0.55);
  --tipeo-card-shadow: none;
  --tipeo-card-shadow-hover: none;
  --tipeo-block-bg: rgba(15, 23, 42, 0.55);
  --tipeo-block-bg-hover: rgba(30, 41, 59, 0.95);
  --tipeo-block-border: rgba(71, 85, 105, 0.45);
  --tipeo-text: #f1f5f9;
  --tipeo-text-muted: #cbd5e1;
  --tipeo-monto-bg: rgba(6, 95, 70, 0.25);
  --tipeo-monto-border: rgba(16, 185, 129, 0.4);
  --tipeo-monto-text: #6ee7b7;
  --tipeo-btn-bg: rgba(15, 23, 42, 0.6);
  --tipeo-btn-border: rgba(71, 85, 105, 0.55);
  --tipeo-btn-color: #cbd5e1;
  --tipeo-btn-hover-bg: #f1f5f9;
  --tipeo-btn-hover-color: #0f172a;
}

.contenedor-macos-tipeo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
  background: var(--tipeo-bg);
  border: 1px solid var(--tipeo-border);
  border-radius: 20px;
  font-family:
    "Inter",
    "Rubik",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  box-shadow: none;
  transition:
    padding 0.25s ease,
    border-radius 0.25s ease;
}

/* ── Filtro de camiones — barra recta con acento lateral ──────────── */
.tipeo-truck-filter-bar {
  display: none;
  width: 100%;
  margin: 18px 0 0;
}

.tipeo-truck-filter-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #2563eb;
  border-radius: 6px;
  background: #f8fafc;
  box-shadow: none;
}

.tipeo-truck-filter-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  color: #ffffff;
  font-size: 16px;
}

.tipeo-truck-filter-card sl-select {
  flex: 1 1 auto;
  min-width: 0;
}

.tipeo-truck-filter-card sl-select::part(form-control) {
  display: block;
  width: 100%;
}

.tipeo-truck-filter-card sl-select::part(combobox) {
  min-height: 38px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
  padding-inline: 12px;
}

.tipeo-truck-filter-card sl-select::part(display-input) {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.tipeo-truck-filter-card sl-select::part(tag) {
  border-radius: 4px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-weight: 700;
}

/* Spinner mientras carga la imagen de logística en tarjetas tipeo */
.imagen-top-tipeo.img-logistica-cargando {
  display: none;
}

/* Mismo footprint que .tarjeta-tipeo .imagen-top-tipeo (60px alto,
   márgenes negativos) para que la tarjeta no colapse ni salte al cargar. */
.tarjeta-tipeo .tipeo-img-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin: -15px auto -12px;
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
}

/* Tabla de búsqueda avanzada: contener dentro del shell napse */
#tablaBusquedaAvanzada {
  width: 100%;
}

#tablaBusquedaAvanzada .tbl-despachos-wrap {
  width: 100%;
  overflow-x: auto;
  background: transparent;
  padding: 4px 0 14px;
  border: 0;
  box-shadow: none;
}

/* ── Selector de camión en SweetAlert (cerrar camión / global) ────── */
.tipeo-truck-choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 2px 2px;
  text-align: left;
}

.tipeo-truck-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
  font-family:
    "Inter",
    "Rubik",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.tipeo-truck-choice:hover {
  border-color: #bfdbfe;
  background: #f8fafc;
}

.tipeo-truck-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tipeo-truck-choice-dot {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, 0.08);
}

.tipeo-truck-choice-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.tipeo-truck-choice-main strong {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.tipeo-truck-choice-main small {
  font-size: 12px;
  color: #64748b;
}

/* Radio custom estilo iOS (anillo que se llena al seleccionar) */
.tipeo-truck-choice::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  box-sizing: border-box;
  transition: border 0.15s ease;
}

.tipeo-truck-choice.is-selected {
  border-color: #0ea5e9;
  background: #f0f9ff;
}

.tipeo-truck-choice.is-selected::after {
  border: 7px solid #0ea5e9;
}
/* ── Fin selector de camión SweetAlert ────────────────────────────── */

#cards-container {
  position: relative;
}

.btn-toggle-tipeo {
  position: absolute;
  top: -14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #0f172a;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: "Inter", "Rubik", sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  z-index: 10;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.btn-toggle-tipeo i {
  font-size: 13px;
  line-height: 1;
}

.btn-toggle-tipeo:hover {
  background: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-toggle-tipeo {
  background: #f1f5f9;
  color: #0f172a;
  border-color: rgba(241, 245, 249, 0.4);
}

[data-theme="dark"] .btn-toggle-tipeo:hover {
  background: #60a5fa;
  color: #0f172a;
  border-color: #60a5fa;
}

/* Al minimizar, la tabla recupera espacio (dock está fixed) */
body.tipeo-floating-on #tablaDespachosActual.tbl-despachos-wrap {
  margin-top: 0 !important;
}

/* Floating mode — dock flotante estilo macOS */
.contenedor-macos-tipeo.tipeo-floating {
  position: fixed;
  bottom: 18px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 1040;
  display: flex;
  flex-wrap: nowrap;
  width: auto;
  max-width: calc(100vw - 28px);
  gap: 10px;
  padding: 10px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(226, 232, 240, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  animation: tipeoFloatIn 0.28s ease;
}

[data-theme="dark"] .contenedor-macos-tipeo.tipeo-floating {
  background: rgba(30, 41, 59, 0.78);
  border-color: rgba(71, 85, 105, 0.55);
}

@keyframes tipeoFloatIn {
  from {
    transform: translate(-50%, 16px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.contenedor-macos-tipeo.tipeo-floating .tarjeta-tipeo {
  padding: 8px 18px 8px 10px;
  gap: 6px 10px;
  border-radius: 18px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border: none;
  cursor: pointer;
}

.contenedor-macos-tipeo.tipeo-floating .tarjeta-tipeo:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.contenedor-macos-tipeo.tipeo-floating .tarjeta-tipeo::after {
  display: none;
}

.contenedor-macos-tipeo.tipeo-floating .imagen-top-tipeo {
  max-height: 38px;
  max-width: 38px;
  width: 38px;
  height: 38px;
  margin: 0 !important;
  flex-shrink: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  object-fit: contain;
}

.contenedor-macos-tipeo.tipeo-floating .bloque-info-tipeo {
  padding: 0;
  margin: 0;
  width: auto;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  gap: 4px;
  color: #ffffff;
}

.contenedor-macos-tipeo.tipeo-floating .bloque-info-tipeo:hover {
  background: transparent;
  border: none;
  cursor: default;
}

.contenedor-macos-tipeo.tipeo-floating .bloque-info-tipeo-doble,
.contenedor-macos-tipeo.tipeo-floating .texto-etiquetas,
.contenedor-macos-tipeo.tipeo-floating .total-monto-contenedor {
  display: none;
}

/* Botones visibles pero compactos en modo minimizado, en segunda línea */
.contenedor-macos-tipeo.tipeo-floating .botones-tipeo {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 4px;
  justify-content: center;
}

.contenedor-macos-tipeo.tipeo-floating .botones-tipeo .btn {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.contenedor-macos-tipeo.tipeo-floating .numero-tipeo {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.contenedor-macos-tipeo.tipeo-floating .icono-tipeo {
  display: none;
}

/* Botón toggle cuando el dock está en modo floating — fixed centrado arriba */
body.tipeo-floating-on .btn-toggle-tipeo {
  position: fixed;
  top: auto;
  right: auto;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: #2563ebab;
  border: 1px solid #2563eb;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  gap: 4px;
  z-index: 1050;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  white-space: nowrap;
}

body.tipeo-floating-on .btn-toggle-tipeo i {
  font-size: 11px;
}

body.tipeo-floating-on .btn-toggle-tipeo:hover {
  transform: translateX(-50%) translateY(-1px);
  background: #1d4ed8;
  border-color: #1d4ed8;
}

@media (max-width: 767.98px) {
  .contenedor-macos-tipeo.tipeo-floating {
    left: 8px;
    right: 8px;
    transform: none;
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 10px 12px;
  }
  .contenedor-macos-tipeo.tipeo-floating::-webkit-scrollbar {
    display: none;
  }

  @keyframes tipeoFloatIn {
    from {
      transform: translateY(16px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

.tarjeta-tipeo {
  position: relative;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--tipeo-card-shadow);
  overflow: hidden;
  color: #ffffff;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.tarjeta-tipeo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%);
}

.tarjeta-tipeo:hover {
  transform: translateY(-3px);
  box-shadow: var(--tipeo-card-shadow-hover);
}

.tarjeta-tipeo .imagen-top-tipeo {
  display: block;
  max-height: 60px;
  width: auto;
  max-width: 85%;
  margin: -15px auto -12px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.bloque-info-tipeo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 12px;
  border-radius: 12px;
  width: 100%;
  color: #ffffff;
  position: relative;
  z-index: 1;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.bloque-info-tipeo:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.bloque-info-tipeo-doble {
  display: flex;
  gap: 6px;
  width: 100%;
}

.bloque-info-tipeo-doble .bloque-info-tipeo {
  margin: 0;
}

.icono-tipeo {
  margin: 0;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1;
}

.numero-tipeo {
  font-weight: 600;
  font-size: 1.35rem;
  color: #ffffff;
  font-family: "Inter", "Rubik", sans-serif;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.texto-etiquetas {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: "Inter", "Rubik", sans-serif;
}

.botones-tipeo {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  width: 100%;
  justify-content: center;
}

.botones-tipeo .btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: none !important;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.botones-tipeo .btn:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

.total-monto-contenedor {
  background: var(--tipeo-monto-bg) !important;
  border-color: var(--tipeo-monto-border) !important;
}

.total-monto-contenedor .icono-tipeo,
.total-monto-oca,
.total-monto-andreani,
.total-monto-cds,
.total-monto-andesmar,
.total-monto-icon {
  color: var(--tipeo-monto-text) !important;
}

/* Color sólido por logística */
.rojo-tipeo {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}
.azul-tipeo {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
}
.lila-tipeo {
  background: linear-gradient(180deg, #a855f7 0%, #7e22ce 100%);
}
.azul-oscuro-tipeo {
  background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
}

.contenedor-tipeo-andreani {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background: var(--tipeo-block-bg);
  border: 1px solid var(--tipeo-block-border);
  border-radius: 12px;
  box-shadow: none;
}

@media (max-width: 1200px) {
  .contenedor-macos-tipeo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .contenedor-macos-tipeo {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 10px;
  }
  .tarjeta-tipeo {
    padding: 14px 12px 12px;
  }
}

/* =========================================================
   TABLA DESPACHOS — light "stacked cards" redesign
   ========================================================= */
:root {
  --tbl-bg: #ffffff;
  --tbl-bg-soft: #f8fafc;
  --tbl-bg-soft-2: #f1f5f9;
  --tbl-border: #e8edf3;
  --tbl-border-strong: #d8e0ea;
  --tbl-text: #0f172a;
  --tbl-text-muted: #64748b;
  --tbl-text-soft: #94a3b8;
  --tbl-accent: #475569;
  --tbl-shadow-row: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.03);
  --tbl-shadow-row-hover: 0 8px 22px -10px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.04);
  --logi-andreani: #dc2626;
  --logi-andesmar: #2563eb;
  --logi-oca: #7c3aed;
  --logi-cruz-del-sur: #1e3a8a;
}

#tablaDespachosActual.tbl-despachos-wrap {
  background: transparent;
  padding: 4px 0 14px;
  margin-top: 20px;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tbl-despachos {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  background: var(--tbl-bg);
  border: 1px solid var(--tbl-border);
  border-radius: 0;
  overflow: hidden;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  color: var(--tbl-text);
}

/* HEADER */
.tbl-despachos thead th {
  background: var(--tbl-bg-soft);
  color: var(--tbl-text-soft);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--tbl-border);
  white-space: nowrap;
  vertical-align: middle;
}
.tbl-despachos thead th span {
  vertical-align: middle;
}
.tbl-despachos thead th i {
  font-size: 12px;
  margin-right: 6px;
  color: #cbd5e1;
  vertical-align: middle;
}
.tbl-despachos thead .th-bultos,
.tbl-despachos thead .th-valor,
.tbl-despachos thead .th-act {
  text-align: center;
}

/* ROWS — flush, light, divided by single hairline */
.tbl-despachos tbody tr.tbl-row {
  background: var(--tbl-bg);
  transition: background 0.15s ease;
}
.tbl-despachos tbody tr.tbl-row td {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tbl-border);
  padding: 12px 14px;
  vertical-align: middle;
  font-size: 13px;
  color: var(--tbl-text);
  box-shadow: none;
}
.tbl-despachos tbody tr.tbl-row td:first-child {
  position: relative;
  padding-left: 18px;
}
.tbl-despachos tbody tr.tbl-row td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--row-accent, transparent);
}
.tbl-despachos tbody tr.tbl-row:last-child td {
  border-bottom: 0;
}
.tbl-despachos tbody tr.tbl-row:hover {
  background: var(--tbl-bg-soft);
}

/* Per-logistica accent */
.tbl-despachos tbody tr.tbl-row[data-logistica="andreani"] {
  --row-accent: var(--logi-andreani);
}
.tbl-despachos tbody tr.tbl-row[data-logistica="andesmar"] {
  --row-accent: var(--logi-andesmar);
}
.tbl-despachos tbody tr.tbl-row[data-logistica="oca"] {
  --row-accent: var(--logi-oca);
}
.tbl-despachos tbody tr.tbl-row[data-logistica="cruz-del-sur"] {
  --row-accent: var(--logi-cruz-del-sur);
}

/* FECHA */
.tbl-fecha {
  white-space: nowrap;
}
.tbl-fecha .tbl-fecha-date,
.tbl-fecha .tbl-fecha-time {
  display: block;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.tbl-fecha .tbl-fecha-date {
  color: var(--tbl-text);
  font-weight: 600;
  font-size: 12.5px;
}
.tbl-fecha .tbl-fecha-time {
  color: var(--tbl-text-soft);
  font-size: 11px;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.tbl-fecha .tbl-fecha-meta {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--tbl-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10.5px;
  color: var(--tbl-text-muted);
  line-height: 1.4;
}
.tbl-fecha .tbl-fecha-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tbl-fecha .tbl-fecha-meta i {
  color: var(--tbl-text-soft);
  font-size: 10px;
}

/* LOGISTICA */
.tbl-logi .tbl-logi-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 12px 4px 4px;
  background: var(--tbl-bg-soft);
  border: 1px solid var(--tbl-border);
  border-radius: 999px;
}
.tbl-logi .tbl-logi-dot {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--logi-color, #475569);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 2px rgba(15, 23, 42, 0.12);
}
.tbl-logi .tbl-logi-dot img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.tbl-logi .tbl-logi-dot.andreani-tablita {
  --logi-color: var(--logi-andreani);
}
.tbl-logi .tbl-logi-dot.andesmar-tablita {
  --logi-color: var(--logi-andesmar);
}
.tbl-logi .tbl-logi-dot.oca-tablita {
  --logi-color: var(--logi-oca);
}
.tbl-logi .tbl-logi-dot.cruz-del-sur-tablita {
  --logi-color: var(--logi-cruz-del-sur);
}
.tbl-logi .tbl-logi-name {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--tbl-text);
  letter-spacing: 0.01em;
}
.tbl-logi .tbl-logi-chip[data-logistica="andreani"] {
  background: #fef2f2;
  border-color: #fee2e2;
}
.tbl-logi .tbl-logi-chip[data-logistica="andreani"] .tbl-logi-name {
  color: var(--logi-andreani);
}
.tbl-logi .tbl-logi-chip[data-logistica="andesmar"] {
  background: #eff6ff;
  border-color: #dbeafe;
}
.tbl-logi .tbl-logi-chip[data-logistica="andesmar"] .tbl-logi-name {
  color: var(--logi-andesmar);
}
.tbl-logi .tbl-logi-chip[data-logistica="oca"] {
  background: #f5f3ff;
  border-color: #ede9fe;
}
.tbl-logi .tbl-logi-chip[data-logistica="oca"] .tbl-logi-name {
  color: var(--logi-oca);
}
.tbl-logi .tbl-logi-chip[data-logistica="cruz-del-sur"] {
  background: #eef2ff;
  border-color: #e0e7ff;
}
.tbl-logi .tbl-logi-chip[data-logistica="cruz-del-sur"] .tbl-logi-name {
  color: var(--logi-cruz-del-sur);
}

/* SEGUIMIENTO */
.tbl-seg .tbl-seg-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: #ffffff;
  border: 1px solid var(--tbl-border);
  border-radius: 8px;
  color: var(--tbl-text);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 600;
  font-family: "JetBrains Mono", "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
  box-shadow: none;
}
.tbl-seg .tbl-seg-chip:hover {
  background: var(--tbl-bg-soft);
  border-color: var(--tbl-border-strong);
  transform: none;
  text-decoration: none;
}
.tbl-seg .tbl-seg-chip .tbl-seg-ico {
  color: var(--tbl-text-soft);
  font-size: 13px;
}
.tbl-seg .tbl-seg-chip .tbl-seg-num {
  color: var(--tbl-text);
}
.tbl-seg .tbl-seg-chip .tbl-seg-out {
  color: var(--tbl-text-soft);
  font-size: 11px;
  margin-left: 2px;
}
.tbl-seg .tbl-seg-chip:hover .tbl-seg-out {
  color: var(--tbl-text);
}

/* BULTOS */
.tbl-bultos {
  text-align: center;
}
.tbl-bultos .tbl-bultos-disk {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ecfdf5;
  border: 1.5px solid #6ee7b7;
  color: #047857;
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 4px #ecfdf5;
}
.tbl-bultos .tbl-bultos-disk .tbl-bultos-num {
  position: relative;
  z-index: 1;
}
.tbl-bultos .tbl-bultos-disk .tbl-bultos-ok,
.tbl-bultos .tbl-bultos-disk .tbl-bultos-warn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: #10b981;
  color: #ffffff;
  border: 2px solid #ffffff;
}
.tbl-bultos .tbl-bultos-disk[data-bultos]:not([data-bultos="1"]) {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #92400e;
  box-shadow: inset 0 0 0 4px #fffbeb;
}
.tbl-bultos .tbl-bultos-disk[data-bultos]:not([data-bultos="1"]) .tbl-bultos-warn {
  background: #f59e0b;
  color: #ffffff;
}

/* REMITO */
.tbl-remito .tbl-remito-num {
  display: block;
  font-family: "JetBrains Mono", "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tbl-text);
  letter-spacing: 0.04em;
  background: transparent;
  padding: 0;
  border-radius: 0;
  line-height: 1.4;
}
.tbl-remito .tbl-prods {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tbl-remito .tbl-prod {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: var(--tbl-bg-soft);
  border: 1px solid var(--tbl-border);
  border-radius: 8px;
}
.tbl-remito .tbl-prod-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.tbl-remito .tbl-prod-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tbl-text);
}
.tbl-remito .tbl-prod-name i {
  color: var(--tbl-text-soft);
  font-size: 11px;
}
.tbl-remito .tbl-prod-qty {
  background: #ffffff;
  color: var(--tbl-accent);
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--tbl-border-strong);
  font-weight: 700;
  font-size: 11px;
  margin-left: 0;
}
.tbl-remito .tbl-prod-qty.tbl-prod-qty-alert {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.tbl-remito .tbl-prod-desc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--tbl-text-muted);
  max-width: 30ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tbl-remito .tbl-prod-desc i {
  color: var(--tbl-text-soft);
  font-size: 10.5px;
  flex-shrink: 0;
}

/* VALOR */
.tbl-valor {
  text-align: center;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0f766e;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  background: transparent;
  margin: 0;
}

/* INFO (destinatario) */
.tbl-info .tbl-info-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  min-width: 180px;
  font-size: 11.5px;
  color: var(--tbl-text);
}
.tbl-info .tbl-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.tbl-info .tbl-info-row i {
  width: 14px;
  font-size: 11.5px;
  color: var(--tbl-text-soft);
  flex-shrink: 0;
}
.tbl-info .tbl-info-row span {
  color: var(--tbl-text);
  font-weight: 500;
}
.tbl-info .tbl-info-row small {
  color: var(--tbl-text-soft);
  font-size: 10px;
  margin-left: 6px;
  font-weight: 600;
  padding: 1px 6px;
  background: var(--tbl-bg-soft);
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.tbl-info .tbl-info-empty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--tbl-bg-soft);
  color: var(--tbl-text-soft);
  border: 1px dashed var(--tbl-border-strong);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.tbl-info .tbl-info-empty i {
  font-size: 11px;
}

/* ACTION */
.tbl-act {
  text-align: center;
  width: 48px;
}
.tbl-act .tbl-del {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--tbl-text-soft);
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.tbl-act .tbl-del:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fee2e2;
}
.tbl-act .tbl-del:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* EMPTY STATE */
.tbl-despachos tbody tr.tbl-empty-row td {
  background: var(--tbl-bg);
  border: 1px dashed var(--tbl-border-strong);
  border-radius: 14px;
  padding: 28px 14px;
}
.tbl-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--tbl-text-soft);
  font-size: 13px;
  font-weight: 500;
}
.tbl-empty i {
  font-size: 18px;
  color: var(--tbl-border-strong);
}

/* Legacy shims — keep selectors used elsewhere alive */
.andreani-tablita,
.andesmar-tablita,
.oca-tablita,
.cruz-del-sur-tablita {
  background: #ffffff;
  border: 1px solid var(--tbl-border);
}
.logistica-texto {
  display: inline-block;
}

.badge-camiones-historial-tipeo {
  position: absolute;
  top: -2px;
  top: 1px;
  right: 0px;
  background-color: red;
  border: 1px solid pink;
  color: white;
  font-size: 10px;
  font-weight: bold;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 50%;
  text-align: center;
  pointer-events: none;
  z-index: 10;
}

.selector-camiones-historial-tipeo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.camion-opcion-historial-tipeo {
  text-transform: capitalize;
  padding: 10px 12px;
  font-weight: 500;
  border-radius: 8px;
}

.logistica-contenedor-historial-tipeo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logistica-texto-historial-tipeo {
  font-weight: bold;
  text-transform: capitalize;
}

.logistica-circulo-historial-tipeo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}

.tabla-historial-tipeo th,
.tabla-historial-tipeo td {
  vertical-align: middle;
}

mark {
  background-color: #ffc107 !important;
  color: black !important;
  padding: 0 2px;
  font-weight: bold;
  border-radius: 3px;
}

/* PRODCUTOS TABLA TIPEO DESPACHO */

.infoMacOsy {
  background: #f9fafb;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  font-family: "SF Pro Text", "Rubik", sans-serif;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.infoDetalleMacOsy {
  font-size: 0.875rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.infoUserMac {
  color: #1d4ed8 !important;
  font-size: 1rem !important;
}

.infoDetalleMacOsy span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #475569;
}

.infoDetalleMacOsy span i {
  font-style: normal;
  font-size: 1rem;
}

/* Legacy product class aliases — superseded by .tbl-prod* in the despachos table */

.macos-chat {
  margin-top: -50px;
  border-radius: 15px !important;
  font-family:
    "San Francisco",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  transition: all 0.2s ease-in-out;
}

#reporteDetallado > .macos-chat > .table {
  margin-bottom: -25px !important;
}

#reporteDetallado > .macos-chat > .table:last-child {
  margin-bottom: 0 !important;
}

#resumenEjecutivo {
  margin-top: -40px;
}

.macos-chat table {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 15px;
}

.macos-title {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(245, 245, 245, 0.7);
  border: 1px solid rgba(200, 200, 200, 0.6);
  font-weight: 400;
  font-size: 18px;
  color: black;
  backdrop-filter: blur(6px);
}
.filtros-macos-estadisticas .form-select,
.filtros-macos-estadisticas .form-control,
.filtros-macos-estadisticas .btn {
  border-radius: 8px !important;
  font-size: 1.1rem;
  height: 50px;
}

.filtros-macos-estadisticas select {
  padding: 0.5rem;
  background-color: #f4f4f4;
  color: #333;
}

.filtros-macos-estadisticas select:hover,
.filtros-macos-estadisticas .form-control:hover {
  background-color: #e9ecef;
}

.filtros-macos-estadisticas .btn {
  background-color: #28a745;
  color: white;
  border: none;
}

.filtros-macos-estadisticas .btn:hover {
  background-color: #218838;
}

.filtros-macos-estadisticas i {
  margin-right: 8px;
}

.filtros-macos-estadisticas .form-select {
  font-size: 1rem;
  color: #495057;
}

.resumen-macos {
  border: none;
  border-radius: 12px;
  color: #333;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
}

.resumen-macos:hover {
  transform: translateY(-4px);
}

.bg-pastel-pink {
  background-color: #fef4f4;
  border: 1px solid #e0dada;
  box-shadow: 0 2px 6px rgba(255, 192, 203, 0.2);
}

.bg-pastel-green {
  background-color: #f2fbf1;
  border: 1px solid #d9e7d6;
  box-shadow: 0 2px 6px rgba(144, 238, 144, 0.2);
}

.bg-pastel-blue {
  background-color: #f1f8ff;
  border: 1px solid #c9dff7;
  box-shadow: 0 2px 6px rgba(173, 216, 230, 0.2);
}

.bg-pastel-yellow {
  background-color: #fffbea;
  border: 1px solid #eae3c4;
  box-shadow: 0 2px 6px rgba(255, 255, 153, 0.2);
}

.resumen-macos {
  border-radius: 14px;
  color: #333;
  transition: all 0.3s ease-in-out;
}

.resumen-macos:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.resumen-macos .card-title {
  font-family: "Rubik", sans-serif;
  font-size: 1.5rem;
  color: #444;
  font-weight: 500;
}

.resumen-macos .card-text {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1d4ed8;
  background: lightblue;
  border-radius: 10px;
  width: fit-content;
  padding: 10px;
  font-family: "Rubik", sans-serif;
}

#valorTotal {
  font-size: 1.3rem;
  color: green;
  background: lightgreen;
  border-radius: 10px;
  width: fit-content;
  padding: 10px;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
}

.lista-macos {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
}

.resumen-macos small {
  color: #777;
  font-size: 0.85rem;
}

.resumen-macos i {
  margin-right: 6px;
  color: #666;
}

.grafico-macos {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

.grafico-macos:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  background-color: lemonchiffon;
}

.grafico-macos .card-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 1rem 1.25rem;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.grafico-macos .card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.grafico-macos .btn-light {
  background-color: #f1f1f1;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.85rem;
}

.grafico-macos .btn-light:hover {
  background-color: #e0e0e0;
}

.grafico-macos .dropdown-menu {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.grafico-macos .card-body {
  padding: 1.25rem;
}

.chart-container {
  cursor: pointer;
  background-color: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}

.informe-macos {
  cursor: pointer;
  background-color: #fdfdfd;
  border: 1px solid #e2e2e2;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.informe-macos:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.informe-macos .card-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e2e2;
  padding: 1rem 1.25rem;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.informe-macos .card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.informe-macos .btn-success {
  border-radius: 8px;
  font-size: 0.85rem;
  padding: 6px 12px;
  background-color: #4cd964;
  border: none;
  transition: background-color 0.2s ease;
}

.informe-macos .btn-success:hover {
  background-color: #43c45e;
}

.informe-macos .card-body {
  background-color: #fafafa;
  padding: 1.25rem;
  font-family:
    "San Francisco",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-size: 0.95rem;
  color: #444;
  white-space: pre-line;
  line-height: 1.6;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.lista-macos {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.lista-macos li {
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}

.lista-macos li:last-child {
  border-bottom: none;
}

.macos-title2 {
  margin-top: -80px !important;
}

/* BUSCADOR DE TANDAS */
.search-button-macos {
  border-radius: 15px;
  padding: 5px 12px;
  font-size: 13px;
  border: 1px solid #d1d1d1;
  background-color: #f8f9fa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.search-button-macos:hover {
  background-color: #e9ecef;
  border-color: #c4c4c4;
}

.search-input-container-macos {
  position: relative;
  margin-top: 8px;
}

.search-input-macos {
  border-radius: 15px;
  padding: 5px 15px;
  font-size: 13px;
  border: 1px solid #d1d1d1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-results-macos {
  margin-top: 8px;
  padding: 10px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
  font-size: 13px;
  color: #333;
}

/* Spinner estilo macOS */
#spinnerTandas {
  width: 20px;
  height: 20px;
  border-width: 2px;
  margin: 0 auto;
}

.search-result-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.search-result-item:last-child {
  border-bottom: none;
}

.result-icon {
  margin-right: 8px;
  font-size: 16px;
}

.result-success {
  color: #28a745;
}

.result-error {
  color: #dc3545;
}

.result-loading {
  color: #007bff;
}

#countdownText {
  font-size: 0.8em;
  margin-top: 8px;
  color: #666;
  transition: color 0.3s ease;
  font-style: italic;
}
/* FIN BUSCADOR DE TANDAS */

.transport-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  font-size: 1.1rem;
  line-height: 1.6;
}

.btn-seguro {
  height: 47px !important;
}

/* Aviso tipo Mac OS para ME2 */
.alert-macos-meli-me2 {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, #f0f4ff 0%, #e7e9fc 100%);
  border: 1px solid #bfc9df;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  color: #2b2c3e;
  font-size: 0.8rem;
  box-shadow: 0 2px 8px 0 rgba(120, 140, 180, 0.1);
}
.shield-me2 {
  font-size: 2rem;
  color: #007aff;
  margin-top: 2px;
  margin-bottom: -15px;
}

.unlock-me2 {
  font-size: 1rem;
  color: #007aff;
}

.alert-macos-meli-me2 .unlock-btn {
  background: #fff;
  border: 1px solid #bfc9df;
  border-radius: 8px;
  color: #007aff;
  font-weight: 500;
  font-family: "Rubik", sans-serif;
  text-transform: uppercase;
  padding: 5px 13px;
  font-size: 0.95em;
  cursor: pointer;
  transition: background 0.18s;
}
.alert-macos-meli-me2 .unlock-btn:hover {
  background: #e7e9fc;
}

.titulo-modal-liquid-glass {
  font-family: "Rubik", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #565656ff;
}

.unlock-title {
  font-family: "Rubik", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.disabled,
.btn.disabled,
button:disabled {
  pointer-events: none !important;
  opacity: 0.6 !important;
  filter: grayscale(0.2);
}

/* Botón ACEPTAR CLIENTE & REMITO Liquid Glass*/
#btn-modal-lg-ok {
  transition:
    background 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}

#btn-modal-lg-ok:hover {
  background: #339cff;
  transform: scale(1.06);
  box-shadow: 0 4px 16px #007aff33;
}

/* Botón CANCELAR CLIENTE & REMITO Liquid Glass*/
#btn-modal-lg-cancel {
  transition:
    background 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}

#btn-modal-lg-cancel:hover {
  background: #f3f3f8;
  transform: scale(1.06);
  box-shadow: 0 4px 16px #ccc;
}

/* Estilos generales modales macOS */
.modal-mac {
  border-radius: 12px;
  overflow: hidden;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-mac-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 16px 20px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.modal-mac-header .modal-title {
  font-weight: 600;
  color: #2c3e50;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}

.modal-mac-body {
  padding: 20px;
  background-color: #ffffff;
}

.modal-mac-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: 16px 20px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* ===== Liquid glass: modal Documentación Pendiente ===== */
#modalDocumentacion .modal-content.modal-mac {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0.48) 100%
  );
  backdrop-filter: blur(28px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.06);
  box-shadow:
    0 18px 50px rgba(31, 38, 135, 0.32),
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 -2px 6px rgba(255, 255, 255, 0.4);
}

/* Reflejo superior tipo vidrio líquido */
#modalDocumentacion .modal-content.modal-mac::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

#modalDocumentacion .modal-mac-header,
#modalDocumentacion .modal-mac-body,
#modalDocumentacion .modal-mac-footer {
  position: relative;
  z-index: 1;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] #modalDocumentacion .modal-content.modal-mac {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.6) 0%, rgba(30, 41, 59, 0.32) 100%);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.16),
    inset 0 -2px 6px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] #modalDocumentacion .modal-content.modal-mac::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
}

.btn-close-mac {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #6c757d;
  transition: all 0.2s;
  padding: 0;
}

.btn-danger.btn-close {
  background: none;
  border: none;
  color: #dc3545;
  font-size: 1.2rem;
  padding: 0;
  opacity: 1;
}

/* Estilos para el contenido de documentación */
.mac-scroll-container {
  scrollbar-width: thin;
  scrollbar-color: #dee2e6 #f8f9fa;
}

.mac-scroll-container::-webkit-scrollbar {
  width: 8px;
}

.mac-scroll-container::-webkit-scrollbar-track {
  background: #f8f9fa;
}

.mac-scroll-container::-webkit-scrollbar-thumb {
  background-color: #dee2e6;
  border-radius: 4px;
}

.mac-logistica-container {
  padding: 15px;
}

.mac-logistica-item {
  background-color: #f8f9fa;
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.mac-logistica-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mac-logistica-header {
  padding: 12px 15px;
  background-color: #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.mac-logistica-title {
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  display: flex;
  align-items: center;
}

.mac-logistica-badge {
  background-color: #007bff;
  color: white;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.8em;
}

.mac-logistica-content {
  padding: 0;
}

.mac-fecha-item {
  border-bottom: 1px solid #e9ecef;
  padding: 12px 15px;
}

.mac-fecha-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mac-camion-item > div,
.mac-description {
  display: block;
  margin-top: 6px;
}

.mac-description {
  margin-top: 10px;
  font-size: 0.85em;
  color: grey;
  font-weight: 300;
}

.mac-fecha-title,
.mac-fecha-title2 {
  font-weight: 500;
  color: #1c1c1e;
  margin: 0;
  padding: 12px 18px;
  border-radius: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.35);
  border: 1.5px solid #0a84ff;
}

.mac-fecha-badge {
  background: rgba(255, 255, 255, 0.25);
  color: red;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 800;
  border: 1.2px solid orangered;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mac-camion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mac-camion-item {
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f3f5;
}

.mac-camion-item:last-child {
  border-bottom: none;
}

.mac-camion-name {
  font-size: 0.9em;
  font-weight: 500;
  color: whitesmoke;
  padding: 6px 12px;
  border-radius: 5px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: #727272;
  display: inline-block;
  position: relative;
  padding-left: 28px;
}

.mac-camion-name::before {
  content: "📌";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85em;
}

/* ── Doc Pending redesign ────────────────────────────────────── */
.doc-pending-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.doc-pending-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.doc-pending-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.doc-pending-logi-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 17px;
  flex-shrink: 0;
}

.doc-pending-logi-name {
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
  flex: 1;
}

.doc-pending-logi-count {
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.doc-pending-card-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-date-section {
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  overflow: hidden;
}

.doc-date-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.doc-date-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.doc-date-count {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  background: #e2e8f0;
  padding: 2px 7px;
  border-radius: 999px;
}

.doc-truck-list {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.doc-truck-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.doc-truck-name {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 7px;
}

.doc-truck-name i {
  color: #64748b;
  font-size: 14px;
}

.btn-cargar-doc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid #3b82f6;
  border-radius: 7px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-cargar-doc:hover {
  background: #dbeafe;
}

.doc-pending-empty {
  text-align: center;
  padding: 40px 20px;
}

.doc-pending-empty i {
  font-size: 3rem;
  color: #22c55e;
  display: block;
  margin-bottom: 12px;
}

.doc-pending-empty h4 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}

.doc-pending-empty p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}
/* ── Fin Doc Pending redesign ─────────────────────────────────── */

/* Estilos para las hojas de documento */
.hoja-documento {
  position: relative;
  width: 100%;
  height: 200px;
  border: 2px dashed #dee2e6;
  border-radius: 10px;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.hoja-documento:hover {
  border-color: #adb5bd;
  background-color: #e9ecef;
}

.hoja-documento img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hoja-numero {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
}

/* Barra de progreso */
.progress-container {
  width: 100%;
  height: 28px;
  background-color: #e9ecef;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 15px;
}

.progress-bar-mac {
  height: 100%;
  background: linear-gradient(90deg, #007bff, #17a2b8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.4s ease;
  border-radius: 14px;
  position: relative;
}

.progress-text {
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  position: absolute;
  width: 100%;
  text-align: center;
}

.status-text {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 5px;
}

/* Alertas estilo macOS */
.mac-alert {
  padding: 10px 15px;
  background-color: #e7f5ff;
  border-left: 4px solid #4dabf7;
  border-radius: 4px;
  color: #1864ab;
  font-size: 0.9rem;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

/* Botones macOS */
.btn-mac-primary {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.9rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

.btn-mac-primary:hover {
  background-color: #0069d9;
  transform: translateY(-1px);
}

.btn-mac-secondary {
  background-color: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.9rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

.btn-mac-secondary:hover {
  background-color: #e9ecef;
  transform: translateY(-1px);
}

.btn-mac-danger {
  background-color: #f8f9fa;
  color: #dc3545;
  border: 1px solid #f1aeb5;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.9rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

.btn-mac-danger:hover {
  background-color: #f8d7da;
  transform: translateY(-1px);
}

/* Margen para iconos con texto */
i[class^="bi-"] + span,
i[class^="bi-"] + strong,
i[class^="bi-"] + em {
  margin-left: 8px;
}

.mac-scroll-container {
  max-height: 65vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #dee2e6 #f8f9fa;
  padding-right: 10px; /* Espacio para el scroll */
}

.mac-scroll-container::-webkit-scrollbar {
  width: 8px;
}

.mac-scroll-container::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 4px;
}

.mac-scroll-container::-webkit-scrollbar-thumb {
  background-color: #adb5bd;
  border-radius: 4px;
}

.conjuntoDeBtnnes {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.conjuntoDeBtnnes > .btn {
  height: 48px;
}

/* CONTENEDOR FECHAVTEX y MOBBEX TIENDAS VIRTUALES */
.contenedor-fecha-vtex {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-bottom: 30px;
}

.fecha-tiendas-virtuales,
.estado-sincronizacion,
.estado-sincronizacion-2 {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 4px 10px;
  display: flex;
  width: fit-content;
  color: cornflowerblue;
  height: 30px !important;
  font-size: small;
  font-weight: 600;
  align-items: center;
  overflow: hidden;
  position: relative;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
  box-shadow: inset 0 0 10px rgba(100, 149, 237, 0.15);
}

.fecha-tiendas-virtuales {
  z-index: 2;
}

.estado-sincronizacion,
.estado-sincronizacion-2 {
  left: -10px;
  border-radius: 0 14px 14px 0;
  z-index: 1;
  border: none;
}

.fecha-tiendas-virtuales-vtex {
  border-radius: 14px 0 0 14px;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  display: flex;
  width: fit-content;
  color: cornflowerblue;
  height: 30px !important;
  font-size: small;
  font-weight: 600;
  align-items: center;
  overflow: hidden;
  position: relative;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
  box-shadow: inset 0 0 10px rgba(100, 149, 237, 0.15);
}

.fecha-tiendas-virtuales {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

/* =========================================
   ESTADO SINCRONIZACION ORIGINAL
========================================= */
.estado-sincronizacion::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(247, 25, 99, 0.15) 30%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(247, 25, 99, 0.15) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: glassReflection 3.5s linear infinite;
  pointer-events: none;
  z-index: 1;
  filter: blur(3px);
}

.estado-sincronizacion img {
  position: relative;
  z-index: 2;
  filter: none;
  margin-right: 5px;
  padding-left: 5px;
}

@keyframes innerPulse {
  0%,
  100% {
    box-shadow: inset 0 0 12px rgba(247, 25, 99, 0.2);
  }
  50% {
    box-shadow: inset 0 0 25px rgba(247, 25, 99, 0.35);
  }
}

.estado-sincronizacion {
  animation: innerPulse 5s ease-in-out infinite;
}

/* =========================================
   ESTADO SINCRONIZACION 2 - LILA
========================================= */
.estado-sincronizacion-2::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(168, 85, 247, 0.15) 30%,
    /* lila suave */ rgba(255, 255, 255, 0.4) 50%,
    rgba(168, 85, 247, 0.15) 70%,
    /* lila suave */ rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: glassReflection 3.5s linear infinite;
  pointer-events: none;
  z-index: 1;
  filter: blur(3px);
}

.estado-sincronizacion-2 img {
  position: relative;
  z-index: 2;
  filter: none;
  margin-right: 5px;
  padding-left: 5px;
}

@keyframes innerPulseLilac {
  0%,
  100% {
    box-shadow: inset 0 0 12px rgba(168, 85, 247, 0.2);
  }
  50% {
    box-shadow: inset 0 0 25px rgba(168, 85, 247, 0.35);
  }
}

.estado-sincronizacion-2 {
  color: #a855f7;
  animation: innerPulseLilac 5s ease-in-out infinite;
}

/* Reflejo general */
@keyframes glassReflection {
  0% {
    transform: translateX(-150%) translateY(-100%) rotate(25deg);
  }
  100% {
    transform: translateX(150%) translateY(100%) rotate(25deg);
  }
}
/* FIN CONTENEDOR FECHAVTEX TIENDAS VIRTUALES */

.titulo-busqueda-avanzada-tipeo {
  margin-bottom: -20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cantidad-query-meli {
  text-align: center;
  vertical-align: middle;
}

.cantidad-circulo {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 24px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 30px;
  color: white;
  text-align: center;
  padding-top: 8px;
}

.cantidad-circulo.uno {
  background-color: #f39c12;
  transition: 0.5s ease;
}

.cantidad-circulo.uno:hover {
  background-color: red;
}

.cantidad-circulo.multiple {
  background-color: #28a745;
  transition: 0.5s ease;
}

.cantidad-circulo.multiple:hover {
  background-color: red;
}

.badge-promos-tv {
  padding: 10px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.list-group-item.reglasShop:hover {
  background-color: #f2f2f2;
  color: #000;
  transition: all 0.2s ease-in-out;
  transform: scale(1.01);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #007aff;
  z-index: 1;
}

.container-skus {
  background-color: #ebebeb;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
}

#skuSuggestions-rules {
  margin-top: 30px;
  width: 94%;
  position: absolute;
  z-index: 1000;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  animation: fadeIn 0.3s ease-in-out;
  border-radius: 10px 0 0 10px;
  border: 1px solid #007aff;
}

#skuSuggestions-rules > .list-group-item:hover {
  background-color: #007aff;
  color: white;
  border-radius: 0;
}

.combo-container {
  display: inline-flex;
  align-items: center;
  background-color: #e6f7ff;
  border: 1px solid #80d0ff;
  border-radius: 14px;
  padding: 8px 12px;
  margin-top: 5px;
  transition: all 0.3s ease;
}

.text-center-modal {
  text-align: center;
}

.combo-container-alone {
  display: inline-flex;
  align-items: center;
  background-color: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 14px;
  padding: 8px 12px;
  margin-top: 5px;
  transition: all 0.3s ease;
}

.info-rules {
  padding: 10px;
  border-radius: 12px;
  background: #f5f5f7;
  border: 1px solid #e0e0e0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 20px;
}

.info-rules small {
  display: block;
  margin-bottom: 0.8rem;
  color: #6e6e73;
  line-height: 1.4;
}

.info-rules small:last-child {
  margin-bottom: 0;
}

.info-rules .bi {
  margin-right: 0.2rem;
  font-size: 1rem;
  color: #0071e3;
}

.info-rules strong {
  color: #1d1d1f;
  font-weight: 500;
}

.skus-container {
  max-height: 100px; /* Ajusta la altura máxima */
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease;
}

.skus-container.expanded {
  max-height: 500px; /* Ajusta según sea necesario */
}

.degradado {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px; /* Ajusta la altura del degradado */
  display: none; /* Ocultar por defecto */
}

.skus-container.expanded .degradado {
  display: block; /* Mostrar cuando está expandido */
}

#spinner4 {
  width: 56px !important;
  height: 56px !important;
  margin: 12px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 6px !important;
  border-color: #e0e0e0 #d1d1d6 #c9c9ce #7b7b8e;
  background: rgba(245, 245, 250, 0.98);
  box-shadow:
    0 4px 24px #0001,
    0 1px 2px #0001;
  border-radius: 50%;
}
.spinner-dot-macos {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 0.19em solid #6e6e73;
  border-top-color: #b4b4b9;
  animation: macspin 1s linear infinite;
  margin-right: 0.2em;
}
@keyframes macspin {
  to {
    transform: rotate(360deg);
  }
}

.cajonBtnMeli-scroll {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.cajonBtnMeli-scroll::-webkit-scrollbar {
  height: 6px;
  background: #f2f2f2;
  border-radius: 3px;
}
.cajonBtnMeli-scroll::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

@keyframes lightning-flash {
  0%,
  100% {
    color: #00a650;
    text-shadow: none;
  }
  10% {
    color: #ffffff;
    text-shadow:
      0 0 8px #fff,
      0 0 16px #fffa9e,
      0 0 24px #ffe600;
  }
  20% {
    color: #00a650;
    text-shadow: none;
  }
  22% {
    color: #ffffff;
    text-shadow:
      0 0 8px #fff,
      0 0 16px #fffa9e,
      0 0 24px #ffe600;
  }
  30% {
    color: #00a650;
    text-shadow: none;
  }
}

.icon-lightning {
  animation: lightning-flash 3s infinite;
}

/* =============== Toast Glass E3 =============== */
.alert-glass-wrap-show-e3 {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: 420px;
  width: calc(100vw - 36px);
  z-index: 2147483647;
  pointer-events: auto;
}
.alert-glass-inner-show-e3 {
  display: grid;
  grid-template-columns: 56px 1fr 36px;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(15px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.alert-glass-icon-show-e3 {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tone-bg, rgba(16, 185, 129, 0.12));
  border: 1px solid var(--tone-br, rgba(16, 185, 129, 0.35));
}
.alert-glass-icon-show-e3 i {
  font-size: 28px;
  color: var(--tone-fg, #16a34a);
}
.alert-glass-texts-show-e3 {
  display: grid;
  gap: 2px;
}
.alert-title-show-e3 {
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #0f172a;
  font-size: 15px;
}
.alert-subtitle-show-e3 {
  color: #334155;
  font-size: 13px;
}
.alert-detail-show-e3 {
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
}
.alert-close-show-e3 {
  border: none;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #475569;
  cursor: pointer;
}
.alert-close-show-e3:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Paletas */
.is-success-show-e3 .alert-glass-inner-show-e3 {
  --tone-bg: rgba(16, 185, 129, 0.12);
  --tone-br: rgba(16, 185, 129, 0.35);
  --tone-fg: #16a34a;
}
.is-error-show-e3 .alert-glass-inner-show-e3 {
  --tone-bg: rgba(239, 68, 68, 0.12);
  --tone-br: rgba(239, 68, 68, 0.35);
  --tone-fg: #ef4444;
}

/* Animaciones */
@keyframes slideInE3 {
  from {
    transform: translateY(12px) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes slideOutE3 {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(10px) scale(0.98);
    opacity: 0;
  }
}
.enter-show-e3 {
  animation: slideInE3 0.28s ease-out both;
}
.leave-show-e3 {
  animation: slideOutE3 0.28s ease-in both;
}
/* =============== Fin Toast Glass E3 =============== */

.btn-timeline-TIMELINE_E3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #0f172a;
  padding: 6px 10px;
  font-weight: 700;
  transition:
    background 0.3s ease,
    color 0.3s ease !important;
}
.btn-timeline-TIMELINE_E3:hover {
  background: #007bff;
  color: white !important;
}
.btn-timeline-TIMELINE_E3 img {
  display: block;
  object-fit: contain;
}
.badge-count-TIMELINE_E3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}
.wrap-TIMELINE_E3 {
  --accent: #0ea5e9;
  --card: #ffffff;
  --muted: #6b7280;
  --line: #e5e7eb;
  --glass: rgba(255, 255, 255, 0.55);
}
.head-TIMELINE_E3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.timeline-TIMELINE_E3 {
  position: relative;
  margin: 8px 0 2px;
  padding-left: 14px;
}
.timeline-TIMELINE_E3:before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #dc3545, transparent);
}
.item-TIMELINE_E3 {
  position: relative;
  margin: 0 0 14px 0;
}
.dot-TIMELINE_E3 {
  position: absolute;
  left: -19px;
  top: 8px;
  width: 25px;
  height: 25px;
  border-radius: 999px;
  background: #ef4444;
  border: 2px solid red;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.25);
}
.card-TIMELINE_E3 {
  margin-left: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.4));
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08);
  padding: 10px 12px;
}
.meta-TIMELINE_E3 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ts-TIMELINE_E3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #334155;
}
.ts-TIMELINE_E3 i {
  opacity: 0.6;
}
.tpl-TIMELINE_E3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 15px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(180deg, #dc3545, #dc3545);
}
.actions-TIMELINE_E3 {
  margin-left: auto;
}
.btn-view-TIMELINE_E3 {
  border: 1px solid #e5e7eb;
  background: cornflowerblue;
  border-radius: 5px;
  padding: 6px 10px;
  font-weight: 700;
  transition:
    background 0.3s ease,
    color 0.3s ease !important;
}
.btn-view-TIMELINE_E3:hover {
  background: #007bff;
  color: white !important;
}
.collapse-TIMELINE_E3 {
  display: none;
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.iframe-wrap-TIMELINE_E3 {
  width: 100%;
  height: auto;
}
.iframe-TIMELINE_E3 {
  width: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.empty-TIMELINE_E3 {
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed #e5e7eb;
  background: #f8fafc;
  color: #6b7280;
  text-align: center;
}

/* ACORDEN TIENDAS VIRTUALES */
:root {
  --ios-accent: #0a84ff;
  --ios-text: #0b1220;
  --ios-muted: #6e7a86;
  --ios-surface: #ffffff;
  --ios-surface-soft: #f9fbff;
  --ios-border: #e6edf5;
  --ios-border-strong: #d7e2ee;
}

.logi-accordion {
  border-radius: 20px;
  background: linear-gradient(180deg, var(--ios-surface) 0%, var(--ios-surface-soft) 100%);
  border: 1px solid var(--ios-border);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  overflow: hidden;
  margin-bottom: 5px;
}

.logi-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    system-ui,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  color: var(--ios-text);
}
.logi-summary::-webkit-details-marker {
  display: none;
}

.logi-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.logi-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: #f2f7ff;
  border: 1px solid #d6e7ff;
  font-size: 0.85rem;
  color: var(--ios-text);
}

.logi-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ios-muted);
}

.logi-sku {
  padding: 4px 10px;
  border-radius: 12px;
  background: #e9f3ff;
  border: 1px solid #cfe4ff;
  color: var(--ios-accent);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.15px;
}

.logi-chevron {
  transition: transform 220ms ease;
  font-size: 1rem;
  color: #8aa3c1;
}
details[open] .logi-chevron {
  transform: rotate(180deg);
}

.logi-content {
  border-top: 1px solid var(--ios-border-strong);
  padding: 12px 16px 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 320ms ease,
    opacity 220ms ease,
    transform 220ms ease;
}
details[open] .logi-content {
  max-height: 2400px;
  opacity: 1;
  transform: translateY(0);
}

.logi-summary:focus-visible {
  outline: 2px solid rgba(10, 132, 255, 0.28);
  outline-offset: 3px;
  border-radius: 16px;
}

.logi-summary.logi-summary--rows {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "header chevron"
    "desc   chevron";
  align-items: center;
  gap: 6px 12px;
}

.logi-header {
  grid-area: header;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.logi-sku-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logi-subtitle {
  grid-area: desc;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ios-muted);
  min-width: 0;
}

.logi-chevron {
  grid-area: chevron;
  justify-self: end;
  transition: transform 220ms ease;
}
details[open] .logi-chevron {
  transform: rotate(180deg);
}

/* RESPUESTA DEL WEBSERVICE */
.btn-link-underline-e3 {
  background: none;
  border: none;
  padding: 0;
  color: #0d6efd;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.btn-link-underline-e3 i {
  font-size: 1rem;
}

.swal2-html-container .ws-list-e3,
.swal2-html-container .ws-item-e3,
.swal2-html-container .ws-head-e3,
.swal2-html-container .ws-body-e3,
.swal2-html-container .ws-actions,
.swal2-html-container .ws-code-wrap,
.swal2-html-container .ws-code-block {
  text-align: left !important;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.swal2-html-container .ws-pre {
  text-align: left !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ws-code-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 12px;
  background: #0b1020;
  justify-items: stretch;
}
.ws-code-block {
  width: 100%;
  border-radius: 8px;
  overflow: auto;
  max-height: 45vh;
  border: 1px solid #111827;
}
.ws-code-title {
  color: #a7c7ff;
  font-size: 0.8rem;
  margin-bottom: 4px;
}
.ws-pre {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
  padding: 10px 12px;
  color: #d1e7ff;
  font-size: 12.6px;
  line-height: 1.45;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
}

.ws-list-e3 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ws-item-e3 {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.ws-head-e3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f9fafb;
  border-bottom: 1px solid #eef0f2;
}
.ws-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}
.ws-ok {
  color: #065f46;
  background: #d1fae5;
  border: 1px solid #10b981;
}
.ws-err {
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #ef4444;
}
.ws-ts {
  color: #6b7280;
  font-size: 0.75rem;
}
.ws-body-e3 {
  padding: 10px 12px;
}

.ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 0.25rem 0 0.25rem;
}
.ws-pill {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
  padding: 6px 8px;
  font-size: 0.9rem;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ws-pill small {
  display: block;
  color: #6b7280;
  font-size: 0.7rem;
  margin-bottom: 2px;
}

.ws-error {
  margin-top: 6px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.ws-actions {
  padding: 8px 12px;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  justify-content: flex-end;
}
.ws-toggle {
  background: none;
  border: none;
  color: #111827;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-link-underline-e3,
.ws-toggle {
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.btn-link-underline-e3:hover,
.btn-link-underline-e3:focus-visible,
.ws-toggle:hover,
.ws-toggle:focus-visible {
  background: none;
  color: grey !important;
}

.btn-link-underline-e3:active,
.ws-toggle:active {
  background: #0b5ed7;
  color: #fff;
}

.btn-link-underline-e3 i,
.ws-toggle i {
  color: inherit;
}

.count-badge-e3 {
  background-color: #0d6efd;
  color: white;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 50px;
}

.sin-respuesta-webservice {
  text-align: center;
  color: crimson !important;
  font-weight: 700;
}
/* FIN RESPUESTA DEL WEBSERVICE */

/* BOTONES BNA ACORDEON */
:root {
  --ink: #0b0b0c;
  --muted: #6b7280;
  --accent: #0a84ff;
  --accent-2: #2563eb;
  --tint: #f6f8ff;
  --border: rgba(60, 60, 67, 0.18);
  --radius: 12px;
  --pad: 12px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
}

/* Botones que terminan en -collapse */
.btn-bna-collapse {
  border-radius: var(--radius);
  border: 1px solid var(--border) !important;
  background: #ecf0f1 !important;
  color: #7272db !important;
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: none !important;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
  margin-top: 10px;
  margin-bottom: 5px;
}
.btn-bna-collapse .chev {
  transition: transform 0.2s ease;
}
.btn-bna-collapse[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

/* Hover: color vivo + texto blanco */
.btn-bna-collapse:hover,
.btn-bna-collapse:focus {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important; /* esto afecta al texto */
}

/* Color base de los íconos (estado normal) */
.btn-bna-collapse .bi,
.btn-bna-collapse svg {
  color: var(--icon-base, #64748b) !important;
  fill: currentColor;
  transition:
    color 0.2s ease,
    fill 0.2s ease;
}

/* En hover/focus mantener los íconos con otro color (no blanco) */
.btn-bna-collapse:hover .bi,
.btn-bna-collapse:focus .bi,
.btn-bna-collapse:hover svg,
.btn-bna-collapse:focus svg {
  color: var(--icon-hover, purple) !important;
  fill: currentColor !important;
}

/* Panel del collapse */
.bna-collapse-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--tint), #fff);
  padding: var(--pad);
  margin-bottom: 5px;
}

/* Filas simples (sin grid) */
.bna-field {
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(60, 60, 67, 0.12);
}
.bna-field:last-child {
  border-bottom: none;
}
.bna-label {
  color: var(--muted);
  font-size: var(--fs-xs);
  min-width: 120px;
}
.bna-value {
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.25;
}

/* Pills/etiquetas pequeñas */
.bna-pill {
  align-self: center;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  white-space: nowrap;
}
.bna-pill.info {
  background: #e8f1ff;
  border-color: #cfe0ff;
  color: #083e8e;
}
.bna-pill.good {
  background: #eafaf0;
  border-color: #cfe9d9;
  color: #0f5a2a;
}
.bna-pill.warn {
  background: #fff4e5;
  border-color: #ffe1bd;
  color: #8a4b0f;
}

/* Botón copiar minimal */
.copy-btn {
  border: none;
  background: transparent;
  padding: 4px 6px;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  margin-left: 6px;
}
.copy-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink);
}

/* Bloque de costos (más vida y jerarquía) */
.costs {
  margin-top: 8px;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #f7fbff, #ffffff);
  border: 1px solid var(--border);
}
.cost-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: var(--fs-md);
}
.cost-label {
  color: #1f2937;
}
.cost-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0.02em;
  font-weight: 700;
}
.cost-amount.emph {
  font-size: 15.5px;
}

/* Total destacado */
.total-row {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #eaf2ff, #f8fbff);
  border: 1px solid #cfe0ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.total-row .total-label {
  color: #083e8e;
  font-weight: 700;
}
.total-row .total-amount {
  color: #0b3ddb;
  font-weight: 800;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Contenedor CUPÓN/AUTORIZACIÓN */
.contenedor-pago {
  background: #f8fafc;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
}

/* Pequeño detalle de color dentro del panel */
.bna-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11.5px;
}

/* Mini separador */
.bna-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(60, 60, 67, 0.2), transparent);
  margin: 10px 0;
}

.copy-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 6px;
}
.copy-btn .bi {
  transition:
    transform 0.12s ease,
    color 0.12s ease;
}
.copy-btn.copied .bi {
  transform: scale(1.1);
  color: var(--accent, #0d6efd);
}
.copy-btn.copy-error .bi {
  transform: scale(1.1);
  color: #dc3545;
}
/* FIN BOTONES BNA ACORDEON */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28px;
  line-height: 1;
  user-select: none;
  vertical-align: middle;
  border: 1px solid transparent;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.status-badge.info {
  background: linear-gradient(90deg, #06b6d4, #3b82f6);
  color: #fff;
  border-color: rgba(59, 130, 246, 0.45);
}

.status-badge.warn {
  background: linear-gradient(90deg, #f59e0b, #f97316);
  color: #1f2937;
  border-color: rgba(249, 115, 22, 0.4);
}

.status-badge.danger {
  background: linear-gradient(90deg, #ff0033, #ff3b47);
  color: #fff;
  border-color: rgba(255, 0, 51, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.33px;
  box-shadow:
    0 6px 14px rgba(255, 0, 51, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

#data-table td {
  padding-top: 7px;
  padding-bottom: 7px;
}
/* FIN CELDA DE PAGO MERCADO LIBRE */

/* Respeta reduce motion */
/* === FIN PRODUCTO (aislado) — avatar circular + badge fuera + SKU === */

.camion-spinner-wrap {
  min-height: 50vh;
}
.camion-spinner {
  width: 5rem;
  height: 5rem;
  border-width: 0.6rem;
}

/* controlMeliCamion.css
 * Estética macOS, glassmorphism suave, clases terminadas en -md-meli
 */

/* Layout base */
.wrap-md-meli {
  display: grid;
  gap: 16px;
  padding: 12px;
}

/* Config bar */
.cfg-bar-md-meli {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: saturate(1.2) blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
.cfg-item-md-meli {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cfg-label-md-meli {
  font-weight: 600;
  margin-left: 4px;
}
.cfg-spacer-md-meli {
  display: none;
}
.cfg-actions-md-meli {
  display: flex;
  gap: 8px;
}

.btn-chip-md-meli {
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 6px 12px;
  font-weight: 600;
}

/* Info debajo de config */
.cfg-info-md-meli {
  margin: 0;
  font-size: 0.925rem;
  color: #3c3c43;
  background: #f5f5f7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
}

/* Pallet badge */
.pallet-head-md-meli {
  display: flex;
  align-items: center;
}
.pill-md-meli {
  background: linear-gradient(#f5f5f7, #ececf0);
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 6px 10px;
  font-weight: 700;
}

/* Área de escaneo */
.scan-area-md-meli {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}
.scan-stack-md-meli {
  display: grid;
  gap: 8px;
}
.scan-input-md-meli {
  width: 100%;
  height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 0 16px;
  font-size: 28px;
  line-height: 64px;
  outline: none;
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.06);
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.scan-input-md-meli:focus {
  border-color: #0071e3;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
  background: rgba(255, 255, 255, 0.95);
}
.scan-error-md-meli {
  border-color: #ff3b30 !important;
  box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.2) !important;
}
.scan-ok-md-meli {
  border-color: #34c759 !important;
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.2) !important;
}

.scan-help-md-meli {
  font-size: 0.9rem;
  color: #8e8e93;
  min-height: 1.2em;
  opacity: 0;
  transform: translateY(-4px);
  transition: 0.2s ease;
}
.scan-help-md-meli.show {
  opacity: 1;
  transform: translateY(0);
}

.btn-pallet-md-meli {
  height: 64px;
  border-radius: 14px;
  font-weight: 700;
  padding: 0 18px;
}

/* Ficha de producto */
.card-prod-md-meli {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}
.card-left-md-meli {
  display: flex;
  align-items: center;
  justify-content: center;
}
.foto-wrap-md-meli {
  width: 240px;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  background: #f2f2f7;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.foto-wrap-md-meli img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.skeleton-md-meli {
  background: linear-gradient(90deg, #f2f2f7 25%, #e6e6ea 37%, #f2f2f7 63%);
  background-size: 400% 100%;
  animation: shimmer-md-meli 1.4s ease infinite;
}
@keyframes shimmer-md-meli {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.card-right-md-meli {
  display: grid;
  align-content: start;
  gap: 6px;
}

/* Lista estilo macOS */
.list-macos-md-meli {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.li-md-meli {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}
.li-left-md-meli {
  font-weight: 600;
  color: #111;
}
.li-right-md-meli {
  color: #3c3c43;
  font-weight: 700;
}
.li-kv-md-meli {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
}
.li-kv-md-meli span {
  color: #6b7280;
  font-weight: 600;
}

/* Paneles lista */
.panel-list-md-meli {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
.panel-title-md-meli {
  margin: 0 0 8px 0;
  font-weight: 800;
  color: #111;
}

/* Badges suaves */
.badge-soft-md-meli {
  display: inline-block;
  padding: 6px 10px;
  background: #eef2ff;
  color: #111;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Overlays */
.overlay-md-meli {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.25);
  z-index: 2000;
}
.overlay-card-md-meli {
  min-width: 300px;
  max-width: 92vw;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
  padding: 22px;
  text-align: center;
}
.overlay-warm-md-meli .overlay-card-md-meli {
  background: rgba(255, 246, 233, 0.9);
}
.overlay-warning-md-meli .overlay-card-md-meli {
  background: rgba(255, 240, 220, 0.92);
}
.overlay-danger-md-meli .overlay-card-md-meli {
  background: rgba(255, 230, 230, 0.92);
}
.overlay-mixed-md-meli .overlay-card-md-meli {
  background: linear-gradient(180deg, rgba(255, 240, 220, 0.95), rgba(255, 230, 230, 0.95));
}

.overlay-icon-md-meli {
  font-size: 48px;
  color: #111;
  margin-bottom: 10px;
}
.overlay-title-md-meli {
  font-weight: 800;
  font-size: 1.2rem;
  color: #111;
}
.overlay-subtitle-md-meli {
  color: #3c3c43;
  margin-top: 2px;
  margin-bottom: 12px;
}
.overlay-actions-md-meli {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.spinner-md-meli {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.08);
  border-top-color: #111;
  animation: spin-md-meli 1s linear infinite;
  margin: 6px auto 10px;
}
@keyframes spin-md-meli {
  to {
    transform: rotate(360deg);
  }
}

/* Hover letras blancas */
.hover-white-md-meli:hover {
  color: #fff !important;
}

/* ean mismatch */
.ean-mismatch-md-meli {
  background: rgba(255, 240, 220, 0.66);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
}
.ean-title-md-meli {
  font-weight: 800;
  color: #111;
}
.ean-sub-md-meli {
  color: #3c3c43;
  margin-bottom: 8px;
}
.ean-actions-md-meli {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ean-note-md-meli {
  color: #6b7280;
  font-style: italic;
}

/* Toast */
.toast-md-meli {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(17, 17, 17, 0.9);
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.2s ease;
  z-index: 2100;
}
.toast-md-meli.show {
  opacity: 1;
  transform: translateY(0);
}

/* Responsivo */
@media (max-width: 992px) {
  .card-prod-md-meli {
    grid-template-columns: 1fr;
  }
  .scan-area-md-meli {
    grid-template-columns: 1fr;
  }
}

.ni-file-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f8fafc;
  color: #0f172a;
}
.ni-file-ph i {
  font-size: 34px;
  opacity: 0.85;
}
.ni-file-ext {
  font-weight: 800;
  font-size: 0.8rem;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.swal2-container-macos-meliAr {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Helvetica,
    Arial,
    system-ui,
    sans-serif;
}

.swal2-popup-macos-meliAr {
  border-radius: 20px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(248, 249, 251, 0.95), rgba(242, 244, 248, 0.92));
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.swal2-title-macos-meliAr {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: #0f172a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
}

.swal2-html-macos-meliAr {
  color: #111827;
  font-size: 14px;
  line-height: 1.45;
}

.swal2-confirm-macos-meliAr,
.swal2-cancel-macos-meliAr {
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition:
    transform 0.06s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

.swal2-confirm-macos-meliAr {
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #ffffff;
  border-color: #16a34a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 6px 14px rgba(22, 163, 74, 0.25);
}
.swal2-confirm-macos-meliAr:hover {
  background: linear-gradient(180deg, #16a34a, #15803d);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 18px rgba(21, 128, 61, 0.28);
}
.swal2-confirm-macos-meliAr:active {
  background: linear-gradient(180deg, #15803d, #166534);
  transform: translateY(0);
}
.swal2-confirm-macos-meliAr:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

/* Cancelar: neutro */
.swal2-cancel-macos-meliAr {
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  color: #334155;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 14px rgba(0, 0, 0, 0.08);
}
.swal2-cancel-macos-meliAr:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 18px rgba(0, 0, 0, 0.12);
}

.card-macos-meliAr {
  display: grid;
  gap: 12px;
}

.card-hd-macos-meliAr {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

.title-row-macos-meliAr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.measure-note-macos-meliAr {
  margin-bottom: 0 !important;
}

.product-name-macos-meliAr {
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.pill-ok-macos-meliAr,
.pill-warn-macos-meliAr,
.pill-lp-macos-meliAr {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 10px;
}

.pill-ok-macos-meliAr {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.pill-lp-macos-meliAr {
  background: rgba(59, 130, 246, 0.14);
  color: #1e3a8a;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.pill-warn-macos-meliAr {
  background: rgba(245, 158, 11, 0.16);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.product-meta-macos-meliAr {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.meta-chip-macos-meliAr {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #334155;
  font-size: 12px;
}

.product-desc-macos-meliAr {
  margin: 0;
  color: #334155;
  font-size: 13px;
  display: none;
}

.measure-box-macos-meliAr {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 14px rgba(0, 0, 0, 0.06);
  padding: 10px;
}

.measure-title-macos-meliAr {
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.measure-values-macos-meliAr {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.measure-chip-macos-meliAr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
.measure-chip-macos-meliAr span {
  color: #475569;
  font-size: 12px;
}
.measure-chip-macos-meliAr strong {
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.measure-chip-macos-meliAr small {
  color: #64748b;
}

.counter-flex-macos-meliAr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 14px rgba(0, 0, 0, 0.06);
}

.counter-btn-macos-meliAr {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, #ffffff, #f3f4f6);
  border-radius: 12px;
  height: 44px;
  width: 44px;
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.05s ease,
    box-shadow 0.12s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 6px 14px rgba(0, 0, 0, 0.06);
}
.counter-btn-macos-meliAr:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 18px rgba(0, 0, 0, 0.1);
}

.counter-val-macos-meliAr {
  min-width: 64px;
  text-align: center;
  font-size: 45px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: green;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  font-family: "Rubik", sans-serif;
}

.hint-macos-meliAr {
  margin: 6px 0 0 0;
  opacity: 0.85;
  color: #334155;
  font-size: 12px;
}

.error-box-macos-meliAr {
  padding: 12px 14px;
  background: rgba(255, 0, 0, 0.06);
  border: 1px solid rgba(255, 0, 0, 0.16);
  border-radius: 12px;
  color: #7f1d1d;
}

.loading-wrap-macos-meliAr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
  text-align: center;
  min-height: 64px;
  width: 100%;
}

.spinner-macos-meliAr {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.spinner-macos-meliAr__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(52, 131, 250, 0.2);
  border-top-color: #3483fa;
  border-right-color: #fff159;
  box-shadow: 0 0 0 4px rgba(255, 241, 89, 0.14);
  animation: meli-brand-ring-spin 0.88s linear infinite;
}

.spinner-macos-meliAr__img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

@keyframes spin-macos-meliAr {
  to {
    transform: rotate(360deg);
  }
}

.loading-subtitle-macos-meliAr {
  margin: 0;
  color: #334155;
  font-size: 13px;
}

.mono-macos-meliAr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: #1f2937;
  word-break: break-word;
}

/* POPUPS GENERALES (estilo macOS glass) */
.swal-popup-config-quey-tandas,
.swal-popup-loader-quey-tandas,
.swal-popup-resumen-quey-tandas {
  border-radius: 18px !important;
  padding: 18px 20px 22px 20px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

.swal-title-quey-tandas {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px !important;
}

/* Botones de Swal */
.swal-confirm-quey-tandas {
  background: linear-gradient(135deg, #0a84ff, #4ba3ff) !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.35);
  border: none !important;
}

.swal-cancel-quey-tandas {
  background: rgba(142, 142, 147, 0.18) !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  border: 1px solid rgba(142, 142, 147, 0.4) !important;
  color: #333 !important;
}

/* TARJETA DE CONFIGURACIÓN */
.config-card-quey-tandas {
  border-radius: 16px;
  padding: 14px 14px 10px 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 246, 248, 0.9));
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.config-header-quey-tandas {
  margin-bottom: 10px;
}

.config-title-quey-tandas {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.01em;
}

.config-subtitle-quey-tandas {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

.config-options-quey-tandas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.config-chip-quey-tandas {
  position: relative;
  border-radius: 12px;
  padding: 10px 10px 9px 10px;
  background: rgba(249, 250, 251, 0.95);
  border: 1px solid rgba(209, 213, 219, 0.9);
  cursor: pointer;
  transition: all 0.18s ease-out;
}

.config-chip-quey-tandas:hover {
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.98);
}

.config-chip-active-quey-tandas {
  border-color: rgba(10, 132, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.32);
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.09), rgba(10, 132, 255, 0.02));
}

.config-radio-quey-tandas {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.config-chip-title-quey-tandas {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
}

.config-chip-text-quey-tandas {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.35;
}

/* Píldora de info (fecha + tandas) */
.config-pill-quey-tandas {
  margin-top: 12px;
  font-size: 12px;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(243, 244, 246, 0.9);
}

/* LOADER macOS */
.loader-shell-quey-tandas {
  min-width: 280px;
  max-width: 360px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 246, 248, 0.96));
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  padding: 12px 16px 14px 16px;
}

.loader-header-quey-tandas {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.loader-dot-quey-tandas {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.loader-dot-red-quey-tandas {
  background: #ff5f57;
}

.loader-dot-amber-quey-tandas {
  background: #febc2e;
}

.loader-dot-green-quey-tandas {
  background: #28c840;
}

.loader-body-quey-tandas {
  margin-top: 4px;
}

.loader-title-quey-tandas {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.01em;
}

.loader-subtitle-quey-tandas {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  margin-bottom: 10px;
}

.loader-progress-quey-tandas {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(229, 231, 235, 0.95);
  overflow: hidden;
}

.loader-progress-bar-quey-tandas {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0a84ff, #64d2ff);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.loader-percent-quey-tandas {
  font-size: 13px;
  font-weight: 600;
  color: #0a84ff;
  text-align: right;
  margin-top: 6px;
}

/* TABLA RESUMEN */
.tabla-reporte-quey-tandas {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

.tabla-titulo-quey-tandas {
  text-align: center;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 600;
}

.tabla-meta-quey-tandas {
  text-align: center;
  color: #6b7280;
  font-size: 12px;
  margin: 2px 0;
}

.tabla-wrapper-quey-tandas {
  margin-top: 10px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(209, 213, 219, 0.8);
  background: rgba(255, 255, 255, 0.98);
}

/* Botón imprimir en footer */
.btn-imprimir-quey-tandas {
  border-radius: 999px;
}

/* Detalle de collapse de cada SKU */
.detalle-collapse-quey-tandas {
  padding: 10px;
  background: rgba(249, 250, 251, 0.98);
  border-radius: 12px;
  border: 1px solid rgba(209, 213, 219, 0.9);
}

/* Iconito toggle */
.toggle-collapse-quey-tandas span {
  font-size: 11px;
}

/* BLOQUEO DE SCROLL CUANDO HAY MODAL PROPIO */

/* ───────────────────────────────────────────── */
/* OVERLAY + MODAL PROPIO (CONFIG + LOADER)     */
/* ───────────────────────────────────────────── */

/* HEADER macOS */

/* BODY GENÉRICO */

/* FOOTER GENÉRICO */

/* BOTONES */

.qt-btn-primary-quey-tandas,
.qt-btn-secondary-quey-tandas,

/* ───────────────────────────────────────────── */
/* SECCIÓN CONFIGURACIÓN                        */
/* ───────────────────────────────────────────── */

/* ───────────────────────────────────────────── */
/* LOADER LAYOUT                                */
/* ───────────────────────────────────────────── */

.qt-loader-left-quey-tandas,

/* Spinner */

@keyframes qt-spin-quey-tandas {
  to {
    transform: rotate(360deg);
  }
}

/* Info card derecha */

/* Barra de progreso */

/* ───────────────────────────────────────────── */
/* SWEETALERT: POPUP RESUMEN (TABLA)            */
/* ───────────────────────────────────────────── */

.swal-popup-resumen-quey-tandas {
  max-width: calc(100vw - 32px) !important;
  width: 1050px !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  background: #f5f5f7 !important;
  color: #111827 !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35) !important;
}

.swal-popup-resumen-quey-tandas .swal2-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 6px;
  text-align: center;
  color: #111827;
}

.swal-popup-resumen-quey-tandas .swal2-html-container {
  margin: 4px 0 0 !important;
  padding: 0 !important;
}

/* CONTENEDOR TABLA */

.tabla-container-quey-tandas {
  max-width: 100%;
  box-sizing: border-box;
}

/* Encabezado */

.tabla-header-quey-tandas {
  text-align: center;
  margin-bottom: 10px;
}

.tabla-titulo-quey-tandas {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}

.tabla-subtitulo-quey-tandas {
  margin: 0;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  color: #4b5563;
}

.meta-chip-quey-tandas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(209, 213, 219, 0.9);
}

/* Métricas */

.tabla-metricas-quey-tandas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}

.metric-pill-quey-tandas {
  min-width: 150px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eff6ff, #e0f2fe);
  border: 1px solid rgba(59, 130, 246, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metric-pill-soft-quey-tandas {
  background: linear-gradient(135deg, #fef9c3, #fef3c7);
  border-color: rgba(234, 179, 8, 0.8);
}

.metric-label-quey-tandas {
  font-size: 11px;
  color: #6b7280;
}

.metric-value-quey-tandas {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

/* IDs Excluidos */

.ids-excluidos-wrapper-quey-tandas {
  margin-bottom: 8px;
  text-align: right;
}

.btn-ver-ids-quey-tandas {
  border-radius: 999px;
  border: 1px solid rgba(209, 213, 219, 0.9);
  background: #ffffff;
  color: #4b5563;
  font-size: 11px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.btn-ver-ids-quey-tandas i {
  font-size: 12px;
}

.btn-ver-ids-quey-tandas:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.ids-excluidos-card-quey-tandas {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px dashed rgba(148, 163, 184, 0.9);
}

.ids-excluidos-title-quey-tandas {
  margin: 0 0 2px;
  font-size: 13px;
}

.ids-excluidos-text-quey-tandas {
  margin: 0 0 4px;
  font-size: 11px;
  color: #6b7280;
}

.ids-excluidos-list-quey-tandas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 120px;
  overflow-y: auto;
}

.id-pill-quey-tandas {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  background: #f9fafb;
  border: 1px solid rgba(209, 213, 219, 1);
}

/* TABLA PRINCIPAL */

.tabla-wrapper-quey-tandas {
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgba(209, 213, 219, 0.9);
  background: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
}

.tabla-quey-tandas {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.tabla-head-quey-tandas th {
  background: #2563eb;
  color: #ffffff;
  font-weight: 500;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(37, 99, 235, 1);
  text-align: left;
}

.tabla-quey-tandas th,
.tabla-quey-tandas td {
  border-bottom: 1px solid rgba(229, 231, 235, 1);
  padding: 6px 8px;
  vertical-align: middle;
  word-wrap: break-word;
  white-space: normal;
}

/* Filas alternadas */

.fila-main-quey-tandas:nth-child(even) > td {
  background: #f9fafb;
}

.fila-main-quey-tandas:nth-child(odd) > td {
  background: #ffffff;
}

/* Columnas */

.td-sku-quey-tandas {
  width: 20%;
}

.td-cantidad-quey-tandas {
  width: 8%;
  text-align: center;
}

.td-descripcion-quey-tandas {
  width: 42%;
}

.td-presea-quey-tandas {
  width: 12%;
  text-align: center;
}

.td-tandas-quey-tandas {
  width: 18%;
}

/* SKU + botón */

.sku-main-quey-tandas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.sku-text-quey-tandas {
  font-weight: 500;
  font-size: 12px;
}

.btn-detalle-quey-tandas {
  border-radius: 999px;
  border: 1px solid rgba(209, 213, 219, 1);
  background: #f9fafb;
  color: #4b5563;
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-detalle-quey-tandas:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* Cantidad */

.cantidad-circulo-quey-tandas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-width: 26px;
  height: 26px;
  font-size: 12px;
  font-weight: 600;
}

.cantidad-circulo-quey-tandas.uno {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.cantidad-circulo-quey-tandas.multiple {
  background: #bbf7d0;
  color: #166534;
  border: 1px solid #4ade80;
}

/* Presea */

.badge-presea-quey-tandas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-width: 40px;
  height: 22px;
  font-size: 11px;
  padding: 0 8px;
  background: #dcfce7;
  border: 1px solid #22c55e;
  color: #166534;
}

.badge-presea-off-quey-tandas {
  background: #e5e7eb;
  border-color: #9ca3af;
  color: #4b5563;
}

/* Tandas */

.tandas-pill-quey-tandas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: #e0f2fe;
  border: 1px solid #38bdf8;
  color: #075985;
}

/* Detalle IDs */

.fila-detalle-quey-tandas td {
  background: #f9fafb;
}

.detalle-card-quey-tandas {
  margin-top: 4px;
  border-radius: 10px;
  border: 1px solid rgba(229, 231, 235, 1);
  padding: 6px 8px;
  background: #ffffff;
}

.detalle-header-quey-tandas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.detalle-title-quey-tandas {
  font-size: 12px;
  font-weight: 500;
  color: #111827;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tabla-detalle-quey-tandas {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.tabla-detalle-quey-tandas th,
.tabla-detalle-quey-tandas td {
  border-bottom: 1px solid rgba(229, 231, 235, 1);
  padding: 4px 6px;
}

.tabla-detalle-quey-tandas th {
  background: #f3f4f6;
  color: #111827;
  font-weight: 500;
}

.detalle-cantidad-quey-tandas {
  text-align: center;
}

/* Botón imprimir + footer */

.btn-imprimir-quey-tandas {
  border-radius: 999px;
  border: 1px solid rgba(209, 213, 219, 1);
  background: #ffffff;
  color: #111827;
  padding: 5px 14px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-right: 8px;
}

.btn-imprimir-quey-tandas:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.footer-fecha-quey-tandas {
  font-size: 11px;
  color: #6b7280;
}

/* ───────────────────────────────────────────── */
/* Loader de impresión: texto en footer         */
/* ───────────────────────────────────────────── */

/* ───────────────────────────────────────────── */
/* Pantalla de error                            */
/* ───────────────────────────────────────────── */

/* ───────────────────────────────────────────── */
/* Selector de tandas                           */
/* ───────────────────────────────────────────── */

/* Lista de tandas */

/* Tarjeta de tanda */

/* Toolbar inferior del selector */

/* ───────────────────────────────────────────── */
/* Switch tipo iOS para cada tanda               */
/* ───────────────────────────────────────────── */

/* Contenedor del switch iOS */

/* Ocultar checkbox original */

/* Fondo del switch */

/* "Pip" del switch */

/* Estado encendido (verde tipo iOS) */

/* Hover del switch */

/* Tarjeta activa cuando el switch está encendido */

/* Panel de confirmación cuando se presiona "Cancelar" en el loader */

/* Botón rojo sólido (ya tenemos outline, este es el lleno) */

/* ====================== MODAL CONTENEDOR ====================== */

#etiquetasModal .modal-dialog {
  max-width: 960px;
  margin: 1.5rem auto;
}

@media (max-width: 768px) {
  #etiquetasModal .modal-dialog {
    max-width: 100%;
    margin: 0.75rem;
  }
}

/* Los botones del pie del modal de Etiquetas ahora van en el `slot="footer"`
   del <sl-dialog>, que los apila solo en mobile: la media query que había acá
   —y que mi recorte dejó partida— ya no hace falta. `.footer-btn-*` tampoco
   está en el markup. */

/* Título del modal */
.etiquetas-modal-title-mcsono {
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  color: #111827;
}

.etiquetas-modal-title-mcsono i {
  font-size: 1.2rem;
  color: #f59e0b;
}

/* ====================== INPUT ARCHIVO ====================== */

.etiquetas-file-picker-mcsono {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.etiquetas-file-native-mcsono {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

/* El nombre del archivo elegido: texto al lado del botón, sin recuadro.
   Fue <span> con borde y fondo, después <sl-tag> —que quedaba como una caja
   grande diciendo "todavía no elegiste nada"— y ahora es lo que siempre tuvo
   que ser: una línea de estado, en gris, que se corta si el nombre es largo. */
.etiquetas-file-name-pill-mcsono {
  min-width: 0;
  color: var(--sl-color-neutral-500);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botones e inputs del modal: VAINILLA.
   Tenían radio 12px, sombra propia, `font-weight: 600` y un `scale(0.97)` al
   apretar. Todo eso los despegaba del resto del sistema y encima el radio
   quedaba más redondo que el de los demás modales. Ahora usan el del tema.
   Las clases se conservan porque las busca el markup; simplemente ya no
   pisan nada. */

.etiquetas-sl-input-mcsono {
  flex: 1 1 220px;
  min-width: 0;
}

.etiquetas-search-row-mcsono,
.etiquetas-toolbar-mcsono {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.etiquetas-toolbar-mcsono {
  margin-bottom: 12px;
}

/* `.etiquetas-action-swal-mcsono` se fue: era el popup de SweetAlert2 del
   diálogo "¿Cómo seguimos?", con radio 22px y dos degradados encima. Ese
   diálogo ahora es un <sl-dialog> y su chrome sale de css/avisos.css. */

.swal-html-mcsono {
  margin: 0 !important;
}

/* La cabecera del diálogo "¿Cómo seguimos?" la pone el <sl-dialog>: acá había
   un `.etiquetas-action-dialog-body-mcsono` con un <h3> y un cuadradito de
   ícono, que duplicaba lo que el componente ya trae. Queda solo la bajada. */
.etiquetas-action-desc-mcsono {
  margin: 0 0 14px;
  color: var(--sl-color-neutral-600);
}

.etiquetas-action-grid-mcsono {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Botones VAINILLA: solo se centra el contenido, porque cada uno ocupa toda su
   celda de la grilla. El radio de 12px, la sombra propia y el `translateY` al
   hover se fueron — los levantaba del resto de los botones del sistema y
   además el radio quedaba mucho más redondeado que los del modal. */
.etiquetas-action-grid-mcsono sl-button::part(base) {
  justify-content: center;
}

/* Cancelar ocupa fila completa */
.etiquetas-action-grid-mcsono sl-button[data-cancel-mcsono]::part(base):hover {
  transform: none;
  box-shadow: none;
}

@media (max-width: 480px) {
  .etiquetas-action-grid-mcsono {
    grid-template-columns: 1fr;
  }
}

.file-input-mcsono {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.95);
}

.file-input-mcsono:focus {
  box-shadow: none;
  border-color: rgba(37, 99, 235, 0.75);
}

/* ====================== BUSCADOR TANDAS ====================== */

.search-container-mcsono {
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.search-button-mcsono {
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #fefefe, #f3f4f6);
  border-color: rgba(148, 163, 184, 0.7);
}

.search-button-mcsono i {
  font-size: 0.9rem;
}

.search-button-mcsono:hover {
  background: #ffffff;
}

.search-input-container-mcsono {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  padding: 0.3rem 0.6rem 0.4rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  align-self: flex-start;
}

@media (max-width: 576px) {
  .search-input-container-mcsono {
    max-width: 100%;
    align-self: stretch;
  }
}

.search-input-mcsono {
  border: none;
  box-shadow: none;
  font-size: 0.8rem;
  background: transparent;
  padding: 0;
  width: 100%;
}

.search-input-mcsono:focus {
  box-shadow: none;
}

.search-results-mcsono {
  max-height: 220px;
  overflow: auto;
  font-size: 0.78rem;
  margin-top: 0.1rem;
  padding-top: 0.1rem;
}

#countdownText {
  font-size: 0.72rem;
  margin-top: 2px;
  color: #6b7280;
}

/* Botones genéricos del modal */
.btn-pill-mcsono {
  font-size: 0.85rem;
}

/* Padding solo en botones nativos: en sl-button el host con padding
   genera caja fantasma y los separa visualmente */
button.btn-pill-mcsono {
  padding: 0.4rem 1.1rem;
}

/* El host de un sl-button con padding genera una caja fantasma que separa los
   botones. El padding real lo pone el componente. */
sl-button.btn-pill-mcsono {
  padding: 0;
}

/* ====================== SPINNER / LOG ====================== */

/* Sin footprint cuando el spinner está oculto */
.spinner-wrapper-mcsono {
  padding: 0;
  margin: 0 !important;
}

.spinner-mcsono {
  width: 2.25rem;
  height: 2.25rem;
}

#spinner33.spinner-mcsono {
  width: 100%;
  height: auto;
  min-height: 0;
  display: none;
  justify-content: center;
  margin: 0.9rem 0;
}

#spinner33 .etiquetas-loading-card-mcsono {
  width: min(100%, 360px);
}

.footer-btn-primary-mcsono sl-spinner {
  margin-right: 8px;
  vertical-align: -2px;
}

.log-container-mcsono {
  border-radius: 12px;
  background: rgba(248, 249, 251, 0.95);
  border: 1px dashed rgba(148, 163, 184, 0.55);
  font-size: 0.78rem;
  max-height: 140px;
  overflow: auto;
}

/* ====================== LISTA (CARPETAS / HOJAS) ====================== */

.etiquetaList-mcsono {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  /* SIN radio. Cada fila lleva una barra de acento de 4px pegada al borde
     izquierdo (`border-left` de .etiqueta-file-item-mcsono) y, con la esquina
     redondeada más el `overflow: hidden` de acá, la barra de la primera fila
     salía comida en diagonal. Del lado derecho pasa lo mismo con la barra de
     scroll, que queda con las puntas recortadas. */
  border-radius: 0;
  background: var(--sl-color-neutral-0);
  border: 1px solid var(--sl-color-neutral-200);
  /* Lo que daba `.list-group` de Bootstrap y ahora se pone acá: es un <ol>, así
     que sin esto vuelven el punto y la sangría por defecto del navegador. */
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

/* Primera fila (carpeta más reciente / última tanda subida): resalte */
.etiquetaList-mcsono > .etiqueta-folder-item-mcsono:first-child,
.etiquetaList-mcsono > .etiqueta-file-item-mcsono:first-child {
  background: var(--sl-color-primary-50);
  border-left-color: var(--sl-color-primary-600);
}

.etiquetaList-mcsono > .etiqueta-folder-item-mcsono:first-child .etiqueta-folder-name-mcsono,
.etiquetaList-mcsono > .etiqueta-file-item-mcsono:first-child .etiqueta-file-name-mcsono {
  font-weight: 700;
  color: #1e3a8a;
}

/* Pill "Última" en la tanda más reciente */
.etiquetaList-mcsono > .etiqueta-file-item-mcsono:first-child .etiqueta-file-name-mcsono::after {
  content: "Última";
  display: inline-block;
  margin-left: 8px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: linear-gradient(145deg, #3b82f6, #2563eb);
  vertical-align: middle;
}

.etiquetaList-mcsono > .etiqueta-folder-item-mcsono:first-child:hover,
.etiquetaList-mcsono > .etiqueta-file-item-mcsono:first-child:hover {
  background: var(--sl-color-primary-100);
  border-left-color: #2563eb;
}

/* Botones "Ver más / Ver menos" dentro de la lista */
.list-more-btn-mcsono {
  display: block;
  width: calc(100% - 20px);
  margin: 8px auto 10px;
}

.list-more-btn-mcsono::part(base) {
  width: 100%;
  justify-content: center;
}

/* Toolbar: Atrás / Imprimir Query (fill, variantes Shoelace) */
.toolbar-back-btn-mcsono::part(base),
.toolbar-print-btn-mcsono::part(base) {
  min-width: 130px;
  justify-content: center;
}

/* Items carpeta / archivo (d-flex viene de Bootstrap) */
.etiqueta-folder-item-mcsono,
.etiqueta-file-item-mcsono {
  border: none;
  border-bottom: 1px solid var(--sl-color-neutral-100);
  background: var(--sl-color-neutral-0);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-left-color 0.15s ease;
  padding: 0.85rem 0.9rem;
  position: relative;
  border-left: 4px solid transparent;
  gap: 0.75rem;
}

.etiqueta-file-item-mcsono {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  align-items: center !important;
}

.etiqueta-folder-item-mcsono {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center !important;
}

.etiqueta-folder-item-mcsono:last-child,
.etiqueta-file-item-mcsono:last-child {
  border-bottom: none;
}

/* Hover */
.etiqueta-folder-item-mcsono:hover {
  background: rgba(245, 158, 11, 0.06);
  border-left-color: #f59e0b;
  color: #111827;
}

.etiqueta-file-item-mcsono:hover {
  background: rgba(59, 130, 246, 0.06);
  border-left-color: #3b82f6;
  color: #111827;
}

/* Press / selección */
.etiqueta-folder-item-mcsono:active,
.etiqueta-file-item-mcsono:active {
  background: rgba(59, 130, 246, 0.12);
}

.etiqueta-folder-item-mcsono.is-selected,
.etiqueta-file-item-mcsono.is-selected {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: #2563eb;
}

/* Bloque principal izquierda */
.etiqueta-folder-main-mcsono,
.etiqueta-file-main-mcsono {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Títulos */
.etiqueta-folder-title-mcsono,
.etiqueta-file-title-mcsono {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.etiqueta-file-name-mcsono,
.etiqueta-folder-name-mcsono {
  font-size: 0.95rem;
  color: #0f172a;
}

/* Iconos: tiles redondeados tipo macOS */
.etiqueta-folder-title-mcsono i,
.etiqueta-file-title-mcsono i {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  font-size: 1.05rem;
  flex: 0 0 auto;
}

.etiqueta-folder-title-mcsono i {
  color: #b45309;
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.28), rgba(245, 158, 11, 0.18));
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.etiqueta-file-title-mcsono i {
  color: #1d4ed8;
  background: linear-gradient(145deg, rgba(96, 165, 250, 0.25), rgba(59, 130, 246, 0.15));
  border: 1px solid rgba(59, 130, 246, 0.28);
}

/* Acciones derecha: carpeta (solo badge) */
.etiqueta-folder-actions-mcsono {
  min-width: max-content;
}

/* Centro archivo: badge en el medio */
.etiqueta-file-center-mcsono {
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Botones archivo: extremo derecho */
.etiqueta-file-buttons-mcsono {
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Badge "Archivo (X etiquetas)" y de carpetas */
.etiqueta-badge-mcsono {
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

/* <sl-badge> VAINILLA: el fondo, el borde y el color los pone su `variant`.
   Tenía un degradado violeta con el color escrito a mano, que además peleaba
   con el color propio del componente — la trampa de siempre al pasar un <span>
   a sl-badge. */
.etiqueta-badge-mcsono::part(base) {
  border-radius: 6px;
}

.etiqueta-badge-mcsono:hover::part(base) {
  background: rgba(99, 102, 241, 0.22);
  transform: translateY(-1px);
}

.time-etiquetas-mcsono {
  font-size: 0.82rem;
  color: inherit;
}

/* ============ REGISTRO DE ACCIONES POR USUARIO (debajo del nombre) ============ */
.etiqueta-file-registro-mcsono {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.25rem;
}

.reg-accion-mcsono {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
  font-size: 0.72rem;
  color: #64748b;
}

.reg-accion-ic-mcsono {
  font-size: 0.78rem;
  color: #94a3b8;
}

.reg-accion-label-mcsono {
  font-weight: 600;
  color: #475569;
}

.reg-accion-users-mcsono {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.reg-user-chip-mcsono {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #475569;
  font-weight: 500;
  white-space: nowrap;
}

.reg-veces-mcsono {
  font-weight: 700;
  color: #2563eb;
  font-size: 0.68rem;
}

/* Colapsable sutil cuando hay más de dos usuarios */
.reg-accion-collapse-mcsono {
  width: 100%;
}

.reg-accion-summary-mcsono {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  list-style: none;
  padding: 0.1rem 0;
  user-select: none;
}

.reg-accion-summary-mcsono::-webkit-details-marker {
  display: none;
}

.reg-accion-count-mcsono {
  padding: 0.02rem 0.4rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  font-weight: 600;
  font-size: 0.68rem;
}

.reg-accion-caret-mcsono {
  font-size: 0.7rem;
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.reg-accion-collapse-mcsono[open] .reg-accion-caret-mcsono {
  transform: rotate(180deg);
}

.reg-accion-collapse-mcsono .reg-accion-users-mcsono {
  margin-top: 0.25rem;
  padding-left: 1.1rem;
}

/* ====================== BOTONES ICONO (3 ACCIONES) ====================== */

.btn-icon-mcsono {
  width: auto;
  height: auto;
  margin: 0;
  font-size: 1.25rem;
  color: var(--sl-color-primary-600);
}

.delete-btn.btn-icon-mcsono {
  color: var(--sl-color-danger-600);
}

/* Tanda CON comentarios: verde y relleno (el ícono pasa a `chat-dots-fill`
   desde el JS). El color va en ::part(base) además del host porque el host de
   un sl-icon-button no lo hereda al shadow DOM en todos los casos. */
/* Los botones del modal de Etiquetas van VAINILLA: sin radio propio, sin
   sombra y sin el `scale` al apretar. La clase `.etiquetas-sl-control-mcsono`
   queda solo como gancho para el próximo que necesite algo puntual — pisarle el
   `border-radius` a un sl-button es exactamente lo que "vainilla" excluye, y
   dejaba estos botones con una forma distinta a la del resto del sistema. */

.comment-btn.btn-icon-mcsono.has-comment,
.comment-btn.btn-icon-mcsono.has-comment::part(base) {
  color: var(--sl-color-success-600);
}

.comment-btn.btn-icon-mcsono.has-comment::part(base):hover {
  color: var(--sl-color-success-700);
}

/* <sl-icon-button> VAINILLA: sin recuadro, sin sombra y sin el `translateY`
   al hover. Cuatro botones con borde y fondo propios por fila competían con la
   fila entera; el color del ícono ya dice cuál es cuál.
   `border-radius: 0` a propósito: es lo único que Shoelace sigue poniendo por
   su cuenta y en la columna de acciones se veía como cuatro cuadraditos
   redondeados al pasar el mouse. Queda el padding, para que el área de clic
   siga siendo cómoda con el dedo. */
.btn-icon-mcsono::part(base) {
  padding: 6px;
  border-radius: 0;
}

/* Estado procesando / listo del botón Generar (Procesar tanda) */
.btn-icon-mcsono.is-processing {
  animation: pulse-icon-mcsono 1s ease-in-out infinite;
}

.btn-icon-mcsono.is-processing::part(base) {
  color: var(--sl-color-primary-600);
}

.btn-icon-mcsono.is-done::part(base) {
  color: var(--sl-color-success-600);
}

@keyframes pulse-icon-mcsono {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.btn-icon-mcsono i {
  font-size: 0.95rem;
  line-height: 1;
}

/* Responsive: que no se rompa en mobile */
@media (max-width: 576px) {
  /* Archivo (tanda): nombre + meta + registro ocupan la fila completa arriba;
     el badge y los botones bajan a una segunda fila (badge izquierda, botones derecha). */
  .etiqueta-file-item-mcsono {
    grid-template-columns: 1fr auto !important;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    align-items: center !important;
    padding: 0.75rem 0.8rem;
  }

  .etiqueta-file-main-mcsono {
    grid-column: 1 / -1;
  }

  .etiqueta-file-center-mcsono {
    justify-self: start;
    justify-content: flex-start;
  }

  .etiqueta-file-buttons-mcsono {
    justify-self: end;
    /* Separación clara entre los íconos de acción en mobile */
    gap: 0.6rem;
  }

  /* Carpeta (fecha): nombre arriba, badge debajo a la izquierda. */
  .etiqueta-folder-item-mcsono {
    grid-template-columns: 1fr auto !important;
    row-gap: 0.4rem;
    align-items: center !important;
  }

  .etiqueta-folder-actions-mcsono {
    justify-self: start;
  }

  .btn-icon-mcsono {
    width: 34px;
    height: 34px;
    line-height: 34px;
  }
}

/* ====================== FOOTER BUTTONS (CERRAR / SUBIR) ====================== */

.footer-btn-primary-mcsono,
.footer-btn-danger-mcsono {
  border-radius: 12px;
  font-size: 0.9rem;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

/* El radio de los botones ya no se fuerza acá: el shell del modal es un
   <sl-dialog> y los botones usan el radio del tema, igual que en el resto.
   La regla de `.etiquetas-action-swal-mcsono` que había se fue con el popup de
   SweetAlert2. */

/* ====================== GLASS LECTURA ETIQUETAS ZPL ====================== */

.zpl-glass-mcsono {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  background:
    radial-gradient(circle at top, rgba(59, 130, 246, 0.06) 0, transparent 45%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.22),
    0 2px 8px rgba(15, 23, 42, 0.08);
  z-index: 10000;
  padding: 20px 20px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  color: #0f172a;
  text-align: left;
  transition: opacity 0.7s;
}

.zpl-glass-head-mcsono {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.zpl-glass-icon-mcsono {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #ffffff;
  border-radius: 14px;
  background: linear-gradient(145deg, #3b82f6, #2563eb);
}

.zpl-glass-head-mcsono h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.zpl-glass-head-mcsono p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 0.83rem;
}

.zpl-glass-steps-mcsono {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 2px;
  font-size: 0.88rem;
}

.zpl-glass-step-mcsono {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: all 0.7s cubic-bezier(0.77, 0, 0.18, 1);
}

.zpl-glass-step-mcsono.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.zpl-glass-progress-mcsono {
  margin-top: 16px;
  text-align: center;
}

.zpl-glass-progress-label-mcsono {
  margin-bottom: 6px;
  font-size: 0.83rem;
  color: #64748b;
}

.zpl-glass-bar-track-mcsono {
  background: #e2e8f0;
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.zpl-glass-bar-fill-mcsono {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  transition: width 0.4s cubic-bezier(0.77, 0, 0.18, 1);
}

.zpl-glass-pct-mcsono {
  margin-top: 6px;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #2563eb;
}

.zpl-glass-foot-mcsono {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.zpl-glass-foot-mcsono sl-button::part(base) {
  border-radius: 12px;
  font-weight: 600;
}

/* Sin recuadro gris al presionar */
.zpl-glass-mcsono,
.zpl-glass-mcsono * {
  -webkit-tap-highlight-color: transparent;
}

.zpl-glass-mcsono sl-button:focus,
.zpl-glass-mcsono sl-button::part(base):focus {
  outline: none;
}

/* ====================== COMENTARIOS DE UNA TANDA ====================== */

/* El popup es un <sl-dialog class="lp-modal"> (controlMeli.html), asi que el
   fondo, la caja, el titulo y la X salen de css/ui/lp-modal.css. Acá quedó solo
   lo propio del contenido.

   Se fueron con el markup: .comment-overlay-mcsono (el fondo y el
   `position: fixed`), .comment-container-mcsono (la caja centrada a mano),
   .comment-cerrar-mcsono (la X, ahora la del diálogo),
   .comentario-meli-titulo-mcsono (el título, ahora slot="label") y
   .comment-textarea-mcsono, que ya no la usaba nadie. */

/* El comentario del método anterior, solo lectura. */
.comment-anterior-mcsono {
  margin-bottom: 0.9rem;
  padding: 8px 12px;
  border-left: 3px solid var(--sl-color-neutral-300);
  border-radius: 8px;
  background: var(--sl-color-neutral-50);
}

.comment-anterior-mcsono small {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sl-color-neutral-400);
}

.comment-anterior-mcsono > div {
  white-space: pre-wrap;
  color: var(--sl-color-neutral-700);
  font-size: 14px;
  margin-top: 2px;
}

/* Chip de fecha + hora: una sola línea */
.time-etiquetas-container {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #4b5563;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.time-etiquetas-container i {
  font-size: 0.9rem;
  color: #9ca3af;
}

.time-etiquetas-text-mcsono {
  display: inline-flex;
  align-items: center;
}

/* Línea única: vie 05/06 • 09:33 */
.time-line-primary-mcsono {
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
}

/* ================== POPUP SWEETALERT MACOS LIGERO ================== */

.swal-popup-mcsono {
  border-radius: 16px;
  padding: 1.4rem 1.6rem 1.2rem;
  background: radial-gradient(circle at top, #f9fafb 0, #ffffff 55%);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    sans-serif;
}

.swal-title-mcsono {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #111827;
}

/* Icono de pregunta más discreto */
.swal2-icon.swal2-question {
  border-color: rgba(148, 163, 184, 0.6);
  color: #2563eb;
}

/* ================== BOTONES PRINCIPALES (confirm / deny / cancel) ================== */

.swal-actions-mcsono {
  margin-top: 1rem;
  display: flex !important;
  width: 100%;
  gap: 0.5rem;
  justify-content: space-between;
}

/* TODOS los botones de acción iguales */
.swal-actions-mcsono .swal2-styled {
  flex: 1 1 0;
  border-radius: 999px !important;
  font-size: 0.85rem;
  padding: 0.45rem 0;
  border: 1px solid #d4d4d8 !important;
  background: linear-gradient(135deg, #f4f4f5, #e5e7eb) !important;
  color: #111827 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}

/* hover muy sutil, sin “resplandor” ni sombras grandes */
.swal-actions-mcsono .swal2-styled:hover {
  background: #e5e7eb !important;
  border-color: #c4c4cc !important;
}

/* anulamos diferencias de color entre confirm / deny / cancel */
.swal-confirm-mcsono,
.swal-deny-mcsono,
.swal-cancel-mcsono {
  background: linear-gradient(135deg, #f4f4f5, #e5e7eb) !important;
  color: #111827 !important;
  border: 1px solid #d4d4d8 !important;
}

/* mobile: apilados, mismos estilos */
@media (max-width: 576px) {
  .swal-actions-mcsono {
    flex-direction: column-reverse;
  }

  .swal-actions-mcsono .swal2-styled {
    width: 100%;
  }
}

.swal-extra-mcsono {
  margin-top: 0.6rem;
}

.swal-extra-divider-mcsono {
  width: 90%;
  margin: 0.6rem auto 0.8rem;
  border: 0;
  border-top: 1px solid rgba(209, 213, 219, 0.9);
}

.swal-extra-buttons-mcsono {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.swal-extra-btn-mcsono {
  border-radius: 999px;
  border: 1px solid #d4d4d8;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  background: linear-gradient(135deg, #f4f4f5, #e5e7eb);
  color: #111827;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}

.swal-extra-btn-mcsono:hover {
  background: #e5e7eb;
  border-color: #c4c4cc;
}

.swal-extra-btn-icon-mcsono {
  font-size: 0.9rem;
}

@media (max-width: 576px) {
  .swal-extra-buttons-mcsono {
    justify-content: space-between;
  }

  .swal-extra-btn-mcsono {
    flex: 1 1 48%;
    justify-content: center;
  }
}

/* === Pagos múltiples (multi medio de pago) === */

.multiple-payments-container {
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.multiple-payments-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.multiple-payments-badge {
  font-size: 11px;
  border-radius: 999px;
  padding: 4px 10px;
}

.multiple-payments-subtitle {
  font-size: 12px;
  color: #6b7280;
}

/* Tarjeta de cada medio de pago */
.mp-card {
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.mp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.mp-card-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mp-card-index {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.mp-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.mp-card-entity-pill {
  font-size: 11px;
  border-radius: 999px;
  padding: 3px 9px;
  background: rgba(15, 23, 42, 0.04);
  color: #374151;
  max-width: 55%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Cuerpo interno */
.mp-card-inner {
  margin-top: 4px;
}

.mp-top-row,
.mp-bottom-row {
  margin-top: 2px;
}

/* Labels e inputs pequeños y prolijos */
.mp-card .form-label-sm {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
}

.mp-card .form-control-sm {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  border-color: rgba(148, 163, 184, 0.7);
  background-color: #f9fafb;
}

/* Efecto focus sutil */
.mp-card .form-control-sm:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
  background-color: #ffffff;
}

/* Responsive: en móviles que se apilen mejor las columnas */
@media (max-width: 576px) {
  .mp-top-row .col-md-4,
  .mp-bottom-row .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .mp-card-entity-pill {
    max-width: 50%;
  }
}

/* Alineamos el monto a la derecha y con numeración tabular */
.mp-monto-ars {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: green;
  font-weight: 900;
}

/* Responsivo */

/* MEDIOS DE ENVIO */
/* ===========================
   MEDIOS DE ENVÍO – limpio / legible
   =========================== */

/* ===========================
   VARIANTES POR TIPO DE ENVÍO
   =========================== */

/* FIN MEDIOS DE ENVIO */

/* ================================
   FECHA / HORA MELI FACTURACION
   ================================ */

/* ====== PAGOS MERCADO LIBRE – ESTILO macOS SONOMA CLARO ====== */

.cell-payment-meli {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 3px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: #111827;
  font-size: 12px;
  line-height: 1.35;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.1s ease;
}

.empty-payment-meli {
  background: #f9fafb;
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.6);
  color: #6b7280;
  font-style: italic;
}

.pending-payment-meli {
  border-left: 3px solid #f59e0b;
  background: linear-gradient(90deg, #fffbeb 0%, #ffffff 55%);
}

.single-payment-meli {
  border-left: 3px solid #3b82f6;
  background: linear-gradient(90deg, #eff6ff 0%, #ffffff 55%);
}

.multi-payment-meli {
  border-left: 3px solid #10b981;
  background: linear-gradient(90deg, #ecfdf5 0%, #ffffff 55%);
}

/* Layout interno */

.wrap-payment-meli {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.main-payment-meli {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #111827;
}

.amount-payment-meli {
  font-weight: 500;
  color: #374151;
}

.status-payment-meli {
  margin-top: 2px;
  font-size: 11px;
  color: #6b7280;
}

.total-payment-meli {
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.18);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.total-payment-meli strong {
  font-weight: 700;
}

/* Intentos cancelados / rechazados */

.canceled-payment-meli {
  margin-top: 4px;
  font-size: 11px;
  color: #b45309;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Logos */

.logo-payment-meli {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.18));
}

.multi-logo-payment-meli {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Listado de múltiples pagos */

.multi-list-payment-meli {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(148, 163, 184, 0.5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.multi-row-payment-meli {
  display: flex;
  align-items: center;
  gap: 8px;
}

.multi-text-payment-meli {
  display: flex;
  flex-direction: column;
}

/* Responsivo */

@media (max-width: 576px) {
  .cell-payment-meli {
    padding: 8px 10px;
    border-radius: 12px;
  }

  .logo-payment-meli {
    width: 26px;
    height: 26px;
  }

  .total-payment-meli {
    font-size: 11px;
    padding: 3px 8px;
  }
}

/* ====== Intentos de pago – Collapse macOS claro ====== */

.attempts-payment-meli {
  margin-top: 6px;
}

/* Botón que abre/cierra el detalle */
.attempts-toggle-payment-meli {
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-size: 11px;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition:
    color 0.18s ease,
    transform 0.08s ease;
}

.attempts-toggle-payment-meli:hover {
  background-color: grey !important;
  color: white !important;
}

.attempts-toggle-payment-meli span {
  text-decoration: underline dotted rgba(148, 163, 184, 0.9);
  text-underline-offset: 2px;
}

.attempts-toggle-payment-meli i {
  font-size: 12px;
  transition: transform 0.18s ease;
}

/* Rotar flechita cuando está abierto */
.attempts-toggle-payment-meli[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Panel que se despliega */
.attempts-body-payment-meli {
  margin-top: 4px;
  padding: 6px 8px 4px;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

/* Cada intento */
.attempts-row-payment-meli {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}

.attempts-row-payment-meli + .attempts-row-payment-meli {
  border-top: 1px dashed rgba(203, 213, 225, 0.9);
  margin-top: 3px;
  padding-top: 7px;
}

/* Línea principal: estado + monto */
.attempts-row-main-payment-meli {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.attempts-row-status-payment-meli {
  font-weight: 600;
  color: #b45309; /* tostado suave, no rojo fuerte */
}

.attempts-row-amount-payment-meli {
  font-weight: 600;
  color: #111827;
}

/* Línea secundaria: fecha + método */
.attempts-row-meta-payment-meli {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 10px;
  color: #6b7280;
}

.attempts-row-meta-payment-meli span {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
}

/* Responsive suave */
@media (max-width: 576px) {
  .attempts-body-payment-meli {
    padding: 6px 6px 4px;
  }

  .attempts-row-main-payment-meli {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .attempts-row-amount-payment-meli {
    font-size: 11px;
  }
}

/* INDEX GENERACION DE ETIQUETAS */
/* ============================
   NUEVO LAYOUT FORM ANDESMAR
   Estilo macOS Sonoma Light
   ============================ */

#andesmarForm {
  width: fit-content;
  padding: 1.5rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "SF Pro Text", "Roboto", sans-serif;
}

#andesmarForm select {
  border-radius: 5px !important;
  margin-bottom: 0px !important;
}

#andesmarForm input {
  border-radius: 5px !important;
  margin-bottom: 0px !important;
}

/* Wrapper principal: en desktop fit-content, mobile 100% */
#andesmarForm-wrapper-index {
  width: 100%;
  max-width: 1200px;
}

@media (min-width: 992px) {
  #andesmarForm-wrapper-index {
    width: fit-content;
    max-width: 1200px;
  }
}

/* Encabezado del formulario */
#andesmarForm-header-index {
  margin-bottom: 1.5rem;
}

#andesmarForm-header-index .andesmarForm-badge-index {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(15, 23, 42, 0.04);
  color: #111827;
}

#andesmarForm-header-index .andesmarForm-title-index {
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #0f172a;
}

#andesmarForm-header-index .andesmarForm-subtitle-index {
  margin: 0;
  max-width: 650px;
  font-size: 0.9rem;
  color: #4b5563;
}

/* GRID principal */
#andesmarForm-grid-index {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 20;
}

#andesmarForm .andesmarForm-column-index {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

/* Tarjetas estilo iOS / Sonoma — limpias, sin sombras exageradas */
#andesmarForm .andesmarForm-card-index {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 2px 10px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(20px);
  position: relative;
}

/* Títulos de sección iOS */
#andesmarForm .andesmarForm-section-title-index {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #0f172a;
  letter-spacing: -0.01em;
}

/* Filas y campos */
#andesmarForm .andesmarForm-row-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

#andesmarForm .andesmarForm-row-3-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.6rem;
}

#andesmarForm .andesmarForm-field-index {
  margin-bottom: 0.6rem;
}

#andesmarForm .andesmarForm-label-index {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #475569;
  letter-spacing: -0.005em;
}

#andesmarForm .andesmarForm-label-index i {
  font-size: 0.85rem;
  color: #94a3b8;
}

/* Inputs / selects base — iOS rounded fill */
#andesmarForm .andesmarForm-control-index,
#andesmarForm .andesmarForm-control-index[type="number"],
#andesmarForm .andesmarForm-control-index[type="text"],
#andesmarForm .andesmarForm-control-index[type="email"],
#andesmarForm textarea#observaciones {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  padding: 0.6rem 0.85rem;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 0.88rem;
  background: rgba(248, 250, 252, 0.7);
  color: #0f172a;
  letter-spacing: -0.005em;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

#andesmarForm .andesmarForm-control-index::placeholder,
#andesmarForm textarea#observaciones::placeholder {
  color: #94a3b8;
}

#andesmarForm .andesmarForm-control-index:hover,
#andesmarForm textarea#observaciones:hover {
  border-color: rgba(203, 213, 225, 1);
  background: rgba(248, 250, 252, 0.95);
}

#andesmarForm .andesmarForm-control-index:focus,
#andesmarForm textarea#observaciones:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.85);
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.3);
  background: #ffffff;
}

/* Selects iOS */
#andesmarForm select,
#andesmarForm #tipoElectrodomestico {
  color: #0f172a !important;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  padding: 0.6rem 0.85rem;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 0.88rem;
  letter-spacing: -0.005em;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

#andesmarForm select:focus,
#andesmarForm #tipoElectrodomestico:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.85);
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.3);
  background-color: #ffffff !important;
}

#andesmarForm select option {
  color: #111827;
  background-color: #ffffff;
}

/* Mensaje CP */
#andesmarForm .andesmarForm-cpMsg-index {
  font-size: 0.83rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  background: rgb(221 254 219 / 90%);
  color: #4a7f4a;
  margin: 0.35rem 0;
}

/* Negativo: envío no disponible → rojo */
#andesmarForm #respuestaNegativa.andesmarForm-cpMsg-index {
  background: rgb(254 226 226 / 92%);
  color: #991b1b;
}

/* Provincia label */
#andesmarForm .andesmarForm-provincia-label-index {
  margin-top: 0.3rem;
  font-size: 0.83rem;
  color: #4b5563;
}

/* Localidad */
#andesmarForm .andesmarForm-localidad-wrapper-index {
  position: relative;
}

#andesmarForm .andesmarForm-localidad-wrapper-index .clear-button {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0.6;
}

/* Observaciones / mensaje armado */
#andesmarForm .mensaje-personalizado {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
  border-radius: 9px;
  border: 1px dashed rgba(148, 163, 184, 0.9);
  background: rgba(248, 250, 252, 0.95);
}

/* Volumen */
#andesmarForm .andesmarForm-volumen-wrapper-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
}

#andesmarForm .andesmarForm-volumen-card-index {
  border-radius: 13px;
  padding: 0.6rem 0.9rem;
  background: linear-gradient(135deg, #eff6ff, #e0f2fe);
  border: 1px solid rgba(129, 140, 248, 0.55);
}

#andesmarForm .andesmarForm-volumen-label-index {
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #1d4ed8;
}

#andesmarForm .andesmarForm-volumen-label-index img {
  width: 22px;
  height: 22px;
}

#andesmarForm .andesmarForm-volumen-value-index {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.2rem;
  color: #111827;
}

/* Medidas de bultos */
#andesmarForm .andesmarForm-section-header-inline-index {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

#andesmarForm .andesmarForm-chip-index {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(147, 197, 253, 0.55);
  color: #1d4ed8;
  white-space: nowrap;
  box-shadow:
    0 1px 3px rgba(37, 99, 235, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* Estilo base compartido (misma altura, padding, tipografía, etc.) */
#andesmarForm .andesmarForm-addBulto-btn-index,
#andesmarForm .andesmarForm-addBulto-btn-index2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;

  height: 2.4rem; /* 👈 misma altura para ambos */
  padding: 0 1rem; /* mismo padding lateral */
  border-radius: 999px;

  font-size: 0.85rem;
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
  margin-top: 0 !important;

  cursor: pointer;
  background-clip: padding-box;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

/* Botón: Agregar bulto vacío (blanco + azul iOS outline) */
#andesmarForm .andesmarForm-addBulto-btn-index {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(147, 197, 253, 0.6);
  color: #1d4ed8;
  box-shadow:
    0 2px 6px rgba(37, 99, 235, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

#andesmarForm .andesmarForm-addBulto-btn-index:hover {
  background-color: rgba(239, 246, 255, 0.95);
  border-color: #60a5fa;
  color: #1e3a8a;
  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* Botón: Agregar bulto de E3 (azul iOS relleno) */
#andesmarForm .andesmarForm-addBulto-btn-index2 {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow:
    0 3px 10px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

#andesmarForm .andesmarForm-addBulto-btn-index2:hover {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow:
    0 5px 14px rgba(37, 99, 235, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* Cotizaciones */
#andesmarForm .andesmarForm-card-cotizaciones-index .grid-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
}

/* Opciones de envío */
#andesmarForm .andesmarForm-opciones-grid-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 0.7rem;
}

#andesmarForm .andesmarForm-opcion-card-index {
  border-radius: 13px;
  border: 1px solid rgba(209, 213, 219, 0.9);
  padding: 0.7rem 0.85rem;
  background: rgba(249, 250, 251, 0.96);
}

#andesmarForm .andesmarForm-opcion-title-index {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #111827;
}

#andesmarForm .andesmarForm-servicio-grid-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.4rem;
}

/* Botones de acciones */
#andesmarForm .andesmarForm-acciones-wrapper-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

#andesmarForm .andesmarForm-mainBtn-index,
#andesmarForm .andesmarForm-secondaryBtn-index {
  border-radius: 999px;
  padding-inline: 1.3rem;
}

/* ============================
   RESPONSIVE
   ============================ */

@media (max-width: 992px) {
  #andesmarForm-grid-index {
    grid-template-columns: 1fr;
  }

  #andesmarForm .andesmarForm-card-cotizaciones-index .grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #andesmarForm .andesmarForm-opciones-grid-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  #andesmarForm {
    padding: 1rem 0.75rem 2.5rem;
  }

  #andesmarForm .andesmarForm-row-index,
  #andesmarForm .andesmarForm-row-3-index,
  #andesmarForm .andesmarForm-servicio-grid-index {
    grid-template-columns: 1fr;
  }

  #andesmarForm .andesmarForm-volumen-wrapper-index {
    grid-template-columns: 1fr;
  }

  #andesmarForm .andesmarForm-card-cotizaciones-index .grid-container {
    grid-template-columns: 1fr;
  }

  #andesmarForm .andesmarForm-opciones-grid-index {
    grid-template-columns: 1fr;
  }
}

.andesmarForm-row-index input {
  width: 100% !important;
}

/* ===== PISO / DEPTO FULL WIDTH DENTRO DEL FORM ===== */

#andesmarForm .PisoyDepto .andesmarForm-row-index {
  display: grid; /* aseguramos grid acá también */
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
}

#andesmarForm .PisoyDepto .andesmarForm-field-index {
  width: 100%;
}

/* Forzamos que los inputs de piso / depto ocupen el 100% del ancho de su celda */
#andesmarForm #pisolDestinatario,
#andesmarForm #deptoDestinatario {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  flex: 1 1 auto;
}

/* Por si en tu CSS viejo hay algo tipo .piso input { width: 80px } */
#andesmarForm .PisoyDepto .piso input,
#andesmarForm .PisoyDepto .depto input {
  width: 100% !important;
  max-width: 100% !important;
}

/* En mobile los apilamos uno debajo del otro para que respiren */
@media (max-width: 768px) {
  #andesmarForm .PisoyDepto .andesmarForm-row-index {
    grid-template-columns: 1fr;
  }
}

/* ========== LOCALIDAD: SELECTOR MACOS GLASS ========== */

#andesmarForm .andesmarForm-localidad-wrapper-index {
  position: relative;
}

/* Dropdown de localidades (ocupa todo el ancho del input) */
#andesmarForm .andesmarForm-localidad-wrapper-index .lista-localidades {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  width: 100% !important; /* pisa el 47.5% anterior */
  max-height: 240px;
  display: none; /* se sigue manejando por JS */
  overflow-y: auto;

  padding: 0.25rem 0;
  border-radius: 0 0 14px 14px;
  border: 1px solid rgba(148, 163, 184, 0.6);

  background: radial-gradient(
    circle at top left,
    rgba(255, 255, 255, 0.98),
    rgba(248, 250, 252, 0.96)
  );
  box-shadow:
    0 18px 30px rgba(15, 23, 42, 0.18),
    0 0 0 0.5px rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  font-size: 0.85rem;
  color: #111827;
  z-index: 9999;
}

/* Ítems del dropdown */
#andesmarForm .andesmarForm-localidad-wrapper-index .lista-localidades div {
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Separadores suaves entre ítems */
#andesmarForm .andesmarForm-localidad-wrapper-index .lista-localidades div + div {
  border-top: 1px solid rgba(226, 232, 240, 0.7);
}

/* Hover estilo Sonoma */
#andesmarForm .andesmarForm-localidad-wrapper-index .lista-localidades div:hover {
  background: linear-gradient(120deg, #2563eb, #4f46e5);
  color: #f9fafb;
}

/* Scrollbar suave en navegadores WebKit */
#andesmarForm .andesmarForm-localidad-wrapper-index .lista-localidades::-webkit-scrollbar {
  width: 6px;
}

#andesmarForm .andesmarForm-localidad-wrapper-index .lista-localidades::-webkit-scrollbar-track {
  background: transparent;
}

#andesmarForm .andesmarForm-localidad-wrapper-index .lista-localidades::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.8);
  border-radius: 999px;
}

/* Botón de limpiar (X) dentro del input de localidad */
#andesmarForm .andesmarForm-localidad-wrapper-index .clear-button {
  background-color: rgba(148, 163, 184, 0.15);
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  cursor: pointer;
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: #2563eb;
  font-size: 0.75rem;
  line-height: 1;
  border: none;
  display: none; /* el JS la muestra cuando haya texto */
}

/* Aseguramos que el input de localidad tenga espacio para la X y el spinner */
#andesmarForm #localidad.andesmarForm-control-index {
  padding-right: 3rem; /* espacio para spinner + X */
}

/* Spinner Font Awesome dentro del input (macOS-like) */
#andesmarForm #loadingSpinner.andesmarForm-spinner-localidad-index {
  position: absolute;
  right: 1.9rem; /* spinner a la izquierda de la X */
  top: 33%;
  transform: translateY(-50%);
  margin: 0;
  font-size: 0.9rem;
  color: #94a3b8; /* gris azulado suave */
  pointer-events: none;
}

/* Si querés que en mobile el dropdown se vea un toque más grande */
@media (max-width: 768px) {
  #andesmarForm .andesmarForm-localidad-wrapper-index .lista-localidades {
    max-height: 280px;
    font-size: 0.9rem;
  }
}

/* ========== BULTOS: CARDS ESTILO MACOS SONOMA ========== */

#andesmarForm #medidasBultosContainer {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Card visual: se aplica a cualquier .bulto dentro del contenedor,
   y también a la clase específica por si la usás en JS */
#andesmarForm #medidasBultosContainer .bulto,
#andesmarForm .andesmarForm-bulto-card-index {
  position: relative;
  border-radius: 14px;
  padding: 0.85rem 1rem 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  animation: none !important;

  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Título del bulto — texto limpio iOS */
#andesmarForm #medidasBultosContainer .bulto .bultoTitle {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: transparent !important;
  -webkit-text-fill-color: #0f172a !important;
  margin: 0 !important;
  padding: 0 2rem 0 0 !important;
  letter-spacing: -0.01em;
  text-transform: none !important;
  width: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  line-height: 1.2;
  display: block;
}

/* Fila de labels Alto/Ancho/Largo/Cantidad */
#andesmarForm #medidasBultosContainer .bulto .bultoDescripccion {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  font-size: 0.72rem;
  color: #6b7280;
  margin: 0;
}

/* Fila de inputs */
#andesmarForm #medidasBultosContainer .bulto .bultoImput {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0;
}

#andesmarForm #medidasBultosContainer .bulto .bultoImput input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.85);
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  background: rgba(248, 250, 252, 0.95);
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

#andesmarForm #medidasBultosContainer .bulto .bultoImput input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.28);
  outline: none;
  background: #ffffff;
}

/* Botón "Agregar otro bulto" */
#andesmarForm #addBultoButton,
#andesmarForm .andesmarForm-addBulto-btn-index {
  margin-top: 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.45);
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

#andesmarForm #addBultoButton i,
#andesmarForm .andesmarForm-addBulto-btn-index i {
  font-size: 1rem;
}

#andesmarForm #addBultoButton:hover,
#andesmarForm .andesmarForm-addBulto-btn-index:hover {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  border-color: rgba(37, 99, 235, 0.7);
  box-shadow: none !important;
}

#andesmarForm #addBultoButton:active,
#andesmarForm .andesmarForm-addBulto-btn-index:active {
  transform: scale(0.97);
}

/* Botón X para eliminar bulto: compacto, en la esquina superior derecha */
#andesmarForm .andesmarForm-bulto-remove-index,
#andesmarForm .removeBultoButton {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.9);
  color: #64748b;
  font-size: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
}

#andesmarForm .andesmarForm-bulto-remove-index::before,
#andesmarForm .removeBultoButton::before {
  content: "×";
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
}

#andesmarForm .andesmarForm-bulto-remove-index i,
#andesmarForm .removeBultoButton i {
  display: none;
}

#andesmarForm .andesmarForm-bulto-remove-index:hover,
#andesmarForm .removeBultoButton:hover {
  background: #fef2f2;
  border-color: rgba(248, 113, 113, 0.6);
  color: #dc2626;
}

#andesmarForm .andesmarForm-bulto-remove-index:active,
#andesmarForm .removeBultoButton:active {
  transform: scale(0.92);
}

/* Responsive: en mobile, 2 columnas para las medidas */
@media (max-width: 768px) {
  #andesmarForm #medidasBultosContainer .bulto .bultoDescripccion,
  #andesmarForm #medidasBultosContainer .bulto .bultoImput {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #andesmarForm #addBultoButton,
  #andesmarForm .andesmarForm-addBulto-btn-index {
    width: 100%;
    justify-content: center;
  }
}

.andesmarForm-paso {
  padding: 4px 12px 4px 8px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  width: fit-content;
  border-radius: 999px;
  position: absolute;
  right: 10px;
  top: 10px;
  color: #1d4ed8;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  border: 1px solid rgba(147, 197, 253, 0.55);
  box-shadow:
    0 2px 8px rgba(37, 99, 235, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.andesmarForm-paso::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  box-shadow:
    0 1px 3px rgba(37, 99, 235, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

/* ===================== COTIZACIONES – MISSION CONTROL ===================== */

.andesmarForm-card-cotizaciones-index {
  margin-top: 1.75rem;
  position: relative;
  z-index: 1;
}

.andesmarForm-card-cotizaciones-index .andesmarForm-subsection-subtitle-index {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: #6b7280;
}

/* Grid de cards */
.cotizaciones-grid-macos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

/* Card base — clean, minimal, vertical brand stripe on the left */
.cotizacion-card-macos {
  position: relative;
  border-radius: 16px;
  padding: 1rem 1.1rem 0.95rem 1.2rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition:
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.25s ease;
}

/* Brand vertical accent — full height, left side */
.cotizacion-card-macos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
}

/* Subtle colored glow in the corner */
.cotizacion-card-macos::after {
  content: "";
  position: absolute;
  top: -60%;
  right: -35%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  opacity: 0.09;
  filter: blur(26px);
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.cotizacion-card-andreani::before {
  background: linear-gradient(180deg, #f97373 0%, #b91c1c 100%);
}
.cotizacion-card-andesmar::before {
  background: linear-gradient(180deg, #60a5fa 0%, #1d4ed8 100%);
}
.cotizacion-card-oca::before {
  background: linear-gradient(180deg, #a855f7 0%, #4c1d95 100%);
}
.cotizacion-card-cruz::before {
  background: linear-gradient(180deg, #1e40af 0%, #0c1e5e 100%);
}

.cotizacion-card-andreani::after {
  background: radial-gradient(circle, #b91c1c, transparent 70%);
}
.cotizacion-card-andesmar::after {
  background: radial-gradient(circle, #1d4ed8, transparent 70%);
}
.cotizacion-card-oca::after {
  background: radial-gradient(circle, #4c1d95, transparent 70%);
}
.cotizacion-card-cruz::after {
  background: radial-gradient(circle, #1e3a8a, transparent 70%);
}

.cotizacion-card-macos:hover {
  cursor: default;
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.cotizacion-card-macos:hover::after {
  opacity: 0.2;
}

/* Header — logo + transport name left, API tag right */
.cotizacion-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cotizacion-header-main {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

/* Logo — flat, no pill background now */
.cotizacion-logo-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  min-width: 0;
}

.cotizacion-logo-pill img {
  width: 34px;
  height: 34px;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.15);
  flex-shrink: 0;
}

.cotizacion-logo-pill span {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide the old inline IVA badge — moved to subtle subtext below price */
.cotizacion-iva-badge {
  display: none;
}

/* Compact API chip */
.cotizacion-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  text-transform: uppercase;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}

/* Body */
.cotizacion-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

/* Price — big, bold, money-green with Inter */
.cotizacion-monto {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  color: #059669;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
  min-height: 1.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cotizacion-monto .valor-cotizacion:not(.cotizacion-error) {
  color: #059669;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
}

.cotizacion-monto .valor-cotizacion {
  display: inline-flex;
  align-items: center;
}

/* Sub-label under price ("IVA incluido") */
.cotizacion-monto::after {
  content: "IVA incluido";
  font-size: 0.62rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-variant-numeric: normal;
  line-height: 1;
}

.cotizacion-monto:has(.valor-cotizacion.cotizacion-error)::after {
  display: none;
}

/* ========================= NO MORE TYPEWRITER =========================
   JS still injects spinner + typing text during load. We hide those
   and show a clean skeleton shimmer instead. */

.cotizacion-typing-text,
.cotizacion-monto .fa-spinner,
.cotizacion-monto .fas.fa-spinner,
.cotizacion-monto .andesmarForm-spinner-cotizacion-index,
.cotizacion-monto .andesmarForm-spinner-localidad-index,
.cotizacion-monto .cotizacion-spinner-icon,
.cotizacion-placeholder {
  display: none !important;
}

/* Skeleton shimmer: covers empty / placeholder / typewriter states */
.valor-cotizacion:empty,
.valor-cotizacion:has(.cotizacion-typing-text),
.valor-cotizacion:has(.cotizacion-placeholder) {
  position: relative;
  display: inline-block;
  min-width: 7.5rem;
  height: 1.55rem;
  border-radius: 8px;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: cotizacion-shimmer 1.4s linear infinite;
  color: transparent;
  overflow: hidden;
}

@keyframes cotizacion-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Error: red text, no shimmer */
.valor-cotizacion.cotizacion-error {
  animation: none;
  background: transparent;
  color: #b91c1c;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-width: 0;
  height: auto;
}

/* Description row — now removed in favor of plazo-only */
.cotizacion-subcopy {
  display: none;
}

/* Plazo badge — clean, minimal, neutral grey pill */
.cotizacion-card-macos .cotizacion-plazo-badge {
  align-self: flex-start;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  letter-spacing: -0.005em;
  flex-wrap: wrap;
  row-gap: 0.3rem;
}

.cotizacion-card-macos .cotizacion-plazo-badge > span {
  white-space: nowrap;
}

/* Cruz del Sur: cuando hay botón Ver sucursal, desarmamos el pill
   y cada ítem se renderiza como pill independiente para evitar el
   solapamiento del botón. */
.cotizacion-card-cruz .cotizacion-plazo-badge:has(.cruz-ver-sucursal-btn) {
  background: transparent;
  border: none;
  padding: 0;
  gap: 0.4rem;
  align-self: stretch;
}

.cotizacion-card-cruz .cotizacion-plazo-badge:has(.cruz-ver-sucursal-btn) > i {
  display: none;
}

.cotizacion-card-cruz .cotizacion-plazo-badge:has(.cruz-ver-sucursal-btn) > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
}

.cotizacion-card-cruz .cotizacion-plazo-badge:has(.cruz-ver-sucursal-btn) > span::before {
  content: "\F293";
  font-family: "bootstrap-icons" !important;
  font-weight: normal;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1;
}

.cotizacion-card-macos .cotizacion-plazo-badge i,
.cotizacion-card-macos .cotizacion-plazo-badge .bi-clock-history {
  font-size: 0.78rem;
  color: #64748b;
}

.cotizacion-card-macos .cotizacion-plazo-badge strong {
  font-weight: 700;
  color: #0f172a;
}

/* "Ver sucursal" button inside plazo badge (Cruz del Sur) */
.cotizacion-plazo-badge .cruz-ver-sucursal-btn {
  border-radius: 6px;
  padding: 0.18rem 0.55rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e40af;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}

.cotizacion-plazo-badge .cruz-ver-sucursal-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}

.cotizacion-plazo-badge .cruz-ver-sucursal-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Error class (keep for JS compat) */
.cotizacion-error {
  color: #b91c1c;
}

/* Responsive */
@media (max-width: 640px) {
  .cotizacion-card-macos {
    padding: 0.9rem 0.95rem 0.85rem 1rem;
  }
  .cotizacion-monto {
    font-size: 1.45rem;
  }
}

/* Accessibility helper */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Brand color behind each logo */
.cotizacion-card-andreani .cotizacion-logo-pill img {
  background: radial-gradient(circle at 30% 20%, #f97373, #b91c1c);
}
.cotizacion-card-andesmar .cotizacion-logo-pill img {
  background: radial-gradient(circle at 30% 20%, #60a5fa, #1d4ed8);
}
.cotizacion-card-oca .cotizacion-logo-pill img {
  background: radial-gradient(circle at 30% 20%, #a855f7, #4c1d95);
}
.cotizacion-card-cruz .cotizacion-logo-pill img {
  background: radial-gradient(circle at 30% 20%, #1e40af, #0c1e5e);
}

/* Global spinner line-height (used elsewhere) */
.andesmarForm-spinner-localidad-index {
  line-height: 1;
}

/* ============ MEJOR PRECIO — tarifa más baja resaltada ============ */
.cotizacion-card-macos.cotizacion-card-best {
  border-color: #10b981;
  background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.35),
    0 10px 26px rgba(16, 185, 129, 0.16);
}

.cotizacion-card-macos.cotizacion-card-best:hover {
  border-color: #059669;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.5),
    0 14px 32px rgba(16, 185, 129, 0.22);
}

.cotizacion-card-macos.cotizacion-card-best::before {
  background: linear-gradient(180deg, #34d399 0%, #059669 100%) !important;
  width: 5px;
}

.cotizacion-card-macos.cotizacion-card-best::after {
  background: radial-gradient(circle, #059669, transparent 70%) !important;
  opacity: 0.22;
}

.cotizacion-card-macos.cotizacion-card-best .cotizacion-tag {
  display: none;
}

.cotizacion-best-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.26rem 0.6rem;
  border-radius: 6px;
  background: #059669;
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.cotizacion-best-badge i {
  font-size: 0.7rem;
}

/* Modal estilo macOS suave */
.andesmar-modal-macos {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow:
    0 24px 80px rgba(15, 23, 42, 0.45),
    0 0 0 1px rgba(15, 23, 42, 0.05);
}

.cruz-sucursal-info {
  margin-bottom: 0.75rem;
}

.cruz-sucursal-map {
  width: 100%;
  height: 320px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.28);
}
/* FIN INDEX GENERACION DE ETIQUETAS */

.andesmarForm-addBulto-wrapper-liquid-index {
  display: flex;
  gap: 10px;
}

/* Wrapper de búsqueda SKU E3 */
.e3-sku-search-liquid-index {
  position: relative;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgb(179 179 179 / 25%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Label SKU */
.e3-sku-label-liquid-index {
  font-size: 0.86rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  display: block;
}

/* Input SKU E3 (arriba e inline reutilizan la misma clase) */
.e3-sku-input-liquid-index {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.92);
  padding: 0.45rem 2.3rem 0.45rem 0.9rem;
  font-size: 0.9rem;
  outline: none;
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.e3-sku-input-liquid-index:focus {
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.35);
  border-color: rgba(0, 122, 255, 0.65);
}

/* Wrapper del input + botón × */
.e3-sku-input-wrapper-liquid-index {
  position: relative;
  display: block;
}

.e3-sku-input-wrapper-liquid-index .e3-sku-input-liquid-index {
  width: 100%;
  box-sizing: border-box;
}

/* Botón × para limpiar el SKU */
.e3-sku-clear-liquid-index {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: rgba(148, 163, 184, 0.25);
  color: #475569;
  font-size: 0;
  line-height: 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
  z-index: 2;
}

.e3-sku-clear-liquid-index::before {
  content: "";
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round'><path d='M4 4l8 8M12 4l-8 8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}

.e3-sku-input-wrapper-liquid-index.is-filled .e3-sku-clear-liquid-index {
  display: inline-flex;
}

.e3-sku-clear-liquid-index:hover {
  background: rgba(148, 163, 184, 0.4);
}

.e3-sku-clear-liquid-index:hover::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round'><path d='M4 4l8 8M12 4l-8 8'/></svg>");
}

.e3-sku-clear-liquid-index:active {
  transform: translateY(-50%) scale(0.9);
}

/* Listado de resultados SKU — flotante absoluto, sin bordes redondeados */
.e3-results-list-liquid-index {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 0.4rem;
  padding: 0.5rem;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 0;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.12),
    0 2px 6px rgba(15, 23, 42, 0.06);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}

.e3-results-list-liquid-index:not(:empty) {
  display: flex;
}

/* Variante inline dentro del form addBultoE3 — también absolute */
#skuResultsE3Inline.e3-results-list-liquid-index {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  z-index: 2000;
}

.addBultoE3-form-liquid-index {
  position: relative;
  z-index: 2000;
}

.e3-results-list-liquid-index {
  z-index: 2000;
}

/* Elevar la card Producto & Bultos para que las sugerencias queden sobre las cotizaciones */
#andesmarForm .andesmarForm-card-producto-bultos-index {
  position: relative;
  z-index: 100;
}

#andesmarForm .andesmarForm-card-producto-bultos-index .e3-sku-search-liquid-index {
  position: relative;
  z-index: 2;
}

/* Scrollbar sutil */
.e3-results-list-liquid-index::-webkit-scrollbar {
  width: 6px;
}
.e3-results-list-liquid-index::-webkit-scrollbar-track {
  background: transparent;
}
.e3-results-list-liquid-index::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.65);
  border-radius: 999px;
}

/* Estados: loading / vacío / error */
.e3-result-loading-liquid-index,
.e3-result-empty-liquid-index,
.e3-result-error-liquid-index {
  font-size: 0.8rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px dashed rgba(148, 163, 184, 0.8);
}

.e3-result-error-liquid-index {
  border-color: rgba(255, 59, 48, 0.7);
  color: #d63333;
}

/* Card de resultado iOS — limpio, bien legible */
.e3-result-item-liquid-index {
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    sans-serif;
}

.e3-result-item-liquid-index:hover {
  border-color: rgba(147, 197, 253, 0.85);
  background: #f8fbff;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08);
}

/* Header de resultado */
.e3-result-header-liquid-index {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

/* SKU pill iOS azul */
.e3-result-sku-liquid-index {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
  font-size: 0.78rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.95);
  color: #1d4ed8;
  border: 1px solid rgba(191, 219, 254, 0.9);
  box-shadow: none;
  white-space: nowrap;
}

/* Stock pill iOS verde */
.e3-result-stock-liquid-index {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(220, 252, 231, 0.9);
  color: #166534;
  border: 1px solid rgba(187, 247, 208, 0.85);
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* Stock = 0 → rojo */
.e3-result-stock-liquid-index.stock--zero {
  background: rgba(254, 226, 226, 0.9);
  color: #991b1b;
  border-color: rgba(252, 165, 165, 0.85);
}

/* Stock < 10 → naranja */
.e3-result-stock-liquid-index.stock--low {
  background: rgba(255, 237, 213, 0.9);
  color: #9a3412;
  border-color: rgba(253, 186, 116, 0.85);
}

/* Nombre con ellipsis */
.e3-result-name-liquid-index {
  font-size: 0.84rem;
  font-weight: 500;
  color: #0f172a;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

/* Medidas */
.e3-result-measures-liquid-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.55rem;
  font-size: 0.72rem;
  color: #64748b;
  letter-spacing: -0.005em;
}

/* Footer: precio + botón */
.e3-result-footer-liquid-index {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.e3-result-price-liquid-index {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

/* Botón "Agregar al envío" iOS azul filled */
.e3-result-add-btn-liquid-index {
  border-radius: 999px;
  border: 0;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  padding: 0.35rem 0.85rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  letter-spacing: -0.005em;
  box-shadow:
    0 2px 6px rgba(37, 99, 235, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    background 0.2s ease;
  white-space: nowrap;
}

.e3-result-add-btn-liquid-index:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.e3-result-add-btn-liquid-index:active {
  transform: translateY(0);
}

/* Wrapper de botones de bultos */
.andesmarForm-addBulto-wrapper-liquid-index {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* Inline de E3 */
.addBultoE3-inline-liquid-index {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Form inline que aparece al clickear "Agregar bulto de E3" */
.addBultoE3-form-liquid-index {
  display: none;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 1);
  /* box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); */
}

/* Bultos E3: header con SKU + name */
.bultoHeader-liquid-index {
  margin-bottom: 0.35rem;
}

.bultoTitleSku-liquid-index {
  font-family:
    "Chakra Petch",
    system-ui,
    -apple-system,
    BlinkMacSystemFont;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Esto como vos pediste */
.bultoTitleTag-liquid-index {
  font-size: 0.8rem;
  margin-left: 0.4rem;
  color: #ffca00;
}

/* Subtítulo con el nombre del producto (elipsis) */
.bultoSubtitle-liquid-index {
  font-size: 0.78rem;
  color: #4b5563;
  margin: 0.15rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Marcar bulto vacío de forma sutil */
.bultoVacio-liquid-index {
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.8);
}

#valor-cotizacion .cotizacion-typing-text {
  margin-left: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

#valor-cotizacion2 .cotizacion-typing-text {
  margin-left: 0.4rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

#valor-cotizacion3 .cotizacion-typing-text {
  margin-left: 0.4rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

#valor-cotizacion4 .cotizacion-typing-text {
  margin-left: 0.4rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

.badge-presea-insuf-quey-tandas {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* =========================
   Switch iOS (PlaceIt)
   ========================= */
.switch-ios-placeit {
  position: relative;
  display: inline-block;
  width: 40px; /* más compacto */
  height: 24px; /* más compacto */
}
.switch-ios-placeit input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider-ios-placeit {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: #d1d1d6;
  transition: 0.2s;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.slider-ios-placeit:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  top: 2px;
  background: #fff;
  transition: 0.2s;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
.switch-ios-placeit input:checked + .slider-ios-placeit {
  background: #34c759;
}
.switch-ios-placeit input:checked + .slider-ios-placeit:before {
  transform: translateX(16px);
}
.switch-ios-placeit input:focus + .slider-ios-placeit {
  box-shadow:
    0 0 0 4px rgba(52, 199, 89, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* =========================
   Tabla PlaceIt - compactación real según contenido
   SKU/Hijo/Primo: texto simple (sin badge)
   Express: switch
   Stock: badge chico
   Acciones: solo ícono
   ========================= */
#skuPlaceItModal table.sku-table {
  table-layout: auto; /* que no estire de más */
}

#skuPlaceItModal table.sku-table th,
#skuPlaceItModal table.sku-table td {
  vertical-align: middle;
}

/* SKU / Hijo / Primo: lo mínimo posible */
#skuPlaceItModal table.sku-table th:nth-child(1),
#skuPlaceItModal table.sku-table td:nth-child(1),
#skuPlaceItModal table.sku-table th:nth-child(2),
#skuPlaceItModal table.sku-table td:nth-child(2),
#skuPlaceItModal table.sku-table th:nth-child(3),
#skuPlaceItModal table.sku-table td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
}

/* Express (switch) */
#skuPlaceItModal table.sku-table th:nth-child(4),
#skuPlaceItModal table.sku-table td:nth-child(4) {
  width: 20px !important; /* justo para switch */
  white-space: nowrap;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

/* Stock (badge) */
#skuPlaceItModal table.sku-table th:nth-child(5),
#skuPlaceItModal table.sku-table td:nth-child(5) {
  width: 1%;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
}

/* Acciones (solo ícono) */
#skuPlaceItModal table.sku-table th:nth-child(6),
#skuPlaceItModal table.sku-table td:nth-child(6) {
  width: 20px !important; /* justo para el botón ícono */
  white-space: nowrap;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}

/* Botón acciones más compacto */
#skuPlaceItModal table.sku-table td:nth-child(6) .btn {
  padding: 4px 8px !important;
  line-height: 1 !important;
}

/* Badge stock un poquito más chico */
#skuPlaceItModal table.sku-table td:nth-child(5) span {
  font-size: 0.72em !important;
  padding: 3px 8px !important;
}
/* =========================
   Fin PlaceIt
   ========================= */

/* =========================
   Collapse PlaceIt (sin .card)
   ========================= */
.collapse-placeit {
  border: 1px solid #e5e5ea;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}
.collapse-placeit__btn {
  width: 100%;
  border: 0;
  background: #f7f7fb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-weight: 900;
  color: #111827;
  cursor: pointer;
  outline: none;
  border-radius: 0 !important;
}

.collapse-placeit__btn:hover {
  background: var(--accent-blue);
  color: white !important;
}

.collapse-placeit__btn:hover .collapse-placeit__sub {
  color: yellow !important;
}

.collapse-placeit__left {
  display: inline-flex;
  align-items: center;
  gap: 0px;
}
.collapse-placeit__sub {
  margin-left: 10px;
  font-weight: 700;
  color: #6b7280;
  font-size: 0.85em;
}
.collapse-placeit__chev {
  color: #6b7280;
  font-size: 14px;
  transition: transform 0.18s ease;
}
.collapse-placeit__btn[aria-expanded="true"] .collapse-placeit__chev {
  transform: rotate(90deg);
}
.collapse-placeit__body {
  padding: 12px;
  background: #fff;
  border-top: 1px solid #e5e5ea;
}

/* helpers cps */
.placeit-help {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid #e5e5ea;
  background: #fbfbfe;
  border-radius: 12px;
  margin-bottom: 10px;
}
.placeit-help-ic {
  font-size: 18px;
  color: #2563eb;
  margin-top: 2px;
}
.placeit-help-title {
  font-weight: 900;
  color: #111827;
  margin-bottom: 2px;
}
.placeit-help-desc {
  color: #374151;
  font-size: 0.92em;
  line-height: 1.35;
}

.placeit-php-config {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: 12px;
  margin-bottom: 10px;
}

.placeit-php-config__copy {
  min-width: 0;
  flex: 1 1 auto;
}

.placeit-php-config__title {
  font-weight: 900;
  color: #111827;
  margin-bottom: 3px;
}

.placeit-php-config__desc {
  color: #4b5563;
  font-size: 0.92em;
  line-height: 1.35;
}

.placeit-php-config__controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 300px;
  max-width: 360px;
  flex: 0 0 320px;
}

.placeit-php-config__btn,
.placeit-php-config__controls .btn {
  width: 100%;
  margin-bottom: 0 !important;
}

.placeit-php-config__status {
  color: #64748b;
  font-size: 0.82em;
  line-height: 1.3;
}

.placeit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.placeit-php-swal-popup {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
  width: min(760px, calc(100vw - 32px)) !important;
  padding: 0 0 16px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.985) 0%, rgba(248, 250, 252, 0.99) 100%) !important;
  box-shadow:
    0 32px 80px rgba(15, 23, 42, 0.2),
    0 6px 18px rgba(15, 23, 42, 0.08) !important;
}

.placeit-php-swal-html {
  margin: 0 !important;
  padding: 0 18px !important;
  text-align: left !important;
}

.placeit-php-swal-shell {
  display: grid;
  gap: 14px;
}

.placeit-php-swal-head {
  display: grid;
  gap: 6px;
  padding: 18px 2px 0;
}

.placeit-php-swal-kicker {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2563eb;
}

.placeit-php-swal-main-title {
  font-size: 2rem;
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #0f172a;
}

.placeit-php-swal-desc {
  max-width: 58ch;
  font-size: 0.96rem;
  line-height: 1.55;
  color: #475569;
}

.placeit-php-swal-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.placeit-php-swal-context-card {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(248, 250, 252, 0.92);
}

.placeit-php-swal-context-label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.placeit-php-swal-context-value {
  font-size: 0.98rem;
  line-height: 1.4;
  color: #0f172a;
  word-break: break-word;
}

.placeit-php-swal-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.placeit-php-swal-list::-webkit-scrollbar {
  width: 10px;
}

.placeit-php-swal-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.placeit-php-swal-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 15px 16px;
  border-radius: 20px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(255, 255, 255, 0.94);
  cursor: pointer;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease;
}

.placeit-php-swal-option:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.34);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.07);
}

.placeit-php-swal-option.is-selected {
  border-color: rgba(59, 130, 246, 0.52);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.12);
}

.placeit-php-swal-radio {
  margin-top: 6px;
  accent-color: #2563eb;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.placeit-php-swal-option-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.placeit-php-swal-option-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.placeit-php-swal-option-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.placeit-php-swal-option-badge--ghost {
  background: rgba(226, 232, 240, 0.8);
  color: #334155;
}

.placeit-php-swal-option-caption {
  font-size: 0.84rem;
  font-weight: 700;
  color: #64748b;
}

.placeit-php-swal-option-title {
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 900;
  color: #0f172a;
}

.placeit-php-swal-option-path {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #64748b;
  word-break: break-word;
}

.placeit-php-swal-actions {
  margin: 18px 0 0 !important;
  gap: 12px !important;
}

.placeit-php-swal-confirm,
.placeit-php-swal-cancel {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
}

.placeit-php-swal-confirm {
  background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
}

.placeit-php-swal-cancel {
  background: #eef2f7 !important;
  color: #334155 !important;
}

.placeit-php-swal-close {
  color: #94a3b8 !important;
  transition:
    color 0.14s ease,
    transform 0.14s ease;
}

.placeit-php-swal-close:hover {
  color: #334155 !important;
  transform: scale(1.04);
}

@media (max-width: 767.98px) {
  .placeit-php-swal-main-title {
    font-size: 1.55rem;
  }

  .placeit-php-swal-context {
    grid-template-columns: 1fr;
  }

  .placeit-php-swal-option {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }
}

/* =========================
   CPS badges - (PlaceIt)
   ========================= */
.cp-badges-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 2px;
  align-items: center;
}

.cp-badges-summary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 2px 10px;
  color: #64748b;
  font-size: 0.86em;
}

.cp-badges-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.cp-badges-more {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(37, 99, 235, 0.16);
  background: rgba(239, 246, 255, 0.9);
  color: #2563eb;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 800;
  font-size: 0.92em;
  line-height: 1.1;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease;
}

.cp-badges-more:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.cp-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;

  background: rgba(245, 246, 250, 0.78);
  border: 1px solid rgba(17, 24, 39, 0.1);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 850;
  color: #111827;
  font-size: 0.9em;
  letter-spacing: 0.1px;
  white-space: nowrap;

  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    border-color 0.14s ease;
}

@media (max-width: 767.98px) {
  .placeit-php-config {
    flex-direction: column;
  }

  .placeit-php-config__controls {
    min-width: 0;
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
  }
}

.cp-badge:hover {
  cursor: pointer;
  transform: translateY(-1px);
  border-color: rgba(17, 24, 39, 0.16);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

/* Texto secundario dentro del badge (ej: → 24hs) */
.cp-badge small {
  font-weight: 800 !important;
  color: rgba(107, 114, 128, 0.95) !important;
  letter-spacing: 0.1px;
}

/* Botón X estilo iOS */
.cp-badge-x {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(192, 57, 43, 0.28);
  background: rgba(231, 76, 60, 0.1);
  color: rgba(192, 57, 43, 0.92);

  width: 22px;
  height: 22px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  cursor: pointer;

  transition:
    transform 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}

.cp-badge-x:hover {
  transform: scale(1.05);
  background: rgba(231, 76, 60, 0.16);
  border-color: rgba(192, 57, 43, 0.4);
  box-shadow: 0 8px 16px rgba(231, 76, 60, 0.12);
}

.cp-badge-x:active {
  transform: scale(0.98);
}

#cpStdSpinner,
#cpExpSpinner {
  width: 28px;
  height: 28px;
  border-width: 0.22em;
  vertical-align: middle;
  margin-left: 6px;
}

.status-automata-ico {
  width: 26px;
  height: 26px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);

  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

.status-automata-ico i {
  font-size: 13px;
  color: currentColor;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
}

.status-automata-body {
  display: flex;
  flex-direction: column;
  gap: 4px;

  min-width: 0;
  max-width: calc(100% - 36px);
  flex: 1 1 auto;

  position: relative;
  z-index: 1;
}

.status-automata-head {
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
}

.status-automata-bot {
  font-size: 13px;
}

.status-automata-title {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -0.25px;
  opacity: 0.9;
}
/* ===== FIN STATUS AUTOMATA ===== */

/* ===== BTN NOTIFICACIONES FACTURACION MELI ===== */

.notif-bell-btn {
  position: relative;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: grey;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.notif-bell-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.24);
  color: black;
}

.notif-bell-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.notif-bell-btn > i {
  font-size: 1.5rem;
}

.notif-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  min-width: 28px;
  background-color: #dc3545 !important;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  font-family: "Chakra Petch", sans-serif;
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.notif-filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.notif-filter-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

/* ===== comentario ===== */
.notif-comment {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}

.notif-comment-save {
  height: 38px;
  border-radius: 12px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(0, 0, 0, 0.85);
  font-weight: 900;
}

.notif-comment-save:hover {
  filter: brightness(1.02);
}

@media (max-width: 420px) {
  .notif-comment {
    grid-template-columns: 1fr;
  }
  .notif-comment-save {
    width: 100%;
  }
}

:root {
  --c-blue: #0a84ff;
  --c-green: #34c759;
  --c-orange: #ff9f0a;
  --c-red: #ff453a;
  --c-purple: #bf5af2;
  --c-teal: #64d2ff;
  --c-indigo: #5e5ce6;
  --c-gray: #8e8e93;
}

/* ===== FIN BTN NOTIFICACIONES FACTURACION MELI ===== */

/* ==================== LOADER POSVENTA ==================== */
#bottomLoader {
  position: fixed;
  left: 50%;
  bottom: 14px;
  width: min(980px, calc(100% - 24px));
  z-index: 999999;
  display: none;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(180, 180, 190, 0.45);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  font-family: "Signika Negative", sans-serif;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition:
    opacity 180ms ease,
    transform 220ms ease;
}

#bottomLoader.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#bottomLoader .bl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 15px;
  color: #1f1f1f;
  font-weight: 650;
  letter-spacing: 0.2px;
}

#bottomLoader .bl-left {
  min-width: 0;
}

#bottomLoader #blTitle {
  line-height: 1.1;
}

#bottomLoader .bl-sub {
  margin-top: 3px;
  font-size: 12px;
  color: rgba(60, 60, 67, 0.78);
  font-weight: 550;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bottomLoader #blPct {
  font-family: "Signika Negative", sans-serif;
  color: rgba(28, 28, 30, 0.9);
  font-size: 20px;
  font-weight: 750;
}

#bottomLoader .bl-track {
  height: 20px;
  border-radius: 50px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.075);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 8px 18px rgba(0, 0, 0, 0.08) inset;
}

#bottomLoader .bl-fill {
  height: 100%;
  width: 0%;
  border-radius: 50px;
  background: linear-gradient(
    90deg,
    rgba(0, 122, 255, 0.96),
    rgba(88, 86, 214, 0.96),
    rgba(255, 45, 85, 0.92)
  );
  box-shadow:
    0 10px 20px rgba(0, 122, 255, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
  transition: width 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
  position: relative;
  overflow: hidden;
}

#bottomLoader .bl-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-60%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 45%,
    rgba(255, 255, 255, 0) 90%
  );
  animation: blShimmer 1.25s ease-in-out infinite;
  mix-blend-mode: screen;
}

#bottomLoader.is-done .bl-fill::after {
  animation: none;
  opacity: 0.25;
}

@keyframes blShimmer {
  0% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(60%);
  }
}

@media (max-width: 520px) {
  #bottomLoader {
    padding: 10px 12px;
    border-radius: 16px;
  }
  #bottomLoader .bl-track {
    height: 13px;
  }
  #bottomLoader .bl-top {
    margin-bottom: 8px;
  }
}
/* ==================== FIN LOADER POSVENTA ==================== */

/* ==================== BOTONES POSVENTA ==================== */
#promedioBtn,
#sinRevisar {
  right: 65px;
  position: fixed;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(180, 180, 190, 0.42) !important;
  color: rgba(28, 28, 30, 0.92) !important;
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-family: "Signika Negative", sans-serif;
  font-weight: 650;
  letter-spacing: 0.2px;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;

  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);

  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 180ms ease,
    filter 160ms ease;
  user-select: none;
}

#promedioBtn {
  bottom: 18px;
}
#sinRevisar {
  bottom: 72px;
}

#promedioBtn i,
#sinRevisar i {
  font-size: 18px;
  line-height: 18px;
  opacity: 0.92;
}
#promedioBtn span,
#sinRevisar span {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

#promedioBtn span[style],
#sinRevisar span[style] {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

#promedioBtn:hover,
#sinRevisar:hover {
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(150, 150, 165, 0.55) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.74) inset,
    0 0 0 4px rgba(0, 122, 255, 0.1);
  filter: brightness(1.02);
}

#promedioBtn:active,
#sinRevisar:active {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.62) inset;
  filter: brightness(0.99);
}

#promedioBtn:focus,
#sinRevisar:focus,
#promedioBtn:focus-visible,
#sinRevisar:focus-visible {
  outline: none;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.74) inset,
    0 0 0 4px rgba(0, 122, 255, 0.14);
}

@media (max-width: 520px) {
  #promedioBtn,
  #sinRevisar {
    right: 12px;
    padding: 9px 12px;
    min-height: 40px;
    border-radius: 18px;
    gap: 8px;
  }
  #promedioBtn {
    bottom: 14px;
  }
  #sinRevisar {
    bottom: 66px;
  }
}
/* ==================== FIN BOTONES POSVENTA ==================== */

/* ==================== TRIPLETE BOTONES - FACTURACION MELI ==================== */
/* ============================
   🍏 BOTÓN COMENTARIO FACTURACION MELI
   ============================ */
.base-btn-coment-meli {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition:
    transform 160ms ease,
    filter 160ms ease;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 36px !important;
  padding: 0 !important;
  color: #fff !important;
}

.base-btn-coment-meli:hover {
  transform: translateY(-1px) scale(1.05);
  filter: brightness(1.14) saturate(1.12);
}

.base-btn-coment-meli:active {
  transform: translateY(0px) scale(0.98);
  filter: brightness(1.06);
}

.base-btn-coment-meli i {
  font-size: 17px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

/* ============================
   🎨 ESTADOS COMENTARIO
   ============================ */
.neutral-btn-coment-meli {
  background: rgba(70, 70, 70, 0.58) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

.success-btn-coment-meli {
  background: rgba(25, 135, 84, 0.84) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

/* ============================
   🗑️ BOTÓN ELIMINAR
   ============================ */
.meli-btn {
  appearance: none;
  border: none !important;
  outline: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 16px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition:
    transform 140ms ease,
    filter 140ms ease,
    box-shadow 140ms ease;
}

.meli-btn i {
  font-size: 15px;
  line-height: 1;
  opacity: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.meli-btn-sm {
  padding: 8px 12px;
  border-radius: 15px;
}

.meli-btn:hover {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.08);
}

.meli-btn:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(1.03);
}

.meli-btn-delete-danger {
  background: linear-gradient(180deg, rgba(220, 53, 69, 0.98), rgba(220, 53, 69, 0.74));
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.meli-btn-delete-danger i {
  color: #fff;
}

/* ============================
   🔥 SWEETALERT ESTILO MELI
   ============================ */
.swal-meli-popup {
  font-family: "Signika Negative", sans-serif;
  border-radius: 22px !important;
  background: rgba(20, 20, 20, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;

  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);

  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.45),
    0 10px 22px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.swal-meli-title {
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
}

.swal-meli-text {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 700 !important;
}

.swal-meli-confirm-danger {
  border: none !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  padding: 10px 14px !important;

  background: linear-gradient(180deg, rgba(220, 53, 69, 1), rgba(220, 53, 69, 0.75)) !important;

  box-shadow:
    0 16px 26px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.swal-meli-cancel {
  border: none !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  padding: 10px 14px !important;

  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 22px rgba(0, 0, 0, 0.22) !important;
}

.swal-meli-confirm {
  border: none !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  padding: 10px 14px !important;

  background: rgba(175, 95, 255, 0.55) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 22px rgba(0, 0, 0, 0.22) !important;
}

.swal-meli-confirm:hover {
  background: rgba(175, 95, 255, 0.68) !important;
  filter: brightness(1.03);
}

.swal-meli-confirm:active {
  background: rgba(175, 95, 255, 0.5) !important;
  transform: translateY(1px);
}

.table-root-delfin .btn-comment-remito-delfin i,
.table-root-delfin .btn-comment-remito-delfin .bi,
.table-root-delfin .meli-btn-delete-danger .bi {
  color: #fff !important;
}

.meli-btn-delete-danger .bi {
  font-size: 17px !important;
}

/* ==================== FIN TRIPLETE BOTONES - FACTURACION MELI ==================== */

.spinner-ring-md-meli {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: rgba(10, 88, 202, 0.95);
  animation: spinRing 0.85s linear infinite;
}
@keyframes spinRing {
  to {
    transform: rotate(360deg);
  }
}

.flatpickr-day {
  position: relative;
}

.badge-camiones-historial-tipeo {
  pointer-events: none;
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  background: #ff3b30;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.e3-loc-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.e3-loc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.55);
  color: rgba(20, 20, 20, 0.92);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.e3-loc-badge:hover {
  background: rgba(255, 255, 255, 0.75);
  color: rgba(15, 15, 15, 0.95);
  text-decoration: none;
}

.e3-loc-badge i {
  font-size: 14px;
  color: #28a745;
  line-height: 1;
}

/* ============================ FIN SELECTOCTOR DE ESTADO Y PEDIDO MERCADO LIBRE ============================ */
/* ============================ FIN MODAL FACTURACION AUTOMATICA MERCADO LIBRE ======================== */

.swal2-html-container.macos {
  color: #374151;
  font-size: 0.98rem;

  /* ✅ scroll interno si el contenido es alto */
  max-height: min(62vh, 560px);
  overflow: auto;
}

.swal2-html-container.macos::-webkit-scrollbar {
  width: 10px;
}
.swal2-html-container.macos::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.16);
  border-radius: 10px;
}

#reglasNegocioModal .modal-content,
#reglasNegocioModal .modal-content * {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
}

/* ============================ EDITOR DE COMBOS, REGLAS DE PRECIOS E3 ======================== */
.combo-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86));
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 10px 24px rgba(2, 6, 23, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px) saturate(160%);
}

.combo-mode-title {
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
}

.combo-mode-sub {
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.2;
  margin-top: 2px;
}

.combo-shell {
  margin-top: 12px;
}

.combo-card {
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86));
  border: 1px solid rgba(2, 6, 23, 0.08);
  box-shadow:
    0 14px 34px rgba(2, 6, 23, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.combo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.combo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
  white-space: nowrap;
}

.combo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.combo-mini-btn {
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
  font-weight: 900;
  border: 1px solid rgba(2, 6, 23, 0.1);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 10px 22px rgba(2, 6, 23, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: transform 0.08s ease;
}

.combo-mini-btn:hover {
  transform: translateY(-1px);
}

.combo-mini-btn.danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(244, 63, 94, 0.1));
  border-color: rgba(239, 68, 68, 0.3);
  color: #7f1d1d;
}

.combo-inline-add {
  display: flex;
  align-items: center;
  gap: 10px;
}

.combo-inline-add .plus {
  width: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.12);
  color: #065f46;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    0 10px 22px rgba(2, 6, 23, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: transform 0.08s ease;
}

.combo-inline-add .plus:hover {
  transform: translateY(-1px);
}

.combo-suggest {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(2, 6, 23, 0.1);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.08);
}

.combo-suggest .list-group-item {
  border: none;
  border-bottom: 1px solid rgba(2, 6, 23, 0.06);
  padding: 0.65rem 0.8rem;
}

.combo-suggest .list-group-item:last-child {
  border-bottom: none;
}

.combo-selected {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.combo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(2, 6, 23, 0.08);
  background: rgba(255, 255, 255, 0.78);
}

.combo-row .left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.combo-sku-chip {
  display: inline-flex;
  align-items: center;
  font-weight: 900;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(2, 6, 23, 0.12);
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-price-chip {
  display: inline-flex;
  align-items: center;
  font-weight: 900;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  white-space: nowrap;
}

.combo-ref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
}

.combo-ref .label {
  color: #475569;
  font-weight: 800;
  display: flex;
  background-color: none;
  align-items: center;
  gap: 8px;
}

.combo-ref .value {
  font-weight: 900;
  font-size: 1.05rem;
  color: #0f172a;
  white-space: nowrap;
}

.combo-rule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 720px) {
  .combo-rule-grid {
    grid-template-columns: 1fr;
  }
}

.disabled-overlay {
  position: relative;
  opacity: 0.45;
  filter: grayscale(0.12);
  user-select: none;
}

.combo-disabled-soft {
  opacity: 0.55;
  filter: grayscale(0.1);
}

.combo-disabled-soft .input-liquid,
.combo-disabled-soft .select-liquid,
.combo-disabled-soft button {
  cursor: not-allowed !important;
}

.label-ref-combo {
  background-color: #004085;
  color: white !important;
  border-radius: 5px;
  padding: 5px 10px;
  border: none;
}

.value-combo {
  font-weight: 900;
  font-size: 1.5rem !important;
  color: green !important;
}

.notes-liquid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(2, 6, 23, 0.08);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.74));
  box-shadow:
    0 12px 26px rgba(2, 6, 23, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(14px) saturate(160%);
}

.hint-liquid {
  gap: 10px;
  border-radius: 10px;
  padding: 10px 12px;
  color: #334155;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
}

.hint-liquid i {
  flex: 0 0 auto;
  font-size: 1.05rem;
  margin-top: 1px;
  opacity: 0.95;
}

.hint-liquid b {
  font-weight: 900;
  color: #0f172a;
}

.hint-liquid code {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  font-weight: 900;
  font-size: 0.82rem;
  padding: 0.12rem 0.4rem;
  border-radius: 10px;
  border: 1px solid rgba(2, 6, 23, 0.1);
  background: rgba(15, 23, 42, 0.05);
  color: #0f172a;
  white-space: nowrap;
}

.hint-liquid:nth-child(1) {
  border-color: rgba(59, 130, 246, 0.18);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(255, 255, 255, 0.78));
}

.hint-liquid:nth-child(1) i {
  color: #2563eb;
}

.hint-liquid:nth-child(2) {
  border-color: rgba(245, 158, 11, 0.22);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.78));
}

.hint-liquid:nth-child(2) i {
  color: #b45309;
}

@media (max-width: 520px) {
  .notes-liquid {
    padding: 10px;
    border-radius: 16px;
  }
  .hint-liquid {
    padding: 9px 10px;
    border-radius: 14px;
    font-size: 0.9rem;
  }
}

.field-liquid {
  position: relative;
  overflow: visible;
}

.combo-card {
  overflow: visible;
}

.combo-inline-add {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.combo-inline-add .input-liquid {
  flex: 1;
  min-width: 0;
}

.combo-suggest {
  position: absolute !important;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin-top: 0 !important;
  z-index: 9999;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid rgba(2, 6, 23, 0.1);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.14);
  backdrop-filter: blur(14px) saturate(160%);
}

.combo-suggest .list-group-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(2, 6, 23, 0.06);
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  transition:
    background 0.12s ease,
    transform 0.08s ease;
}

.combo-suggest .list-group-item:last-child {
  border-bottom: none;
}

.combo-suggest .list-group-item:hover {
  background: rgba(15, 23, 42, 0.04);
  transform: translateY(-1px);
}

.combo-suggest .list-group-item:active {
  transform: translateY(0);
}

/* scrollbar suave */
.combo-suggest::-webkit-scrollbar {
  width: 10px;
}
.combo-suggest::-webkit-scrollbar-thumb {
  background: rgba(2, 6, 23, 0.18);
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.72);
}
/* ============================ FIN EDITOR DE COMBOS, REGLAS DE PRECIOS E3 ======================== */

.chattigo-phone-input {
  margin-bottom: 0 !important;
}

/* Título tipo “pill” */
.dropdown-section-pill {
  margin: 6px 12px 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.045);
  color: rgba(0, 0, 0, 0.62);
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  display: flex;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
  align-items: center;
  user-select: none;
}

/* =============================== FACTURA TIENDAS VIRTUALES =============================== */
.factura-tv {
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(200, 200, 200, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: #333;
  position: relative;
  cursor: default;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.factura-tv,
.factura-tv * {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
}

.factura-tile-invoice-shop {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.factura-row-top-invoice-shop {
  flex: 1;
  min-width: 0;
}

.factura-left-invoice-shop {
  display: flex;
  align-items: center;
  min-width: 0;
}

.factura-ico-invoice-shop {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

.factura-ico-invoice-shop i {
  font-size: 18px;
  opacity: 0.92;
}

.factura-nro-invoice-shop {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  height: 26px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: rgba(15, 23, 42, 0.92);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.factura-row-actions-invoice-shop {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.btn-view-invoice-shop,
.btn-copy-invoice-shop {
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    opacity 0.12s ease;
}

.btn-view-invoice-shop {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, #49a6ff, #0a84ff);
  box-shadow:
    0 6px 14px rgba(10, 132, 255, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.22) inset;
  cursor: pointer;
}

.btn-view-invoice-shop:hover {
  transform: translateY(-0.5px);
}
.btn-view-invoice-shop:active {
  transform: translateY(0);
  opacity: 0.96;
}

.btn-copy-invoice-shop {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(15, 23, 42, 0.92);
  cursor: pointer;
}

.btn-copy-invoice-shop:hover {
  background: rgba(255, 255, 255, 0.26);
}

.btn-view-invoice-shop i,
.btn-copy-invoice-shop i {
  font-size: 14px;
}

.btn-copy-invoice-shop.is-ok-invoice-shop {
  border-color: rgba(34, 197, 94, 0.45);
}
.btn-copy-invoice-shop.is-bad-invoice-shop {
  border-color: rgba(239, 68, 68, 0.45);
}

.factura-tile-invoice-shop.is-link-copied-invoice-shop .factura-nro-invoice-shop {
  border-color: rgba(34, 197, 94, 0.4);
}

.swal-popup-invoice-shop {
  border-radius: 20px !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.swal-html-invoice-shop {
  margin: 0 !important;
  padding: 0 !important;
}

.swal-close-invoice-shop {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset !important;
}

.swal-header-invoice-shop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 74px 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 480px) {
  .swal-title-invoice-shop {
    display: none !important;
  }
}

.swal-title-invoice-shop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 900;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.92);
}

.swal-titletext-invoice-shop {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swal-actions-invoice-shop {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn-swal-primary-invoice-shop,
.btn-swal-ghost-invoice-shop {
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    opacity 0.12s ease;
}

.btn-swal-primary-invoice-shop {
  color: #fff;
  background: linear-gradient(180deg, #49a6ff, #0a84ff);
  border-color: rgba(255, 255, 255, 0.18);
}

.btn-swal-primary-invoice-shop:hover {
  transform: translateY(-0.5px);
}
.btn-swal-primary-invoice-shop:active {
  transform: translateY(0);
  opacity: 0.96;
}

.btn-swal-ghost-invoice-shop {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(15, 23, 42, 0.92);
}

.btn-swal-ghost-invoice-shop:hover {
  background: rgba(255, 255, 255, 0.24);
}

.btn-swal-primary-invoice-shop i,
.btn-swal-ghost-invoice-shop i {
  font-size: 14px;
}

.swal-framewrap-invoice-shop {
  padding: 10px 12px 12px 12px;
}

.swal-frame-invoice-shop {
  width: 100%;
  height: min(64vh, 560px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.factura-empty-invoice-shop > span {
  color: orangered;
}
.factura-empty-invoice-shop > i {
  color: orangered;
}

.spinner-meta-invoice-shop {
  width: 20px;
  height: 20px;
  display: inline-block;
  object-fit: contain;
  opacity: 0.92;
  border-radius: 6px;
  animation:
    spin-meta-invoice-shop 1.05s linear infinite,
    pulse-meta-invoice-shop 1.4s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.25));
}

@keyframes spin-meta-invoice-shop {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse-meta-invoice-shop {
  0%,
  100% {
    opacity: 0.78;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner-meta-invoice-shop {
    animation: pulse-meta-invoice-shop 1.6s ease-in-out infinite;
  }
}
/* =============================== FIN FACTURA TIENDAS VIRTUALES =============================== */

/* CHIP BNA IMPORTADOR */
.swal2-popup.bna-import-popup {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;

  color: #0b1220 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 20px !important;

  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.18),
    0 2px 10px rgba(0, 0, 0, 0.08) !important;

  padding: 14px 14px 12px !important;
  width: min(780px, calc(100vw - 28px)) !important;
}

.swal2-popup.bna-import-popup .swal2-title {
  display: none !important;
}
.swal2-popup.bna-import-popup .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  color: #0b1220 !important;
}

.swal2-popup.bna-import-popup .swal2-icon.swal2-success {
  display: none !important;
}

.swal2-popup.bna-import-popup .swal2-actions {
  margin-top: 12px !important;
}
.swal2-popup.bna-import-popup .swal2-confirm {
  border: 0 !important;
  border-radius: 14px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  background: #0b5cff !important;
  color: #fff !important;
  box-shadow: 0 12px 22px rgba(11, 92, 255, 0.22) !important;
}

.bna-wrap {
  display: grid;
  gap: 12px;
}

.bna-head-title {
  font-size: 18px;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #0b1220;
}
.bna-head-sub {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bna-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 520;
  background: rgba(15, 23, 42, 0.045);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: #0b1220;
}
.bna-chip i {
  font-size: 14px;
  opacity: 0.85;
}

.bna-chip.is-ok {
  background: rgba(46, 204, 113, 0.1);
  border-color: rgba(46, 204, 113, 0.22);
  color: #0f5132;
}
.bna-chip.is-warn {
  background: rgba(255, 149, 0, 0.12);
  border-color: rgba(255, 149, 0, 0.24);
  color: #7a3b00;
}

.bna-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px) {
  .bna-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.bna-stat {
  border-radius: 16px;
  padding: 10px 10px 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.09);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}
.bna-stat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 520;
  color: rgba(11, 18, 32, 0.7);
}
.bna-stat-label i {
  font-size: 14px;
  opacity: 0.9;
}
.bna-stat-value {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0b1220;
}

.bna-stat.s-ok .bna-stat-value {
  color: #16a34a;
}
.bna-stat.s-info .bna-stat-value {
  color: #0b5cff;
}
.bna-stat.s-mid .bna-stat-value {
  color: #b45309;
}
.bna-stat.s-purple .bna-stat-value {
  color: #7c3aed;
}
.bna-stat.s-bad .bna-stat-value {
  color: #e11d48;
}
.bna-stat.s-warn .bna-stat-value {
  color: #c2410c;
}

.bna-collapses {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.94);
}
.bna-collapse + .bna-collapse {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.bna-collapse-btn {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  color: #0b1220;
}
.bna-collapse-btn:hover {
  background: rgba(15, 23, 42, 0.03);
}
.bna-collapse-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bna-collapse-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bna-chevron {
  opacity: 0.7;
  color: rgba(11, 18, 32, 0.78);
  font-size: 14px;
}
.bna-collapse-body {
  padding: 10px 12px 12px;
  background: rgba(15, 23, 42, 0.02);
}

.bna-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  color: #fff;
  border: 0;
}
.bna-pill.pill-ok {
  background: #22c55e;
}
.bna-pill.pill-info {
  background: #0b5cff;
}
.bna-pill.pill-purple {
  background: #af52de;
}
.bna-pill.pill-warn {
  background: #ff9f0a;
}
.bna-pill.pill-bad {
  background: #ff3b30;
}

.bna-list {
  display: grid;
  gap: 8px;
}
.bna-item {
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.09);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
}

.bna-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.bna-row-ic {
  width: 28px;
  height: 28px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.04);
}
.bna-row-ic i {
  font-size: 14px;
  opacity: 0.95;
}

.bna-row.is-ok .bna-row-ic {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.22);
  color: #16a34a;
}
.bna-row.is-info .bna-row-ic {
  background: rgba(11, 92, 255, 0.12);
  border-color: rgba(11, 92, 255, 0.22);
  color: #0b5cff;
}
.bna-row.is-warn .bna-row-ic {
  background: rgba(255, 159, 10, 0.14);
  border-color: rgba(255, 159, 10, 0.24);
  color: #b45309;
}
.bna-row.is-purple .bna-row-ic {
  background: rgba(175, 82, 222, 0.14);
  border-color: rgba(175, 82, 222, 0.24);
  color: #7c3aed;
}
.bna-row.is-bad .bna-row-ic {
  background: rgba(255, 59, 48, 0.12);
  border-color: rgba(255, 59, 48, 0.22);
  color: #ff3b30;
}

.bna-row-title {
  font-size: 13px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0b1220;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bna-row-sub {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 450;
  color: rgba(11, 18, 32, 0.62);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bna-txt {
  color: #0b1220;
}

.bna-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.04);
  color: rgba(11, 18, 32, 0.88);
  white-space: nowrap;
}

.bna-tag-order {
  background: rgba(11, 92, 255, 0.12);
  border-color: rgba(11, 92, 255, 0.22);
  color: #0b5cff;
}

.bna-tag-row {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.28);
  color: rgba(11, 18, 32, 0.78);
}

.bna-tag-total {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.22);
  color: #16a34a;
}

.bna-tag-upd {
  background: rgba(175, 82, 222, 0.14);
  border-color: rgba(175, 82, 222, 0.24);
  color: #7c3aed;
}

.bna-tag-warn {
  background: rgba(255, 159, 10, 0.14);
  border-color: rgba(255, 159, 10, 0.24);
  color: #b45309;
}

.bna-tag-err {
  background: rgba(255, 59, 48, 0.12);
  border-color: rgba(255, 59, 48, 0.22);
  color: #ff3b30;
}

.bna-empty {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: rgba(11, 18, 32, 0.7);
  font-size: 12px;
  font-weight: 520;
}
.bna-empty i {
  font-size: 16px;
  opacity: 0.7;
}

.bna-invalid {
  text-align: left;
}
.bna-invalid-title {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #0b1220;
}
.bna-invalid-sub {
  margin-top: 6px;
  font-weight: 450;
  font-size: 12px;
  color: rgba(11, 18, 32, 0.65);
}
.bna-invalid code {
  font-weight: 600;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 2px 6px;
  border-radius: 8px;
}
/* FIN CHIP BNA IMPORTADOR */

/* CHIP BNA */
.bna-chipi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font:
    600 12px/1 system-ui,
    -apple-system,
    "SF Pro Text",
    "SF Pro Display",
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  letter-spacing: 0.2px;
  color: #fff;
  background: rgba(88, 86, 214, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: none;
}
.bna-chipi i,
.bna-chipi .bi {
  color: #fff !important;
  opacity: 1 !important;
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  transform: translateY(0.5px);
  -webkit-text-fill-color: #fff;
}
.bna-chipi:hover {
  background: rgba(88, 86, 214, 0.92);
  border-color: rgba(255, 255, 255, 0.32);
}
/* FIN CHIP BNA */

/* SECCION CARRITO EN TIENDAS */
.logi-carrito-wrap {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(60, 60, 67, 0.18);
}

.logi-carrito-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.logi-carrito-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  gap: 6px;
}

.logi-carrito-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logi-carrito-count {
  font-size: 11px;
  color: rgba(60, 60, 67, 0.8);
}

.logi-carrito-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 74px;
  overflow: auto;
  padding-right: 2px;
}

.logi-carrito-grid::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.logi-carrito-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(60, 60, 67, 0.25);
}

.logi-sku-chip {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(60, 60, 67, 0.16);
  color: rgba(0, 0, 0, 0.82);
  white-space: nowrap;
}
.logi-sku-chip:hover {
  background: rgba(0, 0, 0, 0.09);
}

.logi-carrito-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: rgb(255 255 255);
  background: #dc3545;
  border: 1px solid orange;
}
/* FIN SECCION CARRITO EN TIENDAS */

/* DETALLE DE CARRITO BAPRO PARA FACTURACION */
.carrito-modal-box {
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(60, 60, 67, 0.18);
  background: rgba(255, 214, 10, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.carrito-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.carrito-modal-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 140px;
  overflow: auto;
  padding-right: 2px;
}

.carrito-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(60, 60, 67, 0.14);
  background: rgba(255, 255, 255, 0.55);
}

.carrito-modal-sku {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.02em;
  max-width: 62%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carrito-modal-price {
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.carrito-modal-total {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 900;
}
/* FIN DETALLE DE CARRITO BAPRO PARA FACTURACION */

/* COLLAPSE LOGISTICA EN TIENDAS */
details.logi-accordion > summary::-webkit-details-marker {
  display: none;
}
details.logi-accordion > summary {
  list-style: none;
}

.logi-summary.logi-summary--btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
}

.logi-summary-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.logi-summary-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logi-summary-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.logi-chevron {
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
  opacity: 0.75;
}

details.logi-accordion[open] .logi-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.logi-inside-head {
  margin-bottom: 0.75rem;
  padding: 0.75rem 0.75rem 0.65rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
}

.logi-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.logi-sku-line {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logi-subtitle {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logi-carrito-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.logi-carrito-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logi-carrito-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.5rem;
}

.logi-sku-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(13, 110, 253, 0.18);
  background: rgba(13, 110, 253, 0.08);
  font-size: 0.75rem;
  line-height: 1.2;
}
/* FIN COLLAPSE LOGISTICA EN TIENDAS */

.meta-spinner-img-mcsono {
  width: 72px;
  height: 72px;
  object-fit: contain;
  animation: spin-meta-mcsono 1s linear infinite;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12));
}

@keyframes spin-meta-mcsono {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.colecta-loading-overlay-meli {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.28));
  backdrop-filter: blur(2px);
}

.colecta-loading-overlay-meli.is-visible {
  display: flex;
}

.colecta-loading-overlay-meli .meta-spinner-main {
  width: 110px;
  height: 110px;
  object-fit: contain;
  animation: spin-meta-mcsono 1s linear infinite;
}

#countdownText {
  display: none !important;
}

.highlight {
  background-color: #fff3a3 !important;
  animation: blinkHighlightMeli 1s infinite;
}
@keyframes blinkHighlightMeli {
  0%,
  100% {
    background-color: #fff3a3;
  }
  50% {
    background-color: transparent;
  }
}

/* ====== Meli fixed header + modern load/search skin ====== */
.table-header-hidden-meli {
  display: none !important;
}

.table-head-fixed-shell-meli {
  position: sticky;
  top: 8px;
  z-index: 18;
  margin-bottom: 8px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(18, 28, 58, 0.92), rgba(28, 36, 74, 0.9));
  border: 1px solid rgba(132, 147, 255, 0.32);
  box-shadow: 0 10px 30px rgba(19, 34, 88, 0.3);
  overflow: hidden;
  font-family: "Signika Negative", sans-serif;
}

.table-head-fixed-grid-meli {
  display: grid;
  grid-template-columns: 11% 18% 17% 7% 30% 10% 7%;
  color: #f0f4ff;
  font-weight: 700;
  font-size: 0.88rem;
}

.table-head-fixed-grid-meli > div {
  padding: 12px 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-head-fixed-grid-meli > div:last-child {
  border-right: 0;
}

.search-static-meli {
  font-family: "Signika Negative", sans-serif;
}
.search-label-meli {
  display: block;
  margin-bottom: 6px;
  font-size: 0.86rem;
  letter-spacing: 0.2px;
  font-weight: 700;
  color: #42506b;
}
.search-input-container-static-meli {
  display: block !important;
  border: 1px solid rgba(111, 131, 255, 0.25);
  border-radius: 12px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 255, 0.95));
}
.search-input-container-static-meli .search-input-mcsono {
  border-radius: 10px;
  border: 1px solid rgba(122, 142, 255, 0.35);
}
.search-input-container-static-meli .search-results-mcsono {
  background: linear-gradient(180deg, rgba(243, 248, 255, 0.9), rgba(235, 242, 255, 0.8));
  border-radius: 10px;
  padding: 8px;
}

#scrollCueMeli.scroll-cue-tbl-meli {
  border-top: 1px solid rgba(90, 136, 255, 0.35);
  background: linear-gradient(
    180deg,
    rgba(37, 102, 245, 0.08),
    rgba(82, 179, 255, 0.2) 48%,
    rgba(214, 84, 205, 0.28)
  );
  color: #123;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 -6px 18px rgba(57, 116, 220, 0.14);
  font-family: "Signika Negative", sans-serif;
}
#scrollCueMeli .scroll-cue-icon-tbl-meli {
  color: #3169ff;
  filter: drop-shadow(0 2px 8px rgba(49, 105, 255, 0.5));
}

.table-head-fixed-shell-meli,
.table-head-fixed-grid-meli,
.table-viewport-tbl-meli,
.table-viewport-tbl-meli table,
.table-viewport-tbl-meli thead,
.table-viewport-tbl-meli tbody,
.table-viewport-tbl-meli th,
.table-viewport-tbl-meli td,
.table-viewport-tbl-meli .table-row-tbl-meli {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
}

.search-static-meli {
  border: 1px solid rgba(116, 137, 255, 0.22);
  border-radius: 14px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 18px rgba(66, 102, 183, 0.08);
}

.search-input-container-static-meli {
  border: 0;
  padding: 0;
  background: transparent;
}

.search-input-container-static-meli .search-input-mcsono {
  height: 40px;
  font-size: 0.86rem;
  font-weight: 650;
  color: #1f2c4b;
  border-radius: 12px;
  border: 1px solid rgba(111, 131, 255, 0.28);
  background: linear-gradient(180deg, #ffffff, #f5f8ff);
  box-shadow: 0 4px 12px rgba(74, 109, 191, 0.1);
}
.search-input-container-static-meli .search-input-mcsono:focus {
  border-color: rgba(87, 124, 255, 0.8);
  box-shadow:
    0 0 0 3px rgba(81, 123, 255, 0.2),
    0 7px 16px rgba(82, 127, 230, 0.16);
  background: #fff;
}

.result-found-card-meli {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(62, 174, 126, 0.25);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(233, 255, 244, 0.95), rgba(220, 249, 236, 0.94));
}
.result-found-copy-meli {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.search-static-meli {
  border: 1px solid #dfe3eb;
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: #fff;
  box-shadow: none;
}

.search-label-meli {
  font-weight: 600;
  color: #344054;
}

.search-input-container-static-meli {
  border: 0;
  background: transparent;
  padding: 0;
}

.search-input-container-static-meli .search-input-mcsono {
  font-size: 0.92rem;
  height: calc(1.5em + 0.75rem + 2px);
  border-radius: 0.25rem;
  box-shadow: none;
}

.search-input-container-static-meli .search-input-mcsono:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
}

#searchResults .alert {
  border-radius: 0.35rem;
}

.btn-copy-search-result-meli {
  min-width: 94px;
}

.no-data-rich-meli {
  padding: 24px 10px !important;
}
.no-data-rich-wrap-meli {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.no-data-gif-meli {
  width: 170px;
  max-width: 55vw;
  object-fit: contain;
}
.no-data-rich-title-meli {
  font-weight: 800;
  font-size: 1.05rem;
  color: #22314f;
}
.no-data-rich-sub-meli {
  font-weight: 600;
  color: #5f6e8f;
  font-size: 0.95rem;
}

#searchResults {
  min-height: 40px;
}
#searchResults .alert {
  color: #24324f;
  font-size: 0.86rem;
}
#searchResults .spinner-border {
  width: 0.95rem;
  height: 0.95rem;
}

/* ====== Tanda Search (reset limpio, Bootstrap vanilla) ====== */
/* La caja del buscador acompaña a los botones que tiene adentro: mismo radio
   (`--sl-border-radius-medium`, el vainilla de Shoelace) en vez de un 14px
   propio, que al lado de un botón vainilla se veía de otra familia. Y los
   colores por token: los hexadecimales fijos no tenían modo oscuro. */
.tanda-search-shell-meli {
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: var(--sl-border-radius-medium);
  background: var(--sl-color-neutral-0);
  padding: 0.75rem;
}

.tanda-search-label-meli {
  display: block;
  font-weight: 700;
  color: var(--sl-color-neutral-800);
  font-size: 0.95rem;
}

.tanda-search-container-meli {
  display: block !important;
}

.tanda-input-group-meli .tanda-search-input-meli {
  height: calc(1.5em + 0.75rem + 2px);
  border-radius: 0.25rem 0 0 0.25rem;
  background: #fff;
  border: 1px solid #ced4da;
  color: #1f2937;
  box-shadow: none;
}

.tanda-input-group-meli .tanda-search-input-meli:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
}

.tanda-clear-btn-meli {
  min-width: 92px;
}

.tanda-search-results-meli {
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Solo aparece cuando hay resultado de búsqueda */
.tanda-search-results-meli:empty {
  display: none !important;
  margin: 0 !important;
}

.tanda-search-results-meli .alert {
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
  color: #24324f;
}

.tanda-search-results-meli .spinner-border {
  width: 0.95rem;
  height: 0.95rem;
}

.no-data-rich-wrap-meli {
  padding-top: 8px;
}

/* tarjetas resultado búsqueda tandas (evita conflicto con .alert global) */
.tanda-result-card-meli {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px solid #dbe2ef;
  border-left-width: 4px;
  background: #ffffff;
  color: #24324f;
  font-size: 0.88rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.tanda-result-main-meli {
  display: flex;
  align-items: center;
  min-width: 0;
}
.tanda-result-loading-meli {
  background: #f8fafc;
  border-left-color: #94a3b8;
}
.tanda-result-success-meli {
  background: #ecfdf3;
  border-color: #bbe8cd;
  border-left-color: #16a34a;
  color: #14532d;
}
.tanda-result-success-meli i {
  color: #16a34a;
}
.tanda-result-warn-meli {
  background: #fffaeb;
  border-color: #fde9b8;
  border-left-color: #f59e0b;
  color: #713f12;
}
.tanda-result-warn-meli i {
  color: #d97706;
}
.tanda-result-error-meli {
  background: #fef2f2;
  border-color: #fbd1d1;
  border-left-color: #dc2626;
  color: #7f1d1d;
}
.tanda-result-error-meli i {
  color: #dc2626;
}
.tanda-result-info-meli {
  background: #eff6ff;
  border-color: #cdddfd;
  border-left-color: #3b82f6;
  color: #1e3a8a;
}
.tanda-result-info-meli i {
  color: #2563eb;
}

.tanda-result-main-meli {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.btn-copy-search-result-meli {
  min-width: 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(79, 122, 255, 0.35);
  background: linear-gradient(180deg, #ffffff, #eef3ff);
  color: #3258c4;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.btn-copy-search-result-meli:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(50, 88, 196, 0.18);
  color: #3258c4;
}

.tanda-meta-spinner-meli {
  width: 16px;
  height: 16px;
  object-fit: contain;
  animation: spin-meta-mcsono 1s linear infinite;
}

/* ===== SUGERENCIAS SKU por ID ===== */
#skuSuggestions-rules {
  /* respetá que tu JS usa display: none / block */
  margin-top: 10px !important;

  /* look macOS */
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(20, 20, 22, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);

  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;

  /* que quede por arriba dentro del modal */
  position: relative;
  z-index: 9999;
}

/* items de bootstrap list-group */
#skuSuggestions-rules .list-group-item {
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.92) !important;

  padding: 12px 12px;
  cursor: pointer;

  transition:
    background 0.14s ease,
    transform 0.14s ease;
}

/* hover suave tipo mac */
#skuSuggestions-rules .list-group-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* active / click */
#skuSuggestions-rules .list-group-item:active {
  transform: scale(0.995);
  background: rgba(255, 255, 255, 0.1) !important;
}

/* separadores finitos entre items (bootstrap mete borders) */
#skuSuggestions-rules .list-group-item + .list-group-item {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* si bootstrap agrega focus outline raro */
#skuSuggestions-rules .list-group-item:focus {
  outline: none;
  box-shadow: none;
}

/* scrollbar (webkit) */
#skuSuggestions-rules::-webkit-scrollbar {
  width: 10px;
}
#skuSuggestions-rules::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}
#skuSuggestions-rules::-webkit-scrollbar-track {
  background: transparent;
}

/* opcional: si tu modal es claro y querés versión clara automática */
@media (prefers-color-scheme: light) {
  #skuSuggestions-rules {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
  }
  #skuSuggestions-rules .list-group-item {
    color: rgba(0, 0, 0, 0.88) !important;
  }
  #skuSuggestions-rules .list-group-item:hover {
    background: rgba(0, 0, 0, 0.05) !important;
  }
  #skuSuggestions-rules .list-group-item + .list-group-item {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
}
/* ===== FIN SUGERENCIAS SKU por ID ===== */

/* === Viewer de imágenes para carruseles === */
.swal-image-viewer-popup-liquid {
  width: min(1100px, calc(100vw - 24px)) !important;
  padding: 0.75rem !important;
}

.swal-image-viewer-shell-liquid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.swal-image-viewer-toolbar-liquid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-right: 44px;
}

.swal-image-viewer-title-liquid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #284b8f;
}

.swal-image-viewer-actions-liquid {
  display: flex;
  align-items: center;
  gap: 8px;
}

.swal-image-viewer-btn-liquid {
  border: 1px solid rgba(100, 149, 237, 0.35);
  background: #fff;
  color: cornflowerblue;
  border-radius: 12px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.swal-image-viewer-btn-liquid:hover {
  background: rgba(100, 149, 237, 0.08);
  box-shadow: 0 8px 20px rgba(100, 149, 237, 0.16);
  transform: translateY(-1px);
}

.swal-image-viewer-stage-liquid {
  position: relative;
  width: 100%;
  height: min(72vh, 760px);
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 35%),
    linear-gradient(135deg, #0f172a, #1e293b 55%, #111827);
  touch-action: none;
  user-select: none;
}

.swal-image-viewer-img-liquid {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: min(92%, 980px);
  max-height: 92%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  border-radius: 14px;
}

.swal-image-viewer-hint-liquid {
  font-size: 0.9rem;
  color: #5f6f89;
  text-align: center;
}

.swal-image-viewer-popup-liquid .swal2-close {
  top: 10px !important;
  right: 10px !important;
}

body.image-viewer-open #scrollToTop,
body.image-viewer-open #scrollToDown {
  display: none !important;
}

.btn-logout-ios {
  border: 1px solid rgba(196, 181, 253, 0.55) !important;
  border-radius: 999px !important;
  padding: 0.62rem 1.08rem !important;
  font-weight: 800 !important;
  font-family: "Inter", sans-serif !important;
  color: #fff !important;
  background: linear-gradient(180deg, #8b5cf6, #7c3aed) !important;
  box-shadow: none !important;
  letter-spacing: 0.01em;
}
.btn-logout-ios:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}
.logout-ios-info {
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.9));
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  color: #475569;
  line-height: 1.25;
  max-width: 360px;
  text-align: left;
}
.logout-ios-info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.42rem;
}
.logout-ios-info-row + .logout-ios-info-row {
  margin-top: 0.32rem;
}
.logout-ios-info-row.is-active {
  color: #0f766e;
}

@media (max-width: 768px) {
  .swal-image-viewer-stage-liquid {
    height: 62vh;
  }

  .swal-image-viewer-toolbar-liquid {
    align-items: stretch;
  }

  .swal-image-viewer-actions-liquid {
    width: 100%;
    justify-content: flex-end;
  }
}

.bna-card-loading {
  pointer-events: none;
}

.bna-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.bna-card-overlay-content {
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
  color: #fff;
  text-align: center;
}

.bna-card-overlay-text {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.bna-fact-users-trigger {
  width: 48px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bna-users-shell,
.bna-users-shell * {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.bna-users-shell {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 28%),
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.1), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%);
}

.bna-users-app {
  display: grid;
  gap: 16px;
}

.bna-users-inline-status {
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.bna-users-inline-status.is-info {
  color: #1d4ed8;
  background: rgba(219, 234, 254, 0.82);
  border-color: rgba(59, 130, 246, 0.22);
}

.bna-users-inline-status.is-success {
  color: #047857;
  background: rgba(209, 250, 229, 0.88);
  border-color: rgba(16, 185, 129, 0.24);
}

.bna-users-inline-status.is-error {
  color: #b91c1c;
  background: rgba(254, 226, 226, 0.9);
  border-color: rgba(239, 68, 68, 0.24);
}

.bna-users-editor,
.bna-users-list-panel {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}

.bna-users-layout {
  display: grid;
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
  gap: 20px;
}

.bna-users-editor,
.bna-users-list-panel {
  padding: 22px;
}

.bna-users-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 1.08rem;
  font-weight: 800;
  color: #0f172a;
}

.bna-users-form {
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 28px rgba(15, 23, 42, 0.06);
  padding: 18px;
}

.bna-users-form label {
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.bna-users-form .form-control {
  min-height: 50px;
  border-radius: 14px;
  border-color: #cbd5e1;
  font-size: 1rem;
  box-shadow: none;
}

.bna-users-form .form-control:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.bna-users-form .form-text {
  display: block;
  margin-top: 10px;
  color: #64748b !important;
  font-size: 0.92rem;
}

.bna-users-form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.bna-users-form-actions .btn {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 700;
}

.bna-users-list {
  display: grid;
  gap: 12px;
}

.bna-users-confirm-panel {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(59, 130, 246, 0.16);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 14px 30px rgba(37, 99, 235, 0.08);
}

.bna-users-confirm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.bna-users-confirm-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.bna-users-confirm-title {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
}

.bna-users-confirm-text {
  margin-top: 2px;
  color: #475569;
  font-size: 0.92rem;
}

.bna-users-confirm-form .form-control {
  min-height: 48px;
  border-radius: 14px;
  border-color: #bfdbfe;
  box-shadow: none;
}

.bna-users-confirm-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.bna-users-confirm-feedback {
  min-height: 22px;
  margin-top: 10px;
  color: #dc2626;
  font-size: 0.9rem;
  font-weight: 700;
}

.bna-users-empty {
  padding: 18px;
  text-align: center;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.92);
  color: #64748b;
  font-weight: 700;
  border: 1px dashed rgba(148, 163, 184, 0.32);
}

.bna-user-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  padding: 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.bna-user-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bna-user-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.bna-user-name {
  font-weight: 800;
  color: #0f172a;
}

.bna-user-pass-pill {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.85rem;
  font-weight: 700;
}

.bna-user-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.bna-user-actions .btn {
  min-height: 40px;
  border-radius: 12px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .bna-users-layout {
    grid-template-columns: 1fr;
  }
}
.af-device-row {
  border: 1px solid #d8e1ef;
  border-radius: 16px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.55rem;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.af-device-row.is-superadmin {
  border-color: #f3c46d;
  background: linear-gradient(180deg, #fff9ed, #fff3d8);
}
.af-device-trash,
.af-device-edit {
  border-radius: 999px !important;
}

.posventa-search-clear {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  border: 1px solid #ced4da;
  border-left: 0;
  border-right: 0;
  background: #ffffff;
  color: #64748b;
  box-shadow: none !important;
}

.posventa-search-clear:hover,
.posventa-search-clear:focus {
  background: #f8fafc;
  color: #0f172a;
}

.posventa-search-clear[hidden] {
  display: none !important;
}

.posventa-full-search-panel {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "Rubik", sans-serif;
}

.posventa-full-search-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0;
  color: #1f2937;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.posventa-full-search-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.posventa-full-search-slider {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  transition: background 0.2s ease;
}

.posventa-full-search-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
  transition: transform 0.2s ease;
}

.posventa-full-search-switch input:checked + .posventa-full-search-slider {
  background: #2563eb;
}

.posventa-full-search-switch input:checked + .posventa-full-search-slider::after {
  transform: translateX(22px);
}

.posventa-full-search-hint,
.posventa-full-search-status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: min(100%, 760px);
  padding: 9px 12px;
  border-radius: 12px;
  background: #eef6ff;
  border: 1px solid #cfe2ff;
  color: #1e3a8a;
  font-size: 0.88rem;
  line-height: 1.35;
}

.posventa-full-search-status {
  background: #f8fafc;
  border-color: #dbe3f0;
  color: #475569;
  font-weight: 700;
}

.posventa-full-search-status[hidden] {
  display: none !important;
}

.posventa-full-search-status.is-warning {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.posventa-full-search-status.is-success {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #166534;
}

.posventa-full-search-status.is-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.posventa-full-search-empty {
  text-align: center;
  padding: 22px !important;
  color: #475569;
  font-weight: 700;
  background: #f8fafc;
}

/* iOS-style switch para activar búsqueda por Shipping ID */
.meli-shipping-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 4px 4px;
  font-family: "Inter", sans-serif;
  user-select: none;
}

.meli-shipping-toggle__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: -0.01em;
}

.meli-shipping-toggle__hint {
  font-size: 0.72rem;
  font-weight: 500;
  color: #94a3b8;
  margin-left: 4px;
}

.ios-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex: 0 0 44px;
}

.ios-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ios-switch__slider {
  position: absolute;
  inset: 0;
  background: #e5e7eb;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.ios-switch__slider::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.ios-switch input:checked + .ios-switch__slider {
  background: #34c759;
}

.ios-switch input:checked + .ios-switch__slider::before {
  transform: translateX(18px);
}

.ios-switch input:focus-visible + .ios-switch__slider {
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.25);
}

/* =====================================================================
   MELI HERO — Empty state estilo Mercado Libre (degradado + pills verdes)
   ===================================================================== */
/* Hero v5 — lista iOS Settings: card blanco con filas separadas, sin gif */
.meli-hero {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 20px;
  padding: 4px 16px 16px;
  background: transparent;
  border: 0;
}

.meli-hero__head {
  text-align: center;
  margin-bottom: 16px;
}

.meli-hero__tag {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #92400e;
  background: linear-gradient(180deg, #fff7a8, #ffe600);
  border: 1px solid rgba(202, 138, 4, 0.35);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.meli-hero__title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #0f172a;
}

.meli-hero__sub {
  margin: 6px auto 0;
  max-width: 44ch;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: #64748b;
}

.meli-hero__card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.meli-hero__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
  transition: background 0.14s ease;
}

.meli-hero__row + .meli-hero__row {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.meli-hero__row:hover {
  background: #f8fafc;
}

.meli-hero__row-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.05rem;
  color: #fff;
}

.meli-hero__row-icon--blue {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
}

.meli-hero__row-icon--amber {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

.meli-hero__row-icon--green {
  background: linear-gradient(180deg, #22c55e, #16a34a);
}

.meli-hero__row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meli-hero__row-title {
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  line-height: 1.15;
}

.meli-hero__row-desc {
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.25;
}

.meli-hero__row-meta {
  flex: 0 0 auto;
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: #94a3b8;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .meli-hero {
    padding: 2px 10px 14px;
    margin-bottom: 14px;
  }

  .meli-hero__head {
    margin-bottom: 12px;
  }

  .meli-hero__title {
    font-size: 1.32rem;
  }

  .meli-hero__sub {
    font-size: 0.84rem;
  }

  .meli-hero__row {
    padding: 12px;
    gap: 10px;
  }

  .meli-hero__row-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
  }

  .meli-hero__row-title {
    font-size: 0.86rem;
  }

  .meli-hero__row-desc {
    font-size: 0.74rem;
  }

  .meli-hero__row-meta {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
}

/* =====================================================================
   MELI SEARCH PLACEHOLDER — Empty state inline compacto.
   ===================================================================== */
.meli-search-placeholder {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 0 0 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: none !important;
}

.meli-search-placeholder::before,
.meli-search-placeholder::after {
  display: none !important;
}

.meli-intro--inline {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 14px;
  padding: 4px 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.meli-intro__row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.meli-intro__icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: contain;
  border-radius: 14px;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(255, 221, 51, 0.28),
    rgba(255, 221, 51, 0) 70%
  );
}

.meli-intro__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meli-intro__heading {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.meli-intro__sub {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
  color: #64748b;
}

.meli-intro__keys {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  color: #475569;
}

.meli-intro__keys li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.meli-intro__keys li + li {
  position: relative;
  padding-left: 14px;
}

.meli-intro__keys li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #cbd5e1;
  transform: translateY(-50%);
}

.meli-intro__keys span {
  font-weight: 700;
  color: #0f172a;
}

.meli-intro__keys em {
  font-style: normal;
  font-weight: 500;
  color: #94a3b8;
}

@media (max-width: 767px) {
  .meli-intro--inline {
    padding: 2px 12px 10px;
    gap: 8px;
    max-width: 100%;
  }

  .meli-intro__row {
    gap: 10px;
  }

  .meli-intro__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
  }

  .meli-intro__heading {
    font-size: 0.96rem;
  }

  .meli-intro__sub {
    font-size: 0.8rem;
  }

  .meli-intro__keys {
    font-size: 0.72rem;
    gap: 4px 10px;
  }

  .meli-intro__keys li + li {
    padding-left: 10px;
  }
}

/* =====================================================================
   MELI HERO v6 - visual con gif y guia compacta estilo Mercado Libre.
   ===================================================================== */
.meli-hero {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto 20px;
  padding: 0 10px;
  background: transparent;
  border: 0;
}

.meli-hero__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  padding: 26px 32px;
  border-radius: 24px;
  border: 1px solid rgba(65, 137, 230, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 241, 89, 0.16), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #fffef8 0%, #ffffff 62%, #f8fbff 100%);
  box-shadow:
    0 16px 42px rgba(65, 137, 230, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}

.meli-hero__panel::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(65, 137, 230, 0.16), rgba(65, 137, 230, 0));
  pointer-events: none;
}

.meli-hero__panel::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 241, 89, 0.3), rgba(255, 241, 89, 0));
  pointer-events: none;
}

.meli-hero__visual,
.meli-hero__content {
  position: relative;
  z-index: 1;
}

.meli-hero__visual {
  min-height: 264px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 241, 89, 0.42), rgba(255, 241, 89, 0) 56%),
    linear-gradient(180deg, rgba(65, 137, 230, 0.08), rgba(255, 255, 255, 0.86));
  border: 1px solid rgba(65, 137, 230, 0.12);
  overflow: hidden;
}

.meli-hero__visual.is-loading .meli-search-placeholder__gif {
  opacity: 0;
}

.meli-hero__visual.is-error::after {
  content: "No se pudo cargar la animacion";
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748b;
}

.meli-hero .meli-search-placeholder__gif {
  width: min(100%, 288px);
  max-width: 288px;
  height: auto;
  display: block;
  transform: scale(1.34);
  transform-origin: center;
  filter: drop-shadow(0 18px 22px rgba(65, 137, 230, 0.12));
  opacity: 1;
}

.meli-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}

.meli-hero__tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff159;
  border: 1px solid rgba(191, 143, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #333;
}

.meli-hero__title {
  margin: 0;
  max-width: 13ch;
  font-family: "Inter", sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 0.96;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #0f172a;
}

.meli-hero__sub {
  margin: 0;
  max-width: 48ch;
  font-family: "Inter", sans-serif;
  font-size: 0.94rem;
  line-height: 1.48;
  font-weight: 500;
  color: #5b6b85;
}

.meli-hero__quick {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.meli-hero__quick-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  padding: 14px 14px 13px;
  min-height: 116px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92);
}

.meli-hero__quick-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.meli-hero__quick-item--blue .meli-hero__quick-icon {
  background: linear-gradient(180deg, #3483fa, #2968c8);
}

.meli-hero__quick-item--amber .meli-hero__quick-icon {
  background: linear-gradient(180deg, #ffcb47, #ff9f0a);
}

.meli-hero__quick-item--green .meli-hero__quick-icon {
  background: linear-gradient(180deg, #22c55e, #17a34a);
}

.meli-hero__quick-label,
.meli-hero__quick-help {
  grid-column: 2;
}

.meli-hero__quick-label {
  margin-top: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  line-height: 1.15;
  font-weight: 800;
  color: #0f172a;
}

.meli-hero__quick-help {
  margin-top: -4px;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 500;
  color: #64748b;
}

@media (max-width: 991px) {
  .meli-hero__panel {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 20px;
  }

  .meli-hero__visual {
    min-height: 190px;
  }

  .meli-hero__content {
    align-items: center;
    text-align: center;
  }

  .meli-hero__title,
  .meli-hero__sub {
    max-width: 100%;
  }

  .meli-hero__quick {
    grid-template-columns: 1fr;
  }

  .meli-hero__quick-item {
    width: 100%;
    min-height: 0;
  }

  .meli-hero .meli-search-placeholder__gif {
    width: min(100%, 220px);
    max-width: 220px;
    transform: scale(1.18);
  }
}

@media (max-width: 767px) {
  .meli-hero {
    margin-bottom: 10px;
    padding: 0;
  }

  .meli-hero__panel {
    padding: 12px 10px 10px;
    border-radius: 18px;
    gap: 10px;
  }

  .meli-hero__visual {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .meli-hero .meli-search-placeholder__gif {
    width: min(100%, 104px);
    max-width: 104px;
    transform: none;
    filter: drop-shadow(0 10px 16px rgba(65, 137, 230, 0.1));
  }

  .meli-hero__visual.is-error::after {
    bottom: -12px;
    font-size: 0.68rem;
  }

  .meli-hero__tag {
    min-height: 24px;
    padding: 0 9px;
    font-size: 0.62rem;
  }

  .meli-hero__title {
    max-width: 100%;
    font-size: 1.18rem;
    line-height: 1.02;
    letter-spacing: -0.04em;
  }

  .meli-hero__sub {
    max-width: 28ch;
    font-size: 0.72rem;
    line-height: 1.32;
  }

  .meli-hero__quick-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 10px 11px;
    border-radius: 14px;
  }

  .meli-hero__quick-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 0.84rem;
  }

  .meli-hero__quick-label {
    font-size: 0.78rem;
  }

  .meli-hero__quick-help {
    font-size: 0.68rem;
    line-height: 1.22;
    margin-top: -2px;
  }
}

/* =====================================================================
   BANNER: carrito de compra (Pedido/Pack ID con ventas relacionadas)
   ===================================================================== */
.meli-cart-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 35px;
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ecfeff, #ffffff);
  border: 1px solid rgba(14, 165, 233, 0.28);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-family: "Inter", sans-serif;
  color: #0f172a;
}

.meli-cart-banner[hidden] {
  display: none !important;
}

.meli-cart-banner__icon {
  font-size: 1.4rem;
  color: #0284c7;
  flex: 0 0 auto;
}

.meli-cart-banner__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}

.meli-cart-banner__body strong {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.meli-cart-banner__sub {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
}

#meliCartBannerCount {
  font-weight: 800;
  color: #0369a1;
}

@media (max-width: 767px) {
  .meli-cart-banner {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 12px;
  }

  .meli-cart-banner__icon {
    font-size: 1.2rem;
  }

  .meli-cart-banner__body strong {
    font-size: 0.86rem;
  }

  .meli-cart-banner__sub {
    font-size: 0.74rem;
  }
}

/* =====================================================================
   MELI HERO COMPACTO — empty-state estilo Mercado Libre.
   Una sola fila: header (tag amarillo + titulo + subtitulo) | 3 chips
   horizontales con icono coloreado + label + helper. Sin gif gigante.
   Override del .meli-hero__panel previo.
   ===================================================================== */
.meli-hero--compact {
  position: relative;
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 auto 16px !important;
  padding: 18px 22px 16px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.55fr);
  gap: 22px;
  align-items: center;
}

/* Acento amarillo Meli arriba */
.meli-hero--compact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #fff159 0%, #ffe600 50%, #fff159 100%);
}

/* Sutil glow amarillo en la esquina */
.meli-hero--compact::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 0, 0.18), rgba(255, 230, 0, 0) 70%);
  pointer-events: none;
}

.meli-hero--compact .meli-hero__head {
  position: relative;
  z-index: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meli-hero--compact .meli-hero__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff159;
  border: 1px solid rgba(191, 143, 0, 0.32);
  font-family: "Inter", sans-serif;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2d2d2d;
  margin-bottom: 2px;
}

.meli-hero--compact .meli-hero__title {
  margin: 0;
  max-width: none;
  font-family: "Inter", sans-serif;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: #0f172a;
}

.meli-hero--compact .meli-hero__sub {
  margin: 0;
  max-width: 44ch;
  font-family: "Inter", sans-serif;
  font-size: 0.84rem;
  line-height: 1.4;
  font-weight: 500;
  color: #64748b;
}

.meli-hero__cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.meli-hero__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.meli-hero__chip:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.18);
}

.meli-hero__chip-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.meli-hero__chip--blue .meli-hero__chip-icon {
  background: linear-gradient(180deg, #3483fa, #2968c8);
}

.meli-hero__chip--amber .meli-hero__chip-icon {
  background: linear-gradient(180deg, #ffcb47, #ff9f0a);
}

.meli-hero__chip--green .meli-hero__chip-icon {
  background: linear-gradient(180deg, #22c55e, #17a34a);
}

.meli-hero__chip-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.meli-hero__chip-body strong {
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.meli-hero__chip-body span {
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.2;
}

@media (max-width: 991px) {
  .meli-hero--compact {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px 14px 12px !important;
  }

  .meli-hero--compact .meli-hero__head {
    text-align: center;
    align-items: center;
  }

  .meli-hero--compact .meli-hero__sub {
    margin: 0 auto;
  }

  .meli-hero--compact .meli-hero__tag {
    align-self: center;
  }
}

@media (max-width: 600px) {
  .meli-hero__cards {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .meli-hero__chip {
    padding: 9px 11px;
  }
}

/* ============================================================
   COLECTA MELI v2 (-cmeli) — tabla agrupada, escaneo, cierre
   ============================================================ */

.cmeli-table {
  margin-top: 0;
  background: #fff;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

/* Vacío real (sin header ni filas): sin borde = sin línea suelta */
.cmeli-table:empty {
  display: none !important;
}

/* Cabecera de la tabla */
.cmeli-thead {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) max-content max-content;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid rgba(203, 213, 225, 0.9);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}

.cmeli-thead i {
  color: #94a3b8;
  margin-right: 4px;
}

.cmeli-thead-img {
  text-align: center;
}

#cmeliSpinner.meli-search-spinner {
  margin-top: 4px;
}

.cmeli-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 240px;
  text-align: center;
  padding: 34px 24px 38px;
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.35), rgba(255, 255, 255, 0.95));
  border-radius: 16px;
}
.cmeli-empty-coffee {
  width: 150px;
  max-width: 50vw;
  border-radius: 18px;
  filter: drop-shadow(0 8px 18px rgba(251, 191, 36, 0.35));
  margin-bottom: 4px;
}
.cmeli-empty-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: #92400e;
  letter-spacing: 0.2px;
  margin-top: 6px;
}
.cmeli-empty-sub {
  color: #78716c;
  font-size: 0.9rem;
  max-width: 480px;
  line-height: 1.4;
}

/* Empty state dentro de modales colecta (sin datos) */
.cmeli-modal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 28px 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.55), rgba(255, 255, 255, 0.95));
  border-radius: 16px;
}
.cmeli-modal-empty i {
  font-size: 2.2rem;
  color: #94a3b8;
  filter: drop-shadow(0 6px 14px rgba(148, 163, 184, 0.35));
}
.cmeli-modal-empty strong {
  color: #334155;
  font-size: 1.02rem;
}
.cmeli-modal-empty span {
  color: #64748b;
  font-size: 0.88rem;
  max-width: 420px;
  line-height: 1.4;
}

.cmeli-group {
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}
.cmeli-group:last-child {
  border-bottom: none;
}

.cmeli-group-cart {
  position: relative;
  border-left: 4px solid #8b5cf6;
  background: rgba(139, 92, 246, 0.04);
}
.cmeli-cart-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0 12px;
  padding: 2px 12px;
  border-radius: 6px;
  background: linear-gradient(145deg, #8b5cf6, #7c3aed);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
}

.cmeli-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) max-content max-content;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
}
.cmeli-row + .cmeli-row {
  border-top: 1px dashed rgba(226, 232, 240, 0.9);
}
.cmeli-row.is-prep {
  background: rgba(22, 163, 74, 0.05);
}

.cmeli-row-img {
  position: relative;
  width: 48px;
  height: 48px;
}
.cmeli-row-img img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #fff;
}
.cmeli-qty {
  position: absolute;
  right: -6px;
  bottom: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #0f172a;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.cmeli-row-main {
  min-width: 0;
}
.cmeli-row-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmeli-sku {
  color: #2563eb;
  font-weight: 800;
}
.cmeli-row-sub {
  font-size: 0.78rem;
  color: #64748b;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cmeli-row-sub a {
  color: #2563eb;
  font-weight: 600;
}
.cmeli-row-time {
  color: #94a3b8;
}

.cmeli-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.cmeli-pill-ok {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}
.cmeli-pill-pend {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

/* Badge de bultos por fila (estilo Control Camión: verde 1 / rojo multi) */
.cmeli-bultos-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 9px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.cmeli-bultos-badge.is-single {
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
  border: 1px solid rgba(25, 135, 84, 0.3);
}

.cmeli-bultos-badge.is-multi {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.35);
}

/* Contador % preparados al 100% */
#cmeliTotalPrep.is-done {
  color: #16a34a;
}

/* ---------- incidencias en fila: cancelado / reclamo ---------- */
.cmeli-row.has-issue {
  position: relative;
}

.cmeli-row.is-issue-cancelado {
  background: repeating-linear-gradient(
    -45deg,
    rgba(220, 38, 38, 0.08),
    rgba(220, 38, 38, 0.08) 12px,
    rgba(220, 38, 38, 0.16) 12px,
    rgba(220, 38, 38, 0.16) 24px
  ) !important;
  border-left: 4px solid #dc2626;
}

.cmeli-row.is-issue-reclamo {
  background: rgba(245, 158, 11, 0.1) !important;
  border-left: 4px solid #f59e0b;
}

/* Incidencias en fila: chips compactos integrados en la columna Estado
   (apilados bajo el pill Preparado/Pendiente — sin overlays absolutos) */
.cmeli-row-state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.cmeli-issue-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.cmeli-issue-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cmeli-issue-chip.is-cancelado {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  animation: cmeli-issue-pulse 1.4s ease-in-out infinite;
}
.cmeli-issue-chip.is-reclamo {
  background: #ffedd5;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.cmeli-issue-chip.is-separada {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.cmeli-sep-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border-radius: 6px;
  border: 1px solid rgba(21, 128, 61, 0.35);
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 2px 6px rgba(22, 163, 74, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}
.cmeli-sep-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 10px rgba(22, 163, 74, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  filter: brightness(1.04);
}
.cmeli-sep-btn:active {
  transform: translateY(0);
}
.cmeli-row.is-separada {
  opacity: 0.82;
}

@keyframes cmeli-issue-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* ---------- incidencia a nivel CARRITO (todo el envío afectado) ---------- */
.cmeli-group-issue.is-cancelado {
  border-left-color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.04);
}

.cmeli-group-issue.is-reclamo {
  border-left-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.05);
}

.cmeli-cart-badge.is-cancelado {
  background: linear-gradient(145deg, #ef4444, #dc2626);
  animation: cmeli-issue-pulse 1.4s ease-in-out infinite;
}

.cmeli-cart-badge.is-reclamo {
  background: linear-gradient(145deg, #f59e0b, #d97706);
}

.cmeli-group-issue-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px 0;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.cmeli-group-issue-banner.is-cancelado {
  background: #dc2626;
  color: #fff;
  animation: cmeli-issue-pulse 1.4s ease-in-out infinite;
}

.cmeli-group-issue-banner.is-reclamo {
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.cmeli-del {
  font-size: 1rem;
  color: #dc2626;
}

/* ---------- escaneo ---------- */
.cmeli-scan {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* El escáner de Ingreso / Egreso. Era un <div> con borde azul y un <input>
   pelado adentro; ahora es un <sl-input size="large"> con el ícono en el slot
   `prefix`. Los tokens van en el HOST y no en ::part(base): así bajan por
   herencia a TODO el shadow root del componente. */
.cmeli-scan-input {
  --sl-input-border-color: var(--sl-color-primary-600);
  --sl-input-border-color-hover: var(--sl-color-primary-600);
  --sl-input-font-size-large: 1.2rem;
  --sl-input-font-weight: 700;
}

.cmeli-scan-input::part(base) {
  border-width: 2px;
}

/* Números tabulares: sin esto, cada dígito que entra corre el resto y el
   número parece bailar mientras se escanea. */
.cmeli-scan-input::part(input) {
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.cmeli-scan-input::part(prefix) {
  font-size: 1.3rem;
  color: var(--sl-color-primary-600);
}

.cmeli-scan-card {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid;
  align-items: center;
}
.cmeli-scan-card img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

/* Ícono de carrito (card de escaneo cuando el envío es multi-producto) */
.cmeli-scan-carticon {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #8b5cf6, #6d28d9);
  color: #fff;
  font-size: 2.1rem;
}

.cmeli-scan-carticon span {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  border: 2px solid #fff;
}
.cmeli-scan-card.is-ok {
  background: #ecfdf3;
  border-color: #bbe8cd;
}
.cmeli-scan-card.is-warn {
  background: #fffaeb;
  border-color: #fde9b8;
}
.cmeli-scan-card.is-err {
  background: #fef2f2;
  border-color: #fbd1d1;
}
.cmeli-scan-card-title {
  font-weight: 800;
  color: #0f172a;
}
.cmeli-scan-card-meta {
  font-size: 0.84rem;
  color: #64748b;
}
.cmeli-scan-card-msg {
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 4px;
}

.cmeli-scan-cart {
  border: 1px solid rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.06);
  border-radius: 14px;
  padding: 10px 14px;
}
.cmeli-scan-cart-head {
  font-weight: 800;
  color: #6d28d9;
  margin-bottom: 8px;
}
/* padding extra para que el check que sobresale no se recorte
   por el overflow del scroll horizontal */
.cmeli-scan-cart-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 10px 4px 6px;
}
.cmeli-cart-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 2px solid rgba(148, 163, 184, 0.5);
  background: #fff;
  opacity: 0.65;
}
.cmeli-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.cmeli-cart-thumb.is-ok {
  border-color: #16a34a;
  opacity: 1;
}
.cmeli-cart-check {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: #16a34a;
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
}

.cmeli-scan-counters {
  display: flex;
  gap: 10px;
}

/* `sl-tag` NO separa lo que va ranurado adentro: el ícono queda pegado al
   número. La separación va en ::part(base) —el gap del propio componente—, no
   con un &nbsp; en el markup. Misma corrección que `.ccm-tabla sl-tag` del
   modal de Control Camión. */
.cmeli-scan-counters sl-tag::part(base),
.cmeli-hist-chip::part(base) {
  gap: 0.35rem;
  border-radius: 6px;
}

.cmeli-scan-history small {
  color: var(--sl-color-neutral-500);
}

.cmeli-hist-chip {
  margin: 4px 6px 0 0;
}

/* Cerrar colecta: stat chips + acciones */
/* Las tarjetitas de números del cierre. `.cmeli-cierre`, `.cmeli-cierre-stats`
   y `.cmeli-cierre-actions` estaban DUPLICADAS acá y más abajo; quedan las de
   abajo, que son las del rediseño en Shoelace. `.cmeli-cierre-copy` se fue: no
   la usaba ningún markup. */
.cmeli-cierre-stat {
  --stat-color: var(--sl-color-primary-600);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px 10px 16px;
  /* Fondo PLANO, sin degradado ni tinte: el color de cada tarjeta lo dice la
     barrita de la izquierda y el ícono, que alcanza. El fondo sale del panel
     del tema y no de un blanco fijo — con `#ffffff` a mano estas tarjetas
     quedaban blancas adentro de un modal oscuro. */
  background: var(--sl-color-neutral-50);
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: 12px;
  overflow: hidden;
}

.cmeli-cierre-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--stat-color);
}

.cmeli-cierre-stat sl-icon {
  color: var(--stat-color);
  font-size: 0.95rem;
}

.cmeli-cierre-stat b {
  font-family: "Space Grotesk", -apple-system, sans-serif;
  font-size: 1.5rem;
  line-height: 1.05;
  color: var(--sl-color-neutral-900);
}

.cmeli-cierre-stat span {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sl-color-neutral-500);
}

.cmeli-cierre-stat.is-etiq {
  --stat-color: var(--sl-color-primary-600);
}
.cmeli-cierre-stat.is-unid {
  --stat-color: var(--sl-color-cyan-600, #0891b2);
}
.cmeli-cierre-stat.is-prep {
  --stat-color: var(--sl-color-success-600);
}
.cmeli-cierre-stat.is-pend {
  --stat-color: var(--sl-color-danger-600);
}

/* ── Cerrar colecta ───────────────────────────────────────────────────────
   Rehecho en Shoelace (21-08-2026): el encabezado es un <sl-card>, la barra un
   <sl-progress-bar> —era un div con el ancho puesto a mano— y la nota un
   <sl-alert>. Los hex se fueron a tokens: el callout ámbar sobre panel oscuro
   quedaba ilegible. */
.cmeli-cierre {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cmeli-cierre-hero::part(base) {
  border-radius: 12px;
}

.cmeli-cierre-hero-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.cmeli-cierre-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.cmeli-cierre-hero-copy strong {
  font-family: "Space Grotesk", -apple-system, sans-serif;
  font-size: 1.02rem;
  color: var(--sl-color-neutral-900);
}

.cmeli-cierre-hero-copy span {
  font-size: 0.8rem;
  color: var(--sl-color-neutral-500);
  font-weight: 600;
  text-transform: capitalize;
}

/* --indicator-color es la custom property del componente; en verde cuando ya
   está todo preparado. */
.cmeli-cierre-progress {
  --height: 8px;
  --track-color: var(--sl-color-neutral-100);
  --indicator-color: var(--sl-color-warning-600);
}

.cmeli-cierre-progress.is-ok {
  --indicator-color: var(--sl-color-success-600);
}

.cmeli-cierre-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

/* En mobile 4 columnas dejan los números en 60 px y el rótulo partido. */
@media (max-width: 560px) {
  .cmeli-cierre-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cmeli-cierre-note::part(message) {
  font-size: 0.88rem;
  line-height: 1.45;
}

.cmeli-cierre-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- historial de colectas: cards ---------- */
.cmeli-hist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.cmeli-hist-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  text-align: left;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), #ffffff 55%);
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  cursor: pointer;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
}
.cmeli-hist-card:hover {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}
.cmeli-hist-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cmeli-hist-fecha {
  font-weight: 700;
  color: #0f172a;
}
.cmeli-hist-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cmeli-hist-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
}
.cmeli-hist-stat small {
  font-weight: 600;
  opacity: 0.8;
}
.cmeli-hist-stat.is-etiq {
  background: #dbeafe;
  color: #1d4ed8;
}
.cmeli-hist-stat.is-unid {
  background: #cffafe;
  color: #0e7490;
}
.cmeli-hist-stat.is-cart {
  background: #ede9fe;
  color: #6d28d9;
}
.cmeli-hist-stat.is-bult {
  background: #ffedd5;
  color: #c2410c;
}
.cmeli-hist-table {
  font-size: 0.82rem;
}
.cmeli-hist-row-ok td {
  background: rgba(22, 163, 74, 0.05);
}
.cmeli-hist-row-pend td {
  background: rgba(217, 119, 6, 0.05);
}
.cmeli-hist-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 12px;
}
.cmeli-hist-count {
  font-size: 0.72rem;
  font-weight: 800;
  color: #2563eb;
  background: #dbeafe;
  border-radius: 6px;
  padding: 2px 9px;
  margin-left: 6px;
}
.cmeli-hist-match {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 6px;
  padding: 2px 8px;
}
.cmeli-hist-card.is-open {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* ---------- historial de colectas: listado v2 ---------- */
.cmeli-hist-toolbar-card::part(base) {
  border-radius: 10px;
  border: 1px solid #eef2f7;
  overflow: visible;
}
.cmeli-hist-list {
  border: 1px solid #eef2f7;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  margin-bottom: 12px;
}
.cmeli-hist-listhead,
.cmeli-hist-listrow {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 0.8fr 0.6fr 0.6fr 0.7fr 0.6fr 96px;
  gap: 8px;
  align-items: center;
  padding: 9px 14px;
}
.cmeli-hist-listhead {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
}
.cmeli-hist-listrow {
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.cmeli-hist-listrow:last-child {
  border-bottom: 0;
}
.cmeli-hist-listrow:hover {
  background: #f8fafc;
}
.cmeli-hist-listrow.is-open {
  background: #eff6ff;
  box-shadow: inset 3px 0 0 #2563eb;
}
.cmeli-hist-cell {
  min-width: 0;
  font-size: 0.85rem;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmeli-hist-cell-fecha {
  font-weight: 700;
  color: #0f172a;
}
.cmeli-hist-cell-fecha i {
  color: #64748b;
}
.cmeli-hist-cell-hora {
  color: #64748b;
  font-weight: 600;
}
.cmeli-hist-cell-num {
  font-family:
    "Space Grotesk",
    -apple-system,
    sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
}
.cmeli-hist-cell-num.is-etiq {
  color: #1d4ed8;
}
.cmeli-hist-cell-num.is-unid {
  color: #0e7490;
}
.cmeli-hist-cell-num.is-cart {
  color: #6d28d9;
}
.cmeli-hist-cell-num.is-bult {
  color: #c2410c;
}
.cmeli-hist-cell-actions {
  justify-content: flex-end;
  gap: 6px;
  overflow: visible;
}
.cmeli-hist-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.12s ease;
  padding: 0;
}
.cmeli-hist-act-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
.cmeli-hist-act-btn.is-excel:hover {
  background: #16a34a;
  border-color: #16a34a;
}
.cmeli-hist-act-spin {
  animation: cmeliStatsSpin 0.9s linear infinite;
  display: inline-block;
}
@media (max-width: 720px) {
  .cmeli-hist-listhead {
    display: none;
  }
  .cmeli-hist-listrow {
    grid-template-columns: 1fr 1fr;
    row-gap: 6px;
  }
  .cmeli-hist-cell-actions {
    grid-column: 2;
    justify-content: flex-end;
  }
}

.cmeli-hist-detail-card {
  margin-top: 14px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}
.cmeli-hist-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f172a;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), #ffffff 55%);
}
.cmeli-hist-detail-card .cmeli-hist-table {
  margin: 0;
}
.cmeli-hist-cap-note {
  font-size: 0.75rem;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 10px;
}

/* Estadísticas de colectas (diseño productecaStats / cygnus) */
.cmeli-stats {
  margin-bottom: 18px;
}
.cmeli-stats-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.cmeli-stats-title {
  font-family:
    "Space Grotesk",
    -apple-system,
    sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cmeli-stats-title i {
  color: #3b82f6;
}
.cmeli-stats-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cmeli-stats-range {
  max-width: 220px;
  border-radius: 10px;
  font-size: 0.85rem;
}
.cmeli-stats-presets {
  display: inline-flex;
  gap: 4px;
}
.cmeli-stats-preset {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: #ffffff;
  color: #475569;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}
.cmeli-stats-preset.is-active,
.cmeli-stats-preset:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.cmeli-stats-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.cmeli-kpi-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 12px 18px;
}
.cmeli-kpi-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--kpi-color);
  border-radius: 0 2px 2px 0;
}
.cmeli-kpi-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--kpi-color) 22%, #ffffff);
  background: radial-gradient(
    circle at 30% 25%,
    #ffffff,
    color-mix(in srgb, var(--kpi-color) 14%, #ffffff)
  );
  color: var(--kpi-color);
  font-size: 0.92rem;
}
.cmeli-kpi-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
}
.cmeli-kpi-value {
  font-family:
    "Space Grotesk",
    -apple-system,
    sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
  letter-spacing: -0.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmeli-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.cmeli-chart-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f172a;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}
.cmeli-chart-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--chart-color) 14%, #ffffff);
  color: var(--chart-color);
  font-size: 0.82rem;
}
.cmeli-chart-body {
  height: 220px;
  padding: 10px 12px 14px;
}

/* cmeli-stats v2: toolbar card, compare, trend pills, chart type toggles, overlay */
.cmeli-stats {
  position: relative;
  margin-bottom: 18px;
}
/* Las secciones de Configuración de colecta, una abajo de la otra y a todo el
   ancho. Antes el contenedor era `.napse-data-grid`, que es una grilla de DOS
   columnas (css/napse.css:862): el acordeón salía a media pantalla. */
.cmeli-config {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cmeli-stats-toolbar-card {
  margin-bottom: 0;
}

/* El modal de Colecta va en Inter, igual que el de Control Camión.
   `--sl-font-sans` ADEMÁS del font-family: el `*` no entra al shadow DOM de
   los componentes de Shoelace —el título del diálogo, los botones y los tags
   se quedaban con la fuente del tema—, y la custom property sí baja. */
#meliReusableModal,
#meliReusableModal * {
  --sl-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Los inputs de rango de las barras de filtros: mismo radio que los botones.
   Va por CSS y con !important a proposito, por DOS razones:

   1. `css/napse.css:102` le pone `border-radius:16px !important` a TODO
      <input> de la pagina, y sin !important no hay forma de ganarle. Esta
      regla tiene mas especificidad (0,0,1,1 contra 0,0,0,1), asi que gana.
   2. No alcanza con el `style=""` del markup: flatpickr corre con
      `altInput: true`, o sea que ESCONDE el input original y muestra otro que
      crea el, y ese copia la clase pero no siempre el estilo inline. La regla
      agarra a los dos. */
.cmeli-stats-toolbar-card input,
.cmeli-hist-toolbar-card input {
  border-radius: 6px !important;
}

/* KPI v2 layout (parity productecaStats) */
.cmeli-stats-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.cmeli-stats sl-card.cmeli-kpi-card::part(base) {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #eef2f7;
}
.cmeli-stats sl-card.cmeli-kpi-card::part(body) {
  border-radius: 10px;
}
.cmeli-kpi-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 14px 20px;
  height: 100%;
  box-sizing: border-box;
}
.cmeli-kpi-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cmeli-kpi-icon-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cmeli-kpi-vals {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cmeli-kpi-period-label {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Trend pills */
.cmeli-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}
.cmeli-kpi-trend.is-up {
  background: #dcfce7;
  color: #166534;
}
.cmeli-kpi-trend.is-down {
  background: #fee2e2;
  color: #b91c1c;
}
.cmeli-kpi-trend.is-flat {
  background: #f1f5f9;
  color: #64748b;
}

/* Compare section below KPI value */
.cmeli-kpi-compare {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed rgba(148, 163, 184, 0.5);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cmeli-kpi-compare-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmeli-kpi-compare-value {
  font-family:
    "Space Grotesk",
    -apple-system,
    sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chart grid v2 (parity productecaStats) */
.cmeli-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
}
.cmeli-stats sl-card.card-chart::part(base) {
  border-radius: 10px;
  border: 1px solid #eef2f7;
  overflow: hidden;
}
.cmeli-stats sl-card.card-chart::part(header) {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  border-radius: 10px 10px 0 0;
}
.cmeli-stats sl-card.card-chart::part(body) {
  padding: 14px;
  border-radius: 0 0 10px 10px;
}

/* Chart-type buttons: bootstrap btn-group con accent azul (copiado de producteca.css) */
.cmeli-stats .prd-cht-group {
  flex-shrink: 0;
}
.cmeli-stats .prd-cht-group .btn {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-color: #e2e8f0;
  color: #475569;
  background: #ffffff;
}
.cmeli-stats .prd-cht-group .btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #e2e8f0;
}
.cmeli-stats .prd-cht-group .btn:focus,
.cmeli-stats .prd-cht-group .btn:focus-visible,
.cmeli-stats .prd-cht-group .btn:active,
.cmeli-stats .prd-cht-group .btn.active:focus {
  outline: none !important;
  box-shadow: none !important;
}
.cmeli-stats .prd-cht-group .btn.active,
.cmeli-stats .prd-cht-group .btn.active:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}
.cmeli-stats .prd-cht-group .btn i {
  font-size: 12px;
}
@media (max-width: 600px) {
  .cmeli-stats .prd-cht-group .prd-cht-label {
    display: none;
  }
  .cmeli-stats .prd-cht-group .btn {
    padding: 4px 8px;
  }
}
.cmeli-chart-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f172a;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  flex-wrap: nowrap;
}
.cmeli-chart-head-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chart type toggle buttons */
.cmeli-chart-type-group {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}
.cmeli-chart-type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(203, 213, 225, 0.85);
  background: #ffffff;
  color: #64748b;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.12s ease;
  padding: 0;
}
.cmeli-chart-type-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #334155;
}
.cmeli-chart-type-btn.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* ── Spinner de foto (mientras carga la imagen del producto) ──
   Anillo azul girando sobre el placeholder; al resolver la foto (o quedar
   el placeholder si no existe) se quita .is-loading / .is-photo-loading. */
.cmeli-foto-wrap {
  position: relative;
  display: inline-flex;
}
.cmeli-row-img.is-photo-loading,
.cmeli-cart-thumb.is-loading {
  position: relative;
}
.cmeli-foto-wrap.is-loading img,
.cmeli-row-img.is-photo-loading img,
.cmeli-cart-thumb.is-loading img {
  opacity: 0.35;
}
.cmeli-foto-wrap.is-loading::after,
.cmeli-row-img.is-photo-loading::after,
.cmeli-cart-thumb.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(52, 131, 250, 0.25);
  border-top-color: #3483fa;
  animation: cmeliStatsSpin 0.8s linear infinite;
  pointer-events: none;
}
.cmeli-cart-thumb.is-loading::after {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* ── Overlay + spinner Mercado Libre (patrón cy-stats-overlay / producteca) ──
   Overlay blanco con blur sobre el contenedor. El spinner es EXACTAMENTE el
   de la página (.spinner-border37892.meli-search-spinner + .spinner-image);
   el wrapper sticky lo mantiene centrado en el viewport aunque el overlay
   cubra contenido más alto que la pantalla. */
.cmeli-stats-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(3px);
  z-index: 100;
  border-radius: inherit;
}
.cmeli-stats-overlay[hidden] {
  display: none !important;
}
.cmeli-overlay-center {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Spinner de página dentro del overlay: visible y sin márgenes */
.meli-brand-page .cmeli-stats-overlay .spinner-border37892.meli-search-spinner {
  display: flex;
  margin: 0;
}
/* El loader se ancla al CUERPO DEL DIALOGO.
   Era `position: absolute; inset: 0` colgando de `.napse-data-modal-body`, que
   traía el `position: relative` (css/napse.css:796). Al migrar a <sl-dialog>
   esa clase desapareció y el overlay se quedó SIN ancestro posicionado: `inset:
   0` pasa a resolverse contra el bloque contenedor inicial, o sea la ventana.
   Se le devuelve el ancla por ::part(base), que es el panel del diálogo. */
#meliReusableModal::part(body) {
  position: relative;
}

/* Y el centrador deja de medir 100vh: adentro de un modal de alto fijo eso
   creaba 100vh de contenido y empujaba todo lo demás fuera de la vista. */
#meliReusableModal .cmeli-overlay-center {
  height: 100%;
  min-height: 180px;
}
/* Lock total mientras carga (clon de .is-loading-locked de producteca) */
.modal-body.cmeli-scroll-locked {
  overflow: hidden !important;
  pointer-events: none;
  user-select: none;
  touch-action: none;
}
.cmeli-scroll-locked .cmeli-stats-overlay {
  pointer-events: auto;
}
@keyframes cmeliStatsSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- config emails ---------- */
/* ── Destinatarios del cierre de colecta ──────────────────────────────────
   Rediseñado el 21-08-2026. Antes cada destinatario era una TARJETA con borde,
   sombra al hover, avatar de 36 px y un botón de borrar con su propio recuadro
   rojo: cinco contactos se comían el modal entero y parecían cinco secciones,
   no una lista.

   Ahora es UNA lista con divisores. Es más compacta, y sobre todo dice lo que
   es: renglones de una misma cosa, no cinco bloques independientes.

   Todo con tokens: los hex de antes (#0f172a, #64748b, #dc2626…) se veían mal
   en modo oscuro. */
.cmeli-email-list {
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: 10px;
  overflow: hidden;
  background: var(--sl-color-neutral-0);
}

.cmeli-email-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--sl-color-neutral-100);
  transition: background-color 0.15s ease;
}

.cmeli-email-row:last-child {
  border-bottom: 0;
}

.cmeli-email-row:hover {
  background: var(--sl-color-neutral-50);
}

/* <sl-avatar>: el tamaño va por --size, y el color de fondo en ::part(base) —
   pintar el host deja una caja alrededor de la caja del componente. */
.cmeli-email-avatar {
  --size: 28px;
  flex: 0 0 auto;
}

.cmeli-email-avatar::part(base) {
  background: var(--sl-color-primary-600);
  color: var(--sl-color-neutral-0);
  font-size: 0.75rem;
  font-weight: 700;
}

.cmeli-email-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.cmeli-email-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--sl-color-neutral-900);
  white-space: nowrap;
}

/* El mail al lado del nombre y no abajo: la fila baja de dos renglones a uno.
   Es lo que hace que cinco destinatarios entren en el alto de dos de antes. */
.cmeli-email-addr {
  color: var(--sl-color-neutral-500);
  font-size: 0.8rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sin recuadro propio: un <sl-icon-button> pintado de rojo. El botón con su
   borde y su fondo competía con la fila entera. */
.cmeli-email-del {
  flex: 0 0 auto;
  font-size: 1rem;
}

.cmeli-email-del::part(base) {
  color: var(--sl-color-neutral-400);
  padding: 4px;
}

.cmeli-email-row:hover .cmeli-email-del::part(base),
.cmeli-email-del::part(base):hover {
  color: var(--sl-color-danger-600);
}

.cmeli-email-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border: 1px dashed var(--sl-color-neutral-300);
  border-radius: 10px;
  color: var(--sl-color-neutral-500);
  font-size: 0.85rem;
}

.cmeli-email-empty sl-icon {
  font-size: 1.1rem;
  color: var(--sl-color-neutral-400);
}

/* Los dos campos y el botón, del mismo alto y en una sola línea. `align-items:
   end` los apoya abajo: un <sl-input> con help-text de error crece hacia abajo
   y sin esto el botón se iba con él. */
.cmeli-email-add {
  display: flex;
  align-items: end;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.cmeli-email-add sl-input {
  flex: 1 1 160px;
  min-width: 0;
}

.cmeli-email-add sl-input.cmeli-input-error {
  --sl-input-border-color: var(--sl-color-danger-600);
  --sl-input-border-color-focus: var(--sl-color-danger-600);
}

.cmeli-email-add-btn {
  flex: 0 0 auto;
}

.cmeli-email-footrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.cmeli-email-hint {
  color: var(--sl-color-neutral-500);
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cmeli-email-feedback {
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cmeli-email-feedback.is-ok {
  color: var(--e3-ok-fg);
}

.cmeli-email-feedback.is-err {
  color: var(--e3-err-fg);
}

/* ---------- SweetAlert iOS (toda la página controlMeli) ---------- */
.swal-ios-cmeli {
  border-radius: 22px !important;
  background: rgba(249, 249, 252, 0.96) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 24px 70px rgba(15, 23, 42, 0.28),
    0 2px 10px rgba(15, 23, 42, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  padding: 1.3rem 1.1rem 0 !important;
  overflow: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
}

.swal-ios-cmeli .swal2-icon {
  transform: scale(0.82);
  margin: 0.2em auto 0.4em;
}

/* Check de éxito SIN animación: el dibujo animado de swal2 se ve roto
   sobre el popup iOS translúcido — icono estático limpio en
   controlMeli y tipeoWeb (mixin compartido) */
.swal-ios-cmeli .swal2-icon.swal2-success,
.swal-ios-cmeli .swal2-icon.swal2-success .swal2-success-line-tip,
.swal-ios-cmeli .swal2-icon.swal2-success .swal2-success-line-long,
.swal-ios-cmeli .swal2-icon.swal2-success .swal2-success-ring {
  animation: none !important;
}
.swal-ios-cmeli .swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal-ios-cmeli .swal2-icon.swal2-success .swal2-success-circular-line-right,
.swal-ios-cmeli .swal2-icon.swal2-success .swal2-success-fix {
  display: none !important;
}

/* El scroll del cuerpo lo maneja css/ui/lp-modal.css (::part(body) del
   <sl-dialog>): la regla que había acá colgaba de `.modal-body-mcsono`, que se
   fue con el shell de Bootstrap. */

.swal-ios-title-cmeli {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: #0f172a !important;
  padding: 0 0.4rem !important;
}

.swal-ios-html-cmeli {
  font-size: 0.9rem !important;
  color: #3c3c43 !important;
  line-height: 1.45 !important;
  margin: 0.45em 0.4rem 0.3em !important;
}

/* Botonera estilo alerta iOS: hairline arriba, botones planos azules */
.swal-ios-actions-cmeli {
  width: calc(100% + 2.2rem) !important;
  margin: 0.9rem -1.1rem 0 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(60, 60, 67, 0.18);
  display: flex !important;
  gap: 0 !important;
}

.swal-ios-btn-cmeli {
  flex: 1 1 0;
  margin: 0 !important;
  padding: 13px 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #007aff !important;
  cursor: pointer;
  box-shadow: none !important;
  outline: none !important;
  white-space: nowrap;
  transition: background-color 0.12s ease;
}

.swal-ios-btn-cmeli:focus,
.swal-ios-btn-cmeli:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: rgba(0, 122, 255, 0.07) !important;
}

.swal-ios-btn-cmeli i {
  display: none; /* iOS: alerts sin íconos en botones */
}

.swal-ios-btn-cmeli + .swal-ios-btn-cmeli {
  border-left: 1px solid rgba(60, 60, 67, 0.18) !important;
}

.swal-ios-btn-cmeli:hover {
  background: rgba(0, 122, 255, 0.07) !important;
}

.swal-ios-btn-cmeli:active {
  background: rgba(0, 122, 255, 0.14) !important;
}

.swal-ios-confirm-cmeli {
  font-weight: 700 !important;
}

.swal-ios-deny-cmeli,
.swal2-confirm.swal-ios-btn-cmeli.swal2-danger,
.swal-ios-cmeli .swal2-deny {
  color: #ff3b30 !important;
}

.swal-ios-cancel-cmeli {
  color: #007aff !important;
  font-weight: 400 !important;
}

/* 3+ botones: apilados como iOS */
@media (max-width: 480px) {
  .swal-ios-actions-cmeli {
    flex-direction: column;
  }
  .swal-ios-btn-cmeli + .swal-ios-btn-cmeli {
    border-left: none !important;
    border-top: 1px solid rgba(60, 60, 67, 0.18) !important;
  }
}

.swal-ios-input-cmeli {
  border-radius: 12px !important;
  border: 1px solid rgba(60, 60, 67, 0.25) !important;
  background: #ffffff !important;
  font-size: 1rem !important;
  padding: 0.55rem 0.8rem !important;
  box-shadow: none !important;
}

.swal-ios-input-cmeli:focus {
  border-color: #007aff !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18) !important;
}

/* Inputs embebidos en html custom (ej. "Abrir camión") heredan el look iOS.
   OJO: sin display override — Swal siempre renderiza su input interno con
   display:none inline; forzarlo visible rompe todos los alerts. */
.swal-ios-cmeli .swal2-input {
  width: 100% !important;
  box-sizing: border-box !important;
  /* margin default de swal2 (1em 2em) + width 100% desborda el popup */
  margin: 14px 0 6px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(60, 60, 67, 0.25) !important;
  background: #ffffff !important;
  font-size: 1rem !important;
  padding: 0.55rem 0.8rem !important;
  box-shadow: none !important;
  height: auto !important;
}

.swal-ios-cmeli .swal2-input:focus {
  border-color: #007aff !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18) !important;
}

/* Form genérico dentro de Swal (ej. "Abrir camión") */
.tipeo-swal-form {
  text-align: left;
  padding: 10px 2px 2px;
}

.tipeo-swal-form label {
  display: block !important;
  margin: 0 0 7px 2px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.tipeo-swal-form label span {
  text-transform: none;
  letter-spacing: 0;
  color: #94a3b8;
  font-weight: 600 !important;
}

.tipeo-swal-form .swal2-input {
  margin: 0 0 20px !important;
}

.tipeo-swal-form .swal2-input:last-of-type {
  margin-bottom: 6px !important;
}

.tipeo-swal-form #swal-truck-title {
  font-weight: 700 !important;
}

/* Toasts iOS (notificación carrito, etc.) */
.swal-ios-cmeli.swal2-toast {
  border-radius: 16px !important;
  padding: 0.7rem 1rem !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22) !important;
}

.swal-ios-cmeli.swal2-toast .swal2-title {
  font-size: 0.92rem !important;
}

.swal-ios-cmeli.swal2-toast .swal-ios-html-cmeli {
  font-size: 0.8rem !important;
}

/* Loading (Swal.showLoading) */
.swal-ios-cmeli .swal2-loader {
  border-color: #007aff transparent #007aff transparent !important;
}

/* ---------- paginación (misma de producteca) ---------- */
.producteca-sales-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #edf2f7;
  background: #ffffff;
}

.producteca-pagination-list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.producteca-page-item {
  display: flex;
}

.producteca-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  text-decoration: none;
}

.producteca-page-link:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.producteca-page-link.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.producteca-page-link.is-nav {
  background: #ffffff;
  font-weight: 800;
}

.producteca-page-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8fafc;
}

@media (max-width: 576px) {
  .producteca-page-link {
    min-width: 34px;
    height: 34px;
    font-size: 0.8rem;
  }
}

/* Row buscador+toolbar y cards-container forman UNA sola tarjeta:
   el row tiene radius 22 22 0 0 (buscador.css); el cards-container
   continúa el mismo fondo y cierra con radius inferior.
   padding-top en el container evita el margin-collapse que separaba
   los bloques y dejaba la cabecera de la tabla sin aire. */
.meli-brand-page .napse-search-filter-container {
  margin-bottom: 0;
  padding-bottom: 10px;
}

.meli-brand-page #cards-container.napse-cards-container {
  margin-top: 0 !important;
  padding-top: 14px !important;
  padding-bottom: 18px;
  margin-bottom: 26px;
}

.cmeli-table {
  min-width: 0;
}

@media (max-width: 768px) {
  /* Contadores: dejan de flotar para no romper/tapar la tabla */
  .counters-floater-tbl-meli {
    position: static;
    grid-auto-flow: column;
    justify-content: flex-start;
    margin: 0 0 10px;
  }
  .cmeli-row {
    grid-template-columns: 48px minmax(0, 1fr) max-content;
  }
  .cmeli-row-actions {
    grid-column: 3;
  }
}

@media (max-width: 576px) {
  .cmeli-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .cmeli-row-state {
    grid-column: 2;
    justify-self: start;
  }
  .cmeli-row-actions {
    grid-column: 2;
    justify-self: end;
    margin-top: -28px;
  }
  .cmeli-cierre-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Truck badge en tabla tipeo ─────────────────────────────── */
.tbl-truck-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 20px;
  padding: 0 6px;
  margin-top: 4px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  vertical-align: middle;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

#tipeo-pagination {
  display: flex;
  justify-content: center;
  padding: 14px 0 4px;
}

/* Config: notificaciones */
.cmeli-notif-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cmeli-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 4px;
  margin: 0;
  border-bottom: 1px solid var(--sl-color-neutral-100);
  cursor: pointer;
}
.cmeli-notif-row:last-child {
  border-bottom: none;
}
.cmeli-notif-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cmeli-notif-copy strong {
  font-size: 0.88rem;
  color: var(--sl-color-neutral-900);
}
.cmeli-notif-copy small {
  font-size: 0.76rem;
  color: var(--sl-color-neutral-500);
}

/* ════════════════════════════════════════════════════════════════
   Modal: Imprimir Nodos (tipeoWeb — portado de despachos_cygnus)
   ════════════════════════════════════════════════════════════════ */
.swal2-popup.swal-cy-nodos {
  width: min(600px, 94vw);
  border-radius: 18px;
}
.swal-cy-nodos .swal2-html-container {
  margin: 0;
  padding: 18px 20px 20px;
  text-align: left;
}

.cy-nodos {
  --cy-nodo-accent: #ea580c;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: "Inter", sans-serif;
  color: #0f172a;
}
.cy-nodos-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
  border: 1px solid #fed7aa;
  border-radius: 12px;
}
.cy-nodos-head-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fed7aa;
}
.cy-nodos-head-icon i {
  font-size: 22px;
  color: var(--cy-nodo-accent);
}
.cy-nodos-head strong {
  display: block;
  font-size: 15px;
  color: #0f172a;
}
.cy-nodos-head small {
  display: block;
  font-size: 12px;
  color: #9a3412;
}

.cy-nodos-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cy-nodos-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.cy-nodos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.cy-nodo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  outline: none;
}
.cy-nodo-chip i {
  color: var(--cy-nodo-accent);
  font-size: 14px;
  flex-shrink: 0;
}
.cy-nodo-chip:hover {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #0f172a;
}
.cy-nodo-chip:focus,
.cy-nodo-chip:focus-visible {
  box-shadow: none;
  outline: none;
}
.cy-nodo-chip.is-active {
  background: var(--cy-nodo-accent);
  border-color: var(--cy-nodo-accent);
  color: #ffffff;
}
.cy-nodo-chip.is-active i {
  color: #ffffff;
}

.cy-nodos-qty-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
}
.cy-nodos-qty-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  color: var(--cy-nodo-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s ease;
}
.cy-nodos-qty-btn:hover {
  background: #fff7ed;
}
.cy-nodos-qty-row input {
  width: 70px;
  height: 38px;
  border: 0;
  background: transparent;
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  text-align: center;
  outline: none;
}
.cy-nodos-qty-row input::-webkit-outer-spin-button,
.cy-nodos-qty-row input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cy-nodos-help {
  font-size: 11px;
  color: #94a3b8;
}

.cy-nodos-footer {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}
.cy-nodos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.cy-nodos-btn-ghost {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.cy-nodos-btn-ghost:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.cy-nodos-btn-primary {
  background: var(--cy-nodo-accent);
  color: #ffffff;
  margin-left: auto;
  flex: 1 1 auto;
  max-width: 280px;
}
.cy-nodos-btn-primary:hover {
  background: #c2410c;
}
.cy-nodos-btn-primary:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
  opacity: 0.8;
}
.cy-nodos-btn:focus,
.cy-nodos-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
@media (max-width: 640px) {
  .cy-nodos-footer {
    flex-direction: column-reverse;
  }
  .cy-nodos-btn-primary {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .cy-nodos-btn-ghost {
    width: 100%;
  }
}
/* ── Fin Imprimir Nodos tipeoWeb ─────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   TipeoWeb — ajustes toolbar / tabla / camiones
   ════════════════════════════════════════════════════════════════ */

/* Badge contador en botón Adjuntar (misma solución que producteca
   #productecaInvoiceQueueBadge: BS4 no trae start-100/translate-middle) */
#contadorDocumentacionFaltante {
  position: absolute;
  top: 0;
  left: 100%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
#contadorDocumentacionFaltante .fa-spinner {
  font-size: 0.85rem;
}

/* Feedback de click en botones de toolbar napse */
.napse-toolbar-group-buttons .btn:active {
  transform: scale(0.94);
}

/* Loading Swal (buscar remitos): sin hairline de botonera */
.swal-ios-actions-cmeli.swal-ios-actions-loader {
  border-top: 0 !important;
  margin-top: 0.2rem !important;
  padding-bottom: 1.1rem !important;
  justify-content: center !important;
}

/* Columna logística: solo icono (optimiza ancho de tabla) */
.tbl-despachos .tbl-logi-name {
  display: none;
}
.tbl-despachos .tbl-logi-chip {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.tbl-despachos thead .th-logi span {
  display: none;
}
.tbl-despachos .th-logi,
.tbl-despachos .tbl-logi {
  width: 44px;
  text-align: center;
}

/* Columna seguimiento: ancho mínimo (chip compacto, sin icono link) */
.tbl-despachos .th-seg,
.tbl-despachos .tbl-seg {
  width: 1%;
  white-space: nowrap;
}
.tbl-despachos .tbl-seg-chip .tbl-seg-ico {
  display: none;
}

/* Botón eliminar: icono centrado (tabla modal por logística incluida) */
.tbl-del i {
  display: block;
  line-height: 1;
}
#tablaDespacho td {
  vertical-align: middle;
}
#tablaDespacho .tbl-del {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Selección de filas para mover de camión (modal por logística) */
#tablaDespacho tr.tipeo-row-selectable {
  cursor: pointer;
}
#tablaDespacho tr.tipeo-row-selectable:hover td {
  background: #f0f9ff;
}
#tablaDespacho tr.is-selected-move td {
  background: #dbeafe !important;
  box-shadow: inset 3px 0 0 #2563eb;
}

/* Panel de camiones en modal de escaneo — filas por logística + segmentos */
.tipeo-scan-logi-list {
  display: flex;
  flex-direction: column;
}

.tipeo-scan-logi-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid #f1f5f9;
  font-family:
    "Inter",
    "Rubik",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.tipeo-scan-logi-row:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.tipeo-scan-logi-id {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tipeo-scan-logi-id img {
  width: 16px;
  height: auto;
}

.tipeo-scan-logi-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tipeo-scan-logi-trucks {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 3px;
}

.tipeo-scan-truck-seg {
  min-width: 38px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  font-family: "Inter", "Rubik", sans-serif;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.tipeo-scan-truck-seg:hover {
  color: #0f172a;
}

.tipeo-scan-truck-seg.is-active {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
}

/* Gestión de camiones (abrir / eliminar vacíos) */
.tipeo-gestion-camiones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  margin-top: 4px;
}

.tipeo-gestion-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  font-family:
    "Inter",
    "Rubik",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.tipeo-gestion-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.tipeo-gestion-main strong {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.tipeo-gestion-main small {
  font-size: 12px;
  color: #64748b;
}

.tipeo-gestion-del {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.06);
  color: #dc2626;
  cursor: pointer;
  transition: background 0.15s ease;
}

.tipeo-gestion-del:hover {
  background: rgba(220, 38, 38, 0.14);
}

.tipeo-gestion-del:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tipeo-gestion-lock {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 14px;
}

.tipeo-gestion-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.5);
  border-radius: 12px;
  color: #64748b;
  font-size: 0.85rem;
}

.tipeo-gestion-hint {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: #94a3b8;
  text-align: left;
}

/* Empty state suelto (taza) cuando la tabla no tiene datos */
#tipeo-empty-host {
  width: 100%;
}

#tipeo-empty-host .cmeli-empty {
  background: #ffffff;
  border: 1px dashed #e2e8f0;
  border-radius: 16px;
  padding: 28px 16px;
}

/* Modal Estadísticas: scroll vertical */
#modalEstadisticas .stats-body {
  max-height: calc(100vh - 170px);
  overflow-y: auto;
}

/* Alerts: check / íconos sin animación */
.swal-ios-cmeli .swal2-icon,
.swal-ios-cmeli .swal2-icon * {
  animation: none !important;
}
/* ── Fin ajustes TipeoWeb ─────────────────────────────────────────── */
/* ── Fin truck badge ────────────────────────────────────────── */

/* input de clave enmascarado (reemplaza type=password en modales Swal
   para que el navegador no ofrezca guardar la contraseña) */
input.lpq-secret-mask {
  -webkit-text-security: disc;
}

/* ═══ Selector de tandas para la Query — <sl-dialog class="lp-modal"> ═══════
   (22-08-2026)

   Era el único modal del flujo de Query con chrome propio: overlay a mano, los
   tres puntitos de macOS, switches iOS de CSS y botones con estilo propio
   (`qt-*-quey-tandas`). Ahora es un <sl-dialog> y el chrome sale de
   css/ui/lp-modal.css, como el resto del sistema.

   Acá queda SOLO el layout de adentro. Ni un color a mano: todo sale de los
   tokens de Shoelace, que ya traen su variante oscura. */

.etiquetas-query-dialog::part(body) {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Fecha, cantidad de tandas y de registros. */
.etiquetas-query-dialog .qtsl-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.etiquetas-query-dialog .qtsl-bajada {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sl-color-neutral-600);
}

.etiquetas-query-dialog .qtsl-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* El contador se va al extremo y queda tenue: acompaña, no compite. */
.etiquetas-query-dialog .qtsl-contador {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sl-color-neutral-500);
}

/* La lista scrollea ADENTRO de su caja, no empuja el modal. */
.etiquetas-query-dialog .qtsl-lista {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 46vh;
  overflow-y: auto;
  padding: 0.15rem;
}

/* Cada tanda: switch, nombre y cantidad. Es un <label>, así que el clic en
   cualquier parte de la fila mueve el switch — sin un listener propio. */
.etiquetas-query-dialog .qtsl-fila {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: var(--sl-border-radius-medium);
  background: var(--sl-color-neutral-0);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.etiquetas-query-dialog .qtsl-fila:hover {
  border-color: var(--sl-color-primary-300);
  background: var(--sl-color-neutral-50);
}

/* Activa: borde y fondo del color primario, sin degradados. */
.etiquetas-query-dialog .qtsl-fila.is-activa {
  border-color: var(--sl-color-primary-500);
  background: var(--sl-color-primary-50);
}

.etiquetas-query-dialog .qtsl-nombre {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sl-color-neutral-900);
  /* Un nombre de tanda largo no puede estirar la fila. */
  overflow-wrap: anywhere;
}

/* `sl-tag` NO separa lo que le meten adentro: sin este gap el ícono del
   calendario queda pegado a la fecha. Va en ::part(base), que es donde vive el
   layout del componente. */
.etiquetas-query-dialog .qtsl-resumen sl-tag::part(base) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* El badge cuenta registros: es un dato de apoyo, no una alerta. El
   `variant="neutral"` de Shoelace sale gris oscuro y pesaba más que el nombre
   de la tanda. Y sin `pill`: la regla de la casa es no redondear tanto. */
.etiquetas-query-dialog .qtsl-cuenta {
  flex: 0 0 auto;
}

.etiquetas-query-dialog .qtsl-cuenta::part(base) {
  border-radius: var(--sl-border-radius-small);
  background-color: var(--sl-color-neutral-100);
  color: var(--sl-color-neutral-700);
  font-weight: 600;
}

/* En la fila activa acompaña el color primario. */
.etiquetas-query-dialog .qtsl-fila.is-activa .qtsl-cuenta::part(base) {
  background-color: var(--sl-color-primary-100);
  color: var(--sl-color-primary-800);
}

/* `sl-alert` se muestra con `open`, no con `hidden`. */
.etiquetas-query-dialog .qtsl-error {
  margin-top: 0.15rem;
}

@media (max-width: 768px) {
  .etiquetas-query-dialog .qtsl-lista {
    max-height: none;
  }

  .etiquetas-query-dialog .qtsl-contador {
    margin-left: 0;
    flex: 1 1 100%;
  }
}

/* ═══ Flujo de Query en tandas — <sl-dialog class="lp-modal"> ══════════════
   (22-08-2026)

   Configuración y progreso compartían un overlay propio con los tres puntitos
   de macOS, radios de CSS y botones con estilo propio. Ahora son un solo
   <sl-dialog> que cambia de contenido. Acá va SOLO el layout: ni un color a
   mano, todo de los tokens de Shoelace, que ya traen su variante oscura. */

.qt-query-dialog::part(body) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.qt-query-dialog .qtc-bajada,
.qt-query-dialog .qtc-sub {
  margin: 0;
  font-size: 0.88rem;
  color: var(--sl-color-neutral-600);
}

.qt-query-dialog .qtc-seccion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.qt-query-dialog .qtc-titulo {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sl-color-neutral-900);
}

/* Cada opción es una tarjeta clickeable; el radio de Shoelace queda a la
   izquierda y el texto ocupa el resto. */
.qt-query-dialog sl-radio-group::part(form-control-input) {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.qt-query-dialog .qtc-opcion {
  width: 100%;
}

.qt-query-dialog .qtc-opcion::part(base) {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: var(--sl-border-radius-medium);
  background: var(--sl-color-neutral-0);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.qt-query-dialog .qtc-opcion::part(base):hover {
  border-color: var(--sl-color-primary-300);
  background: var(--sl-color-neutral-50);
}

/* La elegida se marca con el color primario. `[aria-checked]` es lo que expone
   el propio componente: no hay una clase que mirar. */
.qt-query-dialog .qtc-opcion[aria-checked="true"]::part(base) {
  border-color: var(--sl-color-primary-500);
  background: var(--sl-color-primary-50);
}

.qt-query-dialog .qtc-opcion::part(label) {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.35;
}

.qt-query-dialog .qtc-op-tit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sl-color-neutral-900);
}

.qt-query-dialog .qtc-op-desc {
  font-size: 0.82rem;
  color: var(--sl-color-neutral-600);
}

.qt-query-dialog .qtc-nota::part(base) {
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
}

/* ── la pantalla de progreso ─────────────────────────────────────────────── */

.qt-query-dialog .qtp-estado {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.qt-query-dialog .qtp-spinner {
  font-size: 1.8rem;
  --track-width: 3px;
}

.qt-query-dialog .qtp-textos {
  min-width: 0;
}

.qt-query-dialog .qtp-titulo {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sl-color-neutral-900);
}

.qt-query-dialog .qtp-detalle {
  margin: 0.1rem 0 0;
  font-size: 0.82rem;
  color: var(--sl-color-neutral-600);
}

/* El resumen de la configuración elegida, en dos columnas. */
.qt-query-dialog .qtp-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
}

.qt-query-dialog .qtp-resumen > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--sl-color-neutral-200);
  border-radius: var(--sl-border-radius-medium);
  background: var(--sl-color-neutral-50);
}

.qt-query-dialog .qtp-resumen span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sl-color-neutral-500);
}

.qt-query-dialog .qtp-resumen strong {
  font-size: 0.88rem;
  color: var(--sl-color-neutral-900);
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  /* Un `minmax(200px, …)` con el modal a pantalla completa desborda: la caja
     mide menos que el track y el track gana. */
  .qt-query-dialog .qtp-resumen {
    grid-template-columns: 1fr;
  }
}