/* ══════════════════════════════════════════

   PURO BARRIO FC — STYLES

   Colores: Amarillo Dorado + Negro (Peñarol)

══════════════════════════════════════════ */



:root, [data-theme="dark"] {

  --font-title: 'Montserrat', 'Plus Jakarta Sans', -apple-system, sans-serif;

  --font-main: 'Plus Jakarta Sans', -apple-system, sans-serif;

  --gold: #F5C518;

  --gold-dark: #c9a00d;

  --gold-light: #ffe066;

  --black: #0A0A0A;

  --black-2: #111111;

  --black-3: #1a1a1a;

  --black-4: #242424;

  --black-5: #2e2e2e;

  --white: #ffffff;

  --text: #f0f0f0;

  --text-muted: #94a3b8;

  --text-dim: #64748b;

  --text-light: #ffffff;

  --green: #22c55e;

  --red: #ef4444;

  --blue: #3b82f6;

  --orange: #f97316;

  --glass-bg: rgba(255, 255, 255, 0.04);

  --glass-border: rgba(245, 197, 24, 0.15);

  --sidebar-width: 260px;

  --sidebar-collapsed: 70px;

  --topbar-h: 64px;

  --radius: 16px;

  --radius-sm: 10px;

  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

  --shadow-gold: 0 0 30px rgba(245, 197, 24, 0.2);

  --transition: 0.3s cubic-bezier(.4, 0, .2, 1);

  --card-bg: #111111;

  --input-bg: #1a1a1a;

  --modal-bg: #121212;

}



[data-theme="light"] {

  --black: #f0f3f8;

  --black-2: #ffffff;

  --black-3: #f8fafc;

  --black-4: #e2e8f0;

  --black-5: #cbd5e1;

  --white: #0f172a;

  --text: #0f172a;

  --text-muted: #475569;

  --text-dim: #64748b;

  --text-light: #1e293b;

  --glass-bg: rgba(255, 255, 255, 0.95);

  --glass-border: rgba(245, 197, 24, 0.35);

  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);

  --shadow-gold: 0 4px 20px rgba(245, 197, 24, 0.25);

  --card-bg: #ffffff;

  --input-bg: #f8fafc;

  --modal-bg: #ffffff;

}



*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



html, body {

  width: 100%;

  max-width: 100%;

  overflow-x: hidden !important;

  position: relative;

}



body {

  font-family: var(--font-main);

  background: var(--black);

  color: var(--text);

  display: flex;

  min-height: 100vh;

}



h1, h2, h3, h4, h5, h6,

.section-title,

.stats-main-title,

.welcome-title,

.card-title,

.modal-header h3,

.stats-card-title,

.page-title,

.pm-title,

.live-title-text {

  font-family: 'Montserrat', 'Plus Jakarta Sans', -apple-system, sans-serif !important;

  font-weight: 800 !important;

  letter-spacing: -0.4px !important;

}



/* ── SCROLLBAR ── */

::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track { background: var(--black-2); }

::-webkit-scrollbar-thumb { background: var(--black-5); border-radius: 3px; }

::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }



/* ══ SIDEBAR ══ */

.sidebar {

  width: var(--sidebar-width);

  background: var(--black-2);

  border-right: 1px solid var(--glass-border);

  display: flex;

  flex-direction: column;

  position: fixed;

  top: 0; left: 0; bottom: 0;

  z-index: 100005 !important;

  transition: transform var(--transition);

  overflow: hidden;

}



.sidebar-header {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 16px 14px;

  border-bottom: 1px solid var(--glass-border);

  min-height: 72px;

  box-sizing: border-box;

}



.sidebar-logo {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid var(--gold);

  flex-shrink: 0;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

}



.sidebar-logo-text {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: var(--gold);

  color: var(--black);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.15rem;

  font-weight: 900;

  flex-shrink: 0;

  border: 2px solid var(--gold);

}



.sidebar-info {

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width: 0;

  flex: 1;

  overflow: hidden;

}



.sidebar-team {

  font-family: 'Montserrat', var(--font-title), sans-serif;

  font-size: 1.02rem;

  font-weight: 900;

  color: var(--text);

  letter-spacing: 0.4px;

  line-height: 1.2;

  text-transform: uppercase;

  white-space: normal;

  word-break: break-word;

}



.sidebar-sub {

  font-family: var(--font-main);

  font-size: 0.74rem;

  font-weight: 700;

  color: var(--gold);

  letter-spacing: 0.5px;

  text-transform: uppercase;

  line-height: 1.3;

  margin-top: 4px;

  white-space: normal;

  word-break: break-word;

}



[data-theme="light"] .sidebar-sub {

  color: #b45309;

}



.hamburger {

  display: none;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 5px;

  background: none;

  border: none;

  cursor: pointer;

  padding: 8px 10px;

  min-width: 44px;

  min-height: 44px;

  margin-left: auto;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;

}



.hamburger span {

  display: block;

  width: 24px;

  height: 2.5px;

  background: var(--gold);

  border-radius: 2px;

  transition: var(--transition);

  pointer-events: none;

}



.nav-links {

  list-style: none;

  padding: 12px 8px;

  flex: 1;

  overflow-y: auto;

}



.nav-links li { margin-bottom: 2px; }



.nav-link {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 11px 14px;

  border-radius: var(--radius-sm);

  color: var(--text-muted);

  text-decoration: none;

  font-size: 0.88rem;

  font-weight: 500;

  transition: var(--transition);

  white-space: nowrap;

  cursor: pointer;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;

  user-select: none;

}



.nav-link * {

  pointer-events: none;

}



.nav-link:hover {

  background: rgba(245,197,24,0.08);

  color: var(--gold);

}



.nav-link.active {

  background: rgba(245,197,24,0.15);

  color: var(--gold);

  box-shadow: inset 3px 0 0 var(--gold);

}



.nav-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 22px;

  height: 22px;

  flex-shrink: 0;

}



.sidebar-footer {

  padding: 16px;

  border-top: 1px solid var(--glass-border);

  font-size: 0.75rem;

  color: var(--text-dim);

  text-align: center;

}



/* ══ OVERLAY (mobile) ══ */

.overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.7);

  z-index: 100004 !important;

  backdrop-filter: blur(3px);

  -webkit-backdrop-filter: blur(3px);

  cursor: pointer;

}



.overlay.active {

  display: block !important;

}



.main-content {

  margin-left: var(--sidebar-width);

  width: calc(100% - var(--sidebar-width));

  max-width: calc(100% - var(--sidebar-width));

  min-height: 100vh;

  box-sizing: border-box;

  overflow-x: hidden;

  transition: margin-left var(--transition), width var(--transition);

}



/* ══ TOPBAR ══ */

.topbar {

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 0 24px;

  height: var(--topbar-h);

  background: var(--black-2);

  border-bottom: 1px solid var(--glass-border);

  position: sticky;

  top: 0;

  z-index: 50;

  backdrop-filter: blur(12px);

}



.topbar-ham { display: none; flex-shrink: 0; margin-left: 0 !important; margin-right: auto; padding-left: 0 !important; }



.sidebar-close-btn {

  background: none;

  border: none;

  color: var(--text-muted);

  font-size: 1.25rem;

  font-weight: bold;

  cursor: pointer;

  margin-left: auto;

  padding: 4px 6px;

  line-height: 1;

  border-radius: 6px;

  transition: var(--transition);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.sidebar-close-btn:hover {

  color: var(--gold);

  background: rgba(245, 197, 24, 0.12);

}



.topbar-title {

  display: none;

}



.topbar-actions {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-left: auto;

}



.sync-status-indicator {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 4px 9px;

  background: var(--glass);

  border: 1px solid var(--glass-border);

  border-radius: 999px;

  font-size: 0.72rem;

  font-weight: 600;

  color: var(--text-dim);

  user-select: none;

  transition: all 0.25s ease;

}



.sync-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #64748b;

  display: inline-block;

  transition: background 0.3s ease;

}



.sync-dot.online {

  background: #22c55e;

  box-shadow: 0 0 8px rgba(34, 197, 94, 0.75);

  animation: syncPulse 2s infinite ease-in-out;

}



.sync-dot.offline {

  background: #ef4444;

  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);

}



@keyframes syncPulse {

  0%, 100% { opacity: 1; transform: scale(1); }

  50% { opacity: 0.45; transform: scale(1.15); }

}



@media (max-width: 520px) {

  .sync-label { display: none; }

  .sync-status-indicator { padding: 6px; }

}



.theme-toggle-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  padding: 0;

  border-radius: 50%;

  background: var(--black-3);

  border: 1px solid var(--glass-border);

  color: var(--text);

  cursor: pointer;

  transition: var(--transition);

  user-select: none;

}



.theme-toggle-btn:hover {

  background: var(--gold);

  color: #0A0A0A;

  border-color: var(--gold);

  transform: translateY(-1px);

  box-shadow: var(--shadow-gold);

}



.theme-toggle-btn svg {

  flex-shrink: 0;

}



.topbar-live {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.8rem;

}



.section {

  display: none;

  padding: 24px;

  min-height: calc(100vh - var(--topbar-h));

  animation: fadeIn 0.3s ease;

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

  overflow-x: hidden;

}



.section.active { display: block; }



@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }



.section-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 24px;

  gap: 12px;

  flex-wrap: wrap;

}



.section-title {

  font-family: 'Montserrat', 'Plus Jakarta Sans', -apple-system, sans-serif !important;

  font-size: 1.75rem;

  font-weight: 800 !important;

  color: var(--gold);

  letter-spacing: -0.4px !important;

}



/* Botón compacto de solo icono (+) para ganar espacio */

.btn-icon-add {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: var(--gold);

  color: #000;

  border: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  flex-shrink: 0;

  box-shadow: 0 4px 12px rgba(245, 197, 24, 0.35);

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.btn-icon-add:hover {

  transform: scale(1.08);

  box-shadow: 0 6px 16px rgba(245, 197, 24, 0.45);

  background: #fbbf24;

}



.btn-icon-add:active {

  transform: scale(0.94);

}



#section-plantel .section-header,

#section-partidos .section-header,

#section-galeria .section-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: nowrap;

  gap: 12px;

  margin-bottom: 14px;

}



#section-plantel .section-title,

#section-partidos .section-title,

#section-galeria .section-title {

  margin: 0;

}



@media (max-width: 600px) {

  #section-plantel .section-header,

  #section-partidos .section-header,

  #section-galeria .section-header {

    margin-bottom: 12px;

  }

  #section-plantel .section-title,

  #section-partidos .section-title,

  #section-galeria .section-title {

    font-size: 1.45rem;

  }

  .btn-icon-add {

    width: 36px;

    height: 36px;

  }

}



/* ══ GLASS CARD ══ */

.glass {

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius);

  backdrop-filter: blur(10px);

}



.card {

  padding: 20px;

}



.card-title {

  font-family: var(--font-title);

  font-size: 1.2rem;

  color: var(--gold);

  letter-spacing: 1.5px;

  margin-bottom: 16px;

  padding-bottom: 10px;

  border-bottom: 1px solid var(--glass-border);

}



/* ══ DASHBOARD ══ */

/* ══ DASHBOARD TROPHIES REEL ══ */

.dash-trophies-reel {
  padding: 10px 12px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm, 12px);
  background: var(--card-bg, #16181d);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dash-trophies-grid {
  display: grid;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.dash-trophies-grid.cols-1 {
  grid-template-columns: minmax(140px, 240px);
  justify-content: center;
}

.dash-trophies-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.dash-trophies-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.dash-trophies-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.dash-trophy-card {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  box-sizing: border-box;
  text-align: center;
}

.dash-trophy-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 197, 24, 0.4);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 12px rgba(245, 197, 24, 0.15);
}

.dash-trophy-img-wrap {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease;
}

.dash-trophy-card:hover .dash-trophy-img-wrap {
  transform: scale(1.08);
}

.dash-trophy-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dash-trophy-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  margin-bottom: 4px;
  min-width: 0;
}

.dash-trophy-name {
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
  width: 100%;
}

.dash-trophy-type-badge {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  text-align: center;
  line-height: 1.1;
}

