/* ═══════════════════════════════════════════════
   QUINIELA BORRACHA 2026 — Design System v3.1
   Look & Feel: FIFA × ESPN — Dark + Light Mode
═══════════════════════════════════════════════ */

:root {
  --qb-black:   #0A0C10;
  --qb-surface: #13161D;
  --qb-surface2:#1C2030;
  --qb-surface3:#242840;
  --qb-border:  #252A38;
  --qb-border2: #2E3448;
  --qb-red:     #D4001A;
  --qb-red-dim: rgba(212,0,26,.18);
  --qb-gold:    #FFD700;
  --qb-gold-dim:rgba(255,215,0,.15);
  --qb-blue:    #1478C8;
  --qb-blue-dim:rgba(20,120,200,.18);
  --qb-green:   #00C853;
  --qb-green-dim:rgba(0,200,83,.14);
  --qb-yellow:  #F5A623;
  --qb-text:    #F0F2F7;
  --qb-muted:   #7B8499;
  --qb-muted2:  #9299AC;
  --ff-display: 'Barlow Condensed', sans-serif;
  --ff-body:    'Inter', sans-serif;
}

/* ── LIGHT MODE ── */
:root.light {
  --qb-black:   #F0F2F7;
  --qb-surface: #FFFFFF;
  --qb-surface2:#F4F6FC;
  --qb-surface3:#E8EBF5;
  --qb-border:  #DDE0EC;
  --qb-border2: #C8CCDC;
  --qb-red:     #C8001A;
  --qb-red-dim: rgba(200,0,26,.1);
  --qb-gold:    #C89500;
  --qb-gold-dim:rgba(200,149,0,.12);
  --qb-blue:    #1060B0;
  --qb-blue-dim:rgba(16,96,176,.1);
  --qb-green:   #0A9A3C;
  --qb-green-dim:rgba(10,154,60,.1);
  --qb-yellow:  #C07800;
  --qb-text:    #0F1120;
  --qb-muted:   #6B7080;
  --qb-muted2:  #4A5068;
}

.stat-tab,.inner-tab{
  padding:8px 14px;font-family:var(--ff-display);font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  color:var(--qb-muted);border:none;background:none;
  border-bottom:3px solid transparent;transition:color .15s,border-color .15s;
  white-space:nowrap;
}
.stat-tab:hover,.inner-tab:hover{color:var(--qb-muted2);}
.stat-tab.on,.inner-tab.on{color:var(--qb-text);border-bottom-color:var(--qb-blue);}
.inner-tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--qb-border);margin-bottom:.875rem;scrollbar-width:none;}
.inner-tabs::-webkit-scrollbar{display:none;}

/* ── TRANSICIÓN DE TABS — mejora visual v1.0 ──────────────────────
   .tab-panel: se asigna a todos los paneles que hoy ya cambian de
   display:none a display:block (los 9 tabs principales, sub-tabs de
   Estadísticas/Fixture/Predicciones, wraps de Batallas). El navegador
   re-dispara sola la animation cada vez que un elemento pasa de
   display:none a block -- no hace falta ningún JS para esto. Mismo
   cubic-bezier que ya usan rankUp/rankDown, para que se sienta parte de
   la misma familia de movimiento. */
.tab-panel{animation:tabFadeIn .18s cubic-bezier(.4,0,.2,1);}
@keyframes tabFadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* Force dark background on the root element */
#root { background: var(--qb-black) !important; transition: background-color .25s ease; }

*{box-sizing:border-box;margin:0;padding:0}

.app{
  max-width:1100px;
  margin:0 auto;
  padding:.75rem 0;
  background: var(--qb-black);
  font-family: var(--ff-body);
  color: var(--qb-text);
  min-height: 100vh;
  transition: background-color .25s ease, color .25s ease;
}

/* ── HEADER ── */
.hdr{
  display:flex;align-items:center;gap:12px;
  margin-bottom:0;
  padding:.875rem .75rem .75rem;
  background: linear-gradient(135deg, #1a0005 0%, #0f0f17 50%, #0A0C10 100%);
  border-bottom: 2px solid var(--qb-red);
  position: relative;
  overflow: hidden;
}
:root.light .hdr {
  background: linear-gradient(135deg, #8a0010 0%, #b0001a 50%, #c8001a 100%);
}
.hdr::before {
  content:'';
  position:absolute; top:0; left:0; right:0; bottom:0;
  background: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 18px,
    rgba(255,255,255,.015) 18px,
    rgba(255,255,255,.015) 19px
  );
  pointer-events: none;
}
:root.light .hdr::before {
  background: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 18px,
    rgba(0,0,0,.04) 18px,
    rgba(0,0,0,.04) 19px
  );
}
.hdr-logo {
  /* v2.9.2 — 70px (antes 52px): ahora que borrachi.webp no tiene fondo
     blanco, se agranda para que la mascota se note más en el header. El
     background/box-shadow de acá quedan sin efecto a propósito -- el div
     en index.html los pisa con su propio style inline (transparent/none),
     ver la nota junto a #logo-btn en index.html. */
  width: 70px; height: 70px;
  background: var(--qb-red);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(212,0,26,.5);
}
.hdr-title {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 900;
  color: #F0F2F7;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
}
.hdr-sub {
  font-family: var(--ff-body);
  font-size: 10px;
  color: rgba(240,242,247,.7);
  margin-top: 3px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Light mode total points in blue */
:root.light .ptb {
  color: var(--qb-blue) !important;
}

/* Light mode theme toggle button */
.theme-toggle {
  padding: 5px 10px;
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255,255,255,.15);
  color: #F0F2F7;
  transition: background .15s;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,.25); }

/* ── TABS — Stadium scoreboard style ── */
.tabs{
  display:flex;overflow-x:auto;
  background: var(--qb-surface);
  border-bottom: 1px solid var(--qb-border);
  margin-bottom: 1rem;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab{
  padding: 10px 14px;
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--qb-muted);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  user-select: none;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--qb-muted2); }
.tab.on {
  color: var(--qb-text);
  border-bottom-color: var(--qb-red);
  background: linear-gradient(to bottom, rgba(212,0,26,.08), transparent);
}

/* ── SECTION LABEL ── */
.sec{
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--qb-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 8px;
}

