/* ==========================================================================
   TEMA ESSENTIAL — capa de rediseño sobre SB Admin Pro
   --------------------------------------------------------------------------
   No sustituye styles.css: se monta encima. Para quitarlo basta con borrar
   la linea que lo importa al final de styles.css y todo vuelve a como estaba.

   La idea de fondo, tomada de la referencia: el color se usa para SEÑALAR,
   no para decorar. Fondo neutro, un solo azul de acento, bordes finos y
   numeros grandes. Lo que antes gritaba en azul, amarillo y verde ahora se
   lee de un vistazo.
   ========================================================================== */

:root {
    /* Superficies y texto */
    --e-fondo:          #f7f7f7;
    --e-superficie:     #ffffff;
    --e-heading:        #1a1a1a;
    --e-body:           #4d4d4d;
    --e-suave:          #7a7a7a;

    /* Bordes */
    --e-borde:          #e9e9e9;
    --e-borde-medio:    #e0e0e0;

    /* Acento: uno solo */
    --e-azul:           #256eff;
    --e-azul-fuerte:    #1a5ce6;
    --e-azul-suave:     #eef4ff;
    --e-azul-borde:     #c4d8ff;

    /* Semanticos: solo para estado, nunca de adorno */
    --e-verde:          #15a34a;
    --e-verde-suave:    #ecfdf3;
    --e-rojo:           #be123c;
    --e-rojo-suave:     #fff1f2;
    --e-ambar:          #d97706;
    --e-ambar-suave:    #fffaeb;

    /* Neutros de control, medidos en la referencia */
    --e-borde-boton:    #d0d0d0;   /* borde del boton secundario */
    --e-gris-activo:    #e1e1e1;   /* item activo del menu: gris, no azul */
    --e-gris-hover:     #f2f2f2;

    /* Radios y sombras */
    --e-r-sm:           6px;
    --e-r-md:           8px;
    --e-r-lg:           12px;
    --e-r-xl:           16px;
    --e-r-pill:         9999px;    /* botones y etiquetas: capsula */
    --e-sombra:         0 1px 2px rgba(24,24,24,.05), 0 2px 4px rgba(24,24,24,.04);
    --e-sombra-alta:    0 2px 4px rgba(24,24,24,.05), 0 6px 12px rgba(24,24,24,.06);

    /* Alto de la barra superior. SB Admin lo tiene repartido en tres sitios
       (el alto de .topnav, el padding-top de la lateral y el top del
       contenido); si se cambia uno solo, aparece un hueco o un solape. */
    --e-topnav:         48px;

    /* Neutros que estaban a mano y ahora hacen falta como token, porque en
       modo oscuro cambian todos. Los valores son EXACTAMENTE los que habia
       escritos, asi que en modo claro no se mueve ni un pixel. */
    --e-sobre-color:    #ffffff;   /* texto sobre boton de color pleno */
    --e-hover-fila:     #fafafa;   /* fila de tabla al pasar por encima */
    --e-hover-item:     #f5f5f5;   /* item de menu desplegable */
    --e-chip:           #f2f2f2;   /* etiqueta neutra */
    --e-chip-fuerte:    #ebebeb;   /* etiqueta "dark" de Bootstrap */

    /* Texto y borde de los estados en version suave (pastilla y aviso) */
    --e-azul-texto:          #1a4db8;
    --e-verde-texto:         #15803d;
    --e-verde-texto-hondo:   #14532d;
    --e-verde-borde:         #c1dbcb;
    --e-verde-borde-aviso:   #bbf7d0;
    --e-rojo-texto:          #9f1239;
    --e-rojo-texto-hondo:    #771d1d;
    --e-rojo-borde:          #e4c7c8;
    --e-rojo-borde-aviso:    #fecdd3;
    --e-ambar-texto:         #b45309;
    --e-ambar-texto-hondo:   #7c2d12;
    --e-ambar-borde:         #f0dcb4;
    --e-ambar-borde-aviso:   #fed7aa;

    /* Velos: el fondo gris del modal y de las capas de intro.js */
    --e-velo:        rgba(24, 24, 24, .45);
    --e-velo-medio:  rgba(24, 24, 24, .3);
    --e-velo-suave:  rgba(24, 24, 24, .16);

    --e-fuente: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------- base --- */

body {
    font-family: var(--e-fuente);
    font-size: 14px;
    line-height: 1.5;
    color: var(--e-body);
    background: var(--e-fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--e-fuente);
    color: var(--e-heading);
    letter-spacing: -.2px;
    font-weight: 600;
}

a { color: var(--e-azul); text-decoration: none; }
a:hover { color: var(--e-azul-fuerte); text-decoration: underline; }

/* ------------------------------------------------------- barra superior --- */
/* Medidas tomadas de la referencia: 56 px de alto, blanca, una linea de 1 px
   abajo y nada mas. Sin sombra: la separacion la hace el borde. */

.topnav.navbar,
nav.topnav {
    background: var(--e-superficie) !important;
    border-bottom: 1px solid var(--e-borde-medio);
    box-shadow: none !important;
    height: var(--e-topnav);
    min-height: var(--e-topnav);
    padding: 0 .5rem;
}

/* Los otros dos sitios donde SB Admin repite el mismo alto. Sin esto la
   lateral y el contenido siguen empezando en 58 px y queda un hueco. */
.nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav {
    padding-top: var(--e-topnav);
}
.nav-fixed #layoutSidenav #layoutSidenav_content {
    top: var(--e-topnav);
}

/* El logo no debe empujar el alto de la barra */
.topnav .navbar-brand,
.topnav img.navbar-brand {
    padding: 0 .625rem;
    max-height: 24px;
    width: auto;
    object-fit: contain;
}

/* Los botones de icono (hamburguesa, usuario) NO son capsulas alargadas:
   son cuadrados de 34 px con esquina de 8 px. Sin esto, la regla general de
   boton-capsula los deforma en ovalos. */
