/* ═══════════════════════════════════════════════════════════════
     PADDING LATERAL DUPLICADO EN MÓVIL — ADMIN (todo el sistema)
     El layout de AdminLTE (resources/views/vendor/adminlte/partials/
     cwrapper/cwrapper-default.blade.php) ya envuelve el contenido de
     TODAS las páginas del admin en su propio ".content > .container-
     fluid" (con el padding lateral por defecto de Bootstrap, ~15px).
     Muchas vistas además arrancan su propio contenido con OTRO
     ".container-fluid" (px-3, px-4, etc.) anidado justo adentro — el
     padding se duplica (~30-40px por lado), dejando ese espacio
     "sobrante" en los bordes que se nota en cualquier pantalla chica.
     Se anula el padding del contenedor interno específicamente
     cuando está anidado así, en vez de tocar el wrapper compartido
     (evita re-parchar página por página, y no afecta a nada que no
     siga ese patrón exacto). */
  @media (max-width: 767.98px) {
    .content > .container-fluid > .container-fluid,
    .content > .container > .container-fluid,
    .content > .container-fluid > .container,
    .content > .container > .container {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  .loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }


  .table-sm td, .table-sm th {
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
  }

  .display-4 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2;
  }

  .breadcrumb {
    background-color: transparent !important;
  }

  .swal2-image[style*="display: none"] {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .alert ul {
    margin-bottom: 0rem !important;
  }

  /* Modal estilos personalizados */
  .modal-full-left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    margin: 0;
    max-width: 800px;
    width: 800px;
    height: 100vh;
    transform: translate(0, 0) !important;
    border-radius: 0;
    z-index: 1050;
    overflow-y: auto;
  }

  .modal-full-left .modal-content {
    min-height: 100vh;
    border-radius: 0;
    border: none;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
  }

  .modal-full-left .modal-header {
    background: #413f40 !important;
    color: white;
    border-bottom: none;
    padding: 15px 20px;
  }

  .modal-full-left .modal-title {
    font-weight: 600;
    font-size: 1.3rem;
  }

  .modal-full-left .modal-body {
    padding: 20px;
    background: #413f40 !important;
  }

  .modal-full-left .modal-footer {
    background: #413f40 !important;
    border-top: 1px solid #dee2e6;
    padding: 15px 20px;
  }

  .modal-backdrop.show {
    opacity: 0.5;
    background-color: #000;
  }


  @media (max-width: 992px) {
    .modal-full-left {
      width: 100%;
      max-width: 100%;
    }
  }

  @media (max-width: 800px) {
    .modal-full-left {
      width: 100%;
    }

    .feature-box {
      min-width: 100%;
    }
  }

  /* Scroll iamgenes de inventario */
  .thumb {
    max-height: 171px;
    border: solid 6px white;
  }

  .lightbox {
    position: fixed;
    z-index: 999;
    height: 0;
    width: 0;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
  }

  .lightbox img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
    opacity: 1;
    background: #ccc;
  }

  .lightbox:target {
    outline: none;

    width: 100%;
    height: 100%;
    opacity: 1 !important;

  }

  .lightbox:target img {
    border: solid 3px #f1f3f5;
    opacity: 1;
    webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
  }

  .light-btn {
    color: #fafafa;
    background-color: #333;
    /* border: solid 3px #6d6767; */
    padding: 5px 15px;
    border-radius: 1px;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    position: absolute;
    top: 45%;
    z-index: 99;
  }

  .light-btn:hover {
    background-color: #111;
  }

  .btn-prev {
    left: 7%;
  }

  .btn-next {
    right: 7%;
  }

  .btn-close {
    position: absolute;
    right: 2%;
    top: 2%;
    color: #FFF;
    background-color: #333;
    border: solid 4px #FFF;
    padding: 2px 10px;
    border-radius: 50%;
    text-decoration: none;
  }

  .btn-close:hover {
    background-color: #111;
  }

  img {
    display: inline !important;
  }

  /* FIn scroll imagenes inventario */
  /*   #invoice_table_ingresos tfoot tr:hover {
    background-color: inherit !important;
    cursor: default !important;
  } */

  .modal .modal-dialog .modal-content .modal-header.bg-primary .close span {
    font-size: 20px;
    font-weight: 400;
    color: #fff;
  }

  .modal .modal-dialog .modal-content .modal-header.bg-primary .close:hover span {
    color: #e2e6ea;
  }

  .table_head_order th {
    text-align: center;
    color: #00559e;
  }

  .area_perfil_order {
    padding: 5px 30px;
  }

  .order_local {
    margin-top: 2px;
    margin-bottom: 2px;
    font-weight: 700;
  }

  .col-xs-4 {
    width: 33.33333333%;
  }

  .order_stock {
    margin-top: 2px;
    margin-bottom: 2px;
    color: #888;
  }

  .col-xs-8 {
    width: 66.66666667%;
  }

  .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
  }

  .table_footer_order td {
    padding: 16px 8px !important;
    font-size: 16px;
    border-top: 1px solid #00559e !important;
    border-bottom: 1px solid #00559e !important;
    background: #fff6db;
    vertical-align: middle !important;
  }

  .font-bold {
    font-weight: 700;
  }

  .flex-gap-1>*+* {
    margin-left: 0.25rem;
    /* equivalente a gap-1 */
  }

  .flex-gap-2>*+* {
    margin-left: 0.5rem;
    /* Bootstrap 5 gap-2 = 0.5rem */
  }

  .flex-gap-3>*+* {
    margin-left: 1rem;
    /* equivale a gap-3 en Bootstrap 5 */
  }

  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @media (min-width: 992px) {
    .inventory_transfer .modal-lg {
      width: 900px !important;
      max-width: 900px !important;
    }
  }

  .custom-divider {
    border-right: 1px solid #ccc;
    /* azul Bootstrap */
    padding-right: 15px;

  }

  .custom-divider-left {
    padding-left: 15px;

  }

  /*   .h6, h6 {
    font-size: 0.750rem;
    font-weight: 500;
  } */

  .table_note_ot {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
  }

  .select2-container--default .select2-dropdown .select2-search__field:focus, .select2-container--default .select2-search--inline .select2-search__field:focus {
    outline: 0;
    border: 0px solid #80bdff;
  }

  .page-title-box {
    padding: 10px 1.5rem !important;
    background-color: #fff;
    -webkit-box-shadow: var(--vz-page-title-box-shadow);
    box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
    border-bottom: 1px solid none;
    margin: 0px calc(1.5rem * -1) 0.3rem calc(1.5rem * -1);
  }

  /*   .dataTables_processing {
    margin-left: 0px !important;
    background-color: rgba(0, 0, 0, 0.6);

    color: #fff;
    font-size: 18px;
    padding: 20px;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    width: auto;
    transform: translate(-50%, -50%);
    position: fixed;
    z-index: 1050;

    text-align: center;
  } */


  .datatable_detail .dropdown-menu {
    border: 1px solid #000;
    /*  border-radius:5px; */
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
  }