/* ── BUTTONS ── */
.btn{
  padding: 6px 12px;
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid var(--qb-border2);
  border-radius: 6px;
  cursor: pointer;
  background: var(--qb-surface2);
  color: var(--qb-text);
  transition: background .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn:hover { background: var(--qb-surface3); border-color: var(--qb-muted); }
.btn-blue  { background: var(--qb-blue); color:#fff; border-color:var(--qb-blue); }
.btn-blue:hover  { background: #1060a8; }
.btn-green { background: #16a34a; color:#fff; border-color:#16a34a; }
.btn-green:hover { background: #15803d; }
.btn-sm    { padding: 4px 9px; font-size: 10px; }
.btn-red   { color: #ff6b6b; border-color: rgba(212,0,26,.5); background: rgba(212,0,26,.12); }
.btn-red:hover { background: rgba(212,0,26,.22); }
.btn-espn  { background: var(--qb-red); color:#fff; border-color:var(--qb-red); }
.btn-espn:hover { background: #b00016; }
.btn-purple{ background: #7c3aed; color:#fff; border-color:#7c3aed; }
.btn-purple:hover { background: #6d28d9; }

/* ── TOOLBAR ROW ── */
.rfl{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:.875rem}

/* ── INPUTS ── */
input[type=text],input[type=number],input[type=url],select{
  padding: 5px 9px;
  border: 1px solid var(--qb-border2);
  border-radius: 6px;
  background: var(--qb-surface2);
  color: var(--qb-text);
  font-family: var(--ff-body);
  font-size: 12px;
}
input[type=text]::placeholder,input[type=number]::placeholder { color: var(--qb-muted); }
input[type=text]:focus,input[type=number]:focus,select:focus { outline: none; border-color: var(--qb-blue); }
:root.light input[type=text],
:root.light input[type=number],
:root.light input[type=url],
:root.light select{
  background: #FFFFFF;
  border-color: var(--qb-border2);
  color: var(--qb-text);
}
:root.light input[type=text][readonly],
:root.light input[type=number][readonly]{
  background: var(--qb-surface2);
}

/* ── RANKING TABLE ── */
.rt{width:100%;border-collapse:collapse}
.rt th{
  text-align:left;
  font-family: var(--ff-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--qb-muted);
  padding: 5px 7px;
  border-bottom: 1px solid var(--qb-border);
  text-transform: uppercase;
  background: var(--qb-surface);
}
.rt td{
  padding: 8px 7px;
  border-bottom: 1px solid var(--qb-border);
  vertical-align: middle;
  /* v1.9 — Antes esta celda no declaraba color propio (dependía de
     heredarlo del body). En Chrome/Windows eso alcanzaba para el texto
     normal, pero la bandera-emoji del País (ver flagEmoji() en utils.js)
     caía al fallback de "iniciales" en 2 letras que Windows dibuja con su
     propio color por defecto (negro) en vez de heredar el de la página --
     y como el fondo de la tabla también es oscuro, quedaba negro sobre
     negro. Declarar el color acá explícito (no heredado) es lo único que
     esos glifos de fallback SÍ respetan. */
  color: var(--qb-text);
}
.rt tr:last-child td { border-bottom: none; }
.rt tbody tr { transition: background .1s, transform .45s cubic-bezier(.4,0,.2,1), opacity .3s; will-change: transform; }
.rt tbody tr:hover { background: var(--qb-surface2); }
.rt tbody tr.rank-move-up { animation: rankUp .55s cubic-bezier(.4,0,.2,1); }
.rt tbody tr.rank-move-down { animation: rankDown .55s cubic-bezier(.4,0,.2,1); }
@keyframes rankUp {
  0%   { transform: translateY(6px); background: rgba(0,200,83,.07); }
  60%  { background: rgba(0,200,83,.13); }
  100% { transform: translateY(0);    background: transparent; }
}
@keyframes rankDown {
  0%   { transform: translateY(-6px); background: rgba(212,0,26,.07); }
  60%  { background: rgba(212,0,26,.10); }
  100% { transform: translateY(0);    background: transparent; }
}

/* Top 3 accent */
.rt tbody tr:nth-child(1) { border-left: 3px solid var(--qb-gold); }
.rt tbody tr:nth-child(2) { border-left: 3px solid #C0C0C0; }
.rt tbody tr:nth-child(3) { border-left: 3px solid #cd7f32; }

.rk{
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--qb-blue);
}
.pn{
  font-weight: 600;
  font-size: 13px;
  color: var(--qb-text);
}
.qb-avatar{
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
  border: 2px solid var(--qb-border2);
  background: var(--qb-surface2);
}
.ps{
  font-size: 10px;
  color: var(--qb-muted);
  margin-top: 1px;
}
.ptb{
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--qb-text);
}

/* ── PILLS / BADGES ── */
.pill{
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  border: none;
  display: inline-block;
  letter-spacing: .03em;
}
.pb  { background: var(--qb-blue-dim); color: #6ab8f7; border: 1px solid rgba(20,120,200,.35); }
.pg  { background: var(--qb-green-dim); color: #4dde8c; border: 1px solid rgba(0,200,83,.35); }

/* ── LINKS ── */
.lk{
  font-size: 10px;
  color: var(--qb-blue);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 7px;
  border: 1px solid rgba(20,120,200,.35);
  border-radius: 4px;
  background: var(--qb-blue-dim);
}
.lk:hover { background: rgba(20,120,200,.3); }

/* ── FIXTURE groups ── */
.gh{display:flex;align-items:center;gap:7px;margin-bottom:5px;margin-top:1rem}
.gh:first-child{margin-top:0}
.gl{
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--qb-red);
  color: #fff;
  padding: 2px 10px;
  border-radius: 4px;
}

/* ── MATCH ROW ── */
.mr{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:5px;
  padding: 7px 10px;
  border: 1px solid var(--qb-border);
  border-radius: 8px;
  margin-bottom: 4px;
  background: var(--qb-surface);
}
.mr.conflict{ border-color: var(--qb-yellow); background: rgba(245,166,35,.07); }
.mr:hover { border-color: var(--qb-border2); }
.tn{
  font-size: 12px;
  font-weight: 600;
  color: var(--qb-text);
}
.th{display:flex;align-items:center;gap:5px;justify-content:flex-end}

/* ── SCORE STATUS ── */
.sd{font-size:9px;color:var(--qb-muted);display:flex;align-items:center;gap:3px}
.dot{width:5px;height:5px;border-radius:50%;background:#3a3f50}
.dot.on  {background:var(--qb-green)}
.dot.warn{background:var(--qb-yellow)}
.ldot{
  width:7px;height:7px;border-radius:50%;
  background:#ef4444;
  display:inline-block;
  animation:blink 1s ease infinite;
  flex-shrink:0;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ── STATUS BADGES ── */
.sbadge{display:inline-flex;align-items:center;gap:4px;font-family:var(--ff-display);font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:4px;text-transform:uppercase}
.sbadge.ok  {background:var(--qb-green-dim);color:#4dde8c;border:1px solid rgba(0,200,83,.3)}
.sbadge.err {background:var(--qb-red-dim);color:#ff8080;border:1px solid rgba(212,0,26,.3)}
.sbadge.info{background:var(--qb-blue-dim);color:#6ab8f7;border:1px solid rgba(20,120,200,.3)}
.sbadge.warn{background:rgba(245,166,35,.14);color:#f5c842;border:1px solid rgba(245,166,35,.3)}

.status-bar{font-size:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:.5rem;min-height:18px}

.dbadge{
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--ff-display);font-size:10px;font-weight:700;letter-spacing:.04em;
  background:var(--qb-green-dim);color:#4dde8c;
  border:1px solid rgba(0,200,83,.3);
  padding:2px 8px;border-radius:4px;
  text-transform:uppercase;
}

.ver{
  font-family:var(--ff-display);
  font-size:9px;font-weight:700;
  background:var(--qb-blue-dim);color:#6ab8f7;
  padding:2px 7px;border-radius:4px;
  border:1px solid rgba(20,120,200,.35);
  letter-spacing:.04em;
}

/* ── INFO BOX ── */
.ib{
  font-size:11px;
  color: var(--qb-muted2);
  background: var(--qb-surface);
  padding: 9px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--qb-blue);
  line-height: 1.7;
  margin-bottom: .625rem;
}
.ib.warn { border-left-color: var(--qb-yellow); }
.ib.ok   { border-left-color: var(--qb-green); }
.ib strong { color: var(--qb-text); }
.ib em { color: var(--qb-muted2); font-style: normal; text-decoration: underline; }

/* ── CARDS ── */
.pc{border:1px solid var(--qb-border);border-radius:12px;padding:.75rem .875rem;margin-bottom:.625rem;background:var(--qb-surface);transition:box-shadow .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),background-color .25s ease,border-color .25s ease}
.pc:hover,.pc:focus-within{box-shadow:0 4px 16px rgba(0,0,0,.18);transform:translateY(-2px)}
:root.light .pc:hover,:root.light .pc:focus-within{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.pg2{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pm{border:1px solid var(--qb-border);border-radius:8px;padding:6px 8px;background:var(--qb-surface2)}
.pmn{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--qb-muted);margin-bottom:3px}

/* ── ADVANCED PREDS GRID ── */
.ag{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:.5rem}
.ac{border:1px solid var(--qb-border);border-radius:8px;padding:7px 9px;background:var(--qb-surface2)}
.ap{font-family:var(--ff-display);font-size:18px;font-weight:800;color:var(--qb-blue);line-height:1}
.al{font-size:10px;color:var(--qb-muted2);margin-top:2px;line-height:1.4}
.ai{display:flex;align-items:center;gap:5px;margin-bottom:4px;flex-wrap:wrap}
.ai label{font-size:10px;color:var(--qb-muted2);min-width:155px}

/* ── SCORERS ── */
.sr{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid var(--qb-border)}
.sr:last-child{border:none}
.es{text-align:center;padding:2rem;color:var(--qb-muted);font-size:12px;line-height:1.9}

/* ── HALL DE LA FAMA (v4.2; v4.4.1: un card por edición, con varios
   puestos/slots adentro -- Campeón/2do/3er lugar/Ambulancia/Cenicienta) ── */
.hof-wrap{position:relative}
.hof-intro-overlay{
  position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  background:var(--qb-surface);border-radius:10px;
  opacity:1;transition:opacity .5s ease;
}
.hof-intro-overlay.fade-out{opacity:0;pointer-events:none}
.hof-intro-svg{width:200px;height:200px;max-width:60%}
.hof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.hof-card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:1rem;border:1px solid var(--qb-border2);border-radius:12px;
  background:var(--qb-surface2);
}
.hof-year{font-family:var(--ff-display);font-weight:900;font-size:19px;color:var(--qb-gold);text-align:center}
/* v4.4.2 — El Campeón se destaca del resto de los puestos: foto grande y
   centrada (mismo tamaño que tenía antes de que existieran las otras 4
   categorías, v4.2-v4.4), con su propio bloque separado por una línea del
   resto de los slots (2do/3er lugar/Ambulancia/Cenicienta, que siguen
   chicos -- son secundarios frente al campeón). */
.hof-champ-block{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding-bottom:.75rem;border-bottom:1px solid var(--qb-border);
}
.hof-champ-photo{width:108px;height:108px;border-radius:50%;object-fit:cover;border:4px solid var(--qb-gold);background:var(--qb-surface3)}
.hof-champ-photo-empty{display:flex;align-items:center;justify-content:center;font-size:42px}
.hof-champ-name{font-weight:800;font-size:15px;color:var(--qb-text);text-align:center;word-break:break-word}
.hof-slots{display:flex;flex-direction:column;gap:9px}
.hof-slot{display:flex;align-items:center;gap:10px}
.hof-slot-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--qb-gold);background:var(--qb-surface3);flex-shrink:0}
.hof-slot-photo-empty{display:flex;align-items:center;justify-content:center;font-size:20px}
.hof-slot-name{font-size:13px;font-weight:600;color:var(--qb-text);word-break:break-word;text-align:left}
.hof-rm{position:absolute;top:8px;right:8px;padding:3px 7px;font-size:11px;line-height:1}
.hof-upload-circle{
  width:108px;height:108px;border-radius:50%;flex-shrink:0;cursor:pointer;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:28px;
  border:2px dashed var(--qb-border2);background:var(--qb-surface2);color:var(--qb-muted);
}
.hof-upload-circle:hover{border-color:var(--qb-blue);color:var(--qb-blue)}
.hof-upload-circle img{width:100%;height:100%;object-fit:cover}
/* Circulitos de foto por fila, adentro del modal de edición (más chicos
   que .hof-upload-circle -- ahí hay 5 juntos, uno por categoría) */
.hof-edit-row{display:flex;align-items:center;gap:10px}
.hof-slot-upload{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;cursor:pointer;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  border:2px dashed var(--qb-border2);background:var(--qb-surface2);color:var(--qb-muted);
}
.hof-slot-upload:hover{border-color:var(--qb-blue);color:var(--qb-blue)}
.hof-slot-upload img{width:100%;height:100%;object-fit:cover}

/* ── SPINNER ── */
.spin{animation:rot .7s linear infinite;display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}

/* ── TOAST ── */
.toast{
  position:absolute;bottom:18px;right:18px;
  background:var(--qb-green);color:#000;
  padding:8px 16px;border-radius:6px;
  font-family:var(--ff-display);
  font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;
  z-index:50;opacity:0;transition:opacity .3s;pointer-events:none;
}
.toast.show{opacity:1}

/* ── MODALS / OVERLAYS ── */
.overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.75);
  display:flex;align-items:flex-start;justify-content:center;
  z-index:200;padding:12px 8px;overflow-y:auto;
  backdrop-filter:blur(3px);
}
.exp-box{
  background:var(--qb-surface);
  border:1px solid var(--qb-border2);
  border-radius:12px;padding:1.25rem;
  width:min(95%,660px);margin:auto;
}
.progress-bar{width:100%;height:4px;background:var(--qb-border);border-radius:2px;overflow:hidden;margin-top:.75rem;display:none}
.progress-fill{height:100%;background:var(--qb-red);border-radius:2px;transition:width .4s;width:0%}

/* ── LIVE CARDS (En Vivo tab) ── */
.live-card{
  border:1px solid var(--qb-border);
  border-radius:12px;
  background:var(--qb-surface);
  overflow:hidden;margin-bottom:1rem;
}
.live-card.is-live{border-color:var(--qb-red)}
.live-hdr{
  background:var(--qb-surface2);
  padding:10px 14px;
  border-bottom:1px solid var(--qb-border);
  display:flex;align-items:center;justify-content:space-between;
}
.live-card.is-live .live-hdr{
  background: linear-gradient(90deg, rgba(212,0,26,.2) 0%, var(--qb-surface2) 100%);
  border-bottom-color: rgba(212,0,26,.35);
}
.scoreboard{display:flex;align-items:center;justify-content:center;gap:16px;padding:18px 14px 12px}
.live-team{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0}
.live-team-name{
  font-family:var(--ff-display);
  font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--qb-text);text-align:center;
}
.live-team-flag{font-size:32px;line-height:1}
.live-score{
  font-family:var(--ff-display);
  font-size:42px;font-weight:900;
  color:var(--qb-text);
  min-width:80px;text-align:center;letter-spacing:4px;
}
.live-score.red{color:var(--qb-red)}
.pred-section{padding:0 14px 14px}
.pred-row{margin-bottom:7px}
.pred-row-hdr{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.spill{
  background:var(--qb-surface2);
  border:1px solid var(--qb-border2);
  border-radius:5px;padding:2px 9px;
  font-family:var(--ff-display);font-size:12px;font-weight:700;
  color:var(--qb-text);letter-spacing:.03em;
}
.spill.match{background:var(--qb-green-dim);border-color:rgba(0,200,83,.4);color:#4dde8c}
.cpill{
  font-family:var(--ff-display);
  font-size:10px;font-weight:700;
  color:var(--qb-muted2);
  background:var(--qb-surface2);
  border-radius:4px;padding:1px 7px;
  border:1px solid var(--qb-border);
}
.names{padding-left:2px}
.nchip{
  display:inline-block;
  background:var(--qb-surface2);
  border:1px solid var(--qb-border);
  border-radius:4px;
  padding:2px 7px;margin:2px 2px;
  font-size:10px;color:var(--qb-muted2);
}
.nchip.hit{background:var(--qb-green-dim);border-color:rgba(0,200,83,.4);color:#4dde8c;font-weight:600}
.mm-empty{text-align:center;padding:3rem 1rem;color:var(--qb-muted);font-size:12px;line-height:1.9}
.refresh-bar{display:flex;align-items:center;gap:8px;margin-bottom:.875rem;flex-wrap:wrap}
.countdown{font-size:10px;color:var(--qb-muted);font-variant-numeric:tabular-nums}

/* ── INTEGRITY PANEL ── */
.integ-row{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:7px;font-size:11px;margin-bottom:4px;font-family:var(--ff-body)}
.integ-ok  {background:var(--qb-green-dim);color:#4dde8c}
.integ-err {background:var(--qb-red-dim);color:#ff8080}
.integ-warn{background:rgba(245,166,35,.12);color:#f5c842}

.conflict-modal{
  background:var(--qb-surface);
  border:1px solid var(--qb-border2);
  border-radius:12px;padding:1.25rem;
  width:min(95%,480px);margin:auto;
}

/* ── ELIMINATION ROUND HEADERS ── */
.rnd-hdr{
  font-family:var(--ff-display);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--qb-muted2);
  padding:5px 0 7px;margin-top:1rem;
  border-bottom:1px solid var(--qb-border);
  margin-bottom:7px;
  display:flex;align-items:center;gap:6px;
}
.rnd-hdr:first-child{margin-top:0}

.elim-row{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:5px;
  padding:7px 10px;
  border:1px solid var(--qb-border);
  border-radius:8px;margin-bottom:4px;
  background:var(--qb-surface);
}
.elim-row.live-border{border-color:var(--qb-red);background:rgba(212,0,26,.06)}
.elim-row.unlocked{border-color:rgba(0,200,83,.4);background:rgba(0,200,83,.06)}

/* ── BRACKET ── */
.brkt-round{margin-bottom:1rem}
.brkt-round-title{
  font-family:var(--ff-display);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--qb-muted);
  margin-bottom:5px;padding:3px 8px;
  background:var(--qb-surface);
  border-radius:4px;display:inline-block;
  border:1px solid var(--qb-border);
}
.brkt-match{
  display:flex;align-items:center;gap:6px;
  padding:6px 9px;
  border:1px solid var(--qb-border);
  border-radius:8px;margin-bottom:3px;
  font-size:11px;
  background:var(--qb-surface);
}
.brkt-match.hit{border-color:rgba(0,200,83,.4);background:rgba(0,200,83,.06)}
.brkt-match.miss{border-color:rgba(212,0,26,.4);background:rgba(212,0,26,.06)}
.brkt-match.pending{opacity:.6}
.brkt-teams{flex:1;display:flex;flex-direction:column;gap:2px}
.brkt-team{font-size:11px;font-weight:500;color:var(--qb-text)}
.brkt-score{font-family:var(--ff-display);font-size:13px;font-weight:700;color:var(--qb-blue);min-width:28px;text-align:center}
.brkt-status{font-size:10px;min-width:48px;text-align:right}
.brkt-pts{font-family:var(--ff-display);font-size:12px;font-weight:700;color:var(--qb-green)}
.brkt-miss-lbl{font-size:10px;color:#ff8080}
.brkt-pend-lbl{font-size:10px;color:var(--qb-muted)}
.brkt-summary{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:.625rem .75rem;
  background:var(--qb-surface);
  border:1px solid var(--qb-border);
  border-radius:8px;margin-bottom:.75rem;
  font-size:10px;
}
.bsum-item{display:flex;flex-direction:column;align-items:center;gap:1px}
.bsum-val{font-family:var(--ff-display);font-size:16px;font-weight:800;color:var(--qb-blue)}
.bsum-lbl{color:var(--qb-muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em}

/* ══════════════════════════════════════════════════════════════
   MOBILE (v5.1) — pantallas ≤680px
   No se toca nada del CSS de desktop: todo lo de abajo solo
   se activa dentro de este @media, así que es 100% aditivo.
═══════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  /* Evita el zoom automático de iOS al tocar cualquier input */
  input[type=text],input[type=number],input[type=url],input[type=email],input[type=password]{
    font-size:16px;
  }

  /* ── Header v5.3: logo/título grandes, fecha+participantes juntos, Light/En vivo mismo ancho ── */
  .hdr{align-items:flex-start;flex-wrap:nowrap;gap:10px}
  .hdr-logo{width:86px!important;height:86px!important;flex:0 0 auto} /* v2.9.2 — antes 62px */
  #logo-img{width:86px!important;height:86px!important} /* v2.9.2 — antes 62px */
  .hdr-title{font-size:16px!important;display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.2}
  .hdr-title .ver{font-size:10px}
  #admin-indicator{display:none!important}
  #hdr-countries{display:none}
  #hdr-today{display:inline!important;font-size:10px;color:rgba(240,242,247,.6);white-space:nowrap}
  #hdr-master-badge{display:none}
  #hstat{display:none}
  #hdr-right-col{flex:0 0 auto;align-items:stretch!important;width:84px}
  #theme-btn{width:100%;text-align:center;box-sizing:border-box}
  #hdr-live-row{width:100%;justify-content:flex-end}
  #live-badge{width:100%;justify-content:center!important;box-sizing:border-box}

  /* Tabla de Ranking → fila única compacta por participante (estilo lista) */
  #rank-mobile-header{display:inline-block!important;padding-right:14px}
  #rank-table thead{display:none}
  #rank-table, #rank-table tbody{display:block;width:100%}
  #rank-table tr{
    display:flex;
    align-items:center;
    gap:6px;
    width:100%;
    padding:.375rem .5rem;
    margin-bottom:.25rem;
    border:1px solid var(--qb-border);
    border-radius:8px;
    background:var(--qb-surface);
  }
  #rank-table td{
    padding:0;
    border:none;
  }
  #rank-table td[data-label]::before{content:none}
  /* # y ± bien angostos, no compiten por espacio */
  #rank-table td[data-label="#"]{flex:0 0 auto;min-width:18px;text-align:center;font-size:11px}
  #rank-table td[data-label="±"]{flex:0 0 auto;min-width:16px;text-align:center;font-size:10px}
  #rank-table td[data-label="País"]{flex:0 0 auto}
  #rank-table td[data-label="País"] span{font-size:14px!important}
  /* Participante: nombre + ciudad, ocupa el espacio flexible central */
  #rank-table td[data-label="Participante"]{flex:1 1 auto;min-width:0}
  #rank-table td[data-label="Participante"] .pn{
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  #rank-table td[data-label="Participante"] .ps{
    font-size:9px;color:var(--qb-muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* Básicos, Avanzado, Elim, Bonos: pastillas chicas en línea, antes del Total */
  #rank-table td[data-label="Básicos"],
  #rank-table td[data-label="Avanzado"],
  #rank-table td[data-label="Elim"],
  #rank-table td[data-label="Bonos"]{
    flex:0 0 auto;
  }
  #rank-table td[data-label="Básicos"] .pill,
  #rank-table td[data-label="Avanzado"] .pill,
  #rank-table td[data-label="Elim"] .pill{
    font-size:9px!important;padding:1px 5px!important;min-width:0!important;
  }
  /* Total: número grande, fijo a la derecha */
  #rank-table td[data-label="Total"]{
    flex:0 0 auto;text-align:right;padding-left:4px;
  }
  #rank-table td[data-label="Total"] .ptb{font-size:15px}
  /* Acciones de admin (Hoja): ocultas en mobile, solo se editan desde desktop */
  #rank-table td[data-label="Hoja"]{display:none}

  /* Tabs: que se puedan deslizar cómodamente con el dedo */
  .tabs{-webkit-overflow-scrolling:touch}

  /* Hall de la fama: 2 tarjetas por fila (v4.3); v4.4.1 -- ahora cada
     tarjeta es una edición con varios puestos adentro, achica un poco las
     fotitos de cada puesto y el nombre para que 2 por fila sigan entrando
     cómodas incluso con las 5 categorías cargadas. */
  .hof-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .hof-upload-circle{width:96px;height:96px}
  .hof-card{padding:.75rem}
  .hof-slot-photo{width:34px;height:34px}
  .hof-slot-name{font-size:11.5px}
  /* v4.4.2 — el campeón se achica un poco menos que el resto (sigue
     siendo el más grande de la tarjeta) para que 2 por fila entren cómodas. */
  .hof-champ-photo{width:84px;height:84px}
  .hof-champ-name{font-size:13px}
}

/* ════════════════════════════════════════════════════════════
   v6.0 (Fase 1) — Módulo Registro / Mi Quiniela
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   MÓDULO REGISTRO — "Mi Quiniela" (Fase 1, v6.0)
   Portado desde registro-quiniela_1_0.html. Usa los mismos tokens
   --qb-* y --ff-* que ya define :root arriba (mismo design system).

   Reglas de scoping para evitar choques con el resto de la app:
     - v7.2 — CORREGIDO: antes esto estaba prefijado con el ID "#t-registro
       " a secas, asumiendo que todo este contenido vivía solo dentro del
       tab "Mi Quiniela". Eso dejó de ser cierto desde que el Panel Admin
       se separó a su propio div #t-admin (v6.6.1, ver index.html) -- pero
       el CSS nunca se actualizó, así que TODO el panel Admin (tarjetas,
       switches, badges, inputs, tabla de participantes, etc.) llevaba
       *siempre* renderizando sin ningún estilo, sin que nadie lo nota
       porque el contenido en texto plano sigue siendo legible. Ahora usa
       la clase ".rg-scope" en vez del ID -- esa clase ya la comparten
       #t-registro Y #t-admin (ver index.html), que es justo para esto.
     - Las clases .btn* del prototipo original chocaban con el .btn ya
       existente de la app (distinto tamaño/look), así que se renombraron
       a .rg-btn* — estas SÍ quedan globales (sin prefijo) porque también
       las usan los modales (#exitModal/#blockModal), que viven fuera de
       .rg-scope a propósito (ver comentario en index.html).
     - #pdfPoster y sus .pp-* también quedan globales por la misma razón
       (están fuera de .rg-scope para que html2canvas pueda capturarlos
       aunque el tab esté oculto).
     - .tabs/.tab del prototipo se renombraron a .rg-tabs/.rg-tab para no
       pisar la barra de tabs principal de la app (que usa esas mismas
       clases para Ranking/En vivo/Batallas/etc).
   ════════════════════════════════════════════════════════════ */

.rg-scope .rg-tabs{display:flex;overflow-x:auto;background:var(--qb-surface);border-bottom:1px solid var(--qb-border);scrollbar-width:none;margin:0 -.75rem}
.rg-scope .rg-tabs::-webkit-scrollbar{display:none}
.rg-scope .rg-tab{padding:12px 16px;font-family:var(--ff-display);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;color:var(--qb-muted);background:none;border:none;border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s}
.rg-scope .rg-tab:hover{color:var(--qb-muted2)}
.rg-scope .rg-tab.on{color:var(--qb-text);border-bottom-color:var(--qb-red)}
#rg-content{padding:1rem 0}

.rg-scope .card{background:var(--qb-surface);border:1px solid var(--qb-border);border-radius:12px;padding:1rem;margin-bottom:1rem;transition:box-shadow .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),background-color .25s ease,border-color .25s ease}
.rg-scope .card:hover,.rg-scope .card:focus-within{box-shadow:0 4px 16px rgba(0,0,0,.18);transform:translateY(-2px)}
:root.light .rg-scope .card:hover,:root.light .rg-scope .card:focus-within{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.rg-scope .card-title{font-family:var(--ff-display);font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.65rem;display:flex;align-items:center;gap:8px}
.rg-scope .field{margin-bottom:.85rem}
.rg-scope .field label{display:block;font-size:11.5px;color:var(--qb-muted2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;font-weight:600}
.rg-scope .field input,.rg-scope .field select{width:100%;background:var(--qb-surface2);border:1px solid var(--qb-border2);border-radius:8px;padding:10px 12px;color:var(--qb-text);font-family:var(--ff-body);font-size:14.5px;outline:none}
.rg-scope .field input:focus{border-color:var(--qb-blue)}
.rg-scope .field-hint{font-size:11px;color:var(--qb-muted);margin-top:4px}
.rg-scope .row2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* .rg-btn* — global (también lo usan los modales fuera de #t-registro) */
.rg-btn{font-family:var(--ff-display);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:13px;border:none;border-radius:9px;padding:11px 18px;cursor:pointer;transition:filter .15s,transform .05s}
.rg-btn:active{transform:scale(.98)}
.rg-btn-primary{background:var(--qb-red);color:#fff}
.rg-btn-primary:hover{filter:brightness(1.1)}
.rg-btn-gold{background:var(--qb-gold);color:#1a1400}
.rg-btn-gold:hover{filter:brightness(1.08)}
.rg-btn-ghost{background:var(--qb-surface2);color:var(--qb-text);border:1px solid var(--qb-border2)}
.rg-btn-ghost:hover{background:var(--qb-surface3)}
.rg-btn-danger{background:var(--qb-red-dim);color:#ff6b7a;border:1px solid rgba(212,0,26,.4)}
.rg-btn-danger:hover{background:rgba(212,0,26,.28)}
.rg-btn-block{width:100%}
.rg-btn-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}

.rg-scope .muted{color:var(--qb-muted)}
.rg-scope .err{color:#ff6b7a;font-size:12px;margin-top:6px}
.rg-scope .progress-wrap{background:var(--qb-surface2);border-radius:99px;height:9px;overflow:hidden;margin:.4rem 0}
.rg-scope .progress-bar{height:100%;background:linear-gradient(90deg,var(--qb-gold),var(--qb-red));transition:width .25s}
.rg-scope .group-head{display:flex;align-items:center;gap:8px;font-family:var(--ff-display);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--qb-gold);margin:1.1rem 0 .5rem;padding-bottom:5px;border-bottom:1px solid var(--qb-border)}
.rg-scope .match-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--qb-border)}
.rg-scope .match-row:last-child{border-bottom:none}
.rg-scope .team{flex:1;display:flex;align-items:center;gap:7px;font-size:13.5px;min-width:0}
.rg-scope .team span.nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-scope .flag-img{display:inline-block;vertical-align:middle;border-radius:2px;flex-shrink:0;background:var(--qb-surface2);object-fit:cover}
.rg-scope .score-input{width:40px;text-align:center;background:var(--qb-surface2);border:1px solid var(--qb-border2);border-radius:6px;padding:7px 0;color:var(--qb-text);font-family:var(--ff-display);font-size:15px;font-weight:700}
.rg-scope .score-input:focus{border-color:var(--qb-blue);outline:none}
.rg-scope .score-input::-webkit-outer-spin-button,
.rg-scope .score-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rg-scope .score-input[type=number]{-moz-appearance:textfield;appearance:textfield}
.rg-scope .status-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--qb-border);font-size:13px}
.rg-scope .status-row:last-child{border-bottom:none}
.rg-scope .vs-sep{color:var(--qb-muted);font-size:11px;padding:0 2px}
.rg-scope .pick-row{padding:10px 0;border-bottom:1px solid var(--qb-border)}
.rg-scope .pick-row:last-child{border-bottom:none}
.rg-scope .pick-label{font-size:11px;color:var(--qb-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.rg-scope .pick-btns{display:flex;gap:8px}
.rg-scope .pick-btn{flex:1;background:var(--qb-surface2);border:1px solid var(--qb-border2);border-radius:8px;padding:9px 6px;color:var(--qb-text);font-size:13px;cursor:pointer;text-align:center;transition:background .15s,border-color .15s,transform .08s ease-out}
.rg-scope .pick-btn:active{transform:scale(.97)}
.rg-scope .pick-btn:hover{background:var(--qb-surface3)}
.rg-scope .pick-btn.sel{background:var(--qb-gold-dim);border-color:var(--qb-gold);color:var(--qb-gold);font-weight:700}
.rg-scope .badge{display:inline-block;font-family:var(--ff-display);font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}
.rg-scope .badge-green{background:var(--qb-green-dim);color:var(--qb-green)}
.rg-scope .badge-yellow{background:rgba(245,166,35,.15);color:var(--qb-yellow)}
.rg-scope .badge-muted{background:var(--qb-surface2);color:var(--qb-muted2)}
.rg-scope .stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
.rg-scope .stat-box{background:var(--qb-surface2);border:1px solid var(--qb-border2);border-radius:10px;padding:.7rem .5rem;text-align:center}
.rg-scope .stat-num{font-family:var(--ff-display);font-size:22px;font-weight:900;color:var(--qb-gold);line-height:1}
.rg-scope .stat-label{font-size:9.5px;color:var(--qb-muted2);text-transform:uppercase;letter-spacing:.03em;margin-top:4px;line-height:1.2}
@media (max-width:560px){.rg-scope .stat-grid{grid-template-columns:repeat(2,1fr)}}
.rg-scope table.admin{width:100%;border-collapse:collapse;font-size:12.5px}
.rg-scope table.admin th{text-align:left;font-family:var(--ff-display);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--qb-muted);padding:7px 6px;border-bottom:1px solid var(--qb-border2)}
/* v6.5 — Antes esta celda no traía color propio y heredaba uno con muy
   bajo contraste en modo oscuro (el nombre del participante se veía casi
   invisible junto a correo/ubicación, que sí usan .muted con su color
   definido). Ahora cada td trae explícitamente var(--qb-text), y el
   nombre además en semibold para destacar como el dato principal de la fila. */
.rg-scope table.admin td{padding:8px 6px;border-bottom:1px solid var(--qb-border);vertical-align:middle;color:var(--qb-text)}
.rg-scope table.admin td.admin-name-cell{font-weight:600}
.rg-scope table.admin tr:last-child td{border-bottom:none}
.rg-scope .icon-btn{background:none;border:none;color:var(--qb-muted2);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:6px}
.rg-scope .icon-btn:hover{background:var(--qb-surface2);color:var(--qb-text)}
.rg-scope .icon-btn-has-note{color:var(--qb-yellow)}
.rg-scope .note{font-size:12px;color:var(--qb-muted);background:var(--qb-surface2);border:1px dashed var(--qb-border2);border-radius:8px;padding:9px 11px;margin-bottom:1rem}
.rg-scope .center{text-align:center}

/* Wizard */
.rg-scope .stepper{display:flex;align-items:center;margin-bottom:.4rem;overflow-x:auto;scrollbar-width:none}
.rg-scope .stepper::-webkit-scrollbar{display:none}
.rg-scope .step-dot{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--qb-surface2);border:1px solid var(--qb-border2);color:var(--qb-muted2);font-family:var(--ff-display);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .08s ease-out}
.rg-scope .step-dot:active{transform:scale(.9)}
.rg-scope .step-dot.done{background:var(--qb-green-dim);border-color:var(--qb-green);color:var(--qb-green)}
.rg-scope .step-dot.on{background:var(--qb-red);border-color:var(--qb-red);color:#fff}
.rg-scope .step-line{flex:1;min-width:10px;height:2px;background:var(--qb-border2);margin:0 2px}
.rg-scope .stepper-label{font-size:11.5px;color:var(--qb-muted2);margin-bottom:1rem;text-transform:uppercase;letter-spacing:.03em}
.rg-scope .save-indicator{font-size:11px;color:var(--qb-muted);text-align:right;margin-bottom:.5rem;min-height:14px}
.rg-scope .ro-score{font-family:var(--ff-display);font-weight:800;font-size:14px;background:var(--qb-surface2);border-radius:6px;padding:6px 10px;min-width:54px;text-align:center}
.rg-scope .ro-text{font-size:13.5px;color:var(--qb-text)}
.rg-scope .locked-banner{background:var(--qb-green-dim);border:1px solid var(--qb-green);color:var(--qb-green);border-radius:10px;padding:12px 14px;font-size:13px;margin-bottom:1rem}
.rg-scope .wiz-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:.6rem}
.rg-scope .wiz-greeting{font-size:12.5px;color:var(--qb-muted);flex:1;min-width:0}
.rg-scope .wiz-greeting b{color:var(--qb-text)}
.rg-scope .wiz-exit-btn{flex-shrink:0;font-size:11px;padding:7px 12px}
.rg-scope .confirm-check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;cursor:pointer;margin:.5rem 0}
.rg-scope .confirm-check input{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.rg-scope .switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--qb-border)}
.rg-scope .switch-row:last-child{border-bottom:none}
.rg-scope .wiz-nav-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem}
.rg-scope .filter-chips{display:flex;gap:6px;flex-wrap:wrap}
.rg-scope .filter-chip{font-family:var(--ff-body);font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:99px;border:1px solid var(--qb-border2);background:var(--qb-surface2);color:var(--qb-muted2);cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .08s ease-out}
.rg-scope .filter-chip:active{transform:scale(.97)}
.rg-scope .filter-chip:hover{color:var(--qb-text)}
.rg-scope .filter-chip.on{background:var(--qb-gold-dim);border-color:var(--qb-gold);color:var(--qb-gold)}
.rg-scope .combo-wrap{position:relative}
.rg-scope .combo-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--qb-surface2);border:1px solid var(--qb-border2);border-radius:8px;max-height:230px;overflow-y:auto;z-index:30;box-shadow:0 10px 28px rgba(0,0,0,.45)}
.rg-scope .combo-option{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px}
.rg-scope .combo-option:hover,.rg-scope .combo-option.hi{background:var(--qb-surface3)}
.rg-scope .combo-empty{padding:9px 12px;font-size:12px;color:var(--qb-muted)}
@keyframes rgPendingFlash{0%,100%{background:transparent}50%{background:var(--qb-gold-dim)}}
.rg-scope .pending-flash{animation:rgPendingFlash .6s ease-in-out 3;border-radius:6px}
.rg-scope .switch{position:relative;width:46px;height:26px;border-radius:99px;background:var(--qb-surface2);border:1px solid var(--qb-border2);cursor:pointer;transition:background .2s,border-color .2s,transform .08s ease-out;flex-shrink:0}
.rg-scope .switch:active{transform:scale(.95)}
.rg-scope .switch.on{background:var(--qb-green-dim);border-color:var(--qb-green)}
.rg-scope .switch-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--qb-muted2);transition:left .2s,background .2s}
.rg-scope .switch.on .switch-knob{left:22px;background:var(--qb-green)}

/* v1.2 (fase 2.1) — "Configuración del torneo → Reglas". Inputs number
   con color/fondo EXPLÍCITOS (no heredados) para que nunca dependan de en
   qué contenedor terminen — eso es justo lo que causaba el problema de
   contraste reportado. Mismo patrón ya probado de .score-input para
   quitar las flechitas ↑↓ del input number en todos los navegadores. */
.rg-scope .reglas-num{
  width:50px;text-align:center;background:var(--qb-surface2);border:1px solid var(--qb-border2);
  border-radius:6px;padding:6px 2px;color:var(--qb-text);font-family:var(--ff-display);
  font-size:13px;font-weight:700;outline:none;
}
.rg-scope .reglas-num:focus{border-color:var(--qb-blue)}
.rg-scope .reglas-num:disabled{opacity:.5;cursor:not-allowed}
.rg-scope .reglas-num::-webkit-outer-spin-button,
.rg-scope .reglas-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rg-scope .reglas-num[type=number]{-moz-appearance:textfield;appearance:textfield}

.rg-scope .reglas-base-fields{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:.5rem 0 .25rem;color:var(--qb-text);font-size:13px}

.rg-scope .reglas-fase-row{padding:9px 0;border-bottom:1px solid var(--qb-border)}
.rg-scope .reglas-fase-row:last-child{border-bottom:none}
.rg-scope .reglas-fase-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;font-family:var(--ff-display);font-size:14px;font-weight:800;color:var(--qb-text);letter-spacing:.01em}
.rg-scope .reglas-fase-cols{display:flex;gap:18px;flex-wrap:wrap}
.rg-scope .reglas-fase-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.rg-scope .reglas-fase-col-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--qb-muted2)}