.topnav .btn-icon,
.topnav .btn-transparent-dark {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0 !important;
    border-radius: var(--e-r-md) !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--e-suave) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease, color .12s ease;
}
.topnav .btn-icon:hover,
.topnav .btn-transparent-dark:hover {
    background: var(--e-gris-hover) !important;
    color: var(--e-heading) !important;
}
/* El icono de usuario venia en fa-2x y desbordaba el cuadrado */
.topnav .dropdown-user .btn-icon .fa-2x { font-size: 1.25rem; }

/* El nombre del usuario va suelto dentro del <ul>, sin envoltorio propio */
.topnav .navbar-nav {
    font-size: 13.5px;
    color: var(--e-body);
    gap: .25rem;
    align-items: center;
}
.topnav .navbar-nav > .nav-item > .nav-link {
    color: var(--e-body);
    font-size: 13.5px;
    font-weight: 500;
    padding: .375rem .625rem;
    border-radius: var(--e-r-md);
}
.topnav .navbar-nav > .nav-item > .nav-link:hover {
    background: var(--e-gris-hover);
    color: var(--e-heading);
    text-decoration: none;
}
.topnav .dropdown-arrow { font-size: 10px; opacity: .6; margin-left: .25rem; }

/* ------------------------------------------------------- barra lateral --- */

