:root {
  --bg: #04101f;
  --bg2: #071a34;
  --panel: rgba(8, 26, 51, .78);
  --panel2: rgba(11, 42, 78, .68);
  --line: rgba(68, 202, 255, .28);
  --cyan: #22d9ff;
  --blue: #188cff;
  --green: #35f779;
  --gold: #ffd166;
  --red: #ff5f68;
  --muted: #99afc6;
  --text: #f5fbff;
  --shadow: 0 28px 90px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(34, 217, 255, .24), transparent 28%),
    radial-gradient(circle at 82% 14%, rgba(255, 209, 102, .13), transparent 26%),
    radial-gradient(circle at 50% 92%, rgba(24, 140, 255, .22), transparent 34%),
    linear-gradient(135deg, #020817, #04162b 45%, #081a34);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(34, 217, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 217, 255, .05) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at center, black, transparent 82%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(30, 156, 255, .22), transparent 58%),
    linear-gradient(90deg, rgba(4, 16, 31, .88) 0%, rgba(4, 16, 31, .50) 50%, rgba(4, 16, 31, .88) 100%),
    url('/assets/argentina-campeones-bg.svg') center top / cover no-repeat;
  opacity: .62;
  mix-blend-mode: screen;
}

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1580px, 96vw);
  margin: 0 auto;
  padding: 24px 0 48px;
}

.hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand-logo {
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 0 20px rgba(255, 126, 27, .35));
}

.eyebrow {
  color: var(--cyan);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .18em;
  margin: 0 0 7px;
  font-weight: 800;
}

h1, h2, h3, p { margin-top: 0; }
h1 {
  font-size: clamp(2.1rem, 4.2vw, 5.2rem);
  line-height: .96;
  letter-spacing: -.05em;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 0 34px rgba(34, 217, 255, .2);
}
h1 span { color: var(--cyan); }
.hero-copy { max-width: 760px; margin: 10px 0 0; color: #c8d7e8; font-size: 1.05rem; }
.hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: end; }

.glass-card {
  background: linear-gradient(145deg, rgba(8, 29, 58, .85), rgba(3, 14, 32, .76));
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}

.auth-layout {
  display: grid;
  grid-template-columns: 1fr 470px;
  gap: 24px;
  align-items: stretch;
  min-height: 640px;
}

.trophy-card {
  position: relative;
  overflow: hidden;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.trophy-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 209, 102, .26), transparent 22%),
    radial-gradient(circle at 65% 68%, rgba(34, 217, 255, .28), transparent 24%),
    linear-gradient(135deg, transparent, rgba(255,255,255,.04));
}

.trophy-symbol {
  position: absolute;
  top: 60px;
  left: 70px;
  font-size: 12rem;
  filter: drop-shadow(0 0 38px rgba(255, 209, 102, .48));
  animation: float 5s ease-in-out infinite;
}

.glow-ball {
  position: absolute;
  width: 300px;
  height: 300px;
  right: 70px;
  top: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.94), rgba(34,217,255,.38) 25%, rgba(24,140,255,.3) 45%, rgba(0,0,0,.18) 62%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.15) 0 15deg, transparent 15deg 28deg);
  box-shadow: 0 0 60px rgba(34,217,255,.45), inset 0 0 40px rgba(255,255,255,.16);
  opacity: .72;
}

.trophy-card h2 {
  position: relative;
  font-size: clamp(2.5rem, 6vw, 5rem);
  margin-bottom: 12px;
  letter-spacing: -.04em;
}
.trophy-card p { position: relative; max-width: 560px; color: #d4e5f6; font-size: 1.1rem; }
.feature-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin-top: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(34,217,255,.2);
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  color: #dcecff;
}

