/* ============================================================
   PIIXI — modo claro de alto contraste (#1456, 2026-10-17).
   Loaded after src/tokens-extra.css. Se enciende con
   <html data-theme="claro">, que pone Ajustes › Apariencia.

   Regla: TODO texto (fg-strong, fg, fg-muted, fg-faint y los cuatro
   estados) mide 7:1 o más contra las CINCO superficies (bg … bg-4) y
   contra su propio fondo tenue. Medido con tools/contraste.mjs:
     gris claro  → mínimo 7.60:1 (danger sobre bg-4)
     gris medio  → mínimo 7.68:1 (danger sobre bg-4)

   Dos preguntas abiertas viven aquí como atributos de la maqueta
   (panel «Simular» › Modo claro):
     data-gris="medio"    fondo un tono más oscuro (por omisión: claro)
     data-boton="piixi"   botón principal en el verde de la marca con letra
                          negra (por omisión: verde oscuro con letra blanca)
   ============================================================ */

/* Tokens nuevos: en oscuro valen exactamente lo que antes estaba escrito
   a mano, así que el modo oscuro no cambia. */
:root {
  --ax-on-accent:          #0A0A0A;               /* texto sobre el botón principal */
  --ax-accent-fill:        var(--ax-accent);      /* relleno del botón principal */
  --ax-accent-fill-hover:  #1AFF95;
  --ax-on-danger:          #FFFFFF;               /* texto sobre un botón de peligro lleno */
  --ax-danger-line:        rgba(233,76,77,0.30);
  --ax-input-focus:        #1F1F1F;
  --ax-hover-strong:       rgba(255,255,255,0.20);
  --ax-scrim:              rgba(0,0,0,0.60);      /* velo detrás de un modal */
  --ax-scroll-thumb:       rgba(255,255,255,0.08);
  --ax-scroll-thumb-hover: rgba(255,255,255,0.16);
  --ax-page-bg:            #050505;               /* fondo de html/body tras la app */
}

/* ─── Claro · gris claro (por omisión) ─── */
:root[data-theme="claro"] {
  color-scheme: light;

  --ax-bg:            #E1E1DD;   /* página */
  --ax-bg-1:          #E8E8E4;   /* barra de arriba */
  --ax-bg-2:          #EDEDE9;   /* barra izquierda, tarjetas */
  --ax-bg-3:          #E4E4E0;   /* hover, elevado */
  --ax-bg-4:          #DADAD5;   /* fila activa, campos */
  --ax-border:        rgba(0,0,0,0.12);
  --ax-border-strong: rgba(0,0,0,0.26);

  --ax-fg:            #141414;   /* 13.1:1 en la superficie más oscura */
  --ax-fg-strong:     #000000;   /* 15.0:1 */
  --ax-fg-muted:      #2E2E2B;   /*  9.7:1 */
  --ax-fg-faint:      #3B3B38;   /*  8.0:1 */

  --ax-accent:        #004422;   /* al día · confirmado — 8.1:1 */
  --ax-accent-soft:   rgba(0,68,34,0.10);
  --ax-accent-line:   rgba(0,68,34,0.30);
  --ax-accent-hover:  rgba(0,68,34,0.16);

  --ax-warm:          #553600;   /* pendiente — 7.8:1 */
  --ax-warm-soft:     rgba(85,54,0,0.10);
  --ax-warm-line:     rgba(85,54,0,0.30);

  --ax-info:          #073A6E;   /* renovación próxima — 8.1:1 */
  --ax-info-soft:     rgba(7,58,110,0.08);
  --ax-info-line:     rgba(7,58,110,0.28);

  --ax-danger:        #7E1011;   /* vencido · peligro — 7.6:1 */
  --ax-danger-soft:   rgba(126,16,17,0.08);
  --ax-danger-line:   rgba(126,16,17,0.40);

  --ax-on-accent:          #FFFFFF;   /* 11.4:1 sobre #004422 */
  --ax-accent-fill:        #004422;
  --ax-accent-fill-hover:  #005C2E;
  --ax-on-danger:          #FFFFFF;   /* 10.7:1 sobre #7E1011 */
  --ax-input-focus:        #F4F4F1;
  --ax-hover-strong:       rgba(0,0,0,0.34);
  --ax-scrim:              rgba(20,20,18,0.40);
  --ax-scroll-thumb:       rgba(0,0,0,0.22);
  --ax-scroll-thumb-hover: rgba(0,0,0,0.36);
  --ax-page-bg:            var(--ax-bg);

  /* Tokens base de Mad Panda que usan h1–h3, p y .label sin color propio */
  --bg:            var(--ax-bg);
  --bg-raised:     var(--ax-bg-1);
  --bg-card:       rgba(0,0,0,0.02);
  --border:        var(--ax-border);
  --border-strong: var(--ax-border-strong);
  --fg:            var(--ax-fg);
  --fg-muted:      var(--ax-fg-muted);
  --fg-faint:      var(--ax-fg-faint);
  --fg-strong:     var(--ax-fg-strong);
  --accent:        var(--ax-danger);
  --accent-soft:   var(--ax-danger-soft);
  --shadow-card:   0 2px 12px rgba(0,0,0,0.10);
}