.dash-trophy-type-badge.campeon {
  color: var(--gold, #f5c518);
}

.dash-trophy-winner {
  font-family: var(--font-main);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--gold, #f5c518);
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
  width: 100%;
}

.dash-trophy-year {
  font-size: 0.6rem;
  color: var(--gold, #f5c518);
  font-weight: 800;
  background: rgba(245, 197, 24, 0.12);
  border: 1px solid rgba(245, 197, 24, 0.25);
  padding: 1px 6px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  line-height: 1;
}

.hero-card {

  padding: 32px;

  margin-bottom: 24px;

  text-align: center;

  position: relative;

  overflow: hidden;

}



/* ══ BANNER MATCH CARD (ULTRA HD 2X TEMPLATE OVERLAY) ══ */

.banner-match-card {

  padding: 8px;

  margin: 0 auto 16px;

  width: 100%;

  border-radius: 14px;

  background: var(--card-bg);

  border: 1px solid var(--glass-border);

  overflow: hidden;

  box-shadow: var(--shadow);

}



/* ══ PROXIMO PARTIDO — BANNER VECTORIAL (escala con em, nitidez total) ══ */

/* ══ PROXIMO PARTIDO - BANNER VECTORIAL (Adaptable a Modo Oscuro y Modo Claro) ══ */

.pm-banner {

  container-type: inline-size;

  position: relative;

  width: 100%;

  border-radius: 12px;

  overflow: hidden;

  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

}



/* Modo Oscuro por defecto y cuando data-theme="dark" */

:root .pm-banner,

[data-theme="dark"] .pm-banner {

  background: linear-gradient(145deg, #18181c 0%, #0d0d0f 100%);

  color: #f8fafc;

  border: 1.5px solid rgba(245, 197, 24, 0.35);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 15px rgba(245, 197, 24, 0.1);

}



:root .pm-title,

[data-theme="dark"] .pm-title {

  color: #ffffff;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);

}



:root .pm-crest,

[data-theme="dark"] .pm-crest {

  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));

}



:root .pm-vs b,

[data-theme="dark"] .pm-vs b {

  background: rgba(255, 255, 255, 0.2);

}



:root .pm-vs span,

[data-theme="dark"] .pm-vs span {

  color: var(--gold);

}



:root .pm-info,

[data-theme="dark"] .pm-info {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



:root .pm-col,

[data-theme="dark"] .pm-col {

  border-left: 1px solid rgba(255, 255, 255, 0.1);

}



:root .pm-col:first-child,

[data-theme="dark"] .pm-col:first-child {

  border-left: 0;

}



:root .pm-col svg,

[data-theme="dark"] .pm-col svg {

  color: var(--gold);

}



:root .banner-text-main,

[data-theme="dark"] .banner-text-main {

  color: #ffffff;

}



:root .banner-text-sub,

[data-theme="dark"] .banner-text-sub {

  color: #e2e8f0;

}



:root .pm-deco-tl,

[data-theme="dark"] .pm-deco-tl {

  background: #000000;

}



/* Escudo rival adaptado a modo oscuro */

:root .pm-rival-crest path[fill="#fff"],

[data-theme="dark"] .pm-rival-crest path[fill="#fff"] {

  fill: #18181c !important;

}



:root .pm-rival-crest circle[fill="#fff"],

[data-theme="dark"] .pm-rival-crest circle[fill="#fff"] {

  fill: #18181c !important;

  stroke: #F5C518 !important;

}



:root .pm-rival-crest polygon[fill="#0b0b0b"],

[data-theme="dark"] .pm-rival-crest polygon[fill="#0b0b0b"] {

  fill: #F5C518 !important;

}



:root .pm-rival-crest path[stroke="#0b0b0b"],

[data-theme="dark"] .pm-rival-crest path[stroke="#0b0b0b"] {

  stroke: #F5C518 !important;

}



:root .pm-rival-crest text,

[data-theme="dark"] .pm-rival-crest text {

  fill: #ffffff !important;

}



/* Modo Claro explícito (data-theme="light") */

[data-theme="light"] .pm-banner {

  background: #ffffff !important;

  color: #0b0b0b !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;

}



[data-theme="light"] .pm-title {

  color: #0b0b0b !important;

  text-shadow: none !important;

}



[data-theme="light"] .pm-crest {

  filter: none !important;

}



[data-theme="light"] .pm-vs b {

  background: #0b0b0b !important;

}



[data-theme="light"] .pm-vs span {

  color: #0b0b0b !important;

}



[data-theme="light"] .pm-info {

  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;

}



[data-theme="light"] .pm-col {

  border-left: 1px solid #0b0b0b !important;

}



[data-theme="light"] .pm-col:first-child {

  border-left: 0 !important;

}



[data-theme="light"] .pm-col svg {

  color: #0b0b0b !important;

}



[data-theme="light"] .banner-text-main {

  color: #0b1a30 !important;

}



[data-theme="light"] .banner-text-sub {

  color: #0b1a30 !important;

}



[data-theme="light"] .pm-deco-tl {

  background: #0b0b0b !important;

}



[data-theme="light"] .pm-rival-crest path[fill="#fff"] {

  fill: #fff !important;

}



[data-theme="light"] .pm-rival-crest circle[fill="#fff"] {

  fill: #fff !important;

  stroke: #0b0b0b !important;

}



[data-theme="light"] .pm-rival-crest polygon[fill="#0b0b0b"] {

  fill: #0b0b0b !important;

}



[data-theme="light"] .pm-rival-crest path[stroke="#0b0b0b"] {

  stroke: #0b0b0b !important;

}



[data-theme="light"] .pm-rival-crest text {

  fill: #0b0b0b !important;

}



.pm-inner {

  font-size: min(2.7cqw, 15px);

  position: relative;

  max-width: 62em;

  margin: 0 auto;

  padding: 1em 2.4em 1.1em;

  display: flex;

  flex-direction: column;

  align-items: stretch;

}



.pm-title {

  font-family: 'Anton', 'Impact', sans-serif;

  font-size: 3em;

  white-space: nowrap;

  font-style: italic;

  text-align: center;

  letter-spacing: 0.04em;

  line-height: 1;

  transform: skewX(-6deg);

  text-transform: uppercase;

}



.pm-rule {

  display: flex;

  align-items: center;

  gap: 0.6em;

  margin: 0.45em 0 0.2em;

}

.pm-rule span { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, #F5C518 20%, #F5C518 80%, transparent); }

.pm-rule i { width: 0.7em; height: 0.7em; background: #F5C518; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }



.pm-teams {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  justify-items: center;

  gap: 1em;

  margin: 0.2em 0 0.4em;

}



.pm-crest {

  height: 9em;

  width: auto;

  max-width: 100%;

  object-fit: contain;

}



.pm-vs {

  display: flex;

  align-items: center;

  gap: 1em;

}

.pm-vs b { width: 1px; height: 6em; }

.pm-vs span {

  font-family: 'Anton', 'Impact', sans-serif;

  font-size: 3em;

  font-style: italic;

  line-height: 1;

  transform: skewX(-8deg);

}



.pm-info {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  padding-top: 0.9em;

  margin: 0;

}



.pm-col {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  padding: 0 0.25em;

  min-width: 0;

}

.pm-col:first-child { border-left: 0; }

.pm-col svg { width: 3em; height: 3em; margin-bottom: 0.5em; }



.banner-text-main,

.banner-text-sub {

  width: 100%;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.banner-text-main {

  font-family: var(--font-title);

  font-size: 0.98em;

  letter-spacing: -0.01em;

  font-weight: 900;

  text-transform: uppercase;

  line-height: 1.2;

}

.banner-text-sub {

  font-family: var(--font-main);

  font-size: 0.95em;

  font-weight: 800;

  text-transform: uppercase;

  line-height: 1.2;

}

.banner-text-sub {

  font-family: var(--font-main);

  font-size: 0.95em;

  font-weight: 800;

  color: #0b1a30;

  text-transform: uppercase;

  line-height: 1.2;

}



/* Textos verticales laterales */

.pm-side {

  position: absolute;

  top: 0; bottom: 0;

  z-index: 2;

  width: 4.6em;

  font-size: min(2.7cqw, 15px);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: 'Anton', 'Impact', sans-serif;

  color: #F5C518;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  pointer-events: none;

}

.pm-side-left { left: 0; }

.pm-side-right { right: 0; }

.pm-side > span {

  display: block;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

  white-space: nowrap;

  font-size: 2.3em;

  line-height: 1;

  max-height: 88%;

  overflow: hidden;

  text-overflow: ellipsis;

  -webkit-text-stroke: 0.06em #000;

  paint-order: stroke fill;

}



/* Decoraciones diagonales negro/dorado */

.pm-deco { position: absolute; z-index: 0; pointer-events: none; }

.pm-deco-tl {

  top: 0; left: 0; width: 14%; height: 30%;

  background: #0b0b0b;

  clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%);

}

.pm-deco-tl::after {

  content: ''; position: absolute; inset: 0;

  background: #F5C518;

  clip-path: polygon(70% 0, 82% 0, 46% 100%, 36% 100%);

}

.pm-deco-tr {

  top: 0; right: 0; width: 8%; height: 6%;

  background: repeating-linear-gradient(115deg, #0b0b0b 0 12%, #F5C518 12% 24%);

  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);

}

.pm-deco-br {

  bottom: 0; right: 0; width: 8%; height: 18%;

  background: #0b0b0b;

  clip-path: polygon(100% 0, 100% 100%, 0 100%);

}

.pm-deco-br::after {

  content: ''; position: absolute; inset: 0;

  background: #F5C518;

  clip-path: polygon(100% 28%, 100% 42%, 38% 100%, 22% 100%);

}



@container (max-width: 420px) {

  .pm-inner { padding-left: 1.6em; padding-right: 1.6em; }

}



.banner-actions {

  display: flex;

  justify-content: center;

  margin-top: 8px;

}



.banner-actions .btn {

  width: 100%;

  min-height: 44px;

  padding: 10px 16px;

  font-size: 0.85rem;

  letter-spacing: 0.5px;

}



.hero-details {

  display: flex;

  justify-content: center;

  gap: 24px;

  flex-wrap: wrap;

  color: var(--text-muted);

  font-size: 0.9rem;

  margin-bottom: 24px;

}



.btn-live {

  font-size: 1rem;

  padding: 12px 32px;

  animation: pulse-gold 2s infinite;

}



@keyframes pulse-gold {

  0%, 100% { box-shadow: 0 0 0 0 rgba(245,197,24,0.4); }

  50% { box-shadow: 0 0 0 12px rgba(245,197,24,0); }

}



.stats-row {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 14px;

  margin-bottom: 24px;

}



.stat-card {

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-sm);

  padding: 14px 14px 12px;

  display: flex;

  flex-direction: column;

  cursor: pointer;

  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

  position: relative;

  overflow: hidden;

  box-sizing: border-box;

}



.stat-card:hover {

  transform: translateY(-2px);

  border-color: rgba(245, 197, 24, 0.4);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);

}



.stat-card-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 8px;

}



.stat-card-icon {

  width: 28px;

  height: 28px;

  border-radius: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.stat-card-icon.gold { background: rgba(245, 197, 24, 0.14); color: var(--gold); }

.stat-card-icon.blue { background: rgba(59, 130, 246, 0.14); color: #3b82f6; }

.stat-card-icon.green { background: rgba(16, 185, 129, 0.14); color: #10b981; }

.stat-card-icon.red { background: rgba(239, 68, 68, 0.14); color: #ef4444; }



.stat-card-tag {

  font-size: 0.62rem;

  font-weight: 800;

  padding: 2px 6px;

  border-radius: 4px;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}



.stat-card-tag.gold { background: rgba(245, 197, 24, 0.15); color: var(--gold); }

.stat-card-tag.blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }

.stat-card-tag.green { background: rgba(16, 185, 129, 0.15); color: #10b981; }

.stat-card-tag.red { background: rgba(239, 68, 68, 0.15); color: #ef4444; }



.stat-number {

  font-family: var(--font-title);

  font-size: 2.1rem;

  color: var(--gold);

  line-height: 1;

  font-weight: 900;

}



.stat-number.gold { color: var(--gold); }

.stat-number.blue { color: #60a5fa; }

.stat-number.green { color: #10b981; }

.stat-number.red { color: #ef4444; }



[data-theme="light"] .stat-number.gold { color: #b45309; }

[data-theme="light"] .stat-number.blue { color: #2563eb; }

[data-theme="light"] .stat-number.green { color: #059669; }

[data-theme="light"] .stat-number.red { color: #dc2626; }



[data-theme="light"] .stat-card-tag.gold { color: #b45309; background: rgba(245, 158, 11, 0.15); }

[data-theme="light"] .stat-card-tag.blue { color: #1d4ed8; background: rgba(59, 130, 246, 0.15); }

[data-theme="light"] .stat-card-tag.green { color: #047857; background: rgba(16, 185, 129, 0.15); }

[data-theme="light"] .stat-card-tag.red { color: #b91c1c; background: rgba(239, 68, 68, 0.15); }



.stat-label {

  font-size: 0.72rem;

  color: var(--text-muted);

  text-transform: uppercase;

  letter-spacing: 0.6px;

  font-weight: 700;

  margin-top: 5px;

}



.stat-sub {

  font-size: 0.68rem;

  font-weight: 600;

  color: var(--text);

  margin-top: 6px;

  padding-top: 6px;

  border-top: 1px solid var(--black-5);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.dash-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 16px;

}



.result-item {

  display: grid;

  grid-template-columns: 1fr 65px 82px;

  align-items: center;

  gap: 10px;

  padding: 8px 4px;

  border-bottom: 1px solid var(--black-4);

  font-size: 0.9rem;

  cursor: pointer;

  border-radius: var(--radius-sm);

  transition: var(--transition);

}



.result-item:hover {

  background: rgba(255, 255, 255, 0.03);

}



[data-theme="light"] .result-item:hover {

  background: rgba(0, 0, 0, 0.02);

}



.result-item:last-child { border-bottom: none; }



.result-team-col {

  display: flex;

  flex-direction: column;

  min-width: 0;

  gap: 2px;

}



.result-team-name {

  font-weight: 700;

  font-size: 0.88rem;

  color: var(--text);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.result-date {

  font-size: 0.74rem;

  color: var(--text-muted);

  font-weight: 500;

}



.result-score {

  font-family: var(--font-main);

  font-weight: 800;

  font-size: 1rem;

  text-align: center;

  color: var(--text);

  letter-spacing: 0.5px;

}



.result-badge {

  padding: 4px 8px;

  border-radius: 20px;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.5px;

  text-align: center;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  white-space: nowrap;

}



.result-badge.win { background: rgba(34,197,94,0.2); color: var(--green); }

.result-badge.loss { background: rgba(239,68,68,0.2); color: var(--red); }

.result-badge.draw { background: rgba(245,197,24,0.2); color: var(--gold); }



.scorer-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 0;

  border-bottom: 1px solid var(--black-4);

  cursor: pointer;

  transition: var(--transition);

}



.scorer-item:hover {

  background: rgba(245, 197, 24, 0.03);

  padding-left: 4px;

  padding-right: 4px;

}



.scorer-item:last-child { border-bottom: none; }



.scorer-rank {

  font-family: var(--font-title);

  font-size: 0.95rem;

  color: var(--gold);

  width: 26px;

  height: 26px;

  border-radius: 6px;

  background: var(--black-3);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  font-weight: 800;

}



.scorer-rank.rank-1 {

  background: var(--gold);

  color: #000;

  box-shadow: 0 2px 6px rgba(245, 197, 24, 0.3);

}



.scorer-rank.rank-2 {

  background: #cbd5e1;

  color: #0f172a;

}



.scorer-rank.rank-3 {

  background: #d97706;

  color: #fff;

}



.scorer-col-info {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 2px;

  overflow: hidden;

}



.scorer-col-info .scorer-name {

  font-size: 0.86rem;

  font-weight: 800;

  color: var(--text);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.scorer-pj-sub {

  font-size: 0.7rem;

  color: var(--text-muted);

  font-weight: 600;

}



.scorer-col-stats {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 2px;

  flex-shrink: 0;

}



.scorer-col-stats .scorer-goals {

  font-family: var(--font-title);

  font-size: 1.05rem;

  font-weight: 900;

  color: var(--gold);

  line-height: 1.1;

}



.scorer-col-stats .scorer-goals small {

  font-size: 0.68rem;

  font-weight: 600;

  color: var(--text-muted);

  text-transform: lowercase;

}



[data-theme="light"] .scorer-col-stats .scorer-goals {

  color: #b45309;

}



.scorer-prom-badge {

  font-size: 0.65rem;

  font-weight: 700;

  color: #10b981;

  background: rgba(16, 185, 129, 0.12);

  border: 1px solid rgba(16, 185, 129, 0.25);

  padding: 1px 5px;

  border-radius: 4px;

  white-space: nowrap;

  line-height: 1.1;

}



[data-theme="light"] .scorer-prom-badge {

  color: #047857;

  background: rgba(16, 185, 129, 0.15);

  border-color: rgba(16, 185, 129, 0.35);

}



/* ══ TABS ══ */

.tabs {

  display: flex;

  gap: 8px;

  margin-bottom: 20px;

  border-bottom: 1px solid var(--glass-border);

  padding-bottom: 0;

}



.tab {

  background: none;

  border: none;

  color: var(--text-muted);

  font-family: var(--font-main);

  font-size: 0.9rem;

  font-weight: 500;

  padding: 10px 18px;

  cursor: pointer;

  border-bottom: 2px solid transparent;

  transition: var(--transition);

  white-space: nowrap;

}



.tab:hover { color: var(--gold); }



.tab.active {

  color: var(--gold);

  border-bottom-color: var(--gold);

}



/* ══ PLAYERS LIST ══ */

.players-grid {

  width: 100%;

}



.players-list-table {

  width: 100%;

  border-collapse: collapse;

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius);

  overflow: hidden;

}



.players-list-table thead tr {

  background: rgba(245,197,24,0.07);

  border-bottom: 1px solid var(--glass-border);

}



.players-list-table th {

  padding: 12px 14px;

  font-size: 0.72rem;

  color: var(--text-muted);

  text-transform: uppercase;

  letter-spacing: 1.5px;

  font-weight: 600;

  text-align: left;

  white-space: nowrap;

}



.player-row {

  border-bottom: 1px solid rgba(255,255,255,0.04);

  transition: background var(--transition);

}



.player-row:last-child { border-bottom: none; }



.player-row:hover { background: rgba(245,197,24,0.04); }



.players-list-table td {

  padding: 10px 14px;

  font-size: 0.88rem;

  vertical-align: middle;

}



.player-num-badge {

  background: var(--gold);

  color: var(--black);

  font-family: var(--font-title);

  font-size: 1rem;

  width: 30px;

  height: 30px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.player-row-name {

  display: flex;

  align-items: center;

  gap: 10px;

  font-weight: 600;

}



.player-avatar-sm {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--gold), var(--gold-dark));

  color: var(--black);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-title);

  font-size: 0.9rem;

  font-weight: 700;

  flex-shrink: 0;

}



.player-photo-sm {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid var(--gold);

  flex-shrink: 0;

}



/* Photo upload area */

.photo-upload-area {

  width: 100%;

  height: 120px;

  border: 2px dashed var(--black-5);

  border-radius: var(--radius-sm);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  transition: var(--transition);

  background: var(--black-3);

  position: relative;

}



.photo-upload-area:hover {

  border-color: var(--gold);

  background: rgba(245,197,24,0.05);

}



.photo-upload-area img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: var(--radius-sm);

}



#jugador-foto-placeholder {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  pointer-events: none;

}





.pos-label {

  font-size: 0.78rem;

  color: var(--text-muted);

  background: var(--black-4);

  padding: 2px 8px;

  border-radius: 20px;

  white-space: nowrap;

}



/* ══ CATEGORÍAS DEL PLANTEL (ARQUEROS, DEFENSAS, VOLANTES, DELANTEROS) ══ */
.squad-filter-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 10px 2px;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.squad-filter-bar::-webkit-scrollbar {
  display: none;
}

.squad-filter-btn {
  padding: 6px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}

.squad-filter-btn:hover {
  border-color: var(--gold);
  color: #fff;
}

.squad-filter-btn.active {
  background: var(--gold);
  color: #000;
  font-weight: 800;
  border-color: var(--gold);
}

.squad-category-block {
  margin-bottom: 22px;
}

.squad-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
}

.squad-category-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.squad-category-title {
  font-family: var(--font-title);
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--white);
}

.squad-category-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(217, 119, 6, 0.12);
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 12px;
  padding: 2px 8px;
}

/* ══ VISTA LISTA DE 2 LÍNEAS PARA PLANTEL (MOBILE & DESKTOP) ══ */

.squad-list-container {

  display: flex;

  flex-direction: column;

  gap: 8px;

  width: 100%;

}



.squad-player-item {

  display: flex;

  align-items: center;

  gap: 12px;

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-sm);

  padding: 10px 14px;

  transition: all 0.2s ease;

  user-select: none;

}



.squad-player-item:hover {

  background: rgba(245, 197, 24, 0.06);

  border-color: var(--gold);

  transform: translateY(-1px);

}



.squad-player-item.player-inactivo {

  opacity: 0.55;

  border-color: rgba(255, 255, 255, 0.06);

}



.squad-player-left {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-shrink: 0;

}



.squad-player-main {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 3px;

}



.squad-line-top {

  display: flex;

  align-items: center;

  gap: 6px;

  min-width: 0;

}



.squad-player-name {

  font-family: var(--font-main);

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--white);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.squad-line-sub {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

  font-size: 0.78rem;

  color: var(--text-muted);

}



.squad-sub-dot {

  color: var(--text-dim);

  font-size: 0.65rem;

}



.squad-sub-text {

  font-weight: 600;

  color: var(--text);

}



.squad-player-right {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

}



/* ══ MODAL FICHA FLOTANTE DEL JUGADOR ══ */

.fjugador-card-header {

  display: flex;

  align-items: center;

  gap: 16px;

  background: var(--black-3);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-sm);

  padding: 16px;

  margin-bottom: 16px;

}



.fjugador-avatar-wrapper {

  position: relative;

  flex-shrink: 0;

}



.fjugador-avatar-lg, .fjugador-photo-lg {

  width: 68px;

  height: 68px;

  border-radius: 50%;

  object-fit: cover;

  border: 3px solid var(--gold);

  box-shadow: 0 4px 12px rgba(0,0,0,0.5);

}



.fjugador-avatar-lg {

  background: linear-gradient(135deg, var(--gold), var(--gold-dark));

  color: var(--black);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-title);

  font-size: 1.8rem;

  font-weight: 800;

}



.fjugador-num-badge {

  position: absolute;

  bottom: -4px;

  right: -4px;

  background: var(--gold);

  color: var(--black);

  font-family: var(--font-title);

  font-size: 0.85rem;

  font-weight: 900;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid var(--black);

  box-shadow: 0 2px 6px rgba(0,0,0,0.6);

}



.fjugador-main-info {

  display: flex;

  flex-direction: column;

  gap: 6px;

  min-width: 0;

}



.fjugador-name-row {

  display: flex;

  align-items: center;

  gap: 8px;

}



.fjugador-name {

  font-family: var(--font-title);

  font-size: 1.35rem;

  color: var(--white);

  line-height: 1.1;

  margin: 0;

}



.fjugador-badges {

  display: flex;

  align-items: center;

  gap: 8px;

}



.fjugador-block {

  margin-bottom: 16px;

  background: var(--black-2);

  border: 1px solid var(--black-5);

  border-radius: var(--radius-sm);

  padding: 14px;

}



.fjugador-block:last-child {

  margin-bottom: 0;

}



.fjugador-block-title {

  font-size: 0.75rem;

  font-weight: 800;

  color: var(--gold);

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 10px;

}



.fjugador-info-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.fjugador-info-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  border-bottom: 1px dashed var(--black-5);

  padding-bottom: 6px;

}



.fjugador-info-item:last-child {

  border-bottom: none;

  padding-bottom: 0;

}



.fjugador-info-lbl {

  font-size: 0.8rem;

  color: var(--text-muted);

}



.fjugador-info-val {

  font-size: 0.88rem;

  font-weight: 600;

  color: var(--white);

}



.fjugador-grid-2 {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}



.fjugador-grid-4 {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 8px;

}



@media (max-width: 480px) {

  .fjugador-grid-4 {

    grid-template-columns: repeat(2, 1fr);

    gap: 8px;

  }

}



.fjugador-stat {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: var(--black-3);

  padding: 10px;

  border-radius: 8px;

  border: 1px solid var(--black-5);

}



.fjugador-stat-val {

  font-family: var(--font-title);

  font-size: 1.5rem;

  line-height: 1;

}



.fjugador-stat-lbl {

  font-size: 0.7rem;

  color: var(--text-muted);

  text-transform: uppercase;

  margin-top: 4px;

  text-align: center;

}



.player-card {

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius);

  padding: 20px 16px;

  text-align: center;

  cursor: pointer;

  transition: var(--transition);

  position: relative;

}



.player-card:hover {

  border-color: var(--gold);

  transform: translateY(-4px);

  box-shadow: var(--shadow-gold);

}



.player-avatar {

  width: 64px; height: 64px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--gold), var(--gold-dark));

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-title);

  font-size: 1.3rem;

  color: var(--black);

  margin: 0 auto 12px;

  border: 3px solid var(--black-4);

}



.player-number {

  position: absolute;

  top: 10px;

  right: 10px;

  background: var(--gold);

  color: var(--black);

  font-family: var(--font-title);

  font-size: 0.9rem;

  width: 26px;

  height: 26px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.player-name {

  font-weight: 700;

  font-size: 0.95rem;

  margin-bottom: 4px;

}



.player-pos {

  font-size: 0.78rem;

  color: var(--text-muted);

  margin-bottom: 12px;

}



.player-stats-mini {

  display: flex;

  justify-content: center;

  gap: 12px;

}



.mini-stat {

  text-align: center;

}



.mini-stat-val {

  font-family: var(--font-title);

  font-size: 1.1rem;

  color: var(--gold);

  line-height: 1;

}



.mini-stat-lbl {

  font-size: 0.65rem;

  color: var(--text-dim);

  text-transform: uppercase;

}



.player-status {

  display: inline-block;

  padding: 2px 8px;

  border-radius: 10px;

  font-size: 0.7rem;

  font-weight: 600;

  margin-top: 8px;

}



.status-titular { background: rgba(34,197,94,0.15); color: var(--green); }

.status-reserva { background: rgba(245,197,24,0.15); color: var(--gold); }

.status-lesionado { background: rgba(239,68,68,0.15); color: var(--red); }



.player-actions {

  display: flex;

  gap: 6px;

  margin-top: 12px;

  justify-content: center;

}



/* ══ MATCHES ══ */

.match-card {

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-sm);

  padding: 16px 20px;

  margin-bottom: 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  transition: var(--transition);

}



.match-card:hover {

  border-color: var(--gold);

}



.match-club-badge {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.match-card-logo {

  width: 52px !important;

  height: 52px !important;

  max-width: 52px !important;

  max-height: 52px !important;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid var(--gold);

  box-shadow: 0 0 12px rgba(245,197,24,0.35);

  background: var(--black-2);

  display: block;

}



.match-info { flex: 1; }



.match-rival {

  font-weight: 700;

  font-size: 1rem;

  margin-bottom: 4px;

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}



.match-type-tag {

  font-size: 0.65rem;

  font-weight: 700;

  padding: 2px 8px;

  border-radius: 10px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  display: inline-block;

  vertical-align: middle;

}



.match-type-campeonato {

  background: rgba(245,197,24,0.18);

  color: var(--gold);

  border: 1px solid rgba(245,197,24,0.4);

}



.match-type-amistoso {

  background: rgba(59,130,246,0.18);

  color: var(--blue);

  border: 1px solid rgba(59,130,246,0.4);

}



.match-type-copa {

  background: rgba(168,85,247,0.18);

  color: #c084fc;

  border: 1px solid rgba(168,85,247,0.4);

}



.match-details {

  font-size: 0.82rem;

  color: var(--text-muted);

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

}



.match-score {

  font-family: var(--font-title);

  font-size: 1.8rem;

  color: var(--gold);

  letter-spacing: 4px;

  white-space: nowrap;

}



/* ══ STATS TABLES ══ */

.stats-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}



.full-width { grid-column: 1 / -1; }



.stats-table {

  width: 100%;

  border-collapse: collapse;

}



.stats-table th {

  font-size: 0.75rem;

  color: var(--text-muted);

  text-transform: uppercase;

  letter-spacing: 1px;

  padding: 8px 12px;

  text-align: left;

  border-bottom: 1px solid var(--black-4);

}



.stats-table td {

  padding: 10px 12px;

  border-bottom: 1px solid var(--black-4);

  font-size: 0.88rem;

}



.stats-table tr:last-child td { border-bottom: none; }



.stats-table tr:hover td { background: rgba(245,197,24,0.04); }



/* ══ CAJA ══ */

.balance-cards {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-bottom: 20px;

}



.balance-card {

  padding: 24px;

  text-align: center;

}



.balance-label {

  display: block;

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: var(--text-muted);

  margin-bottom: 8px;

}



.balance-amount {

  font-family: var(--font-title);

  font-size: 2rem;

  display: block;

}



.balance-card.green .balance-amount { color: var(--green); }

.balance-card.red .balance-amount { color: var(--red); }

.balance-card.gold .balance-amount { color: var(--gold); }



.cuotas-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

  gap: 10px;

  padding: 8px 0;

}



.cuota-item {

  background: var(--black-3);

  border-radius: var(--radius-sm);

  padding: 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  font-size: 0.85rem;

  border: 1px solid transparent;

  cursor: pointer;

  transition: var(--transition);

}



.cuota-item.paid { border-color: rgba(34,197,94,0.3); }

.cuota-item.unpaid { border-color: rgba(239,68,68,0.2); }



.cuota-dot {

  width: 10px; height: 10px;

  border-radius: 50%;

  flex-shrink: 0;

}



.cuota-dot.paid { background: var(--green); }

.cuota-dot.unpaid { background: var(--red); }



.mov-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 0;

  border-bottom: 1px solid var(--black-4);

  gap: 12px;

}



.mov-item:last-child { border-bottom: none; }



.mov-icon { font-size: 1.2rem; flex-shrink: 0; }

.mov-desc { flex: 1; font-size: 0.88rem; }

.mov-date { font-size: 0.75rem; color: var(--text-muted); }



.mov-amount {

  font-family: var(--font-title);

  font-size: 1.1rem;

  flex-shrink: 0;

}



.mov-amount.income { color: var(--green); }

.mov-amount.expense { color: var(--red); }



/* ══ PIZARRA TÁCTICA ══ */

.pizarra-controls {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}



/* ══ CLUB BANNER ══ */

.club-banner-container {

  width: 100%;

  border-radius: var(--radius);

  overflow: hidden;

  margin-bottom: 20px;

  border: 1px solid var(--glass-border);

  box-shadow: 0 8px 24px rgba(0,0,0,0.5);

  background: #0a0a0a;

  display: flex;

  align-items: center;

  justify-content: center;

}



.club-banner-img {

  width: 100%;

  height: auto;

  max-height: 260px;

  display: block;

  object-fit: contain;

}



.draw-tools {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 14px;

  background: var(--black-3);

  border-radius: var(--radius-sm);

  border: 1px solid var(--glass-border);

  margin-bottom: 16px;

  flex-wrap: wrap;

}



.tool-group {

  display: flex;

  align-items: center;

  gap: 4px;

}



.tool-btn {

  background: var(--black-4);

  border: 1px solid var(--black-5);

  color: var(--text-muted);

  border-radius: 8px;

  padding: 8px 10px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: var(--transition);

}



.tool-btn svg {

  display: block;

  stroke: var(--text-muted);

  transition: var(--transition);

}



.tool-btn:hover, .tool-btn.active {

  background: rgba(245,197,24,0.18);

  border-color: var(--gold);

  color: var(--gold);

}



.tool-btn:hover svg, .tool-btn.active svg {

  stroke: var(--gold);

}



.tool-icon-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 6px 10px !important;

}



.tool-icon-btn svg {

  display: block;

}



.tool-divider {

  width: 1px;

  height: 24px;

  background: var(--glass-border);

  margin: 0 4px;

}



.tool-colors {

  display: flex;

  align-items: center;

  gap: 6px;

}



.color-dot {

  width: 24px; height: 24px;

  border-radius: 50%;

  cursor: pointer;

  border: 2px solid transparent;

  transition: var(--transition);

  flex-shrink: 0;

}



.color-dot:hover, .color-dot.active {

  border-color: var(--white);

  transform: scale(1.2);

  box-shadow: 0 0 10px rgba(255,255,255,0.4);

}



.tool-widths {

  display: flex;

  align-items: center;

  gap: 4px;

}



.width-btn {

  background: var(--black-4);

  border: 1px solid var(--black-5);

  color: var(--text-muted);

  border-radius: 6px;

  padding: 6px 10px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: var(--transition);

}



.width-btn svg {

  display: block;

}



.width-btn:hover, .width-btn.active {

  background: rgba(245,197,24,0.15);

  border-color: var(--gold);

  color: var(--gold);

}



.pizarra-wrapper {

  position: relative;

  border-radius: var(--radius);

  overflow: hidden;

  margin-bottom: 16px;

  border: 2px solid var(--glass-border);

  touch-action: none;

  background: #1a5c1a;

  width: 100%;

}



#field-canvas {

  display: block;

  width: 100%;

  touch-action: none;

  cursor: crosshair;

}



#players-layer {

  position: absolute;

  inset: 0;

  pointer-events: none;

}



#players-layer.move-mode {

  pointer-events: all;

  cursor: default;

}



.field-player {

  position: absolute;

  width: 58px; height: 58px;

  border-radius: 50%;

  background: var(--gold);

  color: var(--black);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 0.7rem;

  cursor: grab;

  user-select: none;

  touch-action: none;

  transition: box-shadow 0.2s;

  border: 3px solid var(--black);

  transform: translate(-50%, -50%);

  pointer-events: all;

  z-index: 10;

  overflow: hidden;

  box-shadow: 0 4px 12px rgba(0,0,0,0.5);

}



.field-player:active { cursor: grabbing; box-shadow: 0 0 0 5px rgba(245,197,24,0.6); }



.field-player .fp-num {

  font-family: var(--font-title);

  font-size: 1.3rem;

  line-height: 1;

}



.field-player .fp-name {

  font-size: 0.55rem;

  text-align: center;

  max-width: 52px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  line-height: 1;

  margin-top: 1px;

}



.field-player .fp-photo-full {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

  display: block;

}



/* ══ RIVAL PLAYER ══ */

.rival-player {

  background: #c0392b !important;

  border-color: #7b241c !important;

  color: #fff !important;

}



.rival-player .fp-num,

.rival-player .fp-name { color: #fff !important; }



/* ══ CAPTAIN BADGES ══ */

.captain-tag {

  background: var(--gold);

  color: var(--black);

  font-family: var(--font-title);

  font-size: 0.8rem;

  font-weight: 900;

  padding: 1px 6px;

  border-radius: 4px;

  letter-spacing: 0.5px;

  display: inline-block;

  vertical-align: middle;

  box-shadow: 0 2px 4px rgba(0,0,0,0.3);

}



.captain-overlay-badge {

  position: absolute;

  top: 1px;

  right: 1px;

  background: var(--gold);

  color: var(--black);

  font-family: var(--font-title);

  font-size: 0.85rem;

  font-weight: 900;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid var(--black);

  box-shadow: 0 2px 6px rgba(0,0,0,0.7);

  z-index: 20;

}



.field-player.is-captain {

  border-color: var(--gold) !important;

}



/* ══ SWAP MODE ══ */

.field-player.swappable {

  animation: swappable-pulse 1s infinite;

  cursor: pointer !important;

  border-color: #fff !important;

  box-shadow: 0 0 0 3px rgba(255,255,255,0.5) !important;

}



@keyframes swappable-pulse {

  0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,0.4); }

  50%       { box-shadow: 0 0 0 8px rgba(255,255,255,0.1); }

}



.swap-indicator {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: rgba(245,197,24,0.12);

  border: 1px solid var(--gold);

  border-radius: var(--radius-sm);

  padding: 10px 16px;

  margin-bottom: 12px;

  font-size: .88rem;

  color: var(--gold);

  gap: 12px;

  flex-wrap: wrap;

}



.btn-danger-soft {

  background: transparent;

  border: 1px solid var(--red);

  color: var(--red);

  padding: 4px 12px;

  border-radius: 6px;

  cursor: pointer;

  font-size: .8rem;

  font-family: var(--font-main);

  transition: var(--transition);

}

.btn-danger-soft:hover { background: rgba(239,68,68,.15); }



/* ══ BENCH AREA ══ */

.bench-area {

  padding: 12px 16px;

  background: var(--black-2);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius);

  margin-top: 8px;

}



.bench-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 8px;

  gap: 12px;

}



.bench-title {

  font-family: var(--font-title);

  font-size: 1.1rem;

  color: var(--gold);

  letter-spacing: 2px;

  margin: 0;

  white-space: nowrap;

}



.bench-hint {

  font-size: .75rem;

  color: var(--text-muted);

}



#bench-players {

  display: flex;

  align-items: flex-start;

  gap: 16px;

  overflow-x: auto;

  padding: 8px 4px 12px 4px;

  scroll-behavior: smooth;

}



.bench-player-wrapper {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  cursor: grab;

  user-select: none;

  touch-action: none;

  transition: transform 0.2s;

  flex-shrink: 0;

}



.bench-player-wrapper:hover {

  transform: translateY(-4px);

}



.bench-player-wrapper:active {

  cursor: grabbing;

}



.bench-player-token {

  position: relative !important;

  transform: none !important;

  left: auto !important;

  top: auto !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.5);

  transition: transform 0.2s, box-shadow 0.2s;

}



.bench-player-wrapper:hover .bench-player-token {

  box-shadow: 0 0 0 3px rgba(245,197,24,0.5), 0 6px 16px rgba(0,0,0,0.6);

}



.bench-player-label {

  font-size: 0.7rem;

  font-weight: 700;

  color: var(--white);

  text-align: center;

  max-width: 64px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.ghost-bench-token {

  pointer-events: none !important;

  z-index: 10000 !important;

  opacity: 0.95;

}



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



.bench-player-name {

  font-weight: 600;

  font-size: .88rem;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.bench-player-sub {

  font-size: .75rem;

  color: var(--text-muted);

  margin-top: 2px;

}



.bench-num-badge {

  background: var(--black-4);

  color: var(--gold);

  font-family: var(--font-title);

  font-size: 1rem;

  width: 28px; height: 28px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border: 1px solid var(--black-5);

}



.btn-enter-field {

  background: rgba(34,197,94,.12);

  border: 1px solid rgba(34,197,94,.4);

  color: var(--green);

  padding: 6px 14px;

  border-radius: 8px;

  font-size: .8rem;

  font-weight: 600;

  cursor: pointer;

  font-family: var(--font-main);

  white-space: nowrap;

  transition: var(--transition);

  flex-shrink: 0;

}

.btn-enter-field:hover { background: rgba(34,197,94,.22); }

.btn-enter-field.cancel-btn {

  background: rgba(239,68,68,.12);

  border-color: rgba(239,68,68,.4);

  color: var(--red);

}

.bench-empty {

  color: var(--text-muted);

  font-size: .85rem;

  text-align: center;

  padding: 16px;

}



/* Rival toggle button active state */

#btn-toggle-rivals.active {

  border-color: var(--red);

  color: var(--red);

  background: rgba(239,68,68,.1);

}





/* ══ PARTIDO EN VIVO ══ */

.broadcast-scoreboard,

.scoreboard {

  background: linear-gradient(135deg, rgba(24,24,24,0.95) 0%, rgba(12,12,12,0.98) 100%);

  border: 1px solid rgba(245,197,24,0.28);

  box-shadow: 0 12px 36px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.08);

  border-radius: var(--radius);

  padding: 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 24px;

  position: relative;

}



.scoreboard-team {

  flex: 1;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  position: relative;

  z-index: 5;

  min-width: 0;

}



.sb-badge-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  max-width: 100%;

}



.sb-logo-wrapper {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 4px;

}



.sb-club-logo {

  width: 68px !important;

  height: 68px !important;

  max-width: 68px !important;

  max-height: 68px !important;

  border-radius: 50%;

  object-fit: cover;

  border: 2.5px solid var(--gold);

  box-shadow: 0 0 16px rgba(245,197,24,0.35);

  background: var(--black-2);

  display: block;

}



