@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 {
  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 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;
}

#real-trends {
  width: 40px;
}

#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: #1e3a8a;
}

#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(248, 113, 113, 0.12) 59%, rgba(248, 113, 113, 0.12) 64%, rgba(255, 255, 255, 0) 65%),
    conic-gradient(
      from 220deg,
      rgba(248, 113, 113, 0) 0deg,
      rgba(248, 113, 113, 0) 210deg,
      #fda4af 255deg,
      #ef4444 300deg,
      #dc2626 332deg,
      rgba(220, 38, 38, 0.16) 360deg
    );
  box-shadow:
    0 10px 18px rgba(239, 68, 68, 0.14),
    inset 0 0 0 1px rgba(248, 113, 113, 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%, #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;
}

.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; /* Fondo negro */
  padding: 20px; /* Espacio interno */
  border-radius: 0 0 25px 25px; /* Bordes redondeados */
  margin-bottom: 30px;
}

#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;
}

.carousel-control-next2 {
  border-radius: 0 0px 10px 0;
}

.carousel-control-prev2 {
  border-radius: 0px 0 0 10px;
}

.carousel2 {
  border-radius: 0 0 10px 10px;
}

.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;
}

/* ===== Columna Valor - chip macOS ===== */

.value-cell {
  padding: 8px 10px;
  text-align: right;
  vertical-align: middle;
  border: none;
}

/* Botón/Chip interno que muestra el total facturable */
.value-cell .value-chip {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;

  padding: 6px 12px;
  border-radius: 999px;

  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #f5f5f7;

  font-family: "Rubik", sans-serif;
  font-size: 0.8rem;
  line-height: 1.2;
  color: #111827;

  cursor: pointer;
  outline: none;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

/* Hover / active bien sutil tipo macOS */
@media (hover: hover) {
  .value-cell .value-chip:hover {
    background-color: #eef2ff; /* lavanda suave */
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 0px 5px rgba(15, 23, 42, 0.18);
  }

  .value-cell .value-chip:active {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
  }
}

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

.value-chip-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280; /* gris neutro */
}

.value-chip-amount {
  font-weight: 600;
  font-size: 0.9rem;
  color: #059669; /* verde lindo tipo iOS */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 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;
}

/* Cancelamos el overlay viejo feo del td */
td.value-cell:hover {
  background-color: transparent;
  color: inherit !important;
}

td.value-cell:hover::after {
  content: none;
}

/* 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;
}

.ios-fact {
  color: white;
  font-size: 25px !important;
}

#alertContainerFacturacion {
  display: block !important;
}

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

.btn-group-logistica > button {
  font-size: 14px;
  font-weight: 600;
}

.btn-primary-2 {
  color: white;
  font-weight: 400;
  background-color: grey; /* Azul iOS */
  border: none;
  border-radius: 0px;
  padding: 10px 20px;
  font-size: 16px;
  transition: background-color 0.3s ease;
  transition: 0.5s;
}

.btn-primary-2:hover {
  color: white;
  font-weight: 400;
  background-color: #005bb5;
}

#alertContainerFacturacion {
  color: green;
  font-weight: 600;
  text-align: center;
  padding: 10px;
}
/* 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;
}

#notificationMessage {
  padding-right: 30px;
}

.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;
}

.notification .icon-info {
  color: #007aff;
  margin-right: 10px;
  font-size: 1.5rem;
}
/* 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 */
}

#estadoFilter {
  width: auto;
  margin-bottom: 0;
}

#notificationContainer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  max-width: max-content; /* Ajusta el ancho máximo según tus necesidades */
}

.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;
}

.ios-select-meli {
  height: 47px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: lightslategray;
  border-radius: 5px !important;
  padding: 10px 20px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: white;
  font-weight: 800;
  outline: none;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
  border: solid 1px ccc;
}

.ios-select-meli:focus {
  border-color: #007aff;
  box-shadow: 0 0 5px rgba(0, 122, 255, 0.5);
}

.ios-select-meli option {
  padding: 10px;
}

#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;
}

.etiquetaList .list-group-item:nth-child(1) > .badge {
  background-color: orangered;
}

.etiquetaList .list-group-item:nth-child(1) {
  background-color: #fed4cf;
}

.fixed-size {
  margin-left: 2px;
  width: 38.8px;
  height: 37.2px;
}

.fixed-size i,
.fixed-size .spinner-border {
  width: 19.2px;
  height: 19.2px;
}

.etiquetaList > .list-group-item > .btn > i {
  width: 19.2px;
  height: 19.2px;
}

.etiquetaList .list-group-item:nth-child(1):hover {
  background-color: #fdb1d3;
  color: black;
}

#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;
  }
}

.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;
}

#commentDiv {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
}

.comment-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.comment-container {
  width: 85%;
  max-width: 500px;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 2px dashed #007bff;
  padding: 1rem;
  margin-right: 10px;
  border-radius: 15px;
  box-shadow: 0 0px 12px rgba(0, 0, 0, 0.5); /* Sombra negra */
}

#commentTextarea {
  background-color: white;
}

.comentario-meli-titulo {
  background-color: cornflowerblue;
  padding: 5px;
  border-radius: 10px;
  width: fit-content;
  color: white;
  font-weight: 700;
}

.spinner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgba(239, 68, 68, 0.16));
}

@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;
}

/* ALERTA MERCADO LIBRE */
.alert-ios-ml {
  background-color: #f0f0f5;
  border: 1px solid #d0d0d5;
  border-radius: 12px;
  padding: 15px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  color: #333;
  margin-top: -8px;
}

.spinner-ios-ml {
  margin-left: 10px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top: 6px solid grey;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
}

@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 */
.notification-ios-wifi {
  display: flex;
  flex-direction: column;
  text-align: center;
  max-width: 300px;
  display: none;
  position: fixed;
  bottom: 20px;
  border: 1px solid orange;
  left: 20px;
  background-color: orangered;
  color: white;
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.6);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.5s;
}

.notification-ios-wifi.blink {
  animation:
    fadeIn 2s,
    colorChange 2s infinite alternate;
}

@keyframes colorChange {
  from {
    background-color: orangered;
  }
  to {
    background-color: lightcoral;
  }
}

.wifi-icon-ios-wifi {
  width: 120px;
  margin-right: 10px;
}

.close-btn-ios-wifi {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
}

.retry-button-ios-wifi {
  background-color: white;
  color: rgba(255, 0, 0, 0.8);
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  margin-left: 10px;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.retry-button-ios-wifi:hover {
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
}

.LogiPaq-wifi {
  font-family: "Titan One", sans-serif;
  font-size: 1.5rem;
  color: yellow;
}
/* FIN WIFI */

/* ALERTA MERCADO LIBRE - Estilo Danger */
.alert-danger-ml {
  text-align: center;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 12px;
  padding: 15px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  color: #721c24;
  margin-top: -8px;
}

.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;
}

.alert-ios2-ml {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 12px;
  padding: 15px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  color: #155724;
  margin-top: -8px;
}

#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;
}

.modal-meli .input-group-text {
  padding: 2px;
  background-color: #1e90ff;
}

.modal-meli .input-group .input-group-text i {
  font-size: 1rem !important;
}

.modal-meli .input-group {
  border-radius: 8px;
}

#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;
}
/* FIN STOCK PRECIO */

.status-box-stock-Facturacion {
  text-align: center;
  padding: 3px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  background-color: #ecf0f1;
  z-index: 0;
  padding-top: 21px;
  margin-top: -35px;
  border-radius: 20px;
  padding-top: 40px;
}

.status-box-stock-Facturacion-Full {
  text-align: center;
  padding: 3px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  background-color: #ecf0f1;
  z-index: 0;
  padding-top: 21px;
  margin-top: -38px;
  border-radius: 20px;
  padding-top: 40px;
}

/* ============================================
   STOCK FACTURACION
   ============================================ */
.stock-normal-stock-Facturacion,
.stock-pi-normal-stock-Facturacion,
.stock-bajo-stock-Facturacion,
.stock-pi-bajo-stock-Facturacion,
.sin-stock-Facturacion {
  font-family: "Rubik", sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: -0.15px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  line-height: 1;
  user-select: none;
}

/* ✅ STOCK OK (verde macOS) */
.stock-normal-stock-Facturacion {
  color: #1f7a1f;
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.1);
}

/* ✅ PI OK (morado premium) */
.stock-pi-normal-stock-Facturacion {
  color: #6d28d9;
  border-color: rgba(109, 40, 217, 0.28);
  background: rgba(109, 40, 217, 0.1);
}

/* ⚠️ STOCK BAJO */
.stock-bajo-stock-Facturacion,
.stock-pi-bajo-stock-Facturacion {
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.12);
}

/* ❌ SIN STOCK */
.sin-stock-Facturacion {
  color: #b42318;
  border-color: rgba(255, 59, 48, 0.3);
  background: rgba(255, 59, 48, 0.1);
}

#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 */


.contenedor-macos-tipeo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  padding: 8px;
  background: rgba(250, 250, 250, 0.75);
  border: 1px solid rgba(200, 200, 200, 0.6);
  border-radius: 16px;
  font-family: "Rubik", sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(5px);
}

.tarjeta-tipeo {
  flex: 1 1 calc(25% - 8px);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(220, 220, 220, 0.5);
}

.tarjeta-tipeo:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.bloque-info-tipeo {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 6px 10px;
  border-radius: 10px;
  margin-bottom: 6px;
  width: 100%;
  justify-content: center;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background-color 0.2s ease;
}

.bloque-info-tipeo:hover {
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.bloque-info-tipeo-doble {
  display: flex;
  gap: 6px;
  width: 100%;
}

.icono-tipeo {
  margin-right: 6px;
  font-size: 22px;
  color: #2e2e2e;
}

.numero-tipeo {
  font-weight: 500;
  font-size: 25px;
  color: #2e2e2e;
  font-family: "Rubik", sans-serif;
}

.botones-tipeo {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.botones-tipeo .btn {
  border-radius: 50%;
  padding: 2px 7px;
  font-size: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  color: #2e2e2e;
}

.botones-tipeo .btn:hover {
  background-color: rgba(200, 200, 200, 0.2);
  color: white;
}

.contenedor-tipeo-andreani {
  display: flex;
  justify-content: space-around;
  padding: 8px;
  background-color: #f7f7fa;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.texto-etiquetas {
  font-size: 1.2rem;
  margin-left: 5px;
  margin-right: 5px;
  font-family: "Rubik", sans-serif;
}

.rojo-tipeo {
  background-color: #d32f2f;
}
.azul-tipeo {
  background-color: #1976d2;
}
.lila-tipeo {
  background-color: #7b1fa2;
}
.azul-oscuro-tipeo {
  background-color: #0d47a1;
}

@media (max-width: 1024px) {
  .tarjeta-tipeo {
    flex: 1 1 calc(50% - 8px);
  }
}

@media (max-width: 600px) {
  .tarjeta-tipeo {
    flex: 1 1 100%;
  }
}

.total-monto-oca,
.total-monto-andreani,
.total-monto-cds,
.total-monto-andesmar,
.total-monto-icon {
  color: #149c36;
}

.total-monto-contenedor {
  display: flex;
  padding: 8px;
  background-color: rgba(230, 244, 234, 0.7);
  border-radius: 8px;
  border: 1px solid #a5d6a7;
}

/* CIRCULOS LOGISTICA */
.logistica-circulo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0)
  );
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease-in-out;
}

