/* ============================================================
   KAPITAL FINANCIERA · color-light.css
   Solo color. App unicamente en modo claro.

   ORIGEN
   Generada por funciones a partir de las dos flechas del logo:
     flecha clara  #0286E9   L 0.613  croma 0.177  hue 250.86
     flecha oscura #112D54   L 0.299  croma 0.079  hue 257.33

   METODO  (Strom / Stripe 2024 · escala USWDS)
   - Espacio perceptual OKLCh con croma normalizado al maximo en gamut.
   - Numero de escala 0-100. La luminosidad de cada paso se resuelve
     para dar un contraste contra blanco de r(x) = e^(3.04x).
     Por construccion: paso 50 = 4.5:1. CUALQUIER PASO >= 50 CUMPLE
     WCAG AA SOBRE BLANCO, sin verificar caso por caso.
   - Hue como funcion del paso, H(x) = 244.27 + 15.15x, para compensar
     el efecto Bezold-Brucke. Los 15 grados no son arbitrarios: son los
     que separan las dos flechas del logo.
   - Croma como parabola con maximo a media escala, calibrada para que
     la rampa pase por los dos colores del logo (pasos 43.5 y 86.2).

   CONVENCION DE NOMBRES
     --kf-{categoria}-{rol}   ·  el rol describe la FUNCION
   Los pasos crudos son --kf-scale-*; los roles apuntan a ellos.

   CARGAR DESPUES del CSS de Quasar.
   ============================================================ */

:root {
  /* Evita que Chrome y Safari repinten inputs, selects y scrollbars
     cuando el sistema operativo del usuario esta en modo oscuro. */
  color-scheme: light;

  /* ============ 1. COLORES DE MARCA · INTOCABLES ============
     Hex exactos del logo registrado. No se derivan ni se ajustan. */
  --kf-logo-arrow-light: #0286e9; /*  3.8:1 sobre blanco */
  --kf-logo-arrow-dark: #112d54; /* 13.8:1 sobre blanco */

  /* ============ 2. ESCALA CRUDA ============
     Referencia. Los componentes no la usan directo: usan los roles. */

  /* brand · la rampa pasa por las dos flechas en los pasos 43.5 y 86.2 */
  --kf-scale-brand-0: #ffffff;
  --kf-scale-brand-5: #e5eff8;
  --kf-scale-brand-10: #cbe0f4;
  --kf-scale-brand-20: #93c5f3;
  --kf-scale-brand-30: #55aaf8;
  --kf-scale-brand-40: #0e8ef3;
  --kf-scale-brand-50: #0077d5;
  --kf-scale-brand-60: #0662b4;
  --kf-scale-brand-70: #0f4e92;
  --kf-scale-brand-80: #12396c;
  --kf-scale-brand-90: #0f2444;

  /* neutral · mismo hue de marca con croma bajo. No son grises puros:
     un gris neutro junto a un navy saturado se ve sucio. */
  --kf-scale-neutral-5: #ededee;
  --kf-scale-neutral-10: #dbdde0;
  --kf-scale-neutral-20: #b9c0c7;
  --kf-scale-neutral-30: #9aa6b1;
  --kf-scale-neutral-40: #7f8e9d;
  --kf-scale-neutral-50: #6b7785;
  --kf-scale-neutral-60: #58626e;
  --kf-scale-neutral-70: #474f58;
  --kf-scale-neutral-80: #363b41;
  --kf-scale-neutral-90: #222528;

  /* semanticos · hues distintos, misma disciplina de luminosidad */
  --kf-scale-success-5: #e3f1e3;
  --kf-scale-success-10: #b7ebb9;
  --kf-scale-success-50: #158839;
  --kf-scale-success-70: #1d592d;

  --kf-scale-danger-5: #f2edec;
  --kf-scale-danger-10: #ecd9d8;
  --kf-scale-danger-50: #e51d3e;
  --kf-scale-danger-70: #902431;

  --kf-scale-warning-5: #f2ece7;
  --kf-scale-warning-10: #ebdbc9;
  --kf-scale-warning-50: #a86713;
  --kf-scale-warning-70: #6d441b;

  /* ============ 3. ROLES ============ */

  /* Los 8 de Quasar. Pisan los defaults sin tocar app-mount.js. */
  --q-primary: var(--kf-logo-arrow-dark); /* navy exacto · 13.8:1 */
  --q-secondary: var(--kf-scale-brand-50); /* 4.6:1 · texto blanco encima */
  --q-accent: var(--kf-logo-arrow-light); /* azul exacto · 3.8:1 */
  --q-positive: var(--kf-scale-success-50); /* 4.6:1 */
  --q-negative: var(--kf-scale-danger-50); /* 4.6:1 */
  --q-info: var(--kf-scale-brand-60); /* 6.2:1 */
  --q-warning: var(--kf-scale-warning-50); /* 4.6:1 */
  --q-dark: var(--kf-scale-brand-90);

  /* Superficies · escala de cercania: base < muted < tint < raised */
  --kf-surface-base: var(--kf-scale-neutral-5); /* lienzo de la app */
  --kf-surface-muted: var(--kf-scale-neutral-10); /* zonas hundidas */
  --kf-surface-tint: var(--kf-scale-brand-10); /* franjas, chips, avisos */
  --kf-surface-raised: #ffffff; /* tarjetas, header */
  --kf-surface-selected: var(--kf-scale-brand-5); /* hover, fila activa */
  --kf-surface-warning: var(--kf-scale-warning-10);
  --kf-surface-danger: var(--kf-scale-danger-5);
  --kf-surface-success: var(--kf-scale-success-5);

  /* Texto · todo >= paso 50, o sea AA garantizado sobre blanco */
  --kf-text-primary: var(--kf-scale-brand-90); /* 15.5:1 */
  --kf-text-secondary: var(--kf-scale-neutral-70); /*  8.4:1 */
  --kf-text-muted: var(--kf-scale-neutral-50); /*  4.6:1 */
  --kf-text-warning: var(--kf-scale-warning-70); /*  8.4:1 */
  --kf-text-danger: var(--kf-scale-danger-70); /*  8.5:1 */
  --kf-text-success: var(--kf-scale-success-70); /*  8.3:1 */
  --kf-text-link: var(--kf-scale-brand-50);
  --kf-text-link-hover: var(--kf-scale-brand-60);

  /* Bordes */
  --kf-border-default: var(--kf-scale-neutral-20);
  --kf-border-strong: var(--kf-scale-neutral-30);
}