.sb-team-name {

  font-family: var(--font-title);

  font-size: 1.6rem;

  color: var(--gold);

  letter-spacing: 2px;

  word-break: break-word;

  text-align: center;

}



.sb-tag {

  position: absolute;

  bottom: -6px;

  left: 50%;

  transform: translateX(-50%);

  font-size: 0.58rem;

  font-weight: 800;

  letter-spacing: 1px;

  padding: 2px 7px;

  border-radius: 8px;

  text-transform: uppercase;

  box-shadow: 0 2px 6px rgba(0,0,0,0.5);

  white-space: nowrap;

}



.local-tag {

  background: var(--gold);

  color: var(--black);

}



.away-tag {

  background: rgba(239,68,68,0.9);

  color: var(--white);

}



.rival-shield-icon {

  width: 68px;

  height: 68px;

  border-radius: 50%;

  background: rgba(255,255,255,0.04);

  border: 2px dashed rgba(255,255,255,0.2);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text-muted);

}



.scoreboard-center {

  text-align: center;

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  position: relative;

  z-index: 5;

}



.period-badge-wrapper {

  display: flex;

  align-items: center;

  gap: 6px;

  margin: 2px 0;

}



.period-badge {

  background: var(--gold);

  color: var(--black);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 1.5px;

  padding: 4px 14px;

  border-radius: 20px;

  text-transform: uppercase;

  border: none;

  cursor: pointer;

  transition: transform 0.2s, box-shadow 0.2s;

}



.period-badge:hover {

  transform: scale(1.05);

  box-shadow: 0 0 12px rgba(245,197,24,0.5);

}



.btn-sm-period {

  background: rgba(245,197,24,0.12);

  border: 1px solid var(--gold);

  color: var(--gold);

  font-size: 0.68rem;

  font-weight: 700;

  border-radius: 12px;

  padding: 3px 8px;

  cursor: pointer;

  transition: var(--transition);

}



.btn-sm-period:hover {

  background: var(--gold);

  color: var(--black);

}



.btn-timer-adj {

  background: rgba(255,255,255,0.06);

  border: 1px solid var(--glass-border);

  color: var(--text-muted);

  border-radius: 14px;

  font-size: 0.72rem;

  font-weight: 700;

  padding: 0 10px;

  height: 38px;

  cursor: pointer;

  transition: var(--transition);

}



.btn-timer-adj:hover {

  background: rgba(245,197,24,0.15);

  border-color: var(--gold);

  color: var(--gold);

}



.score-display {

  display: flex;

  align-items: center;

  gap: 8px;

}



.score-num {

  font-family: var(--font-title);

  font-size: 4.5rem;

  color: var(--white);

  line-height: 1;

  min-width: 60px;

  text-align: center;

}



.score-sep {

  font-family: var(--font-title);

  font-size: 3rem;

  color: var(--text-muted);

}



.period-badge {

  background: var(--gold);

  color: var(--black);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 2px;

  padding: 3px 14px;

  border-radius: 20px;

  text-transform: uppercase;

}



.timer-display {

  font-family: var(--font-title);

  font-size: 3rem;

  color: var(--gold);

  letter-spacing: 4px;

  line-height: 1;

}



.timer-controls {

  display: flex;

  gap: 10px;

}



.btn-timer {

  height: 38px;

  padding: 0 16px;

  border-radius: 20px;

  background: rgba(245,197,24,0.12);

  border: 1.5px solid var(--gold);

  color: var(--gold);

  font-family: var(--font-main);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 1px;

  cursor: pointer;

  transition: var(--transition);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

}



.btn-timer:hover { background: var(--gold); color: var(--black); }

.btn-timer-stop { border-color: var(--red); color: var(--red); background: rgba(239,68,68,0.1); }

.btn-timer-stop:hover { background: var(--red); color: var(--white); }



.rival-input {

  background: none;

  border: none;

  border-bottom: 2px solid var(--glass-border);

  color: var(--gold);

  font-family: var(--font-title);

  font-size: 1.4rem;

  letter-spacing: 2px;

  text-align: center;

  width: 100%;

  outline: none;

  padding: 4px;

  transition: var(--transition);

}



.rival-input:focus { border-bottom-color: var(--gold); }



.event-buttons {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 12px;

  margin-bottom: 24px;

}



.event-btn {

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-sm);

  padding: 14px 10px;

  cursor: pointer;

  color: var(--text);

  font-family: var(--font-main);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  transition: var(--transition);

}



.event-btn svg { flex-shrink: 0; }

.event-btn span { font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); }

.event-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-gold); }

.event-btn.goal { border-color: rgba(34,197,94,0.4); }

.event-btn.goal:hover { background: rgba(34,197,94,0.12); border-color: var(--green); }

.event-btn.goal span { color: var(--green); }

.event-btn.yellow { border-color: rgba(245,197,24,0.4); }

.event-btn.yellow:hover { background: rgba(245,197,24,0.12); border-color: var(--gold); }

.event-btn.yellow span { color: var(--gold); }

.event-btn.red { border-color: rgba(239,68,68,0.4); }

.event-btn.red:hover { background: rgba(239,68,68,0.12); border-color: var(--red); }

.event-btn.red span { color: var(--red); }

.event-btn.sub { border-color: rgba(59,130,246,0.4); }

.event-btn.sub:hover { background: rgba(59,130,246,0.12); border-color: var(--blue); }

.event-btn.sub span { color: var(--blue); }

.event-btn.injury { border-color: rgba(249,115,22,0.4); }

.event-btn.injury:hover { background: rgba(249,115,22,0.12); border-color: var(--orange); }

.event-btn.injury span { color: var(--orange); }

.event-btn.rival-goal { border-color: rgba(239,68,68,0.3); }

.event-btn.rival-goal:hover { background: rgba(239,68,68,0.12); border-color: var(--red); }

.event-btn.rival-goal span { color: var(--red); }



.live-grid {

  display: grid;

  grid-template-columns: 2fr 1fr;

  gap: 16px;

}



.timeline-item {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px 0;

  border-bottom: 1px solid var(--black-4);

  font-size: 0.88rem;

}



.timeline-item:last-child { border-bottom: none; }



.timeline-min {

  font-family: var(--font-title);

  font-size: 1.1rem;

  color: var(--gold);

  width: 32px;

  flex-shrink: 0;

}



.timeline-badge {

  padding: 3px 10px;

  border-radius: 12px;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  flex-shrink: 0;

}



.timeline-badge-goal { background: rgba(34,197,94,0.15); color: var(--green); border: 1px solid rgba(34,197,94,0.4); }

.timeline-badge-yellow { background: rgba(245,197,24,0.15); color: var(--gold); border: 1px solid rgba(245,197,24,0.4); }

.timeline-badge-red { background: rgba(239,68,68,0.15); color: var(--red); border: 1px solid rgba(239,68,68,0.4); }

.timeline-badge-sub { background: rgba(59,130,246,0.15); color: var(--blue); border: 1px solid rgba(59,130,246,0.4); }

.timeline-badge-injury { background: rgba(249,115,22,0.15); color: var(--orange); border: 1px solid rgba(249,115,22,0.4); }

.timeline-badge-rival { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

.timeline-badge-fin { background: rgba(255,255,255,0.1); color: var(--white); border: 1px solid var(--glass-border); }

.timeline-badge-info { background: rgba(255,255,255,0.08); color: var(--text-muted); }



.timeline-text { flex: 1; }



.card-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 0;

  border-bottom: 1px solid var(--black-4);

  font-size: 0.85rem;

}



.card-item:last-child { border-bottom: none; }



/* ══ NOTICIAS ══ */

.news-card {

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius);

  padding: 20px;

  margin-bottom: 16px;

  transition: var(--transition);

}



.news-card:hover { border-color: var(--gold); }



.news-cat {

  display: inline-block;

  padding: 2px 10px;

  border-radius: 20px;

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin-bottom: 10px;

}



.cat-convocatoria { background: rgba(34,197,94,0.15); color: var(--green); }

.cat-entrenamiento { background: rgba(59,130,246,0.15); color: var(--blue); }

.cat-partido { background: rgba(245,197,24,0.15); color: var(--gold); }

.cat-general { background: rgba(136,136,136,0.15); color: var(--text-muted); }



.news-title {

  font-weight: 700;

  margin-bottom: 8px;

  font-size: 1rem;

}



.news-text {

  font-size: 0.88rem;

  color: var(--text-muted);

  line-height: 1.6;

}



.news-date {

  font-size: 0.75rem;

  color: var(--text-dim);

  margin-top: 10px;

}



/* ══ TROFEOS ══ */

#trophies-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  gap: 12px;

  padding: 8px 0;

}



.trophy-card {

  background: var(--black-3);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-sm);

  padding: 20px;

  text-align: center;

}



.trophy-icon { font-size: 2.5rem; margin-bottom: 10px; display: block; }

.trophy-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; }

.trophy-year { font-size: 0.78rem; color: var(--text-muted); }



/* ══ BUTTONS ══ */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 10px 20px;

  border-radius: 10px;

  font-family: var(--font-main);

  font-size: 0.88rem;

  font-weight: 600;

  cursor: pointer;

  transition: var(--transition);

  border: none;

  white-space: nowrap;

  text-decoration: none;

}



.btn-primary {

  background: var(--gold);

  color: var(--black);

}



.btn-primary:hover {

  background: var(--gold-light);

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(245,197,24,0.35);

}



.btn-outline {

  background: transparent;

  border: 1px solid var(--glass-border);

  color: var(--text-muted);

}



.btn-outline:hover {

  border-color: var(--gold);

  color: var(--gold);

}



.btn-sm { padding: 7px 14px; font-size: 0.82rem; }



.btn-danger {

  background: transparent;

  border: 1px solid rgba(239,68,68,0.3);

  color: var(--red);

  padding: 4px 10px;

  font-size: 0.75rem;

  border-radius: 6px;

  cursor: pointer;

  font-family: var(--font-main);

  transition: var(--transition);

}



.btn-danger:hover { background: rgba(239,68,68,0.15); }



/* ══ FORMS ══ */

.input-dark, .select-dark, .textarea-dark, .form-input {

  background: var(--black-3, rgba(255,255,255,0.05)) !important;

  border: 1px solid var(--black-5, rgba(255,255,255,0.12)) !important;

  border-radius: 8px !important;

  color: var(--text, #ffffff) !important;

  font-family: var(--font-main) !important;

  font-size: 0.9rem !important;

  padding: 10px 14px !important;

  width: 100% !important;

  outline: none !important;

  transition: var(--transition) !important;

  color-scheme: dark !important;

}



.form-input::placeholder {

  color: rgba(255,255,255,0.35) !important;

}



.input-dark:focus, .select-dark:focus, .textarea-dark:focus, .form-input:focus {

  border-color: var(--gold) !important;

  box-shadow: 0 0 0 3px rgba(245,197,24,0.15) !important;

  background: rgba(255,255,255,0.08) !important;

}



.calc-mode-btn {

  background: rgba(255,255,255,0.05);

  border: 1px solid rgba(255,255,255,0.12);

  color: var(--text-muted);

  border-radius: 8px;

  padding: 8px 10px;

  font-size: 0.78rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;

  text-align: center;

}

.calc-mode-btn:hover {

  background: rgba(255,255,255,0.08);

  color: #fff;

}

.calc-mode-btn.active {

  background: var(--gold) !important;

  color: #000 !important;

  border-color: var(--gold) !important;

  font-weight: 700 !important;

  box-shadow: 0 2px 8px rgba(245,197,24,0.3) !important;

}



.select-dark {

  appearance: auto;

  -webkit-appearance: auto;

  cursor: pointer;

  padding: 4px 10px !important;

  line-height: 1.3 !important;

  background-color: #1e293b !important;

  color: #ffffff !important;

}



.select-dark option, select option, option {

  background-color: #1e293b !important;

  color: #ffffff !important;

}

.textarea-dark { resize: vertical; }



.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.form-group label { font-size: 0.82rem; color: var(--text-muted); font-weight: 500; }



.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}



/* ══ MODALS ══ */

.modal-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.75);

  z-index: 200;

  backdrop-filter: blur(6px);

  align-items: center;

  justify-content: center;

  padding: 16px;

  overflow-y: auto;

  box-sizing: border-box;

}



.modal-overlay.active { display: flex; }



.modal {

  width: 100%;

  max-width: 480px;

  border-radius: var(--radius);

  background: var(--black-2);

  border: 1px solid var(--glass-border);

  animation: modalIn 0.25s ease;

  max-height: min(92vh, calc(100vh - 32px));

  display: flex;

  flex-direction: column;

  overflow: hidden;

  margin: auto;

  box-sizing: border-box;

}



@keyframes modalIn {

  from { opacity: 0; transform: scale(0.9) translateY(-20px); }

  to { opacity: 1; transform: none; }

}



.modal-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 16px 20px;

  border-bottom: 1px solid var(--glass-border);

  gap: 12px;

  flex-shrink: 0;

}



.modal-header h3 {

  font-family: inherit;

  font-size: 1.18rem;

  font-weight: 800;

  color: #f8fafc;

  letter-spacing: -0.2px;

  line-height: 1.25;

  margin: 0;

  display: flex;

  align-items: center;

  gap: 8px;

  flex: 1;

  min-width: 0;

}



.modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.modal-close:empty::before {
  content: '\2715';
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fff;
}

.modal-close:hover::before {
  color: #fff;
}



.modal-close:hover {

  color: var(--white);

  background: rgba(239, 68, 68, 0.2);

}



.modal-body {

  padding: 20px;

  overflow-y: auto;

  overflow-x: hidden;

  flex: 1;

  min-height: 0;

  -webkit-overflow-scrolling: touch;

}



.modal-footer {

  display: flex;

  justify-content: flex-end;

  gap: 10px;

  padding: 14px 20px;

  border-top: 1px solid var(--glass-border);

  flex-shrink: 0;

}



/* ══ TOAST ══ */

.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 17, 23, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(245, 197, 24, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 18px rgba(245, 197, 24, 0.12);
  color: #f8fafc;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.35;
  z-index: 100050;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  max-width: 88vw;
  width: auto;
  text-align: center;
  white-space: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}



.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}



/* ══ EMPTY STATE ══ */

.empty-state {

  text-align: center;

  padding: 48px 20px;

  color: var(--text-muted);

}



.empty-state .empty-icon { font-size: 3rem; margin-bottom: 12px; display: block; }

.empty-state p { font-size: 0.9rem; }



/* ══ RESPONSIVE ══ */

@media (max-width: 1024px) {

  .stats-row { grid-template-columns: repeat(2, 1fr); }

  .dash-grid { grid-template-columns: 1fr 1fr; }

  .event-buttons { grid-template-columns: repeat(3, 1fr); }

  .stats-grid { grid-template-columns: 1fr; }

}



@media (max-width: 900px) {

  .sidebar {

    width: min(290px, 85vw);

    transform: translateX(-100%) !important;

    z-index: 100005 !important;

    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.7);

    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);

  }



  .sidebar.open {

    transform: translateX(0) !important;

  }



  .hamburger, .topbar-ham {

    display: flex !important;

  }



  .main-content {

    margin-left: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    overflow-x: hidden !important;

  }



  .section { padding: 16px; }



  .topbar { padding: 0 8px; }



  .dash-grid { grid-template-columns: 1fr; }

  .stats-row { grid-template-columns: repeat(2, 1fr); }

  .balance-cards { grid-template-columns: 1fr; gap: 10px; }

  .event-buttons { grid-template-columns: repeat(3, 1fr); gap: 8px; }

  .event-btn { padding: 14px 6px; font-size: 1.4rem; }

  .live-grid { grid-template-columns: 1fr; }

  .stats-grid { grid-template-columns: 1fr; }

  .scoreboard { flex-direction: column; gap: 16px; }

  .hero-match { gap: 16px; }

  .hero-team-name { font-size: 1.1rem; }

  .hero-vs { font-size: 1.8rem; }

  .section-header { gap: 8px; }

  .pizarra-controls { gap: 6px; }

  .players-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

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

  .score-num { font-size: 3rem; }

  .timer-display { font-size: 2rem; }

}



@media (max-width: 480px) {

  .stats-row {

    grid-template-columns: 1fr 1fr;

    gap: 8px;

  }

  .stat-card {

    padding: 10px 10px 9px;

  }

  .stat-card-top {

    margin-bottom: 5px;

  }

  .stat-card-icon {

    width: 24px;

    height: 24px;

  }

  .stat-card-icon svg {

    width: 13px;

    height: 13px;

  }

  .stat-card-tag {

    font-size: 0.58rem;

    padding: 1px 4px;

  }

  .stat-number {

    font-size: 1.7rem;

  }

  .stat-label {

    font-size: 0.65rem;

    letter-spacing: 0.3px;

    margin-top: 3px;

  }

  .stat-sub {

    font-size: 0.6rem;

    margin-top: 5px;

    padding-top: 5px;

  }

  .event-buttons { grid-template-columns: repeat(2, 1fr); }

  .hero-card { padding: 20px 16px; }

  .hero-match { flex-direction: column; gap: 8px; }

  .hero-vs { font-size: 1.5rem; }

  .draw-tools { flex-wrap: wrap; gap: 6px; }

}



/* ══ MODAL CONVOCATORIA & PAGO DE CANCHA ══ */

.modal-lg {

  max-width: 680px !important;

  width: 95%;

}



#modal-convocatoria .modal {

  max-width: 620px !important;

  width: 96% !important;

  max-height: min(92vh, calc(100vh - 32px)) !important;

}



#modal-convocatoria .modal-body {

  padding: 16px 18px !important;

}



.convocatoria-whatsapp-bar {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

  margin-bottom: 14px;

}



.convocatoria-whatsapp-bar .btn {

  padding: 8px 12px;

  font-size: 0.8rem;

  font-weight: 600;

  border-radius: var(--radius-sm);

  transition: var(--transition);

  justify-content: center;

  text-align: center;

  white-space: nowrap;

}



@media (max-width: 460px) {

  .convocatoria-whatsapp-bar {

    grid-template-columns: 1fr;

    gap: 8px;

  }

}



.convocatoria-summary-bar {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

  background: var(--black-3);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-sm);

  padding: 12px 14px;

  margin-bottom: 16px;

}



@media (max-width: 620px) {

  .convocatoria-summary-bar {

    grid-template-columns: repeat(2, 1fr);

    gap: 8px;

    padding: 10px 12px;

  }

}



.conv-stat {

  display: flex;

  flex-direction: column;

  gap: 4px;

  min-width: 0;

}



.conv-stat-label {

  font-size: 0.72rem;

  color: var(--text-muted);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.conv-stat-val {

  font-family: var(--font-title);

  font-size: 1.15rem;

  color: var(--white);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.conv-stat-val.green { color: var(--green); }

.conv-stat-val.gold  { color: var(--gold); }



#convocatoria-costo-total {

  font-family: var(--font-title);

  font-size: 1.15rem;

  font-weight: 700;

  padding: 3px 8px;

  height: 32px;

  width: 100%;

  max-width: 125px;

  box-sizing: border-box;

  color: var(--white);

  border-radius: 6px;

  letter-spacing: 0.5px;

}



.convocatoria-players-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

  max-height: none;

  overflow: visible;

  padding-right: 0;

}



.conv-player-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: var(--black-2);

  border: 1px solid var(--black-5);

  border-radius: var(--radius-sm);

  padding: 8px 12px;

  gap: 10px;

  min-height: 50px;

  box-sizing: border-box;

  transition: var(--transition);

}



.conv-player-row.finished-match {

  padding: 8px 12px;

}



.conv-player-row.finished-match.paid-row {

  border-left: 5px solid #22c55e !important;

}



.conv-player-row.finished-match.unpaid-row {

  border-left: 5px solid #ef4444 !important;

}



.conv-player-row.confirmado { border-left: 4px solid var(--green); }

.conv-player-row.duda       { border-left: 4px solid var(--gold); opacity: 0.85; }

.conv-player-row.ausente    { border-left: 4px solid var(--red); opacity: 0.65; }



.conv-player-info {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

  flex: 1;

}



.conv-player-details {

  display: flex;

  flex-direction: column;

  min-width: 0;

}



.conv-player-name {

  font-weight: 700;

  font-size: 0.9rem;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.conv-player-sub {

  font-size: 0.74rem;

  color: var(--text-muted);

}



.conv-player-actions {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

  justify-content: flex-end;

}



.conv-finished-actions {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

}



.conv-remove-btn {

  background: transparent;

  border: 1px solid transparent;

  color: var(--text-muted);

  width: 28px;

  height: 28px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-size: 0.85rem;

  transition: all 0.2s ease;

}



.conv-remove-btn:hover {

  background: rgba(239, 68, 68, 0.15);

  border-color: rgba(239, 68, 68, 0.4);

  color: #ef4444;

}



.convocatoria-legend-bar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 4px 6px;

  font-size: 0.7rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  color: var(--text-muted);

}



.conv-status-pills {

  display: flex;

  gap: 2px;

  background: var(--black-4);

  padding: 2px;

  border-radius: 8px;

  align-items: center;

}



.conv-pill {

  border: none;

  background: transparent;

  color: var(--text-muted);

  width: 32px;

  height: 32px;

  padding: 0;

  border-radius: 6px;

  cursor: pointer;

  transition: var(--transition);

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.conv-pill:hover {

  color: var(--white);

}



.conv-pill.green.active  { background: var(--green); color: var(--black); }

.conv-pill.yellow.active { background: var(--gold); color: var(--black); }

.conv-pill.red.active    { background: var(--red); color: var(--white); }



.conv-pay-btn {

  border: 1px solid var(--black-5);

  width: 34px;

  height: 34px;

  min-width: 34px;

  padding: 0;

  border-radius: 8px;

  cursor: pointer;

  transition: var(--transition);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 1px 3px rgba(0,0,0,0.06);

}



@media (max-width: 580px) {

  #modal-convocatoria .modal-body {

    padding: 12px 10px !important;

  }

  .conv-player-row {

    padding: 6px 10px !important;

    gap: 8px !important;

  }

  .conv-player-info {

    gap: 8px !important;

  }

  .conv-player-name {

    font-size: 0.84rem !important;

  }

  .conv-player-sub {

    font-size: 0.7rem !important;

  }

  .conv-pill {

    width: 30px !important;

    height: 30px !important;

  }

  .conv-pay-btn {

    width: 32px !important;

    height: 32px !important;

    min-width: 32px !important;

  }

}



.conv-pay-btn.paid {

  background: rgba(34, 197, 94, 0.2);

  border-color: #22c55e;

  color: #16a34a;

}



[data-theme="dark"] .conv-pay-btn.paid {

  background: rgba(34, 197, 94, 0.25);

  border-color: #22c55e;

  color: #4ade80;

}



.conv-pay-btn.unpaid {

  background: rgba(239, 68, 68, 0.12);

  border-color: rgba(239, 68, 68, 0.4);

  color: #dc2626;

}



[data-theme="dark"] .conv-pay-btn.unpaid {

  background: rgba(239, 68, 68, 0.2);

  border-color: #ef4444;

  color: #f87171;

}



[data-theme="light"] .conv-pay-btn.paid {

  background: #dcfce7 !important;

  border-color: #22c55e !important;

  color: #15803d !important;

}



[data-theme="light"] .conv-pay-btn.unpaid {

  background: #fee2e2 !important;

  border-color: #f87171 !important;

  color: #b91c1c !important;

}



/* ══ ICON ACTION BUTTONS ══ */

.btn-icon-action {

  width: 36px;

  height: 36px;

  border-radius: var(--radius-sm);

  background: var(--black-3);

  border: 1px solid var(--black-5);

  color: var(--text-muted);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: var(--transition);

  flex-shrink: 0;

}



.btn-icon-action:hover {

  background: rgba(255, 255, 255, 0.1);

  border-color: var(--glass-border);

  color: var(--white);

  transform: translateY(-1px);

}



.btn-icon-action.gold {

  border-color: rgba(245, 197, 24, 0.4);

  color: var(--gold);

  background: rgba(245, 197, 24, 0.08);

}



.btn-icon-action.gold:hover {

  background: var(--gold);

  color: var(--black);

  border-color: var(--gold);

  box-shadow: 0 0 10px rgba(245, 197, 24, 0.4);

}



.btn-icon-action.red {

  border-color: rgba(239, 68, 68, 0.3);

  color: var(--red);

  background: rgba(239, 68, 68, 0.08);

}



.btn-icon-action.red:hover {

  background: var(--red);

  color: var(--white);

  border-color: var(--red);

}



.btn-icon-action.blue {

  border-color: rgba(59, 130, 246, 0.35);

  color: var(--blue);

  background: rgba(59, 130, 246, 0.08);

}



.btn-icon-action.blue:hover {

  background: var(--blue);

  color: var(--white);

  border-color: var(--blue);

  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);

}



/* ══ FICHA DE PARTIDO MODAL ══ */

.ficha-match-header {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  background: linear-gradient(135deg, rgba(20, 20, 24, 0.95), rgba(12, 12, 16, 0.98));

  border: 1px solid rgba(245, 197, 24, 0.25);

  border-radius: 16px;

  padding: 14px 12px;

  margin-bottom: 12px;

  box-sizing: border-box;

  width: 100%;

  position: relative;

  overflow: hidden;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);

}



.ficha-match-header::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, transparent, var(--gold), transparent);

  opacity: 0.85;

}



.ficha-team-box {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  text-align: center;

  width: 100%;

  min-width: 0;

}