.logistica-circulo img {
  width: 75%;
  height: auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.andreani-tablita {
  background: linear-gradient(to bottom, #d32f2f, #b71c1c);
  border: 1px solid #e57373;
}

.andesmar-tablita {
  background: linear-gradient(to bottom, #1976d2, #0d47a1);
  border: 1px solid #64b5f6;
}

.oca-tablita {
  background: linear-gradient(to bottom, #7b1fa2, #4a148c);
  border: 1px solid #ba68c8;
}

.cruz-del-sur-tablita {
  background: linear-gradient(to bottom, #0d47a1, #002171);
  border: 1px solid #42a5f5;
}

.logistica-texto {
  display: none;
}

.logistica-contenedor {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* FIN CIRCULOS LOGISTICA */

/* BULTOS LOGISTICA */
.bultos-tabla-despacho .bultos-box {
  padding: 8px 16px 8px 44px;
  border-radius: 12px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-weight: 600;
  text-align: left;
  display: inline-block;
  font-family: "Rubik", sans-serif;
  min-width: 60px;
  font-size: 15px;
  position: relative;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: #1c1c1e;
  transition: all 0.3s ease;
}

/* Icono circular base */
.bultos-tabla-despacho .bultos-box::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: white;
  background: rgba(100, 255, 100, 0.3);
}

/* Bultos == 1: Verde estilo glass */
.bultos-tabla-despacho .bultos-box[data-bultos="1"] {
  background: rgba(220, 255, 220, 0.3);
  border: 1px solid rgba(150, 220, 150, 0.4);
  color: #2f662f;
}

.bultos-tabla-despacho .bultos-box[data-bultos="1"]::before {
  content: "✓";
  background: rgba(150, 220, 150, 0.5);
  color: #2f662f;
}

/* Bultos > 1: Rojo cristal + animación */
.bultos-tabla-despacho .bultos-box[data-bultos]:not([data-bultos="1"]) {
  background: rgba(255, 102, 102, 0.25);
  border: 1px solid rgba(255, 80, 80, 0.4);
  color: #a00000;
}

.bultos-tabla-despacho .bultos-box[data-bultos]:not([data-bultos="1"])::before {
  content: "!";
  background: rgba(255, 0, 0, 0.6);
  color: white;
  animation: pulseGlow 1.5s infinite;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0px rgba(255, 100, 0, 0.3);
    transform: translateY(-50%) scale(1);
  }
  50% {
    box-shadow: 0 0 8px rgba(255, 80, 0, 0.4);
    transform: translateY(-50%) scale(1.04);
  }
  100% {
    box-shadow: 0 0 0px rgba(255, 100, 0, 0.3);
    transform: translateY(-50%) scale(1);
  }
}
/* FIN BULTOS LOGISTICA */

.valor-tabla-despacho {
  color: #388e3c;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  text-align: center;
  font-weight: bold;
  margin: 0 auto;
}

.remito-tipeo-os {
  background-color: rgba(255, 255, 255, 0.9);
  color: #007aff;
  padding: 6px 8px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  line-height: 1.5;
}

.seguimiento-contenedor {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #1e1e1e;
  padding: 10px 16px;
  border: 1px solid rgba(200, 200, 200, 0.4);
  border-radius: 12px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.2s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  width: fit-content;
  margin: 0 auto;
}

.seguimiento-contenedor a {
  text-decoration: none;
  color: #007aff;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.seguimiento-contenedor a i {
  font-size: 1.1em;
}

.seguimiento-contenedor:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.04);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.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;
}

.productosRemitoMacOsy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.productoMacOsy {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.2s ease-in-out;
}

.productoMacOsy:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.productoTopMacOsy {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

.productoNombreMacOsy {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1d4ed8;
}

.productoCantidadMacOsy {
  background-color: #e0f2fe;
  margin-left: 10px;
  color: #0284c7;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 800;
}

.productoCantidadMacOsyMasDos {
  background-color: #fee2e2;
  margin-left: 10px;
  color: #b91c1c;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 800;
}

.productoDescripcionMacOsy {
  font-size: 0.8125rem;
  color: #64748b;
  max-width: 30ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
  gap: 6px;
  padding-right: 2px;
}

.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;
}

.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;
}

.btn-cargar-doc {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.8em;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

.btn-cargar-doc:hover {
  background-color: #0069d9;
  transform: translateY(-1px);
}

/* 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;
}

#btnMe2Meli,
#btnFlexMeli,
#btnFlexMeli,
#btnFullMeli,
#btnConvenirMeli,
#btnErroresMeli {
  font-weight: 800;
  font-family: "Signika Negative", sans-serif;
}

#btnMe2Meli i {
  color: purple;
}

#btnFlexMeli i {
  color: orange;
}

#btnErroresMeli i {
  color: red;
}

#btnConvenirMeli i {
  color: var(--c-blue);
}

.btn-divider-vertical {
  display: inline-block;
  width: 2px;
  height: 34px;
  margin: 0 12px;
  align-self: center;
  background: grey;
  border-radius: 999px;
}

@media (max-width: 520px) {
  .btn-divider-vertical {
    height: 30px;
    margin: 0 10px;
    background: rgba(0, 0, 0, 0.12);
  }
}

/* =============== 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 */

/* CELDA DE PAGO MERCADO LIBRE */
.td-payment {
  white-space: nowrap;
}

.pay-card {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e6e9f2;
  background: linear-gradient(180deg, #ffffff, #f6f8fb);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease,
    background 0.2s ease;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.pay-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.08);
}

.pay-left {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: left;
  font-family:
    "Rubik",
    "SF Pro Rounded",
    -apple-system,
    system-ui,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

.pay-logo {
  width: 58px;
  height: 32px;
  object-fit: contain;
  border-radius: 8px;
}

.pay-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 32px;
  border-radius: 8px;
  background: #eef2ff;
  color: #3340a3;
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 0.3px;
  border: 1px solid #dfe5ff;
}

.pay-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pay-title {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.2px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pay-subtitle {
  font-size: 0.7rem;
  color: #5b6477;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pay-right {
  background-color: #e4fbec;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
  padding: 2px 4px;
  border-radius: 10px;
}

.pay-amount {
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.25px;
  font-family:
    "Rubik",
    "SF Pro Rounded",
    -apple-system,
    system-ui,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}
.pay-amount.accent {
  color: #16a34a;
}
.pay-amount.muted {
  color: #7a8499;
  text-shadow: none;
}
/* tono de alerta para RECLAMO */
.pay-amount.warn {
  color: #b45309; /* orange-700 */
}

.pay-badge,
.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);
}

.pay-badge.ok {
  background-color: #22c55e;
  color: #fff;
  border: 1px solid rgba(34, 197, 94, 0.45);
}

.pay-badge.info,
.status-badge.info {
  background: linear-gradient(90deg, #06b6d4, #3b82f6);
  color: #fff;
  border-color: rgba(59, 130, 246, 0.45);
}

.pay-badge.warn,
.status-badge.warn {
  background: linear-gradient(90deg, #f59e0b, #f97316);
  color: #1f2937;
  border-color: rgba(249, 115, 22, 0.4);
}

.pay-badge.danger,
.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);
}

/* ——— Overlay absoluto para el caso RECLAMO + CANCELADO ——— */
.badge-overlay {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 2;
  pointer-events: none;
  padding: 2px 5px;
  border-radius: 0 0 0 5px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.32px;
  line-height: 1;
  /* border: 1px solid transparent; */
  text-transform: uppercase;
  white-space: nowrap;
  /* box-shadow: 0 6px 14px rgba(0, 0, 0, .10); */
}
.badge-overlay.warm {
  background: linear-gradient(90deg, #f59e0b, #f97316); /* warm orange */
  color: #fff;
}

/* ——— ESTADO CANCELADO (rojo) ——— */
.pay-card.is-canceled {
  border-color: #ff0033;
  background: linear-gradient(180deg, #fff5f7 0%, #ffe3e8 100%);
  box-shadow:
    0 0 0 2px rgba(255, 0, 51, 0.22),
    0 12px 28px rgba(255, 0, 51, 0.28);
  position: relative;
  overflow: hidden;
}
.pay-card.is-canceled::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 0, 51, 0.22) 0 7px,
    rgba(255, 0, 51, 0.08) 7px 14px
  );
  opacity: 0.4;
  mix-blend-mode: multiply;
  animation: stripes 1.05s linear infinite;
}
.pay-card.is-canceled::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #ff0033, #ff4b5f);
  box-shadow:
    0 0 0 2px rgba(255, 0, 51, 0.25),
    0 0 16px rgba(255, 0, 51, 0.55);
  animation: barPulse 1.35s ease-in-out infinite;
}
.pay-card.is-canceled .pay-amount {
  color: #8b1a1a;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 0, 51, 0.65);
}

/* ——— ESTADO EN RECLAMO (naranja) ——— */
.pay-card.is-claim {
  border-color: #f97316; /* orange-500 */
  background: linear-gradient(
    180deg,
    #fff7ed 0%,
    #ffedd5 100%
  ); /* amber-50 → orange-100 */
  box-shadow:
    0 0 0 2px rgba(249, 115, 22, 0.22),
    0 12px 28px rgba(249, 115, 22, 0.28);
  position: relative;
  overflow: hidden;
}
.pay-card.is-claim::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(249, 115, 22, 0.22) 0 7px,
    rgba(249, 115, 22, 0.08) 7px 14px
  );
  opacity: 0.4;
  mix-blend-mode: multiply;
  animation: stripes 1.05s linear infinite;
}
.pay-card.is-claim::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(
    180deg,
    #f59e0b,
    #f97316
  ); /* amber-500 → orange-500 */
  box-shadow:
    0 0 0 2px rgba(249, 115, 22, 0.25),
    0 0 16px rgba(249, 115, 22, 0.55);
  animation: barPulseWarn 1.35s ease-in-out infinite;
}
/* En reclamo: no tachamos, solo tono naranja marcado */
.pay-card.is-claim .pay-amount {
  color: #b45309;
}

