/* ============================================================
   La Tómbola — estilos del juego (todo con prefijo .tb-)
   Usa los tokens de app.css. El escenario es "la tele": siempre oscuro.
   ============================================================ */

.tb { display:grid; gap:14px; width:100%; max-width:720px; margin:0 auto; }
.tb.tb-show { max-width:none; }
.tb-eyebrow { font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.tb-nota { font-size:11.5px; color:var(--ink-3); }
.tb-pie { font-size:11.5px; color:var(--ink-3); text-align:center; }
.tb-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tb-dot { width:10px; height:10px; border-radius:50%; background:var(--tb-c); flex:none; display:inline-block; }

/* ---------- tarjeta en Inicio ---------- */
.tb-home { display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:16px; cursor:pointer;
  background:radial-gradient(ellipse at 0% 50%, color-mix(in srgb, var(--oro) 14%, transparent), transparent 60%), var(--bg-raise); }
.tb-home .tb-mini { width:64px; height:64px; flex:none; }
.tb-home h3 { font-size:21px; margin:2px 0 3px; }
.tb-home p { font-size:13.5px; color:var(--ink-2); }
.tb-home .btn { text-align:center; }
.tb-home #tbHomeBombo { display:flex; }
@media (max-width:520px){ .tb-home { grid-template-columns:64px 1fr; row-gap:12px; } .tb-home .btn { grid-column:1 / -1; } }

/* ---------- menú del juego ---------- */
.tb-portada { display:flex; align-items:center; gap:18px; }
.tb-portada .tb-bombo { width:120px; height:120px; }
.tb-portada h2 { font-size:30px; }
.tb-portada p { color:var(--ink-2); font-size:14px; margin-top:4px; }
.tb-modos { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .tb-modos { grid-template-columns:1fr; } .tb-portada .tb-bombo { width:92px; height:92px; } .tb-portada h2 { font-size:25px; } }
.tb-modo { text-align:left; border:1.5px solid var(--line); border-radius:16px; padding:16px;
  background:var(--bg-raise); color:var(--ink); display:block; width:100%; touch-action:manipulation; }
.tb-modo.on { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.tb-modo .t { font-family:'Fredoka',sans-serif; font-size:18px; font-weight:600; }
.tb-modo > p { color:var(--ink-2); font-size:13.5px; margin-top:3px; }
.tb-rivales { list-style:none; margin:10px 0 6px; padding:0; display:grid; gap:5px; }
.tb-rivales li { display:flex; gap:8px; align-items:baseline; font-size:12.5px; color:var(--ink-2); }
.tb-rivales b { color:var(--ink); font-weight:600; }
.tb-stats { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--ink-2); }
.tb-stats b { color:var(--ink); }
.tb-grande-cta { width:100%; font-size:17px; padding:14px 20px; }
.tb-reanudar { display:flex; align-items:center; gap:12px; border-color:var(--accent); }
.tb-reanudar .btn { margin-left:auto; }
.tb-reglas summary { cursor:pointer; color:var(--ink-2); font-size:13.5px; }
.tb-reglas p { font-size:13.5px; color:var(--ink-2); margin-top:8px; }

/* ---------- ya jugaste hoy ---------- */
.tb-agotado { text-align:center; display:grid; gap:10px; justify-items:center; }
.tb-agotado h2 { font-size:25px; }
.tb-reloj { font-family:'Fredoka',sans-serif; font-size:40px; font-variant-numeric:tabular-nums; color:var(--accent); }

/* ---------- elegir números ---------- */
.tb-ronda { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tb-ronda b { font-family:'Fredoka',sans-serif; font-size:18px; }
.tb-puntitos { display:inline-flex; gap:5px; }
.tb-puntitos i { width:8px; height:8px; border-radius:50%; background:var(--line); }
.tb-puntitos i.on { background:var(--accent); }
.tb-oro { color:var(--accent); font-weight:600; font-size:13.5px; }
.tb-cuenta { margin-left:auto; color:var(--accent); font-weight:600; font-size:14px; }
.tb-bandeja { display:flex; gap:6px; justify-content:center; min-height:44px; flex-wrap:wrap; }
.tb-bandeja .ball, .tb-hueco { width:42px; height:42px; font-size:17px; }
.tb-bandeja button { border:0; background:none; padding:0; }
.tb-hueco { border-radius:50%; border:1.5px dashed var(--line); display:inline-block; }
.tb-chips { display:flex; gap:8px; flex-wrap:wrap; }
.tb-chip { border:1px solid var(--line); background:var(--bg-raise); color:var(--ink); border-radius:999px;
  padding:7px 13px; font-size:13px; touch-action:manipulation; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-chip:disabled { opacity:.45; cursor:not-allowed; }
.tb-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; }
.tb-n { min-height:42px; border-radius:10px; border:1px solid var(--line); background:var(--bg-raise); color:var(--ink);
  font-weight:600; font-size:15px; touch-action:manipulation; font-variant-numeric:tabular-nums; }
.tb-n[aria-pressed="true"] { background:radial-gradient(circle at 32% 28%, #FFDF8E 0%, var(--oro) 48%, #C07E0D 100%);
  color:#241A02; border-color:transparent; }
.tb-aviso { min-height:18px; font-size:13px; color:var(--ink-2); text-align:center; }
.tb-girar { font-size:17px; padding:14px 20px; }
.tb-eligiendo { font-size:13px; color:var(--ink-2); text-align:center; }
.tb-eligiendo .tb-dot { margin:0 2px 0 8px; }

/* ---------- escenario (la tele) ---------- */
.tb-juego { display:grid; gap:12px; }
@media (min-width:821px){
  .tb-juego { grid-template-columns:minmax(320px, 400px) 1fr; align-items:start; }
  .tb-escenario .tb-bombo { width:170px; height:170px; }
}
.tb-escenario { --ink:#EEF0FA; --ink-2:#A9AFCE; --ink-3:#7F86AB; --line:rgba(238,240,250,.14); --ok:#4ADE94;
  color:var(--ink); border-radius:18px; padding:10px 12px 12px; position:relative; overflow:hidden;
  background:radial-gradient(ellipse at 50% 18%, color-mix(in srgb, var(--oro) 18%, var(--noche-2)), var(--noche) 72%);
  box-shadow:inset 0 0 0 1px rgba(242,178,51,.18); }
.tb-cab { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); position:relative; z-index:2; }
.tb-cab b { color:var(--ink); font-family:'Fredoka',sans-serif; font-size:15px; }
.tb-ctrl { margin-left:auto; display:flex; gap:4px; }
.tb-ico { background:rgba(255,255,255,.08); border:0; color:var(--ink); border-radius:9px; min-width:34px; height:30px; font-size:14px; padding:0 8px; touch-action:manipulation; }
.tb-ico[aria-pressed="true"] { background:rgba(242,178,51,.25); }
.tb-tele { display:flex; align-items:center; gap:8px; position:relative; z-index:2; }
.tb-bombo { width:118px; height:118px; flex:none; overflow:visible; }
.tb-llamada { flex:1; text-align:center; min-width:0; }
.tb-etq { font-size:13px; color:var(--ink-2); min-height:20px; letter-spacing:.02em; }
.tb-grande { width:66px !important; height:66px !important; font-size:28px !important; margin:6px auto 0; }
.tb-tira { display:flex; justify-content:center; align-items:center; gap:4px; margin-top:8px; min-height:40px; position:relative; z-index:2; }
.tb-slot { width:36px; height:36px; border-radius:50%; border:1.5px dashed var(--line); display:inline-flex;
  align-items:center; justify-content:center; color:var(--ink-3); font-size:13px; flex:none; }
.tb-tira .ball { width:36px; height:36px; font-size:14.5px; }
.tb-mas { color:var(--ink-3); font-size:14px; margin:0 1px; }
.tb-ticker { min-height:40px; margin-top:8px; font-size:13px; line-height:1.35; color:var(--ink-2); text-align:center;
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center; padding:0 6px; }
.tb-ticker b { color:var(--tb-c, var(--ink)); }
.tb-escenario.tb-decisiva::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.38); z-index:1; pointer-events:none; }
.tb-decisiva .tb-etq { color:var(--oro); font-family:'Fredoka',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:15px; }
.tb-slot.tb-pulso { border-color:var(--oro); border-style:solid; animation:tbPulso .9s ease-in-out infinite; }
.ball.tb-tapada { background:radial-gradient(circle at 32% 28%, #FFDF8E 0%, var(--oro) 48%, #C07E0D 100%); color:#241A02; }
.tb-pausa { position:absolute; inset:0; z-index:8; border-radius:18px; background:rgba(10,12,30,.8);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#EEF0FA; }
.tb-pausa b { font-family:'Fredoka',sans-serif; font-size:22px; }

/* ---------- filas de participantes ---------- */
.tb-filas { list-style:none; margin:0; padding:0; display:grid; gap:8px; align-content:start; }
.tb-fila { display:grid; grid-template-columns:64px 1fr 50px; align-items:center; gap:6px; position:relative;
  background:var(--bg-raise); border:1px solid var(--line); border-left:3px solid var(--tb-c); border-radius:12px;
  padding:8px 10px; min-height:56px; }
.tb-nom { font-weight:600; font-size:13.5px; line-height:1.15; display:flex; flex-direction:column; min-width:0; }
.tb-nom small { font-size:10.5px; color:var(--ink-3); font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-corona { font-style:normal; font-size:12px; margin-left:3px; }
.tb-bolas { display:flex; gap:3px; flex-wrap:nowrap; min-width:0; }
.tb-fila .ball { width:28px; height:28px; font-size:12.5px; position:relative; }
.tb-fila .ball.hit::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--ok);
  opacity:0; animation:tbAnillo .6s ease-out forwards; }
.tb-pts { text-align:right; font-family:'Fredoka',sans-serif; font-size:21px; line-height:1; font-variant-numeric:tabular-nums; position:relative; }
.tb-pts small { display:block; font-family:'Outfit',sans-serif; font-size:10px; color:var(--ink-3); margin-top:3px; }
.tb-flota { position:absolute; right:0; top:-10px; font-size:13px; font-weight:700; color:var(--ok); pointer-events:none; opacity:0; font-family:'Outfit',sans-serif; }
.tb-flota.on { animation:tbFlota .75s ease-out forwards; }
.tb-fila.tb-bonada { border-color:var(--oro); box-shadow:0 0 0 1px var(--oro) inset; }
.tb-fila.tb-lider { background:linear-gradient(90deg, color-mix(in srgb, var(--tb-c) 12%, var(--bg-raise)), var(--bg-raise) 60%); }
.tb-sello { position:absolute; left:50%; top:50%; z-index:3; white-space:nowrap; pointer-events:none;
  background:radial-gradient(circle at 30% 25%, #FFE6A3, var(--oro) 60%); color:#241A02; font-family:'Fredoka',sans-serif; font-weight:700;
  padding:5px 14px; border-radius:9px; font-size:16px; box-shadow:0 6px 18px rgba(0,0,0,.35);
  transform:translate(-50%,-50%) rotate(-8deg); animation:tbSello .38s cubic-bezier(.2,.9,.3,1.3) both; }
@media (max-width:380px){
  .tb-fila { grid-template-columns:56px 1fr 44px; padding:8px 8px; }
  .tb-fila .ball { width:26px; height:26px; font-size:11.5px; }
}
.tb-tablero { display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; }
.tb-tablero i { font-style:normal; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--ink-3); background:var(--bg-raise-2); border:1.5px solid transparent; }
.tb-tablero i.tuyo { border-color:var(--accent); color:var(--ink); }
.tb-tablero i.salio { background:var(--ink-3); color:var(--bg); }
.tb-tablero i.salio.tuyo { background:var(--ok); color:#06301b; border-color:var(--ok); }

/* ---------- resumen de ronda ---------- */
.tb-titular { font-family:'Fredoka',sans-serif; font-weight:600; font-size:26px; line-height:1.15; }
.tb-tabla { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.tb-tabla li { display:grid; grid-template-columns:26px 1fr auto 48px; gap:10px; align-items:center; padding:11px 12px;
  border:1px solid var(--line); border-left:3px solid var(--tb-c); border-radius:12px; background:var(--bg-raise); }
.tb-pos { font-family:'Fredoka',sans-serif; font-size:18px; color:var(--ink-2); }
.tb-quien { font-weight:600; display:flex; align-items:center; gap:6px; min-width:0; }
.tb-delta { font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.tb-delta.suma { color:var(--ok); font-weight:600; }
.tb-delta.bono { color:var(--accent); font-weight:700; }
.tb-total { font-family:'Fredoka',sans-serif; font-size:21px; text-align:right; font-variant-numeric:tabular-nums; }
.tb-mov { font-size:11px; font-weight:700; }
.tb-mov.sube { color:var(--ok); }
.tb-mov.baja { color:var(--bad); }
.tb-barra { height:9px; border-radius:6px; background:var(--bg-raise-2); overflow:hidden; }
.tb-barra i { display:block; height:100%; background:linear-gradient(90deg, #C07E0D, var(--oro)); border-radius:6px; }

/* ---------- final ---------- */
.tb-final { text-align:center; display:grid; gap:10px; justify-items:center; }
.tb-redoble { font-family:'Fredoka',sans-serif; font-weight:500; font-size:22px; color:var(--ink-2); min-height:30px; }
.tb-trofeo { width:96px; height:96px; animation:tbAparece .5s cubic-bezier(.2,.9,.3,1.3) both; }
.tb-campeon { font-family:'Fredoka',sans-serif; font-weight:600; font-size:32px; line-height:1.1; color:var(--tb-c, var(--accent)); }
.tb-frase { color:var(--ink-2); font-size:14.5px; max-width:460px; }
.tb-desempate { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; }
.tb-botones { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%; }
.tb-guardar { text-align:left; width:100%; }
.tb-guardar p { font-size:14px; color:var(--ink-2); margin-bottom:10px; }
.tb-confeti { position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:70; }

@keyframes tbPulso { 50% { box-shadow:0 0 0 6px rgba(242,178,51,.35); } }
@keyframes tbAnillo { 0% { transform:scale(.8); opacity:1; } 100% { transform:scale(1.7); opacity:0; } }
@keyframes tbFlota { 0% { opacity:0; transform:translateY(6px); } 20% { opacity:1; } 100% { opacity:0; transform:translateY(-22px); } }
@keyframes tbSello { 0% { opacity:0; transform:translate(-50%,-50%) scale(2.2) rotate(-8deg); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-8deg); } }
@keyframes tbAparece { 0% { opacity:0; transform:scale(.4) rotate(-10deg); } 100% { opacity:1; transform:none; } }

/* escritorio: va al final para ganarle a las reglas base de las filas */
@media (min-width:821px){
  .tb-fila { grid-template-columns:130px 1fr 60px; padding:10px 14px; }
  .tb-fila .ball { width:32px; height:32px; font-size:14px; }
  .tb-nom { font-size:15px; }
  .tb-nom small { font-size:11.5px; }
}