.ficha-team-logo-wrap {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.ficha-team-logo {

  width: 46px;

  height: 46px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid var(--gold);

  flex-shrink: 0;

  box-shadow: 0 4px 14px rgba(245, 197, 24, 0.28);

  background: #0b0f19;

}



.ficha-team-avatar {

  width: 46px;

  height: 46px;

  border-radius: 50%;

  background: linear-gradient(135deg, #1e293b, #0f172a);

  color: #f8fafc;

  border: 2px solid #475569;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 0.95rem;

  letter-spacing: 0.5px;

  flex-shrink: 0;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

}



.ficha-team-name {

  font-size: 0.82rem;

  font-weight: 800;

  color: var(--text);

  line-height: 1.25;

  text-align: center;

  width: 100%;

  max-width: 110px;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

  word-break: break-word;

}



.ficha-score-box {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 5px;

  padding: 0 8px;

  min-width: 120px;

}



.ficha-score-display {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  line-height: 1;

}



.ficha-score-num {

  font-size: 2.3rem;

  font-weight: 900;

  line-height: 1;

  color: var(--gold);

  font-variant-numeric: tabular-nums;

  min-width: 28px;

  text-align: center;

  text-shadow: 0 0 20px rgba(245, 197, 24, 0.35);

}



.ficha-score-sep {

  font-size: 1.7rem;

  font-weight: 600;

  color: var(--text-dim);

  opacity: 0.6;

  margin: 0 1px;

}



.ficha-meta-bar {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  gap: 8px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  padding: 8px 12px;

  border-radius: 10px;

  margin-bottom: 12px;

  text-align: center;

  font-size: 0.78rem;

  color: var(--text-muted);

}



.ficha-meta-item {

  display: inline-flex;

  align-items: center;

  gap: 5px;

}



.ficha-details-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 16px;

  margin-bottom: 20px;

}



@media (max-width: 600px) {

  .ficha-details-grid {

    grid-template-columns: 1fr;

  }

}



.ficha-card-block {

  background: var(--black-2);

  border: 1px solid var(--black-5);

  border-radius: var(--radius-sm);

  padding: 14px;

}



.ficha-block-title {

  font-family: inherit;

  font-size: 0.82rem;

  font-weight: 800;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 10px;

  border-bottom: 1px solid var(--black-5);

  padding-bottom: 6px;

  display: flex;

  align-items: center;

  gap: 6px;

}



/* ══ CUMPLEAÑOS BADGES ══ */

.cumple-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 4px 10px;

  border-radius: 14px;

  font-size: 0.8rem;

  font-weight: 600;

  white-space: nowrap;

}



.cumple-today {

  background: rgba(245, 197, 24, 0.22);

  color: var(--gold);

  border: 1px solid var(--gold);

  font-weight: 700;

}



.cumple-soon {

  background: rgba(34, 197, 94, 0.15);

  color: var(--green);

  border: 1px solid rgba(34, 197, 94, 0.3);

}



.cumple-normal {

  color: var(--text-muted);

}



/* ══ ESTADO ACTIVO / INACTIVO BADGES ══ */

.status-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 4px 12px;

  border-radius: 12px;

  font-size: 0.76rem;

  font-weight: 700;

  white-space: nowrap;

  transition: var(--transition);

  user-select: none;

}



.status-badge.activo {

  background: rgba(34, 197, 94, 0.16);

  color: var(--green);

  border: 1px solid rgba(34, 197, 94, 0.35);

}



.status-badge.activo:hover {

  background: var(--green);

  color: var(--black);

}



.status-badge.inactivo {

  background: rgba(255, 255, 255, 0.06);

  color: var(--text-muted);

  border: 1px solid var(--black-5);

}



.status-badge.inactivo:hover {

  background: rgba(255, 255, 255, 0.14);

  color: var(--white);

}



.player-row.player-inactivo {

  opacity: 0.55;

}



/* ══ TROPHIES & LOGROS (Palmarés en cuadrícula compacta) ══ */
.trophies-grid,
#trophies-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  padding: 6px 0 !important;
}

@media (min-width: 640px) {
  .trophies-grid,
  #trophies-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 14px !important;
  }
}

.trophy-card {
  background: var(--black-2) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  transition: var(--transition) !important;
  min-height: 155px !important;
  justify-content: space-between !important;
}

.trophy-card:hover {
  border-color: var(--gold) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-gold) !important;
}

.trophy-img-wrapper {
  width: 58px !important;
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 4px auto 6px !important;
  position: relative !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) !important;
}

.trophy-img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.25s ease !important;
}

.trophy-card:hover .trophy-img {
  transform: scale(1.08) !important;
}

.trophy-name {
  font-family: var(--font-title) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  margin-bottom: 3px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.trophy-winner {
  font-size: 0.72rem !important;
  color: var(--gold) !important;
  margin-bottom: 4px !important;
  font-weight: 600 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.trophy-year {
  display: inline-block !important;
  background: rgba(245, 197, 24, 0.15) !important;
  border: 1px solid rgba(245, 197, 24, 0.35) !important;
  color: var(--gold) !important;
  font-family: var(--font-title) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 1px 8px !important;
  border-radius: 10px !important;
  margin-top: auto !important;
}

/* Botones discretos y centrados para ficha y modales */
.btn-subtle-icon {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 50% !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-subtle-icon:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--white) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: scale(1.05) !important;
}

.btn-subtle-icon.active {
  background: rgba(245, 197, 24, 0.18) !important;
  border-color: rgba(245, 197, 24, 0.6) !important;
  color: var(--gold) !important;
}

.btn-subtle-icon.delete:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #ef4444 !important;
}



.trophy-desc {

  font-size: 0.82rem;

  color: var(--text-muted);

}





.trophy-card-actions {

  position: absolute;

  top: 8px;

  left: 10px;

  right: 10px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  z-index: 10;

}



.trophy-card-btns {

  display: flex;

  align-items: center;

  gap: 8px;

}



.btn-icon-minimal {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  padding: 4px !important;

  color: var(--text-dim);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  transition: var(--transition);

}



.btn-icon-minimal:hover {

  color: var(--text);

  transform: scale(1.1);

}



.btn-icon-minimal.gold:hover {

  color: var(--gold);

}



.btn-icon-minimal.red:hover {

  color: var(--red);

}



.btn-icon-minimal.active {

  color: var(--gold);

}



.trophy-delete-btn {

  position: absolute;

  top: 10px;

  right: 10px;

  opacity: 0;

  transition: var(--transition);

}



.trophy-card:hover .trophy-delete-btn {

  opacity: 1;

}



/* ══ PIZARRA TÁCTICA 100% PANTALLA COMPLETA + BOTONES FLOTANTES CIRCULARES ══ */

#section-pizarra {

  padding: 0 !important;

  margin: 0 !important;

  width: 100% !important;

  height: 100% !important;

}



.pizarra-wrapper.full-screen-pitch {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  width: 100% !important;

  height: 100% !important;

  max-width: 100vw !important;

  max-height: 100vh !important;

  z-index: 99999 !important;

  margin: 0 !important;

  padding: 0 !important;

  border-radius: 0;

  overflow: hidden !important;

  background: #081e08;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* BOTÓN FLOTANTE CIRCULAR SALIR (X - Top Left) */

.pizarra-fab-exit {

  position: fixed !important;

  top: 16px !important;

  top: max(16px, env(safe-area-inset-top)) !important;

  left: 16px !important;

  left: max(16px, env(safe-area-inset-left)) !important;

  z-index: 100000 !important;

  width: 48px !important;

  height: 48px !important;

  border-radius: 50% !important;

  background: rgba(18, 18, 18, 0.88) !important;

  backdrop-filter: blur(8px) !important;

  border: 2px solid rgba(255, 255, 255, 0.25) !important;

  color: #ffffff !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65) !important;

  cursor: pointer !important;

  transition: all 0.25s cubic-bezier(.4,0,.2,1) !important;

  user-select: none !important;

  touch-action: manipulation !important;

}



.pizarra-fab-exit:hover, .pizarra-fab-exit:active {

  transform: scale(1.08) !important;

  background: #ef4444 !important;

  border-color: #ef4444 !important;

  color: #ffffff !important;

  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.6) !important;

}



/* BOTÓN FLOTANTE CIRCULAR HERRAMIENTAS (Solo Icono - Top Right) */

.pizarra-fab-tools {

  position: fixed !important;

  top: 16px !important;

  top: max(16px, env(safe-area-inset-top)) !important;

  right: 16px !important;

  right: max(16px, env(safe-area-inset-right)) !important;

  z-index: 100000 !important;

  width: 48px !important;

  height: 48px !important;

  border-radius: 50% !important;

  background: rgba(245, 197, 24, 0.95) !important;

  color: #0b0b0b !important;

  border: 2px solid #ffffff !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(245, 197, 24, 0.5) !important;

  cursor: pointer !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: all 0.25s cubic-bezier(.4,0,.2,1) !important;

  user-select: none !important;

  touch-action: manipulation !important;

}



.pizarra-fab-tools:hover, .pizarra-fab-tools:active {

  transform: scale(1.08) !important;

  background: #ffffff !important;

  color: #000 !important;

  box-shadow: 0 10px 30px rgba(245, 197, 24, 0.8) !important;

}



.pizarra-fab-tools svg {

  stroke: #0b0b0b;

  flex-shrink: 0;

}



/* Modal de herramientas flotante */

.pizarra-tool-section {

  margin-bottom: 16px;

  padding-bottom: 12px;

  border-bottom: 1px solid var(--black-5);

}



.pizarra-tool-section:last-child {

  border-bottom: none;

  margin-bottom: 0;

}



.pizarra-tool-label {

  font-size: 0.76rem;

  font-weight: 800;

  color: var(--gold);

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 8px;

  display: block;

}



.pizarra-tool-row {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

}



.draw-tools-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 8px;

}



.draw-tools-grid .tool-btn {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  padding: 10px 6px;

  height: 56px;

  border-radius: 8px;

  font-size: 0.72rem;

  font-weight: 600;

}



@media (max-width: 600px) {

  .draw-tools-grid {

    grid-template-columns: repeat(3, 1fr);

  }

}



/* ══ SUPLENTES EN CANCHA DETRÁS DEL ARCO ══ */
.field-player.bench-pitch-token {
  width: 48px !important;
  height: 48px !important;
  border: 2px dashed var(--gold) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 10px rgba(245, 197, 24, 0.35);
  background: radial-gradient(circle, #2d3748 0%, #111827 100%) !important;
  color: #ffffff !important;
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.field-player.bench-pitch-token:hover, .field-player.bench-pitch-token:active {
  box-shadow: 0 0 18px rgba(245, 197, 24, 0.9), 0 6px 14px rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.1) !important;
  z-index: 500 !important;
}

.field-player.bench-pitch-token .fp-num {
  font-family: var(--font-title);
  font-size: 1.15rem !important;
  font-weight: 900;
  color: var(--gold) !important;
  line-height: 1;
}

.field-player.bench-pitch-token .fp-name {
  font-size: 0.62rem !important;
  font-weight: 800;
  color: #ffffff !important;
  text-align: center;
  max-width: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
  margin-top: 1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.bench-overlay-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--gold);
  color: #000000 !important;
  font-family: var(--font-main);
  font-size: 0.5rem;
  font-weight: 900;
  padding: 1px 3px;
  border-radius: 4px;
  border: 1px solid #000000;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 20;
}

.field-player.swap-target-highlight {

  animation: pulseSwapTarget 0.8s infinite alternate;

  box-shadow: 0 0 20px #22c55e, 0 0 32px #22c55e !important;

  border-color: #22c55e !important;

  z-index: 600 !important;

}



@keyframes pulseSwapTarget {

  from { transform: translate(-50%, -50%) scale(1.05); }

  to { transform: translate(-50%, -50%) scale(1.22); }

}



/* ══ BARRA DE HERRAMIENTAS RÁPIDA DETRÁS DEL ARCO SUPERIOR ══ */

.pizarra-quick-toolbar {

  position: fixed !important;

  top: 16px !important;

  top: max(16px, env(safe-area-inset-top)) !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  z-index: 100000 !important;

  display: flex !important;

  align-items: center !important;

  gap: 4px !important;

  background: rgba(18, 18, 18, 0.88) !important;

  backdrop-filter: blur(12px) !important;

  border: 1.5px solid rgba(245, 197, 24, 0.35) !important;

  padding: 4px 8px !important;

  border-radius: 30px !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(245, 197, 24, 0.2) !important;

  max-width: calc(100vw - 120px) !important;

  overflow-x: auto !important;

  white-space: nowrap !important;

  touch-action: manipulation !important;

}



.pizarra-quick-toolbar::-webkit-scrollbar { display: none; }



.qtool-btn {

  width: 36px !important;

  height: 36px !important;

  border-radius: 50% !important;

  background: transparent !important;

  border: none !important;

  color: var(--text-muted) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  flex-shrink: 0 !important;

}



.qtool-btn:hover, .qtool-btn:active {

  background: rgba(255, 255, 255, 0.1) !important;

  color: var(--white) !important;

}



.qtool-btn.active {

  background: var(--gold) !important;

  color: #0b0b0b !important;

  box-shadow: 0 0 10px rgba(245, 197, 24, 0.6) !important;

}



.qtool-btn svg {

  stroke: currentColor;

  flex-shrink: 0;

}



.qtool-divider {

  width: 1px !important;

  height: 20px !important;

  background: rgba(255, 255, 255, 0.2) !important;

  margin: 0 4px !important;

  flex-shrink: 0 !important;

}



.qcolor-dot {

  width: 22px !important;

  height: 22px !important;

  border-radius: 50% !important;

  border: 2px solid transparent !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  flex-shrink: 0 !important;

}



.qcolor-dot.active {

  border-color: #000000 !important;

  transform: scale(1.18) !important;

  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;

}



/* ══ ÚNICA REJILLA DE HERRAMIENTAS DE DIBUJO CON BOTÓN  DE PIN ══ */

.draw-tools-grid-unified {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}



@media (min-width: 540px) {

  .draw-tools-grid-unified {

    grid-template-columns: repeat(4, 1fr);

  }

}



.utool-card {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 14px 8px 10px 8px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 12px;

  cursor: pointer;

  transition: all 0.2s ease;

  user-select: none;

}



.utool-card:hover {

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(245, 197, 24, 0.5);

  transform: translateY(-2px);

}



.utool-card.active {

  background: rgba(245, 197, 24, 0.18);

  border-color: var(--gold);

  box-shadow: 0 0 12px rgba(245, 197, 24, 0.3);

}



.utool-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--gold);

}



.utool-icon svg {

  stroke: currentColor;

  width: 22px;

  height: 22px;

}



.utool-label {

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--white);

  text-align: center;

}



.utool-pin-btn {

  position: absolute;

  top: 4px;

  right: 4px;

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.15);

  color: var(--text-muted);

  font-size: 0.75rem;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.2s ease;

  padding: 0;

  line-height: 1;

}



.utool-pin-btn:hover {

  background: rgba(245, 197, 24, 0.3);

  color: #fff;

  transform: scale(1.15);

}



.utool-pin-btn.pinned {

  background: var(--gold);

  border-color: var(--gold);

  color: #000;

  box-shadow: 0 0 8px rgba(245, 197, 24, 0.6);

}



/* ══ PLANTEL: AJUSTES MÓVIL ══ */

.squad-player-item { cursor: pointer; -webkit-tap-highlight-color: transparent; }

.squad-player-item:active { background: rgba(245, 197, 24, 0.12); transform: scale(0.99); }



.squad-status-dot {

  width: 10px; height: 10px; border-radius: 50%;

  flex-shrink: 0;

}

.squad-status-dot.on  { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,.6); }

.squad-status-dot.off { background: var(--red);   box-shadow: 0 0 6px rgba(239,68,68,.5); }



.squad-chevron {

  font-size: 1.4rem; line-height: 1; color: var(--text-dim);

}



.squad-line-sub { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }



@media (max-width: 480px) {

  .squad-list-container { gap: 6px; }

  .squad-player-item { padding: 8px 10px; gap: 8px; }

  .squad-player-left { gap: 6px; }

  .squad-player-item .player-num-badge { width: 24px; height: 24px; font-size: 0.8rem; }

  .squad-player-item .player-avatar-sm,

  .squad-player-item .player-photo-sm { width: 34px; height: 34px; font-size: 0.8rem; }

  .squad-player-name { font-size: 0.9rem; }

  .squad-line-sub { font-size: 0.74rem; gap: 5px; }

}



/* Ficha del jugador como panel inferior en celular */

@media (max-width: 600px) {

  #modal-ficha-jugador { align-items: flex-end !important; padding: 0 !important; }

  #modal-ficha-jugador .modal {

    width: 100% !important; max-width: 100% !important;

    margin: 0 !important;

    max-height: 88vh; overflow-y: auto;

    border-radius: 20px 20px 0 0 !important;

  }

  #modal-ficha-jugador .modal-body { padding: 16px; }

  #modal-ficha-jugador .modal-footer {

    padding: 12px 16px; display: grid;

    grid-template-columns: 1fr 1fr 1fr; gap: 8px;

  }

  #modal-ficha-jugador .modal-footer .btn { padding: 10px 6px; font-size: 0.8rem; justify-content: center; }

  .fjugador-name { font-size: 1.15rem; }

}



/* == PARTIDOS: AJUSTES MOVIL == */

.match-info { min-width: 0; }



@media (max-width: 600px) {

  #section-partidos .section-header {

    flex-wrap: nowrap;

    margin-bottom: 12px;

  }

  #section-partidos .section-title { font-size: 1.45rem; margin: 0; }



  #section-partidos .tabs { gap: 0; }

  #section-partidos .tab { flex: 1; text-align: center; padding: 10px 8px; }



  .match-card {

    display: grid;

    grid-template-columns: auto minmax(0, 1fr) auto;

    align-items: center;

    column-gap: 10px;

    row-gap: 10px;

    padding: 12px;

  }

  .match-card-logo {

    width: 40px !important; height: 40px !important;

    max-width: 40px !important; max-height: 40px !important;

  }

  .match-rival { font-size: 0.95rem; gap: 6px; margin-bottom: 2px; }

  .match-details { font-size: 0.78rem; gap: 4px 10px; }

  .match-score { font-size: 1.4rem; letter-spacing: 2px; }



  /* proximo partido: el boton ocupa todo el ancho */

  .match-card > div:nth-child(3):not(.match-score) { grid-column: 1 / -1; }

  .match-card > div:nth-child(3):not(.match-score) .btn { width: 100%; justify-content: center; }



  /* acciones en una fila propia, repartidas */

  .match-card > div:nth-child(4) {

    grid-column: 1 / -1;

    display: grid !important;

    grid-auto-flow: column;

    grid-auto-columns: 1fr;

    gap: 8px !important;

    border-top: 1px solid var(--black-5);

    padding-top: 10px;

  }

  .match-card > div:nth-child(4) .btn-icon-action {

    width: 100%; height: 40px;

  }

}



/* ══ MODO PARTIDO EN VIVO ══ */

.live-pulse-dot {

  width: 10px;

  height: 10px;

  background-color: #ef4444;

  border-radius: 50%;

  display: inline-block;

  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);

  animation: livePulse 1.5s infinite;

}



@keyframes livePulse {

  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }

  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }

  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }

}



/* ── MARCADOR TV BROADCAST / MATCH BUG (BARRA SUPERIOR) ── */

.live-match-bug,

.live-match-badge-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: linear-gradient(135deg, #0e1626 0%, #080c15 100%) !important;

  border: 1px solid rgba(245, 197, 24, 0.45) !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);

  padding: 3px 8px 3px 6px;

  border-radius: 999px;

  cursor: pointer;

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  white-space: nowrap !important;

  user-select: none;

  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;

  height: 34px;

  box-sizing: border-box;

  text-decoration: none;

}



.live-match-bug:hover,

.live-match-badge-btn:hover {

  border-color: var(--gold) !important;

  transform: translateY(-1px);

  box-shadow: 0 6px 18px rgba(245, 197, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);

}



.bug-pulse-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #ef4444;

  box-shadow: 0 0 8px #ef4444;

  animation: bugPulse 1.6s infinite;

  flex-shrink: 0;

  margin-left: 2px;

  margin-right: 2px;

}



@keyframes bugPulse {

  0% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 4px #ef4444; }

  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px #ef4444; }

  100% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 4px #ef4444; }

}



.bug-scoreboard {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  flex-shrink: 0;

}



.bug-team-name {

  font-size: 0.76rem;

  font-weight: 800;

  letter-spacing: 0.4px;

  line-height: 1;

}



.bug-team-name.bug-local {

  color: var(--gold);

}



.bug-team-name.bug-rival {

  color: #f1f5f9;

}



.bug-score-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 3px;

  background: rgba(255, 255, 255, 0.09);

  border: 1px solid rgba(255, 255, 255, 0.16);

  padding: 2px 6px;

  border-radius: 5px;

  font-size: 0.82rem;

  font-weight: 800;

  font-variant-numeric: tabular-nums;

  line-height: 1;

  color: #ffffff;

}



.bug-score-colon {

  opacity: 0.55;

  font-size: 0.72rem;

  margin: 0 -1px;

}



.bug-timer {

  font-size: 0.7rem;

  font-weight: 700;

  color: var(--gold);

  background: rgba(245, 197, 24, 0.12);

  border: 1px solid rgba(245, 197, 24, 0.3);

  padding: 2px 6px;

  border-radius: 8px;

  line-height: 1;

  font-variant-numeric: tabular-nums;

  flex-shrink: 0;

}



/* ══ MODO PARTIDO EN VIVO (DISEÑO PROFESIONAL & RESPONSIVE MÓVIL) ══ */

#modal-partido-vivo {

  padding: 8px !important;

  align-items: center;

}



#modal-partido-vivo .modal {

  width: 100% !important;

  max-width: 520px !important;

  margin: 0 auto;

  box-sizing: border-box !important;

  overflow-x: hidden !important;

  border-radius: 14px;

}



#modal-partido-vivo .modal-body {

  padding: 12px 10px !important;

  box-sizing: border-box !important;

  overflow-x: hidden !important;

}



.live-modal-header {

  background: var(--black-2) !important;

  border-bottom: 1px solid var(--black-5) !important;

  padding: 12px 14px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 8px !important;

  box-sizing: border-box !important;

}



.live-header-info {

  display: flex;

  align-items: center;

  gap: 8px;

  flex: 1;

  min-width: 0;

  overflow: hidden;

}



.live-tag-badge {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding: 3px 8px;

  border-radius: 999px;

  background: rgba(239, 68, 68, 0.12);

  border: 1px solid rgba(239, 68, 68, 0.35);

  color: #ef4444;

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.6px;

  flex-shrink: 0;

}



.live-pulse-indicator {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #ef4444;

  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);

  animation: livePulseAnim 1.8s infinite;

}



@keyframes livePulseAnim {

  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }

  70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }

  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }

}



.live-modal-header h3,

.live-modal-header .live-title-text,

.modal-header h3.live-title-text {

  font-family: var(--font-title) !important;

  font-size: 0.95rem !important;

  font-weight: 800 !important;

  color: var(--text) !important;

  letter-spacing: 0.3px !important;

  margin: 0 !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  text-transform: uppercase !important;

}



.live-scoreboard-card {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  background: linear-gradient(135deg, rgba(20, 20, 24, 0.95), rgba(12, 12, 16, 0.98));

  border: 1px solid rgba(245, 197, 24, 0.25);

  border-radius: 16px;

  padding: 12px 14px;

  margin-bottom: 12px;

  box-sizing: border-box;

  width: 100%;

  position: relative;

  overflow: hidden;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);

}



.live-scoreboard-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, transparent, var(--gold), transparent);

  opacity: 0.85;

}



.live-team-box {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  text-align: center;

  width: 100%;

  min-width: 0;

}



.live-team-logo-wrap {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.live-team-logo {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid var(--gold);

  flex-shrink: 0;

  box-shadow: 0 4px 14px rgba(245, 197, 24, 0.28);

  background: #0b0f19;

}



.live-team-avatar {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: linear-gradient(135deg, #1e293b, #0f172a);

  color: #f8fafc;

  border: 2px solid #475569;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 0.92rem;

  letter-spacing: 0.5px;

  flex-shrink: 0;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

}



.live-team-name {

  font-size: 0.78rem;

  font-weight: 700;

  color: var(--text);

  line-height: 1.25;

  text-align: center;

  width: 100%;

  max-width: 110px;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

  word-break: break-word;

}



.live-score-center {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 0 10px;

  min-width: 130px;

}



.live-timer-control-row {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  background: rgba(0, 0, 0, 0.5);

  border: 1px solid rgba(255, 255, 255, 0.12);

  padding: 3px 8px;

  border-radius: 20px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

}



.live-period-badge {

  background: var(--gold);

  color: #000;

  font-weight: 800;

  font-size: 0.68rem;

  padding: 2px 6px;

  border-radius: 6px;

  border: none;

  cursor: pointer;

  line-height: 1.1;

  transition: transform 0.15s ease;

}



.live-period-badge:hover {

  transform: scale(1.06);

}



.live-timer-digits {

  font-size: 0.88rem;

  font-weight: 800;

  font-variant-numeric: tabular-nums;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  color: var(--text);

  letter-spacing: 0.8px;

  min-width: 44px;

  text-align: center;

}



.live-timer-btn {

  width: 22px;

  height: 22px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  border: none;

  cursor: pointer;

  transition: all 0.2s ease;

}



.live-timer-btn.paused {

  background: #22c55e;

  color: #000;

  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);

}



.live-timer-btn.paused:hover {

  background: #16a34a;

  transform: scale(1.1);

}



.live-timer-btn.running {

  background: #f59e0b;

  color: #000;

  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);

}



.live-timer-btn.running:hover {

  background: #d97706;

  transform: scale(1.1);

}



.live-gear-btn {

  background: transparent;

  border: none;

  color: var(--text-dim);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2px;

  border-radius: 4px;

  transition: all 0.2s ease;

}



.live-gear-btn:hover {

  color: var(--gold);

  transform: rotate(45deg);

}



.live-score-display {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  line-height: 1;

}



.live-score-num {

  font-size: 2.2rem;

  font-weight: 900;

  line-height: 1;

  color: var(--gold);

  font-variant-numeric: tabular-nums;

  min-width: 28px;

  text-align: center;

  text-shadow: 0 0 20px rgba(245, 197, 24, 0.35);

}



.live-score-sep {

  font-size: 1.6rem;

  font-weight: 600;

  color: var(--text-dim);

  opacity: 0.6;

  margin: 0 1px;

}



.live-info-bar {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  flex-wrap: wrap;

  margin-bottom: 12px;

}



.live-info-chip {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  background: var(--black-2);

  border: 1px solid var(--black-5);

  padding: 4px 10px;

  border-radius: 20px;

  font-size: 0.74rem;

  font-weight: 600;

  color: var(--text-muted);

}



.live-info-chip svg {

  color: var(--gold);

  flex-shrink: 0;

}



.live-actions-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 6px;

  margin-bottom: 8px;

  width: 100%;

  box-sizing: border-box;

}



.live-act-btn {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 6px;

  padding: 8px 6px;

  border-radius: 9px;

  background: var(--black-2);

  border: 1px solid var(--black-5);

  color: var(--text);

  cursor: pointer;

  transition: var(--transition);

  text-align: left;

  min-width: 0;

  box-sizing: border-box;

  overflow: hidden;

}



.live-act-btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);

}



.live-act-btn.btn-gol-pb {

  border-color: rgba(34, 197, 94, 0.35);

}



.live-act-btn.btn-gol-pb:hover {

  background: rgba(34, 197, 94, 0.08);

  border-color: rgba(34, 197, 94, 0.6);

}



.live-act-btn.btn-gol-rival {

  border-color: rgba(239, 68, 68, 0.35);

}



.live-act-btn.btn-gol-rival:hover {

  background: rgba(239, 68, 68, 0.08);

  border-color: rgba(239, 68, 68, 0.6);

}



.live-act-btn.btn-card {

  border-color: rgba(245, 197, 24, 0.35);

}



.live-act-btn.btn-card:hover {

  background: rgba(245, 197, 24, 0.08);

  border-color: rgba(245, 197, 24, 0.6);

}



.live-act-btn.btn-board {

  border-color: rgba(59, 130, 246, 0.35);

}



.live-act-btn.btn-board:hover {

  background: rgba(59, 130, 246, 0.08);

  border-color: rgba(59, 130, 246, 0.6);

}



.live-act-icon-box {

  width: 32px;

  height: 32px;

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.live-act-icon-box svg {

  width: 16px;

  height: 16px;

}



.live-act-btn.btn-gol-pb .live-act-icon-box {

  background: rgba(34, 197, 94, 0.14);

  color: #22c55e;

}



.live-act-btn.btn-gol-rival .live-act-icon-box {

  background: rgba(239, 68, 68, 0.14);

  color: #ef4444;

}



.live-act-btn.btn-card .live-act-icon-box {

  background: rgba(245, 197, 24, 0.14);

  color: #f5c518;

}



.live-act-btn.btn-board .live-act-icon-box {

  background: rgba(59, 130, 246, 0.14);

  color: #3b82f6;

}



.live-act-text-wrap {

  display: flex;

  flex-direction: column;

  min-width: 0;

  flex: 1;

  overflow: hidden;

}



.live-act-label {

  font-size: 0.78rem;

  font-weight: 700;

  color: var(--text);

  line-height: 1.2;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.live-act-sub {

  font-size: 0.68rem;

  color: var(--text-dim);

  font-weight: 500;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.live-events-block {

  background: var(--black-2);

  border: 1px solid var(--black-5);

  border-radius: 10px;

  padding: 10px;

  width: 100%;

  box-sizing: border-box;

}



.live-events-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 8px;

  padding-bottom: 6px;

  border-bottom: 1px solid var(--black-5);

}



.live-events-title-wrap {

  display: flex;

  align-items: center;

  gap: 6px;

  color: var(--text);

}



.live-events-title {

  font-size: 0.82rem;

  font-weight: 700;

  margin: 0;

  color: var(--text);

}



.live-events-badge {

  font-size: 0.7rem;

  font-weight: 700;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  color: var(--gold);

  padding: 2px 7px;

  border-radius: 10px;

}



.live-events-list {

  max-height: 140px;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.live-event-item {

  display: flex;

  align-items: center;

  gap: 8px;

  background: var(--black-3);

  padding: 7px 10px;

  border-radius: 6px;

  font-size: 0.78rem;

  border: 1px solid transparent;

  box-sizing: border-box;

  min-width: 0;

}



.live-event-item:hover {

  border-color: var(--black-5);

}



.live-event-min {

  font-weight: 800;

  color: var(--gold);

  font-size: 0.75rem;

  min-width: 22px;

}



.event-icon-badge {

  width: 20px;

  height: 20px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.event-icon-badge.goal {

  background: rgba(34, 197, 94, 0.15);

  color: #22c55e;

}



.event-icon-badge.goal-rival {

  background: rgba(239, 68, 68, 0.15);

  color: #ef4444;

}



.event-card-pill {

  width: 12px;

  height: 16px;

  border-radius: 2px;

  display: inline-block;

  flex-shrink: 0;

}



.event-card-pill.yellow {

  background: #eab308;

  border: 1px solid #ca8a04;

}



.event-card-pill.red {

  background: #ef4444;

  border: 1px solid #b91c1c;

}



.btn-card-quick {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 16px 12px;

  border-radius: 12px;

  cursor: pointer;

  transition: var(--transition);

  border: 1.5px solid var(--black-5);

  background: var(--black-2);

}



.btn-card-quick.yellow {

  border-color: rgba(234, 179, 8, 0.4);

}

.btn-card-quick.yellow:hover, .btn-card-quick.yellow:active {

  background: rgba(234, 179, 8, 0.12);

  border-color: #eab308;

  transform: translateY(-2px);

}



.btn-card-quick.red {

  border-color: rgba(239, 68, 68, 0.4);

}

.btn-card-quick.red:hover, .btn-card-quick.red:active {

  background: rgba(239, 68, 68, 0.12);

  border-color: #ef4444;

  transform: translateY(-2px);

}



.card-visual {

  width: 28px;

  height: 38px;

  border-radius: 4px;

  display: block;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}



.card-visual.yellow {

  background: #eab308;

  border: 1.5px solid #ca8a04;

}



.card-visual.red {

  background: #ef4444;

  border: 1.5px solid #b91c1c;

}



.live-event-text {

  flex: 1;

  color: var(--text);

  font-weight: 500;

  min-width: 0;

  word-break: break-word;

}



.live-event-del {

  background: none;

  border: none;

  color: var(--text-dim);

  cursor: pointer;

  padding: 4px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 4px;

  transition: var(--transition);

}



.live-event-del:hover {

  color: var(--red);

  background: rgba(239, 68, 68, 0.1);

}



.live-events-empty {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  color: var(--text-dim);

  font-size: 0.78rem;

  text-align: center;

  padding: 16px 8px;

}



.live-events-empty svg {

  color: var(--text-dim);

  opacity: 0.6;

}



#vivo-modal-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--glass-border);
  box-sizing: border-box;
  width: 100%;
}

#vivo-modal-footer .btn {
  padding: 11px 8px;
  font-size: 0.82rem;
  font-weight: 700;
  justify-content: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-live-share-wa {
  background: rgba(37, 211, 102, 0.12) !important;
  border: 1.5px solid #25d366 !important;
  color: #25d366 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2) !important;
}

.btn-live-share-wa:hover,
.btn-live-share-wa:active {
  background: #25d366 !important;
  color: #000 !important;
  transform: translateY(-1px) !important;
}

.btn-live-finish {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: 1.5px solid #ef4444 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

.btn-live-finish:hover,
.btn-live-finish:active {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  transform: translateY(-1px) !important;
}



.btn-danger-solid {

  background: #ef4444 !important;

  border-color: #ef4444 !important;

  color: #ffffff !important;

  font-weight: 700 !important;

}



.btn-danger-solid:hover {

  background: #dc2626 !important;

  border-color: #dc2626 !important;

}



/* ══ ESTADÍSTICAS DEL EQUIPO (DISEÑO PROFESIONAL SPORT ANALYTICS) ══ */

.stats-page-header {

  margin-bottom: 18px;

}



.stats-header-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: rgba(245, 197, 24, 0.14);

  border: 1px solid rgba(245, 197, 24, 0.35);

  color: var(--gold);

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.8px;

  margin-bottom: 6px;

}



[data-theme="light"] .stats-header-badge {

  color: #b45309;

  background: rgba(245, 197, 24, 0.18);

  border-color: rgba(245, 197, 24, 0.45);

}



.stats-main-title {

  font-family: var(--font-title);

  font-size: 1.6rem;

  font-weight: 800;

  color: var(--text);

  margin: 0;

  line-height: 1.2;

  letter-spacing: -0.3px;

}



@media (max-width: 600px) {

  .stats-main-title {

    font-size: 1.35rem;

  }

}



.stats-card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 16px;

  padding-bottom: 12px;

  border-bottom: 1px solid var(--black-5);

}



.stats-card-title-group {

  display: flex;

  align-items: center;

  gap: 10px;

}



.stats-card-icon-box {

  width: 34px;

  height: 34px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.stats-card-icon-box.gold {

  background: rgba(245, 197, 24, 0.15);

  color: var(--gold);

}



[data-theme="light"] .stats-card-icon-box.gold {

  color: #b45309;

}



.stats-card-icon-box.blue {

  background: rgba(59, 130, 246, 0.15);

  color: #3b82f6;

}



.stats-card-title {

  font-family: var(--font-title);

  font-size: 1.05rem;

  font-weight: 800;

  color: var(--text);

  margin: 0;

  line-height: 1.2;

}



.stats-card-sub {

  font-size: 0.72rem;

  color: var(--text-muted);

  font-weight: 500;

  display: block;

  margin-top: 2px;

}



/* Banner de balance y efectividad */

.stats-balance-banner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  border-radius: 12px;

  padding: 12px 14px;

  margin-bottom: 14px;

  gap: 8px;

  flex-wrap: wrap;

}



.stats-balance-item {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.stats-bal-label {

  font-size: 0.68rem;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--text-muted);

  letter-spacing: 0.5px;

}



.stats-record-pills {

  display: flex;

  align-items: center;

  gap: 4px;

}



.rec-pill {

  font-size: 0.72rem;

  font-weight: 800;

  padding: 2px 7px;

  border-radius: 6px;

  line-height: 1.2;

}



.rec-pill.win {

  background: rgba(34, 197, 94, 0.18);

  color: #16a34a;

  border: 1px solid rgba(34, 197, 94, 0.35);

}



.rec-pill.draw {

  background: rgba(148, 163, 184, 0.18);

  color: #64748b;

  border: 1px solid rgba(148, 163, 184, 0.35);

}



.rec-pill.loss {

  background: rgba(239, 68, 68, 0.18);

  color: #ef4444;

  border: 1px solid rgba(239, 68, 68, 0.35);

}



.stats-bal-val {

  font-size: 1.15rem;

  font-weight: 800;

  color: var(--text);

  line-height: 1;

}



.stats-bal-val.good {

  color: #16a34a;

}



.stats-bal-val.pts {

  color: var(--gold);

}



[data-theme="light"] .stats-bal-val.pts {

  color: #b45309;

}



/* Grilla KPI */

.stats-kpi-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

}



@media (max-width: 600px) {

  .stats-kpi-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



.stats-kpi-card {

  background: var(--black-3);

  border: 1px solid var(--black-5);

  border-radius: 12px;

  padding: 12px 10px;

  display: flex;

  flex-direction: column;

  transition: var(--transition);

}



.stats-kpi-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

}



.stats-kpi-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 8px;

}



.stats-kpi-icon {

  width: 28px;

  height: 28px;

  border-radius: 7px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.stats-kpi-icon.blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

.stats-kpi-icon.green { background: rgba(34, 197, 94, 0.15); color: #16a34a; }

.stats-kpi-icon.red { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.stats-kpi-icon.gold { background: rgba(245, 197, 24, 0.18); color: var(--gold); }

[data-theme="light"] .stats-kpi-icon.gold { color: #b45309; }



.stats-kpi-tag {

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.6px;

  color: var(--text-muted);

}



.stats-kpi-tag.green { color: #16a34a; }

.stats-kpi-tag.red { color: #ef4444; }

.stats-kpi-tag.gold { color: var(--gold); }

[data-theme="light"] .stats-kpi-tag.gold { color: #b45309; }



.stats-kpi-val {

  font-family: var(--font-title);

  font-size: 1.85rem;

  font-weight: 900;

  color: var(--text);

  line-height: 1;

  margin-bottom: 4px;

  font-variant-numeric: tabular-nums;

}



.stats-kpi-val.green { color: #16a34a; }

.stats-kpi-val.red { color: #ef4444; }

.stats-kpi-val.gold { color: var(--gold); }

[data-theme="light"] .stats-kpi-val.gold { color: #b45309; }



.stats-kpi-lbl {

  font-size: 0.74rem;

  font-weight: 700;

  color: var(--text);

  line-height: 1.2;

}



.stats-kpi-sub {

  font-size: 0.66rem;

  color: var(--text-muted);

  font-weight: 500;

  margin-top: 3px;

}



/* Empty State para estadísticas */

.stats-empty-state {

  padding: 30px 16px;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}



.stats-empty-icon-wrap {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text-muted);

  margin-bottom: 12px;

}



.stats-empty-title {

  font-size: 0.95rem;

  font-weight: 800;

  color: var(--text);

  margin-bottom: 4px;

}



.stats-empty-desc {

  font-size: 0.78rem;

  color: var(--text-muted);

  max-width: 290px;

  margin: 0 auto;

  line-height: 1.4;

}



/* Leaderboard de goleadores con barras */

.scorers-leaderboard {

  display: flex;

  flex-direction: column;

  gap: 8px;

  width: 100%;

  box-sizing: border-box;

}



.scorer-row {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 8px 10px;

  width: 100%;

  box-sizing: border-box;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  border-radius: 10px;

  transition: var(--transition);

  min-width: 0;

  overflow: hidden;

}



.scorer-row:hover {

  border-color: rgba(245, 197, 24, 0.4);

  transform: translateX(2px);

}



.scorer-rank {

  width: 24px;

  height: 24px;

  border-radius: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.75rem;

  font-weight: 900;

  background: var(--black-4);

  color: var(--text-muted);

  flex-shrink: 0;

}



.scorer-rank.rank-1 {

  background: var(--gold);

  color: #000;

  box-shadow: 0 2px 8px rgba(245, 197, 24, 0.3);

}



.scorer-rank.rank-2 {

  background: #cbd5e1;

  color: #0f172a;

}



.scorer-rank.rank-3 {

  background: #d97706;

  color: #fff;

}



.scorer-avatar-badge {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  background: var(--black-2);

  border: 1px solid var(--black-5);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.7rem;

  font-weight: 800;

  color: var(--text);

  flex-shrink: 0;

}



.scorer-info {

  flex: 1;

  min-width: 0;

  overflow: hidden;

}



.scorer-name-wrap {

  display: flex;

  align-items: center;

  gap: 5px;

  margin-bottom: 3px;

  min-width: 0;

  overflow: hidden;

}



.scorer-name {

  font-size: 0.82rem;

  font-weight: 800;

  color: var(--text);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  min-width: 0;

  flex: 1;

}



.scorer-pos {

  font-size: 0.6rem;

  font-weight: 700;

  padding: 1px 4px;

  border-radius: 4px;

  background: var(--black-4);

  color: var(--text-muted);

  text-transform: uppercase;

  flex-shrink: 0;

}



.scorer-bar-track {

  width: 100%;

  height: 4px;

  border-radius: 3px;

  background: var(--black-4);

  overflow: hidden;

}



.scorer-bar-fill {

  height: 100%;

  border-radius: 3px;

  background: linear-gradient(90deg, #f59e0b, var(--gold));

}



.scorer-goals-box {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  justify-content: center;

  flex-shrink: 0;

  min-width: 36px;

}



.scorer-goals-num {

  font-family: var(--font-title);

  font-size: 1.15rem;

  font-weight: 900;

  color: var(--gold);

  line-height: 1;

}



[data-theme="light"] .scorer-goals-num {

  color: #b45309;

}



.scorer-goals-lbl {

  font-size: 0.58rem;

  color: var(--text-muted);

  font-weight: 600;

  text-transform: uppercase;

  margin-top: 2px;

}



.scorer-goals-prom {

  font-size: 0.6rem;

  font-weight: 700;

  color: #10b981;

  background: rgba(16, 185, 129, 0.12);

  border: 1px solid rgba(16, 185, 129, 0.25);

  border-radius: 4px;

  padding: 1px 4px;

  margin-top: 3px;

  white-space: nowrap;

  line-height: 1.1;

}



[data-theme="light"] .scorer-goals-prom {

  color: #047857;

  background: rgba(16, 185, 129, 0.15);

  border-color: rgba(16, 185, 129, 0.35);

}



.scorer-meta-row {

  display: flex;

  align-items: center;

  gap: 5px;

  margin-bottom: 5px;

  font-size: 0.68rem;

  color: var(--text-muted);

}



.scorer-meta-pj {

  font-weight: 600;

}



.scorer-meta-dot {

  font-size: 0.55rem;

  opacity: 0.5;

}



.scorer-meta-prom {

  font-weight: 600;

  color: #10b981;

}



[data-theme="light"] .scorer-meta-prom {

  color: #047857;

}



.scorer-meta-prom strong {

  font-weight: 800;

}



.scorers-filter-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  margin-bottom: 12px;

  flex-wrap: wrap;

}



.scorers-filter-label {

  font-size: 0.72rem;

  font-weight: 700;

  color: var(--text-muted);

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.scorers-filter-pills {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

}



.scorers-filter-btn {

  padding: 4px 10px;

  border-radius: 16px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  color: var(--text-muted);

  font-size: 0.72rem;

  font-weight: 700;

  cursor: pointer;

  transition: var(--transition);

  white-space: nowrap;

}



.scorers-filter-btn:hover {

  border-color: rgba(245, 197, 24, 0.4);

  color: var(--text);

}



.scorers-filter-btn.active {

  background: var(--gold);

  color: #000;

  border-color: var(--gold);

  font-weight: 800;

}



[data-theme="light"] .scorers-filter-btn.active {

  background: #b45309;

  color: #fff;

  border-color: #b45309;

}



/* ════ RENDIMIENTO POR JUGADOR (ATHLETIC MOBILE-FIRST LIST) ════ */

.pstat-container {

  display: flex;

  flex-direction: column;

  width: 100%;

  box-sizing: border-box;

}



.pstat-legend-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 10px 8px;

  border-bottom: 1px solid var(--black-5);

  margin-bottom: 8px;

  gap: 8px;

}



.pstat-leg-player {

  font-size: 0.65rem;

  font-weight: 800;

  letter-spacing: 0.6px;

  color: var(--text-muted);

  text-transform: uppercase;

}



.pstat-leg-metrics {

  display: grid;

  grid-template-columns: 28px 28px 28px 38px;

  gap: 5px;

  text-align: center;

  flex-shrink: 0;

}



.pstat-leg-metrics span {

  font-size: 0.65rem;

  font-weight: 800;

  color: var(--text-muted);

  letter-spacing: 0.5px;

}



.pstat-list {

  display: flex;

  flex-direction: column;

  gap: 6px;

  width: 100%;

  box-sizing: border-box;

}



.pstat-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  padding: 7px 10px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  border-radius: 9px;

  width: 100%;

  box-sizing: border-box;

  min-width: 0;

  transition: var(--transition);

}



.pstat-row:hover {

  background: rgba(245, 197, 24, 0.04);

  border-color: rgba(245, 197, 24, 0.3);

}



.pstat-left {

  display: flex;

  align-items: center;

  gap: 7px;

  min-width: 0;

  flex: 1;

  overflow: hidden;

}



.pstat-dorsal {

  font-size: 0.72rem;

  font-weight: 800;

  color: var(--text-muted);

  min-width: 22px;

  flex-shrink: 0;

}



.pstat-bio {

  display: flex;

  flex-direction: column;

  min-width: 0;

  flex: 1;

  overflow: hidden;

}



.pstat-name-line {

  display: flex;

  align-items: center;

  gap: 4px;

  min-width: 0;

  overflow: hidden;

}



.pstat-name {

  font-size: 0.82rem;

  font-weight: 800;

  color: var(--text);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  min-width: 0;

}



.pstat-cap-badge {

  font-size: 0.55rem;

  font-weight: 900;

  padding: 1px 4px;

  border-radius: 3px;

  background: rgba(245, 197, 24, 0.2);

  color: var(--gold);

  line-height: 1.1;

  flex-shrink: 0;

}



[data-theme="light"] .pstat-cap-badge {

  color: #b45309;

  background: rgba(245, 158, 11, 0.15);

}



.pstat-pos {

  font-size: 0.65rem;

  color: var(--text-muted);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.3px;

  line-height: 1.2;

}



.pstat-metrics {

  display: grid;

  grid-template-columns: 28px 28px 28px 38px;

  gap: 5px;

  align-items: center;

  flex-shrink: 0;

}



.pstat-box {

  height: 28px;

  border-radius: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--black-4);

}



.pstat-box.pj .pstat-val {

  font-size: 0.8rem;

  font-weight: 800;

  color: var(--text);

}



.pstat-box.gol .pstat-val {

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--text-muted);

}



.pstat-box.gol.is-green {

  background: rgba(22, 163, 74, 0.16);

  border: 1px solid rgba(22, 163, 74, 0.3);

}



.pstat-box.gol.is-green .pstat-val {

  color: #16a34a;

  font-weight: 900;

  font-family: var(--font-title);

  font-size: 0.9rem;

}



.pstat-box.ast .pstat-val {

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--text-muted);

}



.pstat-box.ast.is-blue {

  background: rgba(37, 99, 235, 0.16);

  border: 1px solid rgba(37, 99, 235, 0.3);

}



.pstat-box.ast.is-blue .pstat-val {

  color: #2563eb;

  font-weight: 800;

  font-size: 0.85rem;

}



.pstat-box.tar {

  background: transparent;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 2px;

}



.pstat-card-badge {

  font-size: 0.65rem;

  font-weight: 800;

  padding: 2px 4px;

  border-radius: 4px;

  line-height: 1;

}



.pstat-card-badge.yellow {

  background: rgba(245, 197, 24, 0.2);

  color: #ca8a04;

  border: 1px solid rgba(245, 197, 24, 0.35);

}



[data-theme="light"] .pstat-card-badge.yellow {

  color: #b45309;

}



.pstat-card-badge.red {

  background: rgba(239, 68, 68, 0.2);

  color: #ef4444;

  border: 1px solid rgba(239, 68, 68, 0.35);

}



.pstat-card-empty {

  font-size: 0.72rem;

  color: var(--text-muted);

}



/* Reglas móviles para asegurar ajuste 100% perfecto */

@media (max-width: 600px) {

  #section-estadisticas {

    padding: 12px 10px !important;

  }

  #section-estadisticas .card {

    padding: 14px 10px !important;

    margin-bottom: 12px !important;

  }

  #section-estadisticas .stats-card-header {

    margin-bottom: 12px;

    padding-bottom: 10px;

  }

  #section-estadisticas .stats-card-title {

    font-size: 0.95rem;

  }

  #section-estadisticas .stats-card-sub {

    font-size: 0.67rem;

  }

  #section-estadisticas .stats-grid {

    gap: 12px;

    grid-template-columns: 1fr !important;

  }

  .scorer-row {

    padding: 7px 8px;

    gap: 6px;

  }

  .scorer-avatar-badge {

    width: 26px;

    height: 26px;

    font-size: 0.68rem;

  }

  .scorer-rank {

    width: 22px;

    height: 22px;

    font-size: 0.72rem;

  }

  .scorer-name {

    font-size: 0.78rem;

  }

  .scorer-goals-num {

    font-size: 1.05rem;

  }

  .scorer-meta-row {

    font-size: 0.62rem;

    gap: 4px;

    margin-bottom: 3px;

  }

  .scorer-goals-prom {

    font-size: 0.56rem;

    padding: 1px 3px;

  }

  .scorers-filter-btn {

    padding: 3px 8px;

    font-size: 0.68rem;

  }

  .pstat-row {

    padding: 6px 8px;

    gap: 6px;

  }

  .pstat-leg-metrics,

  .pstat-metrics {

    grid-template-columns: 26px 26px 26px 34px;

    gap: 3px;

  }

  .pstat-box {

    height: 26px;

  }

  .pstat-box.pj .pstat-val,

  .pstat-box.gol .pstat-val,

  .pstat-box.ast .pstat-val {

    font-size: 0.76rem;

  }

  .pstat-name {

    font-size: 0.78rem;

  }

  .pstat-pos {

    font-size: 0.62rem;

  }

}



.stats-table {

  width: 100%;

  border-collapse: collapse;

  min-width: 0 !important;

}



.player-card-tag {

  display: inline-flex;

  align-items: center;

  gap: 3px;

  font-size: 0.72rem;

  font-weight: 800;

  padding: 1px 5px;

  border-radius: 4px;

}



.player-card-tag.yellow {

  background: rgba(245, 197, 24, 0.18);

  color: #ca8a04;

}



.player-card-tag.red {

  background: rgba(239, 68, 68, 0.18);

  color: #ef4444;

}



[data-theme="light"] .section-title,

[data-theme="light"] .card-title {

  color: #0f172a;

  font-family: 'Montserrat', 'Plus Jakarta Sans', -apple-system, sans-serif !important;

  font-weight: 800 !important;

  letter-spacing: -0.4px !important;

}









/* ══ NOTIFICACIONES & CONFIGURACIÓN ══ */

.notif-btn,

.settings-btn {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  padding: 0;

  border-radius: 50%;

  background: var(--black-3);

  border: 1px solid var(--glass-border);

  color: var(--text);

  cursor: pointer;

  transition: var(--transition);

  user-select: none;

}



.notif-btn:hover,

.settings-btn:hover {

  background: var(--gold);

  color: #0A0A0A;

  border-color: var(--gold);

  transform: translateY(-1px);

}



.notif-badge {

  position: absolute;

  top: -2px;

  right: -2px;

  background: #ef4444;

  color: #ffffff;

  font-size: 0.68rem;

  font-weight: 800;

  min-width: 17px;

  height: 17px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 2px solid var(--black-2);

  line-height: 1;

  padding: 0 3px;

}



.notif-list {

  display: flex;

  flex-direction: column;

  gap: 10px;

  max-height: 340px;

  overflow-y: auto;

}



.notif-item {

  display: flex;

  gap: 12px;

  background: var(--black-3);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-sm);

  padding: 12px;

}



.notif-item.asistencia {
  border-left: 4px solid #22c55e;
}

.notif-item.system-update {
  border-left: 4px solid var(--gold);
  background: rgba(245, 197, 24, 0.08);
  border: 1px solid rgba(245, 197, 24, 0.28);
}

.notif-item.match {

  border-left: 4px solid var(--gold);

}



.notif-item.cumple {

  border-left: 4px solid #ec4899;

}



.notif-item.news {

  border-left: 4px solid var(--blue);

}



.notif-item-icon {

  font-size: 1.4rem;

  flex-shrink: 0;

}



.notif-item-content {

  flex: 1;

}



.notif-item-title {

  font-weight: 700;

  font-size: 0.88rem;

  color: var(--text);

  margin-bottom: 2px;

}



