/* QuizGal — tema visual ---------------------------------------------------
   Todo el color del proyecto vive aqui. Los tres HTML (tele, admin y movil)
   cargan este archivo, asi que cambiar un local de aspecto es tocar este
   fichero y nada mas.

   COMO ESTA ORGANIZADO
   1. Paleta base: los colores que define un tema. Es lo que se cambia.
   2. Tripletes RGB: los mismos colores en crudo, para poder usarlos con
      transparencia — rgba(var(--gold-rgb), 0.12). CSS no sabe sacar el RGB
      de un #hex, de ahi la duplicidad.
   3. Derivados: velos, sombras y veladuras calculados desde lo anterior.
      Un tema normalmente no los toca.
   4. Medidas: radios y sombras. No son color pero acompañan al estilo.

   HAY TRES FAMILIAS DE DORADO, y no son la misma desviada:
   - gold*  : el dorado de interfaz, apagado y elegante. Bordes, textos,
              etiquetas. Es el tono dominante.
   - hover* : mas saturado, solo para el :hover de los botones.
   - win*   : el dorado de victoria, el mas vivo. Podio, medalla, ganador y
              primera fila de liga. Tiene que cantar mas que el resto.
   Si se unifican, el podio deja de destacar sobre una tarjeta cualquiera.

   LO QUE NO ES TEMATICO Y NO DEBE MOVERSE DE AQUI:
   - El blanco del fondo de los QR: un QR necesita blanco y negro reales para
     que la camara lo lea. Teñirlo rompe el escaneo.
   - El negro de las mask-image: no es un color, es una mascara de opacidad.
   Ambos se quedan literales en el CSS de cada archivo, con su comentario.  */

:root{
  /* ---- 1. Paleta base ---------------------------------------------- */
  --bg:#14110C;                 /* fondo de pagina */
  --surface:#211B12;            /* tarjetas */
  --surface-raised:#2E2517;     /* tarjetas sobre tarjetas, campos */
  --surface-highlight:#3B2E1B;  /* fila destacada, estado activo */

  --cream:#F3EAD2;              /* texto principal */
  --muted:#A99A7D;              /* texto secundario */
  --ink:#241A0C;                /* texto oscuro sobre fondo dorado */

  --gold:#C9A66C;               /* dorado de interfaz */
  --gold-bright:#E8C98A;        /* su version clara */
  --gold-dim:#8C7444;           /* su version apagada, bordes */
  --gold-hover:#DDAC44;         /* fondo del boton al pasar por encima */

  --win:#E8C15A;               /* dorado de victoria */
  --win-deep:#B08A34;          /* su sombra, para degradados metalicos */
  --win-edge:#C9A24B;          /* su borde */

  --ok:#3FAE6B;                 /* acierto */
  --ok-bright:#6EC96E;          /* acierto, texto sobre oscuro */
  --ok-surface:#28422E;         /* fondo de acierto */
  --ink-ok:#1A2016;             /* texto oscuro sobre fondo verde */

  --fail:#C24B42;               /* fallo, como FONDO del boton de sancion */
  --fail-bright:#CC6861;        /* fallo, como TEXTO sobre fondo oscuro */
  --fail-surface:#3A2323;       /* fondo de fallo */

  --warn:#D68A3D;               /* aviso */

  /* ---- 2. Tripletes RGB (para transparencias) ----------------------- */
  --bg-rgb:20,17,12;            /* velos y degradados que se funden al fondo */
  --scrim-rgb:16,12,7;           /* cortinas casi opacas (descanso, modales) */
  --gold-rgb:201,166,108;
  --hover-rgb:201,162,75;       /* tintes suaves del hover */
  --win-rgb:232,193,90;
  --ok-rgb:63,174,107;          /* el mismo tono que --ok */
  --ok-glow-rgb:92,154,107;     /* resplandor verde de la tele, mas apagado */
  --ok-surface-rgb:40,70,48;    /* fondo verde oscuro translucido */
  --fail-rgb:180,69,59;
  --fail-surface-rgb:70,36,36;  /* fondo rojo oscuro translucido */
  --veil-rgb:255,255,255;       /* el velo claro que levanta una superficie */
  --shadow-rgb:0,0,0;

  /* ---- 3. Derivados -------------------------------------------------- */
  --rule:rgba(243,234,210,0.14);          /* linea divisoria */
  --veil-weak:rgba(var(--veil-rgb),0.04); /* fondo de tarjeta sobre oscuro */
  --veil:rgba(var(--veil-rgb),0.08);      /* su borde superior */
  --veil-soft:rgba(var(--veil-rgb),0.07);
  --veil-strong:rgba(var(--veil-rgb),0.35);

  /* Cortinas: la pantalla de descanso y los modales se superponen a lo que
     haya debajo, y conviene que tapen casi del todo sin ser negro plano. */
  --scrim:rgba(var(--scrim-rgb),0.92);
  --scrim-deep:rgba(var(--scrim-rgb),0.97);
  --fade-out:rgba(var(--bg-rgb),0);       /* extremo transparente de un fundido */
  --fade-in:rgba(var(--bg-rgb),1);        /* su extremo solido */

  /* ---- 4. Tipografia -------------------------------------------------- */
  /* Las familias se declaran en fonts.css; aqui se decide que papel juega
     cada una, que es lo que un tema cambia. */
  --font-eyebrow:'Cinzel',Georgia,serif;          /* etiquetas en mayusculas */
  --font-display:'Cormorant Garamond',Georgia,serif; /* titulos y cifras grandes */
  --font-body:'Work Sans',"Segoe UI",sans-serif;  /* todo lo demas */

  /* ---- 5. Medidas ---------------------------------------------------- */
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-soft:0 2px 12px rgba(var(--shadow-rgb),0.35);
  --shadow-raised:0 8px 28px rgba(var(--shadow-rgb),0.45);
  --shadow-deep:0 14px 40px rgba(var(--shadow-rgb),0.5);

  /* Compatibilidad: nombres que ya usaba el CSS antes de centralizar esto. */
  --crimson:var(--fail);
  --crimson-bright:var(--fail-bright);
  --green-ok:var(--ok);
  --brass:var(--gold);
  --brass-dim:var(--gold-dim);
}