@keyframes stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 60px 0;
  }
}
@keyframes barPulse {
  0%,
  100% {
    filter: brightness(1);
    box-shadow:
      0 0 0 2px rgba(255, 0, 51, 0.25),
      0 0 14px rgba(255, 0, 51, 0.5);
  }
  50% {
    filter: brightness(1.08);
    box-shadow:
      0 0 0 3px rgba(255, 0, 51, 0.32),
      0 0 20px rgba(255, 0, 51, 0.65);
  }
}
/* Pulso naranja para RECLAMO */
@keyframes barPulseWarn {
  0%,
  100% {
    filter: brightness(1);
    box-shadow:
      0 0 0 2px rgba(249, 115, 22, 0.25),
      0 0 14px rgba(249, 115, 22, 0.5);
  }
  50% {
    filter: brightness(1.08);
    box-shadow:
      0 0 0 3px rgba(249, 115, 22, 0.32),
      0 0 20px rgba(249, 115, 22, 0.65);
  }
}

#data-table td {
  padding-top: 7px;
  padding-bottom: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .pay-card.is-canceled::before,
  .pay-card.is-canceled::after,
  .pay-card.is-claim::before,
  .pay-card.is-claim::after {
    animation: none !important;
  }
}
/* FIN CELDA DE PAGO MERCADO LIBRE */

/* === PRODUCTO (aislado) — avatar circular + badge fuera + SKU === */
.product-cell-meli-chip {
  white-space: nowrap;
}

.product-chip-meli-chip {
  all: unset;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 12px;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.2s ease;
}
.product-chip-meli-chip:hover {
  transform: translateY(-1px);
}
.product-chip-meli-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

/* Wrapper sin overflow para que el badge NO se recorte */
.product-avatar-wrap-meli-chip {
  position: relative;
  width: 64px;
  height: 64px;
  display: inline-block;
}