.sidenav.sidenav-light,
#layoutSidenav_nav .sidenav {
    background: var(--e-superficie) !important;
    border-right: 1px solid var(--e-borde-medio);
    box-shadow: none !important;
}
.sidenav.sidenav-light .sidenav-menu .nav {
    padding: .5rem .625rem;
}
.sidenav.sidenav-light .sidenav-menu .nav .nav-link {
    color: var(--e-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    border-radius: var(--e-r-md);
    padding: .5rem .375rem;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background .12s ease, color .12s ease;
}
.sidenav.sidenav-light .sidenav-menu .nav .nav-link:hover {
    background: var(--e-gris-hover);
    color: var(--e-heading);
    text-decoration: none;
}
.sidenav.sidenav-light .sidenav-menu .nav .nav-link.active {
    background: var(--e-gris-activo);
    color: var(--e-heading);
    font-weight: 500;
}

/* El hueco del icono mide 16 px y el espacio 12 px, como en la referencia */
.sidenav.sidenav-light .sidenav-menu .nav .nav-link .nav-link-icon {
    color: var(--e-suave);
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* `min-width` y `flex-shrink: 0` no son adorno: el hueco del icono es un
   contenedor flex de 16 px, y sin esto los SVG de feather (que traen
   width="24" en el atributo) se encogian a 8 px y quedaban borrosos.
   Los de Font Awesome no se encogian porque su propio CSS los dimensiona,
   y por eso unos iconos se veian y otros casi no. */
.sidenav.sidenav-light .sidenav-menu .nav .nav-link .nav-link-icon svg,
.sidenav.sidenav-light .sidenav-menu .nav .nav-link .nav-link-icon i {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex-shrink: 0;
    font-size: 14px;
}

/* Feather dibuja con trazo; al bajar de 24 a 16 px el trazo adelgaza a 1,3 px
   y se veia mas flojo que el relleno solido de Font Awesome. Se compensa. */
.sidenav.sidenav-light .sidenav-menu .nav .nav-link .nav-link-icon svg.feather {
    stroke-width: 2.25;
}
.sidenav.sidenav-light .sidenav-menu .nav .nav-link.active .nav-link-icon { color: var(--e-heading); }

/* Buena parte del menu no lleva icono ("Inicio", "Salida", "Devolucion"...).
   Sin esto su texto arranca 28 px a la izquierda del resto y la columna se ve
   rota. Se reserva el hueco vacio para que todo caiga en la misma linea. */
.sidenav.sidenav-light .sidenav-menu .nav .nav-link:not(:has(.nav-link-icon))::before {
    content: "";
    width: 16px;
    min-width: 16px;
    flex-shrink: 0;
}

/* La flecha de los desplegables: a la derecha, discreta */
.sidenav.sidenav-light .sidenav-menu .nav .nav-link .sidenav-collapse-arrow {
    color: var(--e-suave);
    margin-left: auto;
    font-size: 10px;
    transition: transform .15s ease;
}
.sidenav.sidenav-light .sidenav-menu .nav .nav-link:not(.collapsed) .sidenav-collapse-arrow {
    transform: rotate(180deg);
}

/* Submenus. Ojo: este ERP no usa .nav-sm, mete los hijos en un
   <div class="collapse">. Se alinean bajo el TEXTO del padre, no bajo su
   icono, y una linea vertical fina muestra a que grupo pertenecen. */
.sidenav.sidenav-light .sidenav-menu .nav .collapse,
.sidenav.sidenav-light .sidenav-menu .nav .collapsing,
.sidenav.sidenav-light .sidenav-menu .nav .nav-sm {
    margin-left: 28px;
    border-left: 1px solid var(--e-borde);
    padding-left: .375rem;
}
.sidenav.sidenav-light .sidenav-menu .nav .collapse .nav-link,
.sidenav.sidenav-light .sidenav-menu .nav .collapsing .nav-link,
.sidenav.sidenav-light .sidenav-menu .nav .nav-sm .nav-link {
    font-size: 13px;
    color: var(--e-suave);
    padding: .375rem .5rem;
}
.sidenav.sidenav-light .sidenav-menu .nav .collapse .nav-link:hover,
.sidenav.sidenav-light .sidenav-menu .nav .nav-sm .nav-link:hover {
    color: var(--e-heading);
}
/* Dentro del submenu ya no hace falta reservar hueco de icono */
.sidenav.sidenav-light .sidenav-menu .nav .collapse .nav-link::before,
.sidenav.sidenav-light .sidenav-menu .nav .nav-sm .nav-link::before { content: none; }
.sidenav.sidenav-light .sidenav-menu .nav .collapse .nav-link.active {
    color: var(--e-heading);
}

/* La etiqueta de aviso ("Agregar", el contador de solicitudes) va al final */
.sidenav.sidenav-light .sidenav-menu .nav .nav-link > .badge { margin-left: auto; }

/* Los rotulos de seccion: 12 px, peso normal, gris. En la referencia son
   discretos; en negrita y muy espaciados competian con los propios enlaces. */
.sidenav.sidenav-light .sidenav-menu-heading {
    color: var(--e-suave);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1px;
    text-transform: uppercase;
    padding: 1.125rem .875rem .375rem;
}

.sidenav .sidenav-footer {
    background: var(--e-superficie);
    border-top: 1px solid var(--e-borde);
    padding: .75rem 1rem;
}
.sidenav .sidenav-footer .sidenav-footer-subtitle { color: var(--e-suave); font-size: 11px; }
.sidenav .sidenav-footer .sidenav-footer-title { color: var(--e-heading); font-size: 13px; font-weight: 600; }

/* ------------------------------------------------ cabecera de la pagina --- */
/* Fuera el degradado azul-morado: ocupaba media pantalla sin decir nada. */

.page-header.page-header-dark,
.page-header.bg-gradient-primary-to-secondary {
    background: var(--e-superficie) !important;
    border-bottom: 1px solid var(--e-borde);
    padding-bottom: 1.5rem !important;
}
.page-header.page-header-dark .page-header-title,
.page-header.page-header-dark h1 {
    color: var(--e-heading) !important;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.4px;
}
.page-header.page-header-dark .page-header-subtitle {
    color: var(--e-suave) !important;
    font-size: 13.5px;
}
.page-header .page-header-icon {
    color: var(--e-azul) !important;
    margin-right: .625rem;
}
.page-header .page-header-icon svg { width: 22px; height: 22px; }

/* El contenido subia 10 unidades para montarse sobre el degradado.
   Sin degradado, ese tiron negativo deja un hueco raro. */
.container-xl.mt-n10,
.container-fluid.mt-n10,
.mt-n10 { margin-top: 1.5rem !important; }

/* ---------------------------------------------------------- tarjetas --- */

.card {
    background: var(--e-superficie);
    border: 1px solid var(--e-borde);
    border-radius: var(--e-r-lg);
    box-shadow: var(--e-sombra);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--e-borde);
    color: var(--e-heading);
    font-weight: 600;
    font-size: 14px;
    padding: .875rem 1.125rem;
}
.card-body { padding: 1.125rem; }
.card-footer {
    background: transparent;
    border-top: 1px solid var(--e-borde);
    padding: .625rem 1.125rem;
}

/* Tarjetas de cifra: eran bloques de color solido con el numero encima.
   Ahora son blancas y el color queda solo en el icono, que es lo que
   distingue una de otra de un vistazo. */
.card.bg-primary, .card.bg-warning, .card.bg-success,
.card.bg-danger, .card.bg-info, .card.bg-secondary {
    background: var(--e-superficie) !important;
    border: 1px solid var(--e-borde);
}
.card.bg-primary.text-white, .card.bg-warning.text-white, .card.bg-success.text-white,
.card.bg-danger.text-white, .card.bg-info.text-white, .card.bg-secondary.text-white {
    color: var(--e-body) !important;
}
/* El rotulo pequeno de arriba */
.card .text-white-75 {
    color: var(--e-suave) !important;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}
/* El numero */
.card .text-lg.fw-bold {
    color: var(--e-heading) !important;
    font-size: 30px !important;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.8px;
    margin-top: .25rem;
}
/* El icono, en un cuadrado de color suave */
.card .feather-xl {
    width: 38px !important;
    height: 38px !important;
    padding: 8px;
    border-radius: var(--e-r-md);
    stroke-width: 2;
}
.card.bg-primary .feather-xl { color: var(--e-azul) !important;  background: var(--e-azul-suave); }
.card.bg-warning .feather-xl { color: var(--e-ambar) !important; background: var(--e-ambar-suave); }
.card.bg-success .feather-xl { color: var(--e-verde) !important; background: var(--e-verde-suave); }
.card.bg-danger  .feather-xl { color: var(--e-rojo) !important;  background: var(--e-rojo-suave); }

/* El pie "ver mas" */
.card .card-footer a,
.card .card-footer .small.text-white,
.card .card-footer .text-white { color: var(--e-azul) !important; }
.card .card-footer a { font-size: 12.5px; font-weight: 500; text-decoration: none; }
.card .card-footer a:hover { text-decoration: underline; }
.card .card-footer .text-white-50 { color: var(--e-azul) !important; opacity: .8; }

/* ----------------------------------------------------------- botones --- */

.btn {
    border-radius: var(--e-r-pill);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    padding: .5rem 1rem;
    border-width: 1px;
    box-shadow: none;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-sm { font-size: 13px; padding: .3rem .75rem; }

/* Un boton con w-100 ocupa el ancho de su columna, y hay paginas que lo
   meten en una col-md-1 de 85 px. Ahi los 16 px de padding a cada lado
   recortan la palabra ("Exporta" en vez de "Exportar"). Como el ancho ya lo
   fija el contenedor, el padding lateral sobra: se reduce. */
.btn.w-100, .btn.btn-block, .d-grid > .btn {
    padding-left: .5rem;
    padding-right: .5rem;
}
.btn-lg { font-size: 15px; padding: .625rem 1.25rem; }
.btn-primary {
    background: var(--e-azul);
    border-color: var(--e-azul);
    color: var(--e-sobre-color);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--e-azul-fuerte);
    border-color: var(--e-azul-fuerte);
}
/* El secundario es EL boton por defecto: blanco, borde fino, texto gris.
   Todo lo que no sea la accion principal deberia verse asi. */
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary,
.btn-outline-dark, .btn-outline-light, .btn-default {
    background: var(--e-superficie);
    border-color: var(--e-borde-boton);
    color: var(--e-body);
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover,
.btn-outline-primary:hover, .btn-outline-dark:hover, .btn-outline-light:hover {
    background: var(--e-gris-hover);
    border-color: var(--e-borde-boton);
    color: var(--e-heading);
}
.btn-success { background: var(--e-verde); border-color: var(--e-verde); }
.btn-danger  { background: var(--e-rojo);  border-color: var(--e-rojo); }
.btn-warning { background: var(--e-ambar); border-color: var(--e-ambar); color: var(--e-sobre-color); }
/* Estado seleccionado dentro de un grupo de botones (las pestanas "Abajo /
   Lado" del editor de precios, por ejemplo). Bootstrap le mete su relleno
   por defecto; aqui usa la misma pildora gris que el item activo del menu. */
.btn-outline-secondary.active,
.btn-outline-primary.active,
.btn-outline-dark.active,
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-primary {
    background: var(--e-gris-activo);
    border-color: var(--e-borde-boton);
    color: var(--e-heading);
}

.btn:focus, .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--e-azul-borde);
}