/* El panel de control es una herramienta de trabajo, no un escaparate: menos
   dorado decorativo, esquinas mas cerradas y mas contraste para leer rapido
   con poca luz. Hereda el tema del local, pero rebajado. */
body.admin{
  --brass:var(--cream);
  --brass-dim:var(--rule);
  --rule:rgba(243,234,210,0.16);
  --radius-sm:8px;
  --radius-md:12px;
  --radius:12px;
}

/* =========================================================================
   TEMAS
   Se activan con data-tema en el <html>:
       document.documentElement.dataset.tema = 'concurso';
   Sin atributo manda Templo oscuro, el de serie.

   Cada tema fija colores Y tipografias. Las familias se declaran en
   fonts.css; aqui solo se decide cual juega cada papel.

   Los tripletes *-rgb van obligatoriamente junto a su color: si cambias
   --gold y olvidas --gold-rgb, los fondos translucidos se quedan con el
   dorado viejo y el tema sale a medio tenir.

   --fail-bright existe porque --fail hace dos trabajos opuestos: texto rojo
   sobre fondo oscuro, y fondo del boton de sancion con texto crema encima.
   Aclarar uno estropea el otro, asi que van separados. El claro es el que
   se usa como texto, y es el que tiene que pasar el contraste.
   ========================================================================= */

/* --- Taberna: Madera y ambar. Para sitios donde tambien se come. --- */
[data-tema="taberna"]{
  --font-eyebrow:'Vollkorn',Georgia,serif;
  --font-display:'Vollkorn',Georgia,serif;
  --font-body:'Lato',"Segoe UI",sans-serif;
  --bg:#1A1310;
  --bg-rgb:26,19,16;
  --surface:#2A1F19;
  --surface-raised:#3A2C23;
  --surface-highlight:#4A392C;
  --cream:#F5E9DC;
  --muted:#B59C85;
  --ink:#2A1A0A;
  --gold:#D98E4A;
  --gold-rgb:217,142,74;
  --gold-bright:#F0B277;
  --gold-dim:#966030;
  --gold-hover:#E8A055;
  --hover-rgb:232,160,85;
  --win:#F2B544;
  --win-rgb:242,181,68;
  --win-deep:#B07A1E;
  --win-edge:#D99A36;
  --ok:#6FA552;
  --ok-rgb:111,165,82;
  --ok-bright:#91C470;
  --fail:#C4503C;
  --fail-rgb:196,80,60;
  --fail-bright:#CE6F5E;
  --warn:#E0A030;
  --scrim-rgb:26,19,16;
  --ok-glow-rgb:111,165,82;
  --ok-surface-rgb:45,60,38;
  --fail-surface-rgb:70,36,30;
}

