/* ============================================================
   marca.css — capa compartida de kinegalvez.com
   Una sola fuente de verdad para color, tipografía y retícula.
   Cada página enlaza este archivo y solo escribe lo suyo.

   Dos temas sobre los MISMOS nombres de token:
     por defecto      → páginas de herramienta (fondo hueso)
     [data-tema=plano]→ portada y futuras portadas (fondo azul)
   Un componente escrito una vez funciona en los dos.

   Los ratios anotados fueron calculados con la fórmula WCAG 2.1.
   Piso obligatorio: 4.5:1 en texto, 3:1 en bordes de control,
   indicadores de foco y elementos gráficos con significado.
   ============================================================ */

/* ------------------------------------------------------------
   Fuentes autoalojadas en /fonts/ (licencia OFL 1.1, textos en
   /fonts/OFL-*.txt).
     Geist Titulo  → Geist Black estática. Se declara para todo el rango
                     de pesos, de modo que cualquier regla de título la
                     muestra en Black sin engrosado sintético, igual que
                     hacía Archivo Black.
     Geist         → variable 100–900, cuerpo y bajadas.
     KG Rotulo Condensado → Mona Sans Condensed 2.0.27 (GitHub) en tres
                     archivos estáticos: Regular, Medium y SemiBold,
                     recortados al alfabeto latino. Kickers, contadores,
                     unidades, encabezados de tabla, botones DOI.
                     (23-09-2026) Reemplaza al archivo variable derivado,
                     que Safari dibujaba en su peso por defecto (200) y
                     cuyos anchos no crecían con el peso. Queda en
                     /fonts/_retiradas/. Cada archivo cubre un tramo de
                     pesos para que ningún navegador sintetice negritas.
   font-display:swap muestra el texto de inmediato con la fuente de
   sistema y lo reemplaza al llegar la definitiva: nunca hay pantalla
   en blanco esperando la tipografía.
   ------------------------------------------------------------ */