/* Si el sistema operativo esta en oscuro, no cambia nada. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}

body,
body.body--dark {
  background: var(--kf-surface-base) !important;
  color: var(--kf-text-primary) !important;
}

/* ============================================================
   Utilitarias.
   El !important no es opcional: los estilos internos de q-btn,
   q-chip y demas ganan por especificidad sin el.
   ============================================================ */
.bg-kf-surface-base {
  background: var(--kf-surface-base) !important;
}
.bg-kf-surface-muted {
  background: var(--kf-surface-muted) !important;
}
.bg-kf-surface-tint {
  background: var(--kf-surface-tint) !important;
}
.bg-kf-surface-raised {
  background: var(--kf-surface-raised) !important;
}
.bg-kf-surface-selected {
  background: var(--kf-surface-selected) !important;
}
.bg-kf-surface-warning {
  background: var(--kf-surface-warning) !important;
}
.bg-kf-surface-danger {
  background: var(--kf-surface-danger) !important;
}
.bg-kf-surface-success {
  background: var(--kf-surface-success) !important;
}

.text-kf-primary {
  color: var(--kf-text-primary) !important;
}
.text-kf-secondary {
  color: var(--kf-text-secondary) !important;
}
.text-kf-muted {
  color: var(--kf-text-muted) !important;
}
.text-kf-warning {
  color: var(--kf-text-warning) !important;
}
.text-kf-danger {
  color: var(--kf-text-danger) !important;
}
.text-kf-success {
  color: var(--kf-text-success) !important;
}

.kf-border {
  border: 1px solid var(--kf-border-default);
}
.kf-border-strong {
  border: 1px solid var(--kf-border-strong);
}

/* Links */
a,
.kf-link {
  color: var(--kf-text-link);
  text-decoration: underline;
}
a:hover,
.kf-link:hover {
  color: var(--kf-text-link-hover);
}

/* ============================================================
   Piezas compartidas
   ============================================================ */

/* Divisor vertical del header: separa el logo del titulo de pantalla */
.kf-divisor {
  width: 1px;
  height: 22px;
  background: var(--kf-border-default);
  flex: none;
}

/* Cadenas que el usuario verifica caracter por caracter: CURP, RFC,
   folios. La monoespaciada evita confundir 0/O y 1/l.
   Se usa la generica del sistema: no hay que cargar ninguna fuente y
   funciona en cualquier navegador. */
.kf-mono {
  font-family: monospace;
  letter-spacing: 0.06em;
}

/* Label de dato: "RFC", "CURP", "SALDO" */
.kf-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kf-text-muted);
}

/* Cifras: tabular para que las columnas de montos alineen */
.kf-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  color: var(--kf-text-primary);
}
.kf-amount--up {
  color: var(--q-positive);
}
.kf-amount--down {
  color: var(--q-negative);
}

/* Barra de marca. Remata la tarjeta de inicio, que es la unica pantalla
   sin navbar: ocupa el lugar que en las demas tiene el header.
   Degradado de las dos flechas en su orden natural, oscura a clara.
   NO se confunde con la barra de progreso: esa mide 4px y tiene un corte
   visible entre lo lleno y lo vacio; esta mide 8px y es continua. */
.kf-brand-bar {
  height: 8px;
  background: linear-gradient(90deg, var(--kf-logo-arrow-dark), var(--kf-logo-arrow-light));
}
@media (max-width: 599px) {
  .kf-brand-bar {
    height: 6px;
  }
}

/* Separador inferior, para la franja del logo */
.kf-border-bottom {
  border-bottom: 1px solid var(--kf-border-default);
}