/* El gráfico del día — mismo sistema visual de Compass. Lo común está en
   kit/kit.css y kit/herramienta.css; aquí va solo lo propio de esta página. */

:root{
  --exacto:#5f8f1f;--cerca:#d9b02c;--tibio:#e08a3c;--lejos:#c9c6bb;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --exacto:#8fc23a;--cerca:#d9b02c;--tibio:#e08a3c;--lejos:#4a524d;
}}
:root[data-theme="dark"]{
  --exacto:#8fc23a;--cerca:#d9b02c;--tibio:#e08a3c;--lejos:#4a524d;
}

/* El juego va en una columna centrada, más angosta que la barra: se juega sin
   mover la vista. */
main>:not(.kit-migas){max-width:800px;margin-left:auto;margin-right:auto}
.hero{padding-top:44px}
.hero h1{font-size:clamp(36px,6.4vw,60px);margin:14px auto 18px}

.juego{margin:32px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sombra);padding:22px clamp(16px,4vw,32px) 28px}
.juego-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted);margin-bottom:10px}
.numero{font-weight:750;color:var(--text);letter-spacing:.02em}

.chart{height:240px}
.chart .linea{fill:none;stroke:var(--c-valor);stroke-width:2;stroke-linejoin:round}
.chart .area{fill:var(--c-valor);opacity:.1}

.pistas{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px;font-size:13.5px}
/* Cada pista lleva un candado mientras está cerrada y una ampolleta al abrirse. */
.pistas li{color:var(--faint);padding-left:24px;position:relative}
.pistas li::before{content:"";position:absolute;left:0;top:.2em;width:15px;height:15px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.pistas li.on{color:var(--text-2)}
.pistas li.on::before{background:var(--olive-text);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.4.3.6.8.6 1.2v1h6v-1c0-.4.2-.9.6-1.2A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E")}

.elegir{margin:22px 0 0;text-align:center}
.elegir-titulo{font:400 24px/1.15 var(--font-display);letter-spacing:-.02em;margin:0 0 12px}
.selector{display:flex;align-items:center;justify-content:center;gap:14px}
.mes-elegido{font:400 clamp(28px,7vw,40px)/1.1 var(--font-display);letter-spacing:-.03em;min-width:8.5ch;text-align:center;font-variant-numeric:tabular-nums}
.mes-elegido::first-letter{text-transform:uppercase}
.paso{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);font:400 26px/1 var(--font-sans);cursor:pointer;padding-bottom:3px}
.paso:hover{border-color:var(--text)}
.rango{width:100%;margin:16px 0 2px;accent-color:var(--olive)}
.rango-anios{display:flex;justify-content:space-between;font-size:11px;color:var(--faint)}
.elegir .button.grande{margin-top:16px}
.aviso-form{margin:8px 0 0;font-size:13px;color:var(--warn-text);min-height:1.5em}

.intentos{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px}
.intentos li{display:grid;grid-template-columns:28px 92px 1fr;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;border:1px solid var(--line);font-size:14px;min-height:42px}
.intentos .cuadro{width:18px;height:18px;border-radius:4px;font-size:0}
.intentos .m{font-weight:700;font-variant-numeric:tabular-nums}
.intentos .m::first-letter{text-transform:uppercase}
.intentos .pista-i{color:var(--text-2)}
.intentos .vacio{color:var(--faint);border-style:dashed}
.intentos .vacio .m{font-weight:400}
.intentos .exacto .cuadro{background:var(--exacto)}
.intentos .cerca .cuadro{background:var(--cerca)}
.intentos .tibio .cuadro{background:var(--tibio)}
.intentos .lejos .cuadro{background:var(--lejos)}
.intentos .exacto{border-color:var(--exacto)}
.leyenda{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:10px 0 0;font-size:12px;color:var(--faint)}
.leyenda span{display:inline-flex;align-items:center;gap:5px}
.leyenda i{width:10px;height:10px;border-radius:3px;background:var(--lejos)}
.leyenda .exacto{background:var(--exacto)}.leyenda .cerca{background:var(--cerca)}.leyenda .tibio{background:var(--tibio)}

.final{margin:22px 0 0;text-align:center;border-top:1px solid var(--line);padding-top:22px}
.final-titulo{font:400 clamp(28px,6vw,38px)/1.1 var(--font-display);letter-spacing:-.03em;margin:0}
.final-titulo::first-letter{text-transform:uppercase}
.final-detalle{color:var(--text-2);font-size:14.5px;max-width:520px;margin:10px auto 0}
.cuadros{display:flex;justify-content:center;gap:6px;margin:14px 0 0}
.cuadros i{width:26px;height:26px;border-radius:6px;background:var(--lejos)}
.cuadros .exacto{background:var(--exacto)}.cuadros .cerca{background:var(--cerca)}.cuadros .tibio{background:var(--tibio)}
.acciones{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.proximo{margin:14px 0 0;font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}

.stats{margin:40px 0 0}
.stats h2{font:400 26px/1.1 var(--font-display);letter-spacing:-.02em;margin:0 0 14px}
.stats h3{font-size:13px;font-weight:700;margin:20px 0 8px}
.stats-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0}
.stats-nums div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.stats-nums dt{font-size:12px;color:var(--muted);order:2}
.stats-nums dd{margin:0;font:400 30px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.stats-nums div{display:flex;flex-direction:column-reverse}
.dist{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:d}
.dist li{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:center;font-size:13px;counter-increment:d}
.dist li::before{content:counter(d);color:var(--muted);text-align:right}
.dist .barra{display:block;background:var(--lejos);color:var(--text);border-radius:4px;padding:2px 8px;text-align:right;font-weight:650;min-width:24px;font-variant-numeric:tabular-nums}
.dist .barra.hoy{background:var(--exacto);color:#fff}
.stats-nota{font-size:12px;color:var(--faint);margin:10px 0 0}

@media (max-width:560px){
  .chart{height:200px}
  .stats-nums{grid-template-columns:repeat(2,1fr)}
  .intentos li{grid-template-columns:22px 80px 1fr;padding:8px 10px;font-size:13px}
}

/* «¿Qué acaba de pasar?»: el término de Aprende que explica la partida. */
.aprendio{margin:18px 0 0;padding:14px 16px;border-left:3px solid var(--olive);border-radius:0 12px 12px 0;background:var(--surface-2);text-align:left}
.aprendio p{margin:0 0 6px;font-size:14.5px;line-height:1.5;color:var(--text-2)}
.aprendio .aprendio-k{font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--olive-text)}
.aprendio a{font-weight:700;color:var(--olive-text);text-decoration:none}
.aprendio a:hover{text-decoration:underline;text-underline-offset:3px}
.aprendio .aprendio-logro{margin:8px 0 0;font-size:13px;color:var(--muted)}