.notif-item-desc {

  font-size: 0.82rem;

  color: var(--text-muted);

  line-height: 1.35;

}



.notif-item-date {

  font-size: 0.72rem;

  color: var(--text-dim);

  margin-top: 4px;

}





/* ══ VISTA MEJORADA DE PRÓXIMOS PARTIDOS (COMPACTA) ══ */

.upcoming-match-card {

  background: var(--black-2);

  border: 1px solid var(--glass-border);

  border-radius: 12px;

  padding: 12px 14px;

  margin-bottom: 10px;

  box-shadow: var(--shadow-sm);

  transition: var(--transition);

  position: relative;

  overflow: hidden;

}



.upcoming-match-card:hover {

  border-color: rgba(245, 197, 24, 0.35);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);

}



.umatch-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 8px;

  padding-bottom: 6px;

  border-bottom: 1px solid var(--black-5);

}



.umatch-tags {

  display: flex;

  align-items: center;

  gap: 6px;

}



.umatch-fase-tag {

  font-size: 0.7rem;

  color: var(--text-muted);

  background: var(--black-4);

  padding: 2px 7px;

  border-radius: 10px;

  font-weight: 600;

}



.umatch-countdown-badge {

  background: rgba(245, 197, 24, 0.12);

  color: var(--gold);

  border: 1px solid rgba(245, 197, 24, 0.28);

  font-family: var(--font-title);

  font-size: 0.72rem;

  padding: 2px 8px;

  border-radius: 16px;

  letter-spacing: 0.5px;

}



.umatch-countdown-badge.today {

  background: rgba(239, 68, 68, 0.15);

  color: #ef4444;

  border-color: rgba(239, 68, 68, 0.35);

  animation: livePulse 1.5s infinite;

}



.umatch-teams {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 8px;

  padding: 2px 0;

}



.umatch-team {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  flex: 1;

  text-align: center;

  min-width: 0;

}



.umatch-crest {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid var(--gold);

  box-shadow: var(--shadow-sm);

}



.umatch-rival-avatar {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: var(--black-4);

  color: var(--text-muted);

  border: 1px solid var(--glass-border);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-title);

  font-size: 1.05rem;

  font-weight: 700;

}



.umatch-team-name {

  font-family: var(--font-title);

  font-size: 0.88rem;

  font-weight: 700;

  color: var(--text);

  letter-spacing: 0.3px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 100%;

}



.umatch-vs-box {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1px;

  padding: 0 10px;

  flex-shrink: 0;

}



.umatch-vs-text {

  font-family: var(--font-title);

  font-size: 1.2rem;

  color: var(--gold);

  line-height: 1;

}



.umatch-time {

  font-size: 0.74rem;

  color: var(--text-muted);

  font-weight: 600;

  white-space: nowrap;

}



.umatch-info-row {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  background: var(--black-3);

  padding: 5px 10px;

  border-radius: var(--radius-sm);

  font-size: 0.76rem;

  color: var(--text-muted);

  margin-bottom: 8px;

  flex-wrap: wrap;

}



.umatch-info-item {

  display: flex;

  align-items: center;

  gap: 5px;

  white-space: nowrap;

}



.umatch-convocatoria-bar {

  display: flex;

  justify-content: space-around;

  align-items: center;

  background: rgba(245, 197, 24, 0.04);

  border: 1px dashed rgba(245, 197, 24, 0.2);

  padding: 5px 10px;

  border-radius: var(--radius-sm);

  margin-bottom: 8px;

}



.conv-tag-inline {

  display: flex;

  align-items: center;

  gap: 5px;

  font-size: 0.76rem;

}



.conv-tag-lbl {

  color: var(--text-muted);

  font-weight: 500;

}



.conv-tag-val {

  font-size: 0.82rem;

  font-weight: 800;

}



.conv-tag-val.green { color: var(--green); }

.conv-tag-val.gold { color: var(--gold); }



.umatch-actions {

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-top: 6px;

  padding-top: 6px;

  border-top: 1px solid var(--black-5);

  width: 100%;

  box-sizing: border-box;

}



.btn-play-match {

  width: 100%;

  justify-content: center;

  font-weight: 800;

  font-size: 0.8rem;

  padding: 7px 12px;

  border-radius: 7px;

  gap: 6px;

  transition: all 0.2s ease;

}



.btn-umatch-future {

  background: rgba(245, 197, 24, 0.08) !important;

  border: 1px solid rgba(245, 197, 24, 0.3) !important;

  color: var(--gold) !important;

}



.btn-umatch-future:hover {

  background: rgba(245, 197, 24, 0.18) !important;

}



.btn-umatch-today {

  background: linear-gradient(135deg, var(--gold) 0%, #d4a017 100%) !important;

  color: #0b0b0b !important;

  border: 1px solid var(--gold) !important;

}



.btn-umatch-live {

  background: #ef4444 !important;

  border-color: #dc2626 !important;

  color: #ffffff !important;

  animation: livePulse 1.5s infinite;

}



@media (max-width: 600px) {

  .upcoming-match-card {

    padding: 10px 12px;

  }

  .umatch-crest, .umatch-rival-avatar {

    width: 40px; height: 40px; font-size: 0.95rem;

  }

  .umatch-team-name {

    font-size: 0.82rem;

  }

  .umatch-vs-text {

    font-size: 1.1rem;

  }

  .btn-play-match {

    padding: 6px 10px;

    font-size: 0.78rem;

  }

}



/* Modal Opciones del Partido */

.match-opt-header {

  background: var(--black-3);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-md);

  padding: 14px 16px;

  text-align: center;

  margin-bottom: 16px;

}



.match-options-list {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.match-opt-btn {

  display: flex;

  align-items: center;

  gap: 14px;

  width: 100%;

  padding: 12px 14px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-md);

  color: var(--text);

  text-align: left;

  cursor: pointer;

  transition: var(--transition);

}



.match-opt-btn:hover, .match-opt-btn:active {

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.2);

  transform: translateY(-1px);

}



.match-opt-btn.gold {

  background: rgba(245, 197, 24, 0.1);

  border-color: rgba(245, 197, 24, 0.4);

}



.match-opt-btn.gold:hover {

  background: rgba(245, 197, 24, 0.18);

  border-color: var(--gold);

}



.match-opt-btn.blue {

  background: rgba(59, 130, 246, 0.1);

  border-color: rgba(59, 130, 246, 0.4);

}



.match-opt-btn.blue:hover {

  background: rgba(59, 130, 246, 0.18);

  border-color: #3b82f6;

}



.match-opt-btn.red {

  background: rgba(239, 68, 68, 0.08);

  border-color: rgba(239, 68, 68, 0.3);

  color: #ef4444;

}



.match-opt-btn.red:hover {

  background: rgba(239, 68, 68, 0.16);

  border-color: #ef4444;

}



.match-opt-icon {

  font-size: 1.5rem;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.05);

}



.match-opt-text {

  display: flex;

  flex-direction: column;

  gap: 2px;

  flex: 1;

}



.match-opt-text strong {

  font-size: 1.05rem;

  color: var(--text);

}



.match-opt-btn.red .match-opt-text strong {

  color: #ef4444;

}



.match-opt-text span {

  font-size: 0.78rem;

  color: var(--text-muted);

}



/* ══════════════════════════════════════════════

   SECCIÓN: TESORERÍA & CAJA

   ══════════════════════════════════════════════ */

.tesoreria-cuotas-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 10px;

  width: 100%;

  box-sizing: border-box;

}



@media (max-width: 600px) {

  .tesoreria-cuotas-grid {

    grid-template-columns: 1fr;

    gap: 8px;

  }

}



.cuota-card {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  border-radius: 10px;

  padding: 10px 12px;

  transition: var(--transition);

}



.cuota-card:hover {

  border-color: rgba(245, 197, 24, 0.3);

}



.cuota-card.is-paid {

  border-left: 4px solid #16a34a;

}



.cuota-card.is-unpaid {

  border-left: 4px solid #ef4444;

}



.cuota-player-info {

  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;

  flex: 1;

}



.cuota-player-dorsal {

  width: 26px;

  height: 26px;

  border-radius: 6px;

  background: var(--black-4);

  color: var(--text-muted);

  font-size: 0.75rem;

  font-weight: 800;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.cuota-player-name-box {

  display: flex;

  flex-direction: column;

  min-width: 0;

}



.cuota-player-name {

  font-size: 0.84rem;

  font-weight: 800;

  color: var(--text);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.cuota-player-sub {

  font-size: 0.65rem;

  color: var(--text-muted);

  text-transform: uppercase;

  font-weight: 600;

}



.cuota-actions {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-shrink: 0;

}



.cuota-status-btn {

  padding: 6px 12px;

  border-radius: 6px;

  font-size: 0.74rem;

  font-weight: 800;

  cursor: pointer;

  border: none;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  transition: var(--transition);

}



.cuota-status-btn.paid {

  background: rgba(34, 197, 94, 0.18);

  color: #16a34a;

  border: 1px solid rgba(34, 197, 94, 0.35);

}



.cuota-status-btn.paid:hover {

  background: rgba(34, 197, 94, 0.28);

}



.cuota-status-btn.unpaid {

  background: rgba(239, 68, 68, 0.18);

  color: #ef4444;

  border: 1px solid rgba(239, 68, 68, 0.35);

}



.cuota-status-btn.unpaid:hover {

  background: rgba(239, 68, 68, 0.28);

}



.cuota-wa-btn {

  width: 30px;

  height: 30px;

  border-radius: 6px;

  background: rgba(37, 211, 102, 0.15);

  color: #25d366;

  border: 1px solid rgba(37, 211, 102, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: var(--transition);

}



.cuota-wa-btn:hover {

  background: #25d366;

  color: #fff;

}



.cuota-filter-btn {

  padding: 5px 12px;

  border-radius: 20px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  color: var(--text-muted);

  font-size: 0.74rem;

  font-weight: 700;

  cursor: pointer;

  transition: var(--transition);

  white-space: nowrap;

}



.cuota-filter-btn.active {

  background: var(--gold);

  color: #000;

  border-color: var(--gold);

  font-weight: 800;

}



[data-theme="light"] .cuota-filter-btn.active {

  background: #b45309;

  color: #fff;

  border-color: #b45309;

}



/* Lista de movimientos */

/* ══════════════════════════════════════════
   PANEL DE FILTROS DE ESTADÍSTICAS (RESPONSIVE MOBILE)
   ══════════════════════════════════════════ */
.stats-filter-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.stats-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.stats-filter-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.stats-filter-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(217, 119, 6, 0.12);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

.stats-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stats-filter-group label {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.stats-filter-select {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--glass-border);
  color: #fff;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.stats-filter-select:focus {
  border-color: var(--gold);
  outline: none;
}

.stats-quick-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0 2px 0;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.stats-quick-bar::-webkit-scrollbar {
  display: none;
}

.stats-quick-bar .cuota-filter-btn {
  padding: 4px 10px;
  font-size: 0.70rem;
  border-radius: 14px;
}

/* Ficha Jugador: Selector de Rendimiento */
.fjugador-stat-select-wrap {
  width: 100%;
  margin-bottom: 10px;
}

.fjugador-stat-select {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--gold);
  color: #fff;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.fjugador-stat-select:focus {
  outline: none;
  border-color: #f59e0b;
}


.mov-list-container {

  display: flex;

  flex-direction: column;

  gap: 8px;

  width: 100%;

}



.mov-item-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: 10px 12px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  border-radius: 10px;

  transition: var(--transition);

}



.mov-item-left {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

  flex: 1;

}



.mov-icon-box {

  width: 32px;

  height: 32px;

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.mov-icon-box.income {

  background: rgba(34, 197, 94, 0.16);

  color: #16a34a;

}



.mov-icon-box.expense {

  background: rgba(239, 68, 68, 0.16);

  color: #ef4444;

}



.mov-info-box {

  display: flex;

  flex-direction: column;

  min-width: 0;

}



.mov-desc-title {

  font-size: 0.84rem;

  font-weight: 800;

  color: var(--text);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.mov-date-sub {

  font-size: 0.68rem;

  color: var(--text-muted);

}



.mov-item-right {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

}



.mov-amount-tag {

  font-family: var(--font-title);

  font-size: 1.1rem;

  font-weight: 900;

  line-height: 1;

}



.mov-amount-tag.income {

  color: #16a34a;

}



.mov-amount-tag.expense {

  color: #ef4444;

}



.mov-del-btn {

  background: transparent;

  border: none;

  color: var(--text-muted);

  cursor: pointer;

  padding: 4px;

  border-radius: 4px;

  transition: var(--transition);

  display: flex;

  align-items: center;

  justify-content: center;

}



.mov-del-btn:hover {

  color: #ef4444;

  background: rgba(239, 68, 68, 0.12);

}



.quick-category-pills {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 4px;

}



.qcat-btn {

  padding: 4px 10px;

  font-size: 0.72rem;

  font-weight: 700;

  border-radius: 6px;

  background: var(--black-4);

  border: 1px solid var(--black-5);

  color: var(--text);

  cursor: pointer;

  transition: var(--transition);

}



.qcat-btn:hover {

  border-color: var(--gold);

  color: var(--gold);

}





/* ══ COLECTAS & EVENTOS (3er Tiempo, Campeonatos, Compras) ══ */

.tesoreria-colectas-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));

  gap: 12px;

  width: 100%;

  box-sizing: border-box;

}



@media (max-width: 600px) {

  .tesoreria-colectas-grid {

    grid-template-columns: 1fr;

    gap: 10px;

  }

}



.colecta-filter-btn {

  padding: 5px 12px;

  border-radius: 20px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  color: var(--text-muted);

  font-size: 0.74rem;

  font-weight: 700;

  cursor: pointer;

  transition: var(--transition);

  white-space: nowrap;

}



.colecta-filter-btn.active {

  background: var(--gold);

  color: #000;

  border-color: var(--gold);

  font-weight: 800;

}



[data-theme="light"] .colecta-filter-btn.active {

  background: #b45309;

  color: #fff;

  border-color: #b45309;

}



.colecta-card {

  background: var(--black-3);

  border: 1px solid var(--black-5);

  border-radius: 12px;

  padding: 13px 14px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  transition: var(--transition);

  position: relative;

  overflow: hidden;

}



.colecta-card:hover {

  border-color: rgba(245, 197, 24, 0.4);

  transform: translateY(-2px);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);

}



.colecta-card.is-closed {

  opacity: 0.8;

  border-color: var(--black-5);

}



.colecta-top-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

}



.colecta-cat-tag {

  font-size: 0.68rem;

  font-weight: 800;

  padding: 3px 8px;

  border-radius: 6px;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  letter-spacing: 0.3px;

  text-transform: uppercase;

}



.colecta-cat-tag.tercertiempo {

  background: rgba(245, 197, 24, 0.16);

  color: var(--gold);

  border: 1px solid rgba(245, 197, 24, 0.3);

}



[data-theme="light"] .colecta-cat-tag.tercertiempo {

  color: #b45309;

}



.colecta-cat-tag.campeonato {

  background: rgba(59, 130, 246, 0.16);

  color: #60a5fa;

  border: 1px solid rgba(59, 130, 246, 0.3);

}



.colecta-cat-tag.compra {

  background: rgba(168, 85, 247, 0.16);

  color: #c084fc;

  border: 1px solid rgba(168, 85, 247, 0.3);

}



.colecta-cat-tag.otro {

  background: rgba(255, 255, 255, 0.08);

  color: var(--text-muted);

  border: 1px solid var(--black-5);

}



.colecta-status-tag {

  font-size: 0.65rem;

  font-weight: 800;

  padding: 2px 7px;

  border-radius: 12px;

  letter-spacing: 0.3px;

}



.colecta-status-tag.active {

  background: rgba(34, 197, 94, 0.18);

  color: #16a34a;

  border: 1px solid rgba(34, 197, 94, 0.3);

}



.colecta-status-tag.closed {

  background: var(--black-4);

  color: var(--text-muted);

}



.colecta-title {

  font-family: var(--font-title);

  font-size: 1.12rem;

  font-weight: 900;

  color: var(--text);

  line-height: 1.2;

  margin: 0;

}



.colecta-meta-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  font-size: 0.72rem;

  color: var(--text-muted);

  flex-wrap: wrap;

}



.colecta-kpi-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 6px;

  background: var(--black-2);

  padding: 8px;

  border-radius: 8px;

  border: 1px solid var(--black-5);

}



.colecta-kpi-box {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  min-width: 0;

}



.colecta-kpi-lbl {

  font-size: 0.6rem;

  font-weight: 800;

  text-transform: uppercase;

  color: var(--text-muted);

  letter-spacing: 0.3px;

}



.colecta-kpi-val {

  font-family: var(--font-title);

  font-size: 0.98rem;

  font-weight: 900;

  line-height: 1.2;

  margin-top: 2px;

}