.login-card { padding: 26px; align-self: center; }
.tabs { display: flex; gap: 8px; }
.compact-tabs { margin-bottom: 18px; }
.tab {
  border: 1px solid rgba(34,217,255,.22);
  background: rgba(4, 20, 40, .78);
  color: #b9c9db;
  padding: 11px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 800;
  transition: .2s ease;
}
.tab.active, .tab:hover {
  color: #04101f;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border-color: transparent;
  box-shadow: 0 0 28px rgba(34,217,255,.28);
}
.form-panel { display: grid; gap: 15px; }
.form-panel h2 { margin: 4px 0 4px; font-size: 1.8rem; }
label { display: grid; gap: 8px; color: #e9f6ff; font-weight: 750; }
input, select {
  width: 100%;
  border: 1px solid rgba(34,217,255,.26);
  background: rgba(1, 9, 22, .54);
  color: var(--text);
  border-radius: 14px;
  padding: 13px 14px;
  outline: none;
  font: inherit;
}
input:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(34,217,255,.08); }
input::placeholder { color: rgba(207, 224, 243, .54); }
.primary-btn, .ghost-btn, .save-btn, .danger-btn, .tiny-btn {
  border: 0;
  border-radius: 14px;
  padding: 13px 16px;
  color: white;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.primary-btn, .save-btn {
  background: linear-gradient(135deg, var(--blue), #1fd4ff);
  box-shadow: 0 12px 28px rgba(24, 140, 255, .28);
}
.ghost-btn {
  background: rgba(34,217,255,.08);
  border: 1px solid rgba(34,217,255,.32);
}
.danger-btn { background: linear-gradient(135deg, #e93648, #ff7a5c); }
.tiny-btn { padding: 8px 10px; font-size: .82rem; background: rgba(34,217,255,.12); border: 1px solid rgba(34,217,255,.25); }
.primary-btn:hover, .ghost-btn:hover, .save-btn:hover, .danger-btn:hover, .tiny-btn:hover { transform: translateY(-1px); }
button:disabled { opacity: .42; cursor: not-allowed; transform: none !important; }
.hint, .message { color: var(--muted); margin: 0; }
.message.error { color: #ff9ba2; }
.message.ok { color: #94ffb8; }
.hidden { display: none !important; }

.dashboard {
  display: grid;
  grid-template-columns: minmax(330px, 370px) minmax(520px, 1fr) minmax(300px, 340px);
  gap: 22px;
  align-items: start;
}
.left-rail, .right-rail { display: grid; gap: 18px; }
.score-widget, .progress-widget, .ranking-widget, .rules-widget, .closing-widget { padding: 22px; }
.standings-widget {
  padding: 24px;
  overflow: hidden;
}
.score-ring {
  width: 170px;
  height: 170px;
  margin: 12px auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(7, 20, 43, 1) 56%, transparent 58%),
    conic-gradient(var(--green) 0 70%, rgba(34,217,255,.14) 70% 100%);
  box-shadow: 0 0 34px rgba(53,247,121,.26);
}
.score-ring span { font-size: 3.2rem; font-weight: 1000; line-height: 1; }
.score-ring small { margin-top: -38px; color: var(--gold); font-weight: 900; }
.big-number { font-size: 3rem; font-weight: 1000; line-height: 1; margin-bottom: 14px; }
.big-number small { font-size: 1.2rem; color: var(--muted); }
.progress { height: 10px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--cyan)); transition: width .25s ease; }

.main-panel { padding: 22px; }
.panel-title, .card-title-row, .filters-row, .match-actions, .admin-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.panel-title h2 { font-size: 2rem; margin: 0; }
.status-pill, .status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .78rem;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.status-pill { background: rgba(53,247,121,.11); color: var(--green); border: 1px solid rgba(53,247,121,.24); }
.status-pill.locked { background: rgba(255,95,104,.1); color: #ff9ba2; border-color: rgba(255,95,104,.28); }
.group-tabs { overflow-x: auto; padding: 5px 0 14px; margin-top: 12px; }
.filters-row { margin: 0 0 16px; }
.filters-row input { flex: 1; }
.filters-row select { max-width: 210px; }
.matches-list { display: grid; gap: 14px; }

.match-card {
  display: grid;
  grid-template-columns: 116px 1fr 155px 1fr 170px;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(34,217,255,.22);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(4, 20, 40, .84), rgba(12, 47, 86, .48));
}
.match-date { color: #dcecff; display: grid; gap: 2px; }
.date-day { font-weight: 950; color: var(--cyan); }
.match-date small { color: var(--muted); }
.team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.team-b { justify-content: flex-end; text-align: right; }
.flag { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; font-size: 2rem; filter: drop-shadow(0 0 8px rgba(255,255,255,.14)); }
.flag-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 32px; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 14px rgba(34,217,255,.14); vertical-align: middle; }
.flag-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flag-badge .flag-fallback { display: none; line-height: 1; }
.flag-badge.emoji-only { background: transparent; border-color: transparent; box-shadow: none; width: auto; height: auto; overflow: visible; }
.flag-badge.emoji-only .flag-fallback { display: inline; }
.flag-badge.small { width: 30px; height: 22px; border-radius: 6px; margin: 0 4px; }
.flag-badge.small.emoji-only { width: auto; height: auto; margin: 0 4px; }
.team-mini { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.team-mini .flag-badge { width: 28px; height: 20px; border-radius: 5px; }
.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-inputs { display: grid; grid-template-columns: 1fr 18px 1fr; align-items: center; gap: 8px; text-align: center; }
.score-inputs input { padding: 12px 6px; text-align: center; font-size: 1.45rem; font-weight: 1000; }
.match-actions { align-items: stretch; flex-direction: column; }
.status-chip.abierto { color: var(--green); background: rgba(53,247,121,.11); border: 1px solid rgba(53,247,121,.26); }
.status-chip.bloqueado { color: #ff9ba2; background: rgba(255,95,104,.11); border: 1px solid rgba(255,95,104,.28); }
.status-chip.finalizado { color: #d6e8ff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); }
.real-score { color: var(--gold); font-weight: 850; text-align: center; min-height: 18px; }

.ranking-list { display: grid; gap: 10px; }
.rank-row, .table-row {
  display: grid;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 9px 0;
  color: #d9eaff;
}
.rank-row { grid-template-columns: 34px 1fr auto; }
.rank-row .pos { font-weight: 1000; color: var(--gold); }
.rank-row .points { font-weight: 1000; color: var(--cyan); }
.mini-table {
  display: grid;
  gap: 6px;
  font-size: .84rem;
  overflow-x: auto;
  padding: 14px;
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(34,217,255,.14);
  background: rgba(0,0,0,.16);
  scrollbar-color: rgba(34,217,255,.45) rgba(255,255,255,.08);
  scrollbar-width: thin;
}
.mini-table::-webkit-scrollbar { height: 8px; }
.mini-table::-webkit-scrollbar-track { background: rgba(255,255,255,.08); border-radius: 99px; }
.mini-table::-webkit-scrollbar-thumb { background: rgba(34,217,255,.45); border-radius: 99px; }
.table-row { grid-template-columns: 1fr 28px 28px 34px; }
.standings-row {
  grid-template-columns: minmax(124px, 1fr) repeat(8, minmax(25px, 28px));
  min-width: 392px;
  gap: 6px;
  padding: 10px 4px;
}
.standings-row span:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; }
.standings-row .team-mini { min-width: 0; overflow: hidden; }
.standings-row .team-mini span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standings-legend { min-width: 392px; margin: 12px 4px 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.table-row.header { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.rules-widget p { margin-bottom: 8px; color: #d6e8ff; }

.admin-layout { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
.admin-card { padding: 22px; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.action-tile {
  border: 1px solid rgba(34,217,255,.22);
  background: rgba(4,20,40,.58);
  border-radius: 18px;
  padding: 16px;
  display: grid;
  gap: 10px;
}
.action-tile .icon { font-size: 2rem; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { border-bottom: 1px solid rgba(255,255,255,.08); padding: 10px 8px; text-align: left; vertical-align: middle; }
.admin-table th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.admin-table input, .admin-table select { padding: 8px; border-radius: 10px; }
.admin-table .score-cell { display: flex; gap: 6px; align-items: center; }
.admin-table .score-cell input { width: 58px; text-align: center; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0 18px; }
.toolbar input, .toolbar select { max-width: 230px; }
.stat-list { display: grid; gap: 10px; }
.stat-box { border-radius: 16px; border: 1px solid rgba(34,217,255,.18); padding: 14px; background: rgba(0,0,0,.16); }
.stat-box b { display: block; font-size: 2rem; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@media (max-width: 1320px) {
  .app-shell { width: min(1640px, 97vw); }
  .dashboard {
    grid-template-columns: minmax(310px, 340px) minmax(480px, 1fr) minmax(280px, 320px);
    gap: 16px;
  }
  .main-panel, .score-widget, .progress-widget, .ranking-widget, .rules-widget, .closing-widget, .clock-widget { padding: 20px; }
  .standings-widget { padding: 22px; }
  .match-card { grid-template-columns: 104px 1fr 138px 1fr 160px; gap: 12px; }
}

@media (max-width: 1180px) {
  .dashboard { grid-template-columns: 1fr; }
  .left-rail, .right-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .standings-widget { grid-column: 1 / -1; }
  .match-card { grid-template-columns: 105px 1fr 140px 1fr; }
  .match-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; }
  .mini-table { padding: 16px; }
  .standings-row, .standings-legend { min-width: 0; }
  .admin-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(100% - 24px, 560px);
    padding: 16px 0 32px;
  }

  .hero-header, .brand-block {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-header {
    gap: 14px;
    margin-bottom: 16px;
  }

  .brand-block { gap: 12px; }
  .brand-logo { width: 62px; height: 62px; }
  h1 { font-size: clamp(2rem, 11vw, 3.1rem); }
  .hero-copy { font-size: .98rem; line-height: 1.45; }
  .hero-actions { width: 100%; justify-content: flex-start; }

  .auth-layout { grid-template-columns: 1fr; }
  .trophy-card { min-height: 360px; padding: 28px; }
  .trophy-symbol { font-size: 7rem; top: 34px; left: 36px; }
  .glow-ball { width: 200px; height: 200px; right: 20px; top: 72px; }

  .dashboard {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .left-rail,
  .right-rail {
    display: contents;
  }

  .score-widget { order: 1; }
  .progress-widget { order: 2; }
  .closing-widget, .clock-widget { order: 3; }
  .ranking-widget { order: 4; }
  .main-panel { order: 5; }
  .standings-widget { order: 6; }
  .rules-widget { order: 7; }
  .notice-panel.main-panel { order: 0; width: 100%; }

  .glass-card { border-radius: 20px; }
  .score-widget, .progress-widget, .ranking-widget, .rules-widget, .closing-widget, .clock-widget, .main-panel, .standings-widget { padding: 18px; }

  .score-widget {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-items: center;
  }
  .score-widget .eyebrow { grid-column: 1 / -1; }
  .score-ring { width: 118px; height: 118px; margin: 4px 0 4px; }
  .score-ring span { font-size: 2.4rem; }
  .score-ring small { margin-top: -26px; }
  .score-widget p:last-child { margin: 0; }

  .clock-time { font-size: clamp(2.1rem, 13vw, 3rem); }
  .countdown-summary { padding: 12px; }
  .closure-row { padding: 11px 12px; grid-template-columns: 1fr; gap: 6px; }
  .closure-row strong { font-size: 1.05rem; }

  .notice-panel {
    padding: 16px;
    margin-top: 2px;
  }
  .notice-title-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .notice-meta {
    align-items: flex-start;
  }
  .notice-body {
    font-size: 1rem;
    line-height: 1.55;
  }
  .notice-marquee-wrap { margin-top: 14px; }
  .notice-marquee { padding: 10px 0; font-size: .92rem; }

  .panel-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .panel-title h2 { font-size: 1.8rem; }
  .status-pill { align-self: flex-start; }

  .group-tabs {
    display: flex;
    gap: 8px;
    margin: 10px -2px 14px;
    padding: 4px 2px 12px;
    scroll-snap-type: x proximity;
  }
  .group-tabs .tab {
    min-width: 78px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 12px;
    font-size: .86rem;
  }

  .filters-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .filters-row select { max-width: none; }

  .matches-list { gap: 12px; }
  .match-card {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 12px;
    padding: 15px;
  }
  .match-date {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 8px;
  }
  .date-day { font-size: 1rem; }
  .match-date .venue { grid-column: 1 / -1; }

  .team, .team-b {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
  }
  .team-b { flex-direction: row-reverse; justify-content: flex-end; }
  .team-b .name { text-align: left; }
  .flag { min-width: 42px; font-size: 1.65rem; }
  .flag-badge { width: 42px; height: 29px; border-radius: 8px; }

  .score-inputs {
    width: 100%;
    max-width: 220px;
    justify-self: center;
  }
  .score-inputs input { font-size: 1.3rem; min-height: 52px; }

  .match-actions {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .status-chip, .save-btn { width: 100%; }
  .real-score, .match-countdown { text-align: center; }

  .standings-widget { overflow: hidden; }
  .standings-widget .card-title-row h3 { font-size: 1.05rem; }
  .mini-table {
    margin-top: 12px;
    padding: 12px;
    font-size: .78rem;
    border-radius: 16px;
  }
  .standings-row {
    min-width: 380px;
    grid-template-columns: minmax(118px, 1fr) repeat(8, minmax(22px, 26px));
    gap: 4px;
    padding: 9px 2px;
  }
  .table-row.header { font-size: .65rem; }
  .standings-legend {
    min-width: 380px;
    margin: 10px 2px 0;
    font-size: .68rem;
  }

  .admin-grid { grid-template-columns: 1fr; }
  .admin-header-row { flex-direction: column; align-items: stretch; }
  .toolbar { align-items: stretch; }
  .toolbar input, .toolbar select, .toolbar button { max-width: none; width: 100%; }
  .admin-card { padding: 18px; overflow-x: auto; }
  .admin-table { min-width: 760px; }
}

@media (max-width: 430px) {
  .app-shell { width: min(100% - 18px, 430px); }
  .score-widget { grid-template-columns: 1fr; text-align: center; }
  .score-ring { margin: 4px auto 12px; }
  .match-card { padding: 14px; }
  .main-panel, .standings-widget, .score-widget, .progress-widget, .ranking-widget, .rules-widget, .closing-widget, .clock-widget { padding: 16px; }
  .notice-panel { padding: 14px; }
  .notice-body { font-size: .96rem; }
  .admin-subgrid { grid-template-columns: 1fr; }
  .mini-table { padding: 10px; }
}

/* OpenFootball sync */
.openfootball-card h2 { margin: 0 0 12px; }
.of-info { display: grid; gap: 10px; margin-bottom: 12px; }
.openfootball-status { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.check-stack { display: grid; gap: 8px; margin: 12px 0; }
.check-stack label { display: flex; align-items: center; gap: 8px; color: #d6e8ff; font-size: .9rem; }
.check-stack input { width: auto; }
.file-label { display: grid; gap: 8px; }
.file-label input { padding: 10px; }
.preview-box {
  border: 1px solid rgba(34,217,255,.2);
  background: rgba(4,20,40,.42);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.preview-box > span { color: var(--muted); font-size: .9rem; }
.sync-history { display: grid; gap: 6px; font-size: .82rem; color: #d6e8ff; }
.sync-history div { padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.05); }

.inline-check { display: inline-flex; align-items: center; gap: 8px; color: #d6e8ff; }
.inline-check input { width: auto; }
.status-note { display: block; margin-top: 6px; color: var(--muted); line-height: 1.35; max-width: 240px; }
.status-chip.bloqueado::before { content: '🔒'; }
.status-chip.abierto::before { content: '🟢'; }
.status-chip.finalizado::before { content: '🏁'; }

/* Próximos cierres y cuenta regresiva */
.closing-widget, .clock-widget { padding: 22px; }
.clock-time {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.04em;
  color: var(--cyan);
  text-shadow: 0 0 24px rgba(34,217,255,.35);
  font-variant-numeric: tabular-nums;
}
.countdown-summary {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(255,209,102,.24);
  border-radius: 16px;
  background: rgba(255,209,102,.08);
  display: grid;
  gap: 4px;
}
.countdown-summary small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
}
.countdown-summary b,
.match-countdown,
.admin-countdown {
  font-variant-numeric: tabular-nums;
}
.countdown-summary b { color: var(--gold); }
.upcoming-closures {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.closure-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(255,209,102,.20);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,209,102,.08), rgba(34,217,255,.06));
}
.closure-row b {
  display: block;
  color: #f8fcff;
  font-size: .92rem;
  line-height: 1.25;
}
.closure-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.25;
}
.closure-row strong {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-size: .98rem;
  white-space: nowrap;
}
.closure-row.urgent {
  border-color: rgba(255,95,104,.34);
  background: linear-gradient(135deg, rgba(255,95,104,.13), rgba(255,209,102,.07));
}
.closure-row.urgent strong { color: var(--red); }
.countdown-summary b.urgent,
.match-countdown.urgent,
.admin-countdown.urgent { color: var(--red); }
.match-countdown {
  display: none;
  text-align: center;
  color: var(--gold);
  font-weight: 950;
  min-height: 18px;
}
.match-countdown.active,
.match-countdown.urgent { display: block; }
.admin-countdown {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--muted);
  font-weight: 850;
}
.admin-countdown.active { color: var(--gold); }

/* Versión comercial / moderación */
.field-help {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
  font-weight: 500;
}
.legal-check {
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(34,217,255,.16);
  border-radius: 14px;
  background: rgba(0,0,0,.12);
  font-weight: 650;
  line-height: 1.35;
}
.legal-check input { margin-top: 3px; }
.admin-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid rgba(34,217,255,.12); }
.participants-table small { color: var(--muted); line-height: 1.35; }
.participant-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 260px; }
.participant-state.activo { color: var(--green); }
.participant-state.oculto,
.participant-state.pendiente { color: var(--gold); border-color: rgba(255,209,102,.28); background: rgba(255,209,102,.08); }
.participant-state.anulado,
.participant-state.bloqueado { color: #ff9ba2; border-color: rgba(255,95,104,.32); background: rgba(255,95,104,.1); }

@media (max-width: 760px) {
  body { background-attachment: fixed; }
  .app-shell { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .main-panel { padding: 16px; }
  .panel-title h2 { font-size: 1.55rem; }
  .group-tabs { margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px; }
  .group-tabs .tab { min-width: 72px; padding: 9px 10px; }
  .match-card {
    grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr);
    grid-template-areas:
      "date date date"
      "teamA score teamB"
      "actions actions actions";
    align-items: center;
    gap: 10px 8px;
    padding: 13px;
  }
  .match-date { grid-area: date; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
  .match-date .venue { grid-column: auto; width: 100%; }
  .team-a { grid-area: teamA; flex-direction: column; align-items: flex-start; gap: 6px; }
  .team-b { grid-area: teamB; flex-direction: column; align-items: flex-end; justify-content: flex-start; text-align: right; gap: 6px; }
  .team-b .name { text-align: right; }
  .team .name { white-space: normal; font-size: .9rem; line-height: 1.15; }
  .score-inputs { grid-area: score; max-width: 128px; justify-self: center; gap: 5px; }
  .score-inputs input { min-height: 44px; font-size: 1.15rem; border-radius: 13px; }
  .match-actions { grid-area: actions; display: grid; grid-template-columns: 1fr; gap: 8px; }
  .status-chip { min-height: 26px; padding: 6px 10px; }
  .save-btn { min-height: 44px; }
  .real-score { font-size: .83rem; }
  .closure-row { grid-template-columns: 1fr auto; }
  .participants-table { min-width: 900px; }
}

@media (max-width: 430px) {
  .match-card {
    grid-template-columns: 1fr 118px 1fr;
    gap: 9px 6px;
  }
  .flag-badge { width: 38px; height: 26px; }
  .team .name { font-size: .84rem; }
  .score-inputs { max-width: 118px; }
  .score-inputs input { min-height: 42px; }
  .closure-row { grid-template-columns: 1fr; }
}

/* Mobile UX v2.1 - fixture compacto real para teléfonos */
.match-main-row { display: contents; }

@media (max-width: 760px) {
  body { min-width: 0; }
  .app-shell {
    width: 100%;
    max-width: 560px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: max(96px, env(safe-area-inset-bottom));
  }

  .hero-header {
    padding: 12px 2px 2px;
    margin-bottom: 10px;
  }
  .brand-block {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .brand-logo { width: 48px; height: 48px; }
  .eyebrow { font-size: .68rem; }
  h1 { font-size: clamp(1.65rem, 8vw, 2.45rem); line-height: .98; }
  .hero-copy { display: none; }
  .hero-actions { gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .hero-actions .status-pill, .hero-actions .ghost-btn { white-space: nowrap; padding: 8px 10px; font-size: .72rem; }

  .dashboard { gap: 10px; }
  .score-widget, .progress-widget, .ranking-widget, .rules-widget, .closing-widget, .main-panel, .standings-widget {
    padding: 14px;
    border-radius: 18px;
  }
  .score-widget {
    grid-template-columns: 86px 1fr;
    text-align: left;
    column-gap: 12px;
  }
  .score-ring { width: 86px; height: 86px; margin: 2px 0; }
  .score-ring span { font-size: 2rem; }
  .score-ring small { margin-top: -20px; font-size: .75rem; }
  .progress-widget .big-number { font-size: 2.1rem; }
  .closing-widget .hint { display: none; }
  .closure-row { padding: 9px 10px; border-radius: 12px; }

  .main-panel { padding: 12px; }
  .panel-title { margin-bottom: 6px; }
  .panel-title h2 { font-size: 1.45rem; }
  .status-pill { padding: 6px 10px; font-size: .68rem; }
  .group-tabs {
    margin: 8px -2px 10px;
    padding: 2px 2px 8px;
    gap: 6px;
  }
  .group-tabs .tab {
    min-width: 62px;
    padding: 8px 9px;
    font-size: .76rem;
    border-radius: 12px;
  }
  .filters-row { gap: 8px; margin-bottom: 10px; }
  .filters-row input, .filters-row select { padding: 11px 12px; font-size: .9rem; border-radius: 12px; }
  .matches-list { gap: 9px; }

  .match-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 11px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(4, 20, 40, .88), rgba(8, 34, 66, .58));
  }
  .match-date {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 2px 6px;
    line-height: 1.15;
  }
  .date-day { font-size: .9rem; }
  .match-date .date-time { font-size: .86rem; }
  .match-date .venue {
    grid-column: 1 / -1;
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .match-main-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 102px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .team, .team-b {
    width: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .team-a { justify-content: flex-start; text-align: left; }
  .team-b { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
  .team-b .name { text-align: right; }
  .flag { min-width: 0; font-size: 1.25rem; }
  .flag-badge { width: 30px; height: 22px; min-width: 30px; border-radius: 6px; }
  .team .name {
    min-width: 0;
    font-size: .82rem;
    line-height: 1.12;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .score-inputs {
    width: 102px;
    max-width: none;
    justify-self: center;
    grid-template-columns: 42px 10px 42px;
    gap: 4px;
  }
  .score-inputs input {
    width: 42px;
    min-height: 40px;
    padding: 6px 4px;
    border-radius: 12px;
    font-size: 1.05rem;
  }
  .score-inputs span { font-size: .9rem; color: var(--muted); }

  .match-actions {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px 8px;
  }
  .status-chip {
    width: auto;
    min-height: 24px;
    padding: 5px 9px;
    font-size: .62rem;
    justify-self: start;
  }
  .real-score {
    text-align: right;
    justify-self: end;
    min-height: 0;
    font-size: .76rem;
    line-height: 1.2;
  }
  .match-countdown {
    grid-column: 1 / -1;
    text-align: center;
    font-size: .82rem;
  }
  .save-btn {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: .88rem;
  }

  .standings-widget { padding: 14px; }
  .mini-table { padding: 10px; margin-top: 8px; }
}

@media (max-width: 430px) {
  .app-shell { padding-left: 8px; padding-right: 8px; }
  .match-card { padding: 10px; }
  .match-main-row { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); gap: 6px; }
  .score-inputs { width: 96px; grid-template-columns: 39px 10px 39px; }
  .score-inputs input { width: 39px; min-height: 38px; }
  .flag-badge { width: 28px; height: 20px; min-width: 28px; }
  .team .name { font-size: .78rem; }
  .match-date .venue { font-size: .75rem; }
}

/* Landing premium Fénix v2.2 */
.brand-logo-wide {
  width: clamp(128px, 14vw, 230px);
  height: auto;
  max-height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(255, 118, 24, .34));
}

.landing-hero-card {
  min-height: 640px;
  padding: 0;
  justify-content: stretch;
  display: block;
  border-radius: 28px;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(5, 21, 42, .92), rgba(7, 37, 72, .76)),
    radial-gradient(circle at 72% 50%, rgba(34, 217, 255, .16), transparent 38%);
}

.landing-hero-card::before {
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 209, 102, .20), transparent 26%),
    radial-gradient(circle at 78% 52%, rgba(34, 217, 255, .28), transparent 28%),
    linear-gradient(130deg, rgba(255,255,255,.06), transparent 52%);
  z-index: 0;
}

.landing-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(rgba(34,217,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,217,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 70% 55%, rgba(34,217,255,.16), transparent 42%);
  background-size: 52px 52px, 52px 52px, auto;
  opacity: .75;
}

.landing-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
}

.worldcup-art {
  position: absolute;
  inset: -10px -18px -6px -22px;
  width: calc(100% + 46px);
  height: calc(100% + 20px);
  object-fit: cover;
  opacity: .96;
  filter: saturate(1.18) contrast(1.05) drop-shadow(0 0 34px rgba(34,217,255,.22));
}

.landing-copy-block {
  position: relative;
  z-index: 3;
  width: min(520px, 56%);
  padding: 130px 34px 110px min(45%, 430px);
  display: grid;
  align-content: center;
  min-height: 540px;
}

.landing-copy-block h2 {
  font-size: clamp(3rem, 5.6vw, 5.9rem);
  line-height: .9;
  letter-spacing: -.055em;
  margin: 0 0 20px;
  text-shadow: 0 0 34px rgba(34,217,255,.24);
}

.landing-copy-block h2 span {
  display: block;
  color: var(--cyan);
}

.landing-copy-block > p:not(.eyebrow) {
  font-size: 1.08rem;
  line-height: 1.46;
  color: #e6f5ff;
  max-width: 430px;
  margin-bottom: 18px;
}

.landing-features {
  display: grid;
  gap: 10px;
  width: min(360px, 100%);
}

.landing-brand-strip {
  position: absolute;
  z-index: 4;
  left: min(43%, 410px);
  right: 36px;
  bottom: 22px;
  min-height: 86px;
  display: grid;
  grid-template-columns: minmax(170px, 270px) 1fr;
  align-items: center;
  gap: 22px;
  padding: 10px 0 0 28px;
  border-left: 1px solid rgba(255,255,255,.28);
}

.landing-brand-strip img {
  width: min(260px, 100%);
  max-height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(255,107,24,.28));
}

.landing-brand-strip p {
  margin: 0;
  color: #f8fcff;
  font-size: 1.15rem;
  line-height: 1.2;
}

.landing-brand-strip b {
  display: block;
  color: var(--cyan);
  font-size: 1.35rem;
}

.login-card {
  min-height: 560px;
  display: grid;
  align-content: center;
  border-radius: 28px;
}

.login-card .form-panel h2 {
  font-size: clamp(1.9rem, 2.4vw, 2.55rem);
  letter-spacing: -.03em;
}

.login-card input {
  min-height: 56px;
}

.login-card .primary-btn {
  min-height: 58px;
  font-size: 1.05rem;
}

.site-credit {
  position: relative;
  z-index: 1;
  margin: 22px auto 0;
  padding: 12px 0 0;
  width: min(760px, 90%);
  text-align: center;
  color: #d6e8ff;
  border-top: 1px solid rgba(34,217,255,.18);
}
.site-credit b { color: var(--cyan); }

@media (max-width: 1180px) {
  .auth-layout { grid-template-columns: 1fr; }
  .login-card { min-height: auto; }
  .landing-copy-block { width: min(560px, 62%); padding-left: min(42%, 390px); }
}

@media (max-width: 760px) {
  .brand-logo-wide { width: min(190px, 52vw); max-height: 92px; }
  .auth-layout { gap: 14px; min-height: auto; }
  .landing-hero-card { min-height: 590px; border-radius: 22px; }
  .worldcup-art {
    inset: -5px -170px 0 -42px;
    width: calc(100% + 210px);
    height: 100%;
    opacity: .78;
  }
  .landing-copy-block {
    width: 100%;
    min-height: 470px;
    padding: 290px 20px 120px;
    align-content: end;
    background: linear-gradient(180deg, transparent 0%, rgba(3,14,32,.58) 48%, rgba(3,14,32,.96) 100%);
  }
  .landing-copy-block h2 { font-size: clamp(2.55rem, 13vw, 4.1rem); margin-bottom: 12px; }
  .landing-copy-block > p:not(.eyebrow) { font-size: .96rem; margin-bottom: 12px; }
  .landing-features { gap: 7px; }
  .feature-line { padding: 9px 12px; font-size: .9rem; }
  .landing-brand-strip {
    left: 20px;
    right: 20px;
    bottom: 16px;
    grid-template-columns: 1fr;
    gap: 4px;
    min-height: auto;
    padding: 8px 0 0 16px;
  }
  .landing-brand-strip img { width: 190px; max-height: 58px; }
  .landing-brand-strip p { font-size: .86rem; }
  .landing-brand-strip b { font-size: 1rem; }
  .login-card { padding: 18px; border-radius: 22px; }
  .login-card input { min-height: 50px; }
  .login-card .primary-btn { min-height: 50px; }
  .site-credit { font-size: .88rem; margin-top: 16px; padding-bottom: 14px; }
}

@media (max-width: 430px) {
  .landing-hero-card { min-height: 560px; }
  .worldcup-art { inset: -8px -190px 0 -58px; width: calc(100% + 245px); }
  .landing-copy-block { padding: 275px 16px 118px; }
  .landing-brand-strip { left: 16px; right: 16px; }
  .landing-brand-strip img { width: 170px; }
}

/* Landing real Fénix reference v2.3
   Objetivo: que la portada del programa se vea como la maqueta aprobada,
   usando el arte premium como pieza visual real dentro del sistema. */
.landing-hero-card-real {
  min-height: 648px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
}

.landing-hero-card-real::before,
.landing-hero-card-real::after,
.landing-hero-card-real .legacy-landing-art,
.landing-hero-card-real .landing-copy-block,
.landing-hero-card-real .landing-brand-strip {
  display: none !important;
}

.landing-reference-art {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 648px;
  object-fit: cover;
  object-position: center;
  border-radius: 28px;
  filter: saturate(1.04) contrast(1.02) drop-shadow(0 0 28px rgba(34,217,255,.10));
}

.auth-layout {
  align-items: center;
}

.login-card {
  min-height: 616px;
  background: linear-gradient(145deg, rgba(7, 20, 43, .93), rgba(2, 9, 22, .82));
  border: 1px solid rgba(34, 217, 255, .30);
  box-shadow: 0 32px 90px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.06);
}

.login-card .tab {
  min-width: 124px;
  min-height: 52px;
  border-radius: 14px;
  font-size: .98rem;
}

.login-card .form-panel {
  gap: 18px;
}

.login-card .hint {
  line-height: 1.45;
}

.hero-header {
  margin-bottom: 30px;
}

.site-credit {
  margin-top: 24px;
}

@media (max-width: 1180px) {
  .landing-hero-card-real {
    min-height: auto;
  }
  .landing-reference-art {
    min-height: auto;
    height: auto;
    object-fit: contain;
  }
  .login-card {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .landing-hero-card-real {
    border-radius: 22px;
  }
  .landing-reference-art {
    border-radius: 22px;
    min-height: 0;
    height: auto;
    object-fit: contain;
  }
  .login-card .tab {
    min-width: 0;
    flex: 1;
  }
}

/* Mobile UX v2.4 - campos de resultado grandes y claros */
@media (max-width: 760px) {
  .matches-list {
    gap: 12px;
  }

  .match-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  .match-date {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 3px 7px !important;
    padding-bottom: 2px;
  }

  .date-day {
    font-size: 1rem !important;
    letter-spacing: .02em;
  }

  .match-date .date-time {
    font-size: .92rem !important;
  }

  .match-date .venue {
    grid-column: 1 / -1 !important;
    font-size: .86rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    color: #a9bdd6;
  }

  .match-main-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid rgba(34,217,255,.16);
    border-radius: 18px;
    background: rgba(0, 0, 0, .16);
  }

  .team,
  .team-a,
  .team-b {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    justify-items: start !important;
    gap: 10px !important;
    text-align: left !important;
    flex-direction: unset !important;
  }

  .team-b {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .team-b .flag {
    order: 0 !important;
  }

  .team-b .name,
  .team .name {
    order: 1 !important;
    text-align: left !important;
    font-size: .98rem !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: #f4f9ff;
    white-space: normal !important;
    display: block !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  .flag-badge {
    width: 38px !important;
    height: 27px !important;
    min-width: 38px !important;
    border-radius: 7px !important;
  }

  .score-inputs {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) !important;
    gap: 10px !important;
    justify-self: stretch !important;
    align-items: center !important;
    padding: 12px !important;
    margin: 4px 0 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(34,217,255,.28) !important;
    background: linear-gradient(135deg, rgba(3,18,36,.94), rgba(10,47,82,.54)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.18);
  }

  .score-inputs::before {
    content: "CARGÁ TU RESULTADO";
    grid-column: 1 / -1;
    text-align: center;
    font-size: .78rem;
    font-weight: 1000;
    letter-spacing: .12em;
    color: var(--cyan);
    text-transform: uppercase;
    margin-bottom: 2px;
  }

  .score-inputs input {
    width: 100% !important;
    min-height: 60px !important;
    padding: 8px 6px !important;
    border-radius: 16px !important;
    font-size: 1.75rem !important;
    font-weight: 1000 !important;
    color: #fff !important;
    background: rgba(0, 10, 26, .84) !important;
    border: 2px solid rgba(34,217,255,.32) !important;
    box-shadow: inset 0 0 16px rgba(34,217,255,.06), 0 0 18px rgba(34,217,255,.08);
  }

  .score-inputs input:focus {
    border-color: rgba(34,217,255,.88) !important;
    box-shadow: 0 0 0 3px rgba(34,217,255,.14), 0 0 24px rgba(34,217,255,.18) !important;
  }

  .score-inputs input::placeholder {
    color: rgba(255,255,255,.22);
  }

  .score-inputs span {
    font-size: 1.15rem !important;
    font-weight: 1000;
    color: #d8ebff !important;
  }

  .match-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .status-chip {
    width: 100% !important;
    min-height: 32px !important;
    justify-self: stretch !important;
    border-radius: 999px !important;
    font-size: .7rem !important;
  }

  .real-score {
    text-align: center !important;
    font-size: .9rem !important;
    line-height: 1.25 !important;
  }

  .save-btn {
    width: 100% !important;
    min-height: 46px !important;
    font-size: .98rem !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 430px) {
  .match-card {
    padding: 12px !important;
  }

  .match-main-row {
    padding: 10px !important;
  }

  .score-inputs {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .score-inputs input {
    min-height: 56px !important;
    font-size: 1.55rem !important;
  }

  .team-b .name,
  .team .name {
    font-size: .92rem !important;
  }
}


/* Mobile UX v2.5 - corrección de superposición en carga de resultados */
@media (max-width: 760px) {
  .match-main-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "teamA teamB"
      "score score" !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  .match-main-row .team-a {
    grid-area: teamA !important;
  }

  .match-main-row .team-b {
    grid-area: teamB !important;
  }

  .match-main-row .team,
  .match-main-row .team-a,
  .match-main-row .team-b {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .match-main-row .team-b {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .match-main-row .team-b .flag {
    order: 2 !important;
  }

  .match-main-row .team-b .name {
    order: 1 !important;
    text-align: right !important;
  }

  .match-main-row .team .name {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .92rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
  }

  .match-main-row .flag-badge {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 25px !important;
    min-width: 36px !important;
  }

  .match-main-row .score-inputs {
    grid-area: score !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(86px, 1fr) 24px minmax(86px, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 8px 10px !important;
    align-items: center !important;
    margin: 4px 0 0 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .match-main-row .score-inputs::before {
    content: "CARGÁ TU RESULTADO" !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: .74rem !important;
    letter-spacing: .11em !important;
    line-height: 1.15 !important;
  }

  .match-main-row .score-inputs input,
  .match-main-row .score-inputs span {
    grid-row: 2 !important;
  }

  .match-main-row .score-inputs input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 1.8rem !important;
    line-height: 1 !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
  }

  .match-main-row .score-inputs span {
    width: 24px !important;
    min-width: 24px !important;
    text-align: center !important;
    justify-self: center !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
  }

  .match-actions {
    margin-top: 0 !important;
  }

  .match-actions .real-score {
    white-space: normal !important;
    text-align: center !important;
    font-size: .9rem !important;
  }

  .match-actions .save-btn {
    font-size: .98rem !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 390px) {
  .match-main-row {
    padding: 10px !important;
    gap: 10px !important;
  }

  .match-main-row .team .name {
    font-size: .84rem !important;
  }

  .match-main-row .flag-badge {
    flex-basis: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 22px !important;
  }

  .match-main-row .score-inputs {
    grid-template-columns: minmax(74px, 1fr) 20px minmax(74px, 1fr) !important;
    gap: 7px !important;
    padding: 10px !important;
  }

  .match-main-row .score-inputs input {
    height: 54px !important;
    min-height: 54px !important;
    font-size: 1.55rem !important;
  }
}


/* Features v2.7 - instrucciones, ojo de pronósticos, WhatsApp y recuperación */
.link-btn {
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  padding: 8px 10px;
}

.link-btn:hover { text-decoration: underline; }

.instructions-card {
  margin-bottom: 18px;
}

.instructions-card details {
  border: 1px solid rgba(34,217,255,.18);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(3, 18, 36, .45);
}

.instructions-card summary {
  cursor: pointer;
  color: var(--cyan);
  font-weight: 900;
}

.instructions-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.instructions-grid p {
  margin: 0;
  color: #d9e9fa;
  line-height: 1.45;
}

.rank-row-with-eye {
  grid-template-columns: auto 1fr auto auto;
}

.eye-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(34,217,255,.35);
  background: rgba(34,217,255,.10);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}

.eye-btn:hover {
  background: rgba(34,217,255,.22);
  box-shadow: 0 0 18px rgba(34,217,255,.18);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 8, 20, .72);
  backdrop-filter: blur(8px);
}

.modal-backdrop.hidden { display: none; }

.modal-card {
  width: min(980px, 96vw);
  max-height: min(82vh, 760px);
  overflow: auto;
  border-radius: 24px;
  padding: 22px;
  border: 1px solid rgba(34,217,255,.26);
  background: linear-gradient(135deg, rgba(5, 22, 45, .98), rgba(8, 42, 80, .94));
  box-shadow: var(--shadow);
}

.spy-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.spy-row {
  display: grid;
  grid-template-columns: 1fr 120px 90px 60px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
}

.spy-row.locked {
  opacity: .72;
  background: rgba(255,255,255,.025);
}

.spy-score {
  display: grid;
  gap: 2px;
  text-align: center;
}

.spy-score small {
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.locked-text, .muted {
  color: var(--muted);
  font-weight: 800;
}

.whatsapp-link {
  border-color: rgba(53, 247, 121, .35) !important;
  color: #dfffea !important;
  background: rgba(53, 247, 121, .10) !important;
}

.participant-actions {
  gap: 5px;
}

@media (max-width: 760px) {
  .spy-row {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .spy-score {
    grid-template-columns: 92px 1fr;
    text-align: left;
  }

  .rank-row-with-eye {
    grid-template-columns: auto 1fr auto;
  }

  .rank-row-with-eye .eye-btn {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    margin-top: 6px;
  }
}




/* Desktop layout v2.9 - PC sin superposición: 3 columnas estables */
@media (min-width: 1181px) {
  .app-shell {
    width: min(1760px, 96vw);
  }

  .hero-header {
    margin-bottom: 24px;
  }

  .brand-block {
    align-items: center;
  }

  .brand-logo-wide {
    width: 210px;
    max-height: 120px;
    object-fit: contain;
  }

  .brand-block h1,
  h1 {
    font-size: clamp(3.2rem, 4.7vw, 5.2rem);
    line-height: .92;
  }

  .hero-copy {
    max-width: 900px;
  }

  #dashboardSection.dashboard {
    display: grid;
    grid-template-columns: minmax(290px, 340px) minmax(720px, 1fr) minmax(280px, 330px);
    grid-template-areas:
      "left instructions right"
      "left fixture right";
    gap: 20px 22px;
    align-items: start;
  }

  #dashboardSection .left-rail {
    grid-area: left;
    display: grid;
    gap: 18px;
    min-width: 0;
  }

  #dashboardSection .right-rail {
    grid-area: right;
    display: grid;
    gap: 18px;
    min-width: 0;
  }

  #dashboardSection .instructions-card {
    grid-area: instructions;
    padding: 16px 18px;
    margin: 0;
    min-width: 0;
  }

  #dashboardSection > .main-panel:not(.instructions-card) {
    grid-area: fixture;
    min-width: 0;
    padding: 24px;
  }

  #dashboardSection .instructions-card .card-title-row {
    margin-bottom: 6px;
  }

  #dashboardSection .instructions-card h3 {
    margin: 0;
    font-size: 1.1rem;
  }

  #dashboardSection .instructions-card details {
    padding: 9px 12px;
  }

  #dashboardSection .instructions-card summary {
    font-size: .95rem;
  }

  #dashboardSection .instructions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }

  #dashboardSection .panel-title {
    align-items: flex-start;
  }

  #dashboardSection .panel-title h2 {
    font-size: clamp(2.35rem, 2.8vw, 3.1rem);
  }

  #dashboardSection .group-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 12px;
  }

  #dashboardSection .group-tabs .tab {
    min-width: 80px;
    padding: 13px 15px;
  }

  #dashboardSection .filters-row {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(180px, 240px);
    gap: 14px;
  }

  #dashboardSection .filters-row select {
    max-width: none;
  }

  #dashboardSection .matches-list {
    gap: 16px;
  }

  #dashboardSection .match-card {
    grid-template-columns: 128px minmax(155px, 1fr) minmax(150px, 180px) minmax(155px, 1fr) minmax(170px, 200px);
    gap: 15px;
    padding: 18px 20px;
    border-radius: 22px;
    min-width: 0;
  }

  #dashboardSection .team {
    min-width: 0;
  }

  #dashboardSection .team .name {
    font-size: 1.02rem;
    font-weight: 900;
  }

  #dashboardSection .score-inputs {
    min-width: 0;
  }

  #dashboardSection .score-inputs input {
    min-height: 56px;
    font-size: 1.5rem;
  }

  #dashboardSection .match-actions {
    gap: 10px;
    min-width: 0;
  }

  #dashboardSection .save-btn {
    min-height: 46px;
    font-size: .92rem;
  }

  #dashboardSection .real-score {
    text-align: center;
  }

  #dashboardSection .score-widget,
  #dashboardSection .progress-widget,
  #dashboardSection .standings-widget,
  #dashboardSection .ranking-widget,
  #dashboardSection .rules-widget,
  #dashboardSection .closing-widget {
    padding: 20px;
    min-width: 0;
  }

  #dashboardSection .score-ring {
    width: 150px;
    height: 150px;
  }

  #dashboardSection .score-ring span {
    font-size: 2.9rem;
  }

  #dashboardSection .big-number {
    font-size: 2.55rem;
  }

  #dashboardSection .upcoming-closure {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #dashboardSection .mini-table {
    padding: 14px;
    overflow-x: auto;
  }

  #dashboardSection .standings-row {
    min-width: 0;
    grid-template-columns: minmax(120px, 1fr) repeat(8, minmax(24px, .35fr));
    gap: 7px;
    font-size: .76rem;
  }

  #dashboardSection .standings-legend {
    min-width: 0;
    font-size: .72rem;
  }

  body::after {
    opacity: .32;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  #dashboardSection.dashboard {
    grid-template-columns: minmax(275px, 305px) minmax(610px, 1fr) minmax(250px, 285px);
    gap: 16px;
  }

  #dashboardSection > .main-panel:not(.instructions-card) {
    padding: 18px;
  }

  #dashboardSection .match-card {
    grid-template-columns: 112px minmax(130px, 1fr) minmax(128px, 148px) minmax(130px, 1fr) minmax(150px, 168px);
    gap: 10px;
    padding: 15px;
  }

  #dashboardSection .flag-badge {
    width: 40px;
    height: 28px;
  }

  #dashboardSection .team .name {
    font-size: .94rem;
  }

  #dashboardSection .score-inputs input {
    min-height: 50px;
    font-size: 1.3rem;
  }

  #dashboardSection .save-btn {
    min-height: 42px;
    font-size: .82rem;
  }

  #dashboardSection .status-chip {
    font-size: .7rem;
    padding: 7px 10px;
  }
}


