:root {
  --bg-main: #070b0e;
  --bg-panel: #0e161c;
  --bg-panel-alt: #131f27;
  --bg-pitch-dark: #0a2619;
  --bg-pitch-light: #0e3322;
  --border-subtle: rgba(148, 163, 184, 0.16);
  --border-green: rgba(16, 185, 129, 0.42);
  --border-gold: rgba(251, 191, 36, 0.48);
  --green-neon: #10b981;
  --green-bright: #34d399;
  --gold-main: #f59e0b;
  --gold-bright: #fbbf24;
  --red-alert: #ef4444;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-main);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(16, 185, 129, 0.13), transparent 42%),
    radial-gradient(circle at 85% 4%, rgba(239, 68, 68, 0.08), transparent 38%);
  color: var(--text-main);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.42;
  min-height: 100vh;
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

.container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 12px;
}

.crest-img {
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}

/* ================= BARRA DEMO LOCAL ================= */
.demo-bar {
  background: #17212b;
  border-bottom: 1px solid rgba(251, 191, 36, 0.35);
  padding: 6px 10px;
  font-size: 0.72rem;
  color: #cbd5e1;
}

.demo-bar-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.demo-controls {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  max-width: 100%;
}

.demo-btn {
  background: rgba(9, 13, 18, 0.85);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.demo-btn.active {
  background: var(--gold-bright);
  color: #090d12;
  border-color: var(--gold-bright);
}

/* ================= DISCLAIMER SELECCIONABLE TFP ================= */
.tfp-disclaimer {
  width: 100%;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(245, 158, 11, 0.22), rgba(16, 185, 129, 0.2));
  border-bottom: 1px solid var(--border-gold);
  padding: 5px 10px;
  cursor: pointer;
}

.tfp-disclaimer-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.71rem;
  line-height: 1.32;
  font-weight: 700;
  color: #fef3c7;
}

.tfp-badge-pill {
  display: inline-block;
  background: var(--gold-bright);
  color: #090d12;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.tfp-disclaimer-text {
  vertical-align: middle;
}

.tfp-disclaimer-cta {
  color: var(--green-bright);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 3px;
  white-space: nowrap;
}

/* ================= HEADER Y BARRA INFERIOR MOBILE-FIRST ================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 45;
  background: rgba(7, 11, 14, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.brand-title {
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.05;
}

.brand-sub {
  font-size: 0.67rem;
  color: var(--green-bright);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.desktop-nav {
  display: none;
  align-items: center;
  gap: 6px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(30, 41, 59, 0.95), rgba(7, 11, 14, 0.98));
  border: 2px solid var(--border-green);
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.user-avatar-btn:hover,
.user-avatar-btn.active {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.24), 0 4px 12px rgba(0, 0, 0, 0.55);
  transform: scale(1.04);
}

.user-avatar-crest {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}

.bnav-avatar-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(7, 11, 14, 0.92);
  border: 1.5px solid var(--gold-bright);
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bnav-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Barra inferior fija para teléfono (como una app nativa) */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(8, 13, 17, 0.97);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px));
}

.bnav-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 2px;
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 700;
}

.bnav-btn .ico {
  font-size: 1.08rem;
  line-height: 1;
}

.bnav-btn.active {
  color: var(--green-bright);
  background: rgba(16, 185, 129, 0.12);
}

.bnav-btn.cta-tab {
  color: var(--gold-bright);
}

.bnav-btn.cta-tab.active {
  background: rgba(245, 158, 11, 0.16);
  color: #fde68a;
}

/* ================= BOTONES REUTILIZABLES ================= */
.btn-primary {
  width: 100%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-main));
  color: #090d12;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.24);
}

.btn-secondary {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

.clickable-club {
  cursor: pointer;
  transition: color 0.15s ease;
}

.clickable-club:hover {
  color: var(--gold-bright);
}

/* ================= HERO MODO PRE-TORNEO (MOBILE FIRST) ================= */
.hero-card {
  margin-top: 12px;
  background: linear-gradient(160deg, rgba(14, 30, 23, 0.96), rgba(10, 17, 23, 0.98));
  border: 1px solid var(--border-green);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.hero-intro-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.hero-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-logo {
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(239, 68, 68, 0.32));
}

.hero-intro-copy {
  min-width: 0;
  flex: 1;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.69rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green-bright);
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 3px 9px;
  border-radius: 999px;
}