/* --------------------------------------------------------- formularios --- */

.form-control, .form-select, .form-label + input, textarea.form-control {
    border: 1px solid var(--e-borde-medio);
    border-radius: var(--e-r-md);
    font-size: 13.5px;
    padding: .5rem .75rem;
    color: var(--e-heading);
    /* `background-color` y NO la forma corta `background`. La forma corta
       reinicia tambien repeticion, posicion y tamano, y con eso se pierde la
       colocacion de la flechita que Bootstrap dibuja como imagen de fondo en
       los <select>. En claro los dejaba sin flecha; en oscuro salia repetida
       por todo el ancho, tapando el texto. */
    background-color: var(--e-superficie);
    box-shadow: none;
}
.form-control:focus, .form-select:focus {
    border-color: var(--e-azul);
    box-shadow: 0 0 0 3px var(--e-azul-borde);
}
.form-label, label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--e-suave);
    margin-bottom: .25rem;
}

/* ------------------------------------------------------------- tablas --- */
/* Son el corazon del ERP: aqui es donde mas se nota el aire. */

.table {
    color: var(--e-body);
    font-size: 13px;
    border-color: var(--e-borde);
}
.table > thead > tr > th,
.table thead th {
    background: transparent;
    border-bottom: 1px solid var(--e-borde-medio) !important;
    color: var(--e-suave);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: .625rem .75rem;
    white-space: nowrap;
}
.table > tbody > tr > td,
.table tbody td {
    border-top: 0;
    border-bottom: 1px solid var(--e-borde);
    padding: .625rem .75rem;
    vertical-align: middle;
}
.table > tbody > tr:hover > td { background: var(--e-hover-fila); }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--e-borde) !important; }

/* Acciones dentro de una tabla. Un "Editar" naranja y un "Eliminar" rojo
   por fila, repetidos veinte veces, convierten la lista en un semaforo. Se
   quedan en pastilla suave, y solo al pasar por encima toman el color pleno:
   el color aparece cuando vas a usarlo, no todo el rato. */

.table .btn-warning,
.table .btn-danger,
.table .btn-success,
.table .btn-info,
.table .btn-primary {
    font-size: 12.5px;
    padding: .25rem .625rem;
    border-width: 1px;
    border-style: solid;
}

.table .btn-warning {
    background: var(--e-ambar-suave);
    border-color: var(--e-ambar-borde);
    color: var(--e-ambar-texto);
}
.table .btn-warning:hover {
    background: var(--e-ambar);
    border-color: var(--e-ambar);
    color: var(--e-sobre-color);
}

.table .btn-danger {
    background: var(--e-rojo-suave);
    border-color: var(--e-rojo-borde);
    color: var(--e-rojo-texto);
}
.table .btn-danger:hover {
    background: var(--e-rojo);
    border-color: var(--e-rojo);
    color: var(--e-sobre-color);
}

.table .btn-success {
    background: var(--e-verde-suave);
    border-color: var(--e-verde-borde);
    color: var(--e-verde-texto);
}
.table .btn-success:hover {
    background: var(--e-verde);
    border-color: var(--e-verde);
    color: var(--e-sobre-color);
}

.table .btn-info,
.table .btn-primary {
    background: var(--e-azul-suave);
    border-color: var(--e-azul-borde);
    color: var(--e-azul-fuerte);
}
.table .btn-info:hover,
.table .btn-primary:hover {
    background: var(--e-azul);
    border-color: var(--e-azul);
    color: var(--e-sobre-color);
}

/* --------------------------------------------------------- etiquetas --- */

.badge {
    border-radius: var(--e-r-pill);
    font-weight: 500;
    font-size: 12px;
    padding: .125rem .375rem;
    border: 1px solid transparent;
    letter-spacing: 0;
}
.badge.bg-primary   { background: var(--e-azul-suave) !important;  color: var(--e-azul-fuerte) !important; border-color: var(--e-azul-borde); }
.badge.bg-success   { background: var(--e-verde-suave) !important; color: var(--e-verde-texto-hondo) !important; border-color: var(--e-verde-borde); }
.badge.bg-danger    { background: var(--e-rojo-suave) !important;  color: var(--e-rojo-texto-hondo) !important; border-color: var(--e-rojo-borde); }
.badge.bg-warning   { background: var(--e-ambar-suave) !important; color: var(--e-ambar-texto-hondo) !important; border-color: var(--e-ambar-borde); }
.badge.bg-secondary { background: var(--e-chip) !important;              color: var(--e-body) !important;  border-color: var(--e-borde-medio); }
.badge.bg-info      { background: var(--e-azul-suave) !important;  color: var(--e-azul-fuerte) !important; border-color: var(--e-azul-borde); }
.badge.bg-light     { background: var(--e-chip) !important;              color: var(--e-body) !important;  border-color: var(--e-borde-medio); }
.badge.bg-dark      { background: var(--e-chip-fuerte) !important;              color: var(--e-heading) !important; border-color: var(--e-borde-medio); }