/* v3.0 registro comercial */
.participants-table th,
.participants-table td {
  vertical-align: top;
}

.participant-actions .edit-real-name {
  border-color: rgba(255, 209, 102, .30);
}

.login-card .field-help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}

@media (min-width: 1181px) {
  .participants-table {
    min-width: 980px;
  }
}


/* v3.1 rankings por ronda, podio y lista completa con scroll */
.ranking-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ranking-tab {
  border: 1px solid rgba(34,217,255,.24);
  background: rgba(34,217,255,.08);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 900;
  cursor: pointer;
  font-size: .78rem;
}

.ranking-tab.active {
  background: linear-gradient(135deg, rgba(34,217,255,.28), rgba(24,140,255,.24));
  border-color: rgba(34,217,255,.52);
  color: #fff;
  box-shadow: 0 0 18px rgba(34,217,255,.16);
}

.ranking-podium {
  margin-bottom: 12px;
}

.podium-title {
  color: var(--cyan);
  font-weight: 1000;
  margin: 0 0 8px;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

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

.podium-card {
  min-height: 96px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 4px;
  padding: 10px 8px;
}

.podium-card.place-1 {
  background: linear-gradient(135deg, rgba(255,209,102,.24), rgba(34,217,255,.10));
  border-color: rgba(255,209,102,.36);
  min-height: 112px;
}

.podium-card small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.2;
}