.datatable_detail thead th {
    font-size: 0.9rem !important;
}
.datatable_detail tbody td:first-child {
    text-align: center;
    font-size: 0.9rem !important;
}

  .datatable_detail .dropdown-menu .btn-link {
    padding: 3px 0px;
    color: #292929;
    width: 100%;
    text-align: left;
  }

  .datatable_detail .dropdown-menu .btn-link:hover {
    text-decoration: underline;
  }

  .datatable_detail .dropdown-menu .seguimiento:hover {
    text-decoration: underline;
  }

  .custom-select {
    position: relative;
    display: inline-block;
    font-size: 14px
  }

  .options {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 1;
    width: 100%;
    margin-top: 4px;
    margin-left: -10px;
  }

  .custom-select:hover .options {
    display: block;
  }

  .options a {
    display: block;
    padding: 8px;
    text-decoration: none;
    color: black;

  }

  .options a:hover {
    background-color: #f0f0f0;
  }

  .filters_table_inventory {
    display: flex;
    justify-content: space-between;
  }

  .filters_table_inventory div.info_box_inventory, .filters_table_inventory div.info_text_inventory {
    padding-right: 0px;
    padding-bottom: 0px;
  }

  .info_box_inventory {
    height: 90px;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
  }

  .info_box_inventory .icon_label {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    margin-bottom: 0px;
    font-size: calc(100% + 25px);
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    opacity: 0.8;
  }

  .filters_table_inventory div.info_box_inventory, .filters_table_inventory div.info_text_inventory {
    padding-right: 0px;
    padding-bottom: 0px;
  }

  .info_box_inventory .info_text_inventory {
    height: 100%;
    display: flex;
    align-items: center;
    width: 70%;
    padding-left: 5px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }



  .info_box_inventory .info_text_inventory p {
    line-height: 0.9;
    color: #fff;
    text-align: center;
    width: 100%;
    padding-top: 13px;
  }

  .info_box_inventory .info_text_inventory p {
    line-height: 0.9;
    color: #fff;
    text-align: center;
  }

  .info_box_inventory .info_text_inventory p b {
    font-size: 45px;
  }

  b, strong {
    font-weight: 700;
  }

  .info_box_inventory .info_text_inventory p a {
    text-decoration: none;
    color: #fff;
    font-size: 12px;
  }


  .filters_table_inventory div {
    padding-left: 0px;
    padding-right: 5px;
    padding-bottom: 5px;
  }


  /*  @media (min-width: 768px) {
    .col-md-2 {
      width: 16.66666667% !important;
      flex: 0 0 13.666667%;
      max-width: 16.666667%;
    }
  } */





  .card-header::after {
    display: none;
    clear: both;
    content: "";
  }

  table.inventario td {
    vertical-align: middle;
    padding: 8px !important;
    font-size: 20px;
  }

  /*  */
  .modal_inventory_menu .table-responsive {
    height: 600px;
    overflow: scroll;
  }

  /*   .table thead tr:nth-child(1) th {
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  } */

  /*   tr.selected {
    background-color: #f1f1f1;
  }

  tr:hover {
    background-color: #f1f1f1;
  } */

  /*  */



  /*   .item_img_table {
    max-height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 3px solid #00559e;
    overflow-y: hidden;
    height: 40px;
  } */

  .item_img_table {
    width: 40px;
    height: 40px;
    /* La regla global "img { max-width: 100% }" (más abajo en este mismo
       archivo) limita el ancho al de su contenedor — en el datatable de
       inventario (scrollX) la celda de esta columna queda muy angosta
       (sin un width de columna fijo asignado), así que esa regla
       terminaba achicando el ancho del ícono a ~16px mientras el alto se
       quedaba en 40px: el círculo se veía estirado como un óvalo. Fijar
       también max-width acá (más específico que el "img" global) anula
       ese límite y mantiene el círculo de 40x40 sin importar qué tan
       angosta calcule DataTables la columna. */
    max-width: 40px;
    border-radius: 50%;
    border: 3px solid #00559e;
    object-fit: cover;
    /* 🔥 evita deformación */
    display: block;
    margin: auto;
  }

  /* Ocultar solo esta columna en móvil */
  @media (max-width: 576px) {
    .item_img_table {
      display: none !important;
    }
  }



  .description_setting_inventory .item_color_menu {
    height: 15px;
    width: 15px;
  }

  .item_color_menu {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 3px solid #bdbdbd;
    margin-left: 3px;
  }

  .mb-0, .my-0 {
    margin-bottom: 0 !important;
  }

  div:where(.swal2-container).swal2-top, div:where(.swal2-container).swal2-center, div:where(.swal2-container).swal2-bottom {
    z-index: 99999;
  }

  .modal_inventory_menu {
    border-radius: 0;
    background: #413f40 !important;
  }

  .modal-top i {
    color: #fcb600 !important;
  }

  .item_color_table {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    border: 4px solid #bdbdbd;
    margin-left: 3px;
  }

  label {
    display: inline-block;
    margin-bottom: .5rem;
  }

  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
  }

  /*  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    font-weight: 700;
    color: #292929 !important;
  } */
  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    font-weight: 700;
    color: #292929 !important;
    border: 0;
  }

  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background: #e4e4e4;
  }

  .filter_inventory i {
    color: #fcb600;
  }

  .filter_inventory {
    font-size: 18px;
    font-weight: 700;
    padding: 14px 20px;
    line-height: 23px;
  }

  .area_chek_view {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
  }

  .title_grid_product {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    color: #000;
    padding-top: 25px;
    padding-right: 25px;

  }

  /* Cada tramo (categoría, "/", subcategoría) no debe partirse a media
     palabra: si no entra todo en una línea, que el conjunto baje entero
     a la siguiente (flex-wrap arriba), no que el texto se corte adentro. */
  .title_grid_product h3 {
    white-space: nowrap;
    margin-bottom: 0;
  }

  .item_grid_product {
    padding: 15px;
  }

  .btn_add_grid_product {
    border-radius: 0.25em;
    border: 3px dashed #5bc0de;
    background: inherit;
    color: #5bc0de;
    font-weight: 700;
    height: 224px;
    width: 100%;
    font-weight: 700;
    font-size: 1rem;
  }

  /* Tarjeta de producto: borde punteado azul reemplazado por un borde y
     sombra suaves — el punteado se ve como una zona para "soltar archivo",
     no como una tarjeta terminada. (El botón "Añadir Producto" sí conserva
     su borde punteado en .btn_add_grid_product, ahí tiene sentido). */
  .area_grid_product {
    border-radius: 0.5em;
    border: 1px solid #d7dbe6;
    background: #fff;
    box-shadow: 0 2px 8px rgba(20, 30, 60, .08);
    height: 100%;
    overflow: hidden; /* recorta la imagen (que llega hasta el borde) a la esquina redondeada */
    transition: box-shadow .15s ease, border-color .15s ease;
  }

  .area_grid_product:hover {
    border-color: #b7bfd6;
    box-shadow: 0 4px 14px rgba(20, 30, 60, .12);
  }

  .img_grid_product {
    overflow-y: hidden;
    height: 218px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* La imagen debe verse completa dentro de la caja de 218px, nunca recortada.
     La regla global "img { max-width: 100% }" solo limita el ancho, así que una
     foto más alta que ancha (retrato) se desbordaba en altura y quedaba cortada
     por el overflow-y: hidden del contenedor. object-fit: contain la reduce
     manteniendo su proporción, sin recortar cabeza ni pies. */
  .img_grid_product img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .desc_grid_product {
    padding-top: 25px;
    padding-bottom: 8px;
    overflow-x: hidden;
  }

  .btn_lb, .btn.btn_lb:active, .btn.btn_lb:focus {
    border-left: 1px solid #ddd !important;
  }

  .btn_rb, .btn.btn_rb:active, .btn.btn_rb:focus {
    border-right: 1px solid #ddd !important;
  }

  .select2-container {
    font-weight: normal;
  }

  .desc_grid_product h4 {
    font-size: 20px;
    overflow-y: hidden;
  }

  /*   .product_name_grid {
    height: 45px;
  } */

  .title_grid_product h3 {
    padding-right: 5px;
  }

  /* Vista de producto en móvil: la miniatura queda a la izquierda (col-4) y
     la info a la derecha (col-8) en todos los tamaños de pantalla — antes
     col-md-4/col-sm-4 solo aplicaba desde tablet hacia arriba, así que en
     celular la imagen y el texto se apilaban en columna completa. Acá solo
     se ajusta la densidad para que se vea prolijo en pantallas chicas. */
  @media (max-width: 767.98px) {
    /* La columna de la imagen (col-4) se estira por flex a la altura de la
       columna de texto (col-8, más alta). Si .img_grid_product se queda con
       una altura fija chica (100px), la imagen queda "pegada arriba" de esa
       columna más alta en vez de centrada. Con height:100% ocupa todo el
       alto disponible y su propio flex/align-items la centra verticalmente. */
    .img_grid_product {
      height: 100%;
      min-height: 100px;
    }

    .desc_grid_product {
      padding-top: 10px;
      padding-bottom: 4px;
    }

    /* Ese margen de 2rem estaba pensado para la tarjeta grande de escritorio;
       en móvil dejaba un espacio vacío grande debajo de los botones. */
    .btn_grid_product.u-mb4 {
      margin-bottom: 6px;
    }

    .desc_grid_product h4 {
      font-size: 15px;
    }

    .desc_grid_product h6 {
      font-size: 12px;
      margin-bottom: 3px;
    }

    .title_grid_product h3 {
      font-size: 1.1rem;
    }

    .btn_grid_product {
      display: flex;
      flex-wrap: wrap;
    }

    .btn_grid_product .btn {
      padding: 0.25rem 0.4rem;
      font-size: 0.8rem;
    }
  }

  @media (min-width: 992px) {
    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .main-footer, .sidebar-mini.sidebar-collapse .main-header {
      margin-left: 0rem !important;
    }
  }

  .c-categoriy__wrapper .dropdown.show:before {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(100, 100, 100, 0.5);
    content: '';
    z-index: 1;
  }

  .c-category {
    border-top: 1px solid #f1f3f5;
    /* Antes "wrap": apenas los 3 íconos + el nombre de la categoría no
       entraban justo en una línea, el nombre saltaba abajo. Con nowrap
       nunca salta; en móvil (abajo) se compensa achicando íconos y
       texto para que quepan igual. */
    flex-wrap: nowrap;
    position: relative;
  }

  .menu-category .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 4px;
  }

  @media screen and (min-width: 768px) {
    .c-category.is-active .c-category__subcategory-list {
      border: 1px solid #f2f2f2;
    }
  }

  .c-category.is-active .c-category__subcategory-list {
    max-height: 100vh;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
  }

  .c-category__subcategory-list {
    /*   max-height: 0;
 */
    /* overflow: hidden;
    overflow-y: hidden; */
    padding-left: 0;
  }

  .c-category__name {
    min-width: 150px;
    background-color: transparent;
    border: 0;
    font-size: 1.3rem;
    text-align: left;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    font-weight: 500;
  }

  .c-categoriy__wrapper .dropdown-menu.show {
    transform: unset !important;
    /*  position: relative  !important;
  z-index: 1400; */
    position: absolute !important;
    z-index: 1400;
    margin-top: 56px;
    border: 0px;
    border-radius: 0;
  }

  .c-sub-header li {
    list-style: none;
    padding: 0px;
  }

  .c-sub-header__search {
    background: white;
    border: 0;
    color: #000;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    height: 56px;
    max-width: 600px;
    position: relative;
  }

  .special-search {
    background-color: rgba(245, 245, 245, 1);
    opacity: .4;
  }

  .c-sub-header__search input {
    border: 0;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    outline: 0;
    padding-left: 2rem;
    padding-right: 3rem;
    width: 100%;
  }

  .c-category__subcategory {
    -webkit-box-align: start;
    align-items: flex-start;
    border-bottom: 1px solid #f2f2f2;
    display: -webkit-box;
    display: flex;
    font-size: 1.2rem;
    padding: 1rem 2rem;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }

  .c-sub-header li {
    list-style: none;
  }

  .c-category__subcategory {
    font-size: 1.2rem;
  }

  .c-category__container.is-active {
    visibility: visible;
  }

  .c-category__mask.is-show {
    opacity: 1;
    /*  pointer-events: all; */
  }

  .c-category__mask {
    background-color: rgba(0, 0, 0, 0.52);
    bottom: 0;
    cursor: pointer;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 3;
  }

  /* Cabecera de /admin/products en móvil: botón "CATEGORÍAS" más chico
     para que el buscador (ya flex:1, crece solo) gane ancho, y el menú
     desplegable de categorías/subcategorías sin el ancho fijo de
     escritorio (400px, más ancho que la pantalla en un celular) que
     recortaba los botones de editar/eliminar del lado derecho. */
  @media (max-width: 767.98px) {
    .c-category__dropdown {
      height: 44px !important;
      font-size: 1rem !important;
      padding: 0 12px !important;
    }

    /* El menú desplegable de categorías baja "margin-top: 56px" (calibrado
       para el botón de escritorio) — con el botón ya en 44px en móvil,
       ese margen de más dejaba un espacio vacío entre el botón y el
       menú. Acá se ajusta a la altura real del botón móvil. */
    .c-categoriy__wrapper .dropdown-menu.show {
      margin-top: 44px !important;
    }

    .c-sub-header__search,
    .c-sub-header__search input {
      height: 44px !important;
    }

    /* Botones "Lista"/"Auditoría": tenían height:56px fijo en línea, sin
       bajar a 44px como Categorías y el buscador acá arriba — quedaban
       más altos, sobresaliendo debajo de la fila. Antes apuntaba a
       .btn-info/.btn-primary genérico, que también matcheaba (sin
       querer) al botón "Stock" de cada categoría dentro del dropdown
       (también usa btn-info) — y como los 3 botones de esa fila
       comparten el mismo contenedor flex, los otros 2 (editar/eliminar)
       se estiraban igual para igualar esa altura. Clase propia en vez
       de btn-info/btn-primary para que no vuelva a filtrarse. */
    .c-sub-header__toolbar-btn {
      height: 44px !important;
    }

    .menu-category {
      width: 95vw !important;
      max-width: 95vw !important;
      left: 0 !important;
      right: auto !important;
    }

    /* Fila de cada categoría (íconos + nombre): siempre en una sola
       línea. Se achican íconos y texto para que entren igual, en vez
       de dejar que el nombre se vaya a la línea de abajo. */
    .c-category {
      padding-left: 0.75rem !important;
      padding-right: 0.75rem !important;
      justify-content: space-between !important;
    }

    /* Íconos en su posición original (izquierda, orden natural del
       HTML) — antes flex:1 1 auto + text-align:right (más abajo en
       .c-category__name) hacía que el nombre creciera y ocupara TODO el
       espacio sobrante empujando su texto al extremo derecho. Sin
       flex-grow, mide solo lo que su texto necesita. */
    .c-category .c-category__name {
      flex: 0 1 auto !important;
      text-align: left !important;
    }

    .c-category > .d-flex {
      flex-shrink: 0;
      gap: 4px;
    }

    /* Botones editar/eliminar/stock: mismas clases y tamaño que ya usa
       la fila de subcategoría (sin override propio, tamaño de Bootstrap
       por defecto) — antes el padding/font-size más chicos de acá
       combinados con el bug de altura de arriba (.c-sub-header__toolbar-btn)
       los dejaba desproporcionados (angostos y muy altos). */

    .c-category__name {
      font-size: 1rem !important;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  body {
    font-weight: 700;
  }

  td, .bottom {
    font-weight: normal;
  }

  .c-header {
    padding: 0.7rem 0.7rem !important;
    background: #fff;
  }

  img {
    max-width: 100%;
  }

  .layout-navbar-fixed .wrapper .content-wrapper {
    margin-top: 0.2rem;
  }

  .nav_bussinnes>.nav-tabs>li>a.active, .nav_bussinnes>.nav-tabs>li>a:hover {
    border-top: 3px solid #007bff !important;
    background: #fff;
    font-weight: 700;
  }

  .u-shadow-bottom {
    box-shadow: 0 4px 16px 1px rgba(133, 131, 131, 0.5);
  }

  .u-px0 {
    padding-left: 0;
    padding-right: 0;
  }

  .u-bg-white {
    background-color: white;
  }

  .border_nav .nav-link.active {
    color: #495057;
    border-color: #dee2e6 #dee2e6;
  }

  .nav-tabs>li>a {
    color: #337ab7;
  }

  /* Banner */
  @media (min-width: 768px) {
    .btn_portada {
      height: 303px;
    }
  }

  .btn_portada {
    border: 3px dashed #00559e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00559e;
  }

  .item_portada {
    border: 1px solid #ccc;
  }

  @media (min-width: 576px) {
    .img_portada {
      overflow-y: hidden;
      height: 208px;
    }
  }

  .info_portada {
    padding: 15px;
  }

  .option_portada.text-warning, .option_portada.text-success {
    border-right: 1px solid #ccc;
  }

  .option_portada {
    padding-left: 5px;
    padding-right: 5px;
  }

  .option_row {
    display: flex;
  }

  .u-mb4 {
    margin-bottom: 2rem;
  }

  @media (min-width: 576px) {
    .info_portada .title_portada {
      overflow-y: hidden;
      height: 36px;
    }
  }

  .info_portada h3 {
    margin-top: 0px;
    margin-bottom: 5px;
    line-height: 1.3;
  }

  .btn_portada span {
    font-size: 22px;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .bgm {
    background-color: transparent;
  }

  .bt {
    padding: 3px !important;
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .bg-facebook {
    background: #3b579d;
  }

  .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #f3f3f3;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    cursor: move;
  }

  .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #f3f3f3;
    border-radius: 0.3rem;
    outline: 0;
  }

  .btn-close-modal {
    background: #fff !important;
    padding: .05em .5em !important;
    border-radius: .25em !important;
  }

  .close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
  }

  .modal .modal-dialog .modal-content .modal-header .close span {
    font-size: 20px;
    font-weight: 400;
    color: #6a6a6a;
  }

  .modal-title {
    margin-bottom: 0;
    line-height: 1.5;
  }

  .modal-header h5 {
    font-size: 1.125rem;
    font-weight: 600;
    /* padding-top: 2px; */
  }

  /* Banner */

  /* Usuarios */
  .filters_users {
    display: flex;
  }

  /*   div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
  }

  .dataTables_length {
    text-align: right;
  } */

  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: #292929;
  }

  /*  .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    width: 100%;
  } */
  .filtro {
    width: 300px;
    float: right;
    margin-top: -30px;
  }

  @media (max-width: 576px) {
    .w100 {
      width: 100% !important;
    }

    /* .filtro (usado por DataTables para el selector "Mostrar X
       registros") trae margin-top:-30px de la regla de escritorio de
       arriba, pensado para pegarlo visualmente contra algo de arriba en
       ese layout. En móvil, con !important para garantizar que gane
       siempre, se lo empujaba encima/detrás del buscador y quedaba
       tapado — "desaparecido". */
    .filtro {
      width: 100% !important;
      float: none !important;
      margin-top: 10px !important;
    }

    .filters_users div, .filters_users a {
      width: 50% !important;
    }

    .filters_users {
      flex-wrap: wrap;
    }

    .bot {
      width: 100% !important;
    }

    .w100 {
      width: 100%;
    }

    div.dataTables_wrapper div.dataTables_filter {
      text-align: center;
    }
  }

  @media (min-width: 992px) {
    .modal-lg {
      width: 900px !important;
      max-width: 900px !important;
    }
  }

  /* Usuarios */

  .dropzone span {
    margin-bottom: 0;
    font-size: 1.8rem;
    font-weight: 400;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
  }

  .dropzone {
    color: #0099db;
    cursor: pointer;
  }

  /* web */
  .dropzone label, .dropzone span {
    margin-bottom: 0;
    font-size: 1.8rem;
    font-weight: 400;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
  }

  .dropzone, .dropzone * {
    box-sizing: border-box;
  }

  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
  }

  .drop-zone__thumb, .dropzone_image, .dropzone input {
    -webkit-box-align: center;
    align-items: center;
    bottom: 0;
    display: -webkit-box;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
  }

  .control-label i {
    color: #0099db;
    margin-right: .5rem;
  }


  .info_area_admin .nav>li>a {
    border-top: 3px solid transparent;
    color: #555;
  }


  /* Dropzone empresa Banner */


  #fileb1,
  #fileb2 {
    display: none;
  }

  img.bdefault {
    cursor: pointer;
    width: 100%;
    height: auto;
  }

  .ba1,
  .ba2 {
    width: 100%;
    height: 100%;
    object-fit: fill;
    text-align: center;
    overflow: hidden;
  }

  .baner {
    line-height: 150px;
    height: 180px;
  }

  #edit_escritorio,
  #edit_movil {
    display: none;
  }

  img.bdefault {
    cursor: pointer;
    width: 100%;
    height: auto;
  }

  .label_escritorio,
  .label_movil {
    width: 100%;
    height: 100%;
    object-fit: fill;
    text-align: center;
    overflow: hidden;
  }

  .baner {
    line-height: 150px;
    height: 180px;
  }

  /* Dropzone */

  .drop-zone {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    height: 200px;
    border-width: 2px;
    margin-bottom: 20px;
    color: #646C7F;
    border-style: dashed;
    border-color: #0087F7;
    border-radius: 5px;
    line-height: 200px;
    cursor: pointer;
  }



  .dropzone {
    -webkit-box-align: center;
    align-items: center;
    border-radius: 4px;
    border: 2px dashed;
    color: #0099db;
    display: -webkit-box;
    display: flex;
    height: 180px;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    padding: .75rem;
  }

  .dropzone {
    min-height: 150px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    background: white;
    padding: 20px 20px;
  }

  .dropzone,
  .dropzone * {
    box-sizing: border-box;
  }





  #dropzone.hover {
    border: 10px solid #FE5;
    color: #FE5;
  }


  #dropzone div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  #dropzone img {
    border-radius: 10px;
    vertical-align: middle;
    max-width: 95%;
    max-height: 95%;
  }

  #dropzone [type="file"] {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .drop-zone {
    max-width: 100%;
    height: 285px;
    /*  padding: 25px; */
    display: flex;
    align-items: center;
    justify-content: center;
    /*  text-align: center;
                                                                                                                                                                                                                                                        font-family: "Quicksand", sans-serif;
                                                                                                                                                                                                                                                        font-weight: 500;
                                                                                                                                                                                                                                                        font-size: 20px;
                                                                                                                                                                                                                                                        cursor: pointer;
                                                                                                                                                                                                                                                        color: #cccccc;
                                                                                                                                                                                                                                                        border: 4px dashed #009578;
                                                                                                                                                                                                                                                        border-radius: 10px; */
  }

  .drop-zone--over {
    border-style: solid;
  }

  .drop-zone__input {
    display: none;
  }

  .drop-zone__thumb {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #cccccc;
    background-size: cover;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
    text-align: center;
    background-position: center;
  }

  .drop-zone__thumb::after {
    content: attr(data-label);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.75);
    font-size: 14px;
    text-align: center;
    display: none;
  }

  /* Empresa */
  #file1,
  #file2 {
    display: none;
  }

  img.default {
    cursor: pointer;
    width: 100%;
    height: auto;
  }

  .lo1,
  .lo2 {
    width: 100%;
    height: 100%;
    object-fit: fill;
    text-align: center;
  }

  @media (max-width: 1440px) {
    .menuhidden {
      display: none;
    }
  }

  /* Por defecto mostrar solo los textos grandes */
  .texto-grande {
    display: inline;
  }

  .texto-chico {
    display: none;
  }

  /* Cuando la resolución es menor o igual a 1440px */
  @media screen and (max-width: 1440px) {
    .texto-grande {
      display: none;
    }

    .texto-chico {
      display: inline;
    }
  }

  .btn-copy-sku {
    padding: 2px 4px !important;
    font-size: 12px;
    line-height: 1;
    background-color: #bebebe !important;
    border-color: #bebebe !important;
    margin-left: 3px;
  }

  .btn-copy-sku i {
    font-size: 11px;
  }



  /* Mantén tu configuración actual en escritorio */
  div.dataTables_wrapper div.dataTables_filter {
    text-align: left !important;
  }

  div.dataTables_wrapper div.dataTables_length {
    text-align: right !important;
  }

  /* En móvil centra ambos elementos */
  @media (max-width: 575.98px) {
    div.dataTables_wrapper div.dataTables_filter {
      text-align: center !important;
    }

    div.dataTables_wrapper div.dataTables_length {
      text-align: center !important;
    }

    /* Opcional: añade espacio entre ellos si quedan muy juntos */
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_length {
      margin-bottom: 10px;
    }
  }

  /* Contenedor del buscador */
  div.dataTables_wrapper div.dataTables_filter {
    position: relative;
  }

  div.dataTables_wrapper div.dataTables_filter label {
    width: 250px;
    /* Ancho fijo en escritorio */
    position: relative;
    display: block;
    margin-bottom: 0;
    font-weight: 600 !important;
    color: #212529 !important;
  }

  /* Estilos del input con espacio para el icono */
  div.dataTables_wrapper div.dataTables_filter input {
    border: 2px solid #ced4da !important;
    border-radius: 5px !important;
    padding: 12px 20px 12px 45px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    background: #f8f9fa !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    display: block;
  }

  div.dataTables_wrapper div.dataTables_filter input:focus {
    background: #fff !important;
    border-color: #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15) !important;
    outline: none !important;
  }

  /* Icono de Font Awesome DENTRO del input */
  div.dataTables_wrapper div.dataTables_filter label::after {
    font-family: "Font Awesome 5 Free";
    content: "\f002";
    font-weight: 900;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 16px;
    pointer-events: none;
    z-index: 5;
  }

  /* Cambiar color del icono cuando el input tiene foco */
  div.dataTables_wrapper div.dataTables_filter label:has(input:focus)::after {
    color: #007bff;
  }

  /* Responsive - ocupa todo el ancho solo en móvil */
  @media (max-width: 575.98px) {
    div.dataTables_wrapper div.dataTables_filter {
      text-align: center !important;
    }

    div.dataTables_wrapper div.dataTables_filter label {
      width: 100% !important;
      /* Ancho completo en móvil */
    }
  }

  .accordion .btn-link {
    color: #343a40 !important;
    /* gris oscuro bootstrap */
    text-decoration: none;
    font-weight: bold;
  }

  .accordion .btn-link:hover,
  .accordion .btn-link:focus {
    color: #212529 !important;
    text-decoration: none;
  }

  .card-post .card-img-top {
    aspect-ratio: 4 / 2;
    object-fit: cover;
  }

  /* Estilos personalizados de Servicios */
  /* Estilos personalizados para la gestión de servicios */

  /* Tarjetas de servicios */
  .service-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
  }

  .service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  /* Imagen del servicio */
  .service-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 15px;
  }

  /* Título del servicio */
  .service-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    min-height: 50px;
  }

  /* Acciones de la tarjeta */
  .service-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
  }

  .btn-action {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    color: white;
    text-align: center;
    font-size: 14px;
  }

  .btn-view {
    background-color: #ff9800;
  }

  .btn-view:hover {
    background-color: #f57c00;
    transform: scale(1.05);
  }

  .btn-edit {
    background-color: #4caf50;
  }

  .btn-edit:hover {
    background-color: #388e3c;
    transform: scale(1.05);
  }

  .btn-delete {
    background-color: #f44336;
  }

  .btn-delete:hover {
    background-color: #d32f2f;
    transform: scale(1.05);
  }

  /* Badge de estado */
  .status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
  }

  .status-visible {
    background-color: #4caf50;
    color: white;
  }

  .status-hidden {
    background-color: #9e9e9e;
    color: white;
  }

  /* Botón nuevo servicio */
  .nuevo-servicio-btn {
    background-color: #00bcd4;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s;
  }

  .nuevo-servicio-btn:hover {
    background-color: #0097a7;
  }

  /* Dropzone */
  .dropzone {
    border: 2px dashed #0087F7;
    border-radius: 5px;
    background: white;
    min-height: 250px;
    padding: 20px;
    cursor: pointer;
    transition: border-color 0.3s;
  }

  .dropzone:hover {
    border-color: #0066cc;
  }

  .dropzone .dz-message {
    text-align: center;
    margin: 2em 0;
  }

  .dropzone .dz-preview {
    margin: 10px;
  }

  .dropzone .dz-image {
    border-radius: 4px;
  }

  /* Modal */
