@font-face{
  font-family:"World26";
  src:url("assets/display26.otf") format("opentype");
  font-weight:400;font-display:swap;
}
/* ============================================================
   Polla Mundialista 2026 — tema oficial "FIFA 26"
   Azul rey + formas blancas redondeadas + periwinkle + trofeo real
   (basado en la gráfica oficial del emblema 26)
   ============================================================ */
:root{
  --royal:#2746d6;          /* azul rey del emblema */
  --royal-deep:#1b33ad;
  --royal-dark:#0e1b66;     /* navy profundo (topbar) */
  --peri:#8fa8f0;           /* periwinkle de las formas */
  --peri-soft:#e9eefc;
  --ink:#0b1023;            /* texto sobre blanco (negro FIFA) */
  --muted:#646f8f;
  --muted-blue:#d2dcfb;     /* texto suave sobre azul */
  --green:#00833e;          /* verde acento */
  --lime:#b8e22e;           /* lima de la gráfica */
  --red:#d7173f;
  --gold:#d9a514;
  --gold-soft:#f5c712;

  --card:#ffffff;
  --line:#e3e7f6;
  --ring:0 0 0 3px rgba(39,70,214,.3);
  --shadow:0 14px 34px rgba(10,18,80,.28);
  --r-lg:24px; --r-md:16px; --r-sm:12px;
  --grid-gap:16px;
  font-size:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  background:linear-gradient(170deg,var(--royal) 0%,#2f50e6 55%,var(--royal-deep) 100%);
  background-attachment:fixed;
  color:var(--ink);
  min-height:100vh;-webkit-font-smoothing:antialiased;
}
/* formas periwinkle gigantes, como el lockup del 26 */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(143,168,240,.32), rgba(143,168,240,.32) 98%, transparent 100%) -18vmax -28vmax / 70vmax 70vmax no-repeat,
    radial-gradient(closest-side, rgba(143,168,240,.2), rgba(143,168,240,.2) 98%, transparent 100%) 112% 118% / 64vmax 64vmax no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.07), rgba(255,255,255,.07) 98%, transparent 100%) 108% -12vmax / 46vmax 46vmax no-repeat;
}
/* marca de agua: emblema 26 oficial */
body::after{
  content:"";position:fixed;right:-4vmin;bottom:-6vmin;width:52vmin;height:78vmin;
  z-index:-1;pointer-events:none;opacity:.09;
  background:url("assets/emblem26-dark.svg") center/contain no-repeat;
}
.brand,.stage-title{font-family:"World26","Bebas Neue",sans-serif;letter-spacing:1px;font-weight:400}
.group-head,.daygroup{font-family:"Bebas Neue","Oswald",sans-serif;letter-spacing:1.5px;font-weight:400}
h1,h2,h3{font-family:"Oswald","Inter",sans-serif;font-weight:700}
.hidden{display:none !important}
.muted{color:var(--muted)}
a{color:var(--royal)}
::selection{background:rgba(184,226,46,.45)}

/* ---------- topbar ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 22px;position:sticky;top:0;z-index:20;
  background:rgba(10,16,55,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.brand{font-weight:400;font-size:1.3rem;letter-spacing:1.5px;display:flex;align-items:center;
  gap:12px;text-transform:uppercase;color:#fff}
.brand-logo{height:42px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.userbox{display:flex;align-items:center;gap:14px;font-weight:600;font-size:.92rem;color:#fff}
#userName{color:var(--gold-soft);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.topbar .btn-ghost:hover{border-color:#fff;color:#fff}

/* ---------- layout ---------- */
main{max-width:1280px;margin:0 auto;padding:22px 18px}
main > section > .main-tabs, .auth-view{max-width:760px;margin-left:auto;margin-right:auto}
#view-tabla, #view-config, #view-admin{max-width:780px;margin:0 auto}
#view-tabla .lb-wrap{max-width:1060px;margin:0 auto;overflow-x:auto;border-radius:var(--r-lg)}
#view-tabla .lb-wrap .lb-table{width:100%;min-width:0;table-layout:auto}
#view-tabla .pool-bar,#view-tabla .invite-box,#view-tabla .pool-rules{max-width:780px;margin-left:auto;margin-right:auto}
#view-tabla.wide{max-width:none}
.view{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.card{
  background:var(--card);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--shadow);
}

/* ---------- auth ---------- */
.auth-view{display:flex;justify-content:center;padding-top:5vh}
.auth-card{max-width:460px;width:100%;text-align:center}
.trophy-hero{height:130px;width:auto;display:block;margin:2px auto 10px;
  filter:drop-shadow(0 10px 22px rgba(10,18,80,.35))}
.auth-card h1{margin:.1em 0 .4em;font-size:1.35rem;line-height:1.3;letter-spacing:.3px}
.auth-card > .muted{font-size:.93rem;line-height:1.55}
.auth-card strong{color:var(--royal)}
.auth-card .form{text-align:left}

/* ---------- tabs ---------- */
.tabs{
  display:flex;gap:5px;margin:18px 0;padding:5px;border-radius:999px;
  background:var(--peri-soft);
}
.tab{
  flex:1;border:0;background:transparent;color:var(--muted);font-weight:700;
  padding:10px 12px;border-radius:999px;cursor:pointer;font-size:.93rem;
  font-family:"Inter",sans-serif;letter-spacing:.2px;
  transition:color .2s,background .25s,box-shadow .25s;
}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--royal);color:#fff;box-shadow:0 4px 14px rgba(39,70,214,.4)}

/* pestañas principales: sobre el fondo azul, la activa es blanca (estilo 26) */
.main-tabs{position:sticky;top:66px;z-index:10;background:rgba(255,255,255,.16);
  backdrop-filter:blur(14px);padding:5px 10px}
