/* Estilos responsivos para tamaños de pantalla - Small, Medium, Large */
/* Reglas base (aplicadas siempre, fuera de media queries) */
.btn-add-km2 {
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important; /* Mantiene el icono de suma centrado verticalmente */
  background-color: #f90f00 !important;
  border: none !important;
  border-radius: 50% !important; /* Fuerza la forma esférica perfecta */
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(249, 15, 0, 0.3) !important;
  margin-top: 18px !important;
  padding: 0 !important; /* Remueve paddings internos heredados de Materialize */
  transition:
    background-color 0.2s,
    transform 0.1s;
}

.btn-add-km2:active {
  transform: scale(0.92) !important;
  background-color: #b71c1c !important;
}

.btn-add-km2 i {
  font-size: 22px !important;
  line-height: 40px !important;
  margin: 0 !important;
}

/**********************************************/

#lista-articulo > ul#listas.grid-articulos {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(250px, 1fr)) !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;
  justify-items: stretch !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

#lista-articulo > ul#listas.grid-articulos > li {
  display: block !important;
  width: auto !important;
  background-color: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#lista-articulo > ul#listas.grid-articulos > li .container-img {
  padding: 12px !important;
  margin: 0 !important;
  border-right: none !important;
}

#lista-articulo > ul#listas.grid-articulos > li .container-img img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 4px !important;
}

#lista-articulo > ul#listas.grid-articulos > li .articulo-titulo,
#lista-articulo > ul#listas.grid-articulos > li h4 {
  padding: 0 12px !important;
}

/* Small only (max-width: 39.9375em = 639px) */
@media screen and (max-width: 39.9375em) {
  body {
    font-size: 14px;
  }

  .tabs .tab a {
    padding: 0 5px;
  }

  .tblcontenedor {
    margin-top: 17px;
  }

  #tblcontenedores tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  #tblcontenedores tbody tr:nth-child(odd) {
    background-color: #ffffff;
  }

  h2 {
    font-size: 2rem;
    line-height: 94%;
    margin: 1.373333rem 0 1.424rem 0;
  }

  h5 {
    font-size: 15px !important;
    /*text-transform: uppercase;*/
    font-weight: bold;
    line-height: 110%;
    margin: 5px;
    text-align: center;
  }

  h6 {
    /* font-size: 9px !important; */
    font-size: 14px !important;
    line-height: 110%;
    margin: 0;
  }

  #modalFiltro {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding-top: 5px;
    padding-bottom: 25px;
    top: 26px !important;
    max-height: 100%;
    height: auto;
    width: 95%;
    margin: auto;
    overflow-y: auto;
    border-radius: 2px;
    will-change: top, opacity;
  }

  .switch,
  .switch * {
    margin-bottom: 15px;
  }

  .switch label .lever {
    content: "";
    display: inline-block;
    position: relative;
    width: 75px;
    height: 34px;
    background-color: #28a745;
    border-radius: 5px;
    margin-right: 10px;
    transition: background 0.3s ease;
    vertical-align: middle;
    margin: 0 16px;
  }

  .switch label .lever:after {
    content: "";
    position: relative;
    display: inline-block;
    width: 37px;
    height: 33px;
    border-radius: 8%;
    left: 38px;
    top: 0px;
    z-index: 2;
    background-color: #a9a4a4;
    box-shadow:
      0px 3px 1px -2px rgb(0 0 0 / 20%),
      0px 2px 2px 0px rgb(0 0 0 / 14%),
      0px 1px 5px 0px rgb(0 0 0 / 12%);
    transition:
      left 0.3s ease,
      background 0.3s ease,
      box-shadow 0.1s ease,
      transform 0.1s ease;
  }

  /* ==========================================================================
   ESTILOS EXCLUSIVOS E AISLADOS PARA EL SWITCH DE LA VISTA PRECIO-KM2
   ========================================================================== */
  .km-switch-timeline.switch,
  .km-switch-timeline.switch * {
    margin-bottom: 4px !important;
  }
  /* 1. Estilo exclusivo para la base/barra (lever) del switch */
  .km-switch-timeline.switch label .lever {
    content: "";
    display: inline-block !important;
    position: relative !important;
    width: 45px !important;
    height: 18px !important;
    background-color: #28a745 !important; /* Verde de fondo */
    border-radius: 5px !important;
    margin-right: 10px !important;
    transition: background 0.3s ease !important;
    vertical-align: middle !important;
    margin: 0 16px !important;
  }

  /* 2. Estilo exclusivo para el botón circular interno (lever:after) */
  .km-switch-timeline.switch label .lever:after {
    content: "";
    position: relative !important;
    display: inline-block !important;
    width: 20px !important;
    height: 18px !important;
    border-radius: 30% !important;
    left: 38px !important;
    top: 0px !important;
    z-index: 2 !important;
    background-color: #a9a4a4 !important;
    box-shadow:
      0px 3px 1px -2px rgb(0 0 0 / 20%),
      0px 2px 2px 0px rgb(0 0 0 / 14%),
      0px 1px 5px 0px rgb(0 0 0 / 12%) !important;
    transition:
      left 0.3s ease,
      background 0.3s ease,
      box-shadow 0.1s ease,
      transform 0.1s ease !important;
  }

  /* 3. Control de comportamiento cuando el switch está apagado (opcional si Materialize lo altera) */
  .km-switch-timeline.switch
    label
    input[type="checkbox"]:not(:checked)
    + .lever {
    background-color: #9e9e9e !important; /* Gris si se desactiva */
  }

  .km-switch-timeline.switch
    label
    input[type="checkbox"]:not(:checked)
    + .lever:after {
    left: 0px !important; /* Devuelve el botón a la izquierda al apagarlo */
    background-color: #f1f1f1 !important;
  }
  /**********************/
  #codigo-barras,
  #cant-pedida {
    text-align: center !important;
    font-size: 1em;
  }

  #cantidadDeRegistros {
    font-size: 12px;
  }

  .inventario-fecha-estilo {
    color: #28a745 !important;
    margin-top: -35px;
    top: 0px !important;
    font-size: 14px !important;
  }

  #theadDetallestrasladosVerif {
    display: none;
  }

  #tblDetallestrasladosVerif tbody,
  #tblDetallestrasladosVerif tr,
  #tblDetallestrasladosVerif td {
    display: block;
    width: 100%;
  }

  #btnDetalleTrasladosVerif {
    width: 100%;
  }

  #tblDetallestrasladosVerif tr {
    margin-bottom: 0.9375em;
    /* 15px en em ≈ 0.9375em */
  }

  #tblDetallestrasladosVerif td {
    position: relative;
    padding-left: 50%;
    /* Espacio para el data-label */
    text-align: left !important;
    /* Sobreescribe alineación */
    border: none;
    /* Opcional */
    box-sizing: border-box;
  }

  #tblDetallestrasladosVerif td:before {
    content: attr(data-label);
    position: absolute;
    left: 0.625em;
    /* 10px ≈ 0.625em */
    width: 45%;
    padding-right: 0.625em;
    /* 10px ≈ 0.625em */
    font-weight: bold;
    text-align: left;
    color: #333;
  }

  #tblDetallestrasladosVerif td[data-label="ARTICULO"] h5,
  #tblDetallestrasladosVerif td[data-label="ARTICULO"] h6 {
    text-align: left !important;
  }

  #tblDetallestrasladosVerif td[colspan] {
    padding-left: 0.625em;
    /* Alinea con el resto en móvil */
    text-align: right !important;
  }

  .download-buttons {
    gap: 0.3em;
    /* Reduce aún más el espacio en móvil si es necesario */
  }

  .paginador-container {
    margin: 20px 10em;
    width: 40%;
  }

  .paginador-controls {
    flex-direction: column;
    /* Apila los elementos verticalmente */
    gap: 5px;
    /* Reduce el espacio entre elementos */
  }

  .paginador-btn-container,
  .paginador-select-container {
    width: 100% !important;
    /* Ocupa todo el ancho disponible */
    text-align: center;
    /* Centra el contenido */
  }

  .paginador-btn {
    display: block;
    padding: 8px;
    /* Más espacio clickable */
  }

  .paginador-select {
    width: 100%;
    /* Select ocupa todo el ancho */
    max-width: 45px;
    /* Limita el ancho máximo */
    margin: 0 auto;
    /* Centra el select */
  }

  #bodegaSelectPack {
    width: 100%; /* Ocupa todo el espacio disponible dentro de su contenedor */
  }

  #bodegaSelectOC {
    width: 100% !important;
    /* Ocupa todo el espacio disponible dentro de su contenedor */
  }

  #bodegaButtonOC {
    width: 100% !important;
    /* Ocupa todo el espacio disponible dentro de su contenedor */
  }

  #lista-articulo li {
    width: 100%;
  }

  #lista-articulo li .container-img {
    padding: 19px;
    margin: 8px 0;
  }

  /* Grid de resultados de búsqueda: 4 columnas en pantallas grandes, responsive en móviles */
  /*#lista-articulo > ul#listas.grid-articulos {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(250px, 1fr)) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    justify-items: stretch !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
  }

  #lista-articulo > ul#listas.grid-articulos > li {
    display: block !important;
    width: 100% !important;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 !important;
  }

  #lista-articulo > ul#listas.grid-articulos > li .container-img {
    padding: 12px !important;
    margin: 0 !important;
    border-right: none !important;
  }

  #lista-articulo > ul#listas.grid-articulos > li .container-img img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 4px !important;
  }*/

  #lista-articulo > ul#listas.grid-articulos {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    justify-items: stretch !important;
    gap: 0px !important; /* <-- Sin separación entre items para unir las líneas divisorias */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
  }

  #lista-articulo > ul#listas.grid-articulos > li {
    display: block !important;
    width: 100% !important;
    background-color: #fff !important;
    border: none !important; /* <-- Elimina la caja negra/gris externa */
    border-bottom: 1px solid #e0e0e0 !important; /* Línea divisoria horizontal */
    border-right: 1px solid #e0e0e0 !important; /* Línea divisoria vertical */
    border-radius: 0 !important; /* Sin esquinas redondeadas */
    box-shadow: none !important;
    overflow: hidden;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 6px 4px !important;
  }

  /* Quita el borde derecho a la segunda columna para que no choque con el borde de la pantalla */
  #lista-articulo > ul#listas.grid-articulos > li:nth-child(2n) {
    border-right: none !important;
  }

  #lista-articulo > ul#listas.grid-articulos > li .container-img {
    padding: 6px !important;
    margin: 0 !important;
    border-right: none !important;
    position: relative !important;
  }

  #lista-articulo > ul#listas.grid-articulos > li .container-img #envoltorio {
    position: relative !important;
  }

  #lista-articulo > ul#listas.grid-articulos > li .container-img img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }

  #lista-articulo > ul#listas.grid-articulos > li .articulo-titulo,
  #lista-articulo > ul#listas.grid-articulos > li h4 {
    padding: 0 12px !important;
  }

  /* Asegura botones y selects de filtro/orden dentro de la búsqueda ocupen el ancho correcto */
  #lista-articulo .row .col.s6 > .btn,
  #lista-articulo .row .col.s6 > select.browser-default,
  #lista-articulo .row .col.s6 > select.fullwidth-select {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    height: 45px !important;
    padding: 0 18px !important;
    border-radius: 3% !important;
    border: 1px solid #f90f00 !important;
    background-color: #f90f00 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
  }

  @media screen and (max-width: 1024px) {
    #lista-articulo > ul#listas.grid-articulos {
      grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    }
  }

  @media screen and (max-width: 768px) {
    #lista-articulo > ul#listas.grid-articulos {
      grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
  }

  @media screen and (max-width: 600px) {
    #lista-articulo > ul#listas.grid-articulos {
      grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    }
  }

  .row .col.s6 {
    width: 50% !important;
  }

  .grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 2 columnas */
  }

  #fechaInventario {
    width: 16em !important;
  }

  .barcodeGen {
    padding-top: 20% !important;
  }

  .flotante-acciones {
    position: absolute;
    /* bottom: 164px; */
    right: 9px;
    width: 28px !important;
    background: #bfbbbb94;
    border-radius: 16px;
    padding-top: 14px !important;
    border: solid 1px #c1c1c1a8;
    margin-left: 12em;
  }

  #verifica-contenedores {
    width: 100%;
  }

  #totalregistros {
    margin-left: 0 !important;
  }

  /* .row .col.s9 {
    margin-left: 37px;
  } */

  .label-button-switch {
    font-size: 12px !important;
  }
  label {
    font-size: 1.2rem !important;
  }
  #btnCodBarras {
    width: 100%;
  }

  .material-icons {
    font-size: 18px !important;
  }
  #bodegaSelect {
    width: 95%;
    margin-bottom: 15px;
  }
  .sidenav {
    padding-top: 10px;
    width: 90%;
  }
  #bodega_sucursales {
    left: 0% !important;
    margin-left: 0 !important;
  }
    /**************MODAL DE CARRITO PARA MOVIL************************/
  #DatosCarritos {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  /* 1. Columna Artículo: Más ancha y texto con buen salto de línea */
  #DatosCarritos th:nth-child(1),
  #DatosCarritos td:nth-child(1) {
    width: 44% !important;
    padding: 6px 4px !important;
    line-height: 1.2 !important;
    font-size: 10.5px !important;
    text-align: left !important;
    word-break: break-word !important;
  }

  /* 2. Columna Precio */
  #DatosCarritos th:nth-child(2),
  #DatosCarritos td:nth-child(2) {
    width: 17% !important;
    text-align: center !important;
    padding: 6px 2px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* 3. Columnas del contador (-, número, +): Totalmente pegadas */
  #DatosCarritos th:nth-child(3),
  #DatosCarritos td:nth-child(3) {
    width: 4% !important;
    padding: 0 !important;
    text-align: right !important;
  }

  #DatosCarritos th:nth-child(4),
  #DatosCarritos td:nth-child(4) {
    width: 8% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  #DatosCarritos th:nth-child(5),
  #DatosCarritos td:nth-child(5) {
    width: 4% !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Enlaces de - y + */
  #DatosCarritos td:nth-child(3) a,
  #DatosCarritos td:nth-child(5) a {
    display: inline-block !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    padding: 0 2px !important;
    margin: 0 !important;
    color: #f90f00 !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }

  /* Número central */
  #DatosCarritos td:nth-child(4) span,
  #DatosCarritos td:nth-child(4) input {
    display: inline-block !important;
    min-width: 16px !important;
    max-width: 24px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* 4. Subtotal */
  #DatosCarritos th:nth-child(6),
  #DatosCarritos td:nth-child(6) {
    width: 18% !important;
    text-align: right !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* 5. Papelera */
  #DatosCarritos th:nth-child(7),
  #DatosCarritos td:nth-child(7) {
    width: 5% !important;
    text-align: center !important;
    padding: 6px 2px !important;
  }

  #DatosCarritos td:nth-child(7) i,
  #DatosCarritos td:nth-child(7) span {
    font-size: 18px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
  }

  /* 1. La celda y tabla contenedora del footer */
  #DatosCarritos tfoot td.tdFoot {
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
  }

  /* 2. Tabla interna de totales: ancho 100% estricto y ajuste de caja */
  #DatosCarritos table.CarritoFoot {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important; /* Libera el fixed para que solo maneje sus 2 columnas */
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    margin: 6px 0 0 0 !important;
  }

  /* 3. Filas y celdas de la tabla de totales */
  #DatosCarritos table.CarritoFoot tr {
    border-bottom: 1px solid #e0e0e0 !important;
  }

  #DatosCarritos table.CarritoFoot td {
    padding: 5px 8px !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
  }

  /* Etiqueta de la izquierda (SubTotal, Descuento, etc.) */
  #DatosCarritos table.CarritoFoot td:first-child {
    text-align: left !important;
    width: 60% !important;
    color: #333333 !important;
  }

  /* Importes de la derecha: alineados a la derecha y dentro del margen */
  #DatosCarritos table.CarritoFoot td.right,
  #DatosCarritos table.CarritoFoot td:last-child {
    text-align: right !important;
    width: 40% !important;
    padding-right: 8px !important;
    white-space: nowrap !important;
    float: none !important; /* Desactiva el float de Materialize si estaba empujando afuera */
  }
}