/* ─── Claro · gris medio (pregunta abierta) ─── */
:root[data-theme="claro"][data-gris="medio"] {
  --ax-bg:            #D3D3CE;
  --ax-bg-1:          #DADAD5;
  --ax-bg-2:          #DFDFDA;
  --ax-bg-3:          #D6D6D1;
  --ax-bg-4:          #CCCCC6;

  --ax-fg:            #121212;   /* 11.6:1 */
  --ax-fg-muted:      #292926;   /*  9.0:1 */
  --ax-fg-faint:      #343431;   /*  7.7:1 */

  --ax-accent:        #003A1D;   /* 8.0:1 */
  --ax-accent-soft:   rgba(0,58,29,0.10);
  --ax-accent-line:   rgba(0,58,29,0.30);
  --ax-accent-hover:  rgba(0,58,29,0.16);
  --ax-warm:          #4A2E00;   /* 7.7:1 */
  --ax-warm-soft:     rgba(74,46,0,0.10);
  --ax-warm-line:     rgba(74,46,0,0.30);
  --ax-info:          #06335F;   /* 7.9:1 */
  --ax-info-soft:     rgba(6,51,95,0.08);
  --ax-info-line:     rgba(6,51,95,0.28);
  --ax-danger:        #6C0C0D;   /* 7.7:1 */
  --ax-danger-soft:   rgba(108,12,13,0.08);
  --ax-danger-line:   rgba(108,12,13,0.40);

  --ax-accent-fill:        #003A1D;   /* 12.9:1 con letra blanca */
  --ax-accent-fill-hover:  #00502A;
  --ax-input-focus:        #E9E9E5;
}

/* ─── Botón principal en el verde de la marca (pregunta abierta) ─── */
:root[data-theme="claro"][data-boton="piixi"] {
  --ax-accent-fill:        #00FF88;   /* 14.8:1 con letra negra */
  --ax-accent-fill-hover:  #1AFF95;
  --ax-on-accent:          #0A0A0A;
}

/* ─── Clases de tokens-extra.css que traían un color escrito a mano ─── */
.ax-btn--primary { background: var(--ax-accent-fill); color: var(--ax-on-accent); }
.ax-btn--primary:hover { background: var(--ax-accent-fill-hover); }
.ax-btn--secondary:hover { border-color: var(--ax-hover-strong); }
.ax-btn--danger { border-color: var(--ax-danger-line); }
.ax-input:focus, .ax-textarea:focus, .ax-select:focus { background: var(--ax-input-focus); }
:root[data-theme="claro"] .ax-pill--danger { border-color: var(--ax-danger-line); }
.ax ::-webkit-scrollbar-thumb { background: var(--ax-scroll-thumb); background-clip: padding-box; }
.ax ::-webkit-scrollbar-thumb:hover { background: var(--ax-scroll-thumb-hover); background-clip: padding-box; }

:root[data-theme="claro"] ::selection { background: var(--ax-accent-line); color: var(--ax-fg-strong); }
:root[data-theme="claro"] .ax { -webkit-font-smoothing: auto; }

/* ─── Barrido de colores escritos a mano (#1456) ───
   Oscuro = el literal que había; claro = elegido aquí. Los de TEXTO miden ≥7:1. */
