/* «176» · dirección 2, Plató (elegida por Daniel el 7/10/2026). Móvil primero. */
:root{
  --fondo:#0c0e13; --panel:#151922; --panel2:#1a1f29; --linea:#2a2f3a;
  --texto:#f2f2f2; --suave:#a3a9b4; --tenue:#6f7682; --acento:#e3262f; --ok:#f2f2f2;
  --ancho:1200px; --margen:16px;
  --display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --letra:'Barlow', 'Segoe UI', sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--letra);font-size:17px;line-height:1.5;padding-bottom:64px}
a{color:inherit}
img,svg{max-width:100%}
.w{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)}

/* cinta de borrador (solo en las versiones de prueba) */
.borrador{background:#f5c518;color:#111;font-weight:700;text-align:center;padding:6px 10px;font-size:14px}

/* cabecera */
.cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 10px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.marca img{width:38px;height:38px;border-radius:50%}
.marca b{font-family:var(--display);font-weight:800;font-size:44px;line-height:.8;letter-spacing:-1px}
.marca span{display:block;font-size:13px;color:var(--suave);font-weight:600;line-height:1.2}
.reloj{text-align:right;font-family:var(--display);font-weight:700;line-height:.9}
.reloj b{font-size:46px;display:block}
.reloj span{font-size:14px;color:var(--suave)}
nav.menu{display:flex;gap:4px;overflow-x:auto;border-top:3px solid var(--texto);padding:8px 0 10px;scrollbar-width:none}
nav.menu a{font-family:var(--display);font-weight:700;font-size:19px;text-decoration:none;padding:4px 10px;white-space:nowrap;color:var(--suave)}
nav.menu a.on{color:var(--texto);background:var(--panel2)}

/* titulares */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.5px;line-height:.95;margin:0}
h1.gigante{font-size:clamp(52px,13vw,128px);text-align:center;letter-spacing:-2px;margin:18px 0 10px}
h1.pagina{font-size:clamp(42px,9vw,84px);margin:20px 0 8px}
h2{font-size:clamp(32px,6vw,46px);margin:0 0 12px;text-transform:uppercase}
h3{font-size:26px;margin:0 0 6px}
.frase{text-align:center;font-size:19px;color:#d5d9e0;max-width:860px;margin:0 auto 6px}
.entradilla{font-size:19px;color:#d5d9e0;max-width:780px}
.nota{font-size:13px;color:var(--suave);margin:8px 0 0}
.tenue{color:var(--suave)}
section{margin:34px 0}

/* hemiciclo y bloques */
.hemi{max-width:860px;margin:6px auto 0}
.bloques{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;max-width:860px;margin:-2px auto 0}
.bloque{padding:8px 10px 10px;font-family:var(--display);color:#fff;min-width:0}
.bloque b{font-size:clamp(40px,9vw,70px);font-weight:800;line-height:.9;display:block}
.bloque span{font-size:18px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bloque small{display:block;font-size:14px;opacity:.85}
.resto{max-width:860px;margin:8px auto 0;font-size:15px;color:var(--suave)}
.resto i{display:inline-block;width:10px;height:10px;margin-right:4px;border-radius:1px}
.resto span{margin-right:12px;white-space:nowrap}

/* probabilidades: una protagonista y dos secundarias */
.probs{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:22px 0}
.prob{background:var(--panel2);padding:14px 16px;border-left:6px solid var(--texto)}
.prob.uno{grid-column:1 / -1}
.prob b{font-family:var(--display);font-weight:800;font-size:56px;line-height:.9;display:block}
.prob.uno b{font-size:96px}
.prob i{font-style:normal;display:block;color:var(--suave);font-size:15px}
.prob span{display:block;font-size:17px;margin-top:4px}

/* barras de la media */
.barra{display:grid;grid-template-columns:96px 1fr 58px 52px;align-items:center;gap:8px;margin:7px 0;font-weight:600;font-size:16px}
.pista{background:#1f2430;height:22px;display:block}
.pista span{display:block;height:22px}
.barra em{font-style:normal;font-family:var(--display);font-weight:800;font-size:27px;text-align:right}
.barra i{font-style:normal;color:var(--suave);font-size:14px}
.conmuta{display:flex;gap:4px;margin:0 0 12px}
.conmuta button{font-family:var(--display);font-weight:700;font-size:17px;background:var(--panel2);color:var(--suave);border:0;padding:6px 12px;cursor:pointer;border-radius:2px}
.conmuta button.on{background:var(--texto);color:var(--fondo)}
.cis .v-cis{display:none}.con-cis .v-sin{display:none}.con-cis .v-cis{display:inline}

/* rejillas */
.dos{display:grid;grid-template-columns:1fr;gap:28px}
.panel{background:var(--panel);padding:16px}

/* mapas */
.mapa-grande{display:none}
.mapa-chico{display:block}

/* filo */
.filo{list-style:none;padding:0;margin:0}
.filo li{background:var(--panel);margin-bottom:3px;padding:11px 14px;font-size:16px;line-height:1.45}
.filo li a{text-decoration:none}
.filo .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}

/* rótulo de nuevas encuestas */
.rotulo{display:flex;background:var(--texto);color:var(--fondo);font-family:var(--display);font-weight:700;font-size:20px;overflow-x:auto;white-space:nowrap;margin:30px 0;scrollbar-width:none}
.rotulo b{background:var(--acento);color:#fff;padding:9px 14px;position:sticky;left:0}
.rotulo a{padding:9px 18px;border-right:2px solid #c9ccd2;text-decoration:none}

/* tablas */
.tabla{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:8px 6px;text-align:right;border-bottom:1px solid var(--linea);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{font-family:var(--display);font-size:16px;color:var(--suave);font-weight:700}
td.num{font-family:var(--display);font-weight:700;font-size:19px}
td small{display:block;color:var(--suave);font-size:12px}

/* ficha técnica */
details.ficha{background:var(--panel);margin:3px 0;padding:0}
details.ficha summary{cursor:pointer;padding:12px 14px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
details.ficha summary::-webkit-details-marker{display:none}
details.ficha summary span{color:var(--suave);font-weight:400}
details.ficha .dentro{padding:0 14px 14px}
dl{display:grid;grid-template-columns:1fr;gap:2px 16px;margin:0}
dt{color:var(--suave);font-size:13px;margin-top:8px}
dd{margin:0;font-size:15px}
.falta{color:#f5c518}
.sello{display:inline-block;font-size:12px;font-weight:700;padding:2px 6px;border-radius:2px}
.sello.ok{background:#1f6f43;color:#fff}.sello.no{background:#5b4a0f;color:#f5c518}

/* suscripción y compartir */
.suscribe{background:var(--panel2);border-left:6px solid var(--acento);padding:18px;margin:34px 0}
.suscribe h3{font-size:30px}
.suscribe p{margin:6px 0 12px;color:#d5d9e0}
.boton{display:inline-block;background:var(--texto);color:var(--fondo);font-weight:700;text-decoration:none;padding:12px 18px;border-radius:2px;font-size:17px}
.boton.rojo{background:var(--acento);color:#fff}
.compartir{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.compartir a,.compartir button{font-family:var(--letra);font-size:15px;font-weight:700;background:var(--panel2);color:var(--texto);border:0;padding:9px 12px;border-radius:2px;text-decoration:none;cursor:pointer}
.fija{position:fixed;left:0;right:0;bottom:0;background:var(--acento);color:#fff;text-align:center;padding:12px 10px;font-weight:700;text-decoration:none;z-index:9;font-size:16px}

/* pie */
footer{border-top:3px solid var(--texto);margin-top:40px;padding:18px 0 30px;font-size:14px;color:var(--suave)}
footer a{color:var(--texto)}
footer .firma{display:flex;gap:10px;align-items:center;margin-bottom:10px}
footer .firma img{width:44px;height:44px;border-radius:50%}

/* lo último, registro y aciertos */
.ultimo{background:var(--panel);border-top:6px solid var(--texto);padding:16px 18px;margin:26px 0}
.ultimo h2{margin:0 0 2px}
.ultimo .cuando{font-family:var(--display);font-weight:700;font-size:20px;color:var(--suave);margin:0 0 8px}
.ultimo ul{margin:0;padding-left:20px}
.ultimo li{margin:4px 0}
.ultimo .quien{font-style:italic;color:#d5d9e0;margin:10px 0 0}
.ultimo ul.antes{font-size:15px;color:var(--suave)}
.ultimo .mas{display:inline-block;margin-top:10px;font-weight:700}
.entrada{background:var(--panel);padding:14px 16px;margin:3px 0}
.entrada h3{font-size:24px}
.entrada ul{margin:6px 0 0;padding-left:20px}
.entrada li{margin:3px 0}
.nota-lista{background:var(--panel2);border-left:4px solid var(--suave);padding:10px 12px;font-size:15px;max-width:780px}
ul.listas{padding-left:20px}
ul.listas li{margin:8px 0}
.caja-aciertos{background:var(--panel2);padding:18px;border-left:6px solid var(--texto)}

.mayorias .probs{grid-template-columns:1fr}
.mayorias .prob b{font-size:56px}
.prob span strong{font-weight:800}
.fallan .panel p{margin:6px 0}

/* senado: bloques con nombres largos y el medidor de mayorías */
.bloques.sen span{white-space:normal;line-height:1.05}
.tabla.izq th,.tabla.izq td{text-align:left}
.medidor{margin:40px 0 18px}
.medidor .riel{position:relative;height:30px;background:#1f2430}
.medidor .lleno{position:absolute;left:0;top:0;bottom:0}
.medidor .horq{position:absolute;top:-6px;bottom:-6px;border:2px solid var(--texto);opacity:.6}
.medidor .marca{position:absolute;top:-26px;bottom:-4px;border-left:2px dashed var(--texto);padding-left:3px;
  font-family:var(--display);font-weight:700;font-size:15px;line-height:1;color:var(--texto)}

/* veda */
.veda{background:var(--panel2);border:3px solid var(--texto);padding:24px;margin:30px 0;text-align:center}
.veda b{font-family:var(--display);font-size:clamp(44px,10vw,90px);display:block;line-height:.9}

/* los juegos (desde el 20/10/2026): Escañete y la provincia misteriosa. Solo grises y blanco: ningún color de partido */
.caja-juego{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;background:var(--panel);
  border-left:6px solid var(--texto);padding:18px;margin:26px 0}
.caja-juego .mini svg{width:110px;height:auto;display:block}
.caja-juego h2{font-size:30px;margin-bottom:6px}
.caja-juego p{margin:0 0 12px;color:#d5d9e0}
.juego [hidden]{display:none!important}
.juego .escena{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center;margin:10px 0 6px}
.juego .mascota svg{width:130px;height:auto;display:block}
.juego .bocadillo{position:relative;background:var(--texto);color:var(--fondo);font-weight:600;padding:12px 14px;margin:0}
.juego .bocadillo::before{content:"";position:absolute;left:-10px;top:50%;margin-top:-9px;border:9px solid transparent;
  border-right-color:var(--texto);border-left:0}
.juego form.probar{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin:16px 0 4px}
.numero-juego{font-family:var(--display);font-size:24px;white-space:nowrap}
.juego .entrada{font:inherit;font-size:17px;padding:10px 12px;background:var(--panel2);color:var(--texto);
  border:2px solid var(--linea);min-width:0}
.juego .entrada:focus{outline:none;border-color:var(--texto)}
.aviso-juego{min-height:1.4em;margin:2px 0 8px;color:var(--suave);font-size:15px}
.intentos{display:grid;gap:8px;margin:6px 0 18px}
.intento{background:var(--panel);padding:8px 10px}
.intento p{margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:21px}
.intento.vacio{opacity:.45}
.intento.vacio p{margin:0}
.celdas{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.celda{background:var(--panel2);padding:5px 3px;text-align:center;line-height:1.15;min-width:0}
.celda small{display:block;font-size:10px;color:var(--suave);text-transform:uppercase}
.celda span{display:block;font-size:12px;font-weight:600;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.celda b{display:block;font-family:var(--display);font-size:22px;line-height:1.1}
.celda.si{background:var(--texto);color:var(--fondo)}
.celda.si small{color:#3a404c}
.mapa-juego svg{width:100%;max-width:520px;display:block;margin:8px auto 0}
.tesela{cursor:pointer}
.tesela rect{fill:var(--panel2);stroke:var(--linea);stroke-width:1}
.tesela text{fill:var(--suave);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;pointer-events:none}
.tesela:hover rect,.tesela:focus rect{stroke:var(--texto);stroke-width:2}
.tesela:focus{outline:none}
.tesela.probada rect{fill:#3a404c}
.tesela.probada text{fill:var(--tenue);text-decoration:line-through}
.tesela.misteriosa rect{fill:var(--texto)}
.tesela.misteriosa text{fill:var(--fondo)}
.final{background:var(--panel2);border:3px solid var(--texto);padding:16px;margin:10px 0 16px}
.final h3{font-size:34px}
.final pre.muestra{font-family:inherit;font-size:14px;color:var(--suave);white-space:pre-wrap;margin:12px 0 0}
.reglas{margin:16px 0;background:var(--panel);padding:10px 14px}
.reglas summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:21px}
.reglas li{margin:4px 0}

/* escritorio */
@media (min-width:900px){
  .juego .escena{grid-template-columns:190px 1fr}
  .juego .mascota svg{width:190px}
  .caja-juego{grid-template-columns:150px 1fr}
  .caja-juego .mini svg{width:150px}
  body{padding-bottom:0}
  .fija{display:none}
  .cab{padding:20px 0 12px}
  .marca b{font-size:60px}
  .marca img{width:50px;height:50px}
  .reloj b{font-size:72px}
  .bloques{grid-template-columns:repeat(6,1fr)}
  .probs{grid-template-columns:2fr 1fr 1fr}
  .mayorias .probs{grid-template-columns:1fr 1fr}
  .prob.uno{grid-column:auto}
  .dos{grid-template-columns:1fr 1fr;gap:40px}
  .mapa-grande{display:block}
  .mapa-chico{display:none}
  .barra{grid-template-columns:150px 1fr 70px 60px;font-size:17px}
  dl{grid-template-columns:240px 1fr}
  dt{margin-top:0}
}