/* Medium and up (min-width: 40em = 640px) */
@media screen and (min-width: 40em) {
  #dashboardselect {
    width: 50%;
    height: 45px;
    background-color: #28a745;
  }

  .tblcontenedor {
    margin-top: 17px;
  }

  #tblcontenedores tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  #tblcontenedores tbody tr:nth-child(odd) {
    background-color: #ffffff;
  }

  h2 {
    font-size: 2.5rem;
    line-height: 94%;
    margin: 1.373333rem 0 1.424rem 0;
  }

  /* #envoltorio {
           position: relative;
  } */
  .sidenav {
    /*background-color: #2a3f54 !important;*/
    background-color: var(--side-bg) !important;
    width: 22% !important;
  }

  #tblDetallestrasladosVerif th,
  #tblDetallestrasladosVerif td {
    width: auto;
    /* Ajusta al contenido en pantallas grandes */
  }

  .paginador-controls {
    flex-direction: row;
    /* Mantiene los elementos en horizontal */
  }

  .row .col.m4 {
    width: 41% !important;
  }

  .grid-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* 2 columnas */
  }
}

/* Medium only (min-width: 40em and max-width: 63.9375em = 640px - 1022px) */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  h2 {
    font-size: 2.6rem;
    line-height: 100%;
    margin: 3.373333rem 0 1.424rem 0;
  }

  #modalFiltro {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #fafafa !important;
    padding-top: 5px !important;
    padding-bottom: 25px !important;
    top: 26px !important;
    max-height: 100% !important;
    height: auto !important;
    width: 45% !important;
    margin: auto !important;
    overflow-y: auto !important;
    border-radius: 2px !important;
    will-change: top, opacity !important;
  }

  .vistabusqueda {
    width: 100em;
  }

  .row .col.m12 {
    margin-left: 355px !important;
  }

  .row .col.m4 {
    width: 24% !important;
  }

  .grid-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* 2 columnas */
  }

  #totalregistros {
    margin-left: 90px !important;
  }
}

/* Large and up (min-width: 64em = 1024px) */
@media screen and (min-width: 64em) {
  #nav-mobile .reset-left {
    margin-right: 5px !important;
  }

  .container {
    /* margin-top: 42px; */
    margin-top: 20px;
  }
  /* 
  .row {
    margin-bottom: 1px;
  } */

  #modalFiltro {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding-top: 5px;
    padding-bottom: 25px;
    top: 26px !important;
    max-height: 100%;
    height: auto;
    width: 25%;
    margin: auto;
    overflow-y: auto;
    border-radius: 2px;
    will-change: top, opacity;
  }

  h2 {
    font-size: 2.6rem;
    line-height: 100%;
    margin: 3.373333rem 0 1.424rem 0;
  }

  h5 {
    font-size: 15px !important;
    /*text-transform: uppercase;*/
    font-weight: bold;
    line-height: 110%;
    margin: 5px;
    /* text-align: left; */
    text-align: left;
  }

  h6 {
    font-size: 12px !important;
    line-height: 110%;
    margin: 0;
  }

  .switch label .lever {
    content: "";
    display: inline-block;
    position: relative;
    width: 75px;
    height: 34px;
    background-color: #28a745;
    border-radius: 5px;
    margin-right: 10px;
    transition: background 0.3s ease;
    vertical-align: middle;
    margin: 0 16px;
  }

  .switch label .lever:after {
    content: "";
    position: relative;
    display: inline-block;
    width: 37px;
    height: 33px;
    border-radius: 8%;
    left: 38px;
    top: 0px;
    z-index: 2;
    background-color: #a9a4a4;
    box-shadow:
      0px 3px 1px -2px rgb(0 0 0 / 20%),
      0px 2px 2px 0px rgb(0 0 0 / 14%),
      0px 1px 5px 0px rgb(0 0 0 / 12%);
    transition:
      left 0.3s ease,
      background 0.3s ease,
      box-shadow 0.1s ease,
      transform 0.1s ease;
  }

  .input-field > label {
    font-size: 1.2rem;
  }

  #lista-articulo > ul:not(#listas) {
    width: 80%;
    padding: 0;
    display: table;
    margin: 0 auto;
  }

  #vistabusqueda {
    width: 60%;
    margin-bottom: 14px;
  }

  .row .col.m12 {
    margin-left: 355px !important;
  }

  #detallesProducto .row .col {
    width: 40%;
    margin-left: 16em;
  }

  .loading {
    left: 44%;
  }

  #codigo-barras,
  #cant-pedida {
    text-align: center !important;
    font-size: 1em;
  }

  .row .col.l3 {
    width: 25% !important;
  }

  .grid-container {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* 2 columnas */
  }

  .btn {
    width: 100%;
    height: 45px;
    background-color: #28a745;
    /* border-radius: 15px; */
  }

  #ordenar,
  #filtrar {
    width: 100% !important;
    max-width: 100% !important;
    height: 45px !important;
    border-radius: 15px !important;
    display: inline-block !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }

  .btn-resultados-busca-articulos {
    width: 100% !important;
    height: 45px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 15px !important;
    background-color: #f90f00 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }

  #toolbar-articulos {
    margin-bottom: 20px;
    text-align: center;
  }

  @media only screen and (max-width: 600px) {
    #ordenar,
    #filtrar {
      width: 90% !important;
      margin: 0 0 10px 0 !important;
    }
  }

  .ui-btn {
    font-size: 16px !important;
    font-weight: normal !important;
    margin: 0.5em 0;
    padding: 0.7em 1em;
    display: block;
    position: relative;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    /* user-select: none; */
    text-decoration: none !important;
  }

  #bodega_sucursales {
    width: 20%;
    left: 462px !important;
  }

  .sub-header {
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    margin: 15px 0;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-weight: 700;
    font-size: 3em;
  }
}