/* Círculo con overflow hidden SOLO en el avatar */
.product-avatar-meli-chip {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffffff, #f6f8fb);
  border: 1px solid #e6e9f2;
  box-shadow:
    0 4px 12px rgba(16, 24, 40, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}
.product-avatar-meli-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.product-avatar-meli-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.product-avatar-fallback-meli-chip {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

/* Badge de cantidad — por fuera del círculo */
.qty-badge-meli-chip {
  position: absolute;
  right: -6px;
  top: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    #6366f1,
    #3b82f6
  ); /* default: indigo → blue */
  color: #fff;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.2px;
  border: 1px solid rgba(59, 130, 246, 0.5);
  box-shadow:
    0 6px 14px rgba(59, 130, 246, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

/* ALERTA: si cantidad > 1, el CÍRCULO DEL BADGE pasa a rojo */
.qty-badge-meli-chip.is-alert-meli-chip {
  background: linear-gradient(90deg, #ef4444, #f43f5e);
  border-color: rgba(244, 63, 94, 0.5);
  box-shadow:
    0 6px 14px rgba(244, 63, 94, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}

/* SKU pill debajo */
.sku-label-meli-chip {
  font-family: "Rubik", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: #0f172a;
  background: #f2f4f7;
  padding: 3px 8px;
  border-radius: 9999px;
  max-width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

/* Pills dentro del modal */
.macos-style-producto-meli-chip {
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #111827, #0b1324);
  color: #e5e7eb;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 6px 18px rgba(2, 6, 23, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  font-size: 0.88rem;
}
.sku-pill-meli-chip {
  display: inline-flex;
  align-items: center;
  background: #111827;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.product-name-meli-chip {
  color: #cbd5e1;
  font-weight: 500;
}

.no-image-pill-meli-chip {
  background: #f2f4f7;
  color: #334155;
  border: 1px solid #e6e9f2;
  padding: 6px 10px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.8rem;
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce) {
  .product-chip-meli-chip {
    transition: none;
  }
}
/* === 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 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.65);
  animation: spin-macos-meliAr 0.8s linear infinite;
}

@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 */
.qt-body-lock-quey-tandas {
  overflow: hidden;
}

/* ───────────────────────────────────────────── */
/* OVERLAY + MODAL PROPIO (CONFIG + LOADER)     */
/* ───────────────────────────────────────────── */

.qt-overlay-quey-tandas {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.qt-modal-shell-quey-tandas {
  width: min(640px, 96vw);
}

.qt-modal-quey-tandas {
  background: #f5f5f7;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* HEADER macOS */

.qt-modal-header-quey-tandas {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(209, 213, 219, 0.9);
  background: linear-gradient(to bottom, #ffffff, #f3f4f6);
}

.qt-window-dots-quey-tandas {
  display: flex;
  gap: 6px;
}

.qt-window-dots-quey-tandas .dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
}

.qt-window-dots-quey-tandas .dot.red {
  background: #ff5f57;
}

.qt-window-dots-quey-tandas .dot.amber {
  background: #febc2e;
}

.qt-window-dots-quey-tandas .dot.green {
  background: #28c840;
}

.qt-modal-title-group-quey-tandas {
  display: flex;
  flex-direction: column;
}

.qt-modal-title-main-quey-tandas {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: #111827;
}

.qt-modal-subtitle-main-quey-tandas {
  font-size: 13px;
  color: #6b7280;
  margin: 2px 0 0;
}

/* BODY GENÉRICO */

.qt-modal-body-quey-tandas {
  padding: 12px 16px 10px;
  background: #f9fafb;
}

/* FOOTER GENÉRICO */

.qt-modal-footer-quey-tandas {
  padding: 8px 14px 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid rgba(209, 213, 219, 0.9);
  background: #f5f5f7;
}

/* BOTONES */

.qt-btn-primary-quey-tandas,
.qt-btn-secondary-quey-tandas,
.qt-btn-danger-outline-quey-tandas {
  border-radius: 999px;
  font-size: 13px;
  padding: 7px 18px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease-out;
}

.qt-btn-primary-quey-tandas {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #ffffff;
  border-color: rgba(37, 99, 235, 0.95);
}

.qt-btn-primary-quey-tandas:hover {
  background: linear-gradient(135deg, #1d4ed8, #4338ca);
}

.qt-btn-secondary-quey-tandas {
  background: #ffffff;
  color: #4b5563;
  border-color: rgba(209, 213, 219, 1);
}

.qt-btn-secondary-quey-tandas:hover {
  background: #f3f4f6;
}

.qt-btn-danger-outline-quey-tandas {
  background: #ffffff;
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.8);
  font-size: 12px;
  padding: 5px 14px;
}

.qt-btn-danger-outline-quey-tandas:hover {
  background: #fee2e2;
}

/* ───────────────────────────────────────────── */
/* SECCIÓN CONFIGURACIÓN                        */
/* ───────────────────────────────────────────── */

.qt-config-section-quey-tandas {
  margin-bottom: 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(209, 213, 219, 0.9);
  padding: 10px 12px;
}

.qt-config-section-header-quey-tandas h3 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.qt-config-section-header-quey-tandas p {
  margin: 0 0 8px;
  font-size: 12px;
  color: #6b7280;
}

.qt-option-list-quey-tandas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qt-option-item-quey-tandas {
  display: block;
}

.qt-option-item-quey-tandas input[type="radio"] {
  display: none;
}

.qt-option-card-quey-tandas {
  border-radius: 12px;
  border: 1px solid rgba(209, 213, 219, 0.9);
  padding: 9px 10px;
  background: linear-gradient(135deg, #ffffff, #f9fafb);
  cursor: pointer;
  transition: all 0.15s ease-out;
}

.qt-option-title-line-quey-tandas {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.qt-option-icon-quey-tandas {
  font-size: 17px;
}

.qt-option-title-quey-tandas {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.qt-option-desc-quey-tandas {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

.qt-option-card-quey-tandas:hover {
  border-color: rgba(59, 130, 246, 0.85);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.qt-option-item-quey-tandas
  input[type="radio"]:checked
  + .qt-option-card-quey-tandas {
  border-color: rgba(59, 130, 246, 1);
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.45),
    0 10px 25px rgba(15, 23, 42, 0.08);
  background: linear-gradient(135deg, #e0f2fe, #eef2ff);
}

.qt-config-hint-quey-tandas {
  margin: 8px 0 0;
  font-size: 11px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
}

.qt-config-hint-quey-tandas i {
  font-size: 12px;
}

.qt-config-error-quey-tandas {
  margin-top: 6px;
  font-size: 12px;
  color: #b91c1c;
}

/* ───────────────────────────────────────────── */
/* LOADER LAYOUT                                */
/* ───────────────────────────────────────────── */

.qt-loader-layout-quey-tandas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qt-loader-left-quey-tandas,
.qt-loader-right-quey-tandas {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Spinner */

.qt-loader-spinner-wrap-quey-tandas {
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.qt-loader-spinner-quey-tandas {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 3px solid rgba(209, 213, 219, 0.9);
  border-top-color: #2563eb;
  animation: qt-spin-quey-tandas 0.9s linear infinite;
}

@keyframes qt-spin-quey-tandas {
  to {
    transform: rotate(360deg);
  }
}

.qt-loader-text-block-quey-tandas {
  text-align: center;
}

.qt-loader-subtitle-quey-tandas {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.qt-loader-detail-quey-tandas {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

/* Info card derecha */

.qt-loader-info-card-quey-tandas {
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(209, 213, 219, 0.9);
  padding: 8px 10px;
  font-size: 12px;
  color: #374151;
}

.qt-loader-info-card-quey-tandas h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.qt-loader-info-card-quey-tandas ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.qt-loader-info-card-quey-tandas li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
}

.qt-loader-info-card-quey-tandas li span {
  color: #6b7280;
}

.qt-loader-info-card-quey-tandas li strong {
  color: #111827;
}

/* Barra de progreso */

.qt-loader-progress-block-quey-tandas {
  margin-top: 4px;
  padding: 6px 0 0;
}

.qt-loader-bar-bg-quey-tandas {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.qt-loader-bar-fill-quey-tandas {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  transition: width 0.15s ease-out;
}

.qt-loader-progress-row-quey-tandas {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #6b7280;
}

.qt-loader-percent-quey-tandas {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: #111827;
}

/* ───────────────────────────────────────────── */
/* 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         */
/* ───────────────────────────────────────────── */

.qt-loader-footer-hint-quey-tandas {
  font-size: 11px;
  color: #6b7280;
}

/* ───────────────────────────────────────────── */
/* Pantalla de error                            */
/* ───────────────────────────────────────────── */

.qt-error-card-quey-tandas {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.qt-error-icon-quey-tandas {
  font-size: 22px;
  line-height: 1;
}

.qt-error-texts-quey-tandas {
  flex: 1;
}

.qt-error-message-quey-tandas {
  margin: 0 0 4px;
  font-size: 13px;
  color: #991b1b;
  font-weight: 500;
}

.qt-error-hint-quey-tandas {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

/* ───────────────────────────────────────────── */
/* Selector de tandas                           */
/* ───────────────────────────────────────────── */

.qt-tandas-header-quey-tandas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.qt-tandas-header-main-quey-tandas h3 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.qt-tandas-header-main-quey-tandas p {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

.qt-tandas-header-meta-quey-tandas {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.qt-tandas-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);
  font-size: 11px;
  color: #4b5563;
}

.qt-tandas-meta-chip-quey-tandas i {
  font-size: 12px;
}

/* Lista de tandas */

.qt-tandas-list-wrapper-quey-tandas {
  max-height: 52vh;
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid rgba(209, 213, 219, 0.9);
  background: #ffffff;
  padding: 6px 6px 4px;
}

.qt-tandas-list-quey-tandas {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qt-tanda-item-quey-tandas {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.qt-tanda-item-quey-tandas input[type="checkbox"] {
  margin-top: 0;
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

/* Tarjeta de tanda */

.qt-tanda-card-quey-tandas {
  flex: 1;
  border-radius: 12px;
  padding: 7px 10px;
  background: linear-gradient(135deg, #ffffff, #f9fafb);
  border: 1px solid rgba(209, 213, 219, 0.9);
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  transition: all 0.15s ease-out;
}

.qt-tanda-card-main-quey-tandas {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.qt-tanda-name-quey-tandas {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qt-tanda-name-quey-tandas i {
  font-size: 14px;
  color: #4f46e5;
}

.qt-tanda-count-quey-tandas {
  font-size: 12px;
  color: #4b5563;
}

.qt-tanda-card-meta-quey-tandas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.qt-tanda-chip-quey-tandas {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #4338ca;
}

.qt-tanda-item-quey-tandas:hover .qt-tanda-card-quey-tandas {
  border-color: rgba(59, 130, 246, 0.9);
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.3),
    0 10px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

/* Toolbar inferior del selector */

.qt-tandas-toolbar-quey-tandas {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
}

.qt-tandas-toolbar-left-quey-tandas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qt-tandas-toolbar-right-quey-tandas {
  font-size: 11px;
  color: #6b7280;
}

.qt-tandas-toolbar-hint-quey-tandas {
  opacity: 0.9;
}

/* ───────────────────────────────────────────── */
/* Switch tipo iOS para cada tanda               */
/* ───────────────────────────────────────────── */

.qt-tanda-card-meta-row-quey-tandas {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.qt-tanda-switch-wrap-quey-tandas {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Contenedor del switch iOS */
.qt-switch-ios-quey-tandas {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
}

/* Ocultar checkbox original */
.qt-switch-ios-quey-tandas input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Fondo del switch */
.qt-switch-slider-quey-tandas {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background-color: #e5e7eb;
  box-shadow:
    inset 0 0 0 1px rgba(156, 163, 175, 0.7),
    0 0 0 0 rgba(34, 197, 94, 0);
  cursor: pointer;
  transition:
    background-color 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

/* "Pip" del switch */
.qt-switch-slider-quey-tandas::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  top: 2px;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.25),
    0 0 0 0 rgba(34, 197, 94, 0.5);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

/* Estado encendido (verde tipo iOS) */
.qt-switch-ios-quey-tandas input:checked + .qt-switch-slider-quey-tandas {
  background-color: #22c55e;
  box-shadow:
    inset 0 0 0 1px rgba(22, 163, 74, 0.7),
    0 0 0 3px rgba(34, 197, 94, 0.28);
}

.qt-switch-ios-quey-tandas
  input:checked
  + .qt-switch-slider-quey-tandas::before {
  transform: translateX(16px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.28),
    0 0 0 2px rgba(22, 163, 74, 0.4);
}

/* Hover del switch */
.qt-switch-ios-quey-tandas:hover .qt-switch-slider-quey-tandas {
  box-shadow:
    inset 0 0 0 1px rgba(156, 163, 175, 0.9),
    0 0 0 3px rgba(148, 163, 184, 0.25);
}

.qt-switch-ios-quey-tandas input:checked + .qt-switch-slider-quey-tandas:hover {
  box-shadow:
    inset 0 0 0 1px rgba(22, 163, 74, 0.8),
    0 0 0 4px rgba(34, 197, 94, 0.38);
}

/* Tarjeta activa cuando el switch está encendido */
.qt-tanda-card-active-quey-tandas {
  border-color: rgba(34, 197, 94, 0.9);
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.35),
    0 12px 26px rgba(22, 163, 74, 0.18);
  background: linear-gradient(135deg, #ffffff, #ecfdf3);
}

/* Panel de confirmación cuando se presiona "Cancelar" en el loader */
.qt-loader-cancel-confirm-quey-tandas {
  margin-top: 10px;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(248, 250, 252, 0.95),
    rgba(241, 245, 249, 0.95)
  );
  border: 1px solid rgba(148, 163, 184, 0.45);
}

.qt-loader-cancel-confirm-inner-quey-tandas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qt-loader-cancel-confirm-text-quey-tandas {
  margin: 0;
  font-size: 13px;
  color: #0f172a;
}

.qt-loader-cancel-confirm-actions-quey-tandas {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Botón rojo sólido (ya tenemos outline, este es el lleno) */
.qt-btn-danger-quey-tandas {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #ffffff;
  cursor: pointer;
  box-shadow:
    0 8px 18px rgba(239, 68, 68, 0.35),
    0 0 0 1px rgba(127, 29, 29, 0.4);
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    filter 0.12s ease-out;
}

.qt-btn-danger-quey-tandas:hover {
  transform: translateY(-0.5px);
  filter: brightness(1.03);
  box-shadow:
    0 10px 22px rgba(239, 68, 68, 0.4),
    0 0 0 1px rgba(127, 29, 29, 0.5);
}

.qt-btn-danger-quey-tandas:active {
  transform: translateY(0.5px);
  box-shadow:
    0 4px 10px rgba(239, 68, 68, 0.35),
    0 0 0 1px rgba(127, 29, 29, 0.5);
}

/* ====================== 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;
  }
}

/* Contenedor principal del modal */
.etiquetas-modal-mcsono {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: linear-gradient(135deg, #fdfdfd, #f5f5f7);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}

/* Header / Body / Footer */
.modal-header-mcsono {
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
}

.modal-body-mcsono {
  background: radial-gradient(circle at top left, #f5f5f7 0, #ffffff 55%);
  padding-bottom: 0.9rem;
}

.modal-footer-mcsono {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(248, 249, 251, 0.98);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.6rem;
}

.modal-footer-mcsono > * {
  margin: 0;
}

/* Versión mobile: botones del footer apilados */
@media (max-width: 576px) {
  .modal-footer-mcsono {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .footer-btn-primary-mcsono,
  .footer-btn-danger-mcsono {
    width: 100%;
    justify-content: center;
  }
}

/* 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 ====================== */

.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: 0 0 0 2px rgba(37, 99, 235, 0.25);
  border-color: rgba(37, 99, 235, 0.75);
}

/* ====================== BUSCADOR TANDAS ====================== */

.search-container-mcsono {
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  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: 0 8px 20px rgba(15, 23, 42, 0.08);
  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 pill genéricos */
.btn-pill-mcsono {
  border-radius: 999px;
  font-size: 0.78rem;
  padding: 0.3rem 1rem;
}

/* ====================== SPINNER / LOG ====================== */

.spinner-wrapper-mcsono {
  padding: 0.25rem 0 0.5rem;
}

.spinner-mcsono {
  width: 2.25rem;
  height: 2.25rem;
}

.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;
  border-radius: 16px;
  background: rgba(249, 250, 251, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.95);
}

/* Items carpeta / archivo (d-flex viene de Bootstrap) */
.etiqueta-folder-item-mcsono,
.etiqueta-file-item-mcsono {
  border: none;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  background: transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.08s ease,
    box-shadow 0.15s ease,
    border-left-color 0.15s ease;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  position: relative;
  border-left: 3px solid transparent;
  gap: 0.75rem;
}

.etiqueta-folder-item-mcsono:last-child,
.etiqueta-file-item-mcsono:last-child {
  border-bottom: none;
}

/* Hover */
.etiqueta-folder-item-mcsono:hover,
.etiqueta-file-item-mcsono:hover {
  background: linear-gradient(90deg, #eef2ff, #f9fafb);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.06);
  border-left-color: #3b82f6;
  color: #111827;
}

/* 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.86rem;
  color: #0f172a;
}

/* Iconos */
.etiqueta-folder-title-mcsono i {
  color: #f59e0b;
}

.etiqueta-file-title-mcsono i {
  color: #2563eb;
}

/* 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.72rem;
  padding: 0.3rem 0.65rem;
  background: linear-gradient(135deg, #e0f2fe, #dbeafe);
  color: #1d4ed8;
  border-radius: 999px;
  border: 1px solid rgba(129, 140, 248, 0.45);
  cursor: pointer;
  white-space: nowrap;
}

/* Chip de hora con día + hora */
.time-etiquetas-container {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #4b5563;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.time-etiquetas-container i {
  font-size: 0.8rem;
  color: #9ca3af;
}

.time-etiquetas-mcsono {
  font-size: 0.75rem;
  color: inherit;
}

/* ====================== BOTONES ICONO (3 ACCIONES) ====================== */

.btn-icon-mcsono {
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: inline-block; /* sin inline-flex */
  text-align: center;
  line-height: 38px;
  padding: 0;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
  vertical-align: middle;
}

.btn-icon-mcsono + .btn-icon-mcsono {
  margin-left: 0.25rem;
}

.btn-icon-mcsono i {
  font-size: 0.95rem;
  line-height: 1;
}

/* Responsive: que no se rompa en mobile */
@media (max-width: 576px) {
  .etiqueta-folder-item-mcsono,
  .etiqueta-file-item-mcsono {
    flex-wrap: wrap;
    align-items: flex-start !important;
  }

  .etiqueta-folder-actions-mcsono,
  .etiqueta-file-center-mcsono,
  .etiqueta-file-buttons-mcsono {
    margin-top: 0.35rem;
  }

  .etiqueta-file-center-mcsono,
  .etiqueta-file-buttons-mcsono {
    justify-content: flex-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: 999px;
  padding: 0.4rem 1.4rem;
  font-size: 0.82rem;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

/* ====================== OVERLAY COMENTARIO ====================== */

.comment-overlay-mcsono {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(12px);
  display: none;
  z-index: 1055;
}

.comment-container-mcsono {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 100% - 32px);
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(135deg, #ffffff, #f5f5f7);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.comentario-meli-titulo-mcsono {
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.comentario-meli-titulo-mcsono i {
  color: #0ea5e9;
}

.comment-textarea-mcsono {
  border-radius: 12px !important;
  font-size: 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.65);
  background: rgba(255, 255, 255, 0.96);
}

.comment-textarea-mcsono:focus {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.28);
  border-color: rgba(37, 99, 235, 0.9);
}

/* Chip de fecha + hora con dos líneas */
.time-etiquetas-container {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #4b5563;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.time-etiquetas-container i {
  font-size: 0.9rem;
  color: #9ca3af;
  margin-top: 1px; /* para centrar con el texto de dos líneas */
}

/* Contenedor de las dos líneas de texto del chip */
.time-etiquetas-text-mcsono {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Línea numérica: dd/mm • hh:mm */
.time-line-primary-mcsono {
  font-weight: 500;
  color: #111827;
}

/* Línea con texto: viernes 28 de noviembre */
.time-line-secondary-mcsono {
  font-size: 0.7rem;
  color: #6b7280;
  text-transform: lowercase; /* mantiene 'viernes' en minúscula */
}

/* ================== 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;
  }
}

/* CONTENEDOR PRINCIPAL */
.no-data-wrapper-coffe-girls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 38px 18px 42px;
  background: radial-gradient(
    circle at top,
    #ffe6f4 0,
    #fff7ff 40%,
    #f7f8ff 100%
  );
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(255, 105, 180, 0.18);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  animation: fadeIn-coffe-girls 0.6s ease-out;
  position: relative;
  overflow: hidden;
}

/* BADGE SUPERIOR */
.coffee-badge-coffe-girls {
  margin-bottom: 10px;
}

.pill-coffe-girls {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #ffb6e1, #ffd1f2);
  color: #7a255a;
  box-shadow: 0 3px 10px rgba(255, 182, 225, 0.6);
}

/* BLOQUE CAFECITO */
.coffee-icon-wrap-coffe-girls {
  position: relative;
  margin: 6px 0 10px;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Emoji de café, grande */
.coffee-emoji-coffe-girls {
  font-size: 64px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22));
  animation: floatCoffee-coffe-girls 2.6s ease-in-out infinite;
}

/* Vapor */
.steam-line-coffe-girls {
  position: absolute;
  width: 14px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.9)
  );
  opacity: 0;
}

.steam-1-coffe-girls {
  left: 16px;
  bottom: 30px;
  animation: steamRise-coffe-girls 2.3s ease-in-out infinite;
}

.steam-2-coffe-girls {
  right: 14px;
  bottom: 32px;
  animation: steamRise-coffe-girls 2.5s ease-in-out 0.7s infinite;
}

.steam-3-coffe-girls {
  left: 36px;
  bottom: 38px;
  animation: steamRise-coffe-girls 2.8s ease-in-out 1.3s infinite;
}

/* CORAZONCITOS / BRILLITOS */
.floating-heart-coffe-girls {
  position: absolute;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
}

.heart-1-coffe-girls {
  color: #ff6fa9;
  top: 8px;
  left: 10px;
  animation: floatHeart-coffe-girls 3s ease-in-out infinite;
}

.heart-2-coffe-girls {
  color: #ff92c2;
  top: 0;
  right: 6px;
  animation: floatHeart-coffe-girls 3.4s ease-in-out 0.5s infinite;
}

.heart-3-coffe-girls {
  color: #ffd3f5;
  bottom: 8px;
  right: 26px;
  font-size: 16px;
  animation: floatHeart-coffe-girls 3.1s ease-in-out 1s infinite;
}

/* TÍTULO & TEXTOS */
.title-coffe-girls {
  margin: 4px 0 4px;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #3b2342;
  text-align: center;
}

.subtitle-coffe-girls {
  margin: 4px 0 4px;
  font-size: 0.98rem;
  color: #7c5b88;
  text-align: center;
  line-height: 1.5;
}

.tagline-coffe-girls {
  margin-top: 8px;
  font-size: 0.86rem;
  color: #b43f93;
  background: rgba(255, 214, 245, 0.9);
  border-radius: 999px;
  padding: 6px 14px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(255, 167, 221, 0.5);
}

/* ANIMACIONES */
@keyframes fadeIn-coffe-girls {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes floatCoffee-coffe-girls {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes steamRise-coffe-girls {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.7);
  }
  35% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1.05);
  }
}

@keyframes floatHeart-coffe-girls {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.8);
  }
  20% {
    opacity: 1;
  }
  60% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.05);
  }
}

/* === 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;
}

/* ===========================
   MODAL DETALLE DE PAGOS - ESTILO macOS
   Todas las clases comienzan con modal-status-fact
   =========================== */

.modal-status-fact-dialog {
  max-width: 900px;
}

.modal-status-fact-modal {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: radial-gradient(
    circle at top left,
    rgba(255, 255, 255, 0.98),
    rgba(243, 245, 249, 0.98)
  );
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(148, 163, 184, 0.1);
  backdrop-filter: blur(18px);
  animation: modal-status-fact-fade-in 220ms ease-out;
}

/* Header */

.modal-status-fact-header {
  border-bottom: 0;
  padding: 14px 18px 6px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.92),
    rgba(229, 239, 255, 0.9)
  );
}

.modal-status-fact-header-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.modal-status-fact-header-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.modal-status-fact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(56, 189, 248, 0.12);
  color: #0369a1;
}

.modal-status-fact-chip i {
  font-size: 0.9rem;
}

.modal-status-fact-header-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.modal-status-fact-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

.modal-status-fact-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #64748b;
}

.modal-status-fact-subtitle i {
  font-size: 0.9rem;
}

.modal-status-fact-subtitle-strong {
  font-weight: 600;
  color: #0f172a;
}

.modal-status-fact-subtitle-reason {
  margin-top: 2px;
  font-size: 0.8rem;
  color: #475569;
}

.modal-status-fact-header-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.modal-status-fact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.04);
  color: #1d4ed8;
  text-decoration: none;
  transition:
    background 150ms ease,
    box-shadow 150ms ease,
    transform 80ms ease;
}

.modal-status-fact-link i {
  font-size: 0.9rem;
}

.modal-status-fact-link:hover {
  background: rgba(37, 99, 235, 0.1);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
  transform: translateY(-0.5px);
  color: #1d4ed8;
}

.modal-status-fact-subtitle-date {
  font-size: 0.78rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-status-fact-subtitle-date i {
  font-size: 0.9rem;
}

.modal-status-fact-close {
  filter: grayscale(0.2);
}

/* Body */

.modal-status-fact-body {
  padding: 16px 18px 14px;
}

/* Cards */

.modal-status-fact-card {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 12px 12px 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.modal-status-fact-card-main {
  margin-bottom: 10px;
}

.modal-status-fact-card-secondary {
  margin-top: 8px;
}

.modal-status-fact-card-history {
  margin-top: 10px;
}

.modal-status-fact-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.modal-status-fact-card-header i {
  font-size: 1rem;
}

/* Resumen facturable */

.modal-status-fact-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.modal-status-fact-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.83rem;
}

.modal-status-fact-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
}

.modal-status-fact-summary-label i {
  font-size: 0.9rem;
}

.modal-status-fact-summary-value {
  font-weight: 600;
  color: #0f172a;
}

.modal-status-fact-summary-negative {
  color: #b91c1c;
}

.modal-status-fact-summary-total .modal-status-fact-summary-label {
  color: #0f172a;
}

.modal-status-fact-summary-total .modal-status-fact-summary-value {
  font-size: 1rem;
  color: #16a34a;
}

.modal-status-fact-summary-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(148, 163, 184, 0.1),
    rgba(148, 163, 184, 0.4),
    rgba(148, 163, 184, 0.1)
  );
  margin: 4px 0;
}

.modal-status-fact-summary-extra {
  margin-top: 4px;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.95);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal-status-fact-summary-extra-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  color: #6b7280;
}

/* Verificación de montos */

.modal-status-fact-amount-check {
  margin-top: 8px;
  border-radius: 11px;
  padding: 8px 9px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
}

.modal-status-fact-amount-check i {
  font-size: 1.1rem;
  margin-top: 1px;
}

.modal-status-fact-amount-title {
  font-weight: 600;
  margin-bottom: 1px;
}

.modal-status-fact-amount-text {
  color: #4b5563;
}

.modal-status-fact-amount-check-ok {
  background: rgba(22, 163, 74, 0.09);
  color: #166534;
  border: 1px solid rgba(22, 163, 74, 0.3);
}

.modal-status-fact-amount-check-warning {
  background: rgba(245, 158, 11, 0.08);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

/* Datos de la operación */

.modal-status-fact-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.modal-status-fact-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 2px 0;
  border-bottom: 1px dashed rgba(226, 232, 240, 0.8);
}

.modal-status-fact-meta-row:last-child {
  border-bottom: none;
}

.modal-status-fact-meta-label {
  color: #6b7280;
}

.modal-status-fact-meta-value {
  font-weight: 500;
  color: #0f172a;
}

/* Pills de estado */

.modal-status-fact-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}

.modal-status-fact-pill i {
  font-size: 0.85rem;
}

/* Estados: verde, rojo, naranja, etc. */

.modal-status-fact-pill-approved {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.35);
  color: #166534;
}

.modal-status-fact-pill-pending {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.45);
  color: #92400e;
}

.modal-status-fact-pill-cancelled {
  background: rgba(248, 113, 113, 0.09);
  border-color: rgba(248, 113, 113, 0.5);
  color: #b91c1c;
}

.modal-status-fact-pill-rejected {
  background: rgba(239, 68, 68, 0.09);
  border-color: rgba(239, 68, 68, 0.6);
  color: #991b1b;
}

.modal-status-fact-pill-refunded {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.45);
  color: #0369a1;
}

.modal-status-fact-pill-neutral {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.5);
  color: #4b5563;
}

/* Pagos aprobados */

.modal-status-fact-payments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}

.modal-status-fact-payment-card {
  border-radius: 11px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: linear-gradient(
    135deg,
    rgba(248, 250, 252, 0.98),
    rgba(255, 255, 255, 0.98)
  );
  padding: 8px 9px;
}

.modal-status-fact-payment-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.modal-status-fact-payment-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
}

.modal-status-fact-payment-title i {
  font-size: 0.95rem;
}

.modal-status-fact-payment-id {
  margin-top: 1px;
  font-size: 0.75rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
}

.modal-status-fact-payment-body {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal-status-fact-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #4b5563;
}

.modal-status-fact-payment-row span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.modal-status-fact-payment-row i {
  font-size: 0.85rem;
}

.modal-status-fact-payment-amount {
  font-weight: 600;
  color: #16a34a;
}

.modal-status-fact-total-approved {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed rgba(226, 232, 240, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
}

.modal-status-fact-total-approved-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0f172a;
  font-weight: 500;
}

.modal-status-fact-total-approved-label i {
  font-size: 0.9rem;
}

.modal-status-fact-total-approved-value {
  font-weight: 700;
  color: #0f172a;
}

/* Timeline de intentos */

.modal-status-fact-timeline {
  position: relative;
  padding-left: 8px;
  max-height: 210px;
  overflow-y: auto;
}

.modal-status-fact-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(148, 163, 184, 0.2),
    rgba(148, 163, 184, 0.5)
  );
}

.modal-status-fact-timeline-item {
  position: relative;
  padding-left: 10px;
  margin-bottom: 6px;
}

.modal-status-fact-timeline-dot {
  position: absolute;
  left: -1px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid #e5e7eb;
  background: #f9fafb;
}

/* Reutilizamos los colores de los pills para el borde del dot */

.modal-status-fact-timeline-dot.modal-status-fact-pill-approved {
  border-color: rgba(22, 163, 74, 0.8);
  background: rgba(22, 163, 74, 0.8);
}

.modal-status-fact-timeline-dot.modal-status-fact-pill-pending {
  border-color: rgba(245, 158, 11, 0.9);
  background: rgba(245, 158, 11, 0.9);
}

.modal-status-fact-timeline-dot.modal-status-fact-pill-cancelled,
.modal-status-fact-timeline-dot.modal-status-fact-pill-rejected {
  border-color: rgba(239, 68, 68, 0.9);
  background: rgba(239, 68, 68, 0.9);
}

.modal-status-fact-timeline-dot.modal-status-fact-pill-refunded {
  border-color: rgba(56, 189, 248, 0.9);
  background: rgba(56, 189, 248, 0.9);
}

.modal-status-fact-timeline-card {
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(248, 250, 252, 0.98);
  padding: 6px 8px;
}

.modal-status-fact-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.modal-status-fact-timeline-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #0f172a;
}

.modal-status-fact-timeline-title i {
  font-size: 0.9rem;
}

.modal-status-fact-timeline-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.modal-status-fact-timeline:not(
    :has(.modal-status-fact-timeline-item)
  )::before {
  display: none;
}

.modal-status-fact-timeline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  color: #4b5563;
}

.modal-status-fact-timeline-row span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.modal-status-fact-timeline-row i {
  font-size: 0.85rem;
}

/* Mensajes vacíos */

.modal-status-fact-empty {
  margin: 4px 0;
  font-size: 0.78rem;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Footer */

.modal-status-fact-footer {
  border-top: 0;
  padding: 8px 18px 10px;
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.98),
    rgba(241, 245, 249, 0.98)
  );
}

.modal-status-fact-footer-left {
  flex: 1;
}

.modal-status-fact-footer-text {
  font-size: 0.75rem;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Animación */

@keyframes modal-status-fact-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsivo */

@media (max-width: 767.98px) {
  .modal-status-fact-header-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .modal-status-fact-header-links {
    align-items: flex-start;
  }

  .modal-status-fact-body {
    padding: 12px 14px 10px;
  }

  .modal-status-fact-card {
    padding: 10px 10px 8px;
  }

  .modal-status-fact-payments-list,
  .modal-status-fact-timeline {
    max-height: 220px;
  }
}

/* Resumen de métodos de pago dentro de la celda */
.pay-methods-summary {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}

.pay-method-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
}

.pay-method-main {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.pay-method-label {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #374151;
}

.pay-logo-mini,
.pay-logo-mini-fallback {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  object-fit: contain;
  background: #f3f4f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: #4b5563;
}

/* Barrita de porcentaje */
.pay-method-bar-outer {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  overflow: hidden;
}

.pay-method-bar-inner {
  height: 100%;
  border-radius: 999px;
  background: #22c55e; /* verde suave */
}

.pay-method-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}

.pay-method-percent {
  font-weight: 600;
  color: #111827;
}

.pay-method-money {
  font-size: 0.68rem;
  color: #6b7280;
}

/* Logos apilados cuando hay varios medios */
.pay-logo-stack-wrap {
  position: relative;
  width: 52px;
  height: 26px;
}

.pay-logo-stack {
  position: absolute;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: contain;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: #fff;
}

/* MEDIOS DE ENVIO */
/* ===========================
   MEDIOS DE ENVÍO – limpio / legible
   =========================== */

/* Celda envío */
.shipping-cell-style-meli {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  padding: 6px 10px;
  vertical-align: middle;
  text-align: left;
}

/* Chip base */
.shipping-chip-style-meli {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px; /* ▶ apenas redondeado */
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 0.75rem;
  color: #0f172a;
  max-width: 260px;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.shipping-chip-style-meli:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  cursor: pointer;
}

/* Icono cuadradito */
.shipping-chip-icon-style-meli {
  width: 22px;
  height: 22px;
  border-radius: 6px; /* ▶ menos redondo */
  background: #f3f4f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: #4b5563;
}

/* Texto principal + secundario */
.shipping-chip-text-style-meli {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.shipping-chip-main-style-meli {
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shipping-chip-sub-style-meli {
  font-size: 0.68rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tag extra (ej: prov. especial) */
.shipping-chip-tag-style-meli {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  color: #4b5563;
}

/* ===========================
   VARIANTES POR TIPO DE ENVÍO
   =========================== */

/* FULL */
.shipping-chip-full-style-meli {
  background: #f0fdf4;
  border-color: #22c55e;
}

.shipping-chip-full-style-meli .shipping-chip-icon-style-meli {
  background: #dcfce7;
  color: #15803d;
}

/* CROSS DOCKING */
.shipping-chip-cross-style-meli {
  background: #fffbeb;
  border-color: #fbbf24;
}

.shipping-chip-cross-style-meli .shipping-chip-icon-style-meli {
  background: #fef3c7;
  color: #b45309;
}

/* ===========================
   FACTURAR EXPRESS (condición 40–60)
   =========================== */

.shipping-chip-express-style-meli {
  border-width: 2px;
  border-color: #2563eb;
  background: #e5efff;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.shipping-chip-express-style-meli::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #38bdf8, #2563eb);
}

.shipping-chip-express-style-meli .shipping-chip-main-style-meli {
  color: #1d4ed8;
  font-weight: 700;
  text-transform: uppercase;
}

.shipping-chip-express-style-meli .shipping-chip-sub-style-meli {
  color: #1e40af;
}

.shipping-chip-express-style-meli .shipping-chip-icon-style-meli {
  background: #dbeafe;
  color: #1d4ed8;
}

/* ===========================
   FACTURAR EXPRESS (forzado reciente)
   =========================== */

.shipping-chip-express2-style-meli {
  border-width: 2px;
  border-color: #7c3aed;
  background: #ede9fe;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.25);
}

.shipping-chip-express2-style-meli::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #a855f7, #4f46e5);
}

.shipping-chip-express2-style-meli .shipping-chip-main-style-meli {
  color: #4f46e5;
  font-weight: 700;
  text-transform: uppercase;
}

.shipping-chip-express2-style-meli .shipping-chip-sub-style-meli {
  color: #4338ca;
}

.shipping-chip-express2-style-meli .shipping-chip-icon-style-meli {
  background: #e0e7ff;
  color: #4338ca;
}

/* 🔥 Animación del rayito (icono dentro del chip EXPRESS) */
.shipping-chip-express-style-meli .shipping-chip-icon-style-meli i,
.shipping-chip-express2-style-meli .shipping-chip-icon-style-meli i {
  display: inline-block;
  animation: lightning-pulse-style-meli 1.4s infinite ease-in-out;
  transform-origin: center;
}

/* Keyframes del pulso del rayo – suave */
@keyframes lightning-pulse-style-meli {
  0% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(251, 191, 36, 0);
    opacity: 0.9;
  }
  20% {
    transform: scale(1.12);
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.7);
    opacity: 1;
  }
  40% {
    transform: scale(0.97);
    text-shadow: 0 0 3px rgba(251, 191, 36, 0.4);
  }
  70% {
    transform: scale(1.04);
    text-shadow: 0 0 4px rgba(251, 191, 36, 0.5);
    opacity: 0.95;
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(251, 191, 36, 0);
    opacity: 0.9;
  }
}

/* LOCALIDAD EXPRESS SIN STOCK DEP 60 */
.shipping-chip-express-local-style-meli {
  background: #fef2f2;
  border-color: #f97373;
}

.shipping-chip-express-local-style-meli .shipping-chip-icon-style-meli {
  background: #fee2e2;
  color: #b91c1c;
}

/* ALERTA: provincias prohibidas / especial */
.shipping-chip-alert-style-meli {
  background: #fef2f2;
  border-color: #ef4444;
}

.shipping-chip-alert-style-meli .shipping-chip-icon-style-meli {
  background: #fee2e2;
  color: #b91c1c;
}

.shipping-chip-tag-alert-style-meli {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* ENVÍO GRATIS */
.shipping-chip-free-style-meli {
  background: #ecfeff;
  border-color: #22d3ee;
}

.shipping-chip-free-style-meli .shipping-chip-icon-style-meli {
  background: #cffafe;
  color: #0369a1;
}

/* ENVÍO CON CARGO */
.shipping-chip-cost-style-meli {
  background: #eef2ff;
  border-color: #4f46e5;
}

.shipping-chip-cost-style-meli .shipping-chip-icon-style-meli {
  background: #e0e7ff;
  color: #4338ca;
}

/* SIN DATOS / GHOST */
.shipping-chip-ghost-style-meli {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.shipping-chip-ghost-style-meli .shipping-chip-icon-style-meli {
  background: #e5e7eb;
  color: #6b7280;
}
/* FIN MEDIOS DE ENVIO */

/* ================================
   FECHA / HORA MELI FACTURACION
   ================================ */

.date-cell-style-meli {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  padding: 6px 10px;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
}

.date-line-style-meli {
  display: flex;
  align-items: center;
  gap: 6px;
}

.date-line-sub-style-meli {
  margin-top: 2px;
}

.date-icon-style-meli {
  font-size: 0.85rem;
  color: #6b7280;
  flex-shrink: 0;
}

.date-text-main-style-meli {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.date-text-sub-style-meli {
  font-size: 0.72rem;
  color: #6b7280;
}

.link-img-cell-style-meli {
  padding: 4px 8px;
  vertical-align: middle;
  text-align: left;
}

.link-img-style-meli {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.link-img-icon-style-meli {
  display: block;
  height: 35px;
  width: auto;
}
/* ================================
   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;
  background-color: rgba(248, 250, 252, 0.7) !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-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* =========================
   CPS badges - (PlaceIt)
   ========================= */
.cp-badges-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 2px;
  align-items: center;
}

.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;
}

.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 (estilo Mercado Libre) ===== */
.status-automata {
  margin-top: 8px;

  display: inline-flex;
  align-items: flex-start;
  gap: 10px;

  width: min(240px, 100%);
  max-width: 240px;
  min-width: 0;

  contain: inline-size;

  padding: 10px 11px;
  border-radius: 16px;

  background:
    radial-gradient(
      140px 90px at 15% 0%,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      160px 110px at 90% 105%,
      rgba(255, 255, 255, 0.35),
      rgba(255, 255, 255, 0) 68%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.74));
  border: 1px solid rgba(0, 0, 0, 0.1);

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);

  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  color: #1d1d1f;

  position: relative;
  overflow: hidden;
}

.status-automata::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.55),
      rgba(255, 255, 255, 0) 38%
    ),
    linear-gradient(
      315deg,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0) 52%
    );
  pointer-events: none;
  opacity: 0.9;
}

