/* ============================================================================
   GCCC-Track · Tokens de diseño
   Comprehensive Cancer Centre Galicia · Servizo Galego de Saúde
   Base normativa: Manual de Identidade Corporativa da Xunta de Galicia
   GaeliKA Innovación S.L. · v1.0 · 2026-09-01
   ----------------------------------------------------------------------------
   REGLA: ningún componente puede declarar un color literal. Todo pasa por aquí.
   ========================================================================== */

:root {
  /* --- Marca institucional (valores oficiales del manual de identidad) ----- */
  --xunta-azul:            #007BC4;   /* CMYK 100 35 0 0 · Pantone 7461 C · RAL 5015 */
  --xunta-azul-profundo:   #002B4A;   /* CMYK 100 80 45 45 · Pantone 7463 C · RAL 5011 */
  --xunta-azul-50:         #80BDE2;   /* tinta 50 % */
  --xunta-azul-25:         #BFDEF0;   /* tinta 25 % */
  --xunta-azul-10:         #E6F2FA;   /* tinta 10 % */
  --branco:                #FFFFFF;

  /* --- Marcas asociadas (solo para la franja institucional del pie) -------- */
  --xacobeo-vermello:      #AF0E2C;
  --xacobeo-gris:          #4D4D4D;

  /* --- Neutros ------------------------------------------------------------ */
  --neutro-950: #0F1B26;
  --neutro-900: #16232F;
  --neutro-800: #24333F;
  --neutro-700: #3A4A57;
  --neutro-600: #55656F;
  --neutro-500: #6B7785;
  --neutro-400: #9AA5B1;
  --neutro-300: #C7CFD6;
  --neutro-200: #E1E7EB;
  --neutro-100: #F0F4F7;
  --neutro-050: #F7FAFC;

  /* --- Superficies y texto (modo claro por defecto) ----------------------- */
  --fondo:              var(--neutro-050);
  --superficie:         var(--branco);
  --superficie-alt:     var(--neutro-100);
  --superficie-marca:   var(--xunta-azul);
  --borde:              var(--neutro-200);
  --borde-fuerte:       var(--neutro-300);
  --texto:              var(--neutro-900);
  --texto-suave:        var(--neutro-600);
  --texto-tenue:        var(--neutro-500);
  --texto-sobre-marca:  var(--branco);
  --acento:             var(--xunta-azul);
  --acento-hover:       #0068A8;
  --foco:               #0A84FF;

  /* --- Estados de cumplimiento EUnetCCC ----------------------------------- */
  --estado-cumple:        #1F7A4D;
  --estado-cumple-bg:     #E4F3EB;
  --estado-avanzado:      #4A8FD4;
  --estado-avanzado-bg:   #E6F0FA;
  --estado-parcial:       #C98A20;
  --estado-parcial-bg:    #FBF1DE;
  --estado-nocumple:      #B4342B;
  --estado-nocumple-bg:   #FAE8E6;
  --estado-sinvalorar:    #6B7785;
  --estado-sinvalorar-bg: #EEF1F4;

  /* --- Prioridades -------------------------------------------------------- */
  --prio-p1: #B4342B;
  --prio-p2: #C98A20;
  --prio-p3: #4A8FD4;
  --prio-p4: #6B7785;

  /* --- Distintivo CORE ---------------------------------------------------- */
  --core-borde: var(--xunta-azul-profundo);
  --core-texto: var(--xunta-azul-profundo);
  --core-fondo: var(--xunta-azul-10);

  /* --- Tipografía --------------------------------------------------------- */
  --fuente-base: "Xunta Sans", "Source Sans 3", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: 2.441rem;
  --fs-h1:      1.953rem;
  --fs-h2:      1.563rem;
  --fs-h3:      1.25rem;
  --fs-body:    1rem;
  --fs-small:   0.8rem;
  --fs-caption: 0.64rem;

  --lh-titular: 1.25;
  --lh-texto:   1.5;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* --- Espaciado (base 4 px) ---------------------------------------------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-12: 3rem;   --sp-16: 4rem;

  /* --- Radios, sombras y disposición -------------------------------------- */
  --radio-tarjeta: 8px;
  --radio-control: 6px;
  --radio-badge:   4px;
  --sombra-1: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --sombra-2: 0 4px 12px rgba(0,0,0,.10);
  --ancho-max: 1440px;
  --altura-cabecera: 64px;
  --ancho-nav-lateral: 264px;

  /* --- Movimiento --------------------------------------------------------- */
  --trans-rapida: 120ms ease-out;
  --trans-normal: 200ms ease-out;
}