/* Large only (min-width: 64em and max-width: 74.9375em = 1024px - 1199px) */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
  #modalFiltro {
    width: 45%;
  }

  #bodegaSelect {
    width: 70%;
  }

  .grid-container {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* 2 columnas */
  }

  .btn {
    width: 23%;
    height: 45px;
    background-color: #28a745;
    border-radius: 15px;
  }

  #bodega_sucursales {
    width: 20%;
    left: 462px !important;
  }

  .sub-header {
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    margin: 15px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 3em;
  }
}

/* Reglas adicionales que no encajan exactamente en los rangos solicitados */
@media only screen and (max-width: 62em) {
  /* 992px */
  nav .brand-logo {
    left: 38%;
    transform: translateX(-50%);
  }

  i.large {
    font-size: 2rem;
  }

  #forms {
    padding-top: 10px;
  }

  #forms .select-wrapper input.select-dropdown {
    position: relative;
    cursor: pointer;
    background-color: #ccc !important;
    border: 1px solid #ffffff;
    border-radius: 5px;
    outline: none;
    height: 1.3rem;
    line-height: 3rem;
    width: 92%;
    font-size: 14px;
    margin: -6px;
    padding: 12px;
    display: block;
    /* user-select: none; */
    z-index: 1;
    left: 8px;
  }

  .select-wrapper + label {
    position: absolute;
    top: -36px;
    color: #000000;
    font-size: 1rem;
  }

  .input-field {
    position: relative;
    margin-top: 10px;
    /* margin-bottom: 71px; */
  }

  nav {
    box-shadow:
      0 2px 2px 0 rgba(248, 15, 0, 0.14),
      0 3px 1px -2px rgba(255, 255, 255, 0.12),
      0 1px 5px 0 rgba(255, 255, 255, 0.2);
  }

  .dropdown-content li > a,
  .dropdown-content li > span {
    font-size: 14px;
    color: #000;
    display: block;
    line-height: 22px;
    padding: 14px 16px;
  }

  /* h5 { */
  /* font-size: 12px !important; */
  /*text-transform: uppercase;*/
  /* font-weight: bold;
    line-height: 110%;
    margin: 5px;
    text-align: left;
  } */

  /* h6 {
    font-size: 11px !important;
    line-height: 110%;
    margin: 0;
  } */

  .row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1px;
  }

  .card-panel1 {
    transition: box-shadow 0.25s;
    /* padding: 24px; */
    margin: 0.5rem 0 1rem 0;
    border-radius: 2px;
    background-color: #fff;
  }

  .select1 {
    position: absolute;
    top: 20px;
  }

  #nav-wrapper-l {
    color: #fff;
    background-color: #ff0008;
    width: 116%;
    height: 61px;
    line-height: 56px;
  }

  #mal {
    position: relative;
    cursor: pointer;
    background-color: #7875758c !important;
    border: 1px solid #ffffff;
    border-radius: 5px;
    outline: none;
    height: 1.3rem;
    line-height: 3rem;
    width: 87%;
    font-size: 16px;
    margin: -6px;
    padding: 12px;
    display: block;
    /* user-select: none; */
    left: 20px;
  }

  #text input[type="text"]:not(.browser-default) {
    background-color: #dedada;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 210%;
    font-size: 16px;
    margin: 0 0 8px 0;
    padding: 0;
    box-shadow: none;
    box-sizing: content-box;
    transition:
      border 0.3s,
      box-shadow 0.3s;
    top: 1px;
    position: relative;
  }

  #forms2 .select-wrapper input.select-dropdown {
    position: relative;
    cursor: pointer;
    background-color: rgb(209, 209, 211) !important;
    border: 1px solid #ffffff;
    border-radius: 5px;
    outline: none;
    height: 1.3rem;
    line-height: 3rem;
    width: 66%;
    font-size: 16px;
    margin: -6px;
    padding: 12px;
    display: block;
    /* user-select: none; */
    z-index: 1;
    left: 8px;
  }

  #btn09 {
    border-radius: -8px;
    margin: -4px;
    z-index: 8;
    fill: rgb(255, 255, 255);
    background-color: red;
    height: 42px;
    width: 151px;
  }

  #forms1 .select-wrapper input.select-dropdown {
    position: relative;
    cursor: pointer;
    background-color: #000 !important;
    border: 1px solid #ffffff;
    border-radius: 5px;
    outline: none;
    height: 1.3rem;
    line-height: 3rem;
    width: 84%;
    font-size: 16px;
    margin: -6px;
    padding: 12px;
    display: block;
    /* user-select: none; */
    z-index: 1;
    left: 8px;
  }

  #img1 {
    width: 54%;
    margin-left: 89px;
  }

  #btn3 {
    width: 4px;
    margin: -39px;
    margin-left: 14px;
    margin-top: -97px;
    height: 42px;
    background-color: #000;
    padding: 0 30px;
  }

  #btn4 {
    width: 4px;
    margin: -38px;
    margin-left: 106px;
    margin-top: -115px;
    height: 43px;
    background-color: #000;
    padding: 0 30px;
  }

  .boton-menos-car,
  .boton-mas-car {
    color: #fff !important;
    background-color: #000 !important;
    border-color: #000 !important;
    height: 45px !important;
    width: 30% !important;
    border-radius: 3% !important;
    padding: 8px;
    text-align: center !important;
    border: solid 1px #000;
  }

  .boton-menos-car {
    float: left !important;
  }

  .ui-icon-car {
    background-color: #000 !important;
    height: 46px;
    width: 100%;
    font-size: 16px;
    text-transform: none;
    color: #fff !important;
    text-align: center !important;
    border-radius: 0.2em;
    border-color: #ddd !important;
  }

  .ui-btn {
    font-size: 12px !important;
    font-weight: normal !important;
    margin: 0.5em 0;
    padding: 0.7em 1em;
    display: block;
    position: relative;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    /* user-select: none; */
    text-decoration: none !important;
  }

  .datepicker-footer {
    width: 102%;
  }

  .modal {
    width: 95%;
  }

  .boleta {
    flex-wrap: wrap;
  }

  /* .col.s4 {
      width: 100% !important;
      margin-bottom: 15px;
    } */
  .btn-container-boleta {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-guardar-boleta {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .btn-guardar-boleta:last-child {
    margin-bottom: 0;
  }

  #myTableBoleta {
    font-size: 12px;
  }

  #tblbodyBoleta td.boleta-description {
    max-width: 150px;
  }

  #myTableBoleta thead th.boleta-header,
  #tblbodyBoleta td {
    padding: 6px;
  }
}

/* Ajustes adicionales */
@media (max-width: 48em) {
  /* 768px */
  .input-ubicacion {
    width: 90%;
  }
}

@media only screen and (max-width: 40em) {
  /* 640px */
  #nav-mobile .reset-left {
    margin-right: 5px !important;
  }
}

/* Home específico: usa más ancho horizontal */
body#home .container {
  width: calc(100% - 20px) !important;
  max-width: none !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body#home #resultadoGeneral {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
/**************************BUSQUEDA DE FILTROS*****************************************************/
/* EFECTO HOVER PARA MENÚS DE CATEGORÍAS (Solo Desktop) */
@media only screen and (min-width: 992px) {
  /* Aplicamos a ambos contenedores */
  #menup2 .menu-text a,
  #menup .menu-text a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
  }

  /* El Efecto Hover: Elevación y Fondo */
  #menup2 .menu-text a:hover,
  #menup .menu-text a:hover {
    background-color: rgba(0, 0, 0, 0.04); /* Gris muy suave */
    transform: translateY(-8px); /* Efecto de elevación */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  /* Cambio de color en el texto al hacer hover */
  #menup2 .menu-text a:hover .menu-text,
  #menup .menu-text a:hover .menu-text {
    color: #f90f00 !important; /* Tu color rojo corporativo */
    font-weight: bold;
  }

  /* Efecto en la imagen/icono */
  #menup2 .menu-text a:hover img,
  #menup .menu-text a:hover img {
    filter: brightness(1.1);
    transform: scale(1.05);
  }

  /* EXCEPCIÓN: Evitar que los botones desactivados reaccionen */
  #menup .menu-text a[style*="pointer-events: none"]:hover {
    transform: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    cursor: default;
  }
}

/* ==========================================================================
   REESTRUCTURACIÓN DE FORMULARIO DE BÚSQUEDA (Desktop 992px en adelante)
   ========================================================================== */
