/* ============================================================================
   ContaDocs — tokens de diseño. La ÚNICA fuente de color, tipografía y espacio.
   Ninguna pantalla migrada escribe un color a mano: todo sale de aquí, y por eso
   el modo oscuro sale solo sin duplicar una sola regla de componente.

   Convive a propósito con las variables antiguas de `app.css` (--azul, --g200,
   --surface…). Los nombres nuevos son todos distintos, así que las pantallas sin
   migrar siguen exactamente igual mientras dure la migración. Cuando no quede
   ninguna sin migrar, `app.css` se borra entero.
   ============================================================================ */

:root {
  /* ── Superficies ─────────────────────────────────────────────────────── */
  --fondo:        #F7F8FA;   /* fondo de página: gris azulado, nunca blanco puro */
  --superficie:   #FFFFFF;   /* cards, tablas, paneles */
  --superficie-2: #F2F4F7;   /* cabecera de tabla, zonas hundidas */
  --borde:        #E4E7EC;   /* 1px — la estructura la dan los bordes, no las sombras */
  --borde-fuerte: #D0D5DD;

  /* ── Tinta ───────────────────────────────────────────────────────────── */
  --tinta:   #101828;   /* texto principal */
  --tinta-2: #475467;   /* secundario */
  /* El brief pedía #98A2B4 para labels y metadatos, pero sobre blanco da 2.57:1 y el mismo
     brief exige contraste AA (4.5:1 en texto pequeño). Los metadatos de esta app son datos
     —períodos, RUC, fechas de vencimiento—, no adorno, así que manda la legibilidad:
     #667085 da 5.1:1 sobre superficie y 4.8:1 sobre el fondo. El gris original se conserva
     como --tinta-4 para lo que NO es texto: iconos decorativos, separadores, placeholders. */
  --tinta-3: #667085;   /* labels y metadatos */
  --tinta-4: #98A2B4;   /* decorativo, nunca texto pequeño */

  /* ── Primario ────────────────────────────────────────────────────────────
     Petróleo profundo: sobrio y poco común en SaaS.
     OJO — la marca blanca lo pisa: `layouts/sidebar.php` reescribe estas tres
     con el color del estudio cuando hay uno configurado. Por eso `--primario-hover`
     y `--primario-suave` se derivan y no se escriben sueltas en los componentes. */
  --primario:        #0E4C56;
  --primario-hover:  #0A3A42;
  --primario-suave:  #E6F0F1;
  --primario-texto:  #FFFFFF;   /* texto sobre el primario */

  /* ── Semáforo — SOLO para estados reales (riesgo, vencimientos, pagos) ── */
  --ok:            #067647;  --ok-suave:      #ECFDF3;
  --alerta:        #B54708;  --alerta-suave:  #FFFAEB;
  --peligro:       #B42318;  --peligro-suave: #FEF3F2;
  --neutro:        #475467;  --neutro-suave:  #F2F4F7;
  /* --peligro sirve como TEXTO sobre fondo suave; para un badge de fondo rojo con texto
     blanco hace falta un rojo sólido, y en oscuro --peligro es claro y no vale. */
  --peligro-fuerte: #B42318;
  /* Verde SÓLIDO para fondos con texto blanco. --ok es color de texto y en oscuro es
     claro; usarlo de fondo con #fff encima falla justo en el modo que no se revisa. */
  --ok-fuerte: #067647;
  /* Ámbar sólido, por lo mismo que --ok-fuerte y --peligro-fuerte. */
  --alerta-fuerte: #B54708;
  --neutro-fuerte: #475467;
  /* Petróleo sólido para FONDOS con texto encima (degradados de marca, avatares). El
     --primario se aclara en oscuro y el blanco encima se cae a 1.9:1. */
  --primario-fuerte: #0E4C56;

  /* ── Tipografía ──────────────────────────────────────────────────────── */
  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --t-12: 12px;   /* metadatos */
  --t-13: 13px;   /* tablas */
  --t-14: 14px;   /* base de la app del contador */
  --t-16: 16px;   /* subtítulo · base del portal del cliente */
  --t-18: 18px;   /* título de sección */
  --t-24: 24px;   /* título de página */
  --t-30: 30px;   /* cifra destacada del dashboard */

  /* ── Espaciado: rejilla de 4px ───────────────────────────────────────── */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;

  /* ── Radios: un solo sistema ─────────────────────────────────────────── */
  --r-card:  8px;
  --r-input: 6px;
  --r-pill:  999px;

  /* ── Sombras: casi nulas. Solo modales y dropdowns llevan sombra real ── */
  --sombra:       0 1px 2px rgba(16, 24, 40, .05);
  --sombra-alta:  0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
  --anillo:       0 0 0 3px var(--primario-suave);   /* foco de inputs */

  /* Alturas táctiles: 36 en la app, 44 en el portal del cliente (dedo). */
  --alto-control: 36px;
}