.status-automata::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -30%;
  width: 160%;
  height: 120%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0) 58%
  );
  transform: rotate(12deg);
  pointer-events: none;
}

.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;
}

.status-automata-text {
  display: flex;
  flex-direction: column;
  gap: 2px;

  min-width: 0;
  max-width: 100%;
}

.status-automata-line {
  font-size: 12.25px;
  font-weight: 750;
  letter-spacing: -0.2px;
  line-height: 1.15;

  min-width: 0;
  max-width: 100%;

  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.status-automata.is-error {
  color: #e53935;
  border-color: rgba(229, 57, 53, 0.24);
}

.status-automata.is-ok {
  color: #00a650;
  border-color: rgba(0, 166, 80, 0.22);
}

.status-automata.is-warn {
  color: #ff8f00;
  border-color: rgba(255, 143, 0, 0.24);
}

.status-automata.is-neutral {
  color: #6e6e73;
  border-color: rgba(110, 110, 115, 0.22);
}

.status-automata-content {
  text-align: left;
}

.ml-user-chip {
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px 6px;
  width: fit-content;
  max-width: 150px;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);

  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);

  cursor: pointer;
  user-select: none;

  overflow: hidden;
}

.ml-user-chip:hover {
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.ml-user-ico {
  font-size: 14px;
  color: #1e90ff;
  flex: 0 0 auto;
}

.ml-user-text {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: -0.2px;
  color: #1d1d1f;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}
/* ===== 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-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9998;
}

.notif-drawer {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(440px, calc(100vw - 24px));
  transform: translateX(calc(100% + 24px));
  transition: transform 0.22s ease;
  z-index: 9999;

  border-radius: 18px;
  background: rgba(18, 18, 24, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 26px 74px rgba(0, 0, 0, 0.45);
  overflow: hidden;

  color: rgba(255, 255, 255, 0.96);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial;
}

.notif-drawer.open {
  transform: translateX(0);
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.notif-title {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.notif-header-actions {
  display: flex;
  gap: 8px;
}

.notif-mini-btn {
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
  transition:
    background 0.12s ease,
    transform 0.12s ease,
    border-color 0.12s ease;
}

.notif-mini-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.notif-body {
  height: calc(80% - 70px - 70px);
  overflow: auto;
  padding: 12px;
}

/* ===== Filtros ===== */
.notif-filters {
  padding: 10px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
}

.notif-filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.notif-input {
  width: 100%;
  height: 38px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
  padding: 0 12px;
  outline: none;
}

.notif-input::placeholder {
  color: rgba(235, 235, 245, 0.45);
}

.notif-filter-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

.notif-clear-btn {
  height: 34px;
  border-radius: 12px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
}

.notif-clear-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ===== estados ===== */
.notif-loading {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
}

.notif-empty {
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  opacity: 0.95;
}

/* ===== separador día ===== */
.notif-day-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 2px 10px;
  opacity: 0.95;
}

.notif-day-sep:before,
.notif-day-sep:after {
  content: "";
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  flex: 1;
}

.notif-day-sep span {
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ===== tarjeta ===== */
.notif-card {
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
  margin-bottom: 10px;
}

.notif-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22);
}

