/* =====================================================================
   QUINIELA MUNDIAL AVANZATECS 2026 — Sistema de diseño responsive
   Mobile-first, dark theme, vibrante, competitivo, profesional.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

:root{
  /* Marca AvanzaTecs */
  --marca-deep:#2c3f50;
  --marca-cyan:#1e6db0;
  --marca-lime:#9DC83E;

  /* Cancha — NEW */
  --cancha-green:#2e7d32;
  --cancha-light:#43a047;

  /* Mundial */
  --gold:#ffd600;
  --gold-soft:#ffee58;
  --white:#ffffff;

  /* Superficies — LIGHT (was dark) */
  --bg-0:#f5f9fa;
  --bg-1:#ffffff;
  --bg-2:#eaf2f6;
  --border:#d0dde3;
  --border-strong:#b0c8d4;

  /* Texto — dark on light */
  --text-primary:#00344c;
  --text-secondary:#3a6070;
  --text-muted:#6a8a98;
  --text-disabled:#a0b8c4;

  /* Semánticos */
  --success:#2e7d32;
  --warning:#ff8f00;
  --danger:#b71c1c;

  /* Espaciado */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:56px;
  --space-9:80px; --space-10:120px;

  /* Radios */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-pill:999px;

  /* Sombras */
  --shadow-card:0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35);
  --shadow-elev:0 12px 36px rgba(30,109,176,0.18), 0 4px 12px rgba(0,0,0,0.4);

  /* Tipografía */
  --font-base:'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Responsive Font Sizes (clamp) */
  --fs-hero-h1:clamp(28px, 6vw, 56px);
  --fs-hero-lead:clamp(15px, 4vw, 18px);
  --fs-section-h2:clamp(20px, 5vw, 28px);
  --fs-body:clamp(14px, 2vw, 16px);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-base);
  background:var(--bg-0);
  color:var(--text-primary);
  font-size:var(--fs-body);
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;}
a{color:var(--marca-cyan); text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit;}

/* ===================== HEADER / NAV ===================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--marca-deep);
  border-bottom:3px solid var(--marca-lime);
}
.site-header .inner{
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  gap:12px;
  flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:8px; padding:0 8px;}
.brand-mark{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--marca-cyan), var(--marca-lime));
  display:grid; place-items:center;
  flex-shrink:0;
}
.brand-text{display:flex; flex-direction:column; line-height:1.1;}
.brand-name{font-weight:700; font-size:clamp(12px, 3vw, 15px); letter-spacing:.02em;}
.brand-sub{font-size:clamp(10px, 2vw, 11px); color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em;}
.nav-links{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-left:auto;
}
.nav-link{
  padding:8px 12px;
  border-radius:var(--radius-pill);
  color:rgba(255,255,255,0.78);
  font-size:clamp(12px, 2vw, 14px);
  font-weight:600;
  white-space:nowrap;
  transition:all 0.15s ease;
}
.nav-link:hover{background:rgba(255,255,255,0.1); color:#fff; text-decoration:none;}
.nav-link.active{background:var(--marca-lime); color:var(--marca-deep);}

/* ===================== HERO ===================== */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(40px, 10vw, 80px) clamp(16px, 5vw, 24px) clamp(40px, 8vw, 72px);
  border-bottom:none;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    /* Franjas de pasto cortado */
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.07) 0, rgba(0,0,0,0.07) 56px,
      transparent      56px, transparent      112px
    ),
    /* Gradiente base: verde pasto → azul profundo AvanzaTecs */
    linear-gradient(150deg, #155218 0%, #1e6b22 20%, #2e7d32 45%, #205c24 65%, #002840 100%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    /* Circunferencia central */
    radial-gradient(
      circle 120px at 50% 50%,
      transparent 114px,
      rgba(255,255,255,0.22) 114px, rgba(255,255,255,0.22) 118px,
      transparent 118px
    ),
    /* Línea divisoria central (medio campo, vertical) */
    linear-gradient(
      90deg,
      transparent calc(50% - 1.5px),
      rgba(255,255,255,0.22) calc(50% - 1.5px), rgba(255,255,255,0.22) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    /* Línea lateral izquierda */
    linear-gradient(
      90deg,
      transparent 24px,
      rgba(255,255,255,0.16) 24px, rgba(255,255,255,0.16) 27px,
      transparent 27px
    ),
    /* Línea lateral derecha */
    linear-gradient(
      90deg,
      transparent calc(100% - 27px),
      rgba(255,255,255,0.16) calc(100% - 27px), rgba(255,255,255,0.16) calc(100% - 24px),
      transparent calc(100% - 24px)
    );
  pointer-events:none;
}
.hero .inner{
  position:relative; max-width:1400px; margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px, 6vw, 64px);
  align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  background:rgba(30,109,176,0.12);
  border:1px solid rgba(30,109,176,0.35);
  color:var(--marca-cyan);
  font-size:clamp(10px, 2vw, 12px);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero h1{
  margin:0 0 clamp(12px, 3vw, 18px);
  font-size:var(--fs-hero-h1);
  line-height:clamp(32px, 8vw, 62px);
  font-weight:700;
  letter-spacing:-0.02em;
}
.hero h1 .accent{
  background:linear-gradient(120deg, var(--marca-cyan), var(--marca-lime));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p.lead{
  font-size:var(--fs-hero-lead);
  line-height:1.6;
  color:var(--text-secondary);
  max-width:540px;
  margin:0;
}
.hero-meta{
  display:flex;
  gap:clamp(12px, 4vw, 24px);
  margin-top:clamp(20px, 5vw, 36px);
  flex-wrap:wrap;
}
.hero-meta .item{
  display:flex;
  align-items:flex-start;
  gap:clamp(6px, 2vw, 10px);
  color:var(--text-secondary);
  font-size:clamp(13px, 2vw, 14px);
}
.hero-meta svg{
  flex-shrink:0;
  margin-top:2px;
}
.hero-cta{
  display:flex;
  gap:clamp(8px, 3vw, 12px);
  margin-top:clamp(24px, 6vw, 40px);
  flex-wrap:wrap;
}
.hero-art{
  position:relative;
  min-height:clamp(260px, 50vw, 340px);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg, rgba(44,63,80,0.9), rgba(20,30,40,0.95));
  border:1px solid var(--border);
  overflow:hidden;
  padding:clamp(20px, 5vw, 32px);
  box-shadow:var(--shadow-elev);
}
.hero h1{ color:#ffffff; text-shadow:0 2px 12px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4); }
.hero p.lead{ color:rgba(255,255,255,0.95); text-shadow:0 1px 6px rgba(0,0,0,0.5); }
.hero-meta .item{ color:rgba(255,255,255,0.9); text-shadow:0 1px 4px rgba(0,0,0,0.45); }
.hero .eyebrow{ background:rgba(0,0,0,0.25); border-color:rgba(255,255,255,0.35); color:#fff; }

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:clamp(6px, 2vw, 10px);
  min-height:44px;
  height:auto;
  padding:clamp(12px, 3vw, 16px) clamp(16px, 4vw, 22px);
  border-radius:var(--radius-pill);
  font-weight:500;
  font-size:clamp(13px, 2vw, 15px);
  letter-spacing:.01em;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .08s ease, background-color .15s ease, border-color .15s ease, filter .15s ease;
  white-space:nowrap;
  -webkit-user-select:none;
  user-select:none;
}
.btn:active{transform:scale(0.985);}
.btn:focus-visible{outline:2px solid var(--marca-cyan); outline-offset:2px;}
.btn-primary{background:var(--marca-lime); color:var(--marca-deep);}
.btn-primary:hover{filter:brightness(1.06);}
.btn-secondary{background:transparent; color:var(--marca-cyan); border-color:var(--marca-cyan);}
.btn-secondary:hover{background:rgba(30,109,176,0.12);}
.btn-ghost{background:transparent; color:var(--text-secondary);}
.btn-ghost:hover{background:var(--bg-1); color:var(--white);}
.btn-gold{background:var(--gold); color:#1d1502;}
.btn-gold:hover{filter:brightness(1.06);}
.btn-block{width:100%;}
.btn-sm{min-height:40px; padding:clamp(10px, 2vw, 12px) clamp(12px, 2vw, 16px); font-size:clamp(12px, 2vw, 13px);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4; cursor:not-allowed;}

/* ===================== CARDS / SECTIONS ===================== */
.section{
  padding:clamp(40px, 10vw, 72px) clamp(16px, 5vw, 24px);
}
.section .inner{max-width:1400px; margin:0 auto;}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(16px, 4vw, 24px);
  margin-bottom:clamp(20px, 5vw, 32px);
  flex-wrap:wrap;
}
.section-head h2{
  margin:0;
  font-size:var(--fs-section-h2);
  line-height:clamp(24px, 6vw, 34px);
  font-weight:500;
  letter-spacing:-0.005em;
}
.section-head p{
  margin:clamp(4px, 1vw, 6px) 0 0;
  color:var(--text-secondary);
  font-size:clamp(13px, 2vw, 15px);
}

.card{
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:clamp(16px, 4vw, 32px);
  box-shadow:var(--shadow-card);
}
.card-elev{box-shadow:var(--shadow-elev);}

/* ===================== FORMS ===================== */
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(12px, 3vw, 20px);
  align-items:start;
}
.form-grid .full{grid-column:1 / -1;}
.field{display:flex; flex-direction:column; gap:clamp(4px, 1vw, 6px);}
.field label{
  font-size:clamp(11px, 2vw, 12px);
  font-weight:500;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.field input,
.field select,
.field textarea{
  min-height:44px;
  padding:clamp(12px, 2vw, 14px) clamp(12px, 2vw, 14px);
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-family:inherit;
  font-size:clamp(14px, 2vw, 15px);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  -webkit-appearance:none;
  appearance:none;
}
.field select{
  background-image:linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position:calc(100% - 14px) 50%, calc(100% - 8px) 50%;
  background-size:6px 6px;
  background-repeat:no-repeat;
  padding-right:32px;
}
.field input::placeholder{color:var(--text-muted);}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--marca-cyan);
  box-shadow:0 0 0 3px rgba(30,109,176,0.25);
}
.field .hint{font-size:clamp(11px, 2vw, 12px); color:var(--text-muted);}

/* ===================== STICKY GROUP NAV ===================== */
.group-nav{
  position:sticky; top:64px; z-index:40;
  background:rgba(0,24,36,0.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-block:1px solid var(--border);
  padding:10px 24px;
}
.group-nav .inner{max-width:1400px; margin:0 auto; display:flex; align-items:center; gap:14px;}
.group-nav .label{font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; white-space:nowrap;}
.group-pills{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px;}
.group-pill{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px;
  border-radius:var(--radius-pill);
  background:var(--bg-1);
  border:1px solid var(--border);
  color:var(--text-secondary);
  font-weight:500; font-size:13px;
  scroll-snap-align:start;
  white-space:nowrap; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.group-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--text-disabled);}
.group-pill.done .dot{background:var(--marca-lime);}
.group-pill.active{background:var(--marca-deep); border-color:var(--marca-cyan); color:var(--white);}

/* ===================== GROUP CARDS + TEAM CHIPS ===================== */
.groups-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px, 4vw, 24px);
}
.group-card{
  padding:clamp(16px, 4vw, 24px);
}
.group-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:clamp(12px, 3vw, 18px);
  gap:12px;
}
.group-letter{
  font-size:clamp(36px, 8vw, 48px);
  font-weight:700;
  letter-spacing:-0.04em;
  color:var(--marca-cyan);
  background:linear-gradient(120deg, var(--marca-cyan), var(--marca-lime));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  flex-shrink:0;
}
.group-status{
  font-size:clamp(10px, 2vw, 11px);
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.1em;
  white-space:nowrap;
}
.group-status.done{color:var(--marca-lime);}
.team-list{display:flex; flex-direction:column; gap:clamp(6px, 1vw, 8px);}
.team-chip{
  display:flex;
  align-items:center;
  gap:clamp(10px, 2vw, 14px);
  min-height:48px;
  padding:clamp(8px, 2vw, 14px);
  background:var(--bg-1);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  cursor:pointer;
  text-align:left;
  color:var(--text-primary);
  transition:border-color .15s ease, background-color .15s ease, transform .08s ease;
  -webkit-user-select:none;
  user-select:none;
}
.team-chip:hover{border-color:var(--border-strong);}
.team-chip[aria-pressed="true"]{
  border-color:var(--marca-lime);
  background:rgba(157,200,62,0.10);
}
.team-chip .name{
  flex:1;
  font-weight:500;
  font-size:clamp(13px, 2vw, 15px);
}
.team-chip .check{
  width:clamp(20px, 4vw, 22px);
  height:clamp(20px, 4vw, 22px);
  border-radius:50%;
  background:var(--bg-2);
  display:grid;
  place-items:center;
  border:1.5px solid var(--border);
  flex-shrink:0;
}
.team-chip[aria-pressed="true"] .check{
  background:var(--marca-lime);
  border-color:var(--marca-lime);
  color:var(--marca-deep);
}
.team-chip[aria-pressed="true"] .check svg path{stroke:var(--marca-deep);}

/* Team badge (bandera circular dos-bandas con código FIFA) */
.team-badge{
  width:clamp(32px, 6vw, 40px);
  height:clamp(32px, 6vw, 40px);
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  border:1.5px solid rgba(255,255,255,0.18);
  background:#1a2a35;
}
.team-badge img.flag-fill{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.team-badge span,
.team-badge .flag-code{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:700;
  font-size:clamp(7px, 1.5vw, 9px);
  letter-spacing:.06em;
  text-shadow:0 1px 4px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.6);
  line-height:1;
}
.team-badge.bordered{box-shadow:inset 0 0 0 2px rgba(255,255,255,0.18);}

/* ===================== PODIUM / FINALS ===================== */
.finals{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px, 4vw, 24px);
  align-items:stretch;
}
.final-card{
  padding:clamp(16px, 4vw, 24px);
  text-align:center;
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  position:relative;
}
.final-card.gold{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(201,162,39,0.18), var(--bg-1));
  box-shadow:0 0 0 1px rgba(201,162,39,0.4), var(--shadow-elev);
}
.final-card .tag{
  display:inline-flex;
  align-items:center;
  gap:clamp(4px, 1vw, 6px);
  padding:clamp(3px, 1vw, 4px) clamp(8px, 2vw, 10px);
  border-radius:var(--radius-pill);
  font-size:clamp(10px, 2vw, 11px);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:var(--bg-2);
  color:var(--text-secondary);
  margin-bottom:clamp(10px, 2vw, 14px);
}
.final-card.gold .tag{background:rgba(201,162,39,0.2); color:var(--gold-soft);}
.final-card.silver .tag{background:rgba(184,205,214,0.18); color:#d2e1e8;}
.final-card.bronze .tag{background:rgba(184,115,51,0.22); color:#e5a06b;}
.final-card h3{
  font-size:clamp(16px, 3vw, 20px);
  margin:clamp(8px, 2vw, 12px) 0;
}
.final-card p{
  font-size:clamp(12px, 2vw, 14px);
}
.final-card .picker{margin-top:clamp(10px, 2vw, 14px);}
.picker-button{
  width:100%;
  padding:clamp(10px, 2vw, 14px);
  min-height:clamp(52px, 10vw, 64px);
  background:var(--bg-2);
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-sm);
  color:var(--text-secondary);
  cursor:pointer;
  font-family:inherit;
  font-size:clamp(12px, 2vw, 14px);
  transition:all 0.15s ease;
}
.picker-button.filled{
  border-style:solid;
  border-color:var(--marca-lime);
  background:rgba(157,200,62,0.08);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  gap:clamp(8px, 2vw, 12px);
  justify-content:center;
}

/* ===================== SCOREBOARD / RANKING ===================== */
.scoreboard{
  background:linear-gradient(160deg, var(--marca-deep) 0%, #002a3d 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px 32px;
  box-shadow:var(--shadow-elev);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px;
}
.live-dot{
  width:10px; height:10px; border-radius:50%; background:var(--marca-cyan);
  position:relative;
}
.live-dot::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  background:rgba(30,109,176,0.45); animation:pulse 1.6s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(0.4); opacity:.9;}
  100%{transform:scale(1.6); opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .live-dot::after{animation:none;}
}
.stage-label{display:flex; align-items:center; gap:12px;}
.stage-label .text{display:flex; flex-direction:column;}
.stage-label .text small{font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em;}
.stage-label .text strong{font-size:18px; font-weight:500;}
.scoreboard .stats{display:flex; gap:32px; flex-wrap:wrap;}
.stat{display:flex; flex-direction:column;}
.stat small{font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em;}
.stat strong{font-size:24px; font-weight:700; font-variant-numeric:tabular-nums;}

.filters{display:flex; align-items:center; gap:10px; margin:24px 0 16px; flex-wrap:wrap;}
.filter-chip{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 16px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:var(--bg-1); color:var(--text-secondary);
  font-size:13px; font-weight:500; cursor:pointer;
}
.filter-chip.active{background:var(--marca-cyan); color:var(--marca-deep); border-color:var(--marca-cyan); font-weight:700;}
.filter-chip .count{font-size:11px; color:var(--text-muted);}
.filter-chip.active .count{color:rgba(44,63,80,0.7);}

.ranking-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  font-size:clamp(12px, 2vw, 14px);
}
.ranking-table th,
.ranking-table td{
  padding:clamp(10px, 2vw, 14px) clamp(10px, 2vw, 16px);
  text-align:left;
  border-bottom:1px solid var(--border);
}
.ranking-table th{
  font-size:clamp(10px, 1.5vw, 11px);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-muted);
  background:var(--bg-0);
  white-space:nowrap;
}
.ranking-table tbody tr:hover{background:var(--bg-2);}
.ranking-table tr:last-child td{border-bottom:none;}
.pos{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(28px, 5vw, 32px);
  height:clamp(28px, 5vw, 32px);
  border-radius:50%;
  background:var(--bg-2);
  color:var(--text-secondary);
  font-weight:700;
  font-size:clamp(11px, 2vw, 13px);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.pos.gold{background:linear-gradient(135deg, var(--gold), var(--gold-soft)); color:#1d1502;}
.pos.silver{background:linear-gradient(135deg, #c0d5dd, #8fadb8); color:#0c1f27;}
.pos.bronze{background:linear-gradient(135deg, #c08152, #8f5631); color:#1d0c02;}
.points{font-variant-numeric:tabular-nums; font-weight:700; color:var(--marca-lime); font-size:16px;}
.country-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text-secondary);
}
.country-tag .badge{width:18px; height:12px; border-radius:2px; background:linear-gradient(180deg, var(--c1,#555) 50%, var(--c2,#222) 50%);}
.delta{font-size:12px; font-variant-numeric:tabular-nums;}
.delta.up{color:var(--success);}
.delta.down{color:var(--danger);}
.delta.flat{color:var(--text-muted);}

/* ===================== ADMIN ===================== */
.admin-shell{
  display:grid;
  grid-template-columns:1fr;
  min-height:100vh;
}
.admin-sidebar{
  background:var(--bg-1);
  border-bottom:1px solid var(--border);
  padding:clamp(12px, 3vw, 24px);
  display:flex;
  flex-direction:column;
  gap:clamp(6px, 1vw, 8px);
}
.admin-sidebar .brand{margin-bottom:clamp(12px, 2vw, 24px);}
.side-link{
  display:flex;
  align-items:center;
  gap:clamp(8px, 2vw, 12px);
  padding:clamp(8px, 2vw, 10px) clamp(10px, 2vw, 14px);
  border-radius:var(--radius-sm);
  color:var(--text-secondary);
  font-weight:500;
  font-size:clamp(12px, 2vw, 14px);
  text-decoration:none;
  transition:all 0.15s ease;
  -webkit-user-select:none;
  user-select:none;
}
.side-link:hover{background:var(--bg-2); color:var(--white); text-decoration:none;}
.side-link.active{background:var(--marca-deep); color:var(--white);}
.admin-main{
  padding:clamp(16px, 4vw, 32px) clamp(16px, 5vw, 40px);
  min-width:0;
}
.admin-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:clamp(16px, 3vw, 24px);
  flex-wrap:wrap;
  gap:clamp(12px, 2vw, 16px);
}
.admin-head h1{
  margin:0;
  font-size:clamp(20px, 5vw, 28px);
  font-weight:500;
}
.admin-toolbar{display:flex; gap:clamp(6px, 1vw, 10px); flex-wrap:wrap;}
.admin-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px, 4vw, 24px);
}

.login-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:clamp(16px, 4vw, 24px);
}
.login-card{
  width:100%;
  max-width:420px;
  padding:clamp(20px, 4vw, 40px);
  text-align:center;
}
.login-card .lock-icon{
  width:clamp(50px, 10vw, 64px);
  height:clamp(50px, 10vw, 64px);
  border-radius:18px;
  background:linear-gradient(135deg, var(--marca-cyan), var(--marca-deep));
  display:grid;
  place-items:center;
  margin:0 auto clamp(12px, 3vw, 18px);
}

/* ===================== AUTH FORMS ===================== */

/* Auth shell — login / reset / forgot */
.auth-shell{
  min-height:calc(100vh - 65px);
  display:grid;
  place-items:start center;
  padding:clamp(24px, 6vw, 48px) clamp(16px, 5vw, 24px) clamp(40px, 8vw, 80px);
}
.auth-card{
  width:100%;
  max-width:460px;
  padding:clamp(20px, 4vw, 40px);
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-elev);
}
.auth-card h1{
  margin:0 0 clamp(6px, 1vw, 8px);
  font-size:clamp(22px, 5vw, 28px);
  line-height:clamp(28px, 6vw, 34px);
  font-weight:500;
  letter-spacing:-0.005em;
}
.auth-card .sub{
  color:var(--text-secondary);
  margin:0 0 clamp(16px, 3vw, 28px);
  font-size:clamp(13px, 2vw, 15px);
  line-height:1.6;
}

.auth-mark{
  width:clamp(44px, 8vw, 56px);
  height:clamp(44px, 8vw, 56px);
  border-radius:16px;
  margin:0 0 clamp(12px, 2vw, 18px);
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--marca-cyan), var(--marca-deep));
  border:1px solid var(--border-strong);
}
.auth-mark.gold{background:linear-gradient(135deg, var(--gold), var(--gold-soft)); color:#1d1502;}
.auth-mark.success{background:linear-gradient(135deg, var(--success), #2a9b73); color:#0a2519;}
.auth-mark.danger{background:linear-gradient(135deg, var(--danger), #c34646); color:#2a0a0a;}

.auth-separator{
  display:flex;
  align-items:center;
  gap:clamp(8px, 2vw, 12px);
  margin:clamp(16px, 3vw, 24px) 0;
  color:var(--text-muted);
  font-size:clamp(10px, 1.5vw, 12px);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.auth-separator::before,
.auth-separator::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}

.auth-foot{
  margin-top:clamp(12px, 2vw, 18px);
  text-align:center;
  color:var(--text-secondary);
  font-size:clamp(12px, 2vw, 14px);
}
.auth-foot a{font-weight:500;}

/* Password input wrapper (con botón ojo) */
.input-pw{position:relative;}
.input-pw input{
  font-family:'Ubuntu Mono','SF Mono','Consolas',monospace;
  letter-spacing:.04em;
  padding-right:clamp(40px, 8vw, 50px);
}
.pw-toggle{
  position:absolute;
  top:50%;
  right:clamp(4px, 1vw, 8px);
  transform:translateY(-50%);
  width:clamp(32px, 6vw, 36px);
  height:clamp(32px, 6vw, 36px);
  border-radius:var(--radius-sm);
  background:transparent;
  border:none;
  cursor:pointer;
  display:grid;
  place-items:center;
  color:var(--text-muted);
  transition:color .15s ease, background-color .15s ease;
  -webkit-user-select:none;
  user-select:none;
  padding:0;
}
.pw-toggle:hover{color:var(--marca-cyan); background:rgba(30,109,176,0.08);}
.pw-toggle:focus-visible{outline:2px solid var(--marca-cyan); outline-offset:2px;}

/* Validación de coincidencia (campo confirm) */
.input-validated{position:relative;}
.input-validated input{padding-right:clamp(50px, 10vw, 60px);}
.match-indicator{
  position:absolute;
  top:50%;
  right:clamp(12px, 2vw, 14px);
  transform:translateY(-50%);
  width:clamp(20px, 4vw, 24px);
  height:clamp(20px, 4vw, 24px);
  border-radius:50%;
  display:none;
  place-items:center;
  flex-shrink:0;
}
.match-indicator.match{display:grid; color:var(--success);}
.match-indicator.nomatch{display:grid; color:var(--danger);}

/* Strength bar (3 segmentos) */
.pw-strength{margin-top:clamp(6px, 1vw, 8px);}
.pw-strength .bars{display:flex; gap:clamp(4px, 1vw, 6px);}
.pw-strength .bars span{
  flex:1;
  height:clamp(4px, 1vw, 5px);
  border-radius:99px;
  background:var(--bg-2);
  transition:background-color .2s ease;
}
.pw-strength[data-level="weak"]   .bars span:nth-child(1){background:var(--danger);}
.pw-strength[data-level="medium"] .bars span:nth-child(1),
.pw-strength[data-level="medium"] .bars span:nth-child(2){background:var(--warning);}
.pw-strength[data-level="strong"] .bars span{background:var(--success);}
.pw-strength .meta{
  display:flex;
  justify-content:space-between;
  gap:clamp(8px, 2vw, 12px);
  margin-top:clamp(4px, 1vw, 6px);
  font-size:clamp(11px, 1.5vw, 12px);
  color:var(--text-muted);
}
.pw-strength[data-level="weak"]   .meta strong{color:var(--danger);}
.pw-strength[data-level="medium"] .meta strong{color:var(--warning);}
.pw-strength[data-level="strong"] .meta strong{color:var(--success);}

/* Field en estado error */
.field.error input,
.field.error select{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(232,90,90,0.18);
}
.field.error .field-msg{color:var(--danger);}
.field-msg{
  font-size:clamp(11px, 2vw, 12px);
  margin-top:clamp(4px, 1vw, 6px);
  color:var(--text-muted);
}

/* Mensaje inline (alert dentro de un card) */
.alert{
  display:flex;
  align-items:flex-start;
  gap:clamp(8px, 2vw, 12px);
  padding:clamp(10px, 2vw, 14px) clamp(12px, 2vw, 16px);
  border-radius:var(--radius-sm);
  background:rgba(232,90,90,0.10);
  border:1px solid rgba(232,90,90,0.45);
  color:#ffd9d9;
  font-size:clamp(12px, 2vw, 14px);
  margin-bottom:clamp(12px, 2vw, 16px);
  line-height:1.5;
}
.alert .ico{flex-shrink:0; color:var(--danger); margin-top:2px;}
.alert strong{color:var(--white);}
.alert.warning{background:rgba(245,166,35,0.10); border-color:rgba(245,166,35,0.45); color:#ffe7c4;}
.alert.warning .ico{color:var(--warning);}
.alert.info{background:rgba(30,109,176,0.10); border-color:rgba(30,109,176,0.40); color:#cdebf8;}
.alert.info .ico{color:var(--marca-cyan);}
.alert.success{background:rgba(62,194,143,0.10); border-color:rgba(62,194,143,0.45); color:#c8f0de;}
.alert.success .ico{color:var(--success);}

/* Botón con estado loading + disabled visual */
.btn[data-loading="true"]{pointer-events:none; opacity:.85;}
.btn[data-loading="true"] .btn-text{opacity:.6;}
.btn .spinner{
  width:18px; height:18px;
  animation:spin 0.9s linear infinite;
}
.btn:not([data-loading="true"]) .spinner{display:none;}
@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@media (prefers-reduced-motion: reduce){
  .btn .spinner{animation:none;}
}

/* ===================== TOAST ===================== */
.toast-stack{
  position:fixed;
  top:clamp(60px, 8vw, 84px);
  right:clamp(12px, 3vw, 24px);
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:clamp(6px, 1vw, 10px);
  pointer-events:none;
  max-width:calc(100vw - 24px);
}
.toast{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:clamp(8px, 2vw, 12px);
  padding:clamp(10px, 2vw, 14px) clamp(12px, 2vw, 18px);
  min-width:clamp(260px, 80vw, 380px);
  border-radius:var(--radius-md);
  background:var(--bg-2);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-elev);
  color:var(--text-primary);
  font-size:clamp(12px, 2vw, 14px);
  animation:toast-in .25s ease-out;
  line-height:1.4;
}
.toast .ico{flex-shrink:0; margin-top:2px;}
.toast.success{border-color:rgba(62,194,143,0.45);}
.toast.success .ico{color:var(--success);}
.toast.error{border-color:rgba(232,90,90,0.45);}
.toast.error .ico{color:var(--danger);}
.toast.info{border-color:rgba(30,109,176,0.45);}
.toast.info .ico{color:var(--marca-cyan);}
.toast[data-leaving="true"]{animation:toast-out .2s ease-in forwards;}
@keyframes toast-in{
  from{opacity:0; transform:translateX(20px);}
  to{opacity:1; transform:translateX(0);}
}
@keyframes toast-out{
  to{opacity:0; transform:translateX(20px);}
}
@media (prefers-reduced-motion: reduce){
  .toast, .toast[data-leaving="true"]{animation:none;}
}

/* ===================== BANNER (top de página) ===================== */
.banner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px, 2vw, 14px);
  padding:clamp(10px, 2vw, 14px) clamp(16px, 4vw, 24px);
  background:linear-gradient(90deg, rgba(245,166,35,0.15), rgba(232,90,90,0.12));
  border-bottom:1px solid rgba(245,166,35,0.45);
  color:#ffe7c4;
  font-size:clamp(12px, 2vw, 14px);
  flex-wrap:wrap;
  line-height:1.4;
}
.banner .ico{color:var(--warning); flex-shrink:0;}
.banner strong{color:var(--white);}

/* ===================== HEADER: user badge + logout ===================== */
.user-chip{
  display:flex;
  align-items:center;
  gap:clamp(6px, 1vw, 10px);
  padding:clamp(4px, 1vw, 6px) clamp(10px, 2vw, 14px) clamp(4px, 1vw, 6px) clamp(4px, 1vw, 6px);
  border-radius:var(--radius-pill);
  background:var(--bg-1);
  border:1px solid var(--border);
  color:var(--text-secondary);
  font-size:clamp(12px, 2vw, 13px);
}
.user-chip .avatar{
  position:relative;
  width:clamp(30px, 6vw, 38px);
  height:clamp(30px, 6vw, 38px);
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg, var(--marca-cyan), var(--marca-lime));
  color:var(--marca-deep);
  font-weight:700;
  font-size:clamp(10px, 2vw, 13px);
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.user-chip .avatar img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ===================== Avatar reutilizable (foto + iniciales) ===================== */
/* Las iniciales van como texto del contenedor; la <img> (si existe) las cubre.
   Si la imagen falla al cargar, el JS la elimina y reaparecen las iniciales. */
.q-avatar{
  position:relative;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
  background:linear-gradient(135deg, var(--marca-cyan), var(--marca-deep));
  color:#fff;
  font-weight:800;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em;
  user-select:none;
}
.q-avatar img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.part-cell{ display:flex; align-items:center; gap:9px; min-width:0; }
.part-cell .part-name{ min-width:0; }
.part-cell .part-name strong{ display:block; }
.avatar-btn{
  position:relative;
  padding:0; border:none; background:none; cursor:pointer;
  border-radius:50%; flex-shrink:0; line-height:0;
}
.avatar-btn .avatar-edit{
  position:absolute; right:-2px; bottom:-2px;
  width:17px; height:17px; border-radius:50%;
  background:var(--marca-cyan); color:#fff;
  display:grid; place-items:center;
  border:2px solid var(--bg-1);
}
.avatar-btn:hover .avatar{ filter:brightness(1.08); }
.avatar-btn:disabled{ cursor:default; opacity:.65; }
.user-chip .meta strong{color:var(--white); display:block; font-size:clamp(12px, 2vw, 13px); line-height:1.15; text-transform:uppercase;}
.user-chip .meta small{color:var(--text-muted); font-size:clamp(10px, 1.5vw, 11px);}
.btn-icon{
  width:clamp(36px, 7vw, 40px);
  height:clamp(36px, 7vw, 40px);
  padding:0;
  border-radius:var(--radius-pill);
  display:grid;
  place-items:center;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-secondary);
  cursor:pointer;
  flex-shrink:0;
  transition:all 0.15s ease;
}
.btn-icon:hover{border-color:var(--marca-cyan); color:var(--marca-cyan); background:rgba(30,109,176,0.06);}

/* ===================== EMAIL TEMPLATE PREVIEW WRAPPER ===================== */
/* Solo para mostrar los .html de email previsualizados en un browser durante el diseño */
.email-canvas{
  background:#0a1820; padding:40px 16px; min-height:100vh;
}
.email-canvas .label{
  max-width:600px; margin:0 auto 16px;
  color:var(--text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em;
}

/* ===================== FOOTER ===================== */
.site-footer{
  margin-top:clamp(40px, 10vw, 80px);
  border-top:1px solid var(--border);
  padding:clamp(16px, 4vw, 32px) clamp(16px, 5vw, 24px);
  color:var(--text-muted);
  font-size:clamp(12px, 2vw, 13px);
}
.site-footer .inner{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:clamp(12px, 4vw, 24px);
  flex-wrap:wrap;
}

/* ===================== UTIL ===================== */
.hide-mobile{display:initial;}
.only-mobile{display:none;}
.muted{color:var(--text-muted);}
.row{
  display:flex;
  align-items:center;
  gap:clamp(8px, 2vw, 12px);
}
.between{justify-content:space-between;}
.wrap{flex-wrap:wrap;}
.mt-2{margin-top:8px;}
.mt-3{margin-top:12px;}
.mt-4{margin-top:16px;}
.mt-5{margin-top:24px;}
.mt-6{margin-top:32px;}
.text-center{text-align:center;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ===================== BADGES DE RANKING ===================== */
.badge-rank{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700;
  padding:2px 10px 2px 7px; border-radius:var(--radius-pill);
  margin-left:6px; vertical-align:middle; white-space:nowrap;
  line-height:1.4;
}
.badge-rank svg{ flex-shrink:0; }
.badge-campeon  { background:var(--gold);           color:#1b5e20; }
.badge-estratega{ background:var(--marca-deep);  color:var(--marca-lime); }
.badge-cancha   { background:var(--marca-cyan);  color:#fff; }
.badge-riesgo   { background:var(--warning);        color:#fff; }
.badge-fuera    { background:var(--danger);         color:#fff; }

/* ===================== JUGADA AVANZATECS ===================== */
.jugada-banner{
  background:linear-gradient(90deg, var(--marca-deep), #004d6e);
  border-left:4px solid var(--marca-lime);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  margin-bottom:16px;
}
.jugada-tag{
  font-size:10px; color:var(--marca-lime);
  font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  margin-bottom:4px;
}
.jugada-texto { font-size:13px; color:#fff; font-weight:600; }
.jugada-subtexto{ font-size:11px; color:rgba(255,255,255,0.6); margin-top:2px; }

/* ===================== RESPONSIVE ===================== */

/* BREAKPOINT 1: Tablet+ (576px) — mejoras básicas */
@media (min-width: 576px){
  .site-header .inner{
    padding:14px 20px;
  }
  .nav-links{
    gap:6px;
  }
  .form-grid{
    grid-template-columns:1fr 1fr;
  }
  .form-grid .full{
    grid-column:1 / -1;
  }
  .groups-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .finals{
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    align-items:end;
  }
}

/* BREAKPOINT 2: Tablet (768px) — layout más generoso */
@media (min-width: 768px){
  .site-header .inner{
    padding:14px 24px;
  }
  .hero .inner{
    grid-template-columns:1.2fr 0.8fr;
    gap:48px;
  }
  .hero-art{
    min-height:300px;
  }
  .groups-grid{
    grid-template-columns:repeat(3, 1fr);
  }
  .admin-shell{
    grid-template-columns:240px 1fr;
  }
  .admin-sidebar{
    border-bottom:none;
    border-right:1px solid var(--border);
    padding:24px;
    position:sticky;
    top:65px;
    max-height:calc(100vh - 65px);
    overflow-y:auto;
  }
  .admin-grid{
    grid-template-columns:1.4fr 1fr;
  }
  .filters{
    justify-content:space-between;
  }
}

/* BREAKPOINT 3: Desktop (1024px) — layout completo */
@media (min-width: 1024px){
  .site-header .inner{
    gap:32px;
  }
  .nav-links{
    gap:12px;
  }
  .hero .inner{
    grid-template-columns:1.2fr 0.8fr;
    gap:64px;
  }
  .hero-art{
    min-height:340px;
  }
  .groups-grid{
    grid-template-columns:repeat(3, 1fr);
  }
  /* Tabla con scroll horizontal wrapper */
  .ranking-table-wrapper{
    overflow-x:auto;
    border-radius:var(--radius-md);
  }
  .ranking-table{
    min-width:600px;
  }
}

/* BREAKPOINT 4: Large Desktop (1200px) */
@media (min-width: 1200px){
  .section .inner,
  .hero .inner,
  .site-header .inner{
    max-width:1400px;
  }
}

/* Mobile specific optimizations (max-width: 576px) */
@media (max-width: 575px){
  .hide-mobile{
    display:none;
  }
  .only-mobile{
    display:initial;
  }
  .hero .inner{
    grid-template-columns:1fr;
    gap:24px;
  }
  .hero-art{
    min-height:240px;
  }
  .group-nav .inner{
    flex-wrap:wrap;
  }
  .group-pills{
    max-width:100%;
  }
  .scoreboard{
    grid-template-columns:1fr;
    gap:16px;
  }
  .scoreboard .stats{
    gap:16px;
    flex-direction:column;
  }
  .stat{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }
  /* Ocultar columnas innecesarias en tabla pequeña */
  .ranking-table th:nth-child(4),
  .ranking-table td:nth-child(4){
    display:none;
  }
  /* Wrapper para scroll horizontal en mobile */
  .ranking-table{
    font-size:13px;
  }
  .ranking-table th,
  .ranking-table td{
    padding:10px 8px;
  }
}

/* Landscape mobile (max 720px) */
@media (max-width: 720px){
  .admin-shell{
    grid-template-columns:1fr;
  }
  .admin-sidebar{
    display:flex;
    flex-direction:row;
    border-right:none;
    border-bottom:1px solid var(--border);
    padding:12px 16px;
    max-height:none;
    overflow-y:visible;
    overflow-x:auto;
    gap:4px;
    position:relative;
    top:auto;
  }
  .admin-sidebar .brand{
    display:none;
  }
  .side-link{
    padding:8px 12px;
    font-size:12px;
    white-space:nowrap;
  }
}