/* ------------------------------------------------------------ avisos --- */

.alert { border-radius: var(--e-r-md); border-width: 1px; font-size: 13.5px; }
.alert-primary { background: var(--e-azul-suave);  border-color: var(--e-azul-borde); color: var(--e-azul-texto); }
.alert-success { background: var(--e-verde-suave); border-color: var(--e-verde-borde-aviso); color: var(--e-verde-texto-hondo); }
.alert-danger  { background: var(--e-rojo-suave);  border-color: var(--e-rojo-borde-aviso); color: var(--e-rojo-texto-hondo); }
.alert-warning { background: var(--e-ambar-suave); border-color: var(--e-ambar-borde-aviso); color: var(--e-ambar-texto-hondo); }

/* -------------------------------------------------------- desplegables --- */

.dropdown-menu {
    border: 1px solid var(--e-borde);
    border-radius: var(--e-r-lg);
    box-shadow: var(--e-sombra-alta);
    padding: .375rem;
    font-size: 13.5px;
}
.dropdown-item { border-radius: var(--e-r-sm); padding: .4rem .625rem; color: var(--e-body); }
.dropdown-item:hover { background: var(--e-hover-item); color: var(--e-heading); }

/* ------------------------------------------------------------- varios --- */

.modal-content { border: 1px solid var(--e-borde); border-radius: var(--e-r-xl); box-shadow: var(--e-sombra-alta); }
.modal-header, .modal-footer { border-color: var(--e-borde); }
.nav-tabs { border-bottom: 1px solid var(--e-borde); }
.nav-tabs .nav-link { border: 0; color: var(--e-suave); font-weight: 500; font-size: 13.5px; }
.nav-tabs .nav-link.active { color: var(--e-azul); border-bottom: 2px solid var(--e-azul); background: transparent; }
.pagination .page-link { border-color: var(--e-borde); color: var(--e-body); border-radius: var(--e-r-sm); margin: 0 2px; }
.pagination .page-item.active .page-link { background: var(--e-azul); border-color: var(--e-azul); }
hr { border-color: var(--e-borde); opacity: 1; }
footer, .footer { color: var(--e-suave); font-size: 12px; }

/* ==========================================================================
   LA FRANJA ALTA BAJO LA BARRA  (2026-09-11)
   ==========================================================================
   SB Admin abre casi todas las pantallas con una `<header class="page-header
   ... pb-10">` que gasta ~180 px para una sola linea de texto, y luego sube el
   contenido con un `mt-n10` para taparla. En la practica queda un bloque en
   blanco enorme bajo la barra superior.

   Se arregla AQUI y no en los 67 archivos que la tienen: es una regla, se
   revierte borrandola, y cubre tambien las pantallas que no hemos visto.

   El ancla es `.pb-10`: la llevan 67 de las 68 cabeceras del proyecto. La
   unica que no es `visualizarpauto.php` (usa `p-0 m-0`), y esa NO hay que
   tocarla porque su cabecera ES la barra de botones de ventas.

   `:has()` necesita Chrome/Brave 105 o mas nuevo. En un navegador viejo estas
   reglas sencillamente no aplican y todo se ve como antes: no rompe nada.
   -------------------------------------------------------------------------- */

/* --- 1) Cabecera que solo lleva el titulo: no aporta nada, fuera --- */
body header.page-header.pb-10:not(:has(button, a, input, select, textarea)) {
    display: none !important;
}

/* Al esconderla hay que anular el `mt-n10` del contenedor de abajo, que
   existia solo para subir la tarjeta por encima de la franja. Si se deja, el
   contenido se mete debajo de la barra superior.
   El `+` salta comentarios y espacios, asi que casa aunque entre la cabecera y
   el contenedor haya un `<!-- Main page -->`. */
body header.page-header.pb-10:not(:has(button, a, input, select, textarea)) + [class*="mt-n10"] {
    margin-top: 1rem !important;
}

/* --- 2) Cabecera CON botones: se queda, pero apretada --- */
/* Aqui no se puede esconder: los botones son la unica forma de llegar a esas
   acciones. Lo que sobra es el aire, no el contenido. */
body header.page-header.pb-10:has(button, a, input, select, textarea) {
    padding-bottom: .6rem !important;
}

body header.page-header.pb-10:has(button, a, input, select, textarea) .page-header-content {
    padding-top: .6rem !important;
}

body header.page-header.pb-10:has(button, a, input, select, textarea) .page-header-content .mt-4 {
    margin-top: .25rem !important;
}

body header.page-header.pb-10:has(button, a, input, select, textarea) + [class*="mt-n10"] {
    margin-top: 1rem !important;
}


/* ==========================================================================
   MODO OSCURO  (2026-09-11)
   --------------------------------------------------------------------------
   Aqui NO se repinta la web: solo se cambian los valores de los mismos
   tokens que ya usa todo el tema. Por eso cabe en una pantalla y por eso se
   puede volver atras borrando este bloque.

   Se activa con `data-tema="oscuro"` en la etiqueta raiz, que pone `js/tema.js`
   leyendo la cookie `tema`. La cookie la escribe el servidor desde la columna
   `users.tema`, asi que la preferencia viaja con la persona, no con el equipo.

   TODO va dentro de `@media screen`: lo que se imprime se queda claro SIEMPRE.
   Un vale, un pedido o una guia en negro gastaria el toner y se leeria peor.
   ========================================================================== */