@font-face{font-family:"Geist Titulo";src:url("/fonts/Geist-Black.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"KG Rotulo Condensado";src:url("/fonts/MonaSansCondensed-Regular.woff2") format("woff2");font-weight:100 449;font-style:normal;font-display:swap}
@font-face{font-family:"KG Rotulo Condensado";src:url("/fonts/MonaSansCondensed-Medium.woff2") format("woff2");font-weight:450 549;font-style:normal;font-display:swap}
@font-face{font-family:"KG Rotulo Condensado";src:url("/fonts/MonaSansCondensed-SemiBold.woff2") format("woff2");font-weight:550 900;font-style:normal;font-display:swap}

:root{
  /* ---- Marca: valores fijos, nunca cambian entre temas ---- */
  --marca-azul:#123a5e;
  --marca-azul-claro:#2a6fa8;
  --marca-cian:#6fc3e8;
  --marca-hueso:#ede3d0;
  --marca-ambar:#e5a33c;
  --marca-blanco:#ffffff;

  /* ---- Tipografía ---- */
  --tipo-titulo:"Geist Titulo","Geist",Helvetica,Arial,sans-serif;
  --tipo-texto:"Geist","Segoe UI",Helvetica,Arial,sans-serif;
  --tipo-dato:"KG Rotulo Condensado","Arial Narrow","Geist",sans-serif;

  /* ---- Geometría ---- */
  --radio:2px;
  --reticula-paso:26px;
  --reticula-paso-mayor:130px;

  /* ---- Transiciones ---- */
  --transicion-rapida:0.15s cubic-bezier(0.2, 0, 0, 1);
  --transicion-normal:0.2s cubic-bezier(0.2, 0, 0, 1);

  /* ============ TEMA CLARO (herramientas) ============ */
  --superficie-base:#ede3d0;
  --superficie-alta:#f7f2e8;

  --texto:#123a5e;                    /*  9.20:1 → AAA */
  --texto-medio:rgba(18,58,94,.80);   /*  5.51:1 → AA  */
  --texto-tenue:rgba(18,58,94,.76);   /*  4.96:1 → AA  */

  --linea:rgba(18,58,94,.26);         /* separadores decorativos */
  --linea-suave:rgba(18,58,94,.14);
  --linea-control:rgba(18,58,94,.62); /*  3.51:1 → cumple 1.4.11 */
  --grafico-neutro:rgba(18,58,94,.62);/*  3.51:1 → barra sin veredicto */

  --reticula:rgba(18,58,94,.055);
  --reticula-fuerte:rgba(18,58,94,.11);

  --accion:#2a6fa8;                   /*  4.19:1 → relleno de botón y borde,
                                         NUNCA texto sobre fondo claro */
  --accion-hover:#23608f;
  --rotulo:#256293;                   /*  kicker sobre claro = acción texto, 5.08:1 */
  --accion-texto:#256293;             /*  5.08:1 → AA. El azul de acción cuando
                                         va como texto: enlaces, botón fantasma */
  --acento:#e5a33c;                   /* SOLO fondo o filete. Como texto
                                         sobre claro da 1.71:1: prohibido. */
  --foco-interior:#e5a33c;            /* el ámbar de marca, recuperado */
  --foco-exterior:#123a5e;            /*  9.20:1 → es este anillo el que
                                         cumple 1.4.11; el ámbar viaja
                                         dentro de él, legible a 5.38:1 */

  --senal:#0f6a57;                    /*  5.12:1 → AA */
  --senal-tinte:rgba(15,106,87,.10);
  --precaucion:#8a5a15;               /*  4.64:1 → AA */
  --precaucion-tinte:rgba(229,163,60,.16);
  --critico:#8a2e2e;                  /*  6.57:1 → AA */
  --critico-tinte:rgba(138,46,46,.10);

  /* ---- Gráficos: color por función del dato ----------------------
     Validados con el verificador de paletas (claridad, croma, visión
     de color defectuosa y contraste ≥ 3:1 sobre hueso, #f7f2e8 y
     blanco). Nunca se usan como texto: el texto de un gráfico va en
     --texto, --texto-medio o --texto-tenue.
     Categórica de dos series (ascenso/descenso, basal/actual):     */
  --dato-1:#2a6fa8;                   /* azul clínico · serie principal     */
  --dato-2:#b06f12;                   /* paso oscuro del ámbar de marca     */
  --dato-lavado-1:rgba(42,111,168,.12);
  --dato-lavado-2:rgba(176,111,18,.14);
  /* Categórica de tres planos anatómicos (ΔE mín. 21,9 en protanopía).
     El cian no llega a 3:1: va siempre con trazo discontinuo, leyenda
     y tabla de valores como codificación secundaria.               */
  --dato-v:#1d5a8f;                   /* vertical                           */
  --dato-ap:#b06f12;                  /* anteroposterior                    */
  --dato-ml:#4aa8d0;                  /* mediolateral                       */
  /* Ordinal de un solo tono para niveles 0 · 1 · 2 (CAS).           */
  --nivel-0:#8aafd3;                  /* 2,06:1 sobre #f7f2e8 → piso ordinal */
  --nivel-1:#4a7fb4;
  --nivel-2:#163f66;
  --tinta-sobre-nivel:#ffffff;        /* texto dentro de las celdas 1 y 2   */
  --papel:#ffffff;                    /* fondo del informe impreso          */

  /* ---- Sombras ---- */
  --sombra-bajo:0 2px 8px rgba(18, 58, 94, 0.06);
  --sombra-medio:0 8px 16px rgba(18, 58, 94, 0.12);
  --sombra-alto:0 16px 24px rgba(18, 58, 94, 0.16);
}

/* ============ TEMA PLANO (portada) ============ */
[data-tema="plano"]{
  --superficie-base:#123a5e;
  --superficie-alta:#1b5183;
  --plano-profundo:#0a2440;

  --texto:#ffffff;                        /* 11.72:1 → AAA */
  --texto-fuerte:rgba(237,227,208,.92);   /*  8.04:1 sobre #123a5e · 5.74:1 sobre #1b5183 */
  --texto-medio:rgba(237,227,208,.88);    /*  7.50:1 · 5.40:1 (antes .84) */
  --texto-tenue:rgba(237,227,208,.80);    /*  6.48:1 · 4.76:1 (antes cian .82,
                                             que bajaba a 4.35:1 en el degradado) */
  --rotulo:#6fc3e8;                       /*  5.94:1 sobre #123a5e: kickers en cian */

  --linea:rgba(111,195,232,.26);
  --linea-suave:rgba(111,195,232,.14);
  --linea-control:rgba(111,195,232,.55);
  --grafico-neutro:rgba(237,227,208,.60);

  --reticula:rgba(111,195,232,.07);
  --reticula-fuerte:rgba(111,195,232,.15);

  --accion:#e5a33c;
  --accion-hover:#f0b559;
  --accion-texto:#e5a33c;/* sobre azul el ámbar sí es texto legible (5.38:1) */
  --acento:#e5a33c;      /* sobre azul rinde 5.38:1: aquí sí puede ser texto */
  --foco-interior:#e5a33c;  /*  5.38:1 sobre azul → cumple solo */
  --foco-exterior:transparent;

  /* Estados legibles sobre azul (visores). Ratios sobre --panel apoyado en #123a5e. */
  --senal:#8fd3b5;                        /*  8.70:1 */
  --senal-tinte:rgba(143,211,181,.12);
  --precaucion:#f0c27a;                   /*  9.09:1 */
  --precaucion-tinte:rgba(240,194,122,.12);
  --critico:#f0a08a;                      /*  7.23:1 */
  --critico-tinte:rgba(240,160,138,.14);

  /* Velos y paneles sobre la retícula */
  --velo:rgba(10,36,64,.52);
  --velo-fuerte:rgba(10,36,64,.75);
  --panel:rgba(10,36,64,.84);
  --panel-opaco:rgba(10,36,64,.96);
  --tinte-ambar:rgba(229,163,60,.14);
  --tinte-azul:rgba(42,111,168,.28);
  --tinte-blanco:rgba(255,255,255,.045); /* fondo de tarjeta sobre la retícula */
  --sombra-texto:0 2px 14px rgba(10,36,64,.95),0 0 4px rgba(10,36,64,.8);

  /* Sombras en tema oscuro */
  --sombra-bajo:0 2px 8px rgba(0, 0, 0, 0.2);
  --sombra-medio:0 8px 16px rgba(0, 0, 0, 0.28);
  --sombra-alto:0 16px 24px rgba(0, 0, 0, 0.36);
}

/* ------------------------------------------------------------
   Base común
   ------------------------------------------------------------ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background-color:var(--superficie-base);
  color:var(--texto);
  font-family:var(--tipo-texto);
  font-size:15.5px;
  font-weight:400;
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* La retícula: un solo gesto, dos sustratos. Se dibuja aquí y ninguna
   página vuelve a declararla. */
.reticula{
  background-image:
    linear-gradient(to right, var(--reticula) 1px, transparent 1px),
    linear-gradient(to bottom, var(--reticula) 1px, transparent 1px),
    linear-gradient(to right, var(--reticula-fuerte) 1px, transparent 1px),
    linear-gradient(to bottom, var(--reticula-fuerte) 1px, transparent 1px);
  background-size:
    var(--reticula-paso) var(--reticula-paso),
    var(--reticula-paso) var(--reticula-paso),
    var(--reticula-paso-mayor) var(--reticula-paso-mayor),
    var(--reticula-paso-mayor) var(--reticula-paso-mayor);
  background-attachment:fixed;
}

h1,h2,.titulo{
  font-family:var(--tipo-titulo);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1.1;
  color:var(--texto);
}

.etiqueta{
  font-family:var(--tipo-dato);
  font-weight:500;
  letter-spacing:.02em;
  color:var(--texto-medio);
}

/* Foco: una sola regla para todo el sitio, en los dos temas. */
/* Anillo doble: ámbar por dentro, azul por fuera. El azul es el que
   garantiza el 3:1 contra el fondo; el ámbar conserva la firma de marca.
   Sobre el tema plano el exterior es transparente y queda solo el ámbar. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--foco-interior);
  outline-offset:1px;
  box-shadow:0 0 0 4px var(--foco-exterior);
}

/* Transiciones globales para elementos interactivos */
:where(a,button,input,select,textarea,summary,[tabindex]){
  transition:var(--transicion-normal);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
  }
}