/* --- Pizarra: Verde botella y laton. Pub ingles, sobrio y serio. --- */
[data-tema="pizarra"]{
  --font-eyebrow:'Playfair Display',Georgia,serif;
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Lora',Georgia,serif;
  --bg:#0F1512;
  --bg-rgb:15,21,18;
  --surface:#18211C;
  --surface-raised:#223029;
  --surface-highlight:#2E4036;
  --cream:#E8EDE6;
  --muted:#8FA396;
  --ink:#101710;
  --gold:#B99A5E;
  --gold-rgb:185,154,94;
  --gold-bright:#D8BC84;
  --gold-dim:#7D673C;
  --gold-hover:#CBA85F;
  --hover-rgb:203,168,95;
  --win:#D9BC6A;
  --win-rgb:217,188,106;
  --win-deep:#8F7636;
  --win-edge:#B89B51;
  --ok:#4FA86E;
  --ok-rgb:79,168,110;
  --ok-bright:#74C68F;
  --fail:#B85449;
  --fail-rgb:184,84,73;
  --fail-bright:#C47168;
  --warn:#CC9144;
  --scrim-rgb:8,12,10;
  --ok-glow-rgb:79,168,110;
  --ok-surface-rgb:34,58,42;
  --fail-surface-rgb:62,34,30;
}

/* --- Garito: Condensado y caneero. Rock y cerveza. --- */
[data-tema="garito"]{
  --font-eyebrow:'Oswald',"Segoe UI",sans-serif;
  --font-display:'Oswald',"Segoe UI",sans-serif;
  --font-body:'Barlow Condensed',"Segoe UI",sans-serif;
  --bg:#121212;
  --bg-rgb:18,18,18;
  --surface:#1C1C1C;
  --surface-raised:#282828;
  --surface-highlight:#363636;
  --cream:#F0F0F0;
  --muted:#9A9A9A;
  --ink:#121212;
  --gold:#E04B32;
  --gold-rgb:224,75,50;
  --gold-bright:#FF7A5F;
  --gold-dim:#8F2E1E;
  --gold-hover:#FF5E42;
  --hover-rgb:255,94,66;
  --win:#F5B841;
  --win-rgb:245,184,65;
  --win-deep:#A8761C;
  --win-edge:#D9A033;
  --ok:#5BC236;
  --ok-rgb:91,194,54;
  --ok-bright:#84DB63;
  --fail:#E03B5A;
  --fail-rgb:224,59,90;
  --fail-bright:#E3536E;
  --warn:#F09A1E;
  --scrim-rgb:10,10,10;
  --ok-glow-rgb:91,194,54;
  --ok-surface-rgb:30,58,24;
  --fail-surface-rgb:64,26,34;
}

/* --- Neon: Magenta y cian sobre azul noche. Musica en directo. --- */
[data-tema="neon"]{
  --font-eyebrow:'Orbitron',"Segoe UI",sans-serif;
  --font-display:'Orbitron',"Segoe UI",sans-serif;
  --font-body:'Rajdhani',"Segoe UI",sans-serif;
  --bg:#0B0A14;
  --bg-rgb:11,10,20;
  --surface:#151327;
  --surface-raised:#211E3A;
  --surface-highlight:#2E2A50;
  --cream:#EDEBF7;
  --muted:#8E88B0;
  --ink:#0B0A14;
  --gold:#E0479E;
  --gold-rgb:224,71,158;
  --gold-bright:#FF7FC4;
  --gold-dim:#8A2E62;
  --gold-hover:#FF5FB0;
  --hover-rgb:255,95,176;
  --win:#4FD6E8;
  --win-rgb:79,214,232;
  --win-deep:#1F8A99;
  --win-edge:#3BBBCC;
  --ok:#4FD69B;
  --ok-rgb:79,214,155;
  --ok-bright:#72E8B5;
  --fail:#E8486B;
  --fail-rgb:232,72,107;
  --fail-bright:#E8486B;
  --warn:#E8A33D;
  --scrim-rgb:11,10,20;
  --ok-glow-rgb:79,214,155;
  --ok-surface-rgb:28,60,48;
  --fail-surface-rgb:60,24,36;
}