.hero-title {
  font-size: 1.56rem;
  font-weight: 900;
  line-height: 1.12;
  margin-top: 0;
}

.hero-title span { color: var(--gold-bright); }

.hero-lead {
  color: #e2e8f0;
  font-size: 0.94rem;
  line-height: 1.48;
  margin: 8px 0 0;
}

.hero-lead .hl-green {
  color: var(--green-bright);
  font-weight: 900;
}

.hero-lead .hl-gold {
  color: #fde68a;
  font-weight: 900;
}

.hero-venue-line {
  margin-top: 10px;
  font-size: 0.84rem;
  color: #fef3c7;
  font-weight: 700;
  line-height: 1.35;
}

.prizes-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.prize-card {
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.16), rgba(15, 23, 42, 0.8));
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 9px 8px;
  text-align: center;
}

.prize-card.silver {
  background: linear-gradient(145deg, rgba(148, 163, 184, 0.16), rgba(15, 23, 42, 0.8));
  border-color: rgba(203, 213, 225, 0.38);
}

.prize-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fde68a;
}

.prize-card.silver .prize-label { color: #e2e8f0; }

.prize-amount {
  font-size: 1.18rem;
  font-weight: 900;
  color: #ffffff;
  margin-top: 1px;
}

.modality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  text-align: left;
  margin-bottom: 14px;
}

.mod-pill {
  background: rgba(7, 11, 14, 0.72);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--green-neon);
  border-radius: 8px;
  padding: 8px 9px;
}

.mod-pill strong {
  display: block;
  font-size: 0.76rem;
  color: #ffffff;
}

.mod-pill span {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

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

/* ================= CUADRO FIJO EXACTO DE 20 CUPOS (2x10 EN TELÉFONO) ================= */
.slots-section {
  margin-top: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 13px 11px;
}

.slots-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.slots-header h2 {
  font-size: 1.02rem;
  font-weight: 900;
}

.slots-header p {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.scarcity-counter {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fecaca;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-alert);
  animation: pulseRed 1.6s infinite;
}

@keyframes pulseRed {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.75); }
  70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.progress-track {
  width: 100%;
  height: 7px;
  background: #070b0e;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-neon), var(--gold-bright));
}

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

.slot-card {
  position: relative;
  min-height: 78px;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease;
}

.slot-card:active { transform: scale(0.98); }

.slot-card.occupied {
  background: linear-gradient(145deg, #132028, #0c1419);
  border: 1px solid rgba(52, 211, 153, 0.34);
}

.slot-card.occupied:hover {
  border-color: var(--gold-bright);
}

.slot-card.empty {
  background: rgba(15, 23, 42, 0.44);
  border: 1.5px dashed rgba(251, 191, 36, 0.5);
}

.slot-card.empty.last-slot {
  border-color: rgba(239, 68, 68, 0.72);
  background: rgba(239, 68, 68, 0.09);
}

.slot-num {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--text-muted);
}

.slot-crest-empty {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px dashed rgba(251, 191, 36, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--gold-bright);
  flex-shrink: 0;
}

.slot-info {
  min-width: 0;
  flex: 1;
}

.slot-club-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 18px;
}

.slot-club-nick {
  font-size: 0.67rem;
  color: var(--green-bright);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-club-dt {
  font-size: 0.64rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-empty-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--gold-bright);
  line-height: 1.15;
  padding-right: 14px;
}

.slot-card.empty.last-slot .slot-empty-title { color: #fca5a5; }

.slot-empty-sub {
  font-size: 0.64rem;
  color: #cbd5e1;
  margin-top: 2px;
}

/* ================= CANCHA VISUAL 4-3-3 + BANCO DE SUPLENTES ================= */
.pitch-433 {
  position: relative;
  background: repeating-linear-gradient(
    180deg,
    var(--bg-pitch-dark) 0px,
    var(--bg-pitch-dark) 36px,
    var(--bg-pitch-light) 36px,
    var(--bg-pitch-light) 72px
  );
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  padding: 14px 6px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  overflow: hidden;
}

/* Línea de mitad de cancha y círculo central decorativos */
.pitch-433::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.pitch-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 3px;
}