/* ============================ MODO OSCURO ================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo:             var(--neutro-950);
    --superficie:        var(--neutro-900);
    --superficie-alt:    var(--neutro-800);
    --borde:             var(--neutro-800);
    --borde-fuerte:      var(--neutro-700);
    --texto:             var(--neutro-100);
    --texto-suave:       var(--neutro-300);
    --texto-tenue:       var(--neutro-400);
    --acento:            #4FA8E0;
    --acento-hover:      #6FBCEC;

    --estado-cumple:        #4FC98A;  --estado-cumple-bg:     #16382A;
    --estado-avanzado:      #7FB6E8;  --estado-avanzado-bg:   #162A3C;
    --estado-parcial:       #E8B65A;  --estado-parcial-bg:    #3A2F14;
    --estado-nocumple:      #E8756B;  --estado-nocumple-bg:   #3B1D1A;
    --estado-sinvalorar:    #9AA5B1;  --estado-sinvalorar-bg: #232D36;

    --prio-p1: #E8756B; --prio-p2: #E8B65A; --prio-p3: #7FB6E8; --prio-p4: #9AA5B1;
    --core-borde: #7FB6E8; --core-texto: #BFDEF0; --core-fondo: #12283A;
    --sombra-1: 0 1px 3px rgba(0,0,0,.5); --sombra-2: 0 4px 12px rgba(0,0,0,.6);
  }
}

/* Conmutador manual: gana sobre la preferencia del sistema en ambos sentidos */
:root[data-theme="dark"] {
  --fondo:             var(--neutro-950);
  --superficie:        var(--neutro-900);
  --superficie-alt:    var(--neutro-800);
  --borde:             var(--neutro-800);
  --borde-fuerte:      var(--neutro-700);
  --texto:             var(--neutro-100);
  --texto-suave:       var(--neutro-300);
  --texto-tenue:       var(--neutro-400);
  --acento:            #4FA8E0;
  --acento-hover:      #6FBCEC;
  --estado-cumple:        #4FC98A;  --estado-cumple-bg:     #16382A;
  --estado-avanzado:      #7FB6E8;  --estado-avanzado-bg:   #162A3C;
  --estado-parcial:       #E8B65A;  --estado-parcial-bg:    #3A2F14;
  --estado-nocumple:      #E8756B;  --estado-nocumple-bg:   #3B1D1A;
  --estado-sinvalorar:    #9AA5B1;  --estado-sinvalorar-bg: #232D36;
  --prio-p1: #E8756B; --prio-p2: #E8B65A; --prio-p3: #7FB6E8; --prio-p4: #9AA5B1;
  --core-borde: #7FB6E8; --core-texto: #BFDEF0; --core-fondo: #12283A;
  --sombra-1: 0 1px 3px rgba(0,0,0,.5); --sombra-2: 0 4px 12px rgba(0,0,0,.6);
}

/* ==================== PATRONES PARA NO DEPENDER DEL COLOR ================== */
/* WCAG 2.2 · 1.4.1: el estado nunca se transmite solo con color.             */
.patron-cumple    { background-image: none; }
.patron-avanzado  { background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,.28) 6px 8px); }
.patron-parcial   { background-image: repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,.32) 5px 7px); }
.patron-nocumple  { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.34) 4px 6px); }
.patron-sinvalorar{ background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px); background-size: 6px 6px; }

/* ============================ BASE ======================================== */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-base);
  font-size: var(--fs-body);
  line-height: var(--lh-texto);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { line-height: var(--lh-titular); margin: 0 0 var(--sp-3); }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
p  { max-width: 75ch; }
a  { color: var(--acento); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--radio-badge); }
.tabular { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}