/* --- Estadio: Verde cesped y blanco. Bar deportivo. --- */
[data-tema="estadio"]{
  --font-eyebrow:'Anton',"Segoe UI",sans-serif;
  --font-display:'Anton',"Segoe UI",sans-serif;
  --font-body:'Roboto Condensed',"Segoe UI",sans-serif;
  --bg:#0D1711;
  --bg-rgb:13,23,17;
  --surface:#15241A;
  --surface-raised:#1E3325;
  --surface-highlight:#2A4533;
  --cream:#F2F7F2;
  --muted:#93AC9B;
  --ink:#0D1711;
  --gold:#3DBE6A;
  --gold-rgb:61,190,106;
  --gold-bright:#6FDB93;
  --gold-dim:#277A44;
  --gold-hover:#4FD47C;
  --hover-rgb:79,212,124;
  --win:#F0C244;
  --win-rgb:240,194,68;
  --win-deep:#A37F1C;
  --win-edge:#D4A733;
  --ok:#3DBE6A;
  --ok-rgb:61,190,106;
  --ok-bright:#6FDB93;
  --fail:#DB4A4A;
  --fail-rgb:219,74,74;
  --fail-bright:#E06161;
  --warn:#E89A33;
  --scrim-rgb:8,14,10;
  --ok-glow-rgb:61,190,106;
  --ok-surface-rgb:26,58,36;
  --fail-surface-rgb:62,28,28;
}

/* --- Costa: Azul atlantico y arena. Marinero, gallego. --- */
[data-tema="costa"]{
  --font-eyebrow:'Abril Fatface',Georgia,serif;
  --font-display:'Abril Fatface',Georgia,serif;
  --font-body:'Karla',"Segoe UI",sans-serif;
  --bg:#0C1620;
  --bg-rgb:12,22,32;
  --surface:#13222F;
  --surface-raised:#1C303F;
  --surface-highlight:#294356;
  --cream:#EFF4F7;
  --muted:#8FA6B5;
  --ink:#0C1620;
  --gold:#4FA3C7;
  --gold-rgb:79,163,199;
  --gold-bright:#7FC8E5;
  --gold-dim:#2F6A85;
  --gold-hover:#5FB5D9;
  --hover-rgb:95,181,217;
  --win:#E8C87A;
  --win-rgb:232,200,122;
  --win-deep:#A08540;
  --win-edge:#CBAA5E;
  --ok:#43B58E;
  --ok-rgb:67,181,142;
  --ok-bright:#6FD2AE;
  --fail:#D9604F;
  --fail-rgb:217,96,79;
  --fail-bright:#DA6554;
  --warn:#E0A050;
  --scrim-rgb:8,14,20;
  --ok-glow-rgb:67,181,142;
  --ok-surface-rgb:24,56,48;
  --fail-surface-rgb:60,30,26;
}

/* --- Setenta: Naranja quemado y mostaza. Retro y redondeado. --- */
[data-tema="setenta"]{
  --font-eyebrow:'Righteous',"Segoe UI",sans-serif;
  --font-display:'Righteous',"Segoe UI",sans-serif;
  --font-body:'Nunito',"Segoe UI",sans-serif;
  --bg:#1C1410;
  --bg-rgb:28,20,16;
  --surface:#2A1E17;
  --surface-raised:#3A2B20;
  --surface-highlight:#4C392B;
  --cream:#F8EDDC;
  --muted:#BBA287;
  --ink:#2A1808;
  --gold:#E07A30;
  --gold-rgb:224,122,48;
  --gold-bright:#F5A45F;
  --gold-dim:#9A4F18;
  --gold-hover:#F08B40;
  --hover-rgb:240,139,64;
  --win:#F0C040;
  --win-rgb:240,192,64;
  --win-deep:#A07818;
  --win-edge:#D0A032;
  --ok:#7FA53C;
  --ok-rgb:127,165,60;
  --ok-bright:#A3C45F;
  --fail:#C94A38;
  --fail-rgb:201,74,56;
  --fail-bright:#D36A5B;
  --warn:#E89A28;
  --scrim-rgb:20,14,10;
  --ok-glow-rgb:127,165,60;
  --ok-surface-rgb:44,58,28;
  --fail-surface-rgb:66,30,24;
}