/* ── Modo oscuro ──────────────────────────────────────────────────────────
   Se mapean LOS MISMOS tokens. Ningún componente sabe en qué modo está.
   El primario se aclara porque #0E4C56 sobre #0C111D no llega a contraste AA. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo:        #0C111D;
    --superficie:   #161B26;
    --superficie-2: #1F242F;
    --borde:        #1F242F;
    --borde-fuerte: #333741;
    --tinta:        #F5F6F8;
    --tinta-2:      #CDD5DF;
    --tinta-3:      #94A3B8;
    --tinta-4:      #697586;
    --primario:       #6BB6C4;
    --primario-hover: #86C6D2;
    /* Más oscuro de lo que parecería: el primario aclarado va COMO TEXTO encima de este
       fondo (badges, avisos), y con #12313A se quedaba en 3.6:1. */
    --primario-suave: #0C2A31;
    --primario-texto: #06181C;
    --ok:      #75E0A7;  --ok-suave:      #0A2C1D;
    --alerta:  #FEC84B;  --alerta-suave:  #2E1D06;
    --peligro: #FDA29B;  --peligro-suave: #33110E;
    --neutro:  #94A3B8;  --neutro-suave:  #1F242F;
    --peligro-fuerte: #B42318;
    --ok-fuerte: #067647;
    --alerta-fuerte: #B54708;
    --neutro-fuerte: #475467;
    --primario-fuerte: #0E4C56;
    --sombra:      0 1px 2px rgba(0, 0, 0, .3);
    --sombra-alta: 0 12px 16px -4px rgba(0, 0, 0, .5), 0 4px 6px -2px rgba(0, 0, 0, .3);
  }
}

/* El interruptor manual gana sobre la preferencia del sistema, en los dos sentidos. */
:root[data-theme="dark"] {
  --fondo:        #0C111D;
  --superficie:   #161B26;
  --superficie-2: #1F242F;
  --borde:        #1F242F;
  --borde-fuerte: #333741;
  --tinta:        #F5F6F8;
  --tinta-2:      #CDD5DF;
  --tinta-3:      #94A3B8;
  --tinta-4:      #697586;
  --primario:       #6BB6C4;
  --primario-hover: #86C6D2;
  --primario-suave: #0C2A31;
  --primario-texto: #06181C;
  --ok:      #75E0A7;  --ok-suave:      #0A2C1D;
  --alerta:  #FEC84B;  --alerta-suave:  #2E1D06;
  --peligro: #FDA29B;  --peligro-suave: #33110E;
  --neutro:  #94A3B8;  --neutro-suave:  #1F242F;
  --peligro-fuerte: #B42318;
  --ok-fuerte: #067647;
  --alerta-fuerte: #B54708;
  --neutro-fuerte: #475467;
  /* Petróleo sólido para FONDOS con texto encima (degradados de marca, avatares). El
     --primario se aclara en oscuro y el blanco encima se cae a 1.9:1. */
  --primario-fuerte: #0E4C56;
  --sombra:      0 1px 2px rgba(0, 0, 0, .3);
  --sombra-alta: 0 12px 16px -4px rgba(0, 0, 0, .5), 0 4px 6px -2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }