:root{
  --miw-bg-1:#030712;
  --miw-bg-2:#0b1220;
  --miw-bg-3:#101a2e;
  --miw-card:#0f172a;
  --miw-card-2:#111c34;
  --miw-line:rgba(148,163,184,.18);
  --miw-text:#e5eefc;
  --miw-muted:#94a3b8;
  --miw-accent:#38bdf8;
  --miw-accent-2:#22d3ee;
  --miw-gold:#facc15;
  --miw-ok:#22c55e;
  --miw-danger:#ef4444;
  --miw-arg:#7dd3fc;
  --miw-shadow:0 16px 40px rgba(0,0,0,.35);

  --stage-r32:#64748b;
  --stage-r16:#38bdf8;
  --stage-qf:#a78bfa;
  --stage-sf:#f59e0b;
  --stage-final:#facc15;
}

body{
  background:
    radial-gradient(circle at top left, rgba(34,211,238,.14), transparent 28%),
    radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 30%),
    linear-gradient(180deg, var(--miw-bg-1), var(--miw-bg-2) 42%, #020617 100%);
  color:var(--miw-text);
}

.sim-page{
  padding-bottom:3rem;
}

.sim-hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(56,189,248,.18);
  background:linear-gradient(135deg, rgba(15,23,42,.94), rgba(10,16,30,.98));
  border-radius:24px;
  box-shadow:var(--miw-shadow);
  padding:1.4rem;
}

.sim-hero::before{
  content:"";
  position:absolute;
  inset:-20% auto auto -10%;
  width:260px;
  height:260px;
  background:radial-gradient(circle, rgba(34,211,238,.15), transparent 66%);
  pointer-events:none;
}

.sim-hero::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-20px;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(56,189,248,.12), transparent 66%);
  pointer-events:none;
}

.sim-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .8rem;
  border-radius:999px;
  background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.22);
  color:#d9f6ff;
  font-size:.84rem;
  font-weight:600;
}

.sim-title{
  font-size:clamp(1.7rem,4vw,2.8rem);
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.02em;
  margin:.85rem 0 .55rem;
}

.sim-lead{
  color:#c7d6ea;
  max-width:860px;
  margin:0;
}

.sim-top-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1rem;
}

.sim-btn{
  border:none;
  border-radius:14px;
  padding:.8rem 1rem;
  font-weight:700;
  transition:.18s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  cursor:pointer;
}

.sim-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}

.sim-btn-primary{
  background:linear-gradient(135deg, var(--miw-accent), var(--miw-accent-2));
  color:#00121a;
}

.sim-btn-dark{
  background:#0b1327;
  color:var(--miw-text);
  border:1px solid rgba(148,163,184,.18);
}

.sim-btn-gold{
  background:linear-gradient(135deg, #facc15, #f59e0b);
  color:#1f1300;
}

.sim-btn-outline{
  background:transparent;
  color:#dbeafe;
  border:1px solid rgba(148,163,184,.25);
}

.sim-progress{
  margin-top:1rem;
  padding:1rem;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(2,6,23,.5);
}

.sim-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.7rem;
}

.sim-step{
  border-radius:16px;
  padding:.8rem;
  background:rgba(15,23,42,.6);
  border:1px solid rgba(148,163,184,.12);
  min-height:74px;
}

.sim-step.active{
  border-color:rgba(56,189,248,.45);
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.18);
}

.sim-step.done{
  border-color:rgba(34,197,94,.34);
}

.sim-step small{
  display:block;
  color:var(--miw-muted);
  margin-bottom:.2rem;
}

.sim-step strong{
  display:block;
  font-size:.98rem;
}

.sim-counter{
  color:#bfefff;
  font-weight:700;
}

.sim-section{
  margin-top:1.3rem;
  padding:1.15rem;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(8,13,24,.98));
  border:1px solid rgba(148,163,184,.12);
  box-shadow:var(--miw-shadow);
}

.sim-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

.sim-section-title h2{
  margin:0;
  font-size:1.2rem;
  font-weight:800;
}

.sim-section-title p{
  margin:0;
  color:var(--miw-muted);
}


.sim-groups-grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:.75rem;
}

@media (min-width:768px){
  .sim-groups-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:1100px){
  .sim-groups-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (min-width:1400px){
  .sim-groups-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
}

.group-card{
  border-radius:16px;
  background:linear-gradient(180deg, rgba(16,26,46,.98), rgba(10,16,30,.98));
  border:1px solid rgba(56,189,248,.12);
  overflow:hidden;
}

.group-head{
  padding:.55rem .7rem;
  border-bottom:1px solid rgba(148,163,184,.08);
  background:linear-gradient(135deg, rgba(56,189,248,.14), rgba(34,211,238,.06));
}

.group-head-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
}

.group-title{
  margin:0;
  font-size:.98rem;
  font-weight:800;
}

.group-status{
  font-size:.75rem;
  color:#dff7ff;
  padding:.2rem .5rem;
  border-radius:999px;
  background:rgba(56,189,248,.16);
  border:1px solid rgba(56,189,248,.2);
}

.group-status.ok{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.24);
  color:#dcfce7;
}

.group-body{
  padding:.55rem;
}

.team-row{
  display:grid;
  grid-template-columns:24px 1fr 48px;
  gap:.4rem;
  align-items:center;
  padding:.32rem .38rem;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.08);
  background:rgba(2,6,23,.35);
  margin-bottom:.32rem;
  min-height:46px;
}

.team-flag{
  width:24px;
  height:17px;
  border-radius:4px;
  object-fit:cover;
  background:#0f172a;
  border:1px solid rgba(255,255,255,.08);
}

.team-name{
  font-weight:700;
  font-size:.78rem;
  line-height:1.05;
}

.team-meta{
  display:block;
  color:var(--miw-muted);
  font-size:.62rem;
  margin-top:.05rem;
}

.position-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
}

.pos-btn{
  width:22px;
  height:18px;
  border-radius:6px;
  border:1px solid rgba(148,163,184,.16);
  background:#091223;
  color:#dbeafe;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  line-height:1;
  cursor:pointer;
  transition:.15s ease;
  padding:0;
}

.pos-btn:hover:not(:disabled){
  border-color:rgba(56,189,248,.35);
  background:#0c1730;
  transform:translateY(-1px);
}

.pos-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.pos-value{
  min-width:26px;
  text-align:center;
  font-size:.64rem;
  font-weight:800;
  color:#e5eefc;
  padding:.05rem .15rem;
  border-radius:999px;
  background:rgba(56,189,248,.12);
}

.group-actions{
  display:flex;
  gap:.5rem;
  margin-top:.65rem;
  flex-wrap:wrap;
}

.sim-note{
  color:var(--miw-muted);
  font-size:.88rem;
}

.thirds-grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:.75rem;
}

@media (min-width:768px){
  .thirds-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:1100px){
  .thirds-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

.third-card{
  border-radius:18px;
  padding:.9rem;
  background:linear-gradient(180deg, rgba(13,20,38,.96), rgba(7,12,24,.98));
  border:1px solid rgba(148,163,184,.12);
  transition:.18s ease;
  cursor:pointer;
}

.third-card.selected{
  border-color:rgba(250,204,21,.45);
  box-shadow:inset 0 0 0 1px rgba(250,204,21,.16);
  background:linear-gradient(180deg, rgba(43,35,6,.4), rgba(16,12,3,.5));
}

.third-card.disabled{
  opacity:.62;
}

.third-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
}

.third-pick{
  padding:.18rem .5rem;
  border-radius:999px;
  font-size:.76rem;
  background:rgba(148,163,184,.12);
  color:#dbeafe;
}

.third-card.selected .third-pick{
  background:rgba(250,204,21,.2);
  color:#fff5c2;
}

.bracket-stage{
  margin-top:1rem;
  padding:.9rem;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(3,8,20,.4);
}

.bracket-stage h3{
  font-size:1rem;
  font-weight:800;
  margin:0 0 .75rem;
  padding-bottom:.45rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.bracket-grid{
  display:grid;
  grid-template-columns:repeat(1,1fr);
  gap:.75rem;
}

@media (min-width:768px){
  .bracket-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (min-width:1100px){
  .bracket-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (min-width:1400px){
  .bracket-grid{
    grid-template-columns:repeat(4,1fr);
  }
}


/* 32 mejores */

.bracket-stage.stage-r32{
  border-color:rgba(100,116,139,.42);
  background:linear-gradient(180deg, rgba(51,65,85,.22), rgba(15,23,42,.72));
  box-shadow:inset 0 0 0 1px rgba(100,116,139,.12);
}

.bracket-stage.stage-r32 h3{
  color:#cbd5e1;
}

/* Octavos */

.bracket-stage.stage-r16{
  border-color:rgba(56,189,248,.42);
  background:linear-gradient(180deg, rgba(8,47,73,.28), rgba(15,23,42,.72));
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.12);
}

.bracket-stage.stage-r16 h3{
  color:#a5f3fc;
}

/* Cuartos */

.bracket-stage.stage-qf{
  border-color:rgba(167,139,250,.42);
  background:linear-gradient(180deg, rgba(59,7,100,.22), rgba(15,23,42,.72));
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.12);
}

.bracket-stage.stage-qf h3{
  color:#ddd6fe;
}

/* Semifinal */

.bracket-stage.stage-sf{
  border-color:rgba(245,158,11,.42);
  background:linear-gradient(180deg, rgba(120,53,15,.24), rgba(15,23,42,.72));
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.12);
}

.bracket-stage.stage-sf h3{
  color:#fde68a;
}

/* Final */

.bracket-stage.stage-final{
  border-color:rgba(250,204,21,.5);
  background:linear-gradient(180deg, rgba(113,63,18,.32), rgba(15,23,42,.76));
  box-shadow:inset 0 0 0 1px rgba(250,204,21,.16);
}

.bracket-stage.stage-final h3{
  color:#fef08a;
}

.match-grid{
display:grid;
grid-template-columns:repeat(1,minmax(0,1fr));
gap:.8rem;
}

@media (min-width:768px){
.match-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

/* 32 mejores */
@media (min-width:1200px){
.stage-r32 .match-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
}
}

/* octavos */
@media (min-width:1200px){
.stage-r16 .match-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}

/* cuartos */
@media (min-width:1200px){
.stage-qf .match-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
.match-card{
  border-radius:18px;
  padding:.9rem;
  border:1px solid rgba(148,163,184,.12);
  background:linear-gradient(180deg, rgba(13,20,38,.98), rgba(6,10,18,.98));
}

.match-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.7rem;
}

.match-label{
  font-size:.78rem;
  color:var(--miw-muted);
  font-weight:700;
}

.match-pick{
  font-size:.77rem;
  color:#dbeafe;
  background:rgba(56,189,248,.12);
  padding:.2rem .5rem;
  border-radius:999px;
}

.stage-r32 .match-card{
  padding:.48rem;
  border-radius:12px;
}

.stage-r32 .team-pick-btn{
  padding:.38rem .48rem;
  font-size:.74rem;
  margin-bottom:.28rem;
  border-radius:10px;
}

.stage-r32 .match-head{
  margin-bottom:.45rem;
}

.stage-r32 .match-label,
.stage-r32 .match-pick{
  font-size:.68rem;
}

.team-pick-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  background:#081121;
  border:1px solid rgba(148,163,184,.14);
  color:#e5eefc;
  padding:.7rem .8rem;
  border-radius:14px;
  font-weight:700;
  margin-bottom:.55rem;
  transition:.15s ease;
}

.team-pick-btn:hover{
  border-color:rgba(56,189,248,.32);
  transform:translateY(-1px);
}

.team-pick-btn.selected{
  border-color:rgba(34,197,94,.45);
  background:rgba(34,197,94,.12);
}

.final-card{
  margin-top:1rem;
  border-radius:24px;
  padding:1.25rem;
  text-align:center;
  background:
    radial-gradient(circle at top, rgba(250,204,21,.16), transparent 45%),
    linear-gradient(180deg, rgba(17,24,39,.98), rgba(8,12,22,.99));
  border:1px solid rgba(250,204,21,.24);
  box-shadow:0 18px 45px rgba(0,0,0,.34);
}

.final-card .champion-flag{
  width:64px;
  height:44px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
}

.final-card h3{
  margin:.9rem 0 .4rem;
  font-size:1.6rem;
  font-weight:900;
}

.final-card p{
  color:#d6e4f7;
  margin-bottom:.8rem;
}

.anulo-mufa{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .9rem;
  border-radius:999px;
  font-weight:800;
  color:#f8fdff;
  background:linear-gradient(135deg, rgba(125,211,252,.24), rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 0 24px rgba(125,211,252,.22);
}

.sim-share-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  margin-top:1rem;
}