@media screen {

:root[data-tema="oscuro"] {
    /* Superficies. Negro puro no: cansa la vista y las sombras no se ven.
       Se usa el mismo escalon de siempre (fondo un poco mas oscuro que la
       tarjeta) para que las tarjetas sigan leyendose como tarjetas. */
    --e-fondo:          #131313;
    --e-superficie:     #1c1c1c;
    --e-heading:        #f0f0f0;
    --e-body:           #c6c6c6;
    --e-suave:          #8f8f8f;

    --e-borde:          #2e2e2e;
    --e-borde-medio:    #383838;
    --e-borde-boton:    #454545;
    --e-gris-activo:    #303030;
    --e-gris-hover:     #262626;

    --e-hover-fila:     #222222;
    --e-hover-item:     #2a2a2a;
    --e-chip:           #2a2a2a;
    --e-chip-fuerte:    #343434;

    /* El azul del tema claro (#256eff) sobre negro queda apagado. Se sube el
       brillo para mantener el contraste, no para cambiar de color. */
    --e-azul:           #4a86ff;
    --e-azul-fuerte:    #6e9fff;
    --e-azul-suave:     #16233d;
    --e-azul-borde:     #2b4272;
    --e-azul-texto:     #a3c0ff;

    --e-verde:               #22a95a;
    --e-verde-suave:         #12281b;
    --e-verde-borde:         #2a5138;
    --e-verde-borde-aviso:   #2a5138;
    --e-verde-texto:         #6fe7a2;
    --e-verde-texto-hondo:   #92f0bb;

    --e-rojo:                #e0435f;
    --e-rojo-suave:          #2c1419;
    --e-rojo-borde:          #5a2630;
    --e-rojo-borde-aviso:    #5a2630;
    --e-rojo-texto:          #ff9dad;
    --e-rojo-texto-hondo:    #ffbcc6;

    --e-ambar:               #d98a12;
    --e-ambar-suave:         #2a1f0c;
    --e-ambar-borde:         #5a441c;
    --e-ambar-borde-aviso:   #5a441c;
    --e-ambar-texto:         #f5c265;
    --e-ambar-texto-hondo:   #ffd79a;

    /* El texto sobre un boton de color pleno sigue siendo blanco: el boton
       no cambia de color, solo el fondo de la pagina. */
    --e-sobre-color:    #ffffff;

    /* Sobre fondo oscuro una sombra gris no se ve. Se oscurece y se sube la
       opacidad, que es lo unico que sigue separando una capa de otra. */
    --e-sombra:         0 1px 2px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
    --e-sombra-alta:    0 2px 4px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.55);

    --e-velo:           rgba(0,0,0,.66);
    --e-velo-medio:     rgba(0,0,0,.5);
    --e-velo-suave:     rgba(0,0,0,.3);

    color-scheme: dark;
}

}


/* ==========================================================================
   MODO OSCURO (2) — lo que el tema no controlaba
   --------------------------------------------------------------------------
   El bloque de arriba cambia los tokens y con eso se va casi toda la web.
   Lo que queda son colores que NO pasan por el tema:

     a) Las utilidades de Bootstrap escritas en el HTML (`bg-white`,
        `bg-light`, `text-dark`, `table-light`...). Llevan `!important` de
        fabrica, asi que la unica forma de doblarlas es con otro `!important`.
        Son ~420 apariciones repartidas por el proyecto: se arreglan aqui de
        una vez en lugar de editar cada pagina.

     b) Los grises propios de SB Admin y los adornos que dibuja el navegador
        (flecha del desplegable, equis de cerrar, icono de fecha, barra de
        desplazamiento). Ninguno de esos pasa por el tema.

   Sigue todo dentro de `@media screen`: en papel no se aplica nada de esto.
   ========================================================================== */

@media screen {

/* --- El interruptor: dos iconos, se ve el que toca --------------------- */
#botonTema .icono-tema-oscuro,
:root[data-tema="oscuro"] #botonTema .icono-tema-claro { display: none; }
:root[data-tema="oscuro"] #botonTema .icono-tema-oscuro { display: inline-block; }

/* --- a) utilidades claras de Bootstrap -------------------------------- */
/* `bg-white` y `bg-light` dejan de ser blanco y pasan a ser "la superficie" y
   "el fondo" del tema. Asi una caja marcada a mano en el HTML se comporta
   igual que una tarjeta normal, sin tocar el HTML. */

:root[data-tema="oscuro"] .bg-white,
:root[data-tema="oscuro"] .bg-body,
:root[data-tema="oscuro"] .bg-body-tertiary {
    background-color: var(--e-superficie) !important;
}

:root[data-tema="oscuro"] .bg-light,
:root[data-tema="oscuro"] .bg-gray-100,
:root[data-tema="oscuro"] .bg-gray-200 {
    background-color: var(--e-fondo) !important;
}

:root[data-tema="oscuro"] .text-dark,
:root[data-tema="oscuro"] .text-black,
:root[data-tema="oscuro"] .text-gray-900,
:root[data-tema="oscuro"] .text-body {
    color: var(--e-heading) !important;
}

:root[data-tema="oscuro"] .text-muted,
:root[data-tema="oscuro"] .text-gray-500,
:root[data-tema="oscuro"] .text-gray-600,
:root[data-tema="oscuro"] .text-secondary {
    color: var(--e-suave) !important;
}

:root[data-tema="oscuro"] .table-light,
:root[data-tema="oscuro"] .table-light > th,
:root[data-tema="oscuro"] .table-light > td {
    background-color: var(--e-fondo) !important;
    color: var(--e-heading) !important;
}

/* Bootstrap pinta las filas con variables propias; si no se tocan, una
   `table-striped` sigue rayando en blanco sobre el fondo oscuro. */
:root[data-tema="oscuro"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--e-body);
    --bs-table-striped-bg: var(--e-hover-fila);
    --bs-table-striped-color: var(--e-body);
    --bs-table-hover-bg: var(--e-hover-fila);
    --bs-table-hover-color: var(--e-heading);
    --bs-table-border-color: var(--e-borde);
    color: var(--e-body);
}

/* --- b) lo que quedaba suelto ----------------------------------------- */

