/*
 * Los colores de Inventas. El unico sitio donde viven.
 *
 * Va DESPUES de adminlte.min.css a proposito: casi todo lo de aqui son
 * redefiniciones, y ganan por orden de cascada, no por especificidad. Si algun
 * dia se cambia el orden de los <link>, esto deja de pintar.
 *
 * Las 22 vistas no saben de colores: usan las clases de siempre (btn-primary,
 * alert-danger, text-body-secondary) y se recolorean desde aqui. Poner un color
 * a mano en una vista rompe eso, y sobre todo rompe el modo oscuro.
 *
 * REGLA QUE NO SE SALTA: el rojo, el verde y el ambar son de los estados de la
 * DGII —rechazado, aceptado, con observaciones— y de nada mas. Un boton verde de
 * "guardar" o un panel rojo decorativo le quitan la voz al unico aviso que
 * obliga a hacer algo: una factura que la DGII no acepto.
 */

:root {
    /* La marca */
    --inv-primario:          #2563EB;
    --inv-primario-hover:    #1D4ED8;
    --inv-primario-activo:   #1E40AF;
    --inv-azul-oscuro:       #1E3A8A;

    /* Los estados */
    --inv-exito:             #16A34A;
    --inv-error:             #DC2626;
    --inv-ambar:             #F59E0B;

    /* El papel */
    --inv-fondo:             #F8FAFC;
    --inv-tarjeta:           #FFFFFF;
    --inv-texto:             #1E293B;
    --inv-texto-suave:       #64748B;
    --inv-borde:             #E2E8F0;

    --inv-sombra:            0 1px 2px rgba(15, 23, 42, .04),
                             0 2px 8px rgba(15, 23, 42, .06);
    --inv-radio:             10px;

    /*
     * Los tokens de Bootstrap que SI se leen por variable. Los botones no estan
     * aqui: en 5.3 cada .btn-* trae su color literal y hay que ir a por ellos
     * uno por uno mas abajo.
     */
    --bs-primary:            var(--inv-primario);
    --bs-primary-rgb:        37, 99, 235;
    --bs-success:            var(--inv-exito);
    --bs-success-rgb:        22, 163, 74;
    --bs-danger:             var(--inv-error);
    --bs-danger-rgb:         220, 38, 38;
    --bs-warning:            var(--inv-ambar);
    --bs-warning-rgb:        245, 158, 11;

    --bs-body-bg:            var(--inv-fondo);
    --bs-body-color:         var(--inv-texto);
    --bs-body-color-rgb:     30, 41, 59;
    --bs-emphasis-color:     var(--inv-texto);
    --bs-secondary-color:    var(--inv-texto-suave);
    --bs-border-color:       var(--inv-borde);

    /*
     * Las dos variantes, la del color y la del -rgb.
     *
     * Las utilidades bg-body-tertiary y bg-body-secondary no leen el color: leen
     * rgba(var(--bs-tertiary-bg-rgb), ...) para poder aplicarle opacidad. Poner
     * solo la primera dejaba el fondo de la aplicacion en el gris de Bootstrap
     * (#F8F9FA) en vez del nuestro, y la diferencia se ve al lado de las tarjetas.
     */
    --bs-tertiary-bg:        var(--inv-fondo);
    --bs-tertiary-bg-rgb:    248, 250, 252;
    --bs-secondary-bg:       #F1F5F9;
    --bs-secondary-bg-rgb:   241, 245, 249;

    --bs-link-color:         var(--inv-primario);
    --bs-link-color-rgb:     37, 99, 235;
    --bs-link-hover-color:   var(--inv-primario-hover);
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* ------------------------------------------------------------------ botones */
/*
 * Bootstrap 5.3 compila el color dentro de cada clase (--bs-btn-bg:#0d6efd), no
 * lo saca de --bs-primary. Cambiar solo el token global deja los botones azules
 * del tema por defecto, que fue lo primero que se probo y no funciono.
 */

.btn-primary {
    --bs-btn-bg:                  var(--inv-primario);
    --bs-btn-border-color:        var(--inv-primario);
    --bs-btn-hover-bg:            var(--inv-primario-hover);
    --bs-btn-hover-border-color:  var(--inv-primario-hover);
    --bs-btn-active-bg:           var(--inv-primario-activo);
    --bs-btn-active-border-color: var(--inv-primario-activo);
    --bs-btn-disabled-bg:         var(--inv-primario);
    --bs-btn-disabled-border-color: var(--inv-primario);
    --bs-btn-focus-shadow-rgb:    37, 99, 235;
}

/*
 * Verde mas oscuro que el de los chips, y a proposito.
 *
 * Blanco sobre #16A34A da 3.30:1, por debajo del minimo para texto normal. En un
 * chip no importa porque ahi el texto es verde oscuro sobre verde palido; en un
 * boton relleno si. #15803D da 5.02:1 y se sigue leyendo verde.
 */
.btn-success {
    --bs-btn-bg:                  #15803D;
    --bs-btn-border-color:        #15803D;
    --bs-btn-hover-bg:            #166534;
    --bs-btn-hover-border-color:  #166534;
    --bs-btn-active-bg:           #14532D;
    --bs-btn-active-border-color: #14532D;
    --bs-btn-disabled-bg:         #15803D;
    --bs-btn-disabled-border-color: #15803D;
    --bs-btn-focus-shadow-rgb:    22, 163, 74;
}

.btn-danger {
    --bs-btn-bg:                  var(--inv-error);
    --bs-btn-border-color:        var(--inv-error);
    --bs-btn-hover-bg:            #B91C1C;
    --bs-btn-hover-border-color:  #B91C1C;
    --bs-btn-active-bg:           #991B1B;
    --bs-btn-active-border-color: #991B1B;
    --bs-btn-disabled-bg:         var(--inv-error);
    --bs-btn-disabled-border-color: var(--inv-error);
    --bs-btn-focus-shadow-rgb:    220, 38, 38;
}

/*
 * Texto oscuro encima, siempre: blanco sobre este ambar da 2.15:1, ilegible.
 *
 * La tinta va literal y no con var(--inv-texto) porque ese token se vuelve casi
 * blanco en modo oscuro, y entonces esta regla hacia justo lo que su comentario
 * prohibe: 1.74:1 sobre el ambar. El boton no cambia de fondo con el tema, asi
 * que su tinta tampoco tiene que cambiar. Sobre #F59E0B da 6.81:1.
 */
.btn-warning {
    --bs-btn-color:               #1E293B;
    --bs-btn-hover-color:         #1E293B;
    --bs-btn-active-color:        #1E293B;
    --bs-btn-disabled-color:      #1E293B;
    --bs-btn-bg:                  var(--inv-ambar);
    --bs-btn-border-color:        var(--inv-ambar);
    --bs-btn-hover-bg:            #D97706;
    --bs-btn-hover-border-color:  #D97706;
    --bs-btn-active-bg:           #B45309;
    --bs-btn-active-border-color: #B45309;
    --bs-btn-disabled-bg:         var(--inv-ambar);
    --bs-btn-disabled-border-color: var(--inv-ambar);
    --bs-btn-focus-shadow-rgb:    245, 158, 11;
}

.btn-outline-primary {
    --bs-btn-color:               var(--inv-primario);
    --bs-btn-border-color:        var(--inv-primario);
    --bs-btn-hover-bg:            var(--inv-primario);
    --bs-btn-hover-border-color:  var(--inv-primario);
    --bs-btn-active-bg:           var(--inv-primario-activo);
    --bs-btn-active-border-color: var(--inv-primario-activo);
    --bs-btn-focus-shadow-rgb:    37, 99, 235;
}

.btn-outline-secondary {
    --bs-btn-color:               var(--inv-texto-suave);
    --bs-btn-border-color:        var(--inv-borde);
    --bs-btn-hover-color:         var(--inv-texto);
    --bs-btn-hover-bg:            #F1F5F9;
    --bs-btn-hover-border-color:  #CBD5E1;
    --bs-btn-active-color:        var(--inv-texto);
    --bs-btn-active-bg:           #E2E8F0;
    --bs-btn-active-border-color: #CBD5E1;
}

/*
 * Sin esta regla se quedaba con el amarillo de fabrica (#FFC107), que sobre el
 * fondo claro da 1.56:1: el rotulo no se lee. Un ambar de rotulo tiene que ser
 * mas oscuro que el ambar de relleno, asi que en claro se usa el tono tostado
 * —4.90:1— y en oscuro el palido, el mismo del aviso ambar.
 */
.btn-outline-warning {
    --bs-btn-color:               #B45309;
    --bs-btn-border-color:        #D97706;
    --bs-btn-hover-color:         #1E293B;
    --bs-btn-hover-bg:            var(--inv-ambar);
    --bs-btn-hover-border-color:  var(--inv-ambar);
    --bs-btn-active-color:        #1E293B;
    --bs-btn-active-bg:           #D97706;
    --bs-btn-active-border-color: #D97706;
    --bs-btn-focus-shadow-rgb:    245, 158, 11;
}

.btn-outline-danger {
    --bs-btn-color:               var(--inv-error);
    --bs-btn-border-color:        var(--inv-error);
    --bs-btn-hover-bg:            var(--inv-error);
    --bs-btn-hover-border-color:  var(--inv-error);
    --bs-btn-focus-shadow-rgb:    220, 38, 38;
}

.btn { font-weight: 500; }

/* ----------------------------------------------------------------- contador */
/*
 * El campo de cantidad con sus botones de menos y mas.
 *
 * Sustituye a las flechitas del navegador por dos razones. La primera es que no
 * hacian lo que parece: el paso se cuenta desde el MINIMO, y con min=0.001 la
 * flecha dejaba 1.001 donde deberia dejar 2. La segunda es el movil, donde esas
 * flechas miden unos pocos pixeles y no hay forma de acertarles con el dedo.
 *
 * Las nativas se apagan con appearance, que si no saldrian las dos cosas.
 */
.contador {
    display: flex;
    align-items: stretch;
    width: 8.5rem;
}

.contador input[type="number"] {
    border-radius: 0;
    text-align: center;

    /* Sin esto, Firefox deja el hueco de las flechas y el numero baila. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.contador input[type="number"]::-webkit-outer-spin-button,
.contador input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.contador .btn {
    /* Cuadrados y del alto del campo: el objetivo tiene que ser el boton
       entero, no el simbolo. */
    flex: 0 0 2rem;
    padding: 0;
    line-height: 1;
    font-weight: 600;
}

.contador .btn:first-child { border-radius: .375rem 0 0 .375rem; }
.contador .btn:last-child  { border-radius: 0 .375rem .375rem 0; }

/* ------------------------------------------------------------------ modales */
/*
 * El modal se pinta con el color de las tarjetas y no con el de la pagina.
 *
 * De fabrica --bs-modal-bg es --bs-body-bg, que aqui es el fondo de la pagina:
 * el modal salia exactamente del mismo color que lo que hay detras y flotaba
 * sin borde propio. Con el de la tarjeta se lee como lo que es, una ficha
 * encima de la pantalla, y sigue al tema solo porque el token ya lo hace.
 */
.modal-content {
    --bs-modal-bg:           var(--inv-tarjeta);
    --bs-modal-border-color: var(--inv-borde);
}

/*
 * El formulario envuelve la cabecera, el cuerpo y el pie, y eso rompia el modal
 * que desplaza solo su cuerpo.
 *
 * Bootstrap cuenta con que esos tres sean hijos DIRECTOS de .modal-content, que
 * es quien reparte el alto. Con el formulario en medio, el cuerpo crecia sin
 * limite y .modal-content —que recorta lo que sobra— se comia el pie: los
 * botones quedaban cortados abajo y no habia forma de llegar a ellos.
 *
 * El formulario no puede quitarse de en medio: los campos del cuerpo y el boton
 * de enviar del pie tienen que ir en el mismo. Asi que se le hace repartir el
 * alto igual que .modal-content. El min-height es lo que permite encoger: sin
 * el, un hijo con contenido largo se niega a bajar de su alto natural y volveria
 * a desbordar.
 */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body { min-height: 0; }

/* ------------------------------------------------------------------- chips */
/*
 * Fondo palido y texto fuerte del mismo tono. No es una decision de gusto.
 *
 * Los badge text-bg-* de Bootstrap llevan blanco encima del color pleno: 3.30:1
 * en el verde y 2.15:1 en el ambar —el segundo, sencillamente, no se lee—. Y
 * traen sus propios colores, el cian y el gris del tema por defecto, que no son
 * los de aqui. Asi cada tono pasa de 6:1 y todos son de la misma familia.
 *
 * QUE TONO USAR. El color dice si eso pide hacer algo, no adorna:
 *
 *   neutro   una etiqueta y ya: la forma de pago, el ITBIS, "desactivado"
 *   azul     informacion: "abierta", "usted", un comprobante en proceso
 *   verde    confirmado y bien: "activo", "configurado", entrada de efectivo
 *   ambar    pendiente, dinero que falta: "por cobrar", "nunca", "sin configurar"
 *   rojo     algo va mal y hay que mirarlo: "pasado del limite", "ninguno"
 *
 * Los .estado-* de la DGII son los mismos tonos con otro nombre. Van juntos a
 * proposito: definidos aparte acabarian pareciendose pero no siendo iguales.
 */

.chip, .estado {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.4;
    white-space: nowrap;
}

.chip-neutro, .estado-otro       { color: #334155; background-color: #F1F5F9; }
.chip-azul,   .estado-proceso    { color: #1E40AF; background-color: #DBEAFE; }
.chip-verde,  .estado-aceptado   { color: #166534; background-color: #DCFCE7; }
.chip-ambar,  .estado-observado  { color: #92400E; background-color: #FEF3C7; }
.chip-rojo,   .estado-rechazado  { color: #991B1B; background-color: #FEE2E2; }

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

.card {
    background-color: var(--inv-tarjeta);
    border: 1px solid var(--inv-borde);
    border-radius: var(--inv-radio);
    box-shadow: var(--inv-sombra);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--inv-borde);
    font-weight: 600;
    padding: .85rem 1rem;
}

.card-footer { background-color: transparent; border-top: 1px solid var(--inv-borde); }

/* ----------------------------------------------------------------- tablas */

.table { --bs-table-border-color: var(--inv-borde); }

.table > thead th {
    color: var(--inv-texto-suave);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--inv-borde);
}

/*
 * Cifras de ancho fijo.
 *
 * Con la tipografia normal el 1 es mas estrecho que el 8, asi que una columna de
 * importes queda con las comas bailando y no se pueden comparar de un vistazo.
 * Es lo que se espera de cualquier pantalla que enseñe dinero.
 */
.table td.text-end,
.table th.text-end,
.fs-4, .fs-5 { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ barra lateral */
/*
 * Las variables estan puestas en .app-sidebar, no en :root, asi que hay que
 * repetir ese selector para poder ganarles.
 */

.app-sidebar {
    --lte-sidebar-color:              #CBD5E1;
    --lte-sidebar-hover-color:        #FFFFFF;
    --lte-sidebar-active-color:       #FFFFFF;
    --lte-sidebar-hover-bg:           rgba(255, 255, 255, .08);
    --lte-sidebar-menu-active-bg:     var(--inv-primario);
    --lte-sidebar-menu-active-color:  #FFFFFF;
    --lte-sidebar-submenu-color:      #94A3B8;
    --lte-sidebar-submenu-hover-color: #FFFFFF;
    --lte-sidebar-submenu-hover-bg:   rgba(255, 255, 255, .08);

    background: linear-gradient(180deg, var(--inv-azul-oscuro) 0%, #172E6B 100%) !important;
    border-right: 0;
}

.app-sidebar .sidebar-brand {
    background-color: rgba(0, 0, 0, .18);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.app-sidebar .brand-link,
.app-sidebar .brand-text { color: #FFFFFF; }

.app-sidebar .sidebar-menu .nav-link {
    color: var(--lte-sidebar-color);
    border-radius: 8px;
    margin: .12rem .6rem;
    padding: .6rem .75rem;
}

.app-sidebar .sidebar-menu .nav-link:hover {
    background-color: var(--lte-sidebar-hover-bg);
    color: #FFFFFF;
}

.app-sidebar .sidebar-menu .nav-link.active {
    background-color: var(--inv-primario);
    color: #FFFFFF;
    font-weight: 600;
}

.app-sidebar .nav-icon { opacity: .9; }

/* El nombre de la empresa, bajo la marca. */
.sidebar-empresa {
    color: #94A3B8;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

/* ------------------------------------------------------- barra de arriba */

.app-header {
    background-color: var(--inv-tarjeta) !important;
    border-bottom: 1px solid var(--inv-borde);
}

.app-content-header h3 { font-weight: 600; letter-spacing: -.01em; }

.app-footer {
    background-color: var(--inv-tarjeta);
    border-top: 1px solid var(--inv-borde);
    color: var(--inv-texto-suave);
    font-size: .85rem;
}

/* ------------------------------------------------------- foto de producto */
/*
 * SIEMPRE con alto y ancho fijos, tambien el hueco de los que no tienen foto.
 * Ocho sugerencias con ocho imagenes sin dimensionar hacen saltar la lista
 * mientras cargan, justo cuando el cajero va a pulsar una.
 */

.foto-producto,
.foto-hueco {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 6px;
    object-fit: cover;
    background-color: var(--bs-secondary-bg);
}

.foto-hueco {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--inv-texto-suave);
    border: 1px dashed var(--inv-borde);
}

.foto-producto-grande,
.foto-hueco.foto-producto-grande {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    font-size: 2rem;
}

/* --------------------------------------------------- sugerencias de la caja */

.sugerencias {
    position: absolute;
    z-index: 1050;
    left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    margin-top: 2px;
    background-color: var(--inv-tarjeta);
    border: 1px solid var(--inv-borde);
    border-radius: var(--inv-radio);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
    max-height: 22rem;
    overflow-y: auto;
}

[data-bs-theme="dark"] .sugerencias { box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }

.sugerencia {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0 .7rem;
    width: 100%;
    padding: .5rem .8rem;
    border: 0;
    border-bottom: 1px solid var(--inv-borde);
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.sugerencia:last-child { border-bottom: 0; }

/* .activa y no :hover a secas: con el teclado no hay raton, y quien baja con
   las flechas tiene que ver donde esta. */
.sugerencia:hover,
.sugerencia.activa { background-color: rgba(var(--bs-primary-rgb), .1); }

.sugerencia .texto  { min-width: 0; }
.sugerencia .nombre { font-weight: 500; display: block; }
.sugerencia .codigo { display: block; }

.sugerencia .codigo,
.sugerencia .precio {
    color: var(--inv-texto-suave);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.sugerencia .precio { text-align: right; }

/* Sin existencia se sigue pudiendo elegir —se vende y queda en negativo, que es
   como funciona el mostrador— pero se dice, que es lo que evita la sorpresa. */
.sugerencia.agotado .nombre { color: var(--inv-texto-suave); }
.sugerencia.agotado .precio { color: #92400E; }

[data-bs-theme="dark"] .sugerencia.agotado .precio { color: #FCD34D; }

/* ---------------------------------------------------- fila de cinco tarjetas */
/*
 * Cinco tarjetas en una fila.
 *
 * Bootstrap reparte en doce, asi que cinco iguales no salen con sus clases: lo
 * mas cerca es col-lg-3, que deja cuatro arriba y una sola abajo ocupando un
 * cuarto. Esto va aparte y no se toca tarjeta(), que la usan ocho pantallas y
 * en las demas cuatro por fila esta bien.
 *
 * Solo desde 992 px: por debajo siguen valiendo las dos por fila del col-6, que
 * cinco tarjetas de 20% en un movil son ilegibles.
 */
@media (min-width: 992px) {
    .fila-cinco > * { flex: 0 0 auto; width: 20%; }
}

/*
 * Y seis, cuando ademas se ve la ganancia.
 *
 * Seis de 16.6% desde 992 px dejan cada tarjeta en unos 150 px, y ahi una cifra
 * como 1,234,567.89 no cabe en su renglon. Asi que en el portatil van tres y
 * tres —que se leen bien y siguen cuadrando— y solo desde 1400 px se ponen las
 * seis en fila, donde cada una tiene mas de 200 px.
 */
@media (min-width: 992px) {
    .fila-seis > * { flex: 0 0 auto; width: 33.3333%; }
}

@media (min-width: 1400px) {
    .fila-seis > * { width: 16.6666%; }
}

/* ------------------------------------------------------------------ panel */

/*
 * El cuadro de icono de las tarjetas de cifra.
 *
 * Relleno pleno con el icono en blanco. Aqui el blanco sobre verde o sobre
 * ambar SI vale, al reves que en un chip de estado: es un icono grande y macizo,
 * no texto de once pixeles, y para las formas grandes el minimo de contraste es
 * 3:1, que todos cumplen.
 */
.cuadro-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 1.35rem;
    color: #FFFFFF;
    flex: 0 0 auto;
}

.cuadro-azul  { background-color: var(--inv-primario); }
.cuadro-verde { background-color: var(--inv-exito); }
.cuadro-ambar { background-color: var(--inv-ambar); color: #78350F; }
.cuadro-rojo  { background-color: var(--inv-error); }
.cuadro-gris  { background-color: #94A3B8; }

/*
 * El grafico: barras de un color, ejes de otro.
 *
 * El contenedor lleva el color del TEXTO, que es lo que heredan las rayas y las
 * cifras del eje; las barras se pintan aparte. Si el svg entero heredase el azul
 * de marca, las etiquetas saldrian en azul translucido y sobre el fondo oscuro
 * no se leerian.
 */
/*
 * Ancho minimo y desplazamiento propio.
 *
 * El svg escala TODO su sistema de coordenadas, tambien la letra: metido en una
 * tarjeta de 335 pixeles, el grafico quedaba de 95 de alto y los nombres de los
 * meses en unos 4 pixeles, que no los lee nadie.
 *
 * El ancho minimo lo calcula Panel::barras, que es quien sabe cuantos meses hay.
 * Aqui solo se dice que si no cabe, se arrastra de lado DENTRO de la tarjeta: el
 * cuerpo de la pagina no se mueve.
 */
.grafico { color: var(--inv-texto-suave); overflow-x: auto; }

/* Centrado: una serie corta no se estira, asi que sin esto se quedaria pegada a
   la izquierda con todo el hueco a la derecha. Cuando no cabe, el margen
   automatico no hace nada y manda el desplazamiento. */
.grafico svg { display: block; margin-inline: auto; }

.grafico .barra { fill: var(--inv-primario); }

/* #2563EB sobre el fondo oscuro se queda en 3.4:1 y las barras pierden fuerza. */
[data-bs-theme="dark"] .grafico .barra { fill: #60A5FA; }

.cifra { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Solo las que llevan enlace. Un hover en una tarjeta que no lleva a ningun
   sitio promete algo que no pasa al pulsar. */
.tarjeta-cifra:has(.stretched-link) { transition: box-shadow .15s, transform .15s; }

.tarjeta-cifra:has(.stretched-link):hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, .1);
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .tarjeta-cifra:has(.stretched-link):hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

/*
 * La barrita de fondo del ranking de productos.
 *
 * Va detras del nombre, no en una columna aparte: asi se compara de un vistazo
 * sin gastar ancho de tabla, que en el movil no sobra.
 */
.fila-ranking { position: relative; }

.fila-ranking .barra-fondo {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background-color: rgba(var(--bs-primary-rgb), .1);
    border-radius: 0 4px 4px 0;
    pointer-events: none;
}

.fila-ranking > * { position: relative; }

/* Fila de resumen de comprobantes. */
.linea-estado { display: flex; align-items: center; gap: .6rem; }
.linea-estado .cuenta { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ------------------------------------------------------------- monograma */
/*
 * Las iniciales del negocio, para cuando no hay logo subido. Un hueco vacio en
 * la primera pantalla se ve peor que unas iniciales bien puestas.
 */

.monograma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: var(--inv-primario);
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: .02em;
    flex: 0 0 auto;
}

.monograma-grande { width: 76px; height: 76px; border-radius: 16px; font-size: 1.6rem; }
.monograma-claro  { background-color: rgba(255, 255, 255, .16); }

.logo-empresa        { max-height: 40px; max-width: 150px; object-fit: contain; }
.logo-empresa-grande { max-height: 84px; max-width: 260px; object-fit: contain; }

/*
 * El plato: fondo claro detras del logo cuando va sobre azul oscuro.
 *
 * No es adorno. Un logo PNG con transparencia y dibujo oscuro —que es lo normal,
 * porque se hace para papel blanco— desaparece encima del azul de la marca. Aqui
 * no se puede saber de que color sube su logo cada cliente, asi que en vez de
 * suponer se le pone siempre un fondo claro y se acabo el problema para todos.
 *
 * En claro es blanco puro; en oscuro se baja un punto para que no deslumbre.
 */
.logo-plato {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: .55rem .8rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
}

.logo-plato-grande { border-radius: 16px; padding: 1rem 1.35rem; }

/*
 * El de la barra lateral, mas apretado.
 *
 * Esa franja mide 56 pixeles de alto. Con el plato normal —logo de 40 mas su
 * relleno— salian 58 y quedaba pegado a los dos bordes, cortado por arriba. Con
 * esto quedan unos 42 y respira.
 */
.logo-plato-menu { border-radius: 8px; padding: .3rem .5rem; }
.logo-plato-menu .logo-empresa { max-height: 28px; max-width: 120px; }

[data-bs-theme="dark"] .logo-plato { background-color: #E2E8F0; }

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

.form-control, .form-select {
    border-color: var(--inv-borde);
    border-radius: 8px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--inv-primario);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.form-label { font-weight: 500; font-size: .9rem; }

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

.alert { border-radius: var(--inv-radio); border-width: 1px; }

.alert-danger  { --bs-alert-color: #991B1B; --bs-alert-bg: #FEE2E2; --bs-alert-border-color: #FECACA; }
.alert-success { --bs-alert-color: #166534; --bs-alert-bg: #DCFCE7; --bs-alert-border-color: #BBF7D0; }
.alert-warning { --bs-alert-color: #92400E; --bs-alert-bg: #FEF3C7; --bs-alert-border-color: #FDE68A; }
.alert-info    { --bs-alert-color: #1E40AF; --bs-alert-bg: #DBEAFE; --bs-alert-border-color: #BFDBFE; }

/* ---------------------------------------------------------------- entrar */

.pagina-entrar { min-height: 100vh; background-color: var(--inv-fondo); }

.entrar-marca {
    background: linear-gradient(160deg, var(--inv-azul-oscuro) 0%, var(--inv-primario) 100%);
    color: #FFFFFF;
}

.entrar-marca .lema { color: rgba(255, 255, 255, .82); }

.entrar-marca .punto {
    color: rgba(255, 255, 255, .78);
    font-size: .9rem;
}

.entrar-caja { width: 100%; max-width: 400px; }

.entrar-caja .form-control { padding-top: .7rem; padding-bottom: .7rem; }

/* ============================================================ modo oscuro */
/*
 * Solo se redefinen tokens. Si un color se escribe a mano en una vista, aqui no
 * hay forma de arreglarlo y esa pantalla se queda con una tarjeta blanca suelta
 * en medio de todo lo oscuro.
 */

[data-bs-theme="dark"] {
    --inv-fondo:        #0F172A;
    --inv-tarjeta:      #1E293B;
    --inv-texto:        #E2E8F0;
    --inv-texto-suave:  #94A3B8;
    --inv-borde:        #334155;

    --inv-sombra:       0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);

    --bs-body-bg:         var(--inv-fondo);
    --bs-body-color:      var(--inv-texto);
    --bs-body-color-rgb:  226, 232, 240;
    --bs-emphasis-color:  #F8FAFC;
    --bs-secondary-color: var(--inv-texto-suave);
    --bs-border-color:    var(--inv-borde);
    --bs-tertiary-bg:     var(--inv-fondo);
    --bs-tertiary-bg-rgb: 15, 23, 42;
    --bs-secondary-bg:    #334155;
    --bs-secondary-bg-rgb: 51, 65, 85;

    /*
     * El azul de marca aclarado para texto: #2563EB sobre el fondo oscuro da
     * 3.45:1 y un enlace no se lee. El #60A5FA da 7.02:1. Los BOTONES se quedan
     * con el azul pleno, que con blanco encima sigue en 5.17:1.
     */
    --bs-link-color:       #60A5FA;
    --bs-link-color-rgb:   96, 165, 250;
    --bs-link-hover-color: #93C5FD;
}

[data-bs-theme="dark"] .chip-verde,  [data-bs-theme="dark"] .estado-aceptado  { color: #86EFAC; background-color: #14361F; }
[data-bs-theme="dark"] .chip-ambar,  [data-bs-theme="dark"] .estado-observado { color: #FCD34D; background-color: #3B2A08; }
[data-bs-theme="dark"] .chip-rojo,   [data-bs-theme="dark"] .estado-rechazado { color: #FCA5A5; background-color: #3F1717; }
[data-bs-theme="dark"] .chip-azul,   [data-bs-theme="dark"] .estado-proceso   { color: #93C5FD; background-color: #16294D; }
[data-bs-theme="dark"] .chip-neutro, [data-bs-theme="dark"] .estado-otro      { color: #CBD5E1; background-color: #334155; }

[data-bs-theme="dark"] .alert-danger  { --bs-alert-color: #FCA5A5; --bs-alert-bg: #3F1717; --bs-alert-border-color: #7F1D1D; }
[data-bs-theme="dark"] .alert-success { --bs-alert-color: #86EFAC; --bs-alert-bg: #14361F; --bs-alert-border-color: #166534; }
[data-bs-theme="dark"] .alert-warning { --bs-alert-color: #FCD34D; --bs-alert-bg: #3B2A08; --bs-alert-border-color: #92400E; }
[data-bs-theme="dark"] .alert-info    { --bs-alert-color: #93C5FD; --bs-alert-bg: #16294D; --bs-alert-border-color: #1E40AF; }

[data-bs-theme="dark"] .app-header,
[data-bs-theme="dark"] .app-footer { background-color: var(--inv-tarjeta) !important; }

[data-bs-theme="dark"] .app-sidebar {
    background: linear-gradient(180deg, #172554 0%, #0F172A 100%) !important;
}

[data-bs-theme="dark"] .pagina-entrar { background-color: var(--inv-fondo); }

/*
 * El ambar de rotulo al reves que en claro: aqui el fondo es oscuro y el que se
 * lee es el palido. 12.13:1 sobre el fondo de la pagina.
 */
/*
 * El azul de la marca es #2563EB: se lee de sobra sobre el fondo claro y da
 * 2.83:1 sobre el oscuro. Es el mismo caso que el ambar, y afecta a todos los
 * botones de contorno azul de la aplicacion —«Emitir comprobante» entre ellos—,
 * no solo a los del modal de exportar. En oscuro va el azul palido que ya usan
 * el chip azul y el aviso informativo, para no inventar un tono nuevo.
 */
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color:        #93C5FD;
    --bs-btn-border-color: #3B82F6;
}

/*
 * El verde de contorno no tenia regla y se quedaba con el de fabrica, que sobre
 * el fondo oscuro da 3.23:1. Mismo verde palido que el chip verde.
 */
[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color:        #86EFAC;
    --bs-btn-border-color: #22C55E;
}

[data-bs-theme="dark"] .btn-outline-warning {
    --bs-btn-color:        #FCD34D;
    --bs-btn-border-color: var(--inv-ambar);
}

/*
 * El rojo de #DC2626 sobre el fondo oscuro da 3.70:1, y con el va el aviso de
 * que la nota pasa del comprobante, que es justo el que hay que leer. Lleva
 * !important porque .text-danger es una utilidad de Bootstrap y tambien lo
 * lleva; sin el, no gana.
 */
[data-bs-theme="dark"] .text-danger { color: #F87171 !important; }

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-hover-bg:    #334155;
    --bs-btn-active-bg:   #475569;
    --bs-btn-border-color: var(--inv-borde);
}

/* -------------------------------------------------------------- imprimir */
/*
 * El ticket y la factura salen por aqui. En papel no hay barra lateral ni
 * botones, y el fondo tiene que ser blanco: imprimir el gris del sistema gasta
 * tinta y se ve sucio.
 */

@media print {
    .app-sidebar, .app-header, .app-footer, .no-imprimir { display: none !important; }
    .app-main { margin: 0 !important; }
    .card { box-shadow: none !important; border: 0 !important; }
    body { background: #FFFFFF !important; color: #000000 !important; }
}