@media (min-width: 992px) {
  #home main {
    padding-top: 130px;
  }

  main {
    padding-top: 130px !important;
  }

  main {
    position: relative;
    padding-top: 50%;
    padding-bottom: 66px;
    min-height: 645px;
    overflow: hidden;
    /* background-color: #000000; */
  }

  /*************************MAIN**********************************/

  /* main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; 
    background-image: url("../img/back-1.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0.08;
    filter: grayscale(30%);
    pointer-events: none; 
  } */

  main > div {
    position: relative;
    z-index: 1;
  }
  /****************MAIN*************************/

  #bodega_sucursales {
    width: 30%;
    left: 0px !important;
  }
  /*****************MODAL***************************/

  .modal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding: 0;
    /* top: 26px !important; */
    top: 150px !important;
    max-height: 87%;
    width: 35%;
    margin: auto;
    overflow-y: auto;
    border-radius: 15px;
    will-change: top, opacity;
  }

  .wrapper-edit-icon {
    top: 13px;
    right: 23px;
  }
  /************MODAL****************/

  /************DETALLE***************/
  /************DETALLE***************/

  @media screen and (min-width: 992px) {
    /* Forzar amplitud fluida en la pantalla de escritorio */
    main > .container,
    main > .container #resultadoGeneral {
      width: 94% !important;
      max-width: 1600px !important;
      margin: 0 auto !important;
      padding: 0 15px !important;
    }

    /* Estructura general de dos columnas con espacio de respiración (Gap) */
    #resultadoGeneral #detallesProducto .row.contenedor-detalle-premium {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: flex-start !important;
      width: 100% !important;
      margin: 40px 0 !important;
      gap: 50px !important;
    }

    /* Eliminación estricta de herencias antiguas */
    #resultadoGeneral
      #detallesProducto
      .row.contenedor-detalle-premium
      .col.desktop-detalle-left,
    #resultadoGeneral
      #detallesProducto
      .row.contenedor-detalle-premium
      .col.desktop-detalle-right {
      margin-left: 0 !important;
      margin-right: 0 !important;
      float: none !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }

    /* --- COLUMNA IZQUIERDA: CONTENEDOR DE IMAGEN --- */
    #resultadoGeneral
      #detallesProducto
      .row.contenedor-detalle-premium
      .col.desktop-detalle-left {
      width: 42% !important;
      position: sticky !important;
      top: 130px !important;
      z-index: 10;
    }

    .wrapper-imagen-premium {
      width: 100%;
      background: #ffffff;
      border: 1px solid #eef2f5;
      border-radius: 16px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 450px;
    }

    .imagen-detalle-premium {
      width: 100% !important;
      max-height: 520px !important;
      object-fit: contain !important;
    }

    .btn-regresar-filtro {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 12;
      background: #ffffff;
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      width: 45px;
      height: 45px;
    }

    /* --- COLUMNA DERECHA: INFORMACIÓN Y ESPACIADOS UI --- */
    #resultadoGeneral
      #detallesProducto
      .row.contenedor-detalle-premium
      .col.desktop-detalle-right {
      width: 58% !important;
    }

    /* Bloque de Información de Título */
    .card-detalle-info {
      margin-bottom: 25px;
    }

    .sku-producto {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      color: #8898aa;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .titulo-producto {
      font-size: 28px !important;
      font-weight: 700 !important;
      color: #1e293b !important;
      line-height: 1.3 !important;
      margin: 0 0 15px 0 !important;
    }

    .stock-wrapper {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
    }

    .stock-label {
      font-size: 14px;
      color: #64748b;
    }

    .stock-badge {
      background-color: #e2fbe8;
      color: #10b981;
      font-weight: 700;
      font-size: 13px;
      padding: 4px 12px;
      border-radius: 20px;
    }

    /* Bloque de Compra (Precios y Acciones) */
    .card-detalle-compra {
      background: #f8fafc;
      border-radius: 14px;
      padding: 24px;
      margin-bottom: 30px;
      border: 1px solid #edf2f7;
    }

    .row-compra-precios {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 16px;
      margin-bottom: 20px;
    }

    .label-precio-tipo {
      font-size: 15px !important;
      font-weight: 600 !important;
      color: #475569 !important;
    }

    .precio-selector-wrapper {
      width: 220px;
    }

    /* Menu desplegable de Precios estilizado moderno */
    .select-precio-premium {
      display: block !important;
      height: 44px !important;
      background-color: #ffffff !important;
      border: 1px solid #cbd5e1 !important;
      border-radius: 8px !important;
      padding: 0 12px !important;
      font-size: 16px !important;
      font-weight: 600 !important;
      color: #1e293b !important;
      outline: none;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .precio-lista-estatico {
      font-size: 22px;
      font-weight: 700;
      color: #1e293b;
    }

    /* Fila de Controles (Cantidad y Añadir) con Espacio Limpio */
    .row-compra-acciones {
      display: flex;
      align-items: center;
      gap: 20px; /* Separa el control numérico del botón de añadir */
    }

    .control-cantidad-premium {
      display: flex;
      align-items: center;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      overflow: hidden;
      height: 48px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .btn-cant-premium {
      background: transparent;
      border: none;
      width: 40px;
      height: 100%;
      font-size: 18px;
      color: #64748b;
      cursor: pointer;
      transition:
        background 0.2s,
        color 0.2s;
      outline: none;
    }

    .btn-cant-premium:hover {
      background: #f1f5f9;
      color: #1e293b;
    }

    .input-cant-premium {
      width: 50px !important;
      height: 100% !important;
      text-align: center !important;
      border: none !important;
      margin: 0 !important;
      font-size: 16px !important;
      font-weight: 600 !important;
      color: #1e293b !important;
      background: transparent !important;
    }

    .control-boton-agregar {
      flex-grow: 1; /* Hace que el botón tome el ancho elegante disponible */
    }

    .btn-agregar-premium {
      width: 100% !important;
      height: 48px !important;
      background-color: #0f172a !important; /* Negro Slate sofisticado */
      color: #ffffff !important;
      font-size: 15px !important;
      font-weight: 600 !important;
      letter-spacing: 0.5px;
      border-radius: 8px !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-transform: none !important;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
      transition: all 0.2s ease-image;
    }

    .btn-agregar-premium:hover {
      background-color: #1e293b !important;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25) !important;
    }

    /* --- SECCIÓN ACORDEONES Y TABLAS --- */
    .card-detalle-acordeones {
      margin-top: 15px;
    }

    .collapsible-premium {
      border: 1px solid #e2e8f0 !important;
      box-shadow: none !important;
      border-radius: 8px;
      overflow: hidden;
    }

    .collapsible-premium li {
      border-bottom: 1px solid #e2e8f0;
    }

    .collapsible-premium li:last-child {
      border-bottom: none;
    }

    .collapsible-premium .collapsible-header {
      background-color: #ffffff !important;
      color: #334155 !important;
      font-weight: 600;
      padding: 14px 20px !important;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid #e2e8f0 !important;
    }

    .collapsible-premium .collapsible-body {
      padding: 20px !important;
      background-color: #ffffff !important;
      border-bottom: none !important;
    }

    /* Tablas de Ficha Técnica Limpias */
    .tabla-premium {
      width: 100%;
    }

    .tabla-premium tr {
      border-bottom: 1px solid #f1f5f9 !important;
    }

    .tabla-premium tr:last-child {
      border-bottom: none !important;
    }

    .tabla-premium td {
      padding: 10px 12px !important;
      font-size: 14px !important;
      color: #334155 !important;
    }

    .tabla-premium td:first-child {
      font-weight: 600;
      color: #64748b;
      width: 30%;
    }
  }

  /*****************DETALLE***********************/

  /*****************DETALLE***********************/

  #carrito {
    width: 35%;
    right: 0;
    top: 48px !important;
  }

  /* Forzamos a que el contenedor ignore el Flexbox horizontal de la Home */
  #resultadoGeneral.vista-formulario {
    display: block !important;
    max-width: 600px; /* Ancho ideal para un formulario */
    margin: 50px auto !important; /* Lo centra en la pantalla y le da aire */
    background: #ffffff; /* Fondo blanco tipo tarjeta */
    padding: 35px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08); /* Sombra elegante */
  }

  /* Aseguramos que cada bloque row recupere el ancho completo interno */
  #resultadoGeneral.vista-formulario .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
    display: block !important; /* Se apilan verticalmente */
  }

  /* Ajuste del Título de la sección */
  #resultadoGeneral.vista-formulario .card-panel1 {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0 0 15px 0;
  }

  #resultadoGeneral.vista-formulario h5 {
    font-size: 1.5rem;
    color: #111111;
    border-bottom: 3px solid #f90f00; /* Detalle lineal rojo corporativo */
    padding-bottom: 12px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Encabezados pequeños internos */
  #resultadoGeneral.vista-formulario h6 {
    font-size: 1rem;
    color: #555555;
    margin: 0 0 8px 0;
  }

  /* Estilización del Campo de Entrada de Texto */
  #resultadoGeneral.vista-formulario input[type="text"].validate {
    background-color: #fcfcfc !important;
    border: 1px solid #cccccc !important;
    border-radius: 6px !important;
    height: 48px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    font-size: 1.1rem;
    margin: 0 !important;
    transition: all 0.3s ease;
  }

  /* Enfoque del input (Rojo Bremen) */
  #resultadoGeneral.vista-formulario input[type="text"].validate:focus {
    border: 1px solid #f90f00 !important;
    box-shadow: 0 2px 0 0 #f90f00 !important;
    background-color: #ffffff !important;
  }

  /* Alineación del bloque de Switch de Existencia */
  #resultadoGeneral.vista-formulario .row:has(.switch) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: #f7f7f7; /* Encapsula la opción en un fondo sutil */
    padding: 12px 15px;
    border-radius: 8px;
    gap: 10px;
  }

  /* #resultadoGeneral.vista-formulario .switch {
    margin-top: 0 !important;
  } */
  /*************************************************/
  /* 1. Caja contenedora gris que agrupa el texto y el switch */
  #resultadoGeneral.vista-formulario .custom-switch-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important; /* Texto a la izquierda, Switch a la derecha */
    background: #f7f7f7 !important;
    padding: 15px 25px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  /* Texto descriptivo de la izquierda */
  #resultadoGeneral.vista-formulario .custom-switch-label {
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    color: #444444 !important;
    margin: 0 !important;
  }

  /* 2. Estructura del botón interactivo (Toggle) */
  .custom-toggle {
    position: relative;
    display: inline-block;
    width: 90px; /* Ancho suficiente para que las palabras no se corten */
    height: 36px;
    cursor: pointer;
  }

  /* Ocultamos el checkbox nativo */
  .custom-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }

  /* El fondo de la pastilla del switch */
  .custom-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e0e0e0; /* Color cuando es NO */
    border-radius: 34px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    box-sizing: border-box;
  }

  /* Estilos para los textos internos (SI / NO) */
  .custom-slider .text-no,
  .custom-slider .text-yes {
    font-family: "Roboto", sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    user-select: none;
    transition: opacity 0.2s ease;
  }

  .custom-slider .text-no {
    color: #666666;
    opacity: 1; /* Visible por defecto */
  }

  .custom-slider .text-yes {
    color: #ffffff;
    opacity: 0; /* Oculto por defecto */
  }

  /* La bolita blanca que se mueve */
  .custom-bullet {
    position: absolute;
    height: 28px;
    width: 28px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 2;
  }

  /* ==========================================================================
     ESTADOS INTERACTIVOS (Cuando el usuario hace CLICK y activa el switch)
     ========================================================================== */

  /* Cambia el fondo a Verde Bremen al activar */
  .custom-toggle input:checked + .custom-slider {
    background-color: #4caf50;
  }

  /* Mueve la bolita blanca hacia la derecha */
  .custom-toggle input:checked + .custom-slider .custom-bullet {
    transform: translateX(54px);
  }

  /* Control de visibilidad de textos al activar */
  .custom-toggle input:checked + .custom-slider .text-no {
    opacity: 0; /* Oculta el NO */
  }

  .custom-toggle input:checked + .custom-slider .text-yes {
    opacity: 1; /* Muestra el SI */
  }

  /**********************************************/

  #resultadoGeneral.vista-formulario .show-existencia {
    margin: 0 !important;
    font-weight: 500;
    color: #444444;
  }

  /* Texto de campos obligatorios */
  #resultadoGeneral.vista-formulario .show-obligatorios {
    color: #9e9e9e;
    font-size: 0.85rem;
    font-style: italic;
  }

  /* Botón de Búsqueda Centrado y estilizado */
  #resultadoGeneral.vista-formulario #search_service {
    width: 100%;
    max-width: 220px; /* Tamaño controlado para que no sea gigante */
    height: 46px;
    line-height: 46px;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 6px;
    transition: all 0.25s ease;
  }

  #resultadoGeneral.vista-formulario #search_service:hover {
    background-color: #b71c1c !important; /* Rojo oscuro al pasar el mouse */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(249, 15, 0, 0.35);
  }

  /* Dejamos que la sección donde cargarán las tablas use el ancho de página normal */
  #resultadosFiltros {
    margin-top: 35px;
    width: 100% !important;
    display: block !important;
  }
}

