:root {
  --pub-primary: #00a896;
  --pub-primary-dark: #00897b;
  --pub-bg: #f4f8f8;
  --pub-surface: #ffffff;
  --pub-border: #d4e5e5;
  --pub-text: #1e3333;
  --pub-muted: #6a8080;
  --pub-soft: #e8f7f5;
  --pub-shadow: 0 2px 16px rgba(0, 100, 90, 0.08);
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
  min-height: 100%;
  position: relative;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  margin-bottom: 0;
}

/* ── Public shell ── */

body.public-shell {
  background: var(--pub-bg);
  color: var(--pub-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.public-topbar {
  background: var(--pub-surface);
  border-bottom: 1px solid var(--pub-border);
  box-shadow: 0 1px 8px rgba(0, 80, 75, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
}

.public-topbar .navbar { min-height: 3.5rem; }

.public-brand {
  font-weight: 780;
  color: var(--pub-primary) !important;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.public-nav-link {
  display: flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  color: #2e4a4a;
  font-weight: 650;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.public-nav-link:hover,
.public-nav-link.active {
  background: var(--pub-soft);
  color: var(--pub-primary-dark);
}

.public-content {
  flex: 1;
  padding: 0;
}

.public-footer {
  border-top: 1px solid var(--pub-border);
  padding: 1rem 0;
  background: var(--pub-surface);
  margin-top: auto;
}

.public-footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  color: var(--pub-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ── Public cards ── */

.public-panel {
  max-width: 44rem;
  padding: 2rem 1rem 3rem;
  margin: 0 auto;
}

.public-card {
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--pub-shadow);
}

.public-card h1 {
  font-size: 1.6rem;
  font-weight: 780;
  letter-spacing: 0;
}

.public-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid var(--pub-border);
  flex: 0 0 auto;
}

/* ── Home hero ── */

.home-hero {
  background: linear-gradient(135deg, #003d38 0%, #006b5e 60%, #00a896 100%);
  color: #fff;
  padding: 5rem 1.5rem 4.5rem;
  text-align: center;
}

.home-hero-icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  display: block;
  opacity: 0.9;
}

.home-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.home-hero p {
  font-size: 1.1rem;
  opacity: 0.85;
  max-width: 32rem;
  margin: 0 auto 2rem;
}

.home-hero .btn-hero {
  background: #fff;
  color: var(--pub-primary-dark);
  border: 0;
  border-radius: 999px;
  font-weight: 750;
  font-size: 1rem;
  padding: 0.8rem 2.25rem;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.home-hero .btn-hero:hover {
  background: var(--pub-soft);
  transform: translateY(-1px);
}

.home-features {
  max-width: 52rem;
  margin: 3rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
}

.home-feature-card {
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--pub-shadow);
  text-align: center;
}

.home-feature-card i {
  font-size: 2rem;
  color: var(--pub-primary);
  margin-bottom: 0.75rem;
  display: block;
}

.home-feature-card h3 {
  font-size: 1rem;
  font-weight: 750;
  margin-bottom: 0.4rem;
}

.home-feature-card p {
  font-size: 0.88rem;
  color: var(--pub-muted);
  margin: 0;
}

/* ── Buttons (public) ── */

.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--pub-primary);
}

.btn-primary {
  background: var(--pub-primary);
  border-color: var(--pub-primary);
  border-radius: 999px;
  font-weight: 650;
}

.btn-primary:hover, .btn-primary:focus {
  background: var(--pub-primary-dark);
  border-color: var(--pub-primary-dark);
}

/* ── Team flags ── */

.admin-team-flag,
.admin-team-flag-placeholder {
  width: 2.5rem;
  height: 1.75rem;
  border-radius: 0.25rem;
  object-fit: cover;
  border: 1px solid var(--pub-border);
  flex: 0 0 auto;
}

.admin-team-flag-large {
  width: 5rem;
  height: 3.5rem;
  border-radius: 0.375rem;
  object-fit: cover;
  border: 1px solid var(--pub-border);
  flex: 0 0 auto;
}

.admin-team-flag-placeholder { background: #eef5f5; }

/* ── Predictions ── */

.predictions-page {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.predictions-hero {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .predictions-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.predictions-eyebrow,
.match-date,
.match-team-code,
.save-status {
  color: #6f8585;
  font-size: 0.82rem;
  font-weight: 700;
}

.predictions-hero h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 780;
  letter-spacing: 0;
}

.predictions-hero p {
  margin: 0.2rem 0 0;
  color: #6f8585;
}

.prediction-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  background: #fff;
}

.prediction-progress-ring {
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #edf7f6;
  color: #08775f;
  font-weight: 800;
}

.phase-nav {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem 0 1rem;
  margin-bottom: 0.5rem;
}

.phase-nav-link {
  flex: 0 0 auto;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--pub-border);
  border-radius: 999px;
  color: #30494a;
  background: #fff;
  text-decoration: none;
  font-weight: 700;
}

.phase-nav-link.active {
  color: #fff;
  background: var(--pub-primary);
  border-color: var(--pub-primary);
}

.match-card-list { display: grid; gap: 1rem; }

.match-card {
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--pub-shadow);
  padding: 1rem;
}

.match-card-top,
.match-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.match-venue { color: #587070; font-size: 0.9rem; }

.match-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem auto 4rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  margin: 1rem 0;
}

.match-team {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.match-team-away { justify-content: flex-end; text-align: right; }

.match-team-name { font-weight: 780; line-height: 1.15; }

.match-flag {
  width: 2.75rem;
  height: 1.9rem;
  border: 1px solid var(--pub-border);
  border-radius: 0.25rem;
  object-fit: cover;
  flex: 0 0 auto;
}

.match-flag-empty { background: #eef5f5; }

.score-input {
  width: 4rem;
  height: 4rem;
  border: 1px solid #c8dddd;
  border-radius: 8px;
  text-align: center;
  font-size: 1.65rem;
  font-weight: 800;
}

.penalty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: -0.25rem 0 0.85rem;
  color: #587070;
  font-weight: 700;
}

.penalty-input {
  width: 3.25rem;
  height: 2.6rem;
  border: 1px solid #c8dddd;
  border-radius: 8px;
  text-align: center;
  font-weight: 800;
}

.match-versus { color: #6f8585; font-weight: 800; text-align: center; }

.admin-phase-date-input { width: 11rem; }

@media (max-width: 575.98px) {
  .match-teams {
    grid-template-columns: minmax(0, 1fr) 3.5rem 1.25rem 3.5rem minmax(0, 1fr);
    gap: 0.45rem;
  }

  .match-team { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .match-team-away { align-items: flex-end; }
  .match-team-name { font-size: 0.92rem; }
  .score-input { width: 3.5rem; height: 3.5rem; font-size: 1.45rem; }

  .home-hero h1 { font-size: 1.8rem; }
  .home-hero { padding: 3rem 1rem 2.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINAS PÚBLICAS DEL TORNEO
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Variables extra ── */
:root {
  --t-gold:   #f59e0b;
  --t-silver: #94a3b8;
  --t-bronze: #b87333;
  --t-live:   #ef4444;
  --t-radius: 12px;
}

/* ── Contenedor de página ── */
.torneo-page {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

/* ── Cabecera de página ── */
.torneo-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.torneo-page-title {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}
.torneo-page-sub { color: var(--pub-muted); margin: .25rem 0 0; }
.torneo-page-stats { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.torneo-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--pub-text);
}
.torneo-stat-live { color: var(--t-live); border-color: #fca5a5; background: #fff5f5; }

/* ── Countdown bar ── */
.torneo-countdown-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(90deg,#00443e,#006b5e);
  color: #fff;
  border-radius: var(--t-radius);
  padding: .85rem 1.25rem;
  margin-bottom: 2rem;
  font-weight: 700;
}
.torneo-countdown-label { opacity: .85; font-size: .9rem; white-space: nowrap; }
.torneo-countdown-value { font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* ── Grupo por fase ── */
.torneo-phase-group { margin-bottom: 2.5rem; }
.torneo-phase-label {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pub-primary);
  padding: .3rem 0;
  border-bottom: 2px solid var(--pub-border);
  margin-bottom: 1rem;
}

/* ── Grid de partidos ── */
.torneo-match-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .torneo-match-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .torneo-match-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tarjeta de partido ── */
.torneo-match-card {
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: var(--t-radius);
  padding: 1rem;
  box-shadow: var(--pub-shadow);
  transition: transform .12s, box-shadow .12s;
}
.torneo-match-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,100,90,.12); }
.torneo-match-live { border-color: #fca5a5; box-shadow: 0 0 0 2px #fca5a5; }

/* ── Bandas de estado ── */
.torneo-match-date-bar,
.torneo-match-status-bar {
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.torneo-match-date-bar { color: var(--pub-muted); }
.live-bar { color: var(--t-live); }

/* ── Equipos dentro de la tarjeta ── */
.torneo-match-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
}
.torneo-team { display: flex; align-items: center; gap: .55rem; }
.torneo-team-away { justify-content: flex-end; }
.torneo-team-info { display: flex; flex-direction: column; min-width: 0; }
.torneo-team-code { font-weight: 800; font-size: .95rem; line-height: 1; }
.torneo-team-name { font-size: .75rem; color: var(--pub-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.torneo-match-center { color: var(--pub-muted); font-weight: 800; text-align: center; font-size: .85rem; }

/* ── Banderas ── */
.torneo-flag {
  width: 2.8rem;
  height: 1.9rem;
  border-radius: .25rem;
  object-fit: cover;
  border: 1px solid var(--pub-border);
  flex: 0 0 auto;
}
.torneo-flag-empty { background: #eef5f5; }

/* ── Sede ── */
.torneo-match-venue {
  margin-top: .65rem;
  font-size: .75rem;
  color: var(--pub-muted);
  display: flex;
  align-items: center;
}

/* ── Tarjeta de resultado ── */
.torneo-result-card { }
.torneo-result-date {
  font-size: .78rem;
  font-weight: 700;
  color: var(--pub-muted);
  margin-bottom: .75rem;
  text-transform: capitalize;
}
.torneo-result-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
}
.torneo-result-team { display: flex; align-items: center; gap: .55rem; }
.torneo-result-team-away { justify-content: flex-end; }

.torneo-scoreline {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.torneo-score {
  font-size: 1.6rem;
  font-weight: 800;
  min-width: 1.8rem;
  text-align: center;
  color: var(--pub-muted);
  line-height: 1;
}
.torneo-score-winner { color: var(--pub-text); }
.torneo-score-sep { color: var(--pub-muted); font-weight: 700; }
.torneo-penalties {
  text-align: center;
  font-size: .77rem;
  color: var(--pub-muted);
  margin-top: .4rem;
}

/* ── Vacío ── */
.torneo-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--pub-muted);
}
.torneo-empty i { font-size: 3rem; display: block; margin-bottom: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   HOME — cards enriquecidas
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Countdown widget en hero ── */
.countdown-widget { margin: 0 auto 1.5rem; }
.countdown-label { font-size: .85rem; opacity: .8; margin-bottom: .5rem; }
.countdown-digits { display: flex; align-items: center; gap: .25rem; justify-content: center; }
.countdown-block { display: flex; flex-direction: column; align-items: center; }
.countdown-num {
  font-size: 2.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 2.6rem;
  text-align: center;
  background: rgba(255,255,255,.15);
  border-radius: 8px;
  padding: .2rem .4rem;
}
.countdown-unit { font-size: .65rem; opacity: .7; margin-top: .15rem; text-transform: uppercase; }
.countdown-sep { font-size: 1.6rem; font-weight: 800; opacity: .6; margin-bottom: .8rem; }

/* ── Stat chips del hero ── */
.hero-stat-chips {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.hero-stat-chip {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .83rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* ── CTA del hero ── */
.hero-cta-group { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.btn-hero-outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,.7);
  color: #fff !important;
}
.btn-hero-outline:hover { background: rgba(255,255,255,.1); }

/* ── Grid de la home ── */
.torneo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .torneo-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); }
  .torneo-grid > section:first-child { grid-column: 1; }
  .torneo-grid > section:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
  .torneo-grid > section:nth-child(3) { grid-column: 1; }
}

/* ── Sección ── */
.torneo-section { }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--pub-border);
  padding-bottom: .5rem;
}
.section-title { font-size: 1.1rem; font-weight: 780; margin: 0; }
.section-link { font-size: .82rem; color: var(--pub-primary); font-weight: 700; text-decoration: none; }
.section-link:hover { text-decoration: underline; }
.text-primary-teal { color: var(--pub-primary) !important; }

/* ── Podio top3 ── */
.podium-cards {
  display: flex;
  gap: .75rem;
  justify-content: center;
  align-items: flex-end;
  padding: .5rem 0 1rem;
}
.podium-card {
  flex: 1;
  max-width: 8rem;
  text-align: center;
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: var(--t-radius);
  padding: 1rem .75rem;
  box-shadow: var(--pub-shadow);
}
.podium-1 { order: 2; transform: scale(1.06); border-color: var(--t-gold); box-shadow: 0 0 0 2px var(--t-gold); }
.podium-2 { order: 1; }
.podium-3 { order: 3; }
.podium-medal { font-size: 1.6rem; margin-bottom: .35rem; }
.podium-avatar-wrap { margin: 0 auto .5rem; width: 3rem; height: 3rem; }
.podium-avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--pub-border); }
.podium-avatar-init {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--pub-soft); color: var(--pub-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; border: 2px solid var(--pub-border);
}
.podium-name { font-size: .78rem; font-weight: 700; line-height: 1.2; margin-bottom: .25rem; word-break: break-word; }
.podium-pts { font-size: 1.1rem; font-weight: 800; color: var(--pub-primary); }
.podium-pts-label { font-size: .7rem; font-weight: 600; color: var(--pub-muted); }

/* ── Cards de partido en la home ── */
.home-match-list { display: grid; gap: .65rem; }
.home-match-card {
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  padding: .85rem 1rem;
  box-shadow: var(--pub-shadow);
}
.home-match-card.match-live { border-color: #fca5a5; }
.home-result-card { }

.home-match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
}
.home-match-phase { font-size: .72rem; font-weight: 800; color: var(--pub-primary); text-transform: uppercase; letter-spacing: .06em; }
.home-match-date { font-size: .75rem; color: var(--pub-muted); font-weight: 600; }
.match-live-badge { font-size: .72rem; font-weight: 800; color: var(--t-live); display: flex; align-items: center; gap: .3rem; }
.match-live-badge i { font-size: .5rem; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.home-match-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
}
.home-team { display: flex; align-items: center; gap: .45rem; }
.home-team.away { justify-content: flex-end; }
.home-team-flag {
  width: 2.2rem; height: 1.5rem;
  border-radius: .2rem; object-fit: cover;
  border: 1px solid var(--pub-border); flex: 0 0 auto;
}
.home-team-flag-empty { background: #eef5f5; }
.home-team-code { font-weight: 800; font-size: .88rem; }
.home-match-vs { color: var(--pub-muted); font-weight: 800; font-size: .8rem; text-align: center; }

.home-result-score {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: 1.4rem;
  font-weight: 800;
  justify-content: center;
}
.home-result-sep { color: var(--pub-muted); font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   PREMIOS
   ══════════════════════════════════════════════════════════════════════════ */

.premio-podio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.premio-podio-card {
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: var(--t-radius);
  padding: 1.75rem 1.25rem;
  text-align: center;
  box-shadow: var(--pub-shadow);
  position: relative;
  overflow: hidden;
}
.premio-pos-1 { border-top: 4px solid var(--t-gold); }
.premio-pos-2 { border-top: 4px solid var(--t-silver); }
.premio-pos-3 { border-top: 4px solid var(--t-bronze); }

.premio-medal { font-size: 2.5rem; margin-bottom: .5rem; }
.premio-posicion { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--pub-muted); margin-bottom: .4rem; }
.premio-nombre { font-size: 1.1rem; font-weight: 800; margin-bottom: .5rem; }
.premio-monto { font-size: 1.8rem; font-weight: 900; color: var(--pub-primary); margin-bottom: .4rem; }
.premio-desc { font-size: .83rem; color: var(--pub-muted); margin-bottom: 1rem; }

.premio-current-winner {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pub-border);
}
.premio-winner-label { font-size: .7rem; color: var(--pub-muted); font-weight: 700; margin-bottom: .5rem; }
.premio-winner-info { display: flex; align-items: center; gap: .6rem; justify-content: center; }
.premio-winner-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--pub-border); flex: 0 0 auto; }
.premio-winner-avatar-init {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--pub-soft); color: var(--pub-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; border: 2px solid var(--pub-border); flex: 0 0 auto;
}
.premio-winner-name { font-size: .83rem; font-weight: 700; color: var(--pub-text); }
.premio-winner-pts { font-size: .75rem; color: var(--pub-muted); }