.podium-medal {
  font-size: 1.5rem;
}

.ranking-scroll-list {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
  display: grid;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(34,217,255,.45) rgba(255,255,255,.05);
}

.ranking-scroll-list::-webkit-scrollbar {
  width: 8px;
}

.ranking-scroll-list::-webkit-scrollbar-thumb {
  background: rgba(34,217,255,.45);
  border-radius: 99px;
}

.ranking-scroll-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
  border-radius: 99px;
}

@media (max-width: 760px) {
  .podium-grid {
    grid-template-columns: 1fr;
  }

  .podium-card,
  .podium-card.place-1 {
    min-height: 76px;
  }

  .ranking-scroll-list {
    max-height: 360px;
  }
}


.notice-panel {
  padding: 22px 24px;
  background:
    linear-gradient(135deg, rgba(7, 27, 48, .88), rgba(14, 52, 89, .52)),
    radial-gradient(circle at 80% 20%, rgba(34,217,255,.18), transparent 38%);
  overflow: hidden;
}
.notice-title-row {
  align-items: flex-start;
}
.notice-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.notice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.18);
}
.notice-info { background: rgba(34,217,255,.12); color: var(--cyan); border-color: rgba(34,217,255,.28); }
.notice-urgente { background: rgba(255,95,104,.12); color: #ff9ba2; border-color: rgba(255,95,104,.28); }
.notice-promo { background: rgba(53,247,121,.12); color: var(--green); border-color: rgba(53,247,121,.28); }
.notice-ranking { background: rgba(255,195,76,.12); color: var(--gold); border-color: rgba(255,195,76,.28); }
.notice-body {
  margin: 14px 0 0;
  color: #f1f8ff;
  line-height: 1.7;
  font-size: 1.06rem;
}
.notice-marquee-wrap {
  margin-top: 18px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(34,217,255,.18);
  background: rgba(3, 17, 34, .62);
}
.notice-marquee-track {
  display: flex;
  width: max-content;
  min-width: 100%;
  animation: notice-scroll 24s linear infinite;
}
.notice-marquee {
  white-space: nowrap;
  padding: 12px 0;
  min-width: max-content;
  color: #d9f7ff;
  font-weight: 800;
  letter-spacing: .02em;
  padding-right: 42px;
}
@keyframes notice-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.inline-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.admin-subgrid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 14px;
}
textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border-radius: 16px;
  border: 1px solid rgba(34,217,255,.22);
  background: rgba(3, 18, 36, .72);
  color: #f3f8ff;
  padding: 14px 16px;
  font: inherit;
}