/* --- Estudio: Gris y azul electrico. Cafeteria moderna, minimal. --- */
[data-tema="estudio"]{
  --font-eyebrow:'Space Grotesk',"Segoe UI",sans-serif;
  --font-display:'Space Grotesk',"Segoe UI",sans-serif;
  --font-body:'Inter',"Segoe UI",sans-serif;
  --bg:#111214;
  --bg-rgb:17,18,20;
  --surface:#1A1C1F;
  --surface-raised:#24272B;
  --surface-highlight:#32363C;
  --cream:#F0F1F3;
  --muted:#9AA0A8;
  --ink:#111214;
  --gold:#5B8DEF;
  --gold-rgb:91,141,239;
  --gold-bright:#8AB0F7;
  --gold-dim:#355694;
  --gold-hover:#6E9BF2;
  --hover-rgb:110,155,242;
  --win:#F0B429;
  --win-rgb:240,180,41;
  --win-deep:#A37A13;
  --win-edge:#D09C22;
  --ok:#3DBD8A;
  --ok-rgb:61,189,138;
  --ok-bright:#66D4A8;
  --fail:#E05260;
  --fail-rgb:224,82,96;
  --fail-bright:#E15563;
  --warn:#E89B35;
  --scrim-rgb:12,13,15;
  --ok-glow-rgb:61,189,138;
  --ok-surface-rgb:26,56,46;
  --fail-surface-rgb:60,28,34;
}

/* --- Cartel: Blanco y negro con un amarillo que grita. Indie, brutalista. --- */
[data-tema="cartel"]{
  --font-eyebrow:'Archivo Black',"Segoe UI",sans-serif;
  --font-display:'Archivo Black',"Segoe UI",sans-serif;
  --font-body:'Archivo',"Segoe UI",sans-serif;
  --bg:#0E0E0E;
  --bg-rgb:14,14,14;
  --surface:#181818;
  --surface-raised:#242424;
  --surface-highlight:#343434;
  --cream:#FAFAFA;
  --muted:#9C9C9C;
  --ink:#0E0E0E;
  --gold:#E8E337;
  --gold-rgb:232,227,55;
  --gold-bright:#F5F170;
  --gold-dim:#8E8A17;
  --gold-hover:#F0EB4F;
  --hover-rgb:240,235,79;
  --win:#E8E337;
  --win-rgb:232,227,55;
  --win-deep:#8E8A17;
  --win-edge:#C4C02B;
  --ok:#3FD17A;
  --ok-rgb:63,209,122;
  --ok-bright:#6EE39E;
  --fail:#FF4D4D;
  --fail-rgb:255,77,77;
  --fail-bright:#FF4D4D;
  --warn:#FFA333;
  --scrim-rgb:8,8,8;
  --ok-glow-rgb:63,209,122;
  --ok-surface-rgb:24,56,38;
  --fail-surface-rgb:62,26,26;
}

/* --- Cabaret: Granate y oro viejo. Art deco, vintage. --- */
[data-tema="cabaret"]{
  --font-eyebrow:'Limelight',Georgia,serif;
  --font-display:'Limelight',Georgia,serif;
  --font-body:'Josefin Sans',"Segoe UI",sans-serif;
  --bg:#15090E;
  --bg-rgb:21,9,14;
  --surface:#231016;
  --surface-raised:#331A22;
  --surface-highlight:#45242F;
  --cream:#F5E6E0;
  --muted:#B5908F;
  --ink:#1A0A0E;
  --gold:#C9A227;
  --gold-rgb:201,162,39;
  --gold-bright:#E8C65A;
  --gold-dim:#8A6E18;
  --gold-hover:#DCB434;
  --hover-rgb:220,180,52;
  --win:#E8C65A;
  --win-rgb:232,198,90;
  --win-deep:#9A7A1E;
  --win-edge:#C4A03C;
  --ok:#4FA877;
  --ok-rgb:79,168,119;
  --ok-bright:#77C79B;
  --fail:#D1455E;
  --fail-rgb:209,69,94;
  --fail-bright:#D5566D;
  --warn:#DB9A3A;
  --scrim-rgb:16,8,11;
  --ok-glow-rgb:79,168,119;
  --ok-surface-rgb:26,54,40;
  --fail-surface-rgb:62,26,34;
}