:root {
  --ax-danger-line-22: rgba(233,76,77,0.22);
  --ax-danger-line-25: rgba(233,76,77,0.25);
  --ax-danger-line-28: rgba(233,76,77,0.28);
  --ax-danger-line-40: rgba(233,76,77,0.40);
  --ax-danger-line-45: rgba(233,76,77,0.45);
  --ax-warm-line-45:   rgba(212,182,121,0.45);
  --ax-accent-a01: rgba(0,255,136,0.01);
  --ax-accent-a025: rgba(0,255,136,0.025);
  --ax-accent-a04: rgba(0,255,136,0.04);
  --ax-accent-a05: rgba(0,255,136,0.05);
  --ax-accent-a06: rgba(0,255,136,0.06);
  --ax-accent-a08: rgba(0,255,136,0.08);
  --ax-accent-a15: rgba(0,255,136,0.15);
  --ax-accent-a30: rgba(0,255,136,0.3);
  --ax-accent-a35: rgba(0,255,136,0.35);
  --ax-accent-a60: rgba(0,255,136,0.6);
  --ax-scrim-62:       rgba(0,0,0,0.62);
  --ax-shadow-modal:   0 24px 80px rgba(0,0,0,0.6);
  --ax-shadow-toast:   0 12px 32px rgba(0,0,0,0.5);
  --ax-shadow-pop:     0 12px 40px rgba(0,0,0,0.45);
  --ax-shadow-drop:    0 16px 40px rgba(0,0,0,0.55);
  --ax-danger-bright:   #FF7A7B;   /* texto de error sobre fondo oscuro */
  --ax-danger-bright-2: #FF9A9B;
  --ax-viewer-bg:       #181818;   /* fondo alrededor de la vista previa del PDF */
}
:root[data-theme="claro"] {
  --ax-danger-line-22: rgba(126,16,17,0.30);
  --ax-danger-line-25: rgba(126,16,17,0.34);
  --ax-danger-line-28: rgba(126,16,17,0.36);
  --ax-danger-line-40: rgba(126,16,17,0.40);
  --ax-danger-line-45: rgba(126,16,17,0.45);
  --ax-warm-line-45:   rgba(85,54,0,0.40);
  --ax-accent-a01: rgba(0,68,34,0.02);
  --ax-accent-a025: rgba(0,68,34,0.03);
  --ax-accent-a04: rgba(0,68,34,0.05);
  --ax-accent-a05: rgba(0,68,34,0.06);
  --ax-accent-a06: rgba(0,68,34,0.08);
  --ax-accent-a08: rgba(0,68,34,0.09);
  --ax-accent-a15: rgba(0,68,34,0.14);
  --ax-accent-a30: rgba(0,68,34,0.32);
  --ax-accent-a35: rgba(0,68,34,0.36);
  --ax-accent-a60: rgba(0,68,34,0.55);
  --ax-scrim-62:       rgba(20,20,18,0.42);
  --ax-shadow-modal:   0 24px 60px rgba(20,20,18,0.28);
  --ax-shadow-toast:   0 10px 28px rgba(20,20,18,0.24);
  --ax-shadow-pop:     0 10px 32px rgba(20,20,18,0.22);
  --ax-shadow-drop:    0 12px 32px rgba(20,20,18,0.26);
  --ax-danger-bright:   var(--ax-danger);
  --ax-danger-bright-2: var(--ax-danger);
  --ax-viewer-bg:       #BEBEB8;
}
:root[data-theme="claro"][data-gris="medio"] {
  --ax-accent-a01: rgba(0,58,29,0.02);
  --ax-accent-a025: rgba(0,58,29,0.03);
  --ax-accent-a04: rgba(0,58,29,0.05);
  --ax-accent-a05: rgba(0,58,29,0.06);
  --ax-accent-a06: rgba(0,58,29,0.08);
  --ax-accent-a08: rgba(0,58,29,0.09);
  --ax-accent-a15: rgba(0,58,29,0.14);
  --ax-accent-a30: rgba(0,58,29,0.32);
  --ax-accent-a35: rgba(0,58,29,0.36);
  --ax-accent-a60: rgba(0,58,29,0.55);
  --ax-viewer-bg:       #B0B0AA;
}

/* `.ax button { color: inherit }` (0,1,1) le gana a `.ax-btn--primary` (0,1,0): en oscuro ya se
   quedaba así; en claro el texto del botón principal tiene que usar su token o no se lee. */
:root[data-theme="claro"] .ax .ax-btn--primary { color: var(--ax-on-accent); }