/* ==========================================================================
   REDISEÑO PREMIUM EXCLUSIVO PARA VISTA SECCIONES (Solo Desktop 992px+)
   ========================================================================== */
@media (min-width: 992px) {
  h5 {
    font-size: 20px !important;
    margin: 5px 0 10px 0 !important;
    /* padding-top: 0 !important; */
    text-align: center !important;
    line-height: 1.2 !important;
    padding: 15px 25px 8px !important;
  }

  /* Forzamos a que vuelva a comportarse como un bloque normal a lo ancho */
  #resultadoGeneral.vista-pedidos-desktop {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Hacemos que las filas internas recuperen el 100% y no el 50% heredado */
  #resultadoGeneral.vista-pedidos-desktop .row {
    width: 100% !important;
    display: block !important;
    margin-bottom: 5px !important;
  }

  /* Distribución fluida del buscador superior (Fechas + Input) */
  #resultadoGeneral.vista-pedidos-desktop #busquedapedido .desktop-row-inputs {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 15px;
  }

  #resultadoGeneral.vista-pedidos-desktop .desktop-date-box {
    width: 20% !important;
  }

  #resultadoGeneral.vista-pedidos-desktop .desktop-search-box {
    width: 60% !important;
  }

  /* Distribución horizontal alineada de los switches inferiores y el botón */
  #resultadoGeneral.vista-pedidos-desktop .desktop-row-switches {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 20px !important;
    background: #fdfdfd; /* Empata con tu color grey lighten-2 */
    padding: 15px;
    border-radius: 8px;
  }

  #resultadoGeneral.vista-pedidos-desktop .desktop-switch-item {
    display: flex !important;
    align-items: center !important;
    width: 35% !important;
  }

  #resultadoGeneral.vista-pedidos-desktop .desktop-btn-box {
    width: 25% !important;
    text-align: right !important;
  }

  /*************************************************************************/

  /* 1. Tarjeta Contenedora Principal Centrada */
  #resultadoGeneral2.vista-formulario-secciones {
    display: block !important;
    max-width: 650px; /* Ancho balanceado y elegante */
    margin: 60px auto !important; /* Centrado perfecto con excelente margen superior */
    background: #ffffff; /* Fondo blanco tipo tarjeta limpia */
    padding: 40px 45px; /* Mayor espacio interno (padding) */
    border-radius: 14px; /* Bordes suavizados modernos */
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.05),
      0 1px 8px rgba(0, 0, 0, 0.02); /* Sombra difuminada premium */
  }

  /* 2. Separación drástica de filas para evitar elementos encimados */
  #resultadoGeneral2.vista-formulario-secciones .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 28px !important; /* Espaciado saludable entre bloques de control */
    display: block !important; /* Una opción debajo de la otra */
  }

  /* 3. Panel de Título Superior y Línea Decorativa */
  #resultadoGeneral2.vista-formulario-secciones .card-panel1 {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0 0 35px 0 !important; /* Espacio extra debajo del título para que no choque nada */
  }

  #resultadoGeneral2.vista-formulario-secciones h5 {
    font-size: 16px !important;
    color: #9e9e9e;
    border-bottom: 3px solid #f90f00; /* Línea roja corporativa */
    padding-bottom: 16px; /* Espacio interno entre el texto y la línea */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }

  /* 4. Solución al subtítulo encimado (* Tipo, * Sub Categoría, etc) */
  #resultadoGeneral2.vista-formulario-secciones h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #444444;
    margin: 0 0 12px 0 !important; /* Espacio hacia abajo antes de los selects o inputs */
    display: block;
  }

  /* 5. Campos de Entrada e Inputs estilizados al 100% de ancho */
  #resultadoGeneral2.vista-formulario-secciones
    input[type="text"].browser-default,
  #resultadoGeneral2.vista-formulario-secciones select.browser-default {
    background-color: #fcfcfc !important;
    border: 1px solid #cccccc !important;
    border-radius: 6px !important;
    height: 50px !important; /* Altura cómoda y profesional para dar clic */
    padding: 0 16px !important;
    box-sizing: border-box !important;
    font-size: 1.1rem;
    margin: 0 !important;
    width: 100% !important; /* Ocupa el ancho completo de la tarjeta */
    transition: all 0.3s ease;
    color: #333333;
  }

  /* Enfoque interactivo de los campos (Glow Rojo Corporativo) */
  #resultadoGeneral2.vista-formulario-secciones
    input[type="text"].browser-default:focus,
  #resultadoGeneral2.vista-formulario-secciones select.browser-default:focus {
    border: 1px solid #f90f00 !important;
    box-shadow: 0 0 0 3px rgba(249, 15, 0, 0.15) !important; /* Brillo tenue sutil */
    background-color: #ffffff !important;
    outline: none;
  }

  /* Ajuste para leyendas de obligatoriedad */
  #resultadoGeneral2.vista-formulario-secciones .show-obligatorios {
    color: #757575;
    font-size: 0.9rem;
    margin-top: -8px;
    margin-bottom: 10px;
  }

  /* 6. El Botón "Buscar" de Secciones Imponente y Centrado */
  #resultadoGeneral2.vista-formulario-secciones .btn.red.darken-4 {
    width: 100% !important;
    max-width: 240px !important; /* Un poco más ancho para mejorar la proporción */
    height: 48px !important;
    line-height: 48px !important;
    font-size: 1.05rem !important;
    font-weight: bold !important;
    letter-spacing: 1.2px;
    border-radius: 6px;
    transition: all 0.25s ease;
    display: block !important;
    margin: 10px auto 0 auto !important; /* Centrado automático horizontal */
    box-shadow: 0 4px 12px rgba(183, 28, 28, 0.2);
  }

  /* Efecto Hover dinámico sobre el botón */
  #resultadoGeneral2.vista-formulario-secciones .btn.red.darken-4:hover {
    background-color: #b71c1c !important; /* Tono rojo oscuro sólido */
    transform: translateY(-2px); /* Efecto levitación */
    box-shadow: 0 8px 20px rgba(249, 15, 0, 0.4); /* Resplandor rojo */
  }

  /* Separación superior para las tablas de resultados dinámicos */
  #resultadosFiltros {
    margin-top: 45px;
    width: 100% !important;
    display: block !important;
  }
}

/* ==========================================================================
   VISTA DE PEDIDOS: DISEÑO DE 2 COLUMNAS EXCLUSIVO PARA ESCRITORIO (DESKTOP)
   ========================================================================== */
@media only screen and (min-width: 992px) {
  .row {
    margin-bottom: 8px !important;
  }

  .busqueda-header-categoria .sub-header {
    font-size: 20px !important;
    margin: 5px 0 10px 0 !important;
    padding-top: 10px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    font-family: "Jura", sans-serif;

    /* NUEVOS AJUSTES PARA CALCAR "MIS PEDIDOS" */
    font-weight: 700 !important; /* Le da el grosor robusto a las letras */
    text-transform: uppercase !important; /* Fuerza el texto a mayúsculas automáticas */
    color: #9e9e9e !important; /* Aplica el color gris elegante de la interfaz */
    letter-spacing: 1px !important; /* Separa sutilmente las letras para mejorar el look */
  }

  /* Ajuste del título principal: Tamaño exacto de 20px y márgenes mínimos */
  .vista-pedidos-desktop .sub-header {
    font-size: 20px !important;
    margin: 5px 0 10px 0 !important; /* Reduce drásticamente la separación superior e inferior */
    padding-top: 0 !important; /* Elimina el padding que empujaba el bloque hacia abajo */
    text-align: center !important; /* Lo alinea a la izquierda de forma profesional sobre la tarjeta */
    line-height: 1.2 !important;
  }

  /* Reduce la separación superior general del contenedor principal en escritorio */
  .vista-pedidos-desktop {
    margin-top: -15px !important;
  }

  /* Activa el comportamiento de dos columnas en paralelo solo en desktop */
  .pedidos-layout-grid {
    display: grid !important;
    grid-template-columns: 35% 65% !important;
    gap: 25px !important;
    align-items: start !important;
    width: 100% !important;
    margin-top: 15px !important;
  }

  /* Garantiza el comportamiento de bloques internos limpios dentro del grid */
  .pedidos-panel-busqueda,
  .pedidos-panel-resultados {
    width: 100% !important;
    display: block !important;
  }

  /* Transforma el contenedor interno de la búsqueda en una tarjeta flotante */
  .pedidos-panel-busqueda .card-pedidos-desktop {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 30px 20px !important;
    box-sizing: border-box !important;

    /* Sombras suaves estilo Material Design de alta fidelidad */
    box-shadow:
      0 10px 25px rgba(0, 0, 0, 0.05),
      0 1px 6px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #ebebeb !important;

    /* Transición por si agregas efectos hover más adelante */
    transition: box-shadow 0.3s ease-in-out !important;
    width: 100% !important;
  }

  /* Efecto interactivo premium al pasar el cursor sobre la tarjeta de filtros */
  .pedidos-panel-busqueda .card-pedidos-desktop:hover {
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.09) !important;
  }

  /* Ajuste para que los botones grandes dentro de la tarjeta se estilicen de forma limpia */
  .pedidos-panel-busqueda .card-pedidos-desktop .btn-large.red.darken-4 {
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(183, 28, 28, 0.25) !important;
    transition: all 0.2s ease !important;
  }

  .pedidos-panel-busqueda .card-pedidos-desktop .btn-large.red.darken-4:hover {
    background-color: #f90f00 !important; /* Brillo dinámico en hover */
    box-shadow: 0 6px 18px rgba(249, 15, 0, 0.35) !important;
  }

  /* Fuerza el tamaño de texto a 12px en todas las celdas de la tabla de pedidos */
  #tblpedido th,
  #tblpedido td {
    font-size: 12px !important;
    padding: 10px 8px !important; /* Ajuste opcional de espaciado para que se vea estilizado y compacto */
    line-height: 1.4 !important;
  }

  /* Si deseas un trato especial para los encabezados (por ejemplo, mantenerlos un poco más negritas) */
  #tblpedido th {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
  }

  .contenedor-dinamico-cliente > div[style*="display: none"] {
    display: none !important;
  }

  .contenedor-dinamico-cliente {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Ajuste de diseño de tarjetas dinámicas individuales */
  .contenedor-dinamico-cliente .card-panel {
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #ebebeb !important;
    background-color: #ffffff !important;
  }
}