.main-tabs .tab{color:var(--muted-blue)}
.main-tabs .tab:hover{color:#fff}
.main-tabs .tab.active{background:#fff;color:var(--ink);box-shadow:0 4px 16px rgba(8,14,60,.35)}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;
  color:var(--muted);letter-spacing:.3px}
input,select{
  background:#f4f6fd;border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:12px 14px;font-size:1rem;width:100%;
  transition:border-color .2s, box-shadow .2s;font-family:inherit;
}
input::placeholder{color:#9aa4c2}
input:focus,select:focus{outline:none;border-color:var(--royal);box-shadow:var(--ring);background:#fff}

.btn{
  border:0;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer;
  font-size:.95rem;letter-spacing:.2px;font-family:"Inter",sans-serif;
  transition:transform .15s, box-shadow .2s, opacity .2s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--royal);color:#fff;box-shadow:0 6px 18px rgba(39,70,214,.35)}
.btn-primary:hover{background:var(--royal-deep);box-shadow:0 8px 24px rgba(39,70,214,.5);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid #c9d2ef}
.btn-ghost:hover{border-color:var(--royal);color:var(--royal)}
.btn-sm{padding:8px 14px;font-size:.84rem;border-radius:10px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.linklike{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.84rem;
  padding:2px;text-align:center;text-decoration:underline;text-underline-offset:3px;
  transition:color .2s;font-family:inherit}
.linklike:hover{color:var(--royal)}
.msg{min-height:1.2em;font-size:.88rem;margin:.3em 0 0;text-align:center}
.msg.err{color:var(--red)} .msg.ok{color:var(--green)}

/* ---------- títulos de etapa (sobre azul) ---------- */
.stage-title{
  display:flex;align-items:center;gap:16px;margin:36px 4px 16px;
  color:#fff;font-size:1.25rem;font-weight:400;
  text-transform:uppercase;letter-spacing:1.5px;text-align:center;
  text-shadow:0 2px 8px rgba(8,14,60,.4);
}
.stage-title::before,.stage-title::after{content:"";flex:1;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5))}
.stage-title::after{background:linear-gradient(90deg,rgba(255,255,255,.5),transparent)}

/* ---------- cuadrículas: 4 columnas fijas, filas cortas centradas ---------- */
.groups-grid,.ko-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--grid-gap)}
.groups-grid > .group-card,
.ko-grid > .group-card{
  flex:0 0 calc((100% - 3*var(--grid-gap)) / 4);
  min-width:0;display:flex;flex-direction:column;
}
.ko-final .group-card{
  box-shadow:0 0 0 3px var(--gold-soft), 0 18px 40px rgba(8,14,60,.4);
}

/* ---------- tarjeta de grupo (blanca, redondeada estilo 26) ---------- */
.group-card{
  background:var(--card);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 10px 26px rgba(10,18,80,.25);
  transition:transform .25s, box-shadow .25s;
}
.group-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(10,18,80,.35)}
.group-head{
  background:var(--ink);color:#fff;font-weight:400;letter-spacing:3px;
  padding:11px 14px 9px;font-size:1.05rem;letter-spacing:1px;text-align:center;
}
.group-sub{
  background:var(--peri-soft);color:var(--muted);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.8px;padding:6px 12px;text-align:center;
}
.ko-card .group-head{display:none}

/* ---------- fila de partido ---------- */
.mrow{padding:10px 14px 12px;border-bottom:1px solid var(--line);position:relative;
  transition:background .2s}