:root[data-tema="oscuro"] .card,
:root[data-tema="oscuro"] .modal-content,
:root[data-tema="oscuro"] .dropdown-menu,
:root[data-tema="oscuro"] .list-group-item,
:root[data-tema="oscuro"] .accordion-item,
:root[data-tema="oscuro"] .accordion-button,
:root[data-tema="oscuro"] .offcanvas,
:root[data-tema="oscuro"] .popover,
:root[data-tema="oscuro"] .toast {
    background-color: var(--e-superficie) !important;
    color: var(--e-body);
    border-color: var(--e-borde);
}

:root[data-tema="oscuro"] .tooltip-inner {
    background-color: var(--e-chip-fuerte);
    color: var(--e-heading);
}

/* Campos de formulario: Bootstrap los fija en blanco en varios sitios. */
:root[data-tema="oscuro"] .form-control,
:root[data-tema="oscuro"] .form-select,
:root[data-tema="oscuro"] .input-group-text,
:root[data-tema="oscuro"] textarea,
:root[data-tema="oscuro"] input[type="text"],
:root[data-tema="oscuro"] input[type="search"],
:root[data-tema="oscuro"] input[type="number"],
:root[data-tema="oscuro"] input[type="email"],
:root[data-tema="oscuro"] input[type="password"],
:root[data-tema="oscuro"] input[type="date"],
:root[data-tema="oscuro"] input[type="tel"],
:root[data-tema="oscuro"] select {
    background-color: var(--e-superficie) !important;
    color: var(--e-heading) !important;
    border-color: var(--e-borde-medio) !important;
}

:root[data-tema="oscuro"] .form-control::placeholder,
:root[data-tema="oscuro"] textarea::placeholder { color: var(--e-suave); }

/* El relleno automatico del navegador pinta un amarillo claro que no se quita
   con `background`. La sombra interior es el unico truco que funciona. */
:root[data-tema="oscuro"] input:-webkit-autofill,
:root[data-tema="oscuro"] input:-webkit-autofill:hover,
:root[data-tema="oscuro"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--e-heading) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--e-superficie) inset !important;
    caret-color: var(--e-heading);
}

/* El menu lateral de SB Admin tiene su propia familia de grises. */
:root[data-tema="oscuro"] .sidenav-light,
:root[data-tema="oscuro"] .sidenav-dark,
:root[data-tema="oscuro"] .sidenav-menu,
:root[data-tema="oscuro"] .sidenav-footer {
    background-color: var(--e-superficie) !important;
    color: var(--e-body);
}
:root[data-tema="oscuro"] .sidenav .nav-link,
:root[data-tema="oscuro"] .sidenav-menu-heading { color: var(--e-body) !important; }
:root[data-tema="oscuro"] .sidenav .nav-link.active,
:root[data-tema="oscuro"] .sidenav .nav-link:hover {
    background-color: var(--e-gris-activo) !important;
    color: var(--e-heading) !important;
}

/* Cabeceras, pies y separadores que SB Admin deja en blanco. */
:root[data-tema="oscuro"] .card-header,
:root[data-tema="oscuro"] .card-footer,
:root[data-tema="oscuro"] .modal-header,
:root[data-tema="oscuro"] .modal-footer,
:root[data-tema="oscuro"] footer,
:root[data-tema="oscuro"] .footer-admin {
    background-color: var(--e-superficie) !important;
    border-color: var(--e-borde) !important;
    color: var(--e-body);
}

/* Bootstrap dibuja la flecha del desplegable y la equis de cerrar como
   imagenes negras: en oscuro desaparecen si no se invierten. */
:root[data-tema="oscuro"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
:root[data-tema="oscuro"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c6c6c6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}
:root[data-tema="oscuro"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-tema="oscuro"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.4);
}

/* La barra de desplazamiento clara sobre una pagina oscura canta mucho. */
:root[data-tema="oscuro"] ::-webkit-scrollbar { width: 12px; height: 12px; }
:root[data-tema="oscuro"] ::-webkit-scrollbar-track { background: var(--e-fondo); }
:root[data-tema="oscuro"] ::-webkit-scrollbar-thumb {
    background: var(--e-borde-boton);
    border: 3px solid var(--e-fondo);
    border-radius: var(--e-r-pill);
}

/* Las imagenes y los logos NO se invierten: eso estropea un logo. Lo unico
   que se baja es el brillo de las fotos, que sobre negro deslumbran. Se deja
   muy suave a proposito: el color de la pieza es justo lo que el vendedor
   esta mirando y no se puede falsear. */
:root[data-tema="oscuro"] .card img,
:root[data-tema="oscuro"] .table img { filter: brightness(.94); }

}


/* ==========================================================================
   MODO OSCURO (3) — las dos librerias de tablas
   --------------------------------------------------------------------------
   El proyecto usa DataTables en unas pantallas y simple-datatables en otras.
   Ninguna de las dos pasa por `.table` de Bootstrap: traen su propio blanco,
   sus propias rayas y su propio resaltado de la columna ordenada. Si no se
   tocan aqui, queda una banda blanca en medio de la pagina (se ve sobre todo
   en la fila de "ningun dato disponible", que es blanca aunque no haya nada).
   ========================================================================== */

