/* =============================================================================
   TEMA DE COLORES DEL SISTEMA
   -----------------------------------------------------------------------------
   Para cambiar el color de marca basta con editar este archivo: el menú, los
   botones, el login, el POS, Cobranza y los formularios de venta leen estas
   variables. Se carga ANTES que el resto de hojas de estilo.

   Si cambia --tema-primario, actualice también sus variantes -rgb y -hsl con
   los MISMOS valores (algunas hojas necesitan el color descompuesto para
   aplicarle transparencia).

   Paleta actual: azul de DISTRIBUIDORA GASPER S.A.C.
   ========================================================================== */
:root {
    /* Color de marca: botones principales, enlaces, foco, encabezados */
    --tema-primario:         #1652c9;
    --tema-primario-rgb:     22, 82, 201;     /* rgba(var(--tema-primario-rgb), .15) */
    --tema-primario-hsl:     220 80% 44%;     /* hsl(var(--tema-primario-hsl) / .15) */
    --tema-primario-oscuro:  #0f3c99;         /* hover / activo */
    --tema-primario-oscuro-rgb: 15, 60, 153;
    --tema-primario-medio:   #9db6ea;         /* bordes y hover suaves */
    --tema-texto-marca:      #102a63;         /* títulos y cabeceras de tabla en tono de marca */
    --tema-primario-claro:   #e3ecfc;         /* fondos suaves, selección */
    --tema-primario-vivo:    #3b82f6;         /* extremo luminoso de degradados (login) */
    --tema-tono:             220;             /* matiz (H de -hsl): tiñe grises y fondos suaves */

    /* Barra lateral del menú */
    --tema-menu-fondo:       #0b2a6f;
    --tema-menu-texto:       #ffffff;

    /* Acento (detalles, badges destacados) */
    --tema-acento:           #f6c518;

    /* Superficie neutra con un toque del color de marca */
    --tema-superficie:       #eef3fb;

    /* Estado OK (pagado, activo, guardado). Por pedido del cliente no hay verde:
       usa el mismo azul de la marca. Para volver al verde: #16a34a / 22, 163, 74 */
    --tema-exito:            var(--tema-primario);
    --tema-exito-rgb:        var(--tema-primario-rgb);
}

/* Sin degradados: el sistema usa colores sólidos. Los tonos claros y oscuros de
   las pantallas se calculan con --tema-tono: hsl(var(--tema-tono) S% L%). */