.premio-list { display: grid; gap: .65rem; }
.premio-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  padding: .85rem 1rem;
  box-shadow: var(--pub-shadow);
}
.premio-list-pos {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--pub-soft); color: var(--pub-primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; flex: 0 0 auto;
}
.premio-list-body { flex: 1; min-width: 0; }
.premio-list-nombre { font-weight: 700; }
.premio-list-desc { font-size: .8rem; color: var(--pub-muted); }
.premio-list-monto { font-weight: 800; color: var(--pub-primary); white-space: nowrap; }

/* ── Ranking table en premios ── */
.ranking-page { max-width: 68rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
.ranking-hero { margin-bottom: 1.5rem; }
.ranking-avatar { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.ranking-avatar-placeholder, .ranking-avatar-lg-placeholder {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--pub-soft); border: 1px solid var(--pub-border);
}
.ranking-avatar-lg { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
.ranking-avatar-lg-placeholder { width: 3.5rem; height: 3.5rem; }
.ranking-table { }
.ranking-col-pos { width: 3rem; }
.ranking-col-pts { width: 4rem; }
.ranking-col-res, .ranking-col-gol { width: 3rem; }
.ranking-col-mov { width: 3.5rem; }
.ranking-badge-gold   { background: var(--t-gold); color: #fff; }
.ranking-badge-silver { background: var(--t-silver); color: #fff; }
.ranking-badge-bronze { background: var(--t-bronze); color: #fff; }
.ranking-new-badge    { font-size: .65rem; }
.ranking-top-1 td:first-child { border-left: 3px solid var(--t-gold); }
.ranking-top-2 td:first-child { border-left: 3px solid var(--t-silver); }
.ranking-top-3 td:first-child { border-left: 3px solid var(--t-bronze); }
.ranking-player-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--pub-text);
    text-decoration: none;
    letter-spacing: -.01em;
}
.ranking-player-name:hover { color: var(--pub-primary); }