/* ═══ EL TEMA DEL COS (AptoYa, 30-set) ═════════════════════════════════════════════════════════
   Oriol no sap si està fent Policía Nacional o Guardia Civil quan té un vídeo obert: el cos es veu a tot arreu.
   Un sol full de VARIABLES que carreguen totes les pàgines (l'app, el reproductor, els exàmens), abans dels
   altres fulls, i un atribut a <html>: `data-cos="pn"` o `data-cos="gc"`.
     · app/app.js el posa en triar o canviar de cos (`aplicaCos`);
     · examen.html (PN), examen_gc.html i gc_patro.html (GC) el porten escrit, perquè només són d'un cos.
   Sense atribut (o amb un de desconegut) mana PN, que és el de sempre: els mateixos blaus marins.
   Una peça sola també es pot pintar del seu cos amb `data-tema-cos="gc"` (o "pn"): el selector de cos porta cada
   targeta del color del seu cos, sigui quin sigui el que l'app té triat.

   🎨 PN  blau marí:     #002B5E (primari) · #003F8A (mitjà) · #1D4ED8 (accent) · #EAF2FF (fons clar)
   🎨 GC  verds (jade):  #0E4A36 (primari) · #1B6B55 (mitjà) · #067560 (accent) · #E4F0EC (fons clar)

   Contrast (WCAG): blanc sobre el primari, 13,9:1 a PN i 10,2:1 a GC; blanc sobre l'accent, 6,7:1 a PN i 5,6:1 a GC;
   blanc sobre l'accent viu, 5,2:1 als dos; el primari sobre el fons clar, 8,8:1 a GC; l'accent sobre el fons clar,
   4,8:1 a GC. Tot per sobre de 4,5:1 (AA).

   Els colors d'ESTAT no hi són, a posta, i no canvien d'un cos a l'altre: el verd d'encert (#16A34A · #22C55E ·
   #15803D), el vermell d'error (#DC2626 · #B91C1C) i l'or del START (#C8A000). Per això el verd de GC és un jade
   fosc (to 160-168°, llum 17-30 %) i l'encert un verd viu i més groguenc (to 142°, llum 29-45 %): l'un no es
   pren mai per l'altre.

   Cada variable té una sola funció; PN conserva el valor exacte que tenien els fulls abans (res no ha canviat de blau). */
:root, [data-tema-cos="pn"] {
  --blue: #002B5E;        /* primari fosc: capçalera, títols, botons plens, pestanya activa */
  --blue2: #003F8A;       /* primari mitjà: hover, enllaços de text, degradats */
  --blue-deep: #001A3A;   /* el més fosc: fons del login i de les franges de la capçalera de l'examen */
  --acc: #1D4ED8;         /* accent: vores actives, caixa de la llei, enllaços d'acció, anell de focus */
  --acc2: #2563EB;        /* accent viu: el play del reproductor i la veu triada */
  --acc-l: #93C5FD;       /* accent clar: l'anell d'un vídeo vist */
  --panel: #0F2C57;       /* targeta fosca: pòster de la galeria, segell final, celebració */
  --tint: #EAF2FF;        /* fons molt clar d'una pastilla o d'una fila activa */
  --tint2: #F4F8FF;       /* fons encara més clar: fila sota el ratolí */
  --tint3: #EEF4FF;       /* fons clar dels botons de document i de la previsió */
  --tint-h: #DCE8FB;      /* el mateix, sota el ratolí */
  --vora: #C9DAF6;        /* vora clara d'una targeta sota el ratolí */
  --vora-m: #D8E3F5;      /* vora mitjana dels botons de document */
  --vora2: #E6EDF7;       /* vora de les targetes */
  --nav-hover: #E8EFF9;   /* fons de l'ítem del menú sota el ratolí */
  --on-ov: #E8EEF7;       /* lletra clara damunt el fons fosc del reproductor */
  --bg: #F1F5F9;         /* fons de la pàgina */
  --gris-1: #F1F5F9; --gris-2: #E2E8F0; --gris-3: #94A3B8; --gris-4: #475569;   /* els grisos: fons, vora, apagat, text secundari */
  --blue-rgb: 0, 43, 94;
  --panel-rgb: 15, 44, 87;
  --ov-rgb: 2, 18, 46;    /* el fons fosc translúcid del reproductor i de les finestres */
  --acc-rgb: 29, 78, 216;
  --acc2-rgb: 37, 99, 235;

  /* tokens de disseny tintats amb el cos (6-oct): ombres sense negre pur i vel; els de la resta són a `:root` més avall */
  --sh-1: 0 1px 3px rgba(0, 43, 94, .10), 0 2px 8px rgba(0, 43, 94, .06);   /* única ombra suau: targetes, botons, barra */
  --sh-sm: 0 2px 8px rgba(0, 43, 94, .14), 0 1px 2px rgba(0, 43, 94, .10);
  --sh-lg: 0 18px 48px rgba(0, 43, 94, .28), 0 4px 12px rgba(0, 43, 94, .14);
  --veu: rgba(2, 18, 46, .55);        /* el vel de tots els pop-ups */
  --veu-fort: rgba(2, 18, 46, .72);   /* NOMÉS vídeo i PDF */
}

