/* =====================================================================
   TOKENS DE DISEÑO — fuente única de colores, tipografía, radios,
   espaciado, foco y tamaños táctiles de todo el sistema.
   (auditoría 2026-10, UX-12)

   - Se carga PRIMERO en templates/base.html (antes de Bootstrap y de
     estilo.css / interior.css / dashboard.css / movil.css).
   - Los valores son exactamente los que ya se veían en pantalla: este
     archivo solo les pone nombre. Antes vivían repartidos en los :root de
     estilo.css ("Libro Mayor") e interior.css ("Interior V2"), donde el
     segundo pisaba al primero; aquí queda solo el valor que ganaba.
   - Las variables antiguas (--iv-*, --verde-mayor, --papel, ...) se
     conservan como alias de los tokens para no tocar las ~200 reglas y
     plantillas que ya las usan.
   - Puntos de corte oficiales (no se pueden usar variables dentro de
     @media, por eso se documentan aquí): 480px celular pequeño,
     768px celular/tablet vertical, 1024px tablet horizontal,
     1280px escritorio (por debajo de 1280px el menú lateral es un cajón).
     Se escriben como max-width: 480px / 768px / 1024px / 1279.98px y
     min-width: 768.02px / 1024.02px / 1280px. (auditoría 2026-10, UX-20)
   ===================================================================== */