/***********************************************************************************************/

/************DETALLE***************/
/* @media screen and (min-width: 992px) {
  main > .container,
  main > .container #resultadoGeneral {
    width: 96% !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
  }

  .contenedor-desktop-full {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 35px 0 !important;
    gap: 50px !important;
  }

  .bloque-izquierdo-imagen {
    width: 45% !important;
    position: sticky !important;
    top: 100px !important;
    box-sizing: border-box !important;
  }

  .marco-imagen-premium {
    width: 100%;
    background: #ffffff;
    border: 1px solid #eef2f5;
    border-radius: 14px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 540px;
    position: relative;
  }

  .imagen-efecto-premium {
    width: 100% !important;
    max-height: 560px !important;
    object-fit: contain !important;
  }

  .enlace-retorno-premium {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    background: #ffffff;
    border-radius: 50%;
    padding: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .enlace-retorno-premium img {
    width: 100%;
    height: auto;
  }

  .bloque-derecho-informacion {
    width: 55% !important;
    box-sizing: border-box !important;
  }

  .panel-cabecera-producto {
    margin-bottom: 25px;
  }

  .sku-producto-desktop {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .titulo-producto-desktop {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin: 0 0 15px 0 !important;
  }

  .badge-existencia-desktop {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .txt-existencia-label {
    font-size: 15px;
    color: #475569;
  }

  .txt-existencia-cant {
    background-color: #dcfce7;
    color: #15803d;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 16px;
  }

  .panel-accion-compra-desktop {
    background: #f8fafc;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid #f1f5f9;
  }

  .sub-fila-precios {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 18px;
    margin-bottom: 22px;
  }

  .label-tipo-precio-desktop {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #334155 !important;
  }

  .wrapper-select-desktop {
    width: 250px;
  }

  .select-precio-desktop {
    display: block !important;
    height: 44px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 0 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none;
  }

  .precio-estatitco-desktop {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
  }

  .sub-fila-controles {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .selector-cantidad-desktop {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    height: 48px;
  }

  .btn-operador-desktop {
    background: transparent;
    border: none;
    width: 40px;
    height: 100%;
    font-size: 18px;
    color: #64748b;
    cursor: pointer;
    outline: none;
  }

  .btn-operador-desktop:hover {
    background: #f8fafc;
    color: #0f172a;
  }

  .input-num-desktop {
    width: 50px !important;
    height: 100% !important;
    text-align: center !important;
    border: none !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    background: transparent !important;
  }

  .wrapper-boton-agregar-desktop {
    flex-grow: 1;
  }

  .btn-premium-agregar-full {
    width: 100% !important;
    height: 48px !important;
    background-color: #0f172a !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: none !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
    transition: background 0.2s ease;
  }

  .btn-premium-agregar-full:hover {
    background-color: #1e293b !important;
  }

  .acordeones-informacion-desktop {
    margin-top: 15px;
  }

  .collapsible-premium-desktop {
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    border-radius: 6px;
    overflow: hidden;
  }

  .collapsible-premium-desktop li {
    border-bottom: 1px solid #e2e8f0;
  }

  .collapsible-premium-desktop li:last-child {
    border-bottom: none;
  }

  .collapsible-premium-desktop .collapsible-header {
    background-color: #ffffff !important;
    color: #1e293b !important;
    font-weight: 600;
    padding: 14px 20px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .collapsible-premium-desktop .collapsible-body {
    padding: 20px !important;
    background-color: #ffffff !important;
  }

  .tabla-premium-desktop {
    width: 100%;
  }

  .tabla-premium-desktop tr {
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .tabla-premium-desktop tr:last-child {
    border-bottom: none !important;
  }

  .tabla-premium-desktop td {
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #334155 !important;
  }

  .tabla-premium-desktop td:first-child {
    font-weight: 600;
    color: #64748b;
    width: 25%;
  }
} */

@media screen and (min-width: 992px) {
  main > .container,
  main > .container #resultadoGeneral {
    width: 96% !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    padding: 10px 10px !important;
  }

  main > .container #resultadoGeneralBase {
    width: 96% !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    padding: 10px 10px !important;
  }

  .contenedor-desktop-full {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 35px 0 !important;
    gap: 50px !important;
  }

  .bloque-izquierdo-imagen {
    width: 35% !important;
    position: sticky !important;
    top: 100px !important;
    box-sizing: border-box !important;
  }

  .marco-imagen-premium {
    width: 100%;
    background: #ffffff;
    /* border: 1px solid #eef2f5; */
    border-radius: 14px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 540px;
    position: relative;
  }

  .imagen-efecto-premium {
    width: 100% !important;
    max-height: 560px !important;
    object-fit: contain !important;
  }

  .enlace-retorno-premium {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    background: #ffffff;
    border-radius: 50%;
    padding: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .enlace-retorno-premium img {
    width: 100%;
    height: auto;
  }

  .bloque-derecho-informacion {
    width: 55% !important;
    box-sizing: border-box !important;
  }

  .panel-cabecera-producto {
    margin-bottom: 25px;
  }

  .sku-producto-desktop {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .titulo-producto-desktop {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin: 0 0 15px 0 !important;
  }

  .badge-existencia-desktop {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .txt-existencia-label {
    font-size: 15px;
    color: #475569;
  }

  .txt-existencia-cant {
    background-color: #dcfce7;
    color: #15803d;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 16px;
  }

  .panel-accion-compra-desktop {
    background: #f8fafc;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid #f1f5f9;
  }

  .sub-fila-precios {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 18px;
    margin-bottom: 22px;
  }

  .label-tipo-precio-desktop {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #334155 !important;
  }

  .wrapper-select-desktop {
    width: 250px;
  }

  .select-precio-desktop {
    display: block !important;
    height: 44px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 0 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none;
  }

  .precio-estatitco-desktop {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
  }

  .sub-fila-controles {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .selector-cantidad-desktop {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    height: 48px;
  }

  .btn-operador-desktop {
    background: transparent;
    border: none;
    width: 40px;
    height: 100%;
    font-size: 18px;
    color: #64748b;
    cursor: pointer;
    outline: none;
  }

  .btn-operador-desktop:hover {
    background: #f8fafc;
    color: #0f172a;
  }

  .input-num-desktop {
    width: 50px !important;
    height: 100% !important;
    text-align: center !important;
    border: none !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    background: transparent !important;
  }

  .wrapper-boton-agregar-desktop {
    flex-grow: 1;
  }

  .btn-premium-agregar-full {
    width: 100% !important;
    height: 48px !important;
    background-color: #0f172a !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: none !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
    transition: background 0.2s ease;
  }

  .btn-premium-agregar-full:hover {
    background-color: #1e293b !important;
  }

  .acordeones-informacion-desktop {
    margin-top: 15px;
  }

  .collapsible-premium-desktop {
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    border-radius: 6px;
    overflow: hidden;
  }

  .collapsible-premium-desktop li {
    border-bottom: 1px solid #e2e8f0;
  }

  .collapsible-premium-desktop li:last-child {
    border-bottom: none;
  }

  .collapsible-premium-desktop .collapsible-header {
    /* background-color: #ffffff !important; */
    background-color: #edefee !important;
    color: #1e293b !important;
    font-weight: 600;
    padding: 14px 20px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .collapsible-premium-desktop .collapsible-body {
    padding: 20px !important;
    background-color: #ffffff !important;
  }

  /* .tabla-premium-desktop {
    width: 100%;
  }

  .tabla-premium-desktop tr {
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .tabla-premium-desktop tr:last-child {
    border-bottom: none !important;
  }

  .tabla-premium-desktop td {
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #334155 !important;
  }

  .tabla-premium-desktop td:first-child {
    font-weight: 600;
    color: #64748b;
    width: 25%;
  } */

  /* --- ESTILO MODERNO PARA LA TABLA DE BODEGAS --- */
  .tabla-premium-desktop {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 8px !important; /* Separa las filas creando efecto de tarjetas */
  }

  .tabla-premium-desktop tr {
    background-color: #f8f9fa !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    border: 1px solid #e2e8f0 !important;
  }

  .tabla-premium-desktop tr:hover {
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border-color: #d32f2f !important; /* Rojo Bremen al pasar el cursor */
  }

  /* Redondeo de esquinas para el efecto tarjeta */
  .tabla-premium-desktop td:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
  }

  .tabla-premium-desktop td:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
  }

  /* CELDAS Y TEXTOS */
  .tabla-premium-desktop td {
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    vertical-align: middle !important;
  }

  /* NOMBRE DE BODEGA (Primera Columna) */
  .tabla-premium-desktop td:first-child {
    font-weight: 700 !important;
    color: #1e293b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    width: auto !important; /* Elimina el 25% fijo para que no quede estirado */
  }

  /* ÍCONO DE UBICACIÓN DENTRO DE LA BODEGA */
  .tabla-premium-desktop td:first-child::before {
    font-family: "Material Icons";
    font-size: 18px;
    color: #d32f2f;
    margin-right: 8px;
    vertical-align: middle;
  }

  /* CANTIDAD DE STOCK (Segunda Columna) */
  .tabla-premium-desktop td:last-child {
    text-align: right !important;
    font-weight: 700 !important;
    color: #2e7d32 !important; /* Verde para destacar la cantidad */
    font-size: 15px !important;
  }

  /*============================================================*/
  #resultadoGeneral .row:nth-child(1) {
    order: 1 !important;
    width: 100% !important;
  }

  #resultadoGeneral .row:nth-child(2) {
    order: 2;
    width: 65% !important;
  }
}