/* ═══ TOKENS DE DISSENY DELS POP-UPS (6-oct): un sol lloc, iguals a PN i GC (les ombres i el vel són més amunt, a cada cos) ═══ */
:root {
  --r-sm: 8px;            /* xips, camps petits, etiquetes */
  --r-btn: 12px;          /* botons i targetes petites */
  --r-pill: 999px;        /* pastilles */
  --r-pop: 16px;          /* pop-ups, fulls i toasts */
  --t-fast: 150ms; --t-base: 220ms; --t-slow: 320ms;
  --ease: cubic-bezier(.2, 0, 0, 1);              /* estàndard */
  --ease-emph: cubic-bezier(.2, .9, .25, 1.15);   /* emfàtica: arriba i s'asseu */
  --start: #F2C94C;       /* EMPEZAR: l'únic groc (botó CTA) */
  --start-h: #E8BD35;     /* el mateix, sota el ratolí */
  --start-vora: #C8A000;  /* vora / ombra de l'or */
  --start-fort: #B45309;  /* l'ambre fosc de l'or: números, vores i premut del groc */
  --start-clar: #FDE68A;  /* groc suau: vora d'una nota, títol groc del beat */
  --start-fons: #FFFBEB;  /* fons molt clar d'una nota groga */
  --start-tinta: #78350F; /* lletra fosca damunt del groc suau */
  --ok: #16A34A; --ok-fort: #15803D; --ok-fons: #DCFCE7; --ok-fons2: #F0FDF4; --ok-vora: #86EFAC; --ok-vora2: #BBF7D0;   /* encert: no canvia amb el cos */
  --ko: #DC2626; --ko-fort: #B91C1C; --ko-fons: #FEE2E2; --ko-fons2: #FEF2F2; --ko-vora: #FCA5A5;                       /* error: no canvia amb el cos */
  --z-base: 10;           /* contingut elevat */
  --z-pop: 120;           /* pop-ups, fulls i vels */
  --z-top: 200;           /* toasts i el que va per sobre de tot */
  --pop-titol: 19px;      /* títol d'un pop-up */
}

html[data-cos="gc"], [data-tema-cos="gc"] {
  --blue: #0E4A36;
  --blue2: #1B6B55;
  --blue-deep: #072B1F;
  --acc: #067560;
  --acc2: #087B66;
  --acc-l: #7FC7B4;
  --panel: #0B3B2B;
  --tint: #E4F0EC;
  --tint2: #F1F7F5;
  --tint3: #ECF4F1;
  --tint-h: #D5E6DF;
  --vora: #B9D5CB;
  --vora-m: #CFE0D8;
  --vora2: #DCE9E3;
  --nav-hover: #E1EDE8;
  --on-ov: #E3EFEA;
  --bg: #F0F6F3;
  --gris-1: #EFF4F2; --gris-2: #DDE7E3; --gris-3: #8FA89F; --gris-4: #455A52;
  --blue-rgb: 14, 74, 54;
  --panel-rgb: 11, 59, 43;
  --ov-rgb: 4, 28, 20;
  --acc-rgb: 6, 117, 96;
  --acc2-rgb: 8, 123, 102;
  --sh-1: 0 1px 3px rgba(14, 74, 54, .10), 0 2px 8px rgba(14, 74, 54, .06);
  --sh-sm: 0 2px 8px rgba(14, 74, 54, .14), 0 1px 2px rgba(14, 74, 54, .10);
  --sh-lg: 0 18px 48px rgba(14, 74, 54, .28), 0 4px 12px rgba(14, 74, 54, .14);
  --veu: rgba(4, 28, 20, .55);
  --veu-fort: rgba(4, 28, 20, .72);
}

/* ═══ REDUIR MOVIMENT, A TOT ARREU (6-oct): UNA regla global per a totes les pàgines (l'app, el reproductor, els exàmens) ═══
   Qui té «reduir moviment» no veu cap animació ni transició: els keyframes acaben a l'acte (l'estat final es queda, `forwards` i `both` hi són) i els pop-ups es treuen sense sortida
   (`AptoBotons.surt`). Cada animació té a més la seva guarda pròpia al seu full; aquesta és la xarxa per a les que se'n puguin afegir. L'únic que queda és l'avís de vídeo dominat, que
   només fa un fonut d'opacitat (sense moviment) i s'acabaria sense veure's. */
@media (prefers-reduced-motion: reduce) {
  *:not(.vid-toast), *:not(.vid-toast)::before, *:not(.vid-toast)::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}