.mrow:hover{background:#f7f9ff}
.mrow:last-child{border-bottom:0}
.mrow.locked{opacity:.82}
.mrow-meta{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:.67rem;color:var(--muted);flex-wrap:nowrap;margin-bottom:5px;letter-spacing:.2px;
}
.mrow-meta > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mrow-meta .lock,.mrow-meta .pts{flex-shrink:0}
.mrow-venue{
  font-size:.64rem;color:var(--muted);margin:-3px 0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px;
}
.mrow-line{display:flex;align-items:center;gap:8px}
.tcode{flex:1;display:flex;align-items:center;gap:7px;min-width:0}
.tcode.away{justify-content:flex-end}
.tcode .code{font-weight:800;font-size:.88rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;letter-spacing:.5px;color:var(--ink)}
.tcode .flag{font-size:1.35rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.tcode.tbd{
  font-size:.72rem;font-weight:700;color:var(--muted);line-height:1.25;
  white-space:normal;display:block;
}
.tcode.tbd.away{text-align:right}
/* equipo proyectado por los pronósticos del jugador */
.tcode.proj{opacity:.8;cursor:help}
.tcode.proj .code{
  color:var(--royal);border-bottom:2px dotted rgba(39,70,214,.5);padding-bottom:1px;
}
.vs{color:#aab3d2;font-weight:700;font-size:.85rem}

.score-in{
  width:46px;text-align:center;font-size:1.1rem;font-weight:800;padding:7px 2px;
  border-radius:10px;background:#f4f6fd;border:1.5px solid #d6dcf3;color:var(--ink);
}
.score-in:disabled{opacity:.6;background:#eceef6}
.score-in::-webkit-inner-spin-button,.score-in::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.score-in{-moz-appearance:textfield;appearance:textfield}

.mrow .saved-dot{position:absolute;right:14px;bottom:2px;min-width:0;font-size:.64rem}

/* comodín */
.meta-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.banker{
  border:0;background:none;cursor:pointer;font-size:1.05rem;line-height:1;
  padding:8px;margin:-8px -4px;border-radius:8px;
  color:#c8cfe8;transition:color .2s, transform .15s;
}
.banker:hover{color:var(--gold-soft);transform:scale(1.25)}
.banker.on{color:var(--gold-soft);text-shadow:0 0 6px rgba(245,199,18,.6)}
.banker:disabled{opacity:.4}

/* candados */
.lock{font-size:.62rem;font-weight:700;padding:3px 9px;border-radius:999px;
  white-space:nowrap;letter-spacing:.3px;display:inline-flex;align-items:center;gap:5px}
.lock::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.lock.open{background:rgba(184,226,46,.25);color:var(--green)}
.lock.closed{background:rgba(215,23,63,.1);color:var(--red)}

.result{font-size:.74rem;color:var(--gold);font-weight:800}
.pts{
  font-size:.72rem;font-weight:800;border-radius:999px;padding:3px 10px;
  background:linear-gradient(135deg,#fff3c4,#ffe89a);color:#8a6400;
}
.saved-dot{font-size:.72rem;color:var(--green);min-width:54px}

/* ---------- tabla de posiciones ---------- */
#view-tabla h2{font-size:1.25rem}
table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--card);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);
}
th,td{padding:13px 14px;text-align:left;font-size:.92rem}
thead tr{background:var(--peri-soft)}
th{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:1.2px;font-weight:700}
tbody tr{transition:background .2s}
tbody tr:hover{background:#f7f9ff}
tbody tr:not(:last-child) td{border-bottom:1px solid var(--line)}
td.num,th.num{text-align:center}
tr.me{background:#e9eefc}
tr.me td:first-child{box-shadow:inset 3px 0 0 var(--royal)}
.rank{font-weight:800;color:var(--muted)}
tbody tr:nth-child(1) .rank{color:var(--gold);font-size:1.05rem}
tbody tr:nth-child(2) .rank{color:#7f8aa6}
tbody tr:nth-child(3) .rank{color:#b45309}

/* ---------- posiciones por grupo ---------- */
.gtable{width:100%;border-collapse:collapse;background:transparent;box-shadow:none;border-radius:0}
.gtable th,.gtable td{padding:7px 5px;font-size:.74rem;text-align:center}
.gtable th{font-size:.62rem;letter-spacing:.5px;padding-top:9px}
.gtable .tname{text-align:left;max-width:0;width:46%;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-weight:700}
.gtable .tname .flag{font-size:1rem;margin-right:2px}
.gtable .gpts{font-weight:800;color:var(--royal)}
.gtable tbody tr:not(:last-child) td{border-bottom:1px solid var(--line)}
.gtable tr.q-in td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.gtable tr.q-maybe td:first-child{box-shadow:inset 3px 0 0 var(--gold-soft)}
.sim-tie{padding:0}
.sim-tie-head{background:var(--peri-soft);font-size:.68rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;padding:6px 12px;text-align:center}
.sim-tie-body{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 12px;font-size:.86rem;flex-wrap:wrap;text-align:center;line-height:1.5}
.sim-tie-body .vs{font-size:.72rem}

.standings-note{
  text-align:center;color:var(--muted-blue);font-size:.78rem;margin:18px auto 0;max-width:720px;
  line-height:1.6;
}
.q-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin:0 2px}
.q-dot.in{background:var(--green)}
.q-dot.maybe{background:var(--gold-soft)}

/* ---------- pollas ---------- */
.pool-hero{max-width:460px;margin:4vh auto 0;text-align:center}
.trophy-mini{height:96px;width:auto;display:block;margin:0 auto 10px;
  filter:drop-shadow(0 8px 18px rgba(10,18,80,.3))}
.pool-hero h2{margin:.2em 0 .5em;font-size:1.25rem}
.pool-hero > .muted{font-size:.92rem;line-height:1.55;margin-bottom:18px}
.pool-hero .form{text-align:left}
.pool-hero .linklike{margin-top:14px}
.pool-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);
  font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
.pool-divider::before,.pool-divider::after{content:"";flex:1;height:1px;background:var(--line)}

.pool-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:6px 0 14px}
.pool-name{margin:0;font-size:1.15rem;color:#fff;text-shadow:0 2px 8px rgba(8,14,60,.4)}
.pool-bar select{width:auto;min-width:220px;font-weight:700;background:#fff}
.pool-bar .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.pool-bar .btn-ghost:hover{border-color:#fff;color:#fff}

.invite-box{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--card);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:16px;box-shadow:0 8px 20px rgba(10,18,80,.22);
}
.invite-box .muted{font-size:.8rem;white-space:nowrap}
.invite-box input{
  flex:1;min-width:180px;font-size:.82rem;padding:8px 10px;color:var(--royal);
  background:#f4f6fd;font-weight:600;
}
.invite-box .btn{margin-left:auto;flex:none}   /* Copiar siempre a la derecha, aun al envolver */

/* ---------- estadísticas históricas ---------- */
.facts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.fact-card{
  background:var(--card);border-radius:var(--r-md);padding:16px;
  box-shadow:0 8px 20px rgba(10,18,80,.22);
}
.fact-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fact-icon{font-size:1.5rem}
.fact-top b{font-family:"Oswald","Inter",sans-serif;font-weight:400;
  font-size:1.02rem;color:var(--royal)}
.fact-card p{margin:0;font-size:.82rem;color:var(--muted);line-height:1.55}

.palmares-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pal-card{
  background:var(--card);border-radius:var(--r-md);padding:14px 16px;text-align:center;
  box-shadow:0 8px 20px rgba(10,18,80,.22);
}
.pal-name{font-weight:800;font-size:.95rem}
.pal-stars{font-size:.95rem;letter-spacing:2px;margin:4px 0}
.pal-years{font-size:.72rem;color:var(--muted)}
.pal-out{opacity:.65}
.pal-tag{display:inline-block;margin-top:6px;font-size:.64rem;font-weight:700;
  background:rgba(215,23,63,.1);color:var(--red);border-radius:999px;padding:2px 9px}

/* comparador cara a cara */
.vs-card{max-width:880px;margin:0 auto 8px;background:var(--card);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow)}
.vs-selects{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.vs-selects select{flex:1;min-width:180px;background:#f4f6fd;font-weight:700}
.vs-x{font-family:"Oswald","Inter",sans-serif;color:var(--royal);font-size:1.1rem}

/* combo con búsqueda (cara a cara) */
.combo{position:relative;flex:1;min-width:180px}
.combo-in{width:100%;background:#f4f6fd;font-weight:700}
.combo-list{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;margin:0;padding:4px;
  list-style:none;background:#fff;border:1.5px solid #d7defa;border-radius:12px;
  box-shadow:0 14px 36px rgba(16,26,64,.22);max-height:280px;overflow-y:auto}
.combo-list li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
  cursor:pointer;font-weight:600;font-size:.92rem}
.combo-list li:hover{background:#eef2ff}
.combo-list li.sel{background:#e4eaff;color:var(--royal)}
.combo-list li .flg{width:22px;height:15px;flex:none}
.combo-empty{color:var(--muted);cursor:default;justify-content:center}
.combo-empty:hover{background:none}
.vs-summary{border-top:1px solid var(--line);padding-top:14px}
.vs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.vs-team{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:90px;
  font-size:.92rem;text-align:center}
.vs-flag{font-size:2.2rem;filter:drop-shadow(0 3px 6px rgba(10,18,80,.25))}
.vs-score{display:flex;gap:22px;justify-content:center}
.vs-stat{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:60px}
.vs-score .n{font-family:"Oswald","Inter",sans-serif;font-size:1.7rem;line-height:1.1}
.vs-score .n.win{color:var(--green)} .vs-score .n.d{color:var(--muted)} .vs-score .n.loss{color:var(--red)}
.vs-score .lbl{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.vs-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;margin:12px 0 8px;background:var(--peri-soft)}
.vs-bar .seg-a{background:var(--green)} .vs-bar .seg-d{background:#b9c3e3} .vs-bar .seg-b{background:var(--red)}
.vs-meta{text-align:center;font-size:.78rem;color:var(--muted);margin:6px 0 10px}
.vs-cats{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-size:.76rem;
  color:var(--ink);border-top:1px dashed var(--line);padding-top:10px}
.vs-catline b{color:var(--royal)} .vs-catline small{color:var(--muted)}
.vs-chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 10px;justify-content:center}
.vs-chip{border:1.5px solid #c9d2ef;background:#fff;border-radius:999px;padding:6px 13px;
  font-size:.76rem;font-weight:700;cursor:pointer;color:var(--muted);transition:all .2s;font-family:inherit}
.vs-chip:hover{border-color:var(--royal);color:var(--royal)}
.vs-chip.on{background:var(--royal);border-color:var(--royal);color:#fff}
.vs-list{max-height:380px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.vs-match{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:.8rem;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.vs-match:last-child{border-bottom:0}
.vs-match.wa{box-shadow:inset 3px 0 0 var(--green)}
.vs-match.wb{box-shadow:inset 3px 0 0 var(--red)}
.vs-match.wd{box-shadow:inset 3px 0 0 #b9c3e3}
.vm-date{flex:0 0 110px;color:var(--muted);font-size:.72rem}
.vm-res{flex:1;display:flex;align-items:center;gap:8px;justify-content:center;min-width:200px}
.vm-res b{font-weight:600;color:var(--muted)} .vm-res b.vw{font-weight:800;color:var(--ink)}
.vm-score{font-family:"Oswald","Inter",sans-serif;background:var(--peri-soft);
  border-radius:7px;padding:2px 9px;font-size:.82rem}
.vm-tour{flex:0 0 auto;color:var(--muted);font-size:.7rem;text-align:right}

.stats-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;max-width:780px;
  margin-left:auto;margin-right:auto}
.stats-bar input{flex:1;min-width:200px;background:#fff}
.stats-bar select{width:auto;background:#fff;font-weight:600}
#statsTableWrap{max-width:1040px;margin:0 auto;overflow-x:auto}
.stats-table th,.stats-table td{padding:10px 9px;font-size:.86rem}
.stats-table .tname{white-space:nowrap}
.stats-table .tname .flag{font-size:1.15rem;margin-right:3px}
.stats-table .rank{font-weight:800;color:var(--royal)}
.stats-table .win{color:var(--green);font-weight:700}
.stats-table .loss{color:var(--red)}
.stats-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.stats-table th.sortable:hover{color:var(--royal)}
.stats-table th.sorted{color:var(--royal)}
.st-row{cursor:pointer}
.st-row.st-open{background:#eef2ff}
.st-detail td{background:#f7f9ff;padding:16px 18px !important;border-bottom:2px solid var(--royal) !important}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.detail-block h5{margin:0 0 8px;font-size:.74rem;text-transform:uppercase;letter-spacing:1px;
  color:var(--royal);font-family:"Inter",sans-serif;font-weight:800}
.detail-block p{margin:0 0 6px;font-size:.82rem;line-height:1.55;color:var(--ink)}
.detail-block p b{color:var(--royal)}
.detail-note{background:rgba(255,199,44,.15);border-radius:8px;padding:8px 10px;
  font-size:.78rem !important;margin-top:8px !important}
.h2h-row{display:flex;flex-direction:column;gap:2px;padding:7px 0;border-bottom:1px dashed var(--line);
  font-size:.8rem}
.h2h-row:last-child{border-bottom:0}
.h2h-rival{font-weight:800}
.h2h-res{color:var(--ink);line-height:1.5}
.h2h-res b{color:var(--royal)}
.h2h-res.muted{color:var(--muted);font-style:italic}

.champs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px;
  max-width:980px;margin:0 auto}
.champ-ed{
  background:var(--card);border-radius:12px;padding:9px 12px;
  display:flex;align-items:baseline;gap:8px;box-shadow:0 6px 14px rgba(10,18,80,.18);
  font-size:.8rem;flex-wrap:wrap;
}
.ed-year{font-family:"Oswald","Inter",sans-serif;color:var(--royal);font-size:.82rem}
.ed-champ{font-weight:800}
.ed-sub{color:var(--muted);font-size:.7rem}

/* ---------- reglas de polla ---------- */
.pool-rules{
  background:var(--card);border-radius:var(--r-md);padding:14px 16px;margin-bottom:14px;
  box-shadow:0 8px 20px rgba(10,18,80,.22);display:flex;flex-direction:column;gap:12px;
}
.rules-line{font-size:.82rem;color:var(--muted);line-height:1.6}
.rules-line b{color:var(--royal)}
.pool-rules > .btn{align-self:flex-start}

/* reglas completas */
.rd-sec{
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--royal);margin:10px 0 2px;padding-top:8px;border-top:1px dashed var(--line);
}
.rd-sec:first-of-type{border-top:0;padding-top:0;margin-top:4px}
.rd-row{display:flex;align-items:flex-start;gap:10px;padding:7px 0}
.rd-icon{font-size:1.1rem;flex:0 0 24px;text-align:center;margin-top:1px}
.rd-main{flex:1;display:flex;flex-direction:column;gap:1px}
.rd-main b{font-size:.86rem}
.rd-main small{font-size:.76rem;color:var(--muted);line-height:1.5}
.rd-pts{
  flex-shrink:0;font-weight:800;font-size:.8rem;color:#8a6400;
  background:linear-gradient(135deg,#fff3c4,#ffe89a);border-radius:999px;padding:4px 12px;
  align-self:center;
}
.rd-row.rd-off{opacity:.5}
.rd-row.rd-off .rd-pts{background:#eef1fb;color:var(--muted);font-weight:700}

.rules-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:600;
  color:var(--ink);background:var(--peri-soft);border-radius:999px;padding:6px 12px;
  line-height:1.2;
}
.chip b{color:var(--royal)}
.chip-gold{background:linear-gradient(135deg,#fff3c4,#ffe89a);color:#6e5200}
.chip-gold b{color:#8a6400}

/* configuración (solo dueño) */
.pool-cfg{border-top:1px dashed var(--line);padding-top:4px;display:flex;flex-direction:column;gap:4px}
.cfg-section{padding:12px 0;border-bottom:1px dashed var(--line)}
.cfg-section:last-of-type{border-bottom:0}
.cfg-section h4{
  margin:0 0 10px;font-size:.74rem;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--muted);font-family:"Inter",sans-serif;font-weight:800;
}
.cfg-section h4 small{font-weight:600;letter-spacing:.3px;text-transform:none}
.cfg-row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cfg-row3 label,.cfg-awards label{
  display:flex;flex-direction:column;gap:5px;font-size:.8rem;font-weight:600;color:var(--ink);
}
.cfg-awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.cfg-awards input,.cfg-row3 input{padding:9px 12px}
.cfg-radio{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;
  border:1.5px solid var(--line);margin-bottom:8px;cursor:pointer;font-size:.84rem;
  transition:border-color .2s,background .2s;
}
.cfg-radio:has(input:checked){border-color:var(--royal);background:#f3f6ff}
.cfg-radio input{width:auto;margin-top:2px}
.cfg-radio span{line-height:1.5;color:var(--ink)}
.cfg-radio b{color:var(--royal)}
.cfg-pos{display:flex;flex-direction:column;gap:6px;font-size:.84rem;font-weight:600;color:var(--ink)}
.cfg-pos input{max-width:120px;padding:9px 12px}
.cfg-pos small{font-weight:500;font-size:.74rem;line-height:1.5}
.cfg-check{display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--ink);cursor:pointer}
.cfg-check input{width:auto}
.cfg-check span{font-weight:600}
.cfg-foot{display:flex;align-items:center;gap:12px;padding-top:10px}
.danger-zone{
  margin-top:18px;border:1px solid rgba(215,23,63,.28);border-radius:var(--r-md);
  background:rgba(215,23,63,.045);overflow:hidden;
}
.dz-head{
  display:flex;align-items:center;gap:8px;padding:8px 16px;
  background:rgba(215,23,63,.1);border-bottom:1px solid rgba(215,23,63,.2);
}
.dz-icon{font-size:.95rem}
.dz-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--red)}
.dz-body{display:flex;align-items:center;gap:16px;padding:14px 16px;flex-wrap:wrap}
.dz-text{flex:1;min-width:220px;margin:0;font-size:.8rem;line-height:1.55;color:var(--muted)}
.dz-text b{color:var(--ink)}
.dz-body .btn-danger{flex-shrink:0}
.btn-danger{background:#fff;color:var(--red);border:1.5px solid rgba(215,23,63,.5)}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn-danger:disabled{opacity:.5}
.danger-zone .msg{display:block;text-align:left;font-size:.78rem;line-height:1.5;
  padding:0 16px 12px;color:var(--red)}
.danger-zone .msg:empty{display:none}

/* mis premios */
.awards-card{
  background:var(--card);border-radius:var(--r-md);padding:14px 16px;margin-bottom:16px;
  box-shadow:0 8px 20px rgba(10,18,80,.22);
}
.awards-head{font-weight:800;font-size:.92rem;display:flex;flex-direction:column;
  line-height:1.35;margin-bottom:10px}
.awards-head small{font-weight:600;color:var(--muted);font-size:.72rem}
.award-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 0;border-top:1px dashed var(--line);
}
.award-label{
  flex:0 0 230px;font-weight:700;font-size:.82rem;display:flex;flex-direction:column;
  line-height:1.3;
}
.award-label small{color:var(--gold);font-weight:800;font-size:.7rem}
.award-label .award-how{color:var(--muted);font-weight:500;font-size:.7rem;line-height:1.4;white-space:normal}
.award-row input[type=text],.award-row input[type=number],.award-row select{flex:1;min-width:170px;padding:9px 12px;font-size:1rem}
.award-row .msg{min-width:24px;margin:0}

/* ---------- panel admin ---------- */
.admin-h{color:#fff;font-size:.95rem;letter-spacing:1.5px;text-transform:uppercase;
  margin:28px 0 12px;text-shadow:0 2px 8px rgba(8,14,60,.4)}
.stats-row{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 10px}
.stat{
  flex:1;min-width:130px;background:var(--card);border-radius:var(--r-md);
  padding:16px 14px;text-align:center;box-shadow:0 8px 20px rgba(10,18,80,.22);
}
.stat b{display:block;font-size:1.6rem;font-family:"Oswald","Inter",sans-serif;
  color:var(--royal);line-height:1.1}
.stat span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.admin-tbl{margin-bottom:8px}
.admin-tbl code{background:var(--peri-soft);padding:2px 8px;border-radius:6px;
  font-weight:700;color:var(--royal);font-size:.82rem}
.mini-row{display:flex;align-items:center;gap:10px;padding:6px 4px;font-size:.88rem;
  border-bottom:1px dashed var(--line)}
.mini-row:last-child{border-bottom:0}
.mini-row .rank{min-width:1.4em;text-align:center}
.mini-pts{margin-left:auto;color:var(--muted);font-size:.78rem}

/* ---------- admin (lista por días, sobre azul) ---------- */
.daygroup{margin:22px 0 8px;font-weight:400;color:#fff;font-size:.88rem;
  letter-spacing:1.5px;text-transform:uppercase;
  font-family:"Oswald","Inter",sans-serif;
  border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:7px;
  text-shadow:0 2px 8px rgba(8,14,60,.4)}
.match{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--card);border-radius:var(--r-md);
  padding:14px;margin:10px 0;box-shadow:0 8px 20px rgba(10,18,80,.22);
}
.match .meta{flex-basis:100%;font-size:.72rem;color:var(--muted);display:flex;
  justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.match-row{display:flex;align-items:center;gap:8px;width:100%}
.side{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.side.away{justify-content:flex-end;text-align:right}
.side .flag{font-size:1.3rem}
.side .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem}

.filterbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0 6px}
.filterbar select{width:auto;background:#fff}
.filterbar .msg{color:#fff}

.banner{
  background:#fff;box-shadow:inset 4px 0 0 var(--gold-soft), 0 8px 20px rgba(10,18,80,.22);
  color:var(--ink);padding:13px 16px;border-radius:var(--r-md);
  font-size:.88rem;margin-bottom:14px;line-height:1.5;
}
.banner b{color:var(--royal)}

/* ---------- info de puntaje (arriba) ---------- */
.score-info{
  text-align:center;color:var(--muted-blue);font-size:.78rem;line-height:1.6;
  margin:-4px auto 14px;max-width:760px;position:relative;padding-top:12px;
}
.score-info::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:130px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--lime),var(--green))}
.score-info strong{color:#fff}
.ri-line{display:block;margin-bottom:4px;line-height:1.7}
.ri-foot{display:block;margin-top:2px;opacity:.75;font-size:.72rem}

/* ---------- footer ---------- */
.foot{text-align:center;padding:26px 16px;font-size:.78rem;
  margin-top:44px;color:var(--muted-blue);line-height:1.6;position:relative}
.foot::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:130px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--lime),var(--green))}
.foot strong{color:#fff}

/* ---------- pronósticos de rivales ---------- */
.player-row{cursor:pointer}
.player-row:hover .see-picks{opacity:1}
.see-picks{opacity:.35;font-size:.8rem;transition:opacity .2s}
.rival-list{background:var(--card);border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 8px 20px rgba(10,18,80,.22)}
.rival-row{display:flex;align-items:center;gap:12px;padding:9px 14px;font-size:.84rem;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.rival-row:last-child{border-bottom:0}
.rival-row.rv-hit{box-shadow:inset 3px 0 0 var(--green)}
.rival-row.rv-miss{box-shadow:inset 3px 0 0 var(--red)}
.rival-row.rv-head{background:var(--peri-soft);font-size:.78rem;color:var(--muted);
  justify-content:center}
.rival-row.rv-head b{color:var(--royal)}
.rv-match{flex:1;min-width:170px;display:flex;align-items:center;gap:6px}
.rv-real{font-family:"Oswald","Inter",sans-serif;background:var(--peri-soft);
  border-radius:6px;padding:1px 8px;font-size:.8rem}
.rv-pred{flex:1;min-width:150px;color:var(--muted)}
.rv-pred b{color:var(--ink)}
.rv-pts{min-width:56px;text-align:right}

/* ---------- botón crear polla (topbar en web, flotante en móvil) ---------- */
.fab{
  border:0;border-radius:999px;padding:11px 20px;cursor:pointer;
  font-family:"Inter",sans-serif;font-size:.9rem;font-weight:800;letter-spacing:.2px;
  display:inline-flex;align-items:center;gap:7px;line-height:1;white-space:nowrap;
  background:linear-gradient(135deg,#ffd451,#f6b400);color:#241a00;
  box-shadow:0 6px 18px rgba(246,180,0,.45), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .15s, box-shadow .2s, filter .15s;
}
.fab .fab-ic{height:22px;width:auto;display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.fab:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 10px 26px rgba(246,180,0,.6), inset 0 1px 0 rgba(255,255,255,.55)}
.fab:active{transform:scale(.97)}
/* móvil: fuera de la topbar para poder fijarlo al viewport (backdrop-filter
   de la barra crea su propio contexto y anclaría el fixed a la barra) */
.fab-mobile{
  display:none;
  position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:25;
  padding:13px 20px;font-size:.94rem;
  box-shadow:0 12px 28px rgba(0,0,0,.32), 0 6px 16px rgba(246,180,0,.5);
  animation:fabIn .5s ease;
}
@keyframes fabIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .fab-top{display:none}
  .fab-mobile{display:inline-flex}   /* mantener ícono + texto en línea (no apilados) */
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5)}

/* ---------- accesibilidad ---------- */
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.btn:focus-visible,.tab:focus-visible{outline-offset:3px}

/* ---------- responsive: 4 → 2 → 1 columnas ---------- */
@media (max-width:1100px){
  .groups-grid > .group-card,
  .ko-grid > .group-card{flex-basis:calc((100% - var(--grid-gap)) / 2)}
}
@media (max-width:560px){
  main{padding:14px 10px 90px}
  .topbar{padding:10px 14px}
  .brand{font-size:.85rem;gap:8px}
  .brand-logo{height:34px}
  .userbox{gap:8px}
  #userName{max-width:90px}
  .topbar .btn-ghost{padding:8px 10px;font-size:.8rem}
  .main-tabs{top:58px;overflow-x:auto;scrollbar-width:none}
  .main-tabs::-webkit-scrollbar{display:none}
  .main-tabs .tab{font-size:.74rem;padding:9px 8px;white-space:nowrap;flex:1 0 auto}
  .card{padding:20px}
  .trophy-hero{height:104px}
  .groups-grid,.ko-grid{gap:12px}
  .groups-grid > .group-card,
  .ko-grid > .group-card{flex-basis:100%}
  .stage-title{letter-spacing:2px;font-size:.92rem;margin-top:28px}
  th,td{padding:11px 9px;font-size:.86rem}
  .admin-tbl,.stats-table{display:block;overflow-x:auto;white-space:nowrap}
  body::after{width:70vmin;opacity:.06}
}


/* ---------- accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* identidad de la polla visible */
.pool-viewing{color:var(--muted-blue);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.rules-pool-name{color:var(--royal)}

/* progreso de pronósticos (dato sobrio) */
.pred-cell{white-space:nowrap}
.pred-sep{color:var(--muted);font-size:.82em}

/* tabla de la polla: columnas extra */
.lb-table .col-dif{color:var(--muted);font-weight:700;font-size:.86em}
.lb-table .col-sec{font-size:.92em}
/* en celular: mostrar solo lo esencial; el resto al ver la ficha del jugador */
@media (max-width:680px){
  .lb-table .col-sec{display:none}
}

.lb-table th{white-space:nowrap}
.lb-table .col-dif{white-space:nowrap}
/* compactar para que entre sin scroll horizontal */
.lb-table th,.lb-table td{padding:11px 7px;font-size:.86rem}
.lb-table td.rank,.lb-table th:first-child{padding-left:12px;width:34px}
.lb-table .num{padding-left:5px;padding-right:5px}
.lb-table .player-cell{padding-left:4px}
.lb-table .row-avatar{width:26px;height:26px;margin-right:7px}

/* ---------- panel resumen (hero) ---------- */
.hero-strip{display:flex;gap:12px;flex-wrap:wrap;margin:0 auto 4px;max-width:1100px}
.hero-card{
  flex:1 1 260px;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.92);border:0;border-radius:16px;padding:12px 16px;
  box-shadow:0 8px 22px rgba(8,14,60,.22);transition:transform .18s, box-shadow .2s;
  font-family:inherit;
}
.hero-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(8,14,60,.32)}
.hero-card:active{transform:translateY(0)}
.hero-ic{font-size:1.9rem;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(10,18,80,.2))}
.hero-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hero-body small{font-size:.72rem;color:var(--muted);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-body b{font-size:1.02rem;color:var(--ink);font-family:"Oswald","Inter",sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-match .hvs{color:var(--muted);font-weight:600;font-size:.82em;margin:0 2px}
.hero-arrow{color:var(--royal);font-size:1.4rem;font-weight:800;flex-shrink:0;line-height:1}
/* destello al saltar a un partido desde el panel */
.mrow.flash{animation:mflash 1.6s ease}
@keyframes mflash{0%,100%{background:transparent}25%{background:rgba(255,199,44,.28)}}
@media (max-width:560px){
  .hero-card{flex-basis:100%}
}

/* ---------- penales: quién avanza en eliminatoria empatada ---------- */
.ko-adv{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin-top:8px;
  padding-top:8px;border-top:1px dashed var(--line)}
.ko-adv-lbl{font-size:.68rem;color:var(--muted);font-weight:700;white-space:nowrap;flex-shrink:0}
.adv-btn{border:1.5px solid #d6dcf3;background:#fff;color:var(--ink);border-radius:999px;
  padding:4px 9px;font-size:.72rem;font-weight:800;cursor:pointer;font-family:inherit;
  transition:all .15s;display:inline-flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0}
.adv-btn:hover{border-color:var(--royal)}
.adv-btn.on{background:var(--royal);border-color:var(--royal);color:#fff}
.ko-adv.ro{font-size:.78rem;color:var(--muted)}
.adv-btn .flg{width:16px;height:12px}
.ko-adv.ro b{color:var(--royal)}

/* ---------- selector de modo de posiciones (segmentado, claro) ---------- */
.mode-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin:2px 0 10px}
.mode-cap{font-size:.74rem;font-weight:700;color:var(--muted-blue);letter-spacing:.3px}
.mode-toggle{
  display:inline-flex;gap:6px;padding:6px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  box-shadow:0 6px 18px rgba(8,14,60,.25);max-width:100%;
}
.mode-btn{
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  padding:12px 22px;border-radius:999px;font-size:1rem;font-weight:800;
  font-family:"Inter",sans-serif;color:var(--muted-blue);background:transparent;
  transition:all .2s;white-space:nowrap;
}
.mode-btn:hover{color:#fff}
.mode-btn.on{background:#fff;color:var(--royal);box-shadow:0 4px 14px rgba(8,14,60,.3)}
@media (max-width:560px){
  .mode-toggle{flex-direction:column;width:100%;border-radius:18px}
  .mode-btn{width:100%;justify-content:center;border-radius:14px;padding:13px}
}

/* ---------- banderas SVG (nítidas, iguales en todo dispositivo) ---------- */
.flg{display:inline-block;width:1.45em;height:1.08em;object-fit:cover;border-radius:2px;
  vertical-align:-.18em;box-shadow:0 0 0 1px rgba(0,0,0,.12);background:#eef1fb}
.tcode .flg{width:24px;height:18px;vertical-align:middle}
.gtable .flg,.stats-table .flg{width:20px;height:15px;vertical-align:-3px}
.side .flg{width:24px;height:18px;vertical-align:middle}
.hero-match .flg{width:22px;height:16px;vertical-align:-3px}
.vs-flag{width:52px;height:38px;border-radius:5px;box-shadow:0 3px 8px rgba(10,18,80,.25)}
.vs-cats .flg,.vs-meta .flg{width:18px;height:13px}

/* ---------- selector "pronosticando para" ---------- */
.pred-ctx{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:8px auto 4px;max-width:760px}
.pred-ctx-lbl{font-size:.82rem;font-weight:800;color:var(--muted-blue)}
.pred-ctx select{width:auto;min-width:230px;font-weight:700;background:#fff}

/* ---------- selector de hoja + botón copiar ---------- */
.pred-ctx select{width:auto;min-width:180px;font-weight:700;background:#fff}
.btn-ghost-sm{background:transparent;color:var(--royal);border:1.5px solid #c9d2ef;
  border-radius:9px;padding:6px 11px;font-size:.8rem;font-weight:700;cursor:pointer}
.btn-ghost-sm:hover{border-color:var(--royal);background:#eef2ff}

/* ---------- modal genérico ---------- */
.modal-ov{position:fixed;inset:0;background:rgba(16,26,64,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:200;padding:18px}
.modal{background:#fff;border-radius:16px;padding:22px;max-width:420px;width:100%;
  box-shadow:0 18px 50px rgba(16,26,64,.35)}
.modal h3{margin:0 0 .2em}
.modal .fld{display:block;margin:.6em 0}
.modal .fld span{display:block;font-size:.8rem;font-weight:700;color:var(--muted-blue);margin-bottom:4px}
.modal .fld select{width:100%}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:1.2em}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:#101a40;color:#fff;padding:11px 18px;border-radius:11px;font-weight:700;font-size:.9rem;
  box-shadow:0 10px 30px rgba(16,26,64,.4);opacity:0;pointer-events:none;transition:.25s;z-index:300}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- selector global de polla activa (bajo las pestañas) ---------- */
.pool-switcher{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 14px 2px}
.psw-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  background:#eef2ff;border:1.5px solid #d7defa;border-radius:13px;padding:8px 14px;max-width:780px}
.psw-lbl{font-size:.84rem;font-weight:800;color:var(--royal)}
.psw-name{font-size:1rem;color:var(--ink)}
.psw-inner select{width:auto;min-width:170px;font-weight:800;background:#fff;color:var(--ink)}

.psw-hint{text-align:center;font-size:.74rem;color:var(--muted-blue);margin:4px auto 0;opacity:.85}

/* ---------- resultados en vivo ---------- */
.live-strip{max-width:760px;margin:0 auto 16px;background:#fff;border:2px solid #ffd1d1;border-radius:14px;
  padding:10px 12px;box-shadow:0 8px 24px rgba(220,30,30,.12)}
.live-strip-h{font-weight:800;color:#d11;font-size:.9rem;margin-bottom:6px;text-align:center;letter-spacing:.02em}
.res-day{max-width:760px;margin:0 auto 14px}
.res-day-h{font-size:.9rem;font-weight:800;color:var(--royal);margin:14px 6px 6px;text-transform:capitalize}
.res-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  background:#fff;border:1.5px solid #e6ebfb;border-radius:11px;padding:9px 12px;margin:6px 0;position:relative}
.res-row.live{border-color:#ffb3b3;background:#fff7f7}
.res-team{display:flex;align-items:center;gap:7px;font-weight:700;min-width:0}
.res-team.home{justify-content:flex-end}
.res-team.away{justify-content:flex-start}
.res-team .flg{width:24px;height:16px;flex:none}
.res-team.win .rt-name{color:var(--royal)}
.res-team.win{font-weight:800}
.res-score{display:flex;align-items:center;gap:7px;font-size:1.25rem;font-weight:800;color:var(--ink);min-width:64px;justify-content:center}
.res-dash{color:var(--muted);font-weight:600}
.res-vs{font-size:.85rem;color:var(--muted);font-weight:700}
.res-meta{position:absolute;top:-9px;left:50%;transform:translateX(-50%)}
.live-badge{background:#d11;color:#fff;font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:20px;
  letter-spacing:.02em;animation:livepulse 1.4s ease-in-out infinite;white-space:nowrap}
.res-badge{background:#eef2ff;color:var(--muted-blue);font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.res-badge.done{background:#e3f7e8;color:#1c8a3b}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ---------- aviso de versión nueva ---------- */
.update-banner{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:400;
  background:var(--royal);color:#fff;padding:10px 14px;border-radius:12px;font-weight:700;font-size:.9rem;
  box-shadow:0 12px 32px rgba(16,26,64,.45);display:flex;align-items:center;gap:10px}
.update-banner button{background:#fff;color:var(--royal);border:0;border-radius:9px;padding:6px 12px;
  font-weight:800;cursor:pointer;font-size:.85rem}

/* ---------- resultado real dentro de la tarjeta de pronóstico ---------- */
.result-foot{margin-top:6px;padding-top:6px;border-top:1px dashed #e0e5f4;margin-bottom:0}
.result-foot.live{border-top-color:#ffc9c9}
.result{font-size:.74rem;color:var(--muted);font-weight:700}
.result b{color:var(--ink);font-size:.92rem}
.result.live b{color:#d11}
.live-badge.sm{font-size:.58rem;padding:1px 6px}
.pts.win{background:linear-gradient(135deg,#c9f7d6,#9fe8b4);color:#1c7a37}

/* ---------- marcador real en la tarjeta de Resultados ---------- */
.res-mid{display:flex;align-items:center;gap:8px;justify-content:center;min-width:60px;
  font-size:1.2rem;font-weight:800;color:var(--ink)}
.res-mid .vs{color:var(--muted);font-weight:600;font-size:1rem}
.res-mid.live b{color:#d11}
.res-mid.pend{color:var(--muted);font-weight:600}
.mrow.live{border-color:#ffb3b3;background:#fff7f7}
.tcode.res-win{font-weight:800}
.tcode.res-win .code{color:var(--royal)}

/* ---------- noticias ---------- */
.news-feed{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.news-item{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1.5px solid #e6ebfb;
  border-radius:13px;padding:12px 14px}
.news-ic{font-size:1.4rem;line-height:1;flex:none;margin-top:1px}
.news-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.news-title{font-size:.96rem;color:var(--ink);font-weight:800;line-height:1.25}
.news-meta{font-size:.74rem;color:var(--muted);font-weight:600}
.news-time{color:var(--muted-blue);filter:brightness(.7)}
.news-item.news-new{animation:newsIn .5s ease; border-color:#ffd6a8; background:#fff9f0}
@keyframes newsIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* punto de "nuevo" en la pestaña Noticias */
.main-tabs .tab.has-new::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#ff5a5a;margin-left:6px;vertical-align:middle;box-shadow:0 0 0 2px rgba(255,90,90,.3)}

/* ---------- blog/newsletter de noticias ---------- */
.art-feed{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.art-card{display:flex;gap:0;background:#fff;border:1.5px solid #e6ebfb;border-radius:14px;
  overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .15s}
.art-card:hover{box-shadow:0 10px 28px rgba(16,26,64,.16);transform:translateY(-1px)}
.art-img{width:150px;min-height:118px;object-fit:cover;flex:none;background:#eef2ff;align-self:stretch}
.art-body{display:flex;flex-direction:column;gap:5px;padding:11px 14px;min-width:0;flex:1}
.art-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.art-tag{font-size:.62rem;font-weight:800;background:#eef2ff;color:var(--royal);padding:2px 8px;
  border-radius:20px;text-transform:uppercase;letter-spacing:.03em}
.art-tag.curio{background:#fff3c4;color:#8a6400}
.art-time{font-size:.7rem;color:var(--muted)}
.art-title{font-size:.97rem;font-weight:800;line-height:1.25;color:var(--ink)}
.art-summary{font-size:.82rem;color:var(--muted);line-height:1.4;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-more{font-size:.76rem;font-weight:800;color:var(--royal);margin-top:1px}
.art-card.curio{background:#fffdf5;border-color:#f3e6b8}
.art-card.news-new{animation:newsIn .5s ease}
@media(max-width:560px){
  .art-card{flex-direction:column}
  .art-img{width:100%;height:170px;min-height:0}
}


/* ---------- avatares ---------- */
.avatar-btn{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.55);
  padding:0;cursor:pointer;background:#1b33ad;overflow:hidden;flex:none;
  transition:border-color .2s, transform .15s}
.avatar-btn:hover{border-color:#fff;transform:scale(1.06)}
.avatar-btn svg{width:100%;height:100%;display:block}
.player-cell{display:flex;align-items:center}
.row-avatar{width:30px;height:30px;border-radius:50%;margin-right:9px;overflow:hidden;flex:none;
  display:inline-flex;border:1.5px solid #d7defa}
.row-avatar svg{width:100%;height:100%;display:block}
.player-cell > span:not(.see-picks):not(.row-avatar){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-cell .see-picks{margin-left:7px;flex:none}
.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:2px 0 4px}
.avatar-opt{padding:6px 4px;border:2px solid transparent;border-radius:14px;background:#f4f6fd;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px}
.avatar-opt .av-circ{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;display:block}
.avatar-opt .av-circ svg{width:100%;height:100%;display:block}
.avatar-opt small{font-size:.6rem;font-weight:700;color:var(--muted);line-height:1.1;text-align:center}
.avatar-opt:hover{border-color:#c9d2ef}
.avatar-opt.sel{border-color:var(--royal);background:#e4eaff}
.avatar-opt.sel small{color:var(--royal)}

/* ---------- tarjeta de jugador (estilo FIFA) ---------- */
.modal-card{text-align:center}
.fut-card{width:236px;margin:0 auto;border-radius:18px;padding:15px 16px 13px;color:#2a1f00;
  background:linear-gradient(165deg,#fbe9a0 0%,#edc04a 48%,#d6a323 100%);
  box-shadow:0 16px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.6)}
.fut-head{display:flex;justify-content:space-between;align-items:flex-start}
.fut-rating{line-height:.85;text-align:left}
.fut-rating b{font-family:"Oswald","Inter",sans-serif;font-size:2.1rem;font-weight:700}
.fut-rating span{display:block;font-size:.62rem;font-weight:800;letter-spacing:.08em}
.fut-flag{font-size:1.7rem;line-height:1}
.fut-kit{width:98px;height:98px;margin:2px auto 7px;border-radius:50%;overflow:hidden;
  border:3px solid rgba(255,255,255,.6);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.fut-kit svg{width:100%;height:100%;display:block}
.fut-name{font-family:"Oswald","Inter",sans-serif;font-weight:700;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.1}
.fut-country{font-size:.74rem;font-weight:700;opacity:.78;margin:1px 0 9px}
.fut-stats{display:flex;justify-content:space-around;gap:6px;
  border-top:1.5px solid rgba(0,0,0,.18);padding-top:9px}
.fut-stats span{display:flex;flex-direction:column;align-items:center;font-size:.58rem;font-weight:800;
  letter-spacing:.02em;text-transform:uppercase}
.fut-stats b{font-family:"Oswald","Inter",sans-serif;font-size:1.15rem;font-weight:700;line-height:1}

/* ---------- admin: toggle de entrada + badge ---------- */
.late-tgl{border:1.5px solid #c9d2ef;border-radius:999px;padding:4px 10px;font-size:.7rem;font-weight:800;
  cursor:pointer;background:#fff;color:var(--muted);white-space:nowrap}
.late-tgl.on{background:#e3f7e8;border-color:#9fe8b4;color:#1c7a37}
.late-tgl.off{background:#fdeaea;border-color:#f5c2c2;color:#b3261e}
.admin-badge{font-size:.58rem;font-weight:800;background:#ffe89a;color:#8a6400;padding:2px 8px;
  border-radius:20px;vertical-align:middle;text-transform:uppercase;letter-spacing:.03em}

/* ---------- prórroga individual ---------- */
.grace-banner{max-width:780px;margin:8px auto 4px;background:#fff7e6;border:1.5px solid #ffd98a;
  border-radius:12px;padding:10px 14px;color:#8a5a00;font-weight:600;font-size:.86rem;text-align:center}
.lock.grace{background:#fff3c4;color:#8a6400;font-weight:800}