@media (max-width:480px){
  .rg-scope .row2{grid-template-columns:1fr}
  .rg-scope .pick-btns{flex-direction:column}
}

/* Modal de salida / bloqueo del wizard — global a propósito (ver nota arriba) */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}
.modal-box{background:var(--qb-surface);border:1px solid var(--qb-border2);border-radius:14px;padding:1.25rem;max-width:380px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.modal-title{font-family:var(--ff-display);font-size:17px;font-weight:800;margin-bottom:6px}
.modal-text{font-size:13.5px;color:var(--qb-muted2);margin-bottom:1rem}
.modal-btns{display:flex;flex-direction:column;gap:8px}

/* Póster de PDF — global a propósito (#pdfPoster vive fuera de #t-registro) */
#pdfPoster{position:fixed;left:-9999px;top:0;width:1650px;min-height:1275px;background:#FFFFFF;color:#0F1120;font-family:var(--ff-body);padding:0}
.pp-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;background:linear-gradient(135deg,#8a0010 0%,#b0001a 50%,#c8001a 100%);color:#fff;padding:20px 30px}
.pp-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid #FFD700;background:#fff}
.pp-title{font-family:var(--ff-display);font-weight:900;font-size:25px;letter-spacing:.03em;text-transform:uppercase}
.pp-subtitle{font-family:var(--ff-display);font-weight:700;font-size:17px;color:#FFD700;text-transform:uppercase;margin-top:3px}
.pp-meta-grid{display:grid;grid-template-columns:repeat(3,auto);gap:5px 26px;flex-shrink:0}
.pp-meta-grid>div{display:flex;flex-direction:column;align-items:flex-end}
.pp-meta-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;opacity:.8}
.pp-meta-val{font-size:14px;font-weight:700;margin-top:1px}
.pp-meta-val.pp-estado-enviada{color:#9CFFB5}
.pp-meta-val.pp-estado-borrador{color:#FFD9A8}
.pp-body{display:flex;gap:26px;padding:18px 30px 6px;align-items:flex-start}
.pp-col-groups{flex:0 0 57%}
.pp-col-elim{flex:1;min-width:0}
.pp-col-title{font-family:var(--ff-display);font-weight:800;font-size:14px;color:#C8001A;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid #C8001A;padding-bottom:4px;margin-bottom:10px}
.pp-groups-grid{display:flex;gap:16px}
.pp-groups-subcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.pp-group-box{border:1px solid #DDE0EC;border-radius:5px;overflow:hidden}
.pp-group-name{background:#F4F6FC;font-family:var(--ff-display);font-weight:800;font-size:11px;color:#0F1120;text-transform:uppercase;padding:3.5px 9px;border-bottom:1px solid #DDE0EC}
.pp-match-row{display:flex;align-items:center;justify-content:space-between;padding:3px 9px;font-size:10px;border-bottom:1px solid #F0F2F7}
.pp-match-row:last-child{border-bottom:none}
.pp-team{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pp-team-r{justify-content:flex-end;text-align:right}
.pp-score{font-family:var(--ff-display);font-weight:900;font-size:10.5px;background:#E8EBF5;border-radius:4px;padding:1.5px 8px;min-width:32px;text-align:center;margin:0 7px;flex-shrink:0}
.pp-phase-block{margin-bottom:11px}
.pp-phase-name{font-family:var(--ff-display);font-weight:800;font-size:11.5px;color:#C89500;text-transform:uppercase;margin-bottom:4px}
.pp-phase-block .pp-match-row{font-size:11px;padding:3.5px 0;border-bottom:1px solid #F0F2F7}
.pp-special{padding:12px 30px 4px}
.pp-special-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px 14px}
.pp-special-item{border-top:2px solid #E8EBF5;padding-top:5px;min-width:0}
.pp-special-label{font-size:8px;text-transform:uppercase;letter-spacing:.02em;color:#6B7080;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-special-val{font-size:11px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-footer{text-align:center;font-size:9.5px;color:#6B7080;padding:9px 0 16px;border-top:1px solid #DDE0EC;margin:8px 30px 0;text-transform:uppercase;letter-spacing:.04em}

/* ══════════════════════════════════════════════════════════════
   MODO PRUEBA (?test=1) — v7.2
   ══════════════════════════════════════════════════════════════ */
/* El banner (#test-mode-banner en index.html) ya se muestra/oculta por
   JS inline; esta clase es un refuerzo visual adicional sobre #root
   (marco amarillo) para que sea imposible confundir esta pestaña con
   producción incluso si se hace scroll y el banner queda lejos. */
body.test-mode-active #root{
  outline:3px solid var(--qb-yellow);
  outline-offset:-3px;
}

/* ══════════════════════════════════════════════════════════════
   ACCESIBILIDAD DE MOVIMIENTO — mejora visual v1.0
   ══════════════════════════════════════════════════════════════ */
/* Un solo bloque para TODAS las animaciones/transiciones "de movimiento"
   del proyecto (viejas y nuevas): quien tiene reducción de movimiento
   activada en su sistema operativo no debería ver traslados, escalados
   ni parpadeos. Lo que SÍ se conserva (recolorea sin mover) queda tal
   cual -- por eso animation:none puntual en vez de "* { animation:none }"
   a lo bruto, que también apagaría color-only cosas que no hace falta. */
@media (prefers-reduced-motion: reduce){
  .rt tbody tr,
  .rt tbody tr.rank-move-up,
  .rt tbody tr.rank-move-down{animation:none;transition:background .1s,opacity .3s}
  .tab-panel{animation:none}
  .pc,.rg-scope .card{transition:background-color .25s ease,border-color .25s ease}
  .pc:hover,.pc:focus-within,.rg-scope .card:hover,.rg-scope .card:focus-within{transform:none}
  .rg-scope .pick-btn,.rg-scope .step-dot,.rg-scope .filter-chip,.rg-scope .switch,.rg-btn{transition:background .15s,color .15s,border-color .15s}
  .rg-scope .pick-btn:active,.rg-scope .step-dot:active,.rg-scope .filter-chip:active,.rg-scope .switch:active,.rg-btn:active{transform:none}
  /* #qb-loader/.qb-skel viven en index.html con su propio bloque inline
     (tienen que funcionar ANTES de que este archivo termine de cargar). */
}