.pitch-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 104px;
  text-align: center;
}

.formation-variants-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.formation-opt-btn {
  background: #070b0e;
  border: 1.5px solid var(--border-subtle);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 8px 9px;
  font-size: 0.74rem;
  font-weight: 800;
  text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.formation-opt-btn.selected {
  border-color: var(--gold-bright);
  background: rgba(245, 158, 11, 0.15);
  color: #fde68a;
}

.pos-badge {
  min-width: 36px;
  height: 36px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(145deg, #09131a, #172a36);
  border: 2px solid var(--gold-bright);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  position: relative;
}

.pos-badge.gk {
  border-color: var(--green-bright);
}

.status-dot {
  position: absolute;
  top: -3px;
  right: -4px;
  font-size: 0.62rem;
}

.player-name-tag {
  margin-top: 4px;
  background: rgba(7, 11, 14, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  padding: 2px 5px;
  font-size: 0.67rem;
  font-weight: 700;
  color: #f8fafc;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-name-input {
  margin-top: 4px;
  width: 100%;
  background: rgba(7, 11, 14, 0.92);
  border: 1px solid var(--gold-bright);
  border-radius: 5px;
  padding: 4px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}

.bench-box {
  margin-top: 12px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 11px;
}

.bench-title {
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  margin-bottom: 8px;
}

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

.bench-item {
  background: rgba(7, 11, 14, 0.66);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.bench-pos {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid var(--border-green);
  color: var(--green-bright);
  font-size: 0.66rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 5px;
  min-width: 36px;
  text-align: center;
}

.bench-name {
  font-size: 0.76rem;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.bench-input {
  width: 100%;
  background: #070b0e;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 6px;
  padding: 5px 7px;
  color: #ffffff;
  font-size: 0.76rem;
}

/* ================= PIZARRA TÁCTICA: INTERCAMBIO (TOQUE O DRAG & DROP) ================= */
.pitch-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 9px;
}

.pitch-mode-btn {
  background: #070b0e;
  border: 1.5px solid var(--border-subtle);
  color: #cbd5e1;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.14s ease;
}

.pitch-mode-btn.active {
  background: rgba(16, 185, 129, 0.16);
  border-color: var(--green-bright);
  color: #a7f3d0;
}

.swap-helper-bar {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 10px;
  padding: 8px 11px;
  margin-bottom: 9px;
  font-size: 0.75rem;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.swap-helper-bar.selecting {
  background: rgba(16, 185, 129, 0.18);
  border-color: var(--green-bright);
  color: #ecfdf5;
}

.pitch-player.swappable {
  cursor: grab;
  padding: 3px 2px;
  border-radius: 9px;
  border: 1.5px solid transparent;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
  user-select: none;
}

.pitch-player.swappable:active {
  cursor: grabbing;
  transform: scale(0.97);
}

.bench-item.swappable {
  cursor: grab;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
  user-select: none;
}

.bench-item.swappable:active {
  cursor: grabbing;
  transform: scale(0.98);
}

.swap-mini-ico {
  font-size: 0.65rem;
  color: var(--gold-bright);
  font-weight: 900;
  margin-left: 2px;
  flex-shrink: 0;
}

.pitch-player.selected-swap,
.bench-item.selected-swap {
  border-color: var(--gold-bright) !important;
  background: rgba(245, 158, 11, 0.24) !important;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.45);
  transform: translateY(-2px);
}

.pitch-player.swap-candidate .player-name-tag,
.bench-item.swap-candidate {
  border-style: dashed;
  border-color: rgba(52, 211, 153, 0.65);
}

.pitch-player.drag-over-target,
.bench-item.drag-over-target {
  border-color: var(--green-bright) !important;
  background: rgba(16, 185, 129, 0.28) !important;
  transform: scale(1.04);
}

/* ================= MODO TORNEO EN VIGENCIA (PROMIEDOS MÓVIL) ================= */
.street-qr-banner {
  margin-top: 12px;
  background: linear-gradient(90deg, #0f291e, #1a2533);
  border: 1px solid var(--border-green);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.street-qr-banner p { font-size: 0.8rem; color: #e2e8f0; }

.promiedos-box {
  margin-top: 13px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.promiedos-header {
  background: linear-gradient(90deg, #0b291e, #0f1f28);
  border-bottom: 1px solid var(--border-green);
  padding: 8px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.promiedos-header h3 {
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.live-stream-pill {
  background: rgba(239, 68, 68, 0.22);
  border: 1px solid rgba(239, 68, 68, 0.55);
  color: #fecaca;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}

.shift-label {
  background: #091116;
  color: var(--gold-bright);
  font-size: 0.69rem;
  font-weight: 800;
  padding: 5px 10px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.match-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 48px minmax(0, 1fr);
  align-items: center;
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.76rem;
  gap: 4px;
}

.match-row.expandable { cursor: pointer; }
.match-row:nth-child(even) { background: rgba(255, 255, 255, 0.018); }

.match-status {
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--text-muted);
}

.match-status.live { color: #4ade80; }

.match-team {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  min-width: 0;
}

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

.match-team span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-score {
  text-align: center;
  font-weight: 900;
  background: #070b0e;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 3px 0;
  font-size: 0.78rem;
}

.match-detail-drawer {
  background: #081015;
  padding: 9px 11px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.74rem;
  color: #cbd5e1;
}

.tables-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.table-scroll { overflow-x: auto; }

.prom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.prom-table th {
  background: #091015;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 800;
  padding: 6px 4px;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}

.prom-table th.left, .prom-table td.left { text-align: left; }

.prom-table td {
  padding: 6px 4px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.prom-table tr.qualify td:first-child {
  border-left: 3px solid var(--green-neon);
  color: var(--green-bright);
  font-weight: 900;
}

.prom-table td.pts {
  font-weight: 900;
  color: var(--gold-bright);
  background: rgba(245, 158, 11, 0.08);
}

.team-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  max-width: 145px;
}

.team-cell span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================= PERFIL SELECCIONABLE DE EQUIPO ================= */
.profile-hero {
  margin-top: 12px;
  background: linear-gradient(150deg, #10241d, #0c151c);
  border: 1px solid var(--border-green);
  border-radius: var(--radius-lg);
  padding: 15px 13px;
}

.profile-top {
  display: flex;
  align-items: center;
  gap: 13px;
}

.profile-meta h2 {
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.15;
}

.profile-nick {
  color: var(--green-bright);
  font-size: 0.8rem;
  font-weight: 700;
}

.profile-dt {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.form-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.form-pill {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 0.66rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form-pill.V { background: #16a34a; color: #fff; }
.form-pill.E { background: #ca8a04; color: #fff; }
.form-pill.D { background: #dc2626; color: #fff; }

.profile-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.kpi-box {
  background: rgba(7, 11, 14, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 7px 5px;
  text-align: center;
}

.kpi-val {
  font-size: 0.96rem;
  font-weight: 900;
  color: var(--gold-bright);
}

.kpi-lbl {
  font-size: 0.63rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.sub-tabs {
  display: flex;
  gap: 5px;
  margin-top: 12px;
  overflow-x: auto;
}

.sub-tab {
  flex: 1 1 0;
  min-width: max-content;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 7px;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.sub-tab.edit-tab {
  border-color: var(--border-gold);
  color: var(--gold-bright);
}

.sub-tab.active {
  background: rgba(16, 185, 129, 0.18);
  border-color: var(--green-neon);
  color: #ffffff;
}

.sub-tab.edit-tab.active {
  background: rgba(245, 158, 11, 0.22);
  border-color: var(--gold-bright);
  color: #fde68a;
}

/* ================= CARDS INTERNAS Y FORMULARIO CUENTA / ESCUDOS ================= */
.info-card {
  margin-top: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 15px 13px;
}

.info-card h2 { font-size: 1.15rem; font-weight: 900; margin-bottom: 6px; }
.info-card h3 { font-size: 0.94rem; font-weight: 800; color: var(--gold-bright); margin-bottom: 5px; }
.info-card p { font-size: 0.84rem; color: #cbd5e1; margin-bottom: 9px; }

.status-note {
  background: rgba(245, 158, 11, 0.11);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: #fde68a;
}

.tfp-roadmap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0;
}

.roadmap-step {
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-subtle);
  border-left: 3.5px solid var(--green-neon);
  border-radius: 10px;
  padding: 12px;
}

.roadmap-step.future { border-left-color: var(--gold-bright); }

.rule-acc {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  margin-top: 9px;
  overflow: hidden;
}

.rule-acc summary {
  padding: 12px 13px;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-panel-alt);
}

.rule-acc summary::-webkit-details-marker { display: none; }

.rule-acc ul {
  padding: 12px 14px 14px 26px;
  color: #cbd5e1;
  font-size: 0.8rem;
  display: grid;
  gap: 7px;
}

.form-group { margin-bottom: 11px; }
.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #e2e8f0;
}

.form-input {
  width: 100%;
  background: #070b0e;
  color: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  padding: 10px 11px;
  font-size: 0.88rem;
}

.form-input:focus {
  outline: none;
  border-color: var(--green-neon);
}

.cat-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 6px 0 8px;
}

.cat-chip {
  background: #070b0e;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.cat-chip.active {
  background: var(--green-neon);
  color: #04130d;
  border-color: var(--green-neon);
}

.crest-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  max-height: 260px;
  overflow-y: auto;
  padding: 7px;
  background: #070b0e;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.crest-option {
  background: var(--bg-panel);
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  cursor: pointer;
}

.crest-option.selected {
  border-color: var(--gold-bright);
  background: rgba(245, 158, 11, 0.14);
}

.crest-option span {
  font-size: 0.66rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.12;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

.site-footer {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.footer-admin-link {
  color: #64748b;
  font-weight: 700;
  font-size: 0.7rem;
}

.footer-admin-link:hover {
  color: var(--gold-bright);
  text-decoration: underline;
}

/* ================= PANEL DE ADMINISTRACIÓN (#admin) ================= */
.admin-list {
  display: grid;
  gap: 8px;
}

.admin-club-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(7, 11, 14, 0.72);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 11px;
}

.admin-club-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-mini-select {
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 0.72rem;
  font-weight: 700;
}

@media (min-width: 780px) {
  .admin-club-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ================= CUADRO INTERACTIVO DE PLAYOFFS (FECHA 10) ================= */
.playoff-bracket-wrap {
  padding: 12px;
  background: linear-gradient(180deg, rgba(9, 17, 24, 0.96), rgba(7, 11, 15, 0.98));
  border-bottom: 1px solid var(--border-subtle);
}

.playoff-bracket-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.playoff-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid var(--border-gold);
  color: #fde68a;
}

.playoff-mode-pill.official {
  background: rgba(16, 185, 129, 0.18);
  border-color: var(--border-green);
  color: var(--green-bright);
}

.playoff-subnote {
  font-size: 0.75rem;
  color: #cbd5e1;
  margin-bottom: 12px;
  line-height: 1.4;
}

.bracket-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.bracket-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bracket-col-title {
  font-size: 0.73rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.bracket-col-title.semi-col {
  border-color: rgba(16, 185, 129, 0.45);
  color: var(--green-bright);
}

.bracket-col-title.final-col {
  border-color: var(--border-gold);
  color: #fde68a;
}

.bracket-col-matches {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.bracket-match {
  background: rgba(13, 21, 30, 0.92);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}

.bracket-match.is-final {
  border-color: var(--border-gold);
  background: linear-gradient(155deg, rgba(245, 158, 11, 0.12), rgba(13, 21, 30, 0.96));
}

.bracket-match-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 9px;
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--text-muted);
  background: rgba(7, 11, 14, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bracket-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 7px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.14s ease;
}

.bracket-team:last-child {
  border-bottom: none;
}

.bracket-team.can-sim {
  cursor: pointer;
}

.bracket-team.can-sim:hover {
  background: rgba(255, 255, 255, 0.05);
}

.bracket-team.winner {
  background: rgba(16, 185, 129, 0.15);
}

.bracket-team.champion-win {
  background: rgba(245, 158, 11, 0.2);
}

.bracket-team-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.bracket-seed {
  font-size: 0.63rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  flex-shrink: 0;
}

.bracket-team-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bracket-team.tbd .bracket-team-name {
  color: var(--text-muted);
  font-weight: 600;
  font-style: italic;
}

.bracket-team-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.bracket-tfp-badge {
  font-size: 0.6rem;
  font-weight: 900;
  color: #052e16;
  background: var(--green-bright);
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}

.bracket-score {
  min-width: 22px;
  text-align: right;
  font-size: 0.82rem;
  font-weight: 900;
  color: #fff;
}

.bracket-team.winner .bracket-score {
  color: var(--green-bright);
}

.bracket-team.champion-win .bracket-score {
  color: #fde68a;
}

.bracket-champ-box {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-gold);
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.2), rgba(15, 23, 42, 0.9));
  text-align: center;
}

@media (min-width: 780px) {
  .bracket-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    align-items: stretch;
  }
  .bracket-col-matches.semi-matches {
    justify-content: space-around;
  }
  .bracket-col-matches.final-matches {
    justify-content: center;
  }
}

/* ================= MEJORAS PANTALLA ESCRITORIO (>= 780px) ================= */
@media (min-width: 780px) {
  body { padding-bottom: 40px; }
  .bottom-nav { display: none; }
  .desktop-nav { display: flex; }
  .tfp-disclaimer { padding: 8px 12px; }
  .tfp-disclaimer-inner { font-size: 0.78rem; }
  .tfp-badge-pill { font-size: 0.66rem; padding: 2px 7px; margin-right: 6px; }
  .tfp-disclaimer-cta { margin-left: 5px; }

  .nav-btn {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
  }
  .nav-btn.active {
    color: #fff;
    background: rgba(16, 185, 129, 0.16);
    border-color: var(--border-green);
  }
  .nav-btn.cta {
    background: linear-gradient(135deg, var(--gold-bright), var(--gold-main));
    color: #090d12;
    font-weight: 900;
  }

  .hero-card {
    display: block;
    text-align: left;
    padding: 24px;
  }
  .hero-intro-row {
    flex-direction: row;
    align-items: center;
    gap: 22px;
    margin-bottom: 18px;
  }
  .hero-logo {
    width: 142px;
    height: 142px;
  }
  .hero-title {
    font-size: 1.82rem;
  }
  .hero-lead {
    font-size: 0.98rem;
    line-height: 1.52;
  }
  .hero-venue-line {
    font-size: 0.9rem;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
  }
  .hero-actions.hero-actions-centered {
    justify-content: center;
    margin-top: 4px;
  }
  .btn-primary, .btn-secondary { width: auto; padding: 11px 20px; }

  .slots-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .slots-grid-20 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .tables-two-col { grid-template-columns: 1fr 1fr; }
  .tfp-roadmap { grid-template-columns: repeat(3, 1fr); }
  .crest-picker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bench-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .street-qr-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ================= ACCESO EXCLUSIVO CON GOOGLE OAUTH ================= */
.google-auth-box {
  margin-top: 14px;
  padding: 20px 16px;
  background: rgba(7, 11, 14, 0.72);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.btn-google-oauth {
  width: 100%;
  max-width: 340px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid #dadce0;
  background: #ffffff;
  color: #1f1f1f;
  font-size: 0.94rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.btn-google-oauth:hover {
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.25);
}

.btn-google-oauth:active {
  transform: translateY(0);
}

.google-auth-subnote {
  max-width: 440px;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

/* ================= BADGES Y ESTILOS DEL MODO ADMIN OPERATIVO ================= */
.admin-badge-estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-badge-estado.pendiente {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid var(--border-gold);
  color: #fde68a;
}
.admin-badge-estado.en_juego {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid var(--red-alert);
  color: #fca5a5;
  animation: pulse-live 1.8s infinite;
}
.admin-badge-estado.entretiempo {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}
.admin-badge-estado.final {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid var(--border-green);
  color: var(--green-bright);
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}