/* v3.4 fix: marquesina visible en PC */
@media (min-width: 1181px) {
  #dashboardSection.dashboard {
    grid-template-areas:
      "left notice right"
      "left instructions right"
      "left fixture right" !important;
  }

  #dashboardSection #noticePanel.notice-panel {
    grid-area: notice !important;
    display: block;
    min-width: 0;
    margin: 0;
  }

  #dashboardSection #noticePanel.notice-panel.hidden {
    display: none !important;
  }

  #dashboardSection .instructions-card {
    grid-area: instructions !important;
  }

  #dashboardSection > .main-panel:not(.instructions-card):not(.notice-panel) {
    grid-area: fixture !important;
  }
}


/* v3.5 - mobile full width + marquesina PC reforzada */

/* PC: la marquesina tiene área propia y no se pisa con fixture */
@media (min-width: 1181px) {
  #dashboardSection.dashboard {
    grid-template-areas:
      "left notice right"
      "left instructions right"
      "left fixture right" !important;
  }

  #dashboardSection #noticePanel.notice-panel {
    grid-area: notice !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #dashboardSection #noticePanel.notice-panel.hidden {
    display: none !important;
  }

  #dashboardSection .instructions-card {
    grid-area: instructions !important;
  }

  #dashboardSection > .main-panel:not(.instructions-card):not(.notice-panel) {
    grid-area: fixture !important;
  }
}

