/* ¡Pásala, pollito! — estilos v1.0 (2026-10-28, #0728).
   Contrastes medidos con scripts/contraste.py (PALETA_PASALA.md, sección del pollito). */
:root {
    --fondo: #1a0b3d;
    --panel: #2a1450;
    --panel-borde: #4b2a8a;
    --texto: #ffffff;
    --texto-suave: #d9ccf5;
    --oro: #ffd34d;
    --boton: #fbbf24;
    --boton-texto: #1f2024;
    --violeta: #7a1ee0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--texto); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { overflow: hidden; overscroll-behavior: none; }
.marco { position: relative; width: 100%; max-width: 540px; height: 100dvh; margin: 0 auto; overflow: hidden; background: #000; }
#lienzo { display: block; width: 100%; height: 100%; touch-action: none; }

.hud { position: absolute; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: max(.5rem, env(safe-area-inset-top)) .6rem .5rem; background: linear-gradient(rgba(20,8,46,.88), rgba(20,8,46,0)); pointer-events: none; }
.hud > div { display: flex; align-items: center; gap: .4rem; }
.hud-izq { flex-direction: column; align-items: flex-start !important; gap: 0 !important; line-height: 1.15; }
.hud-izq strong { font-size: 1rem; }
.hud-izq span { font-size: .78rem; color: var(--texto-suave); }
.hud-centro { flex-direction: column; gap: 0 !important; }
#hud-puntos { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.vidas { color: #ff5a7a; letter-spacing: .1em; font-size: 1rem; }
.redondo { pointer-events: auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--panel-borde); background: var(--panel); color: var(--texto); font-size: 1rem; cursor: pointer; }

.pantalla { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.2rem 16px; overflow-y: auto; }
.pantalla[hidden], .hud[hidden], .anuncio-prueba[hidden] { display: none; }
.portada { justify-content: space-between; background: url("../img/menu-fondo.webp") center / cover no-repeat, var(--fondo); }
.portada-txt { text-align: center; padding-top: 4vh; }
.portada h1 { margin: 0; font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1; color: var(--oro);
    text-shadow: 0 4px 0 #7a1ee0, 0 6px 18px rgba(0,0,0,.55); font-weight: 900; letter-spacing: -.01em; }
.sub { margin: .7rem auto 0; max-width: 22rem; font-weight: 700; background: rgba(26,11,61,.78); border-radius: 999px; padding: .35rem .9rem; display: inline-block; }
.aviso { margin: .6rem auto 0; background: var(--panel); color: var(--oro); display: inline-block; padding: .3rem .8rem; border-radius: 8px; font-size: .85rem; }
.botones { display: flex; flex-direction: column; gap: .6rem; background: rgba(26,11,61,.86); border-radius: 18px; padding: 1rem; }
.btn { font: inherit; font-weight: 800; font-size: 1.05rem; min-height: 3rem; padding: .7rem 1rem; border-radius: 14px; border: 2px solid var(--panel-borde);
    background: var(--panel); color: var(--texto); cursor: pointer; transition: transform .08s; }
.btn:active { transform: scale(.97); }
.btn.principal { background: var(--boton); color: var(--boton-texto); border-color: #f59e0b; box-shadow: 0 4px 0 #b45309; }
.btn:focus-visible, .redondo:focus-visible, .mundo-btn:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.mejor { margin: .2rem 0 0; text-align: center; color: var(--oro); font-weight: 700; min-height: 1.2em; }
.tabla-pronto { margin: 0; text-align: center; color: var(--texto-suave); font-size: .9rem; }
.legal { text-align: center; color: var(--texto-suave); font-size: .85rem; }

.panel { background: rgba(20,8,46,.94); gap: .7rem; }
.panel.centro { justify-content: center; align-items: stretch; text-align: center; }
.panel h2 { margin: 0; font-size: 1.6rem; color: var(--oro); }
.nota { margin: 0; color: var(--texto-suave); font-size: .92rem; }
.reglas { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; line-height: 1.45; }
.detalle { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 20rem; display: grid; gap: .3rem; }
.detalle li { display: flex; justify-content: space-between; background: var(--panel); border-radius: 10px; padding: .45rem .7rem; }
.detalle strong { color: var(--oro); }
.total { margin: .3rem 0; font-size: 1.15rem; }
.total strong { font-size: 2rem; color: var(--oro); display: block; }
.fin-img { margin: 0 auto; width: 9rem; height: auto; }
.sorpresa-img { width: 100%; max-width: 30rem; height: auto; margin: 0 auto; border-radius: 14px; }
.sorpresa-img[hidden] { display: none; }

.tienda-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .6rem; }
.articulo { font: inherit; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .4rem;
    border-radius: 14px; border: 2px solid var(--panel-borde); background: var(--panel); color: var(--texto); cursor: pointer; }
.articulo img { width: 4rem; height: 4rem; object-fit: contain; }
.articulo .nombre { font-weight: 700; font-size: .9rem; text-align: center; }
.articulo .precio { font-size: .85rem; color: var(--oro); font-weight: 800; }
.articulo.puesto { border-color: var(--oro); box-shadow: 0 0 0 2px var(--oro) inset; }
.articulo:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.muestra-grande { font-size: 3.2rem; line-height: 4rem; }
.aviso-tienda { margin: 0; min-height: 1.2em; text-align: center; color: var(--oro); font-weight: 700; }

.elegir-lista h3 { margin: 1rem 0 .4rem; font-size: 1rem; color: var(--texto-suave); }
.rejilla { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.mundo-btn { font: inherit; font-weight: 800; min-height: 2.8rem; border-radius: 10px; border: 2px solid var(--panel-borde); background: var(--violeta); color: #fff; cursor: pointer; }
.mundo-btn.jefe::after { content: " ★"; color: var(--oro); }
.mundo-btn:disabled { background: #241444; color: #8a7bb0; border-color: #33205e; cursor: not-allowed; }

.anuncio-prueba { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    background: #14082e; text-align: center; padding: 16px; z-index: 5; }
.anuncio-prueba .etiqueta { margin: 0; color: var(--oro); font-weight: 800; letter-spacing: .12em; font-size: .8rem; }
.anuncio-prueba [data-texto] { margin: 0; font-size: 1.4rem; font-weight: 800; }
.anuncio-prueba .cuenta { margin: 0; font-size: 3rem; font-weight: 900; color: var(--oro); }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
@media (forced-colors: active) { .btn, .mundo-btn, .redondo { border: 2px solid ButtonText; } }

/* #0738 — Tabla de participantes. Oro/plata/bronce para el podio; la fila propia, resaltada. */
.pestanas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.pestana { font: inherit; font-weight: 700; min-height: 2.6rem; border-radius: 10px; border: 2px solid var(--panel-borde); background: var(--panel); color: var(--texto); cursor: pointer; }
.pestana[aria-pressed="true"] { background: var(--boton); color: var(--boton-texto); border-color: #f59e0b; }
.buscar { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.buscar input { font: inherit; width: 6rem; min-height: 2.6rem; border-radius: 10px; border: 2px solid var(--panel-borde); background: #14082e; color: var(--texto); padding: 0 .6rem; }
.tabla-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.tabla-fila { display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: .3rem .5rem; background: var(--panel); border: 2px solid var(--panel-borde); border-radius: 12px; padding: .5rem .6rem; }
.tabla-pos { font-weight: 800; text-align: center; font-size: 1.05rem; }
.tabla-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-puntos { color: var(--oro); font-variant-numeric: tabular-nums; }
.tabla-reacciones { grid-column: 2 / 4; display: flex; gap: .3rem; }
.reaccion { font: inherit; font-size: .85rem; min-height: 2rem; padding: 0 .55rem; border-radius: 999px; border: 1px solid var(--panel-borde); background: #14082e; color: var(--texto); cursor: pointer; }
.reaccion[aria-pressed="true"] { border-color: var(--oro); background: #3a2470; }
.reaccion:disabled { cursor: default; opacity: .75; }
.tabla-fila.top1 { border-color: #ffd34d; background: linear-gradient(90deg, #4a3500, var(--panel)); font-size: 1.08rem; }
.tabla-fila.top2 { border-color: #d6dbe4; background: linear-gradient(90deg, #3a3f4a, var(--panel)); }
.tabla-fila.top3 { border-color: #e0995e; background: linear-gradient(90deg, #4a2a12, var(--panel)); }
.tabla-fila.yo { box-shadow: 0 0 0 3px var(--violeta); }
.tabla-fila.encontrado { box-shadow: 0 0 0 3px var(--oro); }
.tabla-vacia { text-align: center; color: var(--texto-suave); padding: 1rem; }
a.btn { text-decoration: none; text-align: center; display: flex; align-items: center; justify-content: center; }
a.btn[hidden] { display: none; }