/* --- Verbena: Turquesa y coral. Terraza de verano, informal. --- */
[data-tema="verbena"]{
  --font-eyebrow:'Pacifico',"Segoe UI",sans-serif;
  --font-display:'Pacifico',"Segoe UI",sans-serif;
  --font-body:'Quicksand',"Segoe UI",sans-serif;
  --bg:#0E1A1C;
  --bg-rgb:14,26,28;
  --surface:#15272A;
  --surface-raised:#1E373B;
  --surface-highlight:#2B4C51;
  --cream:#EFF8F8;
  --muted:#8FB0B3;
  --ink:#0E1A1C;
  --gold:#FF7A66;
  --gold-rgb:255,122,102;
  --gold-bright:#FFA594;
  --gold-dim:#A34436;
  --gold-hover:#FF8E7C;
  --hover-rgb:255,142,124;
  --win:#FFD166;
  --win-rgb:255,209,102;
  --win-deep:#AD8A26;
  --win-edge:#E0B445;
  --ok:#3FC9B0;
  --ok-rgb:63,201,176;
  --ok-bright:#6FE0CB;
  --fail:#F0545E;
  --fail-rgb:240,84,94;
  --fail-bright:#F05761;
  --warn:#FFB03A;
  --scrim-rgb:10,18,20;
  --ok-glow-rgb:63,201,176;
  --ok-surface-rgb:22,58,54;
  --fail-surface-rgb:64,26,30;
}

/* --- Concurso: Azul profundo y oro. El concurso de la tele de toda la vida. --- */
[data-tema="concurso"]{
  --font-eyebrow:'Bebas Neue',"Segoe UI",sans-serif;
  --font-display:'Bebas Neue',"Segoe UI",sans-serif;
  --font-body:'Source Sans 3',"Segoe UI",sans-serif;
  --bg:#070B1C;
  --bg-rgb:7,11,28;
  --surface:#0E1530;
  --surface-raised:#172046;
  --surface-highlight:#232F63;
  --cream:#F2F4FF;
  --muted:#8E96C4;
  --ink:#070B1C;
  --gold:#F0C041;
  --gold-rgb:240,192,65;
  --gold-bright:#FFD972;
  --gold-dim:#9A7818;
  --gold-hover:#FFD04F;
  --hover-rgb:255,208,79;
  --win:#FFD972;
  --win-rgb:255,217,114;
  --win-deep:#A88423;
  --win-edge:#E0B544;
  --ok:#3FC46F;
  --ok-rgb:63,196,111;
  --ok-bright:#6FDE97;
  --fail:#E8405C;
  --fail-rgb:232,64,92;
  --fail-bright:#E8445F;
  --warn:#F0A033;
  --scrim-rgb:5,8,20;
  --ok-glow-rgb:63,196,111;
  --ok-surface-rgb:22,56,38;
  --fail-surface-rgb:58,24,34;
}

