/* ECO MEXA — Simulador del Mundial 2026 (estética prehispánica)
   Reusa variables :root de /assets/styles.css */

body.sim { background:
  radial-gradient(1200px 600px at 50% -10%, rgba(179,37,42,.18), transparent 60%),
  radial-gradient(1000px 500px at 10% 100%, rgba(24,160,111,.12), transparent 60%),
  var(--obsidian); }
.sim-main { padding-top: 64px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px,4vw,40px); }

/* ---- Hero ---- */
.sim-hero { padding: 3.5rem 0 1.5rem; text-align: center; }
.sim-hero h1 { font-size: clamp(2.4rem,7vw,4.4rem); letter-spacing:.06em;
  background: linear-gradient(180deg,#fff,var(--bone) 40%,var(--gold-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sim-hero h1 .accent { color: var(--gold-soft); -webkit-text-fill-color: var(--gold-soft); }
.sim-hero__sub { color: var(--bone-dim); max-width: 640px; margin:.9rem auto 1.6rem; font-size: clamp(1rem,2vw,1.15rem); }
.sim-modes { margin: 1.4rem 0; }
.sim-modes__label { display:block; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--jade); margin-bottom:.7rem; }
.seg { display:inline-flex; flex-wrap:wrap; justify-content:center; gap:.3rem; padding:.35rem; border-radius:999px; border:1px solid rgba(217,169,58,.3); background:rgba(10,10,12,.6); }
.seg__btn { padding:.6rem 1.1rem; border-radius:999px; border:0; background:transparent; color:var(--bone-dim); font:inherit; font-weight:600; font-size:.9rem; cursor:pointer; transition:all .2s; }
.seg__btn.is-active { background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#2a1d05; }
.sim-hint { color:var(--bone-dim); font-size:.86rem; margin:.8rem auto 0; max-width:560px; line-height:1.5; }
.sim-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:.4rem; }

/* arrastrar para ordenar (modo rank) */
.standings tr.draggable { cursor:grab; }
.standings tr.draggable:active { cursor:grabbing; }
.standings tr.draggable .tname::before { content:"⠿"; color:var(--bone-faint); margin-right:.1rem; font-size:.8rem; }
.standings tr.dragging { opacity:.4; }
.standings tr.dragover td { box-shadow:inset 0 2px 0 var(--gold); }
.sim-live { margin:1.2rem auto 0; max-width:680px; padding:.7rem 1rem; border-radius:12px; border:1px solid rgba(179,37,42,.4); background:rgba(179,37,42,.12); color:#f0c0c0; font-size:.9rem; }
.sim-live .dot { display:inline-block; width:8px;height:8px;border-radius:50%;background:#e0484d; margin-right:.5rem; animation:pulse 1.6s infinite; }
.sim-stats { margin:1rem auto 0; max-width:760px; padding:.8rem 1rem; border-radius:12px; border:1px solid rgba(24,160,111,.3); background:rgba(24,160,111,.08); color:var(--bone-dim); font-size:.9rem; }
.sim-stats b { color: var(--jade); }

/* ---- Secciones ---- */
.sim-section { padding: 2.6rem 0; }
.sim-h2 { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.6rem); text-align:center; margin-bottom:.5rem; }
.sim-h2 .accent { color:var(--gold-soft); }
.sim-note { text-align:center; color:var(--bone-dim); font-size:.95rem; margin-bottom:1.8rem; }

/* ---- Escudo de bandera (greca) ---- */
.flag { width:30px; height:30px; border-radius:50%; flex:none; object-fit:cover;
  border:2px solid var(--gold); box-shadow:0 0 0 2px rgba(10,10,12,.9),0 0 0 3px rgba(217,169,58,.35); background:#222; }
.flag.lg { width:46px; height:46px; }
.flag.xl { width:84px; height:84px; border-width:3px; }

/* ---- Progreso global ---- */
.group-progress { max-width:560px; margin:0 auto 2rem; text-align:center; }
.gp-bar { height:8px; border-radius:999px; background:rgba(236,230,216,.12); overflow:hidden; }
.gp-fill { height:100%; background:linear-gradient(90deg,var(--jade),var(--gold)); border-radius:999px; transition:width .4s ease; }
.gp-txt { display:inline-block; margin-top:.5rem; font-size:.85rem; color:var(--bone-dim); }

/* ---- Grupos ---- */
.groups-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1.2rem; }
.group-card { background:linear-gradient(165deg,var(--obsidian-2),var(--stone)); border:1px solid rgba(236,230,216,.1); border-radius:16px; overflow:hidden; transition:border-color .25s; }
.group-card.is-done { border-color:rgba(24,160,111,.45); }
.group-card__head { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; border-bottom:1px solid rgba(217,169,58,.18); }
.group-card__head h3 { font-family:var(--font-display); font-size:1.1rem; color:var(--gold-soft); letter-spacing:.1em; }
.gstatus { font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.22rem .6rem; border-radius:999px; }
.gstatus.done { color:#8fe3c0; background:rgba(24,160,111,.18); border:1px solid rgba(24,160,111,.45); }
.gstatus.pending { color:var(--bone-faint); background:rgba(236,230,216,.06); border:1px solid rgba(236,230,216,.16); }

/* ---- Modo ordenar / quién avanza ---- */
.rank-list, .adv-list { padding:.6rem .7rem; display:grid; gap:.35rem; }
.rank-hint { font-size:.74rem; color:var(--bone-faint); margin:0 0 .2rem; text-align:center; }
.rank-hint.ok { color:var(--jade); }
.rank-row, .adv-row { display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem; border-radius:10px; border:1px solid rgba(236,230,216,.08); background:rgba(10,10,12,.4); cursor:pointer; transition:background .15s,border-color .15s; }
.rank-row { cursor:grab; }
.rank-row:active { cursor:grabbing; }
.rank-row:hover, .adv-row:hover { border-color:rgba(217,169,58,.3); }
.rank-row.dragging { opacity:.4; }
.rank-row.dragover { box-shadow:inset 0 2px 0 var(--gold); }
.rank-row .sname, .adv-row .sname { flex:1; font-size:.85rem; color:var(--bone); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-badge { width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:50%; font-size:.75rem; font-weight:700; background:rgba(236,230,216,.1); color:var(--bone-dim); }
.rank-row.qual { border-color:rgba(24,160,111,.4); background:rgba(24,160,111,.1); }
.rank-row.qual .pos-badge { background:var(--jade); color:#04140e; }
.rank-row.third { border-color:rgba(217,169,58,.3); }
.rank-row.third .pos-badge { background:rgba(217,169,58,.3); color:var(--gold-soft); }
.tag { font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.18rem .45rem; border-radius:6px; }
.tag.pass { color:#8fe3c0; background:rgba(24,160,111,.2); }
.tag.maybe { color:var(--gold-soft); background:rgba(217,169,58,.16); }
/* avanza */
.adv-check { width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:50%; font-size:.8rem; font-weight:700; border:1.5px solid rgba(236,230,216,.25); color:var(--bone-faint); }
.adv-row.on { border-color:var(--jade); background:rgba(24,160,111,.14); }
.adv-row.on .adv-check { background:var(--jade); border-color:var(--jade); color:#04140e; }
.adv-row.on .sname { color:#fff; font-weight:600; }
.matches { padding:.5rem .8rem; display:grid; gap:.35rem; }
.match { display:flex; align-items:center; gap:.5rem; padding:.35rem .2rem; border-radius:8px; }
.match.locked { opacity:.85; }
.match__side { display:flex; align-items:center; gap:.45rem; flex:1; min-width:0; }
.match__side.right { flex-direction:row-reverse; text-align:right; }
.match__name { font-size:.82rem; color:var(--bone); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.match__score { width:34px; }
.match__score input { width:34px; height:30px; text-align:center; border-radius:7px; border:1px solid rgba(236,230,216,.2); background:rgba(10,10,12,.6); color:#fff; font:inherit; font-weight:700; }
.match__score input:disabled { background:rgba(60,60,66,.5); color:var(--bone-faint); border-color:transparent; }
.match__vs { font-size:.7rem; color:var(--bone-faint); }
.match.locked .match__name { color:var(--bone-dim); }
.lockbadge { font-size:.6rem; color:var(--bone-faint); letter-spacing:.08em; }
/* botones "quién gana" (modos rank/advance) */
.pick { cursor:pointer; border-radius:8px; transition:background .15s; }
.pick:hover { background:rgba(217,169,58,.1); }
.pick.win { background:rgba(24,160,111,.16); box-shadow:inset 3px 0 0 var(--jade); }

/* tabla de posiciones */
.standings { width:100%; border-collapse:collapse; margin-top:.3rem; }
.standings th,.standings td { padding:.3rem .45rem; font-size:.76rem; }
.standings th { color:var(--bone-faint); font-weight:600; text-align:center; border-bottom:1px solid rgba(236,230,216,.1); }
.standings td { text-align:center; color:var(--bone-dim); }
.standings td.tname { text-align:left; color:var(--bone); display:flex; align-items:center; gap:.4rem; }
.standings tr.qual td { color:#fff; }
.standings tr.qual .pos { color:var(--jade); font-weight:700; }
.standings tr.third .pos { color:var(--gold-soft); }
.team.home .match__name, .standings tr .tname.home { color:#fff; font-weight:700; }
.flag.home { border-color:var(--jade); box-shadow:0 0 0 2px rgba(10,10,12,.9),0 0 10px rgba(24,160,111,.6); }

/* ---- Terceros ---- */
.thirds { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.7rem; max-width:900px; margin:0 auto; }
.third-chip { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius:12px; border:1px solid rgba(217,169,58,.25); background:linear-gradient(160deg,rgba(217,169,58,.08),rgba(10,10,12,.4)); }
.third-chip.in { border-color:var(--jade); }
.third-chip .small { font-size:.7rem; color:var(--bone-faint); }
.third-chip.out { opacity:.4; }

/* ---- Bracket ---- */
.bracket-scroll { overflow-x:auto; padding-bottom:1rem; }
.bracket { display:flex; gap:clamp(14px,2vw,34px); min-width:max-content; align-items:center; }
.round { display:flex; flex-direction:column; justify-content:space-around; gap:.7rem; }
.round__title { font-family:var(--font-display); font-size:.78rem; letter-spacing:.1em; color:var(--gold-soft); text-align:center; margin-bottom:.3rem; text-transform:uppercase; }
.tie { display:flex; flex-direction:column; gap:2px; width:190px; background:linear-gradient(160deg,var(--obsidian-2),var(--stone)); border:1px solid rgba(236,230,216,.1); border-radius:12px; padding:.3rem; }
.tie.locked { border-color:rgba(120,120,128,.3); }
.slot { display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border-radius:8px; cursor:pointer; transition:background .15s; }
.slot:hover { background:rgba(217,169,58,.12); }
.slot.win { background:rgba(24,160,111,.18); }
.slot.lose { opacity:.45; }
.slot.empty { color:var(--bone-faint); cursor:default; }
.slot .sname { font-size:.8rem; color:var(--bone); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.tie.locked .slot { cursor:default; }
.tie.locked .slot.win { background:rgba(120,120,128,.18); box-shadow:inset 3px 0 0 #8a8a92; }
.slot .rscore { font-size:.78rem; font-weight:700; color:var(--bone-dim); }

/* ---- Campeón ---- */
.sim-champion { padding:3rem 0 4rem; text-align:center; }
.champ-card { max-width:520px; margin:0 auto; padding:2.4rem 2rem; border-radius:24px; border:1px solid rgba(217,169,58,.4); background:linear-gradient(165deg,rgba(217,169,58,.12),var(--obsidian)); position:relative; overflow:hidden; animation:popIn .5s ease; }
.champ-card .eyebrow { justify-content:center; }
.champ-card h2 { font-size:clamp(2rem,6vw,3rem); margin:.6rem 0; }
.champ-card .trophy { font-size:4rem; }
.champ-card.home { border-color:var(--jade); box-shadow:0 0 50px rgba(24,160,111,.4); }
.champ-card .acc { color:var(--bone-dim); font-size:.95rem; }
.confetti { position:fixed; inset:0; pointer-events:none; z-index:90; }

/* ---- Toast ---- */
.toast { position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:100; background:rgba(10,10,12,.96); border:1px solid var(--gold); color:var(--bone); padding:.8rem 1.3rem; border-radius:999px; font-size:.9rem; box-shadow:var(--shadow); }

/* ---- Contenido SEO ---- */
.sim-seo { padding:3rem 0 1rem; border-top:1px solid rgba(236,230,216,.08); }
.sim-seo h2 { font-family:var(--font-display); font-size:1.6rem; color:var(--bone); margin-bottom:.8rem; }
.sim-seo h3 { font-family:var(--font-display); font-size:1.25rem; color:var(--gold-soft); margin:1.6rem 0 .7rem; }
.sim-seo p { color:var(--bone-dim); max-width:760px; line-height:1.75; margin-bottom:1rem; }
.sim-seo strong { color:var(--bone); }
.sim-seo details { max-width:760px; border:1px solid rgba(236,230,216,.1); border-radius:10px; padding:.7rem 1rem; margin-bottom:.6rem; background:rgba(10,10,12,.4); }
.sim-seo summary { cursor:pointer; color:var(--bone); font-weight:600; font-size:.95rem; }
.sim-seo details p { margin:.6rem 0 0; }

@keyframes flash { 0%{background:rgba(24,160,111,.5);} 100%{background:transparent;} }
.flash { animation:flash .6s ease; }

@media (max-width:560px){
  .seg__btn{ padding:.5rem .8rem; font-size:.82rem; }
  .groups-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;} }