/*****************DETALLE**********************/

/* =========================================================================
   ESTILOS PREMIUM EXCLUSIVOS PARA EL MODAL DE SUCURSALES (DESKTOP)
   ========================================================================= */
@media screen and (min-width: 992px) {
  /* Forzar la alineación y espaciados correctos en los títulos del modal */
  .card-sucursal-modal .seccion-info-modal h5 {
    font-size: 0.85rem !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.1 !important;
  }

  /* Forzar el comportamiento correcto en los textos descriptivos */
  .card-sucursal-modal .seccion-info-modal h6 {
    font-size: 0.95rem !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    color: #424242 !important;
  }

  /* Ajuste específico para el teléfono o subtítulos que lleven margen superior */
  .card-sucursal-modal .seccion-info-modal h6.telefono-modal {
    margin-top: 8px !important;
  }

  .card-sucursal-modal .seccion-info-modal h6.horario-item {
    margin-bottom: 4px !important;
  }

  /* Contenedor principal para dar espacio */
  .container-tabs-moderno {
    padding: 15px 0;
    background-color: transparent;
  }

  /* Rediseño de la barra de pestañas */
  .custom-futuristic-tabs.tabs {
    background-color: #1a1a24; /* Fondo oscuro tecnológico */
    border: 1px solid #2d2d3f; /* Borde sutil del contenedor */
    border-radius: 8px; /* Bordes semi-redondeados modernos */
    padding: 6px;
    height: 54px; /* Un poco más alto para dar aire al diseño */
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }

  /* Estilo individual de cada pestaña (LI) */
  .custom-futuristic-tabs .tab {
    height: 100% !important;
    line-height: 42px !important; /* Centrado vertical interno */
  }

  /* Estilo de los enlaces (A) en estado normal */
  .custom-futuristic-tabs .tab a {
    color: #8a8aa3 !important; /* Texto secundario atenuado */
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px; /* Estilo tipográfico limpio */
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
  }

  /* Efecto Hover (Pasar el mouse) */
  .custom-futuristic-tabs .tab a:hover {
    color: #000000 !important;
    background-color: rgba(255, 255, 255, 0.04);
  }

  /* Estado Activo (Pestaña seleccionada) */
  .custom-futuristic-tabs .tab a.active {
    color: #ffffff !important;
    /* Gradiente premium oscuro/brillante */
    /* background: linear-gradient(135deg, #2c2c3e 0%, #15151f 100%) !important; */
    background: #b71c1c !important;
    border: 1px solid #4f4f7a; /* Borde resaltado */
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.5),
      0 0 1px rgba(255, 255, 255, 0.1) inset;
  }

  /* Ajuste de íconos dentro de las pestañas (si decides usarlos) */
  .custom-futuristic-tabs .tab a .tab-icon {
    margin-right: 8px;
    font-size: 18px;
    vertical-align: middle;
    line-height: inherit;
  }

  /* Ocultar la línea indicadora nativa inferior de Materialize */
  .custom-futuristic-tabs .indicator {
    display: none !important;
  }
  /***********************************/
  /* 1. CENTRADO DEL BUSCADOR INICIAL */
  #resultadoGeneral .preciokm-layout-grid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 0px !important;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  #resultadoGeneral .preciokm-layout-grid.split-activo {
    justify-content: flex-start !important;
    gap: 30px !important;
  }

  /* 2. TABLA COMPACTA Y ALINEADA AL CENTRO PERFECTO */
  .modulo-mantenimiento-km {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 750px !important; /* Limita la expansión en monitores grandes */
    margin: 0 auto !important; /* Fuerza el centrado horizontal de todo el bloque */
    box-sizing: border-box !important;
  }

  /* La cabecera de filtro toma el orden superior dentro del bloque centrado */
  .modulo-mantenimiento-km .km-filtro-header {
    order: 1 !important;
    width: 100% !important;
    margin: 15px 0 10px 0 !important;
    display: flex !important;
    align-items: center;
  }

  /* Contenedor del listado inferior */
  .modulo-mantenimiento-km .km-lista-container {
    order: 2 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* FORCE EXCLUSIVO: Aplica las dimensiones al 100% a la cabecera y a ABSOLUTAMENTE TODAS las filas hijas directas del contenedor */
  .modulo-mantenimiento-km #lista-articulo > div.row.cabecera,
  .modulo-mantenimiento-km #lista-articulo > div.row.item-servicio,
  .modulo-mantenimiento-km .row.cabecera,
  .modulo-mantenimiento-km .row.item-servicio {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    float: none !important; /* Elimina cualquier comportamiento flotante antiguo de Materialize */
  }

  /*=========== ESTILOS PREMIUM EXCLUSIVOS PARA EL SELECT ANIMADO (DESKTOP) ================= */

  /* Estilizado del contenedor del Select */
  .filtros-animados #categoriaSelect,
  .filtros-animados .select-wrapper input.select-dropdown {
    height: 42px !important;
    line-height: 42px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    background-color: #fafafa !important;
    font-size: 0.9rem !important;
    color: #333333 !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out;
  }

  /* Estado al enfocar/abrir el select */
  .filtros-animados .select-wrapper input.select-dropdown:focus {
    border-color: #f90f00 !important;
    box-shadow: 0 0 0 2px rgba(249, 15, 0, 0.1) !important;
    background-color: #ffffff !important;
  }

  /* Ajuste de la etiqueta del label */
  .filtros-animados .input-field label {
    font-size: 14px !important;
    color: #666666 !important;
    font-weight: 600 !important;
    transform: translateY(-07px) scale(0.9) !important;
    transform-origin: 0 0 !important;
  }

  /* Control del menú desplegable emergente (la lista desplegada) */
  .filtros-animados .select-wrapper .dropdown-content,
  ul.dropdown-content.select-dropdown {
    max-height: 260px !important; /* Limita la altura para evitar que se desborde */
    border-radius: 8px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #eee !important;
    background-color: #ffffff !important;
  }

  /* Opciones individuales dentro de la lista */
  .filtros-animados .select-wrapper .dropdown-content li > span,
  ul.dropdown-content.select-dropdown li > span {
    color: #333333 !important;
    font-size: 0.85rem !important;
    padding: 10px 14px !important;
    font-weight: 500 !important;
  }

  /* Hover sobre las opciones */
  .filtros-animados .select-wrapper .dropdown-content li:hover,
  .filtros-animados .select-wrapper .dropdown-content li.selected {
    background-color: #fff5f5 !important;
  }

  .filtros-animados .select-wrapper .dropdown-content li:hover > span,
  .filtros-animados .select-wrapper .dropdown-content li.selected > span {
    color: #f90f00 !important;
    font-weight: 700 !important;
  }

  /* Flecha del select */
  .filtros-animados .select-wrapper .caret {
    fill: #f90f00 !important;
    right: 12px !important;
  }

  /*=========== INDICADOR DE CLIENTE SELECCIONADO ================= */
  .indicador-online {
    width: 14px;
    height: 14px;
    background-color: #00e676; /* Verde brillante igual al mockup */
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    box-shadow: 0 0 6px rgba(0, 230, 118, 0.8);
  }

  /* Estilo base del indicador verde */
  .dot-cliente-activo {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 2px;
    left: -4px;
    width: 12px;
    height: 12px;
    background-color: #00e676; /* Verde Neón */
    border: 2px solid #a90a00; /* Borde del color de la barra para resaltar */
    border-radius: 50%;
    z-index: 5;
    box-shadow: 0 0 6px rgba(0, 230, 118, 0.9);
  }

  /* 1. Si tu JS le agrega la clase 'active' o 'verde' al 'icon-cliente' */
  #icon-cliente.active .dot-cliente-activo,
  #icon-cliente.cliente-seleccionado .dot-cliente-activo {
    display: block !important;
  }

  /* 2. Si tu JS cambia el color del icono en sí (#icon-user) */
  #icon-user.verde,
  #icon-user.active,
  #icon-user.icon-usuario-active {
    color: #00e676 !important;
  }

  .icon-usuario-activo {
    color: #00e676 !important; /* Verde dinámico indicador de cliente seleccionado */
  }

  /**********************/

  /* ============== ESTILOS GENERALES DE FICHA TÉCNICA Y BODEGAS ============== */
  .detalle-container {
    display: flex;
    flex-direction: column;
    /* gap: 12px;
    padding: 10px 0; */
    font-family: inherit;
  }

  /* --- FILAS MÁS APRETADAS Y COMPACTAS --- */
  .detalle-row {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinea ambos elementos al inicio */
    gap: 16px; /* Distancia corta entre la clave y el valor */
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #d32f2f;
    margin-bottom: 6px;
  }

  .detalle-row.alt {
    background-color: #ffffff;
    border-left-color: #424242;
  }

  .detalle-label {
    font-weight: 600;
    color: #555555;
    font-size: 0.88rem;
    min-width: 120px; /* Le da un ancho fijo a las etiquetas para que los valores queden alineados */
  }

  .detalle-val {
    font-weight: 700;
    color: #111111;
    font-size: 0.92rem;
  }

  /* Bloque destacado para la Descripción del Producto */
  .descripcion-box {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  }

  .descripcion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
  }

  .descripcion-content {
    color: #333333;
    line-height: 1.6;
    font-size: 0.92rem;
    /* white-space: pre-line; */
  }

  /* --- TABLA / SECCIÓN DE BODEGAS --- */
  .bodegas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 10px;
  }

  .bodega-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .bodega-nombre {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.88rem;
  }

  .bodega-stock {
    background-color: #e8f5e9;
    color: #2e7d32;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
  }

  .bodega-stock.sin-stock {
    background-color: #ffebee;
    color: #c62828;
  }

  /* Posiciona el header con flexbox para enviar la flecha al extremo derecho */
  .collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Empuja el ícono del indicador al final */
    position: relative;
  }

  /* Alinea ícono inicial + texto a la izquierda */
  .collapsible-header > span {
    flex-grow: 1;
    margin-left: 10px;
  }

  /* Estilo para la flecha del collapsible */
  .collapsible-header .collapsible-arrow {
    margin-right: 0;
    transition: transform 0.3s ease-in-out; /* Transición suave de rotación */
    color: #666666;
  }

  /* Cuando el 'li' padre tiene la clase 'active' (desplegado), la flecha gira 180° */
  .collapsible li.active .collapsible-header .collapsible-arrow {
    transform: rotate(180deg);
    color: #d32f2f; /* Cambia a rojo (o el color primario de Bremen) cuando está abierto */
  }

  /* Contenedor general de bodegas */
  .bodegas-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Fila individual de bodega */
  .bodega-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  .bodega-item:hover {
    background-color: #ffffff;
    border-color: #d32f2f;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  }

  /* Nombre de la bodega e ícono */
  .bodega-info {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .bodega-icon {
    font-size: 18px;
    color: #d32f2f; /* Color primario Bremen */
  }

  .bodega-nombre {
    font-weight: 600;
    color: #2b2b2b;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
  }

  /* Badge (Píldora) para la cantidad */
  .bodega-stock-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
  }

  .bodega-stock-badge.con-stock {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
  }

  .bodega-stock-badge.sin-stock {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
  }

  .stock-numero {
    font-weight: 700;
    font-size: 0.95rem;
  }

  .stock-label {
    font-size: 0.75rem;
    opacity: 0.8;
  }

  /* ==========================================================================
   VISTA DETALLE DE FACTURA / COTIZACIÓN - EXCLUSIVO DESKTOP (>= 992px)
   Aislado bajo la clase .vista-detalle-factura para no impactar otras vistas
   ========================================================================== */
  main.vista-detalle-factura {
    padding-top: 130px !important;
    padding-bottom: 60px !important;
    background-color: #f4f6f8;
    min-height: 85vh;
  }

  main.vista-detalle-factura > .container {
    width: 92% !important;
    max-width: 1350px !important;
  }

  /* Tarjeta blanca contenedora */
  main.vista-detalle-factura #resultadoGeneral {
    background: #ffffff;
    border-radius: 12px;
    padding: 35px 40px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    border: 1px solid #eaedf1;
  }

  main.vista-detalle-factura #detalleTitulo {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 12px;
    margin-bottom: 25px !important;
    text-align: center !important; /* <--- Centrado */
    width: 100%;
  }

  /* Grid Layout en 2 Columnas */
  main.vista-detalle-factura .df-layout-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 35px;
    align-items: start;
  }

  /* COLUMNA IZQUIERDA: Formulario e Inputs */
  main.vista-detalle-factura .df-inputs-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    margin-bottom: 25px;
  }

  main.vista-detalle-factura .df-inputs-grid .input-field {
    margin: 0 !important;
    position: relative;
  }

  main.vista-detalle-factura .df-inputs-grid textarea.materialize-textarea {
    width: 100% !important;
    background-color: #fafafa !important;
    border: 1px solid #cccccc !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    color: #333333 !important;
    min-height: 48px !important;
    height: 48px !important;
    box-sizing: border-box !important;
    resize: none;
  }

  main.vista-detalle-factura
    .df-inputs-grid
    textarea.materialize-textarea:focus {
    border-color: #f90f00 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(249, 15, 0, 0.1) !important;
  }

  main.vista-detalle-factura .df-inputs-grid label {
    position: absolute;
    top: -22px !important;
    left: 2px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #555555 !important;
    transform: none !important;
  }

  /* Tabla de Productos */
  main.vista-detalle-factura #detalleFactura {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
  }

  main.vista-detalle-factura #detalleFactura thead {
    background-color: #f90f00 !important;
  }

  main.vista-detalle-factura #detalleFactura thead th {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    padding: 14px 18px !important;
    border: none;
  }

  main.vista-detalle-factura #detalleFactura tbody td {
    padding: 14px 18px !important;
    font-size: 14px;
    color: #333333;
  }

  /* COLUMNA DERECHA: Card Resumen */
  .df-summary-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 24px;
    position: sticky;
    top: 140px;
  }

  .df-summary-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 18px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #cbd5e1;
  }

  .df-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: #475569;
  }

  .df-total-row.df-grand-total {
    border-top: 2px solid #cbd5e1;
    margin-top: 10px;
    padding-top: 14px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
  }

  .df-total-row.df-grand-total .df-val {
    color: #f90f00;
    font-size: 22px;
  }

  /* Botón integrado dentro de la barra lateral */
  main.vista-detalle-factura #btnCrearPedido {
    padding: 0 !important;
    margin: 0 !important;
  }

  main.vista-detalle-factura #btnCrearPedido .btn,
  main.vista-detalle-factura #btnCrearPedido a.btn,
  main.vista-detalle-factura #btnCrearPedido button {
    width: 100% !important;
    height: 50px !important;
    line-height: 50px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background-color: #f90f00 !important;
    box-shadow: 0 4px 14px rgba(249, 15, 0, 0.3) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
  }

  main.vista-detalle-factura #btnCrearPedido .btn:hover,
  main.vista-detalle-factura #btnCrearPedido a.btn:hover,
  main.vista-detalle-factura #btnCrearPedido button:hover {
    background-color: #d60c00 !important;
    transform: translateY(-1px);
  }

  .contenedor-paginador {
    display: block;
    width: 100%;
    clear: both; /* Limpia cualquier elemento flotante previo */
    text-align: center;
    margin-top: 30px;
    margin-bottom: 40px;
  }

  /* Si el paginador utiliza ul.pagination o display flex interno */
  .contenedor-paginador .pagination,
  .contenedor-paginador nav {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
  }

  /* Resaltar la opción seleccionada dentro de las listas */
  .marcas-link-listado input[type="radio"]:checked + label,
  .marcas-link-listado input[type="checkbox"]:checked + label {
    background-color: #caad1c !important; /* Rojo característico */
    color: #ffffff !important;
    border-color: #b70b00 !important;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(249, 15, 0, 0.6);
  }

  
  /* ========================= ESTILOS MODAL PROMOCIÓN ========================= */

  #promoModal2.modal {
    max-width: 520px !important; /* Limita el ancho horizontal */
    width: 50% !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    overflow-x: hidden;
  }

  #promoModal2 .modal-content {
    padding: 24px 28px !important;
  }

  /* Mejora de distribución de etiquetas y select */
  #promoModal2 .row {
    margin-bottom: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  #promoModal2 h4 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #222;
    margin-bottom: 6px !important;
  }

  #promoModal2 h5 {
    font-size: 1rem !important;
    color: #555;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  #promoModal2 .col.s4 label {
    font-size: 0.95rem !important;
    font-weight: 600;
    color: #333;
    text-align: left;
  }

  #promoModal2 select.browser-default {
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    height: 42px !important;
    padding: 0 10px !important;
    background-color: #fff !important;
  }