:root {
  /* ---- Marca ---- */
  --mc-azul: #0067B8;            /* color principal (botones, enlaces, activo) */
  --mc-azul-oscuro: #005499;     /* hover de botones, textos sobre azul pálido */
  --mc-azul-claro: #2B88D8;
  --mc-azul-palido: #EBF3FC;     /* fondos de selección / activo */
  --mc-nav: #00415E;             /* barra superior */
  --mc-nav-2: #003249;

  /* ---- Neutros ---- */
  --mc-blanco: #fff;
  --mc-superficie: #F3F4F6;      /* fondo general gris */
  --mc-superficie-2: #EDEEF0;    /* encabezados de tabla "libro mayor" */
  --mc-hover: #F1F2F4;           /* hover de opciones del menú */
  --mc-linea: #E1E3E6;           /* bordes de tarjetas y separadores (decorativos) */
  --mc-tinta: #1B1B1B;           /* texto principal */
  --mc-tinta-libro: #1F2937;     /* texto del tema "Libro Mayor" (estilo.css) */
  --mc-tinta-suave: #5F6368;     /* texto secundario: 6,0:1 sobre blanco */
  --mc-texto-menu: #444;         /* opciones del menú lateral */
  --mc-texto-submenu: #505050;
  --mc-icono: #6B6F75;           /* íconos del menú lateral */
  --mc-gris-medio: #707070;

  /* ---- Estados ----
     Auditoría 2026-10, U2-17: los colores de estado usados como TEXTO deben
     tener al menos 4,5:1 (WCAG 2.2 AA). Antes el verde #1C8A5B daba 3,89:1
     sobre su fondo #E7F6EE y 4,34:1 sobre blanco; el ámbar #B7791F 3,3:1;
     el verde azulado #00827A 4,15:1; el gris de dato vacío #9AA3AF 2,55:1.
     Ahora (lo comprueba apps/core/tests_baja_u2.py con el cálculo WCAG):
     verde #15734B = 5,25:1 sobre #E7F6EE y 5,86:1 sobre blanco; ámbar
     #8A5A10 = 5,3:1 sobre #FBF2E1; verde azulado #006B64 = 5,65:1 sobre
     #E6F4F2; gris de vacío #6B7280 = 4,83:1 sobre blanco. */
  --mc-exito: #15734B;
  --mc-exito-fondo: #E7F6EE;
  --mc-peligro: #C0392B;
  --mc-peligro-fondo: #FDEEEE;
  --mc-peligro-borde: #F0C4C4;
  --mc-aviso: #B45309;
  --mc-aviso-fondo: #FDF1DF;
  --mc-alerta-libro: #EF4444;    /* --alerta del tema "Libro Mayor" */
  --mc-oro: #F59E0B;
  --mc-ambar-texto: #8A5A10;     /* montos/estados "pendiente" en ámbar (U2-17) */
  --mc-teal: #006B64;            /* verde azulado del Inicio (U2-17) */
  --mc-texto-vacio: #6B7280;     /* guion de dato vacío (U2-17) */

  /* ---- Accesibilidad / contraste (auditoría 2026-10, UX-13 y UX-14) ----
     Razones medidas con shots_K/contraste.py (WCAG 2.x):
     - texto tenue (ceros atenuados, n.° de campo SUNAT): #5F6368 =
       6,0:1 sobre blanco, 5,5:1 sobre #F3F4F6 y 5,2:1 sobre #EDEEF0.
     - borde de campos de formulario: #8A8886 = 3,5:1 sobre blanco y
       3,2:1 sobre el fondo gris #F3F4F6 de los campos.
     - foco: #0067B8 = 5,8:1 sobre blanco, 5,2:1 sobre azul pálido;
       sobre la barra superior oscura se usa blanco (11:1). */
  --mc-texto-tenue: #5F6368;
  --mc-borde-campo: #8A8886;
  --mc-foco: #0067B8;
  --mc-foco-sobre-oscuro: #fff;
  --mc-foco-ancho: 2px;
  --mc-foco-separacion: 2px;
  /* Anillo de foco de campos: 1px azul sólido (contraste) + el halo pálido de siempre (apariencia). */
  --mc-foco-campo: 0 0 0 1px var(--mc-foco), 0 0 0 4px var(--mc-azul-palido);

  /* ---- Tipografía ---- */
  --mc-fuente: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mc-fuente-cifras: "Consolas", "SF Mono", "Courier New", monospace;
  --mc-texto-xs: 0.72rem;
  --mc-texto-sm: 0.82rem;
  --mc-texto-base: 0.9rem;
  --mc-texto-lg: 1.05rem;

  /* ---- Radios ---- */
  --mc-radio-0: 0;
  --mc-radio-sm: 4px;
  --mc-radio-campo: 8px;
  --mc-radio-pildora: 999px;

  /* ---- Espaciado ---- */
  --mc-esp-1: 0.25rem;
  --mc-esp-2: 0.5rem;
  --mc-esp-3: 0.75rem;
  --mc-esp-4: 1rem;
  --mc-esp-5: 1.5rem;
  --mc-esp-6: 2rem;

  /* ---- Tamaños ---- */
  --mc-toque-min: 44px;          /* objetivo táctil mínimo en celular/tablet (UX-21) */
  --iv-topbar-h: 56px;

  /* =================================================================
     ALIAS — nombres antiguos que ya usan las hojas y las plantillas.
     ================================================================= */
  /* Interior V2 (interior.css, dashboard.css, plantillas) */
  --iv-white: var(--mc-blanco);
  --iv-surface: var(--mc-superficie);
  --iv-line: var(--mc-linea);
  --iv-ink: var(--mc-tinta);
  --iv-ink-soft: var(--mc-tinta-suave);
  --iv-blue-deep: var(--mc-azul-oscuro);
  --iv-blue: var(--mc-azul);
  --iv-blue-pale: var(--mc-azul-palido);
  --iv-red: var(--mc-peligro);
  --iv-nav: var(--mc-nav);
  --iv-nav-2: var(--mc-nav-2);
  --iv-font-display: var(--mc-fuente);
  --iv-font-body: var(--mc-fuente);

  /* "Libro Mayor" (estilo.css). Los valores que interior.css pisaba son
     los que se veían, y son los que quedan. */
  --tinta: var(--mc-tinta-libro);
  --papel: var(--mc-superficie);
  --papel-oscuro: var(--mc-superficie-2);
  --verde-mayor: var(--mc-azul);
  --verde-mayor-claro: var(--mc-azul-claro);
  --oro-sol: var(--mc-oro);
  --linea-regla: var(--mc-linea);
  --alerta: var(--mc-alerta-libro);
  --texto-suave: var(--mc-tinta-suave);
  --fuente-display: var(--mc-fuente);
  --fuente-cuerpo: var(--mc-fuente);
  --fuente-cifras: var(--mc-fuente-cifras);
}