@media screen {

:root[data-tema="oscuro"] .dataTables_wrapper,
:root[data-tema="oscuro"] .dataTable,
:root[data-tema="oscuro"] .dataTable tbody tr,
:root[data-tema="oscuro"] .dataTable tbody tr.odd,
:root[data-tema="oscuro"] .dataTable tbody tr.even,
:root[data-tema="oscuro"] table.dataTable tbody td,
:root[data-tema="oscuro"] table.dataTable tbody th,
:root[data-tema="oscuro"] .datatable-wrapper .datatable-table tbody tr,
:root[data-tema="oscuro"] .datatable-wrapper .datatable-table tbody td {
    background-color: transparent !important;
    color: var(--e-body);
}

/* DataTables oscurece un poco la columna por la que esta ordenando. Sus
   grises estan calculados para fondo blanco y sobre negro se ven como
   manchas; se sustituyen por el mismo gris que usa el resto del tema. */
:root[data-tema="oscuro"] table.dataTable tbody tr > .sorting_1,
:root[data-tema="oscuro"] table.dataTable tbody tr > .sorting_2,
:root[data-tema="oscuro"] table.dataTable tbody tr > .sorting_3,
:root[data-tema="oscuro"] table.dataTable tbody tr.odd > .sorting_1,
:root[data-tema="oscuro"] table.dataTable tbody tr.even > .sorting_1 {
    background-color: var(--e-hover-fila) !important;
}

:root[data-tema="oscuro"] .dataTable thead th,
:root[data-tema="oscuro"] .datatable-table thead th {
    background-color: transparent !important;
    color: var(--e-heading) !important;
    border-color: var(--e-borde) !important;
}

:root[data-tema="oscuro"] .dataTables_wrapper .dataTables_info,
:root[data-tema="oscuro"] .dataTables_wrapper .dataTables_length,
:root[data-tema="oscuro"] .dataTables_wrapper .dataTables_filter,
:root[data-tema="oscuro"] .dataTables_wrapper .dataTables_paginate,
:root[data-tema="oscuro"] .datatable-info,
:root[data-tema="oscuro"] .datatable-dropdown label {
    color: var(--e-body) !important;
}

/* Los botones de pagina: blancos de fabrica en las dos librerias. */
:root[data-tema="oscuro"] .page-link,
:root[data-tema="oscuro"] .dataTables_paginate .paginate_button,
:root[data-tema="oscuro"] .datatable-pagination a {
    background-color: var(--e-superficie) !important;
    border-color: var(--e-borde) !important;
    color: var(--e-body) !important;
}
:root[data-tema="oscuro"] .page-item.active .page-link,
:root[data-tema="oscuro"] .dataTables_paginate .paginate_button.current,
:root[data-tema="oscuro"] .datatable-pagination .datatable-active a {
    background-color: var(--e-azul) !important;
    border-color: var(--e-azul) !important;
    color: var(--e-sobre-color) !important;
}
:root[data-tema="oscuro"] .page-item.disabled .page-link {
    background-color: var(--e-fondo) !important;
    color: var(--e-suave) !important;
}

/* La casilla de verificacion tambien nace blanca. */
:root[data-tema="oscuro"] .form-check-input:not(:checked) {
    background-color: var(--e-superficie) !important;
    border-color: var(--e-borde-boton) !important;
}

}


/* ==========================================================================
   MODO OSCURO (4) — las pastillas "soft" de SB Admin
   --------------------------------------------------------------------------
   SB Admin trae 16 fondos pastel (`bg-primary-soft`, `bg-success-soft`...)
   que se usan sueltos por todo el programa para marcar estados. Estan
   calculados sobre blanco: en oscuro son manchas de color claro con texto
   azul oscuro encima, ilegibles.

   Se reducen a las cuatro familias que ya tiene el tema (azul, verde, rojo,
   ambar) y se aclara el texto que las acompana. Se pierde el matiz entre
   "indigo" y "purpura", que nunca significo nada distinto en este programa.
   ========================================================================== */

@media screen {

:root[data-tema="oscuro"] .bg-primary-soft,
:root[data-tema="oscuro"] .bg-blue-soft,
:root[data-tema="oscuro"] .bg-info-soft,
:root[data-tema="oscuro"] .bg-cyan-soft,
:root[data-tema="oscuro"] .bg-teal-soft,
:root[data-tema="oscuro"] .bg-indigo-soft,
:root[data-tema="oscuro"] .bg-purple-soft {
    background-color: var(--e-azul-suave) !important;
}
:root[data-tema="oscuro"] .bg-success-soft,
:root[data-tema="oscuro"] .bg-green-soft {
    background-color: var(--e-verde-suave) !important;
}
:root[data-tema="oscuro"] .bg-danger-soft,
:root[data-tema="oscuro"] .bg-red-soft,
:root[data-tema="oscuro"] .bg-pink-soft {
    background-color: var(--e-rojo-suave) !important;
}
:root[data-tema="oscuro"] .bg-warning-soft,
:root[data-tema="oscuro"] .bg-yellow-soft,
:root[data-tema="oscuro"] .bg-orange-soft {
    background-color: var(--e-ambar-suave) !important;
}
:root[data-tema="oscuro"] .bg-secondary-soft {
    background-color: var(--e-chip) !important;
}

/* El texto que va encima. Los de SB Admin son los colores plenos, pensados
   para leerse sobre pastel claro; aqui hacen falta las versiones claras. */
:root[data-tema="oscuro"] .text-primary,
:root[data-tema="oscuro"] .text-blue,
:root[data-tema="oscuro"] .text-info,
:root[data-tema="oscuro"] .text-indigo,
:root[data-tema="oscuro"] .text-purple { color: var(--e-azul-texto) !important; }

:root[data-tema="oscuro"] .text-success,
:root[data-tema="oscuro"] .text-green { color: var(--e-verde-texto) !important; }

:root[data-tema="oscuro"] .text-danger,
:root[data-tema="oscuro"] .text-red { color: var(--e-rojo-texto) !important; }

:root[data-tema="oscuro"] .text-warning,
:root[data-tema="oscuro"] .text-orange,
:root[data-tema="oscuro"] .text-yellow { color: var(--e-ambar-texto) !important; }

/* Un boton de color pleno sigue llevando texto blanco: ahi el fondo no ha
   cambiado, y esta regla tiene que ganarle a las de arriba. */
:root[data-tema="oscuro"] .btn.text-white,
:root[data-tema="oscuro"] .badge.text-white,
:root[data-tema="oscuro"] .bg-primary .text-white,
:root[data-tema="oscuro"] .bg-success .text-white,
:root[data-tema="oscuro"] .bg-danger .text-white,
:root[data-tema="oscuro"] .bg-warning .text-white { color: var(--e-sobre-color) !important; }

}