.colecta-kpi-val.green { color: #16a34a; }

.colecta-kpi-val.red { color: #ef4444; }

.colecta-kpi-val.gold { color: var(--gold); }

[data-theme="light"] .colecta-kpi-val.gold { color: #b45309; }



.colecta-kpi-sub {

  font-size: 0.58rem;

  color: var(--text-muted);

  margin-top: 1px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 100%;

}



.colecta-prog-bar {

  width: 100%;

  height: 6px;

  background: var(--black-4);

  border-radius: 3px;

  overflow: hidden;

  position: relative;

}



.colecta-prog-fill {

  height: 100%;

  background: linear-gradient(90deg, #16a34a, #22c55e);

  border-radius: 3px;

  transition: width 0.35s ease;

}



.colecta-actions-row {

  display: flex;

  align-items: center;

  gap: 6px;

  margin-top: 2px;

}



.colecta-actions-row .btn {

  flex: 1;

}



.colecta-wa-icon-btn {

  width: 32px;

  height: 32px;

  border-radius: 7px;

  background: rgba(37, 211, 102, 0.15);

  color: #25d366;

  border: 1px solid rgba(37, 211, 102, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  flex-shrink: 0;

  transition: var(--transition);

}



.colecta-wa-icon-btn:hover {

  background: #25d366;

  color: #fff;

}



/* Selector de tipo en modal crear colecta */

.colecta-type-selector {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 6px;

  margin-bottom: 6px;

}



@media (max-width: 480px) {

  .colecta-type-selector {

    grid-template-columns: repeat(2, 1fr);

  }

}



.ctype-btn {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  padding: 8px 6px;

  border-radius: 8px;

  background: var(--black-4);

  border: 1px solid var(--black-5);

  color: var(--text-muted);

  cursor: pointer;

  transition: var(--transition);

}



.ctype-btn.active {

  background: rgba(245, 197, 24, 0.15);

  border-color: var(--gold);

  color: var(--gold);

  font-weight: 800;

}



[data-theme="light"] .ctype-btn.active {

  color: #b45309;

  border-color: #b45309;

}



.ctype-icon { font-size: 1.25rem; line-height: 1; }

.ctype-lbl { font-size: 0.68rem; font-weight: 700; white-space: nowrap; }



/* Selector de jugadores para nueva colecta */

.colecta-players-picker {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

  gap: 6px;

  max-height: 160px;

  overflow-y: auto;

  padding: 8px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  border-radius: 8px;

}



.col-player-check {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 0.74rem;

  color: var(--text);

  cursor: pointer;

  padding: 4px;

  border-radius: 4px;

  user-select: none;

}



.col-player-check:hover {

  background: var(--black-4);

}



.col-player-check input[type="checkbox"] {

  accent-color: var(--gold);

  cursor: pointer;

}



/* Modal Detalle Colecta */

.col-summary-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  margin-bottom: 12px;

}



.col-sum-card {

  padding: 8px 10px;

  border-radius: 8px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



.col-sum-card.green { border-color: rgba(34, 197, 94, 0.3); }

.col-sum-card.red { border-color: rgba(239, 68, 68, 0.3); }

.col-sum-card.gold { border-color: rgba(245, 197, 24, 0.3); }



.col-sum-lbl {

  font-size: 0.6rem;

  font-weight: 900;

  letter-spacing: 0.4px;

  color: var(--text-muted);

}



.col-sum-val {

  font-family: var(--font-title);

  font-size: 1.15rem;

  font-weight: 900;

  line-height: 1.1;

  margin-top: 2px;

}



.col-sum-card.green .col-sum-val { color: #16a34a; }

.col-sum-card.red .col-sum-val { color: #ef4444; }

.col-sum-card.gold .col-sum-val { color: var(--gold); }

[data-theme="light"] .col-sum-card.gold .col-sum-val { color: #b45309; }



.col-sum-sub {

  font-size: 0.62rem;

  color: var(--text-muted);

  margin-top: 1px;

}



.col-inner-tabs {

  display: flex;

  gap: 6px;

  border-bottom: 1px solid var(--black-5);

  padding-bottom: 6px;

  margin-bottom: 12px;

}



.col-itab {

  padding: 6px 14px;

  border-radius: 6px;

  background: transparent;

  border: none;

  color: var(--text-muted);

  font-size: 0.76rem;

  font-weight: 700;

  cursor: pointer;

  transition: var(--transition);

}



.col-itab.active {

  background: var(--black-4);

  color: var(--gold);

  font-weight: 800;

}



[data-theme="light"] .col-itab.active {

  color: #b45309;

}



.dtl-players-list {

  display: flex;

  flex-direction: column;

  gap: 6px;

  max-height: 240px;

  overflow-y: auto;

  padding-right: 2px;

}



.dtl-player-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  padding: 7px 10px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  border-radius: 8px;

  transition: var(--transition);

}



.dtl-player-row.is-paid {

  border-left: 3.5px solid #16a34a;

}



.dtl-player-row.is-unpaid {

  border-left: 3.5px solid #ef4444;

}



.dtl-pname {

  font-size: 0.82rem;

  font-weight: 800;

  color: var(--text);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.dtl-actions {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-shrink: 0;

}



.dtl-status-toggle {

  padding: 5px 10px;

  border-radius: 6px;

  font-size: 0.7rem;

  font-weight: 800;

  cursor: pointer;

  border: none;

  transition: var(--transition);

  white-space: nowrap;

}



.dtl-status-toggle.paid {

  background: rgba(34, 197, 94, 0.2);

  color: #16a34a;

  border: 1px solid rgba(34, 197, 94, 0.35);

}



.dtl-status-toggle.paid:hover {

  background: rgba(34, 197, 94, 0.3);

}



.dtl-status-toggle.unpaid {

  background: rgba(239, 68, 68, 0.2);

  color: #ef4444;

  border: 1px solid rgba(239, 68, 68, 0.35);

}



.dtl-status-toggle.unpaid:hover {

  background: rgba(239, 68, 68, 0.3);

}



.gasto-form-row {

  display: flex;

  gap: 6px;

  margin-bottom: 10px;

  align-items: center;

}



.dtl-gastos-list {

  display: flex;

  flex-direction: column;

  gap: 6px;

  max-height: 200px;

  overflow-y: auto;

}



.dtl-gasto-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  padding: 7px 10px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  border-radius: 8px;

}



.dtl-gasto-desc {

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--text);

}



.dtl-gasto-monto {

  font-family: var(--font-title);

  font-size: 0.95rem;

  font-weight: 900;

  color: #ef4444;

}



/* ══════════════════════════════════════════════

   SECCIÓN: CUMPLEAÑOS - AGENDA SIMPLIFICADA

   ══════════════════════════════════════════════ */

.stats-header-sub-tag {

  font-size: 0.72rem;

  font-weight: 800;

  padding: 3px 8px;

  border-radius: 12px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  color: var(--text-muted);

}



.cumple-today-card {

  padding: 12px 14px;

  border-radius: 12px;

  background: linear-gradient(135deg, rgba(245, 197, 24, 0.22), rgba(217, 119, 6, 0.12));

  border: 1.5px solid var(--gold);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 12px;

  box-shadow: 0 4px 16px rgba(245, 197, 24, 0.2);

  animation: livePulse 2s infinite;

}



.cumple-today-left {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

  flex: 1;

}



.cumple-today-cake {

  font-size: 1.6rem;

  line-height: 1;

  flex-shrink: 0;

}



.cumple-today-text {

  display: flex;

  flex-direction: column;

  min-width: 0;

}



.cumple-today-tag {

  font-size: 0.65rem;

  font-weight: 900;

  letter-spacing: 0.6px;

  text-transform: uppercase;

  color: var(--gold);

}



[data-theme="light"] .cumple-today-tag {

  color: #b45309;

}



.cumple-today-name {

  font-family: var(--font-title);

  font-size: 1.15rem;

  font-weight: 900;

  color: var(--text);

  line-height: 1.1;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.cumple-today-sub {

  font-size: 0.72rem;

  color: var(--text-muted);

}



/* Timeline vertical de cumpleaños */

.cumple-timeline-list {

  display: flex;

  flex-direction: column;

  gap: 6px;

  width: 100%;

  box-sizing: border-box;

}



.cumple-month-divider {

  display: flex;

  align-items: center;

  gap: 8px;

  margin: 10px 0 4px;

  padding: 0 4px;

}



.cumple-month-divider:first-child {

  margin-top: 2px;

}



.cmd-line {

  flex: 1;

  height: 1px;

  background: var(--black-5);

}



.cmd-text {

  font-size: 0.68rem;

  font-weight: 900;

  letter-spacing: 0.8px;

  text-transform: uppercase;

  color: var(--gold);

  white-space: nowrap;

}



[data-theme="light"] .cmd-text {

  color: #b45309;

}



.cumple-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--card-bg, #16181d);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: var(--transition);
  min-width: 0;
  box-sizing: border-box;
}

.cumple-row:hover {
  border-color: rgba(245, 197, 24, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

.cumple-row.is-today {
  border-color: var(--gold, #f5c518);
  background: rgba(245, 197, 24, 0.08);
  box-shadow: 0 0 12px rgba(245, 197, 24, 0.15);
}

.cumple-row.is-soon {
  border-left: 3.5px solid var(--gold, #f5c518);
}

.cumple-date-badge {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(245, 197, 24, 0.08);
  border: 1px solid rgba(245, 197, 24, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.cumple-date-badge.today {
  background: var(--gold, #f5c518);
  border-color: var(--gold, #f5c518);
  color: #000;
  box-shadow: 0 0 10px rgba(245, 197, 24, 0.4);
}

.cumple-date-badge.today .cd-day,
.cumple-date-badge.today .cd-month {
  color: #000 !important;
}

.cumple-date-badge.soon {
  background: rgba(245, 197, 24, 0.14);
  border-color: rgba(245, 197, 24, 0.45);
}

.cd-day {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--gold, #f5c518); /* Amarillo */
  line-height: 1;
}

.cd-month {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff; /* Blanco */
  margin-top: 2px;
  letter-spacing: 0.5px;
}

.cumple-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.cumple-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.cumple-dorsal {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold, #f5c518);
  background: rgba(245, 197, 24, 0.12);
  border: 1px solid rgba(245, 197, 24, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1;
}

.cumple-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}

.cumple-apodo {
  font-size: 0.82rem;
  font-weight: 700;
  font-style: italic;
  color: var(--gold, #f5c518);
}

.cumple-sub-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.cumple-age-turn {
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.2px;
}

.cumple-age-highlight {
  color: var(--gold, #f5c518);
  font-weight: 800;
}

.cumple-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cumple-countdown-pill {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.cumple-countdown-pill.today {
  background: var(--gold, #f5c518);
  color: #000;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(245, 197, 24, 0.35);
}

.cumple-countdown-pill.soon {
  background: rgba(245, 197, 24, 0.16);
  color: var(--gold, #f5c518);
  border: 1px solid rgba(245, 197, 24, 0.4);
}

.cumple-countdown-pill.normal {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cumple-actions {

  display: flex;

  align-items: center;

  gap: 4px;

}



.cumple-action-btn {

  width: 28px;

  height: 28px;

  border-radius: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--black-4);

  color: var(--text-muted);

  border: 1px solid var(--black-5);

  cursor: pointer;

  transition: var(--transition);

}



.cumple-action-btn:hover {

  color: var(--text);

  border-color: var(--text);

}



.cumple-action-btn.wa {

  background: rgba(37, 211, 102, 0.15);

  color: #25d366;

  border-color: rgba(37, 211, 102, 0.3);

}



.cumple-action-btn.wa:hover {

  background: #25d366;

  color: #fff;

}



/* Sección de jugadores sin fecha */

.cumple-sin-fecha-box {

  margin-top: 14px;

  padding: 10px 12px;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.02);

  border: 1px dashed var(--black-5);

}



.cumple-sin-fecha-title {

  font-size: 0.72rem;

  font-weight: 800;

  color: var(--text-muted);

  display: flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 8px;

}



.cumple-sin-fecha-chips {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



.cumple-missing-chip {

  padding: 4px 8px;

  border-radius: 6px;

  font-size: 0.72rem;

  font-weight: 700;

  background: var(--black-4);

  color: var(--text);

  border: 1px solid var(--black-5);

  cursor: pointer;

  transition: var(--transition);

  display: inline-flex;

  align-items: center;

  gap: 4px;

}



.cumple-missing-chip:hover {

  border-color: var(--gold);

  color: var(--gold);

}





/* ══ MODO ESPECTADOR VS MODO ADMINISTRADOR ══ */

body:not(.role-admin) .admin-only,
body.role-viewer .admin-only,
body.role-jugador .admin-only,
body.role-tesorero .admin-only {
  display: none !important;
}



.role-toggle-btn {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding: 5px 10px;

  border-radius: 20px;

  background: var(--black-3);

  border: 1px solid var(--black-5);

  color: var(--text-muted);

  font-size: 0.74rem;

  font-weight: 700;

  cursor: pointer;

  transition: var(--transition);

  white-space: nowrap;

}



.role-toggle-btn:hover {

  border-color: var(--gold);

  color: var(--text);

}



.role-toggle-btn.admin {

  background: rgba(245, 197, 24, 0.16);

  border-color: var(--gold);

  color: var(--gold);

  font-weight: 800;

}



[data-theme="light"] .role-toggle-btn.admin {

  background: rgba(180, 83, 9, 0.12);

  border-color: #b45309;

  color: #b45309;

}







/* ── BARRA DEDICADA DEL MARCADOR EN VIVO (Debajo de la luna y notificaciones) ── */

.topbar-live-bar {

  width: 100%;

  position: sticky;

  top: var(--topbar-h);

  z-index: 46;

  box-sizing: border-box;

  background: transparent;

}



.topbar-live-bar:empty {

  display: none !important;

}



.topbar-live-bar .live-match-bug {

  width: 100%;

  height: auto !important;

  min-height: 52px;

  display: flex !important;

  flex-direction: column !important;

  align-items: stretch !important;

  justify-content: center !important;

  gap: 4px !important;

  padding: 0 16px !important;

  background: linear-gradient(90deg, #090e1a 0%, #141e33 50%, #090e1a 100%) !important;

  border-top: 1px solid rgba(245, 197, 24, 0.25) !important;

  border-bottom: 2px solid var(--gold) !important;

  border-left: none !important;

  border-right: none !important;

  border-radius: 0 !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);

  cursor: pointer;

  box-sizing: border-box;

  animation: slideDownBug 0.25s ease-out;

}



[data-theme="light"] .topbar-live-bar .live-match-bug {

  background: linear-gradient(90deg, #f8fafc 0%, #edf2f7 50%, #f8fafc 100%) !important;

  border-top: 1px solid rgba(202, 138, 4, 0.25) !important;

  border-bottom: 2px solid #ca8a04 !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

}



.bug-live-pill {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  background: rgba(239, 68, 68, 0.15);

  border: 1px solid rgba(239, 68, 68, 0.4);

  padding: 2px 7px;

  border-radius: 999px;

  font-size: 0.65rem;

  font-weight: 800;

  color: #ef4444;

  letter-spacing: 0.5px;

  flex-shrink: 0;

}



.bug-live-txt {

  line-height: 1;

}



@media (max-width: 480px) {

  .topbar-live-bar .live-match-bug {

    padding: 6px 10px !important;

    height: auto !important;

    min-height: 52px;

  }

  .bug-team-name.bug-rival {

    max-width: none !important;

  }

}







/* ══════════════════════════════════════════════════════════════

   ADAPTACIÓN DE TEMAS: MODO CLARO & MODO OSCURO PARA EL MARCADOR

   ══════════════════════════════════════════════════════════════ */



/* ── 1. BARRA DEDICADA DEL MARCADOR EN VIVO ── */



/* Modo Oscuro (Por defecto y [data-theme="dark"]) */

:root .topbar-live-bar .live-match-bug,

[data-theme="dark"] .topbar-live-bar .live-match-bug {

  background: linear-gradient(90deg, #090e1a 0%, #141e33 50%, #090e1a 100%) !important;

  border-top: 1px solid rgba(245, 197, 24, 0.25) !important;

  border-bottom: 2px solid var(--gold) !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;

}



:root .topbar-live-bar .bug-live-pill,

[data-theme="dark"] .topbar-live-bar .bug-live-pill {

  background: rgba(239, 68, 68, 0.18) !important;

  border: 1px solid rgba(239, 68, 68, 0.45) !important;

  color: #ef4444 !important;

}



:root .topbar-live-bar .bug-team-name.bug-local,

[data-theme="dark"] .topbar-live-bar .bug-team-name.bug-local {

  color: var(--gold) !important;

}



:root .topbar-live-bar .bug-team-name.bug-rival,

[data-theme="dark"] .topbar-live-bar .bug-team-name.bug-rival {

  color: #f8fafc !important;

}



:root .topbar-live-bar .bug-score-badge,

[data-theme="dark"] .topbar-live-bar .bug-score-badge {

  background: rgba(255, 255, 255, 0.12) !important;

  border: 1px solid rgba(255, 255, 255, 0.22) !important;

  color: #ffffff !important;

}



:root .topbar-live-bar .bug-score-colon,

[data-theme="dark"] .topbar-live-bar .bug-score-colon {

  color: rgba(255, 255, 255, 0.6) !important;

}



:root .topbar-live-bar .bug-timer,

[data-theme="dark"] .topbar-live-bar .bug-timer {

  background: rgba(245, 197, 24, 0.12) !important;

  border: 1px solid rgba(245, 197, 24, 0.4) !important;

  color: var(--gold) !important;

}



/* Modo Claro ([data-theme="light"]) */

[data-theme="light"] .topbar-live-bar .live-match-bug {

  background: linear-gradient(90deg, #ffffff 0%, #f1f5f9 50%, #ffffff 100%) !important;

  border-top: 1px solid #e2e8f0 !important;

  border-bottom: 2px solid #d97706 !important;

  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;

}



[data-theme="light"] .topbar-live-bar .bug-live-pill {

  background: #fee2e2 !important;

  border: 1px solid #fca5a5 !important;

  color: #dc2626 !important;

}



[data-theme="light"] .topbar-live-bar .bug-team-name.bug-local {

  color: #b45309 !important;

  font-weight: 900 !important;

}



[data-theme="light"] .topbar-live-bar .bug-team-name.bug-rival {

  color: #0f172a !important;

  font-weight: 800 !important;

}



[data-theme="light"] .topbar-live-bar .bug-score-badge {

  background: #0f172a !important;

  border: 1px solid #1e293b !important;

  color: #ffffff !important;

}



[data-theme="light"] .topbar-live-bar .bug-score-colon {

  color: #94a3b8 !important;

}



[data-theme="light"] .topbar-live-bar .bug-timer {

  background: #fef3c7 !important;

  border: 1px solid #fcd34d !important;

  color: #92400e !important;

}





/* ── MODALES EN MODO CLARO (TODOS LOS MODALES) ── */

[data-theme="light"] .modal {

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14) !important;

}



[data-theme="light"] .modal-header,

[data-theme="light"] .live-modal-header {

  background: #ffffff !important;

  border-bottom: 1px solid #e2e8f0 !important;

}



[data-theme="light"] .modal-header h3,

[data-theme="light"] .modal-header h3 span,

[data-theme="light"] .modal-header h3 strong,

[data-theme="light"] .live-modal-header h3,

[data-theme="light"] .live-modal-header .live-title-text,

[data-theme="light"] .modal-header h3.live-title-text {

  color: #0f172a !important;

  letter-spacing: -0.2px !important;

}



[data-theme="light"] .modal-close {

  background: #f1f5f9 !important;

  color: #64748b !important;

}



[data-theme="light"] .modal-close:hover {

  background: #fee2e2 !important;

  color: #ef4444 !important;

}



[data-theme="light"] .modal-footer {

  background: #f8fafc !important;

  border-top: 1px solid #e2e8f0 !important;

}



/* Convocatoria en modo claro */

[data-theme="light"] .convocatoria-legend-bar {

  color: #64748b !important;

}



[data-theme="light"] .convocatoria-summary-bar {

  background: #f8fafc !important;

  border-color: #e2e8f0 !important;

}



[data-theme="light"] .conv-stat-label {

  color: #64748b !important;

}



[data-theme="light"] .conv-stat-val {

  color: #0f172a !important;

}



[data-theme="light"] .conv-stat-val.green {

  color: #16a34a !important;

}



[data-theme="light"] .conv-stat-val.gold {

  color: #d97706 !important;

}



[data-theme="light"] #convocatoria-costo-total {

  background: #ffffff !important;

  border: 1px solid #cbd5e1 !important;

  color: #0f172a !important;

}



[data-theme="light"] #convocatoria-costo-total:focus {

  border-color: #eab308 !important;

  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;

}



[data-theme="light"] .conv-player-row {

  background: #ffffff !important;

  border-color: #e2e8f0 !important;

  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;

}



[data-theme="light"] .conv-player-name {

  color: #0f172a !important;

}



[data-theme="light"] .conv-player-sub {

  color: #64748b !important;

}



[data-theme="light"] .conv-status-pills {

  background: #f1f5f9 !important;

  border: 1px solid #e2e8f0 !important;

}



[data-theme="light"] .conv-pill {

  color: #64748b !important;

}



[data-theme="light"] .conv-pill.green.active {

  background: #16a34a !important;

  color: #ffffff !important;

}



[data-theme="light"] .conv-pill.red.active {

  background: #ef4444 !important;

  color: #ffffff !important;

}



[data-theme="light"] .conv-remove-btn {

  color: #94a3b8 !important;

}



[data-theme="light"] .conv-remove-btn:hover {

  background: #fee2e2 !important;

  color: #ef4444 !important;

}



/* Tarjeta de próximos partidos en modo claro */

[data-theme="light"] .upcoming-match-card {

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;

}



[data-theme="light"] .upcoming-match-card:hover {

  border-color: #cbd5e1 !important;

  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;

}



[data-theme="light"] .umatch-header {

  border-bottom: 1px solid #f1f5f9 !important;

}



[data-theme="light"] .umatch-team-name {

  color: #0f172a !important;

}



[data-theme="light"] .umatch-rival-avatar {

  background: #f1f5f9 !important;

  color: #475569 !important;

  border-color: #cbd5e1 !important;

}



[data-theme="light"] .umatch-info-row {

  background: #f1f5f9 !important;

  color: #475569 !important;

}



[data-theme="light"] .umatch-convocatoria-bar {

  background: #f8fafc !important;

  border: 1px dashed #cbd5e1 !important;

}



[data-theme="light"] .conv-tag-lbl {

  color: #64748b !important;

}



[data-theme="light"] .umatch-actions {

  border-top: 1px solid #f1f5f9 !important;

}



[data-theme="light"] .btn-umatch-future {

  background: #fefce8 !important;

  border: 1px solid #fde047 !important;

  color: #854d0e !important;

}



[data-theme="light"] .btn-umatch-future:hover {

  background: #fef9c3 !important;

}



[data-theme="light"] .live-scoreboard-card {

  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07) !important;

}



[data-theme="light"] .live-scoreboard-card::before {

  background: linear-gradient(90deg, transparent, #eab308, transparent) !important;

  opacity: 0.9 !important;

}



[data-theme="light"] .live-team-logo {

  border: 2px solid #eab308 !important;

  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.25) !important;

}



[data-theme="light"] .live-team-avatar {

  background: linear-gradient(135deg, #f1f5f9, #e2e8f0) !important;

  color: #1e293b !important;

  border: 2px solid #cbd5e1 !important;

  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;

}



[data-theme="light"] .live-team-name {

  color: #0f172a !important;

  font-weight: 800 !important;

}



[data-theme="light"] .live-score-num {

  color: #0f172a !important;

  text-shadow: none !important;

  font-weight: 900 !important;

}



[data-theme="light"] .live-score-sep {

  color: #94a3b8 !important;

  font-weight: 700 !important;

}



[data-theme="light"] .live-timer-control-row {

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;

}



[data-theme="light"] .live-timer-digits {

  color: #0f172a !important;

  font-weight: 800 !important;

}



[data-theme="light"] .live-period-badge {

  background: #f59e0b !important;

  color: #ffffff !important;

}



[data-theme="light"] .live-gear-btn {

  color: #94a3b8 !important;

}



[data-theme="light"] .live-gear-btn:hover {

  color: #d97706 !important;

}



/* Ficha de partido en Modo Claro */

[data-theme="light"] .ficha-match-header {

  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07) !important;

}



[data-theme="light"] .ficha-match-header::before {

  background: linear-gradient(90deg, transparent, #eab308, transparent) !important;

  opacity: 0.9 !important;

}



[data-theme="light"] .ficha-team-logo {

  border: 2px solid #eab308 !important;

  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.25) !important;

}



[data-theme="light"] .ficha-team-avatar {

  background: linear-gradient(135deg, #f1f5f9, #e2e8f0) !important;

  color: #1e293b !important;

  border: 2px solid #cbd5e1 !important;

  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;

}



[data-theme="light"] .ficha-team-name {

  color: #0f172a !important;

  font-weight: 800 !important;

}



[data-theme="light"] .ficha-score-num {

  color: #0f172a !important;

  text-shadow: none !important;

  font-weight: 900 !important;

}



[data-theme="light"] .ficha-score-sep {

  color: #94a3b8 !important;

  font-weight: 700 !important;

}



[data-theme="light"] .ficha-meta-bar {

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  color: #475569 !important;

  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;

}



[data-theme="light"] .ficha-meta-bar strong {

  color: #0f172a !important;

}



[data-theme="light"] .ficha-card-block {

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;

}



[data-theme="light"] .ficha-block-title {

  color: #0f172a !important;

  border-bottom-color: #f1f5f9 !important;

}



[data-theme="light"] .btn-icon-add {

  background: #f59e0b !important;

  color: #000000 !important;

  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;

}



[data-theme="light"] .btn-icon-add:hover {

  background: #d97706 !important;

  color: #ffffff !important;

}



/* Botones de acción en Modo Claro */

[data-theme="light"] .live-act-btn {

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;

}



[data-theme="light"] .live-act-btn.btn-gol-pb {

  background: #f0fdf4 !important;

  border-color: #86efac !important;

}



[data-theme="light"] .live-act-btn.btn-gol-pb .live-act-label {

  color: #166534 !important;

}



[data-theme="light"] .live-act-btn.btn-gol-pb .live-act-sub {

  color: #15803d !important;

}



[data-theme="light"] .live-act-btn.btn-gol-pb .live-act-icon-box {

  background: rgba(34, 197, 94, 0.2) !important;

  color: #15803d !important;

}



[data-theme="light"] .live-act-btn.btn-gol-rival {

  background: #fef2f2 !important;

  border-color: #fca5a5 !important;

}



[data-theme="light"] .live-act-btn.btn-gol-rival .live-act-label {

  color: #991b1b !important;

}



[data-theme="light"] .live-act-btn.btn-gol-rival .live-act-sub {

  color: #b91c1c !important;

}



[data-theme="light"] .live-act-btn.btn-gol-rival .live-act-icon-box {

  background: rgba(239, 68, 68, 0.2) !important;

  color: #b91c1c !important;

}



[data-theme="light"] .live-act-btn.btn-card {

  background: #fefce8 !important;

  border-color: #fde047 !important;

}



[data-theme="light"] .live-act-btn.btn-card .live-act-label {

  color: #854d0e !important;

}



[data-theme="light"] .live-act-btn.btn-card .live-act-sub {

  color: #a16207 !important;

}



[data-theme="light"] .live-act-btn.btn-card .live-act-icon-box {

  background: rgba(234, 179, 8, 0.2) !important;

  color: #a16207 !important;

}



[data-theme="light"] .live-act-btn.btn-board {

  background: #eff6ff !important;

  border-color: #bfdbfe !important;

}



[data-theme="light"] .live-act-btn.btn-board .live-act-label {

  color: #1e40af !important;

}



[data-theme="light"] .live-act-btn.btn-board .live-act-sub {

  color: #1d4ed8 !important;

}



[data-theme="light"] .live-act-btn.btn-board .live-act-icon-box {

  background: rgba(59, 130, 246, 0.2) !important;

  color: #1d4ed8 !important;

}



/* Bloque de eventos en Modo Claro */

[data-theme="light"] .live-events-block {

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

}



[data-theme="light"] .live-events-header {

  border-bottom: 1px solid #e2e8f0 !important;

}



[data-theme="light"] .live-events-title {

  color: #0f172a !important;

}



[data-theme="light"] .live-events-title-wrap {

  color: #0f172a !important;

}



[data-theme="light"] .live-events-badge {

  background: #f1f5f9 !important;

  border: 1px solid #cbd5e1 !important;

  color: #b45309 !important;

}



[data-theme="light"] .live-event-item {

  background: #f8fafc !important;

  border: 1px solid #e2e8f0 !important;

}



[data-theme="light"] .live-event-min {

  color: #b45309 !important;

}



[data-theme="light"] .live-event-text {

  color: #0f172a !important;

}



[data-theme="light"] .live-event-del {

  color: #94a3b8 !important;

}



[data-theme="light"] .live-event-del:hover {

  color: #ef4444 !important;

}



[data-theme="light"] .live-events-empty {

  color: #64748b !important;

}



/* Barra superior (Topbar) en Modo Claro */

[data-theme="light"] .sync-status-indicator {

  background: #f1f5f9 !important;

  border: 1px solid #cbd5e1 !important;

  color: #334155 !important;

}



[data-theme="light"] .role-toggle-btn {

  background: #f1f5f9 !important;

  border: 1px solid #cbd5e1 !important;

  color: #1e293b !important;

}



[data-theme="light"] .role-toggle-btn.admin {

  background: #fef3c7 !important;

  border-color: #fcd34d !important;

  color: #92400e !important;

}



[data-theme="light"] .theme-toggle-btn {

  background: #f1f5f9 !important;

  border: 1px solid #cbd5e1 !important;

  color: #0f172a !important;

}



[data-theme="light"] .notif-btn {

  background: #f1f5f9 !important;

  border: 1px solid #cbd5e1 !important;

  color: #0f172a !important;

}





/* ══ FICHA DE PARTIDO RESPONSIVE MÓVIL & SEGMENTED TABS (SIN EMOJIS) ══ */

#modal-ficha-partido .modal {

  width: 100% !important;

  max-width: 580px !important;

  margin: 0 auto;

  box-sizing: border-box !important;

  overflow-x: hidden !important;

  border-radius: 14px;

}



.ficha-segmented-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 6px;

  background: var(--black-3);

  padding: 4px;

  border-radius: 10px;

  margin-bottom: 12px;

  border: 1px solid var(--black-5);

}



.ficha-tab-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 5px;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .ficha-tab-btn {
    font-size: 0.71rem;
    padding: 7px 2px;
    gap: 3px;
  }
  .ficha-tab-btn svg {
    width: 12px;
    height: 12px;
  }
}



.ficha-tab-btn.active {

  background: var(--gold);

  color: #000000;

  font-weight: 800;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

}



[data-theme="light"] .ficha-segmented-tabs {

  background: #f1f5f9;

  border-color: #cbd5e1;

}



[data-theme="light"] .ficha-tab-btn {

  color: #64748b;

}



[data-theme="light"] .ficha-tab-btn.active {

  background: #ffffff;

  color: #0f172a;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}



.ficha-debt-tag {

  background: #ef4444;

  color: #ffffff;

  font-size: 0.68rem;

  font-weight: 800;

  padding: 2px 7px;

  border-radius: 10px;

  line-height: 1;

}



.ficha-paid-tag {

  background: #22c55e;

  color: #000000;

  font-size: 0.68rem;

  font-weight: 800;

  padding: 2px 7px;

  border-radius: 10px;

  line-height: 1;

}



@media (max-width: 600px) {

  #modal-ficha-partido .modal {

    width: 96% !important;

    max-width: 96% !important;

    max-height: 92vh !important;

    margin: 8px auto !important;

    border-radius: 12px !important;

  }

  #modal-ficha-partido .modal-body {

    padding: 10px 8px !important;

  }

  #modal-ficha-partido .ficha-match-header {

    padding: 10px 8px !important;

    margin-bottom: 10px !important;

  }

  #modal-ficha-partido .ficha-team-name {

    font-size: 0.8rem !important;

    max-width: 105px !important;

    white-space: normal !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;

    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    word-break: break-word !important;

  }

  #modal-ficha-partido .ficha-team-logo,

  #modal-ficha-partido .ficha-team-avatar {

    width: 44px !important;

    height: 44px !important;

  }

}



/* ══ SISTEMA DE USUARIOS, LOGIN & CITACIÓN PERSONAL ══ */

.personal-citation-card {

  background: linear-gradient(135deg, rgba(245, 197, 24, 0.12) 0%, rgba(20, 30, 50, 0.6) 100%);

  border: 1px solid rgba(245, 197, 24, 0.35);

  border-radius: var(--radius-md);

  padding: 10px 14px;

  margin-bottom: 12px;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);

}



.personal-citation-card.login-prompt {

  background: rgba(30, 41, 59, 0.5);

  border: 1px dashed var(--glass-border);

  cursor: pointer;

  text-align: center;

  font-size: 0.8rem;

  color: var(--text-muted);

}



.personal-citation-card.login-prompt strong {

  color: var(--gold);

}



.personal-citation-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 4px;

  gap: 8px;

}



.personal-citation-greeting {

  font-size: 0.86rem;

  font-weight: 600;

  color: var(--text);

}



.citation-badge {

  font-size: 0.7rem;

  font-weight: 700;

  padding: 2px 8px;

  border-radius: 12px;

  white-space: nowrap;

}



.citation-badge.green {

  background: rgba(34, 197, 94, 0.2);

  color: #4ade80;

  border: 1px solid rgba(34, 197, 94, 0.4);

}



.citation-badge.red {

  background: rgba(239, 68, 68, 0.2);

  color: #f87171;

  border: 1px solid rgba(239, 68, 68, 0.4);

}



.citation-badge.yellow {

  background: rgba(245, 197, 24, 0.2);

  color: var(--gold);

  border: 1px solid rgba(245, 197, 24, 0.4);

}



.personal-citation-sub {

  font-size: 0.78rem;

  color: var(--text-muted);

  margin-bottom: 8px;

}



.personal-citation-actions {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

}



.personal-citation-actions .btn {

  padding: 7px 10px;

  font-size: 0.82rem;

  font-weight: 700;

  justify-content: center;

}



.btn-confirm {

  background: rgba(34, 197, 94, 0.15);

  border: 1px solid #22c55e;

  color: #22c55e;

}



.btn-confirm.active {

  background: #22c55e !important;

  color: #000 !important;

  font-weight: 800 !important;

  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);

}



.btn-decline {

  background: rgba(239, 68, 68, 0.12);

  border: 1px solid #ef4444;

  color: #ef4444;

}



.btn-decline.active {

  background: #ef4444 !important;

  color: #fff !important;

  font-weight: 800 !important;

  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);

}



/* Quick accounts chips in login modal */

.login-quick-pill {

  background: var(--black-4);

  border: 1px solid var(--black-5);

  color: var(--text-muted);

  padding: 4px 8px;

  border-radius: 6px;

  font-size: 0.72rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;

}



.login-quick-pill:hover {

  background: var(--black-3);

  border-color: var(--gold);

  color: var(--text);

}



/* Light mode for personal citation */

[data-theme="light"] .personal-citation-card {

  background: linear-gradient(135deg, #fefce8 0%, #ffffff 100%) !important;

  border: 1px solid #fde047 !important;

  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;

}



[data-theme="light"] .personal-citation-greeting {

  color: #0f172a !important;

}



[data-theme="light"] .personal-citation-sub {

  color: #64748b !important;

}



[data-theme="light"] .citation-badge.green {

  background: #dcfce7 !important;

  color: #15803d !important;

  border-color: #86efac !important;

}



[data-theme="light"] .citation-badge.red {

  background: #fee2e2 !important;

  color: #b91c1c !important;

  border-color: #fca5a5 !important;

}



[data-theme="light"] .citation-badge.yellow {

  background: #fef3c7 !important;

  color: #92400e !important;

  border-color: #fde68a !important;

}



[data-theme="light"] .login-quick-pill {

  background: #f1f5f9 !important;

  border-color: #e2e8f0 !important;

  color: #475569 !important;

}



[data-theme="light"] .login-quick-pill:hover {

  background: #e2e8f0 !important;

  color: #0f172a !important;

}



/* ══════════════════════════════════════════

   PORTADA DE BIENVENIDA / ACCESO PURO BARRIO FC

══════════════════════════════════════════ */

.welcome-screen {

  position: fixed;

  inset: 0;

  z-index: 999999;

  background: radial-gradient(circle at 50% 12%, rgba(245, 197, 24, 0.18) 0%, rgba(10, 10, 10, 0.98) 60%), #0a0a0a;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  overflow-y: auto;

  padding: 24px 16px 40px;

  color: #fff;

  transition: opacity 0.25s ease, visibility 0.25s ease;

}



.welcome-screen.hidden {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.welcome-container {

  width: 100%;

  max-width: 410px;

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: auto;

}



.welcome-header {

  text-align: center;

  margin-bottom: 16px;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.welcome-logo-wrap {

  position: relative;

  margin-bottom: 12px;

}



.welcome-logo {

  width: 88px;

  height: 88px;

  border-radius: 50%;

  border: 3px solid var(--gold);

  box-shadow: 0 0 25px rgba(245, 197, 24, 0.35);

  object-fit: cover;

  display: block;

  background: #111;

}



.welcome-title {

  font-family: var(--font-title) !important;

  font-weight: 800;

  font-size: 1.8rem;

  letter-spacing: -0.3px;

  margin: 0;

  color: #ffffff;

  text-transform: uppercase;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);

  line-height: 1.1;

}



.welcome-gold {

  color: var(--gold);

}



.welcome-subtitle {

  font-size: 0.82rem;

  color: #94a3b8;

  margin: 4px auto 8px;

  text-transform: uppercase;

  letter-spacing: 0.8px;

  font-weight: 700;

  white-space: normal;

  word-break: break-word;

  line-height: 1.35;

  max-width: 92%;

}



.welcome-badge {

  display: inline-block;

  font-size: 0.72rem;

  padding: 3px 12px;

  border-radius: 20px;

  background: rgba(245, 197, 24, 0.12);

  color: var(--gold);

  border: 1px solid rgba(245, 197, 24, 0.3);

  font-weight: 700;

}



.welcome-card {

  width: 100%;

  background: rgba(18, 18, 18, 0.88);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(245, 197, 24, 0.22);

  border-radius: 20px;

  padding: 22px 18px;

  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7);

}



.welcome-card-title {

  font-size: 1.18rem;

  font-weight: 800;

  margin: 0 0 4px;

  color: #ffffff;

  text-align: center;

}



.welcome-card-desc {

  font-size: 0.8rem;

  color: #94a3b8;

  margin: 0 0 16px;

  text-align: center;

  line-height: 1.35;

}



.welcome-label {

  font-size: 0.78rem;

  color: #cbd5e1;

  font-weight: 600;

  display: block;

  margin-bottom: 5px;

}



.input-icon-wrap {

  position: relative;

  display: flex;

  align-items: center;

}



.input-icon-wrap .welcome-input,

.input-icon-wrap .input-dark {

  padding-right: 42px !important;

}



.password-toggle-btn {

  position: absolute;

  right: 10px;

  background: transparent;

  border: none;

  color: #94a3b8;

  cursor: pointer;

  padding: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 8px;

  transition: color 0.2s ease, transform 0.1s ease;

  z-index: 2;

}



.password-toggle-btn:hover {

  color: var(--gold, #fbbf24);

}



.password-toggle-btn:active {

  transform: scale(0.92);

}



.input-icon {

  position: absolute;

  left: 12px;

  color: var(--gold);

  pointer-events: none;

  opacity: 0.9;

}



.welcome-input {

  width: 100% !important;

  padding-left: 38px !important;

  height: 44px !important;

  font-size: 0.9rem !important;

  border-radius: 11px !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  background: rgba(26, 26, 26, 0.85) !important;

  color: #ffffff !important;

}



.welcome-input:focus {

  border-color: var(--gold) !important;

  box-shadow: 0 0 12px rgba(245, 197, 24, 0.25) !important;

}



.welcome-submit-btn {

  width: 100%;

  height: 46px;

  border-radius: 12px;

  font-size: 0.94rem;

  font-weight: 800;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 18px rgba(245, 197, 24, 0.35);

  margin-top: 6px;

}



.welcome-toggle-box {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  margin-top: 14px;

  font-size: 0.84rem;

  color: #94a3b8;

}



.welcome-link-btn {

  background: none;

  border: none;

  color: var(--gold);

  font-weight: 800;

  cursor: pointer;

  text-decoration: underline;

  font-size: 0.86rem;

  padding: 4px;

}



.welcome-quick-demo {

  margin-top: 16px;

  padding-top: 14px;

  border-top: 1px dashed rgba(255, 255, 255, 0.1);

  text-align: center;

}



.welcome-quick-title {

  font-size: 0.7rem;

  color: #94a3b8;

  text-transform: uppercase;

  font-weight: 700;

  letter-spacing: 0.5px;

  display: block;

  margin-bottom: 8px;

}



.welcome-quick-chips {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  justify-content: center;

}



.welcome-guest-box {

  margin-top: 12px;

}



.welcome-guest-btn {

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.14);

  color: #cbd5e1;

  border-radius: 10px;

  font-size: 0.78rem;

  padding: 8px 14px;

  cursor: pointer;

  width: 100%;

  transition: all 0.2s;

  display: block;

  text-align: center;

}



.welcome-guest-btn:hover {

  background: rgba(255, 255, 255, 0.05);

  border-color: rgba(255, 255, 255, 0.25);

  color: #ffffff;

}



.welcome-match-notice {

  background: rgba(245, 197, 24, 0.1);

  border: 1px solid rgba(245, 197, 24, 0.35);

  border-radius: 10px;

  padding: 8px 12px;

  margin-bottom: 14px;

  font-size: 0.78rem;

  color: var(--gold);

  text-align: center;

  font-weight: 600;

}



.welcome-footer-tag {

  font-size: 0.75rem;

  color: #94a3b8;

  margin-top: 16px;

  text-align: center;

  letter-spacing: 0.3px;

  display: flex;

  flex-direction: column;

  gap: 4px;

  align-items: center;

}



.welcome-credits,

.sidebar-credits {

  font-size: 0.72rem;

  color: #94a3b8;

}



.welcome-credits a,

.sidebar-credits a {

  color: var(--gold, #fbbf24);

  font-weight: 700;

  text-decoration: underline;

  text-underline-offset: 3px;

  transition: color 0.2s ease;

}



.welcome-credits a:hover,

.sidebar-credits a:hover {

  color: #f59e0b;

}



.sidebar-credits {

  margin-top: 12px;

  text-align: center;

}



/* ── HOJAS Y PESTAÑAS DE TESORERÍA ── */

.tesoreria-sheet-tabs {

  display: flex;

  gap: 8px;

  overflow-x: auto;

  padding: 4px 2px 10px 2px;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;

}



.tesoreria-sheet-tab {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 9px 16px;

  background: var(--black-2);

  border: 1px solid var(--glass-border);

  border-radius: 12px;

  color: var(--text-muted);

  font-family: 'Montserrat', var(--font-title), sans-serif;

  font-size: 0.85rem;

  font-weight: 800;

  white-space: nowrap;

  cursor: pointer;

  transition: all 0.2s ease;

  user-select: none;

  touch-action: manipulation;

}



.tesoreria-sheet-tab:hover {

  background: var(--black-3);

  color: var(--text);

  border-color: rgba(245, 197, 24, 0.4);

}



.tesoreria-sheet-tab.active {

  background: linear-gradient(135deg, rgba(245, 197, 24, 0.2) 0%, rgba(245, 197, 24, 0.08) 100%);

  border-color: var(--gold);

  color: var(--gold);

  box-shadow: 0 4px 14px rgba(245, 197, 24, 0.15);

}



.tesoreria-sheet-tab.btn-new-sheet {

  background: rgba(34, 197, 94, 0.1);

  border-color: rgba(34, 197, 94, 0.3);

  color: #22c55e;

}



.tesoreria-sheet-tab.btn-new-sheet:hover {

  background: rgba(34, 197, 94, 0.2);

  border-color: #22c55e;

}








/* ══ PREVENIR ZOOM Y DESBORDE EN FORMULARIOS MOVILES (Android/iOS) ══ */
@media (max-width: 768px) {
  input, select, textarea, .input-dark, .select-dark, .textarea-dark, .form-input {
    font-size: 16px !important; /* Evita zoom forzado en móviles */
    box-sizing: border-box !important;
  }
  .modal-overlay {
    padding: 10px 8px !important;
  }
  .modal {
    width: 96% !important;
    max-width: 440px !important;
    box-sizing: border-box !important;
  }
}

.notif-delete-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-dim) !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.notif-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

/* ─── CONVOCATORIA TWO-TAB SEGMENTED CONTROLS ─── */
.convocatoria-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 3px;
  margin: 0 16px 12px;
  gap: 4px;
}

.conv-tab-btn {
  flex: 1;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  user-select: none;
}

[data-theme="light"] .convocatoria-tabs {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

[data-theme="light"] .conv-tab-btn {
  color: #64748b;
}

[data-theme="light"] .conv-tab-btn.active {
  background: var(--gold);
  color: #000;
}


/* ── SEPARACIÓN DE PARTIDOS Y MODAL OVERLAY FIX ── */
.upcoming-match-card {
  margin-bottom: 22px !important;
  border-radius: 14px !important;
}

#modal-convocatoria.modal-overlay {
  z-index: 100030 !important;
}

/* ══ FINISHED MATCHES (RESULTADOS) ══ */
.fmatch-card {
  background: rgba(18, 18, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  cursor: default;
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fmatch-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
.fmatch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fmatch-tag {
  font-size: 0.67rem;
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(234, 179, 8, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(234, 179, 8, 0.28);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.2;
}
.fmatch-tag.amistoso {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.28);
}
.fmatch-tag.copa {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.28);
}
.fmatch-date {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.fmatch-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0 8px;
}
.fmatch-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  text-align: center;
  min-width: 0;
}
.fmatch-crest {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold, #eab308);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  background: #111;
}
.fmatch-rival-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title, sans-serif);
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.fmatch-team-name {
  font-family: var(--font-title, sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: 0.2px;
}
.fmatch-score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  min-width: 86px;
}
.fmatch-score-digits {
  font-family: var(--font-title, sans-serif);
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--gold, #eab308);
  letter-spacing: 2px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fmatch-score-divider {
  opacity: 0.5;
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 1px;
}
.fmatch-score-digits .win {
  color: #10b981;
}
.fmatch-score-digits .loss {
  color: #ef4444;
}
.fmatch-result-badge {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 5px;
  display: inline-block;
  line-height: 1.2;
}
.fmatch-result-badge.win {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.fmatch-result-badge.loss {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.fmatch-result-badge.draw {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.3);
}
.fmatch-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.2s;
}
.fmatch-card:hover .fmatch-footer {
  color: var(--gold, #eab308);
}

/* ══ FMATCH FOOTER ACTIONS ══ */
.fmatch-footer-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fmatch-footer-actions .btn {
  transition: all 0.2s ease;
}
.fmatch-footer-actions .btn:active {
  transform: scale(0.97);
}


/* ══════════════════════════════════════════════════════════════ */
/* ── MATRIZ DE FONDOS VS JUGADORES (PLANILLA 2D TESORERÍA) ── */
/* ══════════════════════════════════════════════════════════════ */

.tesoreria-matriz-wrapper {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #0d111a;
  max-height: 72vh;
  position: relative;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  scrollbar-width: thin;
  scrollbar-color: var(--gold) #11151f;
}

.tesoreria-matriz-wrapper::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.tesoreria-matriz-wrapper::-webkit-scrollbar-track {
  background: #11151f;
  border-radius: 4px;
}
.tesoreria-matriz-wrapper::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

.tesoreria-matriz-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
  min-width: 650px;
}

.tesoreria-matriz-table th,
.tesoreria-matriz-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.tesoreria-matriz-table thead th {
  position: sticky;
  top: 0;
  background: #131824;
  z-index: 10;
  color: var(--text-muted);
  font-weight: 800;
  font-size: 0.72rem;
  border-bottom: 2px solid rgba(245, 197, 24, 0.3);
}

.tesoreria-matriz-table .col-fondo-header {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 20;
  background: #161c2b !important;
  text-align: left;
  min-width: 220px;
  max-width: 260px;
  box-shadow: 3px 0 8px rgba(0, 0, 0, 0.45);
}

.tesoreria-matriz-table tbody .row-fondo-label {
  position: sticky;
  left: 0;
  z-index: 8;
  background: #111622;
  text-align: left;
  min-width: 220px;
  max-width: 260px;
  box-shadow: 3px 0 8px rgba(0, 0, 0, 0.45);
}

.tesoreria-matriz-table tfoot td {
  position: sticky;
  bottom: 0;
  background: #131824;
  z-index: 11;
  font-weight: 800;
  border-top: 2px solid var(--gold);
}

.tesoreria-matriz-table tfoot .footer-fondo-label {
  position: sticky;
  left: 0;
  bottom: 0;
  z-index: 20;
  background: #161c2b !important;
  box-shadow: 3px 0 8px rgba(0, 0, 0, 0.45);
}

.matriz-cell-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-width: 86px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  user-select: none;
  font-family: inherit;
}

.matriz-cell-btn.paid {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.38);
  color: #22c55e;
}
.matriz-cell-btn.paid:hover {
  background: rgba(34, 197, 94, 0.28);
  transform: scale(1.02);
}

.matriz-cell-btn.unpaid {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
.matriz-cell-btn.unpaid:hover {
  background: rgba(239, 68, 68, 0.28);
  transform: scale(1.02);
}

.matriz-cell-btn.unassigned {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  color: var(--text-muted);
  font-size: 0.7rem;
}
.matriz-cell-btn.unassigned:hover {
  background: rgba(245, 197, 24, 0.12);
  border-color: var(--gold);
  color: var(--gold);
  transform: scale(1.02);
}


/* ══════════════════════════════════════════════════════════════ */
/* ── REGISTRO DE DEUDAS DE JUGADORES (TABLA GESTOR DE FONDOS) ── */
/* ══════════════════════════════════════════════════════════════ */

.matriz-table-scroll {
  overflow-x: auto;
  border-radius: 12px;
  background: #0d111a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
  scrollbar-color: var(--gold) #11151f;
}

.matriz-table-scroll::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.matriz-table-scroll::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

.matriz-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  min-width: 680px;
}

.matriz-table th,
.matriz-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.matriz-table thead th {
  position: sticky;
  top: 0;
  background: #141926;
  z-index: 10;
  color: var(--text-muted);
  font-weight: 800;
  font-size: 0.74rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}

.matriz-col-idx {
  width: 36px;
  min-width: 36px;
  text-align: center;
  color: var(--text-muted);
  font-weight: 700;
}

.matriz-col-jugador {
  position: sticky;
  left: 0;
  z-index: 15;
  background: #131824 !important;
  text-align: left !important;
  min-width: 180px;
  max-width: 220px;
  box-shadow: 3px 0 8px rgba(0, 0, 0, 0.45);
}

.matriz-table thead .matriz-col-jugador {
  z-index: 25;
  background: #161c2b !important;
}

.matriz-col-total-header {
  min-width: 120px;
  background: rgba(59, 130, 246, 0.12) !important;
  color: #60a5fa !important;
  border-left: 2px solid rgba(59, 130, 246, 0.4) !important;
  border-right: 2px solid rgba(59, 130, 246, 0.4) !important;
  font-weight: 900 !important;
}

.matriz-col-total-cell {
  background: rgba(59, 130, 246, 0.04);
  border-left: 2px solid rgba(59, 130, 246, 0.3) !important;
  border-right: 2px solid rgba(59, 130, 246, 0.3) !important;
  font-weight: 800;
}

.matriz-cell-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 80px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  font-family: inherit;
}

.matriz-cell-val.debt {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.35);
}
.matriz-cell-val.debt:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: scale(1.03);
}

.matriz-cell-val.paid {
  background: rgba(34, 197, 94, 0.14);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.35);
}
.matriz-cell-val.paid:hover {
  background: rgba(34, 197, 94, 0.25);
  transform: scale(1.03);
}

.matriz-cell-val.empty {
  background: transparent;
  color: var(--text-muted);
  border-color: rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
}
.matriz-cell-val.empty:hover {
  background: rgba(245, 197, 24, 0.1);
  border-color: var(--gold);
  color: var(--gold);
}


/* ══════════════════════════════════════════════════════════════ */
/* ── ESTILOS DEL MÓDULO DE FONDOS (DISEÑO PIZARRA BLANCA) ── */
/* ══════════════════════════════════════════════════════════════ */

.btn-toggle-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  font-family: inherit;
  min-width: 120px;
}

.btn-toggle-check.paid {
  background: rgba(34, 197, 94, 0.16);
  border-color: #22c55e;
  color: #22c55e;
}
.btn-toggle-check.paid:hover {
  background: rgba(34, 197, 94, 0.28);
  transform: scale(1.02);
}

.btn-toggle-check.unpaid {
  background: rgba(239, 68, 68, 0.16);
  border-color: #ef4444;
  color: #ef4444;
}
.btn-toggle-check.unpaid:hover {
  background: rgba(239, 68, 68, 0.28);
  transform: scale(1.02);
}

.fondo-card-btn {
  background: var(--black-3);
  border: 1px solid var(--black-5);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}
.fondo-card-btn:hover {
  border-color: var(--gold);
  background: rgba(245, 197, 24, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}


/* ══════════════════════════════════════════════════════════════ */
/* ── PANTALLA PRINCIPAL DE TESORERÍA (BOCETO PIZARRA BLANCA) ── */
/* ══════════════════════════════════════════════════════════════ */

.caja-sketch-card {
  background: linear-gradient(145deg, rgba(22, 27, 40, 0.95), rgba(12, 16, 26, 0.95));
  border: 1.5px solid rgba(245, 197, 24, 0.35);
  border-radius: 18px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  max-width: 480px;
  margin: 0 auto 24px auto;
  position: relative;
  overflow: hidden;
}

.caja-sketch-card::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 80px;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.22) 0%, transparent 70%);
  filter: blur(15px);
  pointer-events: none;
}