.notif-card.unseen {
  border-color: rgba(255, 204, 0, 0.38);
  box-shadow: 0 18px 56px rgba(255, 204, 0, 0.12);
}

.notif-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.notif-time {
  font-size: 12px;
  opacity: 0.78;
  white-space: nowrap;
}

.notif-main {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.25rem;
}

.notif-title-line {
  font-weight: 900;
  margin-bottom: 5px;
}

.notif-subline {
  opacity: 0.86;
}

.notif-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  opacity: 0.92;
}

.notif-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.notif-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.notif-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: #fff !important;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-weight: 900;
  margin-bottom: 10px;
  transition: background-color 0.12s ease;
}

.notif-link:hover {
  background: orangered;
  color: white;
}

.notif-json-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 900;
  margin-bottom: 10px;
  transition: background-color 0.12s ease;
}

.notif-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 900;
  margin-bottom: 10px;
  transition: background-color 0.12s ease;
}

.notif-save-btn:hover {
  background-color: grey;
  color: white;
}

.notif-json-btn:hover {
  background-color: orangered;
  color: white;
}

.notif-json {
  margin-top: 10px;
  display: none;
  font-size: 11px;
  line-height: 1.05rem;
  white-space: pre-wrap;
  background: rgb(255 255 255 / 24%);
  color: whitesmoke;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 10px;
  max-height: 220px;
  overflow: auto;
}

