/* ══ Tema compartido: claro (por defecto) y oscuro ═══════════════════════════════════════════
   Lo usan index.html, entrar.html, app.html e invitacion.html. tablero.html tiene sus propios
   nombres de tokens (--ground, --accent…) pero los mismos VALORES; si se cambia un color acá,
   cambiarlo también allá.

   Paleta «Azul hondo y durazno» (30/09, la misma de cabina.com.ar). Los tokens conservan los
   nombres viejos: --jade ES EL AZUL y --ambar ES EL DURAZNO. El oscuro es «Pizarra cálida»:
   carbón tibio; ahí --jade es el azul ACLARADO (texto) y el botón (--btn-bg) sigue azul hondo.

   Dos familias de acento:
     --jade / --ambar             → versión "para texto": AA sobre fondo y paneles.
     --jade-viva / --ambar-viva   → versión vívida: rellenos con texto oscuro, barras, brillos.
   En oscuro las dos versiones coinciden.

   El tema se elige con el atributo data-theme en <html>, que pone un script inline en el <head>
   de cada página (antes del primer pintado) leyendo localStorage "tema". Sin nada guardado es
   claro: NO se sigue prefers-color-scheme, por decisión de producto.                        */
:root{
  color-scheme:light;
  --fondo:#F5F7F8; --panel:#FFFFFF; --panel2:#EAEFF2; --panel3:#FFFFFF;
  --borde:#DCE3E8; --borde2:#C2CDD5;
  --tinta:#14232E; --tinta2:#4B5A64; --tinta3:#5E6C76;
  --jade:#1F5A73; --jade2:#17475C; --jade-viva:#5FA8C8; --jade-viva2:#A9D3E5; --jade-rgb:31,90,115; --jade-viva-rgb:95,168,200;
  --ambar:#A65536; --ambar-viva:#E08E6D; --ambar-rgb:166,85,54; --ambar-viva-rgb:224,142,109;
  --sobre-jade:#07141B; --sobre-ambar:#2B1408;
  --btn-bg:var(--jade); --btn-tx:#FFFFFF; --btn-hover:var(--jade2);
  --resalte:var(--ambar);
  --azul:#3F63D8; --violeta:#7A4FD0; --rosa:#D9455C;
  --etq-bg:#E6ECFF; --etq-tx:#3450C8; --etqd-bg:#EFE8FF; --etqd-tx:#6B3FC4;
  --wa-bg:#DCF8E6; --wa-tx:#10331F;
  --tinte-a:#FBF0EA; --tinte-b:#E7EFF3;
  --header-bg:rgba(245,247,248,.82);
  --sombra:0 24px 60px -30px rgba(20,35,46,.28), 0 2px 6px rgba(20,35,46,.06);
  --sombra-tar:0 1px 2px rgba(20,35,46,.06), 0 1px 1px rgba(20,35,46,.04);
  --sombra-agarrada:0 18px 34px -12px rgba(20,35,46,.45);
  --sombra-cursor:drop-shadow(0 2px 3px rgba(20,35,46,.45));
  --cursor-borde:#14232E;
  --etapa-s:55%; --etapa-l:86%; --etapa-tx:#14232E; --col-punto-s:60%; --col-punto-l:42%;
  --glow-a:rgba(31,90,115,.14); --glow-b:rgba(224,142,109,.16);
  --theme-color:#F5F7F8;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --radio:16px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --fondo:#171A1C; --panel:#1E2124; --panel2:#25292C; --panel3:#2C3134;
  --borde:#33383C; --borde2:#464C51;
  --tinta:#ECE8E4; --tinta2:#A9A39D; --tinta3:#8E8882;
  --jade:#8CC3DA; --jade2:#A9D3E5; --jade-viva:#6FA9C4; --jade-viva2:#A9D3E5; --jade-rgb:140,195,218; --jade-viva-rgb:111,169,196;
  --ambar:#E59A78; --ambar-viva:#E59A78; --ambar-rgb:229,154,120; --ambar-viva-rgb:229,154,120;
  --sobre-jade:#0E1A20; --sobre-ambar:#2B1408;
  --btn-bg:#2F7797; --btn-tx:#FFFFFF; --btn-hover:#286A87;
  --resalte:var(--ambar);
  --azul:#6C8EF5; --violeta:#B08CF7; --rosa:#F07A8A;
  --etq-bg:rgba(108,142,245,.16); --etq-tx:#AFC2FF; --etqd-bg:rgba(176,140,247,.16); --etqd-tx:#D3C2FF;
  --wa-bg:#1F3A2E; --wa-tx:#DFF5E8;
  --tinte-a:#1C1E20; --tinte-b:#1A1D1F;
  --header-bg:rgba(23,26,28,.72);
  --sombra:0 40px 90px -40px #000, 0 0 0 1px rgba(255,255,255,.02) inset;
  --sombra-tar:none;
  --sombra-agarrada:0 18px 34px -12px rgba(0,0,0,.9);
  --sombra-cursor:drop-shadow(0 2px 3px rgba(0,0,0,.6));
  --cursor-borde:#171A1C;
  --etapa-s:40%; --etapa-l:30%; --etapa-tx:#ECE8E4; --col-punto-s:65%; --col-punto-l:62%;
  --glow-a:rgba(111,169,196,.10); --glow-b:rgba(229,154,120,.08);
  --theme-color:#171A1C;
}

/* Al cambiar de tema, los colores se funden. La clase la pone tema.js y la saca al terminar. */
body.cambiando, body.cambiando *, body.cambiando *::before, body.cambiando *::after{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, fill .35s ease, stroke .35s ease !important}

/* El botón de tema: sol en claro, luna en oscuro. Mismo markup en todas las páginas. */
.tema{width:36px;height:36px;border-radius:50%;border:1px solid var(--borde2);background:var(--panel);color:var(--tinta2);
      display:grid;place-items:center;cursor:pointer;padding:0;flex-shrink:0;transition:color .15s,border-color .15s,background .15s}
.tema:hover{color:var(--tinta);border-color:var(--tinta3)}
.tema:focus-visible{outline:2px solid var(--jade);outline-offset:3px}
.tema svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tema .luna{display:none}
:root[data-theme="dark"] .tema .sol{display:none}
:root[data-theme="dark"] .tema .luna{display:block}
/* En las pantallas sin barra (entrar, invitación) el botón flota arriba a la derecha. */
.tema.flotante{position:fixed;top:14px;right:14px;z-index:30}

@media (prefers-reduced-motion: reduce){
  body.cambiando, body.cambiando *, body.cambiando *::before, body.cambiando *::after{transition:none !important}
}