.caja-sketch-badge {
  font-family: 'Anton', 'Montserrat', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 800;
}

.caja-sketch-amount {
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 8px;
  text-shadow: 0 0 25px rgba(245, 197, 24, 0.2);
}

.caja-sketch-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.35;
}

.caja-sketch-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
}

.caja-sketch-btn {
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  user-select: none;
}

.caja-sketch-btn.btn-caja-ingreso {
  background: rgba(34, 197, 94, 0.08);
  border: 2px solid rgba(34, 197, 94, 0.45);
}

.caja-sketch-btn.btn-caja-ingreso:hover,
.caja-sketch-btn.btn-caja-ingreso:active {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.25);
}

.caja-sketch-btn.btn-caja-gasto {
  background: rgba(239, 68, 68, 0.08);
  border: 2px solid rgba(239, 68, 68, 0.45);
}

.caja-sketch-btn.btn-caja-gasto:hover,
.caja-sketch-btn.btn-caja-gasto:active {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.25);
}

.caja-sketch-btn-text {
  font-family: 'Anton', 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.btn-caja-ingreso .caja-sketch-btn-text {
  color: #22c55e;
}

.btn-caja-gasto .caja-sketch-btn-text {
  color: #ef4444;
}

.caja-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--black-5);
  background: var(--black-3);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.caja-icon-btn.plus {
  background: rgba(245, 197, 24, 0.15);
  border-color: var(--gold);
  color: var(--gold);
}

.caja-icon-btn.plus:hover {
  background: var(--gold);
  color: #000;
}

.caja-icon-btn.close:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}


/* ── BOTONES DE CAJA: 3 EN LA MISMA FILA ── */
.caja-sketch-btn-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}

@media (max-width: 520px) {
  .caja-sketch-btn-grid-3 {
    gap: 8px;
  }
  .caja-sketch-btn {
    height: 96px;
    padding: 8px 4px;
  }
  .caja-sketch-btn-text {
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
  }
}

.caja-sketch-btn.btn-caja-pendientes {
  background: rgba(245, 197, 24, 0.08);
  border: 2px solid rgba(245, 197, 24, 0.45);
}

.caja-sketch-btn.btn-caja-pendientes:hover,
.caja-sketch-btn.btn-caja-pendientes:active {
  background: rgba(245, 197, 24, 0.2);
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(245, 197, 24, 0.25);
}

.btn-caja-pendientes .caja-sketch-btn-text {
  color: var(--gold);
}


/* ══════════════════════════════════════════════════════════════ */
/* ── DETALLE DEL FONDO: REDISEÑO PROFESIONAL Y ORDENADO ── */
/* ══════════════════════════════════════════════════════════════ */

.fd-hero-box {
  background: linear-gradient(145deg, rgba(22, 27, 40, 0.95), rgba(12, 16, 26, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  margin-bottom: 14px;
  position: relative;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.fd-hero-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.fd-hero-amount {
  font-size: clamp(2.2rem, 7vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 12px;
}

.fd-hero-amount.positive {
  color: var(--gold);
  text-shadow: 0 0 20px rgba(245, 197, 24, 0.25);
}

.fd-hero-amount.negative {
  color: #ef4444;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.25);
}

.fd-progress-wrapper {
  max-width: 420px;
  margin: 0 auto;
}

.fd-progress-track {
  background: var(--black-4);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.fd-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.fd-progress-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* 3 Columnas de Métricas */
.fd-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

@media (max-width: 480px) {
  .fd-metrics-row {
    gap: 6px;
  }
}

.fd-metric-card {
  background: var(--black-3);
  border: 1px solid var(--black-5);
  border-radius: 12px;
  padding: 12px 6px;
  text-align: center;
}

.fd-metric-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.fd-metric-val {
  font-size: 1.1rem;
  font-weight: 900;
  display: block;
  letter-spacing: -0.5px;
}

.fd-metric-val.green { color: var(--green); }
.fd-metric-val.red { color: #ef4444; }
.fd-metric-val.gold { color: var(--gold); }

.fd-metric-sub {
  font-size: 0.65rem;
  color: var(--text-dim);
  display: block;
  margin-top: 2px;
}

/* Sección Gastos */
.fd-gastos-section {
  background: var(--black-2);
  border: 1px solid var(--black-5);
  border-radius: 12px;
  padding: 14px;
  margin-top: 4px;
}

.fd-gastos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fd-gastos-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Filas de Jugadores */
.fd-player-row {
  background: var(--black-3);
  border: 1px solid var(--black-5);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.2s ease;
}

.fd-player-row:hover {
  border-color: rgba(245, 197, 24, 0.25);
  background: rgba(255, 255, 255, 0.02);
}

.fd-player-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.15), rgba(245, 197, 24, 0.05));
  border: 1.5px solid rgba(245, 197, 24, 0.25);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.fd-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fd-toggle-btn {
  height: 38px;
  min-width: 108px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  user-select: none;
  font-family: inherit;
}

.fd-toggle-btn.paid {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.5);
  color: #22c55e;
}

.fd-toggle-btn.paid:hover {
  background: rgba(34, 197, 94, 0.22);
}

.fd-toggle-btn.unpaid {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
}

.fd-toggle-btn.unpaid:hover {
  background: rgba(239, 68, 68, 0.22);
}

.fd-wa-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.fd-wa-btn:hover {
  background: rgba(37, 211, 102, 0.25);
  transform: scale(1.05);
}

.fd-wa-placeholder {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}


/* ══ MODAL JUGADOR RESPONSIVE FOOTER & VIEWPORT FIX ══ */
#modal-jugador .modal {
  max-height: min(92vh, calc(100vh - 24px)) !important;
  display: flex !important;
  flex-direction: column !important;
}

#modal-jugador .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 16px 18px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.modal-footer-jugador {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--glass-border) !important;
  background: var(--black-2) !important;
  flex-shrink: 0 !important;
}

#modal-jugador #jugador-delete-btn {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  padding: 9px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#modal-jugador #jugador-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

.modal-footer-jugador .modal-footer-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}

.modal-footer-jugador .btn {
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .modal-footer-jugador {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .modal-footer-jugador .modal-footer-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-left: 0 !important;
    order: 1 !important;
  }

  .modal-footer-jugador .modal-footer-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    font-size: 0.85rem !important;
  }

  #modal-jugador #jugador-delete-btn {
    width: 100% !important;
    justify-content: center !important;
    order: 2 !important;
    padding: 9px 8px !important;
    font-size: 0.82rem !important;
  }
}

/* Ocultar badge amarillo de suplente */
.bench-overlay-badge {
  display: none !important;
}

@media (max-width: 480px) {
  .field-player.bench-pitch-token {
    width: 44px !important;
    height: 44px !important;
  }
  .field-player.bench-pitch-token .fp-num {
    font-size: 1.05rem !important;
  }
  .field-player.bench-pitch-token .fp-name {
    font-size: 0.58rem !important;
    max-width: 42px !important;
  }
}

/* ══ MODAL PARTIDO FOOTER RESPONSIVE ══ */
.modal-footer-partido {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--glass-border) !important;
  background: var(--black-2) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

#modal-partido #btn-delete-partido-modal {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  padding: 9px 12px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

#modal-partido #btn-delete-partido-modal:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

.modal-partido-actions {
  display: flex !important;
  gap: 8px !important;
  margin-left: auto !important;
  align-items: center !important;
}

.modal-footer-partido .btn {
  padding: 9px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

@media (max-width: 480px) {
  .modal-footer-partido {
    display: flex !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  .modal-footer-partido #btn-delete-partido-modal {
    flex: 1 !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 9px 6px !important;
    font-size: 0.78rem !important;
  }
  .modal-footer-partido .modal-partido-actions {
    flex: 2 !important;
    display: flex !important;
    gap: 6px !important;
    margin-left: 0 !important;
  }
  .modal-footer-partido .modal-partido-actions .btn {
    flex: 1 !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 9px 6px !important;
    font-size: 0.78rem !important;
  }
}