/* Alineación vertical perfecta para todas las celdas */
  #DatosCarritos th,
  #DatosCarritos td {
    vertical-align: middle !important;
    padding: 10px 8px !important;
  }

  /* Distribución de anchos y alineación de encabezados */
  #DatosCarritos thead th:nth-child(1) {
    text-align: left;
    width: 40%;
  }
  #DatosCarritos thead th:nth-child(2) {
    text-align: left;
    width: 20%;
  }
  #DatosCarritos thead th:nth-child(3),
  #DatosCarritos thead th:nth-child(4),
  #DatosCarritos thead th:nth-child(5) {
    text-align: center;
  }
  #DatosCarritos thead th:nth-child(6) {
    text-align: right;
    width: 20%;
  }
  #DatosCarritos thead th:nth-child(7) {
    text-align: center;
    width: 5%;
  }

  /* Contenedor del contador (+ / - y cantidad) pegados */
  #DatosCarritos tr td:nth-child(3),
  #DatosCarritos tr td:nth-child(4),
  #DatosCarritos tr td:nth-child(5) {
    padding: 0 2px !important;
    text-align: center !important;
    width: 1%; /* Mantiene las celdas compactas e inmediatamente juntas */
    white-space: nowrap;
  }

  /* Estilo compacto para los botones - y + */
  #DatosCarritos tr td:nth-child(3) a,
  #DatosCarritos tr td:nth-child(3) button,
  #DatosCarritos tr td:nth-child(5) a,
  #DatosCarritos tr td:nth-child(5) button,
  #DatosCarritos .btn-restar,
  #DatosCarritos .btn-sumar {
    display: inline-block;
    padding: 0 4px !important;
    margin: 0 !important;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
  }

  /* Input/Texto de la cantidad centrado */
  #DatosCarritos tr td:nth-child(4) input,
  #DatosCarritos tr td:nth-child(4) span {
    width: 35px !important;
    text-align: center !important;
    margin: 0 !important;
    height: auto !important;
    border: none !important;
    font-weight: 600;
  }

  /* Alineación del SubTotal y del icono eliminar */
  #DatosCarritos tr td:nth-child(6) {
    text-align: right !important;
    white-space: nowrap;
  }

  #DatosCarritos tr td:nth-child(7) {
    text-align: center !important;
  }

  #DatosCarritos tr td:nth-child(7) i,
  #DatosCarritos tr td:nth-child(7) img {
    cursor: pointer;
    vertical-align: middle;
  }
  
}


/* ==========================================================================
   TABLA DE COTIZACIONES Y PEDIDOS (SOLO MÓVIL) - CABECERA ROJA
   ========================================================================== */
@media screen and (max-width: 39.9375em) {
  /* 1. Prioridad de capa: El footer SIEMPRE debe estar por encima de los botones de la tabla */
  my-footer,
  footer,
  .page-footer,
  .footer-fixed {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important; /* Capa superior asegurada */
  }

  /* 2. Reducir el z-index de los botones de acción dentro de la tabla */
  #tblcotizacion td .fixed-action-btn,
  #tblpedido td .fixed-action-btn {
    z-index: 5 !important; /* Pasa por debajo del footer al hacer scroll */
  }

  #tblfactura,
  #tblcotizacion,
  #tblpedido,
  #tblarticulocliente {
    width: 100%;
    font-size: 10px;
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
  }
  #tblfactura tbody:nth-child(odd),
  #tblcotizacion tbody:nth-child(odd),
  #tblpedido tbody:nth-child(odd),
  #tblarticulocliente tbody:nth-child(odd) {
    background: #ffffff !important;
    display: none;
    border-bottom: solid 2px #878d88;
  }
  #tblfactura tbody:nth-child(even),
  #tblcotizacion tbody:nth-child(even),
  #tblpedido tbody:nth-child(even),
  #tblarticulocliente tbody:nth-child(even) {
    background: #c9d1cb !important;
  }
  #tblfactura tbody:nth-child(4n),
  #tblcotizacion tbody:nth-child(4n),
  #tblpedido tbody:nth-child(4n),
  #tblarticulocliente tbody:nth-child(4n) {
    background: #fff !important;
  }
}