/* Teléfono/tablet: usar todo el ancho, no una columna angosta */
@media (max-width: 1180px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .app-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  .hero-header {
    width: 100% !important;
    max-width: 100% !important;
  }

  #dashboardSection.dashboard {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  #dashboardSection .left-rail,
  #dashboardSection .right-rail {
    display: contents !important;
  }

  #dashboardSection .glass-card,
  #dashboardSection .main-panel,
  #dashboardSection .notice-panel,
  #dashboardSection .score-widget,
  #dashboardSection .progress-widget,
  #dashboardSection .closing-widget,
  #dashboardSection .ranking-widget,
  #dashboardSection .standings-widget,
  #dashboardSection .rules-widget {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #dashboardSection .notice-panel {
    order: 0 !important;
    padding: 16px !important;
  }

  #dashboardSection .score-widget {
    order: 1 !important;
  }

  #dashboardSection .progress-widget {
    order: 2 !important;
  }

  #dashboardSection .closing-widget {
    order: 3 !important;
  }

  #dashboardSection .ranking-widget {
    order: 4 !important;
  }

  #dashboardSection .instructions-card {
    order: 5 !important;
  }

  #dashboardSection > .main-panel:not(.instructions-card):not(.notice-panel) {
    order: 6 !important;
  }

  #dashboardSection .standings-widget {
    order: 7 !important;
  }

  #dashboardSection .rules-widget {
    order: 8 !important;
  }

  #dashboardSection .notice-title-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  #dashboardSection .notice-meta {
    align-items: flex-start !important;
  }

  #dashboardSection .notice-body {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-top: 10px !important;
  }

  #dashboardSection .notice-marquee-wrap {
    margin-top: 12px !important;
  }

  #dashboardSection .notice-marquee {
    font-size: .92rem !important;
    padding: 10px 0 !important;
  }

  #dashboardSection .score-widget {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 12px 14px !important;
    align-items: center !important;
  }

  #dashboardSection .score-widget .eyebrow {
    grid-column: 1 / -1 !important;
  }

  #dashboardSection .score-ring {
    width: 104px !important;
    height: 104px !important;
    margin: 0 !important;
  }

  #dashboardSection .score-ring span {
    font-size: 2.1rem !important;
  }

  #dashboardSection .score-ring small {
    margin-top: -22px !important;
  }

  #dashboardSection .progress-widget .big-number {
    font-size: 2.3rem !important;
  }

  #dashboardSection .closure-row {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  #dashboardSection .ranking-scroll-list {
    max-height: 340px !important;
  }

  #dashboardSection .podium-grid {
    grid-template-columns: 1fr !important;
  }

  #dashboardSection .podium-card,
  #dashboardSection .podium-card.place-1 {
    min-height: 72px !important;
  }

  #dashboardSection .main-panel .filters-row {
    width: 100% !important;
  }

  #dashboardSection .match-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