/* ===== comentario ===== */
.notif-comment {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}

.notif-comment-input {
  width: 100%;
  min-height: 100px;
  max-height: 180px;
  overflow: auto;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
  padding: 9px 12px;
  outline: none;
  line-height: 1.35;
  font: inherit;
}

.notif-comment-input::placeholder {
  color: rgba(235, 235, 245, 0.42);
}

.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);
}

/* ===== pager ===== */
.notif-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.notif-pager-btn {
  border-radius: 14px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 900;
}

.notif-pager-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.notif-pager-info {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 900;
}

@media (max-width: 420px) {
  .notif-drawer {
    width: calc(100vw - 24px);
  }
  .notif-comment {
    grid-template-columns: 1fr;
  }
  .notif-comment-save {
    width: 100%;
  }
}

#notifDrawer > div {
  font-family: "Signika Negative", sans-serif;
}

: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;
}

/* Badge base: SOLO iconos con .ic (así no afecta botones) */
.notif-card i.bi.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;
  border-radius: 999px;

  margin-right: 6px;
  vertical-align: middle;

  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(142, 142, 147, 0.16);
  color: var(--c-gray);

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);

  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.18));
}

/* Ajuste visual cuando está dentro de chips (un toque más compacto) */
.notif-card .notif-chip i.bi.ic {
  width: 18px;
  height: 18px;
  margin-right: 7px;
}

