/* Basecourt · claro y oscuro (12 de octubre de 2026).

   La web abre siempre en oscuro. El interruptor de la cabecera pone
   data-tema="claro" en <html> y lo guarda en ese navegador; un script de una
   línea en el <head> de cada página lo recupera antes de pintar, para que no
   parpadee.

   El claro no trae colores nuevos: es la misma paleta dada la vuelta, con los
   valores medidos para la app (app/design-system/tokens.ts). Por eso aquí
   --tinta es «el fondo» y --tiza «lo que se escribe encima», en los dos temas.
   El cian de marca (--voz) no cambia nunca y vale para formas; sobre claro, la
   letra y el trazo fino usan --voz-texto, que sí se lee.

   Lo que en oscuro es un tramo claro (--claro-*) en claro se da la vuelta y
   pasa a ser un tramo de tinta. */
:root{
  color-scheme:dark;
  --voz-texto:#00C2D6;
  --tinta-rgb:11 12 14;
  --tiza-rgb:242 244 245;
  --cristal:rgba(20,22,24,.82);
  --cristal-menu:rgba(20,22,24,.94);
  --cristal-borde:rgba(255,255,255,.08);
  --roce:rgba(255,255,255,.06);
  --filete:rgba(255,255,255,.09);
  --sombra:rgba(0,0,0,.45);
  --sombra-suave:rgba(0,0,0,.25);
  --tenue:#626A72;
  --error:#FFB3A0;
  --error-borde:rgba(255,179,160,.75);
  --apunte-borde:#4A5058;
  --apunte-texto:#D5DADE;
  --oficial-borde:#3A3F45;
  --claro-cuerpo:#20262B;
  --claro-tenue:#8A9198;
  --claro-borde-fuerte:#C9CDD1;
}
:root[data-tema="claro"]{
  color-scheme:light;
  --tinta:#F2F4F5;
  --superficie:#FFFFFF;
  --alta:#E4E7EA;
  --borde:#D8DCDF;
  --tiza:#0B0C0E;
  --media:#5A6169;
  --apagada:#61676E;
  --voz-texto:#00717D;
  --listo:#137538;
  --revisar:#A44C08;

  --claro:#0B0C0E;
  --claro-sup:#141618;
  --claro-borde:#2A2E33;
  --claro-media:#9AA1A8;
  --claro-apagada:#7C848C;
  --claro-voz:#00C2D6;
  --claro-listo:#22C55E;
  --claro-revisar:#F59E0B;
  --claro-cuerpo:#D5DADE;
  --claro-tenue:#7C848C;
  --claro-borde-fuerte:#3A3F45;

  --tinta-rgb:242 244 245;
  --tiza-rgb:11 12 14;
  --cristal:rgba(255,255,255,.86);
  --cristal-menu:rgba(255,255,255,.96);
  --cristal-borde:rgba(11,12,14,.1);
  --roce:rgba(11,12,14,.05);
  --filete:rgba(255,255,255,0);
  --sombra:rgba(11,12,14,.13);
  --sombra-suave:rgba(11,12,14,.06);
  --tenue:#A3A9AF;
  --error:#C81E1E;
  --error-borde:rgba(200,30,30,.6);
  --apunte-borde:#AEB4BA;
  --apunte-texto:#2B3036;
  --oficial-borde:#C4C9CE;
}

/* --- el interruptor: un solo dibujo. En oscuro es una luna; en claro, el
       disco se encoge, deja de estar mordido y le salen los rayos. El borde
       es del color de la letra: blanco en oscuro, negro en claro. --- */
.tema{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;padding:0;
  border:1px solid var(--tiza);border-radius:12px;background:transparent;color:var(--tiza);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .2s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.tema:hover{background:var(--roce)}
.tema:active{transform:scale(.94)}
.tema svg{width:20px;height:20px;display:block;overflow:visible}
.tema .disco{fill:currentColor;transform-origin:12px 12px;transform:scale(1.7);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.tema .corte{transform:translate(5.5px,-5px);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.tema .rayos{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;transform-origin:12px 12px;
  transform:rotate(-70deg) scale(.3);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .25s ease}
[data-tema="claro"] .tema .disco{transform:none}
[data-tema="claro"] .tema .corte{transform:translate(15px,-11px)}
[data-tema="claro"] .tema .rayos{transform:none;opacity:1}
@media(min-width:960px){.barra .tema{width:40px;height:40px;border-radius:10px}}
/* En la página de acceso no hay cabecera: va suelto en la esquina. */
.tema.esquina{position:absolute;top:clamp(20px,4vh,40px);right:clamp(20px,5vw,64px);z-index:5}

/* --- el cambio: el tema nuevo se abre en círculo desde el interruptor
       (lo anima tema.js). Donde el navegador no sabe hacerlo, un fundido. --- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.tema-fundido,.tema-fundido *,.tema-fundido *::before,.tema-fundido *::after{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease,box-shadow .35s ease !important}
@media (prefers-reduced-motion:reduce){
  .tema,.tema .disco,.tema .corte,.tema .rayos{transition:none}
}