/* --- Marquesina: Rojo teatro y bombillas. El cartel luminoso de la entrada. --- */
[data-tema="marquesina"]{
  --font-eyebrow:'Alfa Slab One',Georgia,serif;
  --font-display:'Alfa Slab One',Georgia,serif;
  --font-body:'Nunito Sans',"Segoe UI",sans-serif;
  --bg:#160A0A;
  --bg-rgb:22,10,10;
  --surface:#241010;
  --surface-raised:#351919;
  --surface-highlight:#4A2323;
  --cream:#FFF2E8;
  --muted:#C09A90;
  --ink:#190A08;
  --gold:#FFB83D;
  --gold-rgb:255,184,61;
  --gold-bright:#FFD27A;
  --gold-dim:#A6701A;
  --gold-hover:#FFC757;
  --hover-rgb:255,199,87;
  --win:#FFD27A;
  --win-rgb:255,210,122;
  --win-deep:#A8812A;
  --win-edge:#DBAE4C;
  --ok:#58BF6B;
  --ok-rgb:88,191,107;
  --ok-bright:#82D894;
  --fail:#E8453F;
  --fail-rgb:232,69,63;
  --fail-bright:#E8453F;
  --warn:#FFA62E;
  --scrim-rgb:16,7,7;
  --ok-glow-rgb:88,191,107;
  --ok-surface-rgb:28,56,34;
  --fail-surface-rgb:66,26,24;
}

/* --- Encerado: Pizarra de bar y tiza. Escrito a mano, como el menu del dia. --- */
[data-tema="encerado"]{
  --font-eyebrow:'Caveat',"Segoe UI",sans-serif;
  --font-display:'Caveat',"Segoe UI",sans-serif;
  --font-body:'Patrick Hand',"Segoe UI",sans-serif;
  --bg:#1B211F;
  --bg-rgb:27,33,31;
  --surface:#252D2A;
  --surface-raised:#323B38;
  --surface-highlight:#434E4A;
  --cream:#F2F5F0;
  --muted:#A3AEA8;
  --ink:#1B211F;
  --gold:#F5E9C8;
  --gold-rgb:245,233,200;
  --gold-bright:#FFFBEC;
  --gold-dim:#9A9076;
  --gold-hover:#FFF4D9;
  --hover-rgb:255,244,217;
  --win:#F5D76E;
  --win-rgb:245,215,110;
  --win-deep:#A38C2E;
  --win-edge:#D4BB55;
  --ok:#7FCF8A;
  --ok-rgb:127,207,138;
  --ok-bright:#A5E3AD;
  --fail:#E8766E;
  --fail-rgb:232,118,110;
  --fail-bright:#E8766E;
  --warn:#F0BE6B;
  --scrim-rgb:18,22,21;
  --ok-glow-rgb:127,207,138;
  --ok-surface-rgb:38,62,44;
  --fail-surface-rgb:66,36,34;
}

/* --- Recreativa: Pixel y fosforito sobre negro. Salon recreativo de los ochenta. --- */
[data-tema="recreativa"]{
  --font-eyebrow:'Press Start 2P',"Segoe UI",sans-serif;
  --font-display:'Press Start 2P',"Segoe UI",sans-serif;
  --font-body:'Rajdhani',"Segoe UI",sans-serif;
  --bg:#07070F;
  --bg-rgb:7,7,15;
  --surface:#101024;
  --surface-raised:#1A1A38;
  --surface-highlight:#282852;
  --cream:#EFEFFF;
  --muted:#8A8AB8;
  --ink:#07070F;
  --gold:#FFE347;
  --gold-rgb:255,227,71;
  --gold-bright:#FFF185;
  --gold-dim:#A39019;
  --gold-hover:#FFEB66;
  --hover-rgb:255,235,102;
  --win:#4FFFD1;
  --win-rgb:79,255,209;
  --win-deep:#1C9E84;
  --win-edge:#3BDBB4;
  --ok:#4FFF77;
  --ok-rgb:79,255,119;
  --ok-bright:#8BFFA5;
  --fail:#FF4F7A;
  --fail-rgb:255,79,122;
  --fail-bright:#FF4F7A;
  --warn:#FFA347;
  --scrim-rgb:5,5,12;
  --ok-glow-rgb:79,255,119;
  --ok-surface-rgb:20,62,32;
  --fail-surface-rgb:62,20,36;
}