/* Colores por ícono (badge tint) */
.notif-card i.bi-check-circle-fill.ic,
.notif-card i.bi-check2-circle.ic {
  background: rgba(52, 199, 89, 0.18);
  color: var(--c-green);
  box-shadow:
    0 10px 26px rgba(52, 199, 89, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.notif-card i.bi-dot.ic,
.notif-card i.bi-exclamation-circle.ic {
  background: rgba(255, 159, 10, 0.18);
  color: var(--c-orange);
  box-shadow:
    0 10px 26px rgba(255, 159, 10, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.notif-card i.bi-x-circle.ic,
.notif-card i.bi-exclamation-triangle.ic {
  background: rgba(255, 69, 58, 0.18);
  color: var(--c-red);
  box-shadow:
    0 10px 26px rgba(255, 69, 58, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.notif-card i.bi-hourglass-split.ic {
  background: rgba(191, 90, 242, 0.18);
  color: var(--c-purple);
  box-shadow:
    0 10px 26px rgba(191, 90, 242, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.notif-card i.bi-clock.ic,
.notif-card i.bi-receipt.ic {
  background: rgba(10, 132, 255, 0.18);
  color: var(--c-blue);
  box-shadow:
    0 10px 26px rgba(10, 132, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.notif-card i.bi-envelope.ic {
  background: rgba(94, 92, 230, 0.18);
  color: var(--c-indigo);
  box-shadow:
    0 10px 26px rgba(94, 92, 230, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.notif-card i.bi-arrow-repeat.ic {
  background: rgba(100, 210, 255, 0.18);
  color: var(--c-teal);
  box-shadow:
    0 10px 26px rgba(100, 210, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* ===== 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 ==================== */

/* ================== Botón Orden Fecha (sin shadow en badges) ================== */
#btnOrdenFecha.btn-orden-fecha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  line-height: 1;
}

#btnOrdenFecha .orden-labels {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#btnOrdenFecha .orden-arrow {
  font-weight: 800;
  color: rgba(60, 60, 67, 0.55);
  transition: transform 160ms ease;
}

#btnOrdenFecha.orden-asc .orden-arrow {
  transform: scaleX(-1);
}

#btnOrdenFecha .orden-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  border-radius: 999px;
  box-shadow: none;
  font-family: "Signika Negative", sans-serif;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(28, 28, 30, 0.82);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

#btnOrdenFecha .orden-badge--active {
  background: rgba(0, 122, 255, 0.14);
  border-color: rgba(0, 122, 255, 0.28);
  color: rgba(0, 122, 255, 0.95);
}

#btnOrdenFecha.btn-orden-fecha:hover .orden-badge {
  background: rgba(0, 0, 0, 0.075);
}
#btnOrdenFecha.btn-orden-fecha:hover .orden-badge--active {
  background: rgba(0, 122, 255, 0.16);
}

@media (max-width: 520px) {
  #btnOrdenFecha.btn-orden-fecha {
    padding: 8px 10px;
    gap: 8px;
  }
  #btnOrdenFecha .orden-badge {
    padding: 4px 9px;
  }
}

.status-automata-line {
  font-family: "Signika Negative", sans-serif;
  font-size: 12px;
}

.pay-badge.muted {
  background-color: orangered;
  color: white;
  font-weight: bold;
}

/* ==================== 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;
}

.warning-btn-coment-meli {
  background: rgba(13, 110, 253, 0.86) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

.warning-btn-coment-meli i {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}
/* ============================
   🚚 TRACKING
   ============================ */
.base-btn-track-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,
    box-shadow 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;
  cursor: pointer;
}

.base-btn-track-meli:hover {
  transform: translateY(-1px) scale(1.05);
  filter: brightness(1.14) saturate(1.12);
}

.base-btn-track-meli:active {
  transform: translateY(0px) scale(0.98);
  filter: brightness(1.06);
}

.base-btn-track-meli i {
  font-size: 17px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.38));
}

.success-btn-track-meli {
  background: rgba(13, 110, 253, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

.neutral-btn-track-meli {
  background: rgba(55, 55, 55, 0.58) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

.base-btn-track-meli.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  filter: none !important;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* ============================
   🫧 POPOVER TRACKING
   ============================ */
.track-cell-wrapper-meli {
  position: relative;
}

.track-popover-meli {
  position: absolute;
  top: 48px;
  left: -15%;
  transform: translateX(-50%);

  min-width: 235px;
  max-width: 280px;

  padding: 12px 14px;
  border-radius: 18px;

  background: rgba(18, 18, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);

  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);

  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.46),
    0 10px 22px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  z-index: 99999;
}

.track-popover-meli::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  display: none;
  background: rgba(18, 18, 18, 0.78);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.track-popover-meli.hidden {
  display: none;
}

.track-popover-title-meli {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 8px;
}

.track-dot-meli {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(13, 110, 253, 0.96);
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.18);
}

.track-popover-body-meli {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.track-number-meli {
  font-size: 13.5px;
  letter-spacing: 0.35px;
  font-weight: 800;
  color: #fff;

  padding: 9px 12px;
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.track-note-meli {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}

.track-link-meli {
  text-decoration: none;
  font-size: 12.8px;
  font-weight: 900;

  padding: 9px 12px;
  border-radius: 14px;

  background: rgba(13, 110, 253, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.24);
  transition:
    transform 140ms ease,
    filter 140ms ease,
    box-shadow 140ms ease;
}

.track-link-meli:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.3);
}

/* ============================
   🗑️ 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;
}

/* ============================ SELECTOCTOR DE ESTADO Y PEDIDO MERCADO LIBRE ============================ */
.ios-style-id,
.ios-style-id-2,
.ios-style-paqId,
.ios-style-cliente {
  font-family: "Signika Negative", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ios-style-id,
.ios-style-id-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, #2196f3, rgb(0 90 181));
  text-align: center;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    filter 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
  z-index: 1000;
  font-variant-numeric: tabular-nums;
}

.ios-style-id {
  border-radius: 14px 14px 0 0;
}
.ios-style-id-2 {
  border-radius: 8px 8px 0 0;
}

.ios-style-id strong,
.ios-style-id-2 strong {
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

.ios-style-id:hover,
.ios-style-id-2:hover {
  filter: brightness(1.06);
  background: linear-gradient(180deg, rgba(40, 145, 255), rgba(10, 132, 255));
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.ios-style-id-container > select {
  width: 100%;
  margin-bottom: 0 !important;
  border: 1px solid rgba(10, 132, 255, 0.35);
  border-top: 0;
  border-radius: 0 0 12px 12px !important;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 650;
  color: rgba(20, 20, 20, 0.92);
  outline: none;
  text-transform: uppercase;
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    filter 0.18s ease;
  z-index: 100;
}

.ios-style-id-container > select:focus {
  border-color: rgba(10, 132, 255, 0.55);
  box-shadow:
    0 0 0 4px rgba(10, 132, 255, 0.18),
    0 12px 26px rgba(0, 0, 0, 0.12);
}

.ios-style-paqId {
  height: 40px;
  display: flex;
  justify-content: center;
  padding-top: 3px;
  position: relative;
  margin-bottom: -15px;
  border-radius: 12px 12px 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: linear-gradient(
    180deg,
    rgba(255, 170, 0, 0.98),
    rgba(230, 120, 0, 0.86)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  z-index: 1;
}

.ios-style-cliente {
  display: flex;
  align-items: none;
  justify-content: center;
  padding-top: 3px;
  height: 40px;
  padding-bottom: 0;
  position: relative;
  margin-bottom: -15px;
  border-radius: 12px 12px 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: linear-gradient(
    180deg,
    rgba(112, 50, 255, 0.98),
    rgba(75, 0, 130, 0.86)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  z-index: 1;
}

.ios-style-cliente img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-right: 6px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
/* ============================ FIN SELECTOCTOR DE ESTADO Y PEDIDO MERCADO LIBRE ============================ */

/* ============================ MODAL FACTURACION AUTOMATICA MERCADO LIBRE ============================ */
.fact-autom-meli-loading {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.fact-autom-meli-loading-text {
  font-weight: 800;
  color: rgba(17, 24, 39, 0.75);
  letter-spacing: 0.2px;
}

.fact-autom-meli-top {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 6px 14px 6px;
}

.fact-autom-meli-top-title {
  font-size: 14px;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 950;
  font-weight: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(17, 24, 39, 0.92);
  letter-spacing: 0.15px;
}

.fact-autom-meli-top-sub {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 10px;
  font-size: 14px;
  margin-top: 4px;
  color: rgba(17, 24, 39, 0.62);
  font-weight: 800;
}

.fact-autom-meli-top-right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.fact-autom-meli-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 991px) {
  .fact-autom-meli-grid {
    grid-template-columns: 1fr;
  }
}

.fact-autom-meli-card {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  border-radius: 18px;
  font-weight: 10px;
  padding: 14px 14px 10px 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 12px;
}

.fact-autom-meli-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  color: rgba(17, 24, 39, 0.92);
  margin-bottom: 8px;
  letter-spacing: 0.15px;
  background-color: #1d4ed8;
  color: white;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 5px;
}

.fact-autom-meli-card-body {
  padding-top: 4px;
}

.fact-autom-meli-kv {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.fact-autom-meli-kv:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.fact-autom-meli-kv-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 10px !important;
  font-weight: 850;
  color: rgba(17, 24, 39, 0.7);
}

.fact-autom-meli-kv-value {
  text-align: right;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.92);

  max-width: 58%;
  word-break: break-word;
  letter-spacing: 0.1px;
}

.fact-autom-meli-na {
  color: #ff3b30;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fact-autom-meli-amount {
  font-weight: 950;
  letter-spacing: 0.25px;
}

.fact-autom-meli-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 10px;
  border-radius: 999px;

  font-weight: 950;
  font-size: 0.85rem;

  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.6);

  letter-spacing: 0.15px;
}

.fact-autom-meli-pill--neutral {
  background: rgba(120, 120, 120, 0.14);
  color: rgba(55, 65, 81, 1);
}

.fact-autom-meli-pill--ok {
  background: rgba(16, 185, 129, 0.16);
  color: rgba(4, 120, 87, 1);
}

.fact-autom-meli-pill--pending {
  background: rgba(245, 158, 11, 0.18);
  color: rgba(146, 64, 14, 1);
}

.fact-autom-meli-pill--error {
  background: rgba(239, 68, 68, 0.16);
  color: rgba(153, 27, 27, 1);
}

.fact-autom-meli-bool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.1px;
}

.fact-autom-meli-bool--yes {
  color: #00a86b;
}

.fact-autom-meli-bool--no {
  color: #ff3b30;
}
/* ============================ 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);
  box-shadow:
    0 6px 14px rgba(10, 132, 255, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.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));
}

.meli-load-glass {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 34px));
  z-index: 11000;
  font-family: "Signika Negative", sans-serif;
}
.meli-load-glass-inner {
  border-radius: 18px;
  padding: 12px 16px 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.88),
    rgba(249, 251, 255, 0.78)
  );
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(102, 132, 255, 0.23);
  box-shadow: 0 18px 36px rgba(44, 84, 160, 0.24);
}
.meli-load-spinner {
  width: 36px;
  height: 36px;
  object-fit: contain;
  animation: spin-meta-mcsono 1s linear infinite;
  float: left;
  margin-right: 12px;
}
.meli-load-copy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.meli-load-title {
  font-weight: 700;
  color: #26314f;
  font-size: 1.04rem;
}
.meli-load-percent {
  font-weight: 800;
  color: #202f5f;
  font-size: 1.8rem;
  line-height: 1;
}
.meli-load-bar-track {
  clear: both;
  margin-top: 10px;
  height: 18px;
  border-radius: 999px;
  background: rgba(113, 133, 201, 0.22);
  overflow: hidden;
}
.meli-load-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #1f8bff 0%,
    #3d7cff 42%,
    #a95fff 72%,
    #ff4f80 100%
  );
  transition: width 0.24s ease;
}
.meli-load-meta {
  margin-top: 6px;
  color: #5a688e;
  font-weight: 600;
  font-size: 0.86rem;
}

.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;
}
.btn-copy-search-result-meli {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(79, 122, 255, 0.35);
  border-radius: 9px;
  background: linear-gradient(180deg, #fff, #eef3ff);
  color: #3258c4;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.18s ease;
}
.btn-copy-search-result-meli:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(50, 88, 196, 0.2);
}

.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) ====== */
.tanda-search-shell-meli {
  border: 1px solid #d9dee9;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.75rem;
}

.tanda-search-label-meli {
  display: block;
  font-weight: 700;
  color: #344054;
  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 {
  min-height: 44px !important;
  display: block !important;
  background: transparent !important;
  padding: 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.5rem 0.65rem;
  border-radius: 0.35rem;
  border: 1px solid #dbe2ef;
  background: #ffffff;
  color: #24324f;
  font-size: 0.88rem;
}
.tanda-result-main-meli {
  display: flex;
  align-items: center;
  min-width: 0;
}
.tanda-result-loading-meli {
  background: #f8fafc;
}
.tanda-result-success-meli {
  background: #e9f8ef;
  border-color: #bfe7cf;
}
.tanda-result-warn-meli {
  background: #fff7e5;
  border-color: #ffe1a6;
}
.tanda-result-error-meli {
  background: #ffefef;
  border-color: #f7c4c4;
}
.tanda-result-info-meli {
  background: #f1f5ff;
  border-color: #c9d7ff;
}

.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: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 0.45rem;
}

.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;
}