@media (min-width:768px){
  .sim-share-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

.share-card{
  border-radius:18px;
  border:1px solid rgba(148,163,184,.12);
  background:#091223;
  padding:.85rem;
  text-align:center;
}

.share-card strong{
  display:block;
  margin-top:.25rem;
  font-size:.95rem;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:1rem;
}

@media (min-width:992px){
  .stats-grid{
    grid-template-columns:1.15fr .85fr;
  }
}

.stats-card{
  border-radius:20px;
  padding:1rem;
  border:1px solid rgba(148,163,184,.12);
  background:linear-gradient(180deg, rgba(12,20,36,.98), rgba(8,12,22,.99));
}

.stats-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.stats-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:.75rem;
  align-items:center;
}

.stats-bar-wrap{
  height:10px;
  border-radius:999px;
  background:rgba(148,163,184,.12);
  overflow:hidden;
}

.stats-bar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--miw-accent), var(--miw-accent-2));
}

.latest-list{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.latest-item{
  display:flex;
  justify-content:space-between;
  gap:.8rem;
  align-items:center;
  padding:.72rem .8rem;
  border-radius:15px;
  background:rgba(2,6,23,.35);
  border:1px solid rgba(148,163,184,.08);
}

.sim-ad{
  margin:1rem 0;
  text-align:center;
}

.sim-preview-wrap{
  margin-top:1rem;
  text-align:center;
}

.sim-preview-wrap canvas,
.sim-preview-wrap img{
  max-width:100%;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.16);
}

.hidden{
  display:none !important;
}

@media (max-width:767px){
  .sim-steps{
    grid-template-columns:repeat(2,1fr);
  }

  .sim-title{
    font-size:1.8rem;
  }

  .sim-section,
  .sim-hero{
    border-radius:20px;
  }

  .team-row{
    grid-template-columns:24px 1fr 48px;
    gap:.45rem;
    min-height:52px;
  }

  .team-name{
    font-size:.82rem;
  }

  .team-meta{
    font-size:.66rem;
  }

  .pos-btn{
    width:24px;
    height:20px;
  }

  .stage-r32 .match-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
BLOQUE FINAL PREMIUM
========================= */

.finals-stage{
  margin-top:2rem;
  padding:1.2rem;
  border-radius:22px;
  border:1px solid rgba(250,204,21,.35);
  background:linear-gradient(180deg,rgba(113,63,18,.32),rgba(15,23,42,.85));
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}

.finals-stage h2{
  margin:0 0 1rem;
  font-size:1.25rem;
  font-weight:800;
  text-align:center;
  color:#fef08a;
}

.finals-layout{
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:1rem;
  align-items:stretch;
}

.final-box{
  padding:1rem;
  border-radius:18px;
  background:rgba(2,6,23,.62);
  border:1px solid rgba(250,204,21,.24);
}

.final-box h3{
  margin:0 0 .75rem;
  font-size:1rem;
  font-weight:800;
}

.final-box .fixture-line{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .55rem;
  margin-bottom:.4rem;
  border-radius:12px;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(148,163,184,.12);
  font-weight:700;
}

.final-box .fixture-line img{
  width:18px;
  height:13px;
  object-fit:cover;
  border-radius:2px;
}

.final-box.center-final{
  border-color:rgba(250,204,21,.45);
  background:linear-gradient(180deg,rgba(113,63,18,.28),rgba(2,6,23,.72));
}

.final-champion{
  margin-top:.8rem;
  padding:.75rem;
  border-radius:14px;
  text-align:center;
  font-weight:800;
  background:rgba(250,204,21,.14);
  border:1px solid rgba(250,204,21,.28);
  color:#fff7c2;
}

.third-place{
  margin-top:1rem;
  padding:.9rem;
  border-radius:16px;
  background:rgba(2,6,23,.62);
  border:1px solid rgba(148,163,184,.18);
}

.third-place h3{
  margin:0 0 .7rem;
  font-size:1rem;
  font-weight:800;
  color:#cbd5e1;
}

.third-place .fixture-line{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .55rem;
  margin-bottom:.4rem;
  border-radius:12px;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(148,163,184,.12);
  font-weight:700;
}

.third-place .fixture-line img{
  width:18px;
  height:13px;
  object-fit:cover;
  border-radius:2px;
}

@media (max-width:900px){
  .finals-layout{
    grid-template-columns:1fr;
  }
}