/* ==========================================================================
   TEMA DE MARCA — KYD Performance
   --------------------------------------------------------------------------
   Este es el UNICO lugar donde viven los colores de marca.
   Para rebrandear todo el sitio alcanza con cambiar los valores de :root.

   La escala se deriva del azul del logo (#0160DE = brand-500). Los pasos
   estan ordenados por luminosidad: 50 es el mas claro (fondos tenues),
   900 el mas oscuro (texto sobre fondo claro).

   NOTA: en el markup los colores se usan con valor de respaldo, asi:
       background: var(--brand-500, #0160DE);
   El respaldo cubre las paginas que no heredan del Master y no cargan
   este archivo: se ven bien igual, aunque no siguen el cambio de tema.

   Hay dos lugares que NO pueden usar variables CSS y se documentan aparte:
     - graficos en <canvas> (Chart.js no entiende var()) -> ver js/tema.js
     - mails HTML (ningun cliente de correo soporta var()) -> ver Clases/ClsTema.vb
   ========================================================================== */

:root {
    /* --- escala de marca ------------------------------------------------ */
    --brand-50:  #ECF4FD;
    --brand-100: #D4E5FC;
    --brand-200: #A8CBFA;
    --brand-300: #6CA8F9;
    --brand-400: #2480F9;
    --brand-500: #0160DE;   /* MARCA */
    --brand-600: #0151BC;
    --brand-700: #024297;
    --brand-800: #023373;
    --brand-900: #032654;

    /* canales del color de marca, para transparencias:
       rgba(var(--brand-rgb), .18)  ->  sombras, halos y fondos suaves */
    --brand-rgb: 1, 96, 222;

    /* --- alias por rol (usar estos cuando el rol sea claro) -------------- */
    --brand:        var(--brand-500);
    --brand-hover:  var(--brand-600);
    --brand-active: var(--brand-700);
    --brand-bg:     var(--brand-100);   /* fondos tenues  */
    --brand-border: var(--brand-200);   /* bordes suaves  */
    --brand-text:   var(--brand-800);   /* texto sobre fondo claro */

    /* --- chrome: azul-negro ---------------------------------------------
       Reemplaza los grises de estructura de Vurca: 4a4a4a, 333, 555, 666...
       Comparten el hue de la marca, con saturacion alta en los oscuros y
       suave en los textos, para que el sitio se lea como una sola familia.
       Los grises CLAROS (bordes #ddd/#eee y fondos #f5f5f5) quedan neutros
       a proposito: no aportan identidad y tenirlos agrega ruido.          */
    --ink-950: #060F1A;
    --ink-900: #0A1727;   /* headers muy oscuros */
    --ink-800: #0E1E33;   /* headers de card     */
    --ink-700: #16263B;   /* FONDO DEL SIDEBAR   */
    --ink-600: #1A2C43;   /* botones oscuros     */
    --ink-500: #213550;   /* bordes sobre oscuro */
    /* Texto secundario SOBRE FONDO CLARO. El 400 esta calibrado para leerse
       sobre el sidebar oscuro y sobre blanco queda al limite (4,6:1); el 500 ya
       es demasiado oscuro para un texto secundario (11:1). Este es el intermedio. */
    --ink-450: #46586F;   /* 6,6:1 sobre fondo claro */
    --ink-400: #5E7088;   /* labels del sidebar  */
    --ink-300: #798AA2;   /* texto secundario    */
    --ink-200: #8D9CB0;   /* texto terciario     */
    --ink-100: #A1ADBD;   /* texto sobre oscuro  */

    /* --- colores semanticos: NO son marca, no cambian con el rebrand ----- */
    /* (los botones de marca estan definidos mas abajo, fuera de :root) */
    --ok:      #28A745;   /* exito / guardado / valido */
    --warning: #F5C517;
    --danger:  #DC3545;
}

/* ── Botones de marca ────────────────────────────────────────────────────────
   Bootstrap trae `btn-success` en verde y en varias pantallas se usaba para
   marcar la opcion ACTIVA de un toggle, no para indicar exito. En KYD eso
   corresponde al color de marca: se usa .btn-brand / .btn-outline-brand.
   `btn-success` se deja intacto para su significado real (guardado, valido). */
.btn-brand {
    background-color: var(--brand-500, #0160DE);
    border-color: var(--brand-500, #0160DE);
    color: #fff;
}
.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active {
    background-color: var(--brand-600, #0151BC);
    border-color: var(--brand-600, #0151BC);
    color: #fff;
}
.btn-outline-brand {
    background-color: transparent;
    border-color: var(--brand-500, #0160DE);
    color: var(--brand-500, #0160DE);
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
    background-color: var(--brand-500, #0160DE);
    border-color: var(--brand-500, #0160DE);
    color: #fff;
}