@media (max-width: 430px) {
  .app-shell {
    width: 100% !important;
    max-width: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #dashboardSection .notice-panel,
  #dashboardSection .main-panel,
  #dashboardSection .score-widget,
  #dashboardSection .progress-widget,
  #dashboardSection .closing-widget,
  #dashboardSection .ranking-widget,
  #dashboardSection .standings-widget,
  #dashboardSection .rules-widget {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #dashboardSection .notice-body {
    font-size: .95rem !important;
  }

  #dashboardSection .closure-row {
    grid-template-columns: 1fr !important;
  }
}

.admin-warning {
  border: 1px solid rgba(255, 210, 97, .35);
  background: rgba(255, 210, 97, .10);
  color: #ffe7a3;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
  line-height: 1.35;
}


.closure-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.closure-jump-btn {
  min-height: 34px;
  padding: 8px 11px;
  font-size: .74rem;
  border-color: rgba(34,217,255,.32);
  background: rgba(34,217,255,.10);
}
.match-focus-pulse {
  animation: matchFocusPulse 2.2s ease;
  border-color: rgba(255,209,102,.88) !important;
  box-shadow: 0 0 0 4px rgba(255,209,102,.20), 0 24px 60px rgba(0,0,0,.38) !important;
}
@keyframes matchFocusPulse {
  0% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(255,209,102,.55); }
  35% { transform: translateY(-2px); box-shadow: 0 0 0 7px rgba(255,209,102,.20), 0 24px 60px rgba(0,0,0,.38); }
  100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(255,209,102,0); }
}