/* --- Trivial: Azul tablero y los colores de las categorias. Juego de mesa clasico. --- */
[data-tema="trivial"]{
  --font-eyebrow:'Bitter',Georgia,serif;
  --font-display:'Bitter',Georgia,serif;
  --font-body:'Cabin',"Segoe UI",sans-serif;
  --bg:#0D1424;
  --bg-rgb:13,20,36;
  --surface:#152038;
  --surface-raised:#1F2D4E;
  --surface-highlight:#2C3F69;
  --cream:#EEF2FA;
  --muted:#90A0BE;
  --ink:#0D1424;
  --gold:#E8A33D;
  --gold-rgb:232,163,61;
  --gold-bright:#FFC472;
  --gold-dim:#9A6618;
  --gold-hover:#F5B351;
  --hover-rgb:245,179,81;
  --win:#F0D04F;
  --win-rgb:240,208,79;
  --win-deep:#A38A1E;
  --win-edge:#D0B23C;
  --ok:#43B86B;
  --ok-rgb:67,184,107;
  --ok-bright:#6FD494;
  --fail:#D94B5C;
  --fail-rgb:217,75,92;
  --fail-bright:#DE6170;
  --warn:#E89A33;
  --scrim-rgb:9,14,26;
  --ok-glow-rgb:67,184,107;
  --ok-surface-rgb:24,56,38;
  --fail-surface-rgb:60,26,32;
}

/* --- Bingo: Terciopelo y oro. Sala de bingo, un punto kitsch. --- */
[data-tema="bingo"]{
  --font-eyebrow:'Shrikhand',"Segoe UI",sans-serif;
  --font-display:'Shrikhand',"Segoe UI",sans-serif;
  --font-body:'Cabin',"Segoe UI",sans-serif;
  --bg:#17091A;
  --bg-rgb:23,9,26;
  --surface:#241029;
  --surface-raised:#331A3A;
  --surface-highlight:#47264F;
  --cream:#F8EDF8;
  --muted:#B695BC;
  --ink:#17091A;
  --gold:#E8B33D;
  --gold-rgb:232,179,61;
  --gold-bright:#FFD173;
  --gold-dim:#9A7318;
  --gold-hover:#F5C251;
  --hover-rgb:245,194,81;
  --win:#FFD173;
  --win-rgb:255,209,115;
  --win-deep:#A8822A;
  --win-edge:#DBB24C;
  --ok:#52BF84;
  --ok-rgb:82,191,132;
  --ok-bright:#7FD8A6;
  --fail:#E8456F;
  --fail-rgb:232,69,111;
  --fail-bright:#E8456F;
  --warn:#F0A33D;
  --scrim-rgb:17,7,19;
  --ok-glow-rgb:82,191,132;
  --ok-surface-rgb:24,56,42;
  --fail-surface-rgb:62,24,38;
}

/* =========================================================================
   ACCESIBILIDAD (solo en el movil del capitan)
   Son ajustes del DISPOSITIVO, no del local: se guardan en el propio movil y
   no tocan el tema que ha elegido el bar ni lo que ven los demas.

   Por que estos dos y no un selector de temas: los motivos reales por los que
   alguien necesita cambiar algo en su movil durante un quiz no son esteticos.
   Son que no distingue el verde del rojo, o que el bar esta a oscuras y lleva
   el brillo al minimo. Un selector de temas no arregla ninguno de los dos y
   si rompe la imagen de marca del local.
   ========================================================================= */

/* Alto contraste: sube el texto a blanco puro, aclara el secundario y marca
   mas los bordes. No cambia la paleta del local, solo la legibilidad. */
body.a11y-contraste{
  --cream:#FFFFFF;
  --muted:#D8D8D8;
  --rule:rgba(255,255,255,0.34);
  --veil-weak:rgba(255,255,255,0.09);
  --veil:rgba(255,255,255,0.16);
}
body.a11y-contraste .opt-btn{ border-width:2px; }
body.a11y-contraste .card, body.a11y-contraste .ms-card{ border-width:2px; }

/* Formas: acierto y fallo dejan de depender solo del color. Alrededor del 8%
   de los hombres tiene algun tipo de daltonismo, y el verde/rojo es justo el
   par que peor distinguen. Se anade un simbolo delante. */
body.a11y-formas .opt-btn.ok-correct::before{ content:'✓ '; font-weight:900; }
body.a11y-formas .opt-btn.ok-wrong::before{ content:'✗ '; font-weight:900; }
body.a11y-formas .opt-btn.ok-correct{ outline:2px solid var(--ok-bright); outline-offset:-4px; }
body.a11y-formas .opt-btn.ok-wrong{ outline:2px dashed var(--crimson-bright); outline-offset:-4px; }