/*   .modal-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
  }

  .modal-title {
    color: #333;
    font-weight: 600;
  } */

  /* Formulario */
  .form-group label {
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
  }

  .form-control {
    border-radius: 4px;
    border: 1px solid #ced4da;
  }

  .form-control:focus {
    border-color: #0087F7;
    box-shadow: 0 0 0 0.2rem rgba(0, 135, 247, 0.25);
  }

  /* Summernote */
  .note-editor {
    border: 1px solid #ced4da;
    border-radius: 4px;
  }

  .note-editor.note-frame {
    border: 1px solid #ced4da;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .service-actions {
      flex-direction: column;
    }

    .btn-action {
      width: 100%;
    }

    .nuevo-servicio-btn {
      width: 100%;
      justify-content: center;
    }
  }

  /* Animaciones */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .service-card {
    animation: fadeIn 0.5s ease-out;
  }

  /* Loading spinner */
  .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
  }

  /* Gestion de colores */
  /* CONTENEDOR */
  .color-tabs .btn {
    border-radius: 25px;
    padding: 6px 16px;
    font-weight: 600;
    transition: all .25s ease;
    border: 1px solid #dcdcdc;
    background: #f8f9fa;
    color: #495057;
  }

  /* HOVER */
  .color-tabs .btn:hover {
    background: #e9ecef;
    color: #212529;
  }

  /* ACTIVO GENERAL */
  .color-tabs .btn.active {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
  }

  /* GESTION (verde) */
  #btnGestion.active {
    background: linear-gradient(45deg, #28a745, #20c997);
  }

  /* ORDENAR (azul) */
  #btnOrden.active {
    background: linear-gradient(45deg, #007bff, #6610f2);
  }

  /* End: Gestion de colores */

  /* Custom preload top datatables */
  .dataTables_wrapper {
    position: relative !important;
  }

  .dataTables_processing {
    position: absolute !important;
    top: 180px !important;

    margin-top: 0 !important;
    z-index: 9999 !important;
  }
  /* End: Custom preload top datatables */

  .fila-legacy td {
    opacity: 0.5;
    font-style: italic;
    background-color: #f8f9fa !important;
}


/* ocultar flechas de ordenamiento */
.datatable_detail.dataTable thead .sorting:before,
.datatable_detail.dataTable thead .sorting:after,
.datatable_detail.dataTable thead .sorting_asc:before,
.datatable_detail.dataTable thead .sorting_asc:after,
.datatable_detail.dataTable thead .sorting_desc:before,
.datatable_detail.dataTable thead .sorting_desc:after {
    display: none !important;
}

.datatable_detail.dataTable thead th {
    padding-right: 0 !important;
}

/* menu nav config */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.8rem !important;
        padding-left: 1rem;
    }
}