/* v4.0 Dieciseisavos */
.stage-info-v40 {
  margin: 14px 0 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(34,217,255,.28);
  background: linear-gradient(135deg, rgba(34,217,255,.13), rgba(255,209,102,.08));
  color: #e9fbff;
  display: grid;
  gap: 5px;
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
}
.stage-info-v40 b { color: #fff; }
.stage-info-v40 span { font-size: .98rem; }
.stage-info-v40 small { color: rgba(255,255,255,.76); }
.knockout-extra {
  margin: 12px 0 4px;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  gap: 8px 10px;
  align-items: center;
  background: rgba(34, 217, 255, .08);
  border: 1px solid rgba(34, 217, 255, .20);
  border-radius: 14px;
  padding: 10px 12px;
}
.knockout-extra label { font-weight: 900; color: #dff8ff; }
.knockout-extra select,
.classifier-admin-box select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(4, 18, 32, .92);
  color: #fff;
  border-radius: 10px;
  padding: 9px 10px;
  font-weight: 800;
}
.knockout-help { grid-column: 1 / -1; color: rgba(255,255,255,.72); }
.classifier-admin-box { margin-top: 8px; display: grid; gap: 4px; }
.classifier-admin-box small { color: rgba(255,255,255,.72); font-weight: 800; }
@media (max-width: 560px) { .knockout-extra { grid-template-columns: 1fr; } }

/* v4.1 etapa clara / historial */
.stage-tabs-hidden.hidden,
#groupTabs.hidden {
  display: none !important;
}
.stage-map-v41 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 16px;
}
.stage-chip-v41 {
  border: 1px solid rgba(34, 217, 255, .22);
  background: rgba(4, 18, 32, .68);
  color: #dff8ff;
  border-radius: 16px;
  padding: 12px 10px;
  min-height: 66px;
  display: grid;
  gap: 4px;
  align-content: center;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.stage-chip-v41 b {
  font-size: .9rem;
  line-height: 1.05;
}
.stage-chip-v41 small {
  color: rgba(255,255,255,.62);
  font-weight: 800;
  font-size: .72rem;
}
.stage-chip-v41.active {
  background: linear-gradient(135deg, rgba(34, 217, 255, .95), rgba(25, 154, 255, .92));
  color: #03121f;
  border-color: rgba(34, 217, 255, .95);
  box-shadow: 0 12px 35px rgba(34, 217, 255, .20);
}
.stage-chip-v41.active small,
.stage-chip-v41.active b {
  color: #03121f;
}
.stage-chip-v41.disabled {
  opacity: .52;
  cursor: not-allowed;
}
.stage-info-v40 {
  margin: 4px 0 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(34,217,255,.28);
  background: linear-gradient(135deg, rgba(34,217,255,.13), rgba(255,209,102,.08));
  color: #e9fbff;
  display: grid;
  gap: 5px;
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
}
.stage-info-v40 b { color: #fff; }
.stage-info-v40 small { color: rgba(255,255,255,.76); }
.history-panel-v41 {
  margin-top: 20px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,209,102,.26);
  background: rgba(255,209,102,.07);
}
.history-title-row-v41 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.history-title-row-v41 h3 {
  margin: 0;
  font-size: 1.35rem;
}
.history-badge-v41 {
  border: 1px solid rgba(255,209,102,.38);
  color: #ffe7a3;
  background: rgba(255,209,102,.10);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}
.history-panel-v41 p {
  color: rgba(255,255,255,.74);
  margin: 0 0 12px;
  line-height: 1.45;
}
.history-cards-v41 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.history-cards-v41 div,
.history-mini-v41,
.current-stage-widget-v41 {
  border: 1px solid rgba(34,217,255,.16);
  background: rgba(34,217,255,.06);
  border-radius: 14px;
  padding: 12px;
}
.history-cards-v41 b,
.history-mini-v41 b {
  display: block;
  color: #fff;
  margin-bottom: 4px;
}
.history-cards-v41 span,
.history-mini-v41 span,
.history-mini-v41 small {
  display: block;
  color: rgba(255,255,255,.68);
}
.current-stage-widget-v41 h3 {
  margin: 0 0 8px;
}
.current-stage-widget-v41 p {
  color: rgba(255,255,255,.76);
  margin: 0 0 8px;
}
.current-stage-widget-v41 small {
  color: #ffe7a3;
  font-weight: 800;
}
.knockout-extra {
  margin: 12px 0 4px;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  gap: 8px 10px;
  align-items: center;
  background: rgba(34,217,255,.08);
  border: 1px solid rgba(34,217,255,.20);
  border-radius: 14px;
  padding: 10px 12px;
}
.knockout-extra label { font-weight: 900; color: #dff8ff; }
.knockout-extra select,
.classifier-admin-box select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(4,18,32,.92);
  color: #fff;
  border-radius: 10px;
  padding: 9px 10px;
  font-weight: 800;
}
.knockout-help { grid-column: 1 / -1; color: rgba(255,255,255,.72); }
@media (max-width: 980px) {
  .stage-map-v41 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .history-cards-v41 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stage-map-v41 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knockout-extra { grid-template-columns: 1fr; }
}


/* v4.2 limpieza de etapas e interfaz de clasificado */
@media (min-width: 901px) {
  #dashboardSection .match-card {
    grid-template-columns: 116px minmax(0, 1fr) 155px minmax(0, 1fr) 170px !important;
    grid-template-areas:
      "date teamA score teamB actions"
      "date classifier classifier classifier actions" !important;
    align-items: center !important;
  }

  #dashboardSection .match-card .match-date { grid-area: date !important; }
  #dashboardSection .match-card .team-a { grid-area: teamA !important; }
  #dashboardSection .match-card .score-inputs { grid-area: score !important; }
  #dashboardSection .match-card .team-b { grid-area: teamB !important; }
  #dashboardSection .match-card .match-actions { grid-area: actions !important; }
  #dashboardSection .match-card .knockout-extra {
    grid-area: classifier !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
  }
}

#dashboardSection .match-card .knockout-extra { min-width: 0 !important; }
#dashboardSection .match-card .classifier-select {
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  display: block !important;
}

#dashboardSection .history-mode-v42 {
  border-color: rgba(255, 209, 102, .34) !important;
  background: linear-gradient(135deg, rgba(255,209,102,.12), rgba(34,217,255,.06)) !important;
}

@media (max-width: 900px) {
  #dashboardSection .match-card .knockout-extra {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }
}


/* v5.0 Cuartos - goleadores */
.scorers-extra {
  grid-column: 1 / -1;
  margin: 12px 0 4px;
  padding: 12px;
  border: 1px solid rgba(255, 209, 102, .24);
  background: rgba(255, 209, 102, .07);
  border-radius: 16px;
  display: grid;
  gap: 12px;
}
.scorers-title-row { display: grid; gap: 3px; }
.scorers-title-row b { color: #fff; font-weight: 900; }
.scorers-title-row small { color: rgba(255,255,255,.72); }
.scorer-specials, .scorer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.scorer-teams-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.scorer-team { display: grid; gap: 8px; min-width: 0; }
.scorer-team > b { color: #dff8ff; }
.scorer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.9);
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}
.scorer-pill.special {
  border-color: rgba(255,209,102,.28);
  background: rgba(255,209,102,.10);
}
.scorer-pill input { accent-color: #ffd166; }
.admin-scorers-box { margin-top: 8px; }
.admin-scorer-list { max-height: 180px; overflow: auto; display: grid; gap: 5px; padding: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; }
.admin-scorer-list label { font-size: .78rem; color: rgba(255,255,255,.88); }
@media (max-width: 720px) { .scorer-teams-grid { grid-template-columns: 1fr; } }


/* v5.0.1 goleadores dropdown */
.scorers-extra {
  padding: 14px !important;
}

.scorer-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.scorer-picker-card {
  border: 1px solid rgba(34,217,255,.18);
  background: rgba(4,18,32,.38);
  border-radius: 14px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.scorer-picker-card > b {
  color: #dff8ff;
  font-weight: 900;
}

.scorer-special-card {
  grid-column: 1 / -1;
}

.scorer-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.scorer-select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(3,14,28,.94);
  color: #fff;
  border-radius: 11px;
  padding: 9px 11px;
  font-weight: 800;
}

.selected-scorers-box {
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
  display: grid;
  gap: 8px;
}

.selected-scorers-box > b {
  color: #fff;
  font-weight: 900;
}

.selected-scorers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
  align-items: center;
}

.selected-scorer-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,209,102,.45);
  background: rgba(255,209,102,.12);
  color: #ffe7a3;
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 900;
  line-height: 1;
}

.remove-scorer {
  border: 0;
  background: rgba(255,255,255,.16);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.scorer-hint {
  color: rgba(255,255,255,.70);
  line-height: 1.35;
}

@media (max-width: 820px) {
  .scorer-picker-grid {
    grid-template-columns: 1fr;
  }

  .scorer-special-card {
    grid-column: auto;
  }

  .scorer-select-row {
    grid-template-columns: 1fr;
  }
}


/* Reglas Cuartos panel usuario v5.0.2 */
.quarter-rules-panel-v502 {
  margin: 14px 0 16px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 209, 102, .35);
  background:
    linear-gradient(135deg, rgba(255, 209, 102, .13), rgba(34, 217, 255, .08)),
    rgba(4, 18, 32, .55);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}

.rules-v502-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.rules-v502-head small {
  display: block;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.66);
  font-weight: 900;
  font-size: .72rem;
}

.rules-v502-head h3 {
  margin: 2px 0 0;
  color: #fff;
  font-size: 1.2rem;
}

.rules-v502-head strong {
  white-space: nowrap;
  border: 1px solid rgba(255,209,102,.50);
  background: rgba(255,209,102,.14);
  color: #ffe7a3;
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 900;
}

.rules-v502-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rules-v502-box {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(3,14,28,.36);
  border-radius: 14px;
  padding: 12px;
  display: grid;
  gap: 5px;
}

.rules-v502-box b {
  color: #dff8ff;
  font-weight: 900;
}

.rules-v502-box span {
  color: rgba(255,255,255,.82);
  line-height: 1.35;
  font-size: .92rem;
}

.rules-v502-box strong {
  color: #ffe7a3;
}

@media (max-width: 760px) {
  .rules-v502-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .rules-v502-grid {
    grid-template-columns: 1fr;
  }
}