:root {
  --bg: #0a0118;
  --surface: rgba(32, 17, 58, 0.62);
  --surface-2: #201336;
  --border: #3a2456;
  --text: #f5eeff;
  --muted: #a596c9;
  --green: #c6ff3d;
  --green-dim: #2a3d0d;
  --amber: #ffb454;
  --red: #ff3d68;
  --blue: #33e0ff;
  --magenta: #ff3df0;
  --radius: 18px;
  --display: 'Sora', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.22,.8,.32,1);
  --ease-sheet: cubic-bezier(.32,.72,0,1);
  --tabbar-h: 60px;
  --topbar-h: 64px;
  --glow: 0 0 0 1px rgba(198,255,61,.14), 0 8px 30px rgba(198,255,61,.1);
  --glow-magenta: 0 0 0 1px rgba(255,61,240,.14), 0 8px 30px rgba(255,61,240,.12);
}

* { box-sizing: border-box; }

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Aurora: capa de fondo animada, firma visual del nuevo tema */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(198,255,61,.20), transparent 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(255,61,240,.16), transparent 60%),
    radial-gradient(1100px 640px at 50% 115%, rgba(51,224,255,.12), transparent 60%);
  pointer-events: none;
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
/* Textura de grid tipo terminal, reemplaza el punteado anterior */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 0%, black, transparent 75%);
  pointer-events: none;
}
@keyframes auroraDrift {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.02); }
}

#app { min-height: 100vh; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--green), var(--blue)); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Guardas de responsive global: ningun elemento puede empujar
   el ancho de la pantalla movil ni generar scroll horizontal.
   ============================================================ */
html, body { max-width: 100%; }

#app, main, .view, .topbar-inner, .modal, .sheet, .card,
section, header, footer, form, table {
  max-width: 100%;
}

* { min-width: 0; }

table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

pre, code { white-space: pre-wrap; word-break: break-word; }

img, video, canvas, svg { max-width: 100%; height: auto; }

.topbar-inner, .row, .flex, .grid { flex-wrap: wrap; }

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

.topbar { padding-top: var(--safe-top); }
.mobile-tabbar { }

@media (max-width: 560px) {
  body { font-size: 15px; }
  h1, .h1 { font-size: clamp(1.4rem, 6vw, 1.9rem) !important; }
  h2, .h2 { font-size: clamp(1.15rem, 5vw, 1.5rem) !important; }
  .wrap, .container, .page-container { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ============================================================
   Capa de animaciones modernas y micro-interacciones
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn2 {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,255,61,.35); }
  50% { box-shadow: 0 0 0 6px rgba(198,255,61,0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.anim-in { animation: fadeInUp .5s var(--ease) both; }
.anim-fade { animation: fadeIn2 .4s var(--ease) both; }
.anim-scale { animation: scaleIn .3s var(--ease) both; }
.anim-stagger > * { animation: fadeInUp .5s var(--ease) both; }
.anim-stagger > *:nth-child(1) { animation-delay: .02s; }
.anim-stagger > *:nth-child(2) { animation-delay: .06s; }
.anim-stagger > *:nth-child(3) { animation-delay: .1s; }
.anim-stagger > *:nth-child(4) { animation-delay: .14s; }
.anim-stagger > *:nth-child(5) { animation-delay: .18s; }
.anim-stagger > *:nth-child(6) { animation-delay: .22s; }
.anim-stagger > *:nth-child(n+7) { animation-delay: .26s; }

.live-dot { animation: livePulse 1.6s ease-out infinite; border-radius: 50%; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, rgba(255,255,255,.06) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
}

/* levanta cualquier tarjeta clicable al pasar el mouse, sin romper layouts existentes */
.card, .match-card, .team-card, .comp-card, .bet-card, .ranking-row, [class*="-card"] {
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
@media (hover: hover) {
  .card:hover, .match-card:hover, .team-card:hover, .comp-card:hover, .bet-card:hover, [class*="-card"]:hover {
    transform: translateY(-3px);
    border-color: var(--green);
  }
}

button, .btn, [class*="-btn"] {
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), opacity .15s var(--ease);
}
button:active, .btn:active, [class*="-btn"]:active { transform: scale(.97); }

/* ============================================================
   FIX: marcador exacto y demas inputs numericos angostos.
   El padding generico (11px 12px) no cabe en inputs de 50-70px
   y el digito quedaba oculto/cortado al escribir.
   ============================================================ */
input[type="number"] {
  text-align: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
input[style*="width:50px"],
input[style*="width: 50px"],
input[style*="width:64px"],
input[style*="width: 64px"],
input[style*="width:70px"],
input[style*="width: 70px"] {
  padding: 8px 4px !important;
  min-width: 44px;
  font-size: 15px;
}

/* ============================================================
   Superficies de vidrio: reemplaza el look plano anterior por
   glassmorphism consistente en toda la app.
   ============================================================ */
.card, .match-card, .team-card, .comp-card, .bet-card, [class*="-card"],
.modal, .sheet, .betslip-panel {
  background: var(--surface);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border);
}

/* Bordes con brillo animado en elementos "en vivo" */
@keyframes liveBorder {
  0%, 100% { border-color: var(--green); box-shadow: 0 0 0 0 rgba(198,255,61,.25); }
  50% { border-color: var(--magenta); box-shadow: 0 0 0 4px rgba(255,61,240,0); }
}
.is-live, .live-scoreboard, [class*="live-"] .badge-live {
  animation: liveBorder 2.4s ease-in-out infinite;
}

/* Botones primarios: degrade neon en vez de color solido */
.btn-primary, button.primary {
  background: linear-gradient(120deg, var(--green), var(--magenta) 140%);
  background-size: 180% 180%;
  color: #10041f;
  border: none;
  animation: btnGradient 6s ease-in-out infinite;
}
@keyframes btnGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Transicion de vista: se dispara agregando .view-enter desde enhance.js */
.view-enter { animation: fadeInUp .38s var(--ease) both; }

/* Boton flotante volver arriba (inyectado por enhance.js) */
.scroll-top-btn {
  position: fixed;
  right: 18px;
  bottom: calc(var(--tabbar-h) + 18px + var(--safe-bottom));
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 30;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.scroll-top-btn.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.scroll-top-btn:hover { border-color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .btn-primary, button.primary { animation: none; }
  .is-live, .live-scoreboard, [class*="live-"] .badge-live { animation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  0% { transform: scale(0.85); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes pulseLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,90,111,.55); }
  50% { box-shadow: 0 0 0 5px rgba(239,90,111,0); }
}
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes slideDownFade {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes glowPulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}
@keyframes underlineSweep {
  0% { background-position: -140% 0; }
  100% { background-position: 240% 0; }
}
@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Vidrio esmerilado compartido por tarjetas/paneles sobre el fondo con reflectores */
.card, .match-card, .match-card-odds, .market-group, .betslip,
.betslip-sheet-body .betslip, .betslip-panel, .betslip-sheet, .match-header-card {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.view {
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 20px 100px;
  animation: fadeInUp .35s var(--ease);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 11, 20, 0.78);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--border);
  min-height: var(--topbar-h);
  position: sticky;
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--border) 0 10px, transparent 10px 20px);
  opacity: .8;
}

.topbar-inner {
  max-width: 1160px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-direction: row-reverse;
  justify-content: space-between;
  /* La regla global de más arriba pone flex-wrap: wrap en todos los
     contenedores flex del sitio (para que nada empuje el ancho de la
     pantalla), pero en la barra superior eso era justo el problema: con
     muchos botones, en vez de desbordar/scrollear, el contenido se partía
     en dos filas dentro de un header de alto fijo, y la segunda fila
     quedaba tapada (las letras "se salían"/se cortaban). Aquí se anula:
     el menú central ya tiene su propio scroll horizontal (.main-nav) y
     los botones de la derecha ahora son íconos angostos, así que nunca
     hace falta una segunda fila. */
  flex-wrap: nowrap;
}

.brand {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  transition: transform .2s var(--ease);
  position: relative;
  display: inline-flex;
  align-items: center;
}
.brand::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px 2px rgba(198,255,61,.7);
  margin-right: 8px;
  animation: glowPulse 2.4s ease-in-out infinite;
}
.brand:active { transform: scale(0.94); }
.brand span {
  background: linear-gradient(90deg, var(--green), var(--blue), var(--green));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: underlineSweep 5s linear infinite;
}

.main-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  position: relative;
  transition: color .18s var(--ease), background .18s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.main-nav a .nav-ic { width: 15px; height: 15px; stroke: currentColor; fill: none; flex-shrink: 0; }
.main-nav a.active, .main-nav a:hover { color: var(--text); background: var(--surface-2); }
.main-nav a.active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
}

.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.points-pill {
  font-family: var(--mono);
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--amber);
  padding: 6px 12px 6px 10px;
  border-radius: 20px;
  font-size: 13px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.points-pill::before { content: '◆'; font-size: 10px; }
.points-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,180,84,.2); }
.points-pill.negative { color: var(--red); border-color: var(--red); }
.points-pill.negative:hover { box-shadow: 0 4px 14px rgba(255,77,106,.2); }

.btn {
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: transform .15s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), filter .15s var(--ease);
}
.btn:hover { border-color: var(--green); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-primary {
  background: linear-gradient(120deg, var(--green), #38e0b0);
  border-color: var(--green);
  color: #03150c;
  box-shadow: 0 4px 18px rgba(198,255,61,.3);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 24px rgba(198,255,61,.4); transform: translateY(-2px); }
.btn-danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: rgba(239,90,111,.1); }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

.page-title {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 20px;
  letter-spacing: 0.2px;
  animation: fadeInUp .4s var(--ease);
  position: relative;
  padding-bottom: 12px;
}
.page-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 46px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.grid { display: grid; gap: 16px; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) var(--radius) 4px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  padding: 18px;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  animation: fadeInUp .35s var(--ease);
}
.card[style*="cursor:pointer"]:hover, a.card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* Carriles de partidos del dia agrupados por torneo, en la home */
.today-lanes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.today-lane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px var(--radius) var(--radius) var(--radius);
  padding: 14px;
  scroll-snap-align: start;
}
.today-lane-head {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.today-lane-body { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 560px) {
  .today-lanes { grid-auto-columns: minmax(240px, 82vw); }
}

.match-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  animation: fadeInUp .35s var(--ease);
}
.match-card:hover { border-color: var(--green); transform: translateY(-3px) scale(1.005); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.match-card:active { transform: translateY(-1px) scale(0.99); }
.match-teams { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.team-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-score {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--amber);
  min-width: 70px;
  text-align: center;
  flex-shrink: 0;
}
.match-meta { font-size: 12px; color: var(--muted); text-align: right; min-width: 120px; flex-shrink: 0; }

@media (max-width: 560px) {
  .match-card { flex-wrap: wrap; padding: 14px; }
  .match-teams { width: 100%; }
  .match-meta { min-width: 0; margin-left: auto; text-align: right; }
}

.match-card-undecided { cursor: default; opacity: .72; }
.match-card-undecided:hover { border-color: var(--border); transform: none; box-shadow: none; }
.team-name-placeholder { color: var(--muted); font-weight: 500; font-style: italic; }

/* --- Cuadro de eliminatoria (zona "Cuadro" de admin/manage y vista pública) --- */
.bracket-scroll { overflow-x: auto; padding-bottom: 8px; }
.bracket-tree { display: flex; align-items: stretch; gap: 36px; min-width: max-content; padding: 4px 2px; }
.bracket-round-col { display: flex; flex-direction: column; justify-content: space-around; gap: 18px; min-width: 220px; }
.bracket-round-title { font-family: var(--display); font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; text-align: center; margin-bottom: 6px; }
.bracket-match {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.bracket-match:hover { border-color: var(--green); transform: translateY(-2px); }
.bracket-match.bracket-match-undecided { cursor: default; opacity: .7; }
.bracket-match.bracket-match-undecided:hover { border-color: var(--border); transform: none; }
.bracket-match-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 13px; }
.bracket-match-row + .bracket-match-row { border-top: 1px dashed var(--border); }
.bracket-match-team { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bracket-match-team.bracket-team-winner { color: var(--green); }
.bracket-match-score { font-family: var(--mono); font-weight: 700; flex-shrink: 0; }
.bracket-match-meta { font-size: 11px; color: var(--muted); margin-top: 6px; text-align: center; }

/* Cuadro de tenis editable (panel exclusivo de tenis): arrastrar jugadores
   entre casillas del cuadro para corregir el sorteo/emparejamiento. Las
   mismas clases (con alias "bracket-slot"/"bracket-editable-match"/
   "bracket-chip-name") se reutilizan para el cuadro editable de fútbol. */
.tennis-bracket-match, .bracket-editable-match { cursor: default; }
.tennis-bracket-match:hover, .bracket-editable-match:hover { transform: none; border-color: var(--border); }
.tennis-bracket-slot, .bracket-slot {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px;
  min-height: 28px; transition: background-color .15s var(--ease), outline-color .15s var(--ease);
  outline: 1px dashed transparent;
}
.tennis-bracket-slot[draggable="true"], .bracket-slot[draggable="true"] { cursor: grab; }
.tennis-bracket-slot.slot-empty, .bracket-slot.slot-empty { color: var(--muted); font-size: 12px; font-style: italic; }
.tennis-bracket-slot.slot-dragging, .bracket-slot.slot-dragging { opacity: .4; }
.tennis-bracket-slot.slot-drag-over, .bracket-slot.slot-drag-over { background: rgba(34, 197, 94, .12); outline-color: var(--green); }
.tennis-bracket-slot.slot-winner, .bracket-slot.slot-winner { color: var(--green); font-weight: 700; }
.tennis-bracket-slot.slot-bye, .bracket-slot.slot-bye { color: var(--muted); font-size: 12px; }
.tennis-player-chip-name, .bracket-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-chip-score { font-family: var(--mono); font-weight: 700; flex-shrink: 0; margin-left: auto; padding-left: 6px; }

/* Escudos de equipo (usados en filas de partidos, admin y encabezado de detalle) */
.team-crest {
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px;
}
.team-crest-fallback {
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--muted);
  font-family: var(--display);
  flex-shrink: 0;
}

/* Lista compacta de partidos con cuotas 1X2 (vista de partidos de competencia) */
.mrow-list { display: flex; flex-direction: column; gap: 6px; }

.mrow-header {
  display: grid;
  grid-template-columns: var(--mrow-cols);
  gap: 10px;
  align-items: center;
  padding: 0 14px;
  margin-top: 4px;
}
.mrow-header > * { min-width: 0; }
.mrow-header-odds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.mrow {
  --mrow-cols: 1fr 150px 60px 32px;
  display: grid;
  grid-template-columns: var(--mrow-cols);
  gap: 10px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 0 12px 12px 0;
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .15s var(--ease);
  animation: fadeInUp .35s var(--ease);
}
.mrow-header { --mrow-cols: 1fr 150px 60px 32px; }
.mrow > * { min-width: 0; }
.mrow-odds { order: 2; }
.mrow-teams { order: 1; }
.mrow-time { order: 3; text-align: right; }
.mrow-score { order: 4; }
.mrow:hover { border-color: var(--green); border-left-color: var(--green); background: var(--surface-2); transform: translateY(-1px) translateX(2px); }
.mrow:active { transform: translateY(0) scale(0.995); }
.mrow-done { opacity: .92; }

.mrow-time { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); }
.mrow-time-main { font-size: 12px; font-weight: 700; color: var(--text); }
.mrow-time-sub { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.mrow-live .mrow-time-sub { color: var(--green); font-weight: 700; }

.mrow-teams { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mrow-team-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mrow-team-line .team-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mrow-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-width: 0; }
.mrow-odds-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 3px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--amber);
  cursor: pointer;
  min-width: 0;
  white-space: nowrap;
  transition: border-color .15s var(--ease), transform .15s var(--ease), background .15s var(--ease);
}
.mrow-odds-tile:hover { border-color: var(--green); transform: translateY(-2px); }
.mrow-odds-tile.selected { background: var(--green-dim); border-color: var(--green); color: var(--green); box-shadow: 0 4px 14px rgba(198,255,61,.25); }
.mrow-odds-tile.locked { cursor: not-allowed; opacity: .5; }
.mrow-odds-tile.locked:hover { border-color: var(--border); transform: none; }
.mrow-odds-tile.winner { border-color: var(--green); background: var(--green-dim); color: var(--green); }
.mrow-odds-tile { position: relative; }
.mrow-odds-tile.odds-up { animation: mrowOddsUpFlash 1.1s ease; }
.mrow-odds-tile.odds-down { animation: mrowOddsDownFlash 1.1s ease; }
.mrow-odds-tile .odds-arrow { font-size: 9px; margin-left: 2px; opacity: 0; }
.mrow-odds-tile.odds-up .odds-arrow { color: var(--green); opacity: 1; animation: oddsArrowFade 1.6s ease forwards; }
.mrow-odds-tile.odds-down .odds-arrow { color: var(--milan-red, #c8102e); opacity: 1; animation: oddsArrowFade 1.6s ease forwards; }

.mrow-score {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  color: var(--text);
}

/* Fila de partido de tenis (zona de Partidos y de Competencias): set/juego
   a la izquierda, jugadores, marcador set-games-puntos, cuotas con nombre
   de jugador dentro del recuadro, y botón de estadísticas a la derecha. */
.mrow-tennis {
  --mrow-cols: 54px 1fr 78px 168px 26px;
  gap: 8px;
}
.mrow-tennis > * { order: initial; }
.mrow-tennis .mrow-time { order: 1; text-align: left; }
.mrow-tennis .mrow-teams { order: 2; }
.mrow-tennis .mrow-tennis-score { order: 3; }
.mrow-tennis .mrow-tennis-odds { order: 4; }
.mrow-tennis .mrow-chart-btn { order: 5; }

.mrow-set-label { font-size: 11px; font-weight: 700; color: var(--text); line-height: 1.3; }
.mrow-set-sub { font-size: 10px; color: var(--muted); line-height: 1.3; }
.mrow-live .mrow-set-label, .mrow-live .mrow-set-sub { color: var(--green); }
.mrow-live-bolt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-bottom: 2px;
  color: var(--milan-red, #e5484d);
}
.mrow-live-bolt svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }

.mrow-tennis-score {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
}
.mrow-tennis-score-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; }
.mrow-tennis-score-row span { min-width: 0; }

.mrow-tennis-odds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; min-width: 0; }
.mrow-tennis-odds-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 8px;
  cursor: pointer;
  min-width: 0;
  transition: border-color .15s var(--ease), transform .15s var(--ease), background .15s var(--ease);
}
.mrow-tennis-odds-tile:hover { border-color: var(--green); transform: translateY(-2px); }
.mrow-tennis-odds-tile.selected { background: var(--green-dim); border-color: var(--green); }
.mrow-tennis-odds-tile.locked { cursor: not-allowed; opacity: .5; }
.mrow-tennis-odds-tile.locked:hover { border-color: var(--border); transform: none; }
.mrow-tennis-odds-tile.winner { border-color: var(--green); background: var(--green-dim); }
.mrow-tennis-odds-tile { position: relative; }
.mrow-tennis-odds-tile.odds-up { animation: mrowOddsUpFlash 1.1s ease; }
.mrow-tennis-odds-tile.odds-down { animation: mrowOddsDownFlash 1.1s ease; }
.mrow-tennis-odds-name {
  font-size: 11px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.mrow-tennis-odds-value {
  font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--green);
  flex-shrink: 0; display: flex; align-items: center; gap: 2px;
}
.mrow-tennis-odds-value .odds-arrow { font-size: 9px; opacity: 0; }
.mrow-tennis-odds-tile.odds-up .odds-arrow { color: var(--green); opacity: 1; animation: oddsArrowFade 1.6s ease forwards; }
.mrow-tennis-odds-tile.odds-down .odds-arrow { color: var(--milan-red, #c8102e); opacity: 1; animation: oddsArrowFade 1.6s ease forwards; }

.mrow-chart-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}
.mrow-chart-btn svg { width: 13px; height: 13px; }

@media (max-width: 560px) {
  .mrow-tennis { --mrow-cols: 40px 1fr 60px 128px 0px; }
  .mrow-tennis .mrow-chart-btn { display: none; }
  .mrow-tennis-odds-name { font-size: 10px; }
  .mrow-tennis-odds-value { font-size: 12px; }
}
@media (max-width: 380px) {
  .mrow-tennis { --mrow-cols: 34px 1fr 52px 108px 0px; gap: 4px; }
  .mrow-tennis-score { font-size: 10px; }
  .mrow-tennis-odds-tile { padding: 5px 5px; }
}

/* Filas compactas de partidos en el panel admin */
.admin-mrow-list { display: flex; flex-direction: column; gap: 8px; }
.admin-round-heading {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 22px 0 8px;
  padding: 6px 14px;
  border: none;
  background: var(--surface-2);
  border-radius: 999px;
  display: inline-block;
}
.admin-round-heading:first-child { margin-top: 0; }
.admin-mrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-right: 3px solid var(--border);
  border-radius: 12px 0 0 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .15s var(--ease);
}
.admin-mrow:hover { border-color: var(--blue); border-right-color: var(--blue); background: var(--surface-2); transform: translateY(-1px) translateX(-2px); }
.admin-mrow-teams { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-mrow-team-line { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; min-width: 0; }
.admin-mrow-team-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-mrow-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

@media (max-width: 560px) {
  .admin-mrow { flex-wrap: wrap; }
}

.day-filter-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
.day-filter-label { font-family: var(--display); font-size: 16px; min-width: 170px; text-align: center; text-transform: capitalize; }
@media (max-width: 400px) {
  .day-filter-bar { gap: 8px; }
  .day-filter-label { min-width: 0; flex: 1; font-size: 13.5px; }
}

@media (max-width: 560px) {
  .mrow, .mrow-header { --mrow-cols: 1fr 116px 50px 20px; gap: 6px; }
  .mrow { padding: 8px; }
  .mrow-header { padding: 0 8px; }
  .mrow-team-line .team-name { font-size: 12px; }
  .mrow-time-main { font-size: 11px; }
  .mrow-odds-tile { font-size: 11px; padding: 6px 2px; }
}
@media (max-width: 380px) {
  .mrow, .mrow-header { --mrow-cols: 1fr 100px 42px 16px; gap: 4px; }
  .mrow { padding: 7px 6px; }
  .mrow-odds-tile { padding: 6px 1px; font-size: 10px; }
  .mrow-team-line .team-name { font-size: 11px; }
  .mrow-time-main { font-size: 10px; }
  .team-crest, .team-crest-fallback { width: 15px !important; height: 15px !important; }
}

.status-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px 3px 8px;
  border-radius: 0 999px 999px 0;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-left: 2px solid currentColor;
}
.status-scheduled { background: var(--surface-2); color: var(--muted); }
.status-started { background: var(--red); color: #fff; animation: pulseLive 1.8s infinite; }
.status-started::before { content: '● '; }
.status-finished { background: var(--green-dim); color: var(--green); }
.status-postponed, .status-suspended { background: var(--amber); color: #241800; }

.stat-tile {
  text-align: center;
  padding: 16px 10px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.stat-tile:hover { transform: translateY(-3px); border-color: var(--green); animation: floatSoft 2.4s ease-in-out infinite; }

.match-header-card {
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  margin-bottom: 20px;
  animation: fadeInUp .4s var(--ease);
  position: relative;
  overflow: hidden;
}
.match-header-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 50% -40%, rgba(198,255,61,.12), transparent 70%);
  pointer-events: none;
}
.match-header-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  position: relative;
}
.match-header-teams .vs { color: var(--muted); font-size: 13px; background: var(--surface-2); padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); }
.match-header-team { display: inline-flex; align-items: center; gap: 9px; }
.match-header-meta { text-align: center; color: var(--muted); font-size: 12px; margin-top: 10px; position: relative; }

@media (max-width: 560px) {
  .match-header-teams { font-size: 16px; gap: 12px; flex-wrap: wrap; }
}

.category-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), rgba(0,0,0,.2) 100%);
  mask-image: linear-gradient(to right, black calc(100% - 28px), rgba(0,0,0,.2) 100%);
}
.category-scroll::-webkit-scrollbar { display: none; }
.category-scroll .tab { white-space: nowrap; scroll-snap-align: start; flex-shrink: 0; }

/* Pista visual (flechita) de que hay más pestañas para deslizar en móvil;
   se oculta sola cuando el usuario ya hizo scroll gracias al fade de máscara
   de arriba, pero además mostramos un pequeño indicador fijo en pantallas
   angostas para que sea evidente desde el primer vistazo. */
.scroll-hint { display: none; }
@media (max-width: 560px) {
  .tab { padding: 9px 12px; font-size: 12.5px; }
  .category-scroll { margin-bottom: 14px; }
  .scroll-hint {
    display: flex; align-items: center; gap: 4px;
    font-size: 10.5px; color: var(--muted); margin: -8px 0 12px; opacity: .75;
  }
  .scroll-hint svg { width: 12px; height: 12px; stroke: currentColor; fill: none; animation: scrollHintNudge 1.4s ease-in-out infinite; }
}
@keyframes scrollHintNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.match-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}
/* Clave para que el contenido interno (pestañas, grillas de cuotas) pueda
   scrollear horizontalmente DENTRO de su propia caja en vez de forzar a
   toda la columna del grid a estirarse más allá de la pantalla. Sin esto,
   un grid item nunca se encoge más que el ancho mínimo de su contenido, así
   que en celular el layout completo se ensancha y overflow-x:hidden del
   body termina recortando (no scrolleando) lo que sobra. */
.match-layout > * { min-width: 0; }
.betslip-col { position: sticky; top: calc(var(--topbar-h) + 16px); }

@media (max-width: 960px) {
  .match-layout { grid-template-columns: 1fr; }
  .betslip-col { display: none; }
}

.market-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  animation: fadeInUp .35s var(--ease);
  transition: border-color .2s var(--ease);
}
.market-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  transition: background .15s var(--ease);
}
.market-group-head:hover { background: var(--surface-2); }
.market-group-head:active { background: var(--surface-2); }
.market-group-title { font-family: var(--display); font-size: 15px; font-weight: 600; }
.market-group-chevron { color: var(--muted); font-size: 12px; transition: transform .3s var(--ease); }
.market-group.open .market-group-chevron { transform: rotate(180deg); color: var(--green); }
.market-group-body {
  display: grid;
  grid-template-rows: 0fr;
  min-width: 0;
  transition: grid-template-rows .3s var(--ease);
}
.market-group.open .market-group-body { grid-template-rows: 1fr; }
.market-group-body-inner { overflow: hidden; min-height: 0; min-width: 0; padding: 0 16px; }
.market-group.open .market-group-body-inner { padding: 0 16px 16px; }

.market-line { padding: 8px 0; border-top: 1px solid var(--border); }
.market-line:first-child { border-top: none; }

.odds-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.odds-row.exact-grid { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); }
/* 1er tiempo / resultado final: etiquetas largas ("Local / Local"), se
   necesitan columnas más anchas para que el texto no se corte. */
.odds-row.odds-row-wide { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }

.exact-score-inline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  /* Nunca desbordar el ancho de la tarjeta: si una celda no cabe, se encoge
     en vez de forzar scroll horizontal (evita que en celulares angostos
     solo se alcance a ver una parte de la grilla de marcadores exactos). */
  width: 100%;
  min-width: 0;
}
.exact-score-inline-grid .odds-tile { min-width: 0; }
.exact-score-inline-grid .odds-tile .label { white-space: nowrap; }
@media (max-width: 560px) {
  .exact-score-inline-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .exact-score-inline-grid .odds-tile { padding: 5px 4px; gap: 2px; }
  .exact-score-inline-grid .odds-tile .value { font-size: 10.5px; padding: 2px 4px; }
  .exact-score-inline-grid .odds-tile .label { font-size: 9.5px; }
}
@media (max-width: 480px) {
  .exact-score-inline-grid { gap: 4px; }
  .exact-score-inline-grid .odds-tile { padding: 4px 6px; }
  .exact-score-inline-grid .odds-tile .value { font-size: 11px; }
}
.odds-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: var(--mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.odds-tile:hover { border-color: var(--green); transform: translateY(-1px); }
.odds-tile:active { transform: translateY(0) scale(0.96); }
.odds-tile.selected { background: var(--green-dim); border-color: var(--green); animation: popIn .25s var(--ease); box-shadow: 0 3px 10px rgba(198,255,61,.22); }
.odds-tile .label {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  text-transform: uppercase;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
.odds-tile .value {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--amber);
  background: rgba(255, 201, 77, .12);
  padding: 2px 6px;
  border-radius: 5px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.odds-tile.selected .value { color: var(--green); background: rgba(77, 255, 154, .18); }
.odds-tile.locked { opacity: 0.4; cursor: not-allowed; }
.odds-tile.locked:hover { transform: none; border-color: var(--border); }

.odds-tile.odds-up .value { animation: oddsUpFlash 1.1s ease; }
.odds-tile.odds-down .value { animation: oddsDownFlash 1.1s ease; }
.odds-tile .odds-arrow { font-size: 11px; margin-left: 3px; opacity: 0; position: relative; top: -1px; }
.odds-tile.odds-up .odds-arrow { color: var(--green); opacity: 1; animation: oddsArrowFade 1.6s ease forwards; }
.odds-tile.odds-down .odds-arrow { color: var(--milan-red, #c8102e); opacity: 1; animation: oddsArrowFade 1.6s ease forwards; }

@keyframes oddsUpFlash {
  0% { color: var(--green); text-shadow: 0 0 10px rgba(198,255,61,.7); }
  100% { color: inherit; text-shadow: none; }
}
@keyframes oddsDownFlash {
  0% { color: var(--milan-red, #c8102e); text-shadow: 0 0 10px rgba(200,16,46,.7); }
  100% { color: inherit; text-shadow: none; }
}
@keyframes oddsArrowFade {
  0% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes mrowOddsUpFlash {
  0% { color: var(--green); background: rgba(198,255,61,.22); text-shadow: 0 0 8px rgba(198,255,61,.6); }
  100% { color: var(--amber); background: var(--surface-2); text-shadow: none; }
}
@keyframes mrowOddsDownFlash {
  0% { color: var(--milan-red, #c8102e); background: rgba(200,16,46,.18); text-shadow: 0 0 8px rgba(200,16,46,.6); }
  100% { color: var(--amber); background: var(--surface-2); text-shadow: none; }
}

.live-lock-banner {
  background: rgba(200, 16, 46, 0.12);
  border: 1px solid var(--milan-red, #c8102e);
  color: var(--text, #fff);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
.live-lock-banner-inline {
  margin-bottom: 0;
  padding: 4px 10px;
  font-size: 11px;
  white-space: nowrap;
}
.odds-tile.maxed { opacity: 0.45; }
.odds-tile.maxed:hover { transform: none; border-color: var(--border); }

.betslip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.betslip-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.betslip-count {
  background: var(--green);
  color: #04150a;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  animation: popIn .25s var(--ease);
}
.betslip-item {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13px;
  position: relative;
  animation: fadeInUp .25s var(--ease);
}
.betslip-item .remove {
  color: var(--red);
  cursor: pointer;
  float: right;
  font-weight: 700;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.betslip-item .remove:hover { background: rgba(239,90,111,.15); transform: scale(1.1); }
.betslip-total { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--amber); }
.betslip-clear { font-size: 12px; color: var(--muted); cursor: pointer; text-decoration: underline; transition: color .15s var(--ease); }
.betslip-clear:hover { color: var(--red); }
.betslip-stake { margin: 10px 0; }
.betslip-stake-slider { width: 100%; accent-color: var(--amber); height: 4px; cursor: pointer; }
.betslip-summary { background: var(--surface-2); border-radius: 8px; padding: 12px; margin: 12px 0; font-size: 13px; }
.betslip-summary-row { display: flex; justify-content: space-between; padding: 3px 0; }
.betslip-summary-row.win .value { color: var(--green); font-weight: 700; }
.betslip-summary-row.lose .value { color: var(--red); font-weight: 700; }

.betslip-bar {
  display: none;
}
.betslip-backdrop { display: none; }
.betslip-sheet { display: none; }

@media (max-width: 960px) {
  .betslip-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));
    background: var(--green);
    color: #04150a;
    padding: 12px 16px;
    border-radius: 14px;
    cursor: pointer;
    z-index: 45;
    box-shadow: 0 10px 30px rgba(198,255,61,.35);
    transform: translateY(120%);
    opacity: 0;
    transition: transform .3s var(--ease-sheet), opacity .3s var(--ease-sheet);
  }
  .betslip-bar.visible { transform: translateY(0); opacity: 1; }
  .betslip-bar-count {
    background: rgba(4,21,10,.2);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 20px;
    flex-shrink: 0;
  }
  .betslip-bar-label { font-weight: 700; font-size: 14px; flex: 1; }
  .betslip-bar-odds { font-family: var(--mono); font-weight: 700; font-size: 15px; flex-shrink: 0; }

  .betslip-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(4,8,14,.7);
    backdrop-filter: blur(2px);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease-sheet);
  }
  .betslip-backdrop.open { opacity: 1; pointer-events: auto; }

  .betslip-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    background: var(--surface);
    border-radius: 18px 18px 0 0;
    border-top: 1px solid var(--border);
    transform: translateY(100%);
    transition: transform .35s var(--ease-sheet);
    z-index: 56;
    box-shadow: 0 -12px 40px rgba(0,0,0,.5);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .betslip-sheet.open { transform: translateY(0); }
  .betslip-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 4px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }
  .betslip-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
  }
  .betslip-sheet-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: transform .15s var(--ease), background .15s var(--ease);
  }
  .betslip-sheet-close:hover { background: var(--red); border-color: var(--red); }
  .betslip-sheet-close:active { transform: scale(0.9); }
  .betslip-sheet-body { padding: 14px 16px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .betslip-sheet-body .betslip { border: none; padding: 0; background: transparent; }
}

.betslip-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4,8,14,.7);
  backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-sheet);
}
.betslip-panel-backdrop.open { opacity: 1; pointer-events: auto; }
.betslip-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 91;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  transform: translateX(100%);
  box-shadow: -12px 0 40px rgba(0,0,0,.5);
  transition: transform .3s var(--ease-sheet);
}
.betslip-panel.open { transform: translateX(0); }
.betslip-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.betslip-panel .betslip-sheet-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.betslip-panel .betslip-sheet-close:hover { background: var(--red); border-color: var(--red); }
@media (max-width: 480px) {
  .betslip-panel { width: 100vw; max-width: 100vw; }
}

input, select, textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(198,255,61,.15);
}
label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.field { margin-bottom: 14px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }

/* --- Últimas 5 (forma) --- */
.form-chips { display: flex; gap: 4px; }
.form-chip {
  width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-family: var(--mono);
}
.form-w { background: var(--green-dim); color: var(--green); }
.form-l { background: rgba(255, 77, 106, .16); color: var(--red); }
.form-d { background: var(--surface-2); color: var(--muted); }

/* --- Zonas de clasificación (barra de color + leyenda) --- */
.standings-position-cell { border-left: 4px solid transparent; font-weight: 700; }
.standings-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 4px; }
.standings-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.standings-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

/* --- Rankings de equipos por competencia (goles, faltas, tarjetas) --- */
.ranking-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ranking-card { display: flex; flex-direction: column; }
.ranking-card-title { margin: 0 0 10px; font-family: var(--display); font-size: 15px; }
.ranking-list, .ranking-full-list { display: flex; flex-direction: column; gap: 4px; }
.ranking-full-list { max-height: 60vh; overflow-y: auto; }
.ranking-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px;
  transition: background .15s var(--ease);
}
.ranking-row.top { background: var(--green-dim); }
.ranking-row.top .ranking-row-pos, .ranking-row.top .ranking-row-value { color: var(--green); }
.ranking-row-pos { width: 18px; flex-shrink: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 700; }
.ranking-row-name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-row-value { font-family: var(--mono); font-weight: 700; font-size: 13px; white-space: nowrap; }
.ranking-row-suffix { font-family: var(--body); font-weight: 400; color: var(--muted); font-size: 11px; }
.ranking-more-btn { margin-top: 10px; align-self: flex-start; }

/* --- Reglas de clasificación (drag & drop) --- */
.rule-list { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.rule-item {
  display: flex; align-items: center; gap: 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: grab; user-select: none;
}
.rule-item:active { cursor: grabbing; }
.rule-item.dragging { opacity: .4; }
.rule-item .rule-handle { color: var(--muted); font-size: 14px; letter-spacing: 1px; }
.rule-item .rule-order { font-family: var(--mono); font-size: 12px; color: var(--green); font-weight: 700; width: 18px; flex-shrink: 0; }
.rule-item .rule-label { flex: 1; font-size: 13px; }
.rule-available {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: transparent; border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--muted);
}

/* --- Selector de posiciones para una clasificación --- */
.position-grid { display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; }
.position-check {
  width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s var(--ease);
}
.position-check.active { background: var(--green-dim); border-color: var(--green); color: var(--green); }

/* --- Zonas / clasificaciones en el panel admin --- */
.zone-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.zone-row:last-child { border-bottom: none; }
.zone-swatch { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.zone-positions { font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* --- Fila de competencia clickeable en admin --- */
.admin-comp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer; transition: all .15s var(--ease);
}
.admin-comp-row:hover { border-color: var(--green); background: var(--surface-2); transform: translateY(-1px); }
.admin-comp-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-comp-row-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-comp-row-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
th, td { padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 11px; }
tbody tr { transition: background .15s var(--ease); }
tbody tr:hover { background: rgba(255,255,255,.02); }
tr.highlight { background: rgba(52, 209, 124, 0.06); }

.tabs {
  display: flex; gap: 4px; margin-bottom: 18px; border-bottom: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), rgba(0,0,0,.25) 100%);
  mask-image: linear-gradient(to right, black calc(100% - 28px), rgba(0,0,0,.25) 100%);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 9px 18px;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 999px;
  border-bottom: none;
  white-space: nowrap;
  transition: color .18s var(--ease), background .22s var(--ease), transform .15s var(--ease);
  scroll-snap-align: start;
  flex-shrink: 0;
}
.tab:hover { color: var(--text); }
.tab.active { color: #10041f; background: linear-gradient(120deg, var(--green), var(--blue)); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(198,255,61,.25); }

.stat-tile { text-align: center; }
.stat-tile .num {
  font-family: var(--mono); font-size: 28px; font-weight: 700;
  background: linear-gradient(120deg, var(--green), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-tile .lbl { font-size: 12px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.stat-tile:hover { transform: translateY(-3px); border-color: var(--green); }

.badge-earned { border-color: var(--green) !important; }
.achievement { opacity: 0.4; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.achievement.earned { opacity: 1; }
.achievement:hover { transform: translateY(-3px); }

.toast-container {
  position: fixed;
  top: calc(var(--topbar-h) + 14px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.toast-item {
  pointer-events: auto;
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--green);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  max-width: min(360px, calc(100vw - 32px));
  opacity: 0;
  transform: translateY(-10px) scale(.97);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast-item.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-item.hide { opacity: 0; transform: translateY(-6px) scale(.97); transition-duration: .4s; }
.toast-item.error { border-color: var(--red); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); animation: fadeInUp .3s var(--ease); }
.empty-state .big { font-family: var(--display); font-size: 20px; color: var(--text); margin-bottom: 6px; }

.auth-wrap { max-width: 380px; margin: 40px auto; }

.player-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  flex-wrap: wrap;
}
.player-row:first-child { border-top: none; }
.player-row-name { font-weight: 600; }
.player-row-meta { color: var(--muted); font-size: 12px; }
.player-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.player-row-trends { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.player-row-trend-item { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; }
.player-row-trend-item .trend-badge { width: 16px; height: 16px; font-size: 10px; }
.player-edit-form { background: var(--surface-2); border-radius: 8px; padding: 12px; margin-top: 8px; }

/* --- Flechas de tendencia (subió/se mantuvo/bajó) al editar stats --- */
.trend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.trend-badge.trend-up { color: var(--green); background: rgba(77, 255, 154, .14); }
.trend-badge.trend-down { color: var(--red); background: rgba(255, 77, 106, .14); }
.trend-badge.trend-flat { color: var(--muted); background: var(--surface-2); }

.player-attr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 10px 0; }
.player-attr-field label { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.player-attr-input-row { display: flex; align-items: center; gap: 6px; }
.player-attr-input-row input { flex: 1; min-width: 0; }

.player-grl-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; margin: 4px 0 2px;
}
.player-grl-label { font-size: 12px; color: var(--muted); flex: 1; }
.player-grl-value { font-family: var(--mono); font-size: 16px; font-weight: 700; }

.team-modal-players-head { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 4px; }
.team-modal-players-head h3 { font-family: var(--display); font-size: 15px; }
.team-modal-players { max-height: 260px; overflow-y: auto; }
.team-page-players { margin-top: 4px; }


.admin-odds-block { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.admin-odds-market { margin-bottom: 10px; }
.admin-odds-market-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.admin-odds-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-odds-option { display: flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; }
.admin-odds-option .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.admin-odds-option input { width: 64px; padding: 4px 6px; font-size: 12px; }

.mobile-tabbar { display: none; }

@media (max-width: 960px) {
  :root { --topbar-h: 54px; }
  .main-nav { display: none; }
  .view { padding: 18px 14px calc(var(--tabbar-h) + 36px + env(safe-area-inset-bottom)); }
  .page-title { font-size: 22px; }
  .topbar-inner { padding: 0 14px; gap: 12px; }
  .brand { font-size: 19px; }

  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    height: var(--tabbar-h);
    margin: 0 auto;
    max-width: 460px;
    padding: 0 6px;
    background: rgba(20, 10, 38, 0.86);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--border);
    border-radius: 999px;
    z-index: 50;
    justify-content: space-around;
    align-items: stretch;
    box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(198,255,61,.05) inset;
  }
  .mobile-tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    border-radius: 999px;
    margin: 6px 2px;
    transition: color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
  }
  .mobile-tabbar a svg { width: 19px; height: 19px; stroke: currentColor; fill: none; transition: transform .18s var(--ease); }
  .mobile-tabbar a.active { color: #10041f; background: linear-gradient(120deg, var(--green), var(--blue)); }
  .mobile-tabbar a.active svg { transform: translateY(-1px) scale(1.05); }
  .mobile-tabbar a:active { transform: scale(0.92); }
}

@media (max-width: 420px) {
  .odds-row { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
  .match-header-teams { font-size: 15px; }
}
@media (max-width: 380px) {
  .odds-row { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 5px; }
  .odds-row.odds-row-wide { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .odds-tile { padding: 5px 6px; gap: 3px; }
  .odds-tile .label { font-size: 9.5px; }
  .odds-tile .value { font-size: 11px; padding: 2px 4px; }
}

/* ---- Modal genérico ---- */
.sw-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 7, 13, .72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.sw-modal-backdrop.open { opacity: 1; }
.sw-modal {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transform: translateY(10px) scale(.98);
  transition: transform .2s var(--ease);
  overflow: hidden;
}
.sw-modal-backdrop.open .sw-modal { transform: translateY(0) scale(1); }
.sw-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.sw-modal-head h3 { margin: 0; font-family: var(--display); font-size: 17px; }
.sw-modal-close {
  cursor: pointer; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--muted); transition: all .15s var(--ease);
}
.sw-modal-close:hover { background: var(--red); color: #fff; }
.sw-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
.sw-modal-body label { font-size: 11px; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 4px; }
.sw-modal-body .field { display: flex; flex-direction: column; }
.sw-modal-body .field-checkbox {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; text-transform: none; color: var(--text); margin-bottom: 0;
}
.sw-modal-body .field-checkbox input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }
.sw-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); }

/* ---- Tarjeta "Mis apuestas de este partido" (pestaña dentro del detalle
   del partido) ---- */
.match-mybets { padding: 16px; }
.match-mybets .bet-ticket { margin-bottom: 12px; }
.match-mybets .bet-ticket:last-child { margin-bottom: 0; }

/* ---- "Eventos del partido" (pestaña) ---- */
.live-events { padding: 16px; }

/* ---- Apuestas en vivo (pestaña) ---- */
.live-betting.card { padding: 16px; }

/* ---- Panel de estado del partido en vivo ---- */
.live-panel {
  background: linear-gradient(180deg, rgba(19,27,45,.85), rgba(10,14,24,.9));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  overflow: hidden;
  box-shadow: var(--glow);
}

.live-phase-row {
  display: flex; gap: 8px; padding: 14px; flex-wrap: wrap;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.live-phase-btn {
  flex: 1 1 90px; min-width: 74px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.live-phase-btn:hover:not(:disabled) { border-color: var(--green); transform: translateY(-2px); }
.live-phase-btn:disabled { opacity: .3; cursor: not-allowed; }
.live-phase-btn.next { border-color: var(--green); color: var(--green); box-shadow: 0 0 0 1px rgba(198,255,61,.25); }
.live-phase-btn.danger { border-color: var(--red); color: var(--red); }

.live-scoreboard {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; padding: 22px 14px;
}
.live-scoreboard .side { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 110px; }
.live-scoreboard .side .live-team-name { font-family: var(--display); font-weight: 700; font-size: 13px; text-align: center; }
.live-goal-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--green);
  font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.live-goal-btn:hover:not(:disabled) { border-color: var(--green); background: var(--green-dim); transform: scale(1.08); }
.live-goal-btn:disabled { opacity: .3; cursor: not-allowed; }
.live-score-center { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 90px; }
.live-score-value {
  font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center; gap: 8px; line-height: 1;
}
.live-score-value .goal-score-digit { min-width: 1ch; }
.live-score-pens { font-size: 11px; color: var(--amber); font-weight: 700; }
.live-clock {
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 12px; display: flex; align-items: center; gap: 6px;
}
.live-clock .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.live-clock.running .dot { background: var(--red); animation: pulseLive 1.4s infinite; }
.live-phase-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* Debajo del marcador: TODOS los goleadores del partido, en dos columnas
   (local a la izquierda, visitante a la derecha) — match.js,
   buildGoalScorersBoard(). Si un jugador anotó varias veces, sus minutos
   quedan juntos en la misma línea en vez de repetir su nombre. */
.live-scorers-board {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 14px 4px; border-top: 1px solid var(--border);
}
.live-scorers-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.live-scorers-col.away { align-items: flex-end; text-align: right; }
.live-scorers-row {
  display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text);
  min-width: 0;
}
.live-scorers-col.away .live-scorers-row { flex-direction: row-reverse; }
.live-scorers-ball { font-size: 11px; flex: 0 0 auto; }
.live-scorers-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-scorers-mins {
  font-family: var(--mono); font-size: 10.5px; font-weight: 800; color: var(--muted); flex: 0 0 auto;
}

@media (max-width: 420px) {
  .live-scoreboard { gap: 8px; padding: 16px 8px; }
  .live-scoreboard .side { width: 78px; }
  .live-scoreboard .side .live-team-name { font-size: 11px; }
  .live-goal-btn { width: 36px; height: 36px; font-size: 18px; }
  .live-score-center { min-width: 60px; }
  .live-score-value { font-size: 26px; }
  .live-scorers-row { font-size: 11px; }
}

/* Marcador de tenis en vivo: tabla con sets/games/puntos por jugador,
   estilo casa de apuestas (referencia: WTA Monterrey). */
.tennis-comp-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 0; font-size: 13px; color: var(--muted); font-weight: 600;
}
.tennis-set-game-badge {
  margin: 8px 16px 0; padding: 4px 10px; width: fit-content;
  background: var(--green-dim); color: var(--green);
  border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.tennis-score-table { padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 10px; }
.tennis-score-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tennis-score-player { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.tennis-score-name { font-family: var(--display); font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tennis-serve-dot { font-size: 12px; width: 14px; flex-shrink: 0; }
.tennis-score-cells { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.tennis-score-cell {
  font-family: var(--mono); font-weight: 700; font-size: 15px;
  min-width: 20px; text-align: center;
}
.tennis-score-cell.muted { color: var(--muted); font-weight: 600; font-size: 14px; }
.tennis-score-cell.current { color: var(--text); background: var(--surface-2); border-radius: 6px; padding: 2px 8px; }
.tennis-score-cell.current.highlight { color: var(--green); background: var(--green-dim); }
.tennis-total-games { text-align: center; color: var(--muted); font-size: 12.5px; padding: 6px 16px 0; }
.tennis-game-status {
  margin: 10px 16px 0; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 8px; justify-content: center; text-align: center;
}
.tennis-break-tag {
  background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 5px;
}
.tennis-sets-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px 0; }
.tennis-set-pill {
  font-size: 11.5px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 10px; font-family: var(--mono);
}
.tennis-stats-line { color: var(--muted); font-size: 11.5px; padding: 10px 16px 16px; text-align: center; }
@media (max-width: 420px) {
  .tennis-score-name { font-size: 13px; }
  .tennis-score-cell { font-size: 13px; }
  .tennis-score-cells { gap: 10px; }
}

/* Variante del marcador de tenis usada en el panel de admin: mismas filas
   que el marcador público, pero con el botón "+" integrado a la derecha de
   cada jugador para registrar el punto sin tener que buscarlo aparte. */
.tennis-score-table-admin { padding: 10px 14px; gap: 8px; }
.tennis-score-table-admin .tennis-score-row {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 10px 8px 12px; gap: 10px;
}
.tennis-score-table-admin .live-goal-btn { width: 34px; height: 34px; font-size: 18px; flex-shrink: 0; }

/* Fila de "juego" en la línea de tiempo de tenis (admin y pública): nombre
   de quien sacó ese game con el ícono de pelota, y quién ganó el juego. */
.tennis-timeline-row { align-items: flex-start; }
.tennis-timeline-serve { font-weight: 700; }
.tennis-timeline-row .sub { display: flex; align-items: center; gap: 6px; }

.live-quickevents {
  display: flex; gap: 8px; padding: 12px 14px; flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.015);
}
.live-quick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px; min-width: 74px; max-width: 110px;
  color: var(--text); cursor: pointer; font-size: 10px; text-align: center;
  line-height: 1.25; word-break: break-word; hyphens: auto;
  transition: all .18s var(--ease);
}
.live-quick-btn:hover:not(:disabled) { border-color: var(--amber); transform: translateY(-2px); }
.live-quick-btn:disabled { opacity: .3; cursor: not-allowed; }
.live-quick-btn.active { color: var(--bg); background: var(--green); border-color: var(--green); }
.live-quick-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

/* =========================================================
   CANCHA GRÁFICA (pitch.js) — modo lectura (usuario) y modo
   carga rápida (admin), reutilizado en match.js y
   admin-match-control.js.
   ========================================================= */
.pitch-wrap {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: var(--surface-2);
}
.pitch-svg-host { position: relative; }
.pitch-svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.pitch-admin .pitch-svg { cursor: crosshair; }
.pitch-empty {
  padding: 14px; text-align: center; color: var(--muted); font-size: 12.5px;
}
.pitch-label {
  background: rgba(10, 1, 24, .88); border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px; padding: 4px 7px; color: #fff; font-family: var(--body);
  line-height: 1.25; height: 100%; box-sizing: border-box; overflow: hidden;
}
.pitch-label-title { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pitch-label-sub { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pitch-team-toggle {
  display: flex; gap: 6px; padding: 10px 12px 0;
}
.pitch-team-btn {
  flex: 1; padding: 8px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s var(--ease);
}
.pitch-team-btn.active { color: var(--bg); background: var(--green); border-color: var(--green); }

.pitch-hint {
  padding: 8px 12px 12px; font-size: 11px; color: var(--muted); text-align: center;
}
.pitch-hint-armed { color: var(--amber); font-weight: 700; animation: pitchHintPulse 1s ease-in-out infinite; }
@keyframes pitchHintPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Leyenda de estadísticas de la cancha admin (pitch.js, buildPitchStatLegend):
   un chip por tipo de evento cargado. Por defecto la cancha solo dibuja el
   último de cada uno; tocar un chip muestra todos los de ese tipo (línea
   completa de tiros incluida) y el detalle abajo. */
.pitch-legend {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; justify-content: center;
}
.pitch-legend-chip {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px; padding: 4px 9px 4px 7px; font-size: 11px; font-weight: 600;
  color: var(--text); cursor: pointer; transition: all .15s var(--ease);
}
.pitch-legend-chip:hover { background: rgba(255,255,255,.09); }
.pitch-legend-chip.active {
  background: color-mix(in srgb, var(--chip-color, var(--blue)) 22%, transparent);
  border-color: var(--chip-color, var(--blue)); color: #fff;
}
.pitch-legend-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--chip-color, var(--blue)); flex-shrink: 0;
}
.pitch-legend-count {
  font-size: 9.5px; opacity: .7; background: rgba(0,0,0,.25); border-radius: 999px; padding: 1px 5px;
}
.pitch-legend-detail { padding: 0 14px 12px; }
.pitch-legend-detail-title { font-size: 11px; font-weight: 800; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.pitch-legend-detail-list { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.pitch-legend-detail-row {
  font-size: 12px; padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,.04);
  border-left: 2px solid rgba(255,255,255,.15);
}

/* Panel "📊 Estadísticas" (match.js, vista de usuarios): filas comparativas
   local vs visitante con una barra proporcional entre ambos valores. */
.stat-compare-list { display: flex; flex-direction: column; gap: 14px; }
.stat-compare-row { display: flex; align-items: center; gap: 12px; }
.stat-compare-value {
  flex: 0 0 30px; text-align: center; font-weight: 700; font-size: 15px;
}
.stat-compare-mid { flex: 1; min-width: 0; }
.stat-compare-label {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11.5px; color: var(--muted); margin-bottom: 5px; text-align: center;
}
.stat-compare-bar {
  display: flex; height: 6px; border-radius: 4px; overflow: hidden;
  background: var(--surface-2);
}
.stat-compare-fill { height: 100%; }
.stat-compare-fill.home { background: var(--red); }
.stat-compare-fill.away { background: var(--green); }

/* Estadísticas personalizadas sin jugador (sin equipo asignado): totales
   únicos del partido, sin comparación local/visitante. */
.stat-total-list { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.stat-total-heading {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; margin-bottom: 8px;
}
.stat-total-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; font-size: 13px;
}
.stat-total-label { display: flex; align-items: center; gap: 7px; color: var(--text); }
.stat-total-value { font-weight: 700; color: var(--amber); }

/* =========================================================
   CARTEL DE GOL DENTRO DE LA CANCHA (match.js, buildGoalOverlay)
   Estilo "casa de apuestas" (Betano y similares): fondo oscurecido,
   marcador con efecto scroll, escudo, jugador y minuto. Acotado al card
   de la pestaña "Cancha" (.pitch-tab-card), NO a toda la pantalla.
   ========================================================= */
.pitch-tab-card { position: relative; overflow: hidden; }

.pitch-goal-overlay-host { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pitch-goal-overlay-host:empty { display: none; }

.goal-overlay-backdrop {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(10,60,30,.6) 0%, rgba(4,7,13,.94) 68%);
  backdrop-filter: blur(4px);
  border-radius: var(--radius) var(--radius) var(--radius) 4px;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.goal-overlay-backdrop.show { opacity: 1; pointer-events: auto; }
.goal-overlay-backdrop.hide { opacity: 0; }

.goal-overlay-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; padding: 22px 20px; max-width: 300px;
  opacity: 0; transform: scale(.4) translateY(30px);
}
.goal-overlay-backdrop.show .goal-overlay-card { animation: goalCardIn .6s cubic-bezier(.22,1.5,.4,1) forwards; }
.goal-overlay-backdrop.hide .goal-overlay-card { animation: goalCardOut .32s ease forwards; }
@keyframes goalCardIn {
  0% { transform: scale(.3) translateY(40px); opacity: 0; }
  55% { transform: scale(1.1) translateY(-6px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes goalCardOut { to { transform: scale(.86) translateY(-14px); opacity: 0; } }

.goal-overlay-card.home { --goal-accent: var(--red); }
.goal-overlay-card.away { --goal-accent: var(--green); }

.goal-overlay-rays {
  position: absolute; inset: -160px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.10) 0deg 6deg, transparent 6deg 20deg);
  mask-image: radial-gradient(circle, #000 42%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 74%);
  animation: goalRaysSpin 10s linear infinite;
}
@keyframes goalRaysSpin { to { transform: rotate(360deg); } }

.goal-overlay-particles { position: absolute; inset: 0; pointer-events: none; }
.goal-overlay-particles span {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px;
  border-radius: 2px; background: var(--amber); opacity: 0;
  transform: rotate(var(--ang)) translateY(0) scale(1);
}
.goal-overlay-backdrop.show .goal-overlay-particles span {
  animation: goalParticleFly .95s ease-out forwards;
  animation-delay: calc(.12s + var(--delay, 0s));
}
@keyframes goalParticleFly {
  0% { transform: rotate(var(--ang)) translateY(0) scale(1); opacity: 1; }
  100% { transform: rotate(var(--ang)) translateY(-110px) scale(.2); opacity: 0; }
}

.goal-overlay-crest { margin-bottom: 4px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.goal-overlay-title {
  font-family: var(--display); font-weight: 900; font-size: 32px; letter-spacing: .04em;
  color: var(--green); text-shadow: 0 0 20px rgba(60,220,120,.55), 0 2px 0 rgba(0,0,0,.4);
  animation: goalTitlePulse 1s ease-in-out infinite; margin-top: 2px;
}
@keyframes goalTitlePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.goal-overlay-score {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono); font-weight: 800; font-size: 40px; color: #fff; line-height: 1;
  margin: 4px 0 2px; text-shadow: 0 4px 18px rgba(0,0,0,.5);
}
.goal-score-sep { color: var(--muted); font-size: 26px; }

/* Dígito con efecto "scroll" (odómetro): el número anterior se lee arriba,
   el nuevo abajo, y una animación sube el track para que el cambio se vea
   como un scroll (ej. 2 -> 3) en vez de un salto seco de texto. */
.goal-score-digit { display: inline-block; min-width: 1.1ch; text-align: center; }
.goal-score-digit-scroll {
  height: 1em; overflow: hidden; vertical-align: top;
}
.goal-score-digit-track {
  display: flex; flex-direction: column;
  animation: goalScoreScroll .65s .55s cubic-bezier(.3,.86,.36,1) forwards;
}
.goal-score-digit-cell { height: 1em; line-height: 1; }
@keyframes goalScoreScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
/* Marcador estilo "match card" dentro del cartel de gol: escudo+nombre a
   cada lado, resultado al centro y píldora roja con el minuto debajo —
   mismo estilo visual que el marcador de la lista de partidos. */
.goal-overlay-matchcard {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; max-width: 280px;
  background: rgba(8,11,16,.72); border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 8px 14px; margin: 6px 0 2px;
}
.gmc-team { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; }
.gmc-team.away { flex-direction: row-reverse; }
.gmc-name {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 2px solid var(--muted); padding-bottom: 2px;
}
.gmc-team.home .gmc-name { border-color: var(--green); }
.gmc-team.away .gmc-name { border-color: var(--blue); }
.gmc-center { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; }
.gmc-score {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-weight: 900; font-size: 22px; color: #fff; line-height: 1;
}
.gmc-minute {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; color: #fff; background: var(--red);
  border-radius: 999px; padding: 2px 8px;
}
.gmc-minute .dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }

.goal-overlay-pens { font-size: 12px; color: var(--amber); font-weight: 700; margin-bottom: 2px; }
.goal-overlay-teams { font-size: 12px; color: var(--muted); }
.goal-overlay-scorer {
  font-size: 16px; font-weight: 800; color: #fff; margin-top: 10px;
  padding-top: 8px; border-top: 2px solid var(--goal-accent, var(--amber));
}
.goal-overlay-type {
  font-size: 10.5px; color: var(--amber); text-transform: uppercase; letter-spacing: .07em; margin-top: 3px;
}

@media (max-width: 380px) {
  .goal-overlay-title { font-size: 26px; }
  .goal-overlay-score { font-size: 38px; }
  .goal-overlay-scorer { font-size: 14px; }
}

/* --- Cancha en vivo (solo el último evento) --- */
/* La animación de tiro y de punto ahora se arma 100% con SMIL (<animate>/
   <animateMotion> generados en pitch.js: liveShotSVG/liveMarkerSVG), no con
   CSS: así se anima el x2/y2 de la línea (el tiro "se dibuja" desde el
   origen hasta el destino en vez de aparecer ya trazado) sin pelearse con
   el bug de transform-origin en SVG (ver más abajo, pitch-live-result). */
.pitch-live-empty {
  padding: 30px 10px; text-align: center; font-size: 12px; color: var(--muted);
}
.pitch-wrap-live { position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }

/* Pastilla "● EN VIVO" pulsante sobre la cancha en vivo, estilo tracker de
   partido de una app de resultados. */
.pitch-live-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  background: rgba(10,1,24,.72); backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: 4px 9px 4px 7px; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  color: #fff; font-family: var(--display);
}
.pitch-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 0 rgba(var(--red-rgb, 255, 59, 59), .7);
  animation: pitchLiveDotPulse 1.4s ease-in-out infinite;
}
@keyframes pitchLiveDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, .55); }
  70% { box-shadow: 0 0 0 7px rgba(255, 59, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}

/* Estela de la pelota en el tiro animado (liveShotSVG): sombra suave que
   refuerza la sensación de movimiento/velocidad. */
.pitch-live-shot-anim { filter: drop-shadow(0 0 6px rgba(0,0,0,.35)); }
.pitch-live-point-anim { filter: drop-shadow(0 0 5px rgba(0,0,0,.3)); }

/* Chip pequeño (círculo con ícono) en el punto exacto del evento: ocupa un
   lugar mínimo sobre la cancha, nunca la tapa. Al tocarlo se abre el
   detalle completo en un modal aparte (ver .pitch-live-modal-*). Usa
   `transform-box: fill-box` + `transform-origin: center` porque, en SVG, el
   origen de una transformación CSS por defecto se calcula respecto al
   viewBox COMPLETO de la cancha (0,0 a 600x380) y no respecto al propio
   chip: sin esto se veía "viajar" desde la esquina en vez de aparecer en su
   lugar. */
.pitch-live-chip {
  cursor: pointer;
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: pitchLiveChipIn .4s var(--ease) both;
}
.pitch-live-chip text { pointer-events: none; user-select: none; }
@keyframes pitchLiveChipIn {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: scale(1); }
}

/* Cartelito chico y siempre visible al lado del chip (dentro de la
   cancha), con el icono + título del evento en una sola línea. Tocarlo
   abre el mismo modal de detalle que el chip (es hijo de .pitch-live-chip,
   así que hereda su click). Ocupa poco lugar y nunca tapa la cancha. */
.pitch-live-label {
  height: 100%;
  display: flex; align-items: center;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(10,1,24,.88);
  border-left: 3px solid;
  border-radius: 4px;
  padding: 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* Contenido del modal de detalle de un evento de la cancha en vivo
   (abierto al tocar el chip; ver openLiveResultModal en pitch.js). */
.pitch-live-modal-title {
  font-size: 15px; font-weight: 800; color: #fff; font-family: var(--body);
  border-left: 3px solid #fff; padding-left: 10px;
}
.pitch-live-modal-sub { font-size: 13px; color: var(--muted); margin-top: 6px; padding-left: 13px; }

.pitch-picker {
  position: fixed; z-index: 500; background: var(--surface-2);
  /* posición relativa para el botón ✕ absoluto */
  border: 1px solid var(--border); border-radius: 14px; padding: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); max-width: 220px;
  animation: pitchPickerIn .12s var(--ease);
}
@keyframes pitchPickerIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.pitch-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pitch-picker-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 4px; color: var(--text); cursor: pointer; font-size: 15px;
}
.pitch-picker-btn:hover { border-color: var(--amber); }
.pitch-picker-label { font-size: 9px; color: var(--muted); text-align: center; line-height: 1.15; }
.pitch-picker-players { display: flex; flex-direction: column; gap: 5px; max-height: 220px; overflow-y: auto; }
.pitch-picker-player {
  text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 12.5px; cursor: pointer;
}
.pitch-picker-player:hover { border-color: var(--amber); }
.pitch-picker-close {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff; border: none; font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.live-timeline { border-top: 1px solid var(--border); }
.live-timeline-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.live-timeline-row .tl-icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border);
}
.live-timeline-row .tl-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.live-timeline-row .tl-minute { font-family: var(--mono); color: var(--muted); width: 34px; flex-shrink: 0; }
.live-timeline-row .tl-info { flex: 1; min-width: 0; }
.live-timeline-row .tl-info .main { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-timeline-row .tl-info .sub { color: var(--muted); font-size: 11px; }
.live-timeline-row .tl-score { font-family: var(--mono); font-weight: 700; color: var(--amber); flex-shrink: 0; }
.live-timeline-row .tl-actions { display: flex; gap: 4px; flex-shrink: 0; }
.live-timeline-row .tl-action {
  width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); transition: all .15s var(--ease);
}
.live-timeline-row .tl-action:hover { background: var(--surface-2); color: var(--text); }
.live-timeline-row .tl-action.tl-delete:hover { color: var(--red); }
.live-timeline-row .tl-action.tl-edit:hover { color: var(--green); }
.live-timeline-sep {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 14px; background: rgba(255,255,255,.03);
  font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .06em;
  color: var(--muted); border-bottom: 1px solid var(--border);
}
.live-timeline-empty { padding: 20px 14px; text-align: center; color: var(--muted); font-size: 13px; }

/* --- Boletas de pronóstico estilo ticket (vista "Mis pronósticos") --- */
.bet-ticket {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 14px 20px;
  margin-bottom: 14px;
  overflow: hidden;
  animation: fadeInUp .35s var(--ease);
}
.bet-ticket::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--muted);
}
.bet-ticket.status-won::before { background: var(--green); }
.bet-ticket.status-lost::before { background: var(--red); }
.bet-ticket.status-pending::before { background: var(--amber); }
.bet-ticket.status-cancelled::before { background: var(--muted); }
.bet-ticket.status-cashed_out::before { background: var(--blue); }

.bet-ticket-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--border);
}
.bet-ticket-title { font-family: var(--display); font-weight: 700; font-size: 15px; }
.bet-ticket-title .status-text { margin-left: 4px; }
.bet-ticket-title .status-text.status-won { color: var(--green); }
.bet-ticket-title .status-text.status-lost { color: var(--red); }
.bet-ticket-title .status-text.status-pending { color: var(--amber); }
.bet-ticket-title .status-text.status-cancelled { color: var(--muted); }
.bet-ticket-title .status-text.status-cashed_out { color: var(--blue); }
.cashout-widget .cashout-value { font-size: 13px; }
.cashout-widget button:disabled { opacity: 0.6; cursor: not-allowed; }
.bet-ticket-meta { text-align: right; font-size: 11px; color: var(--muted); line-height: 1.6; white-space: nowrap; }
@media (max-width: 480px) {
  .bet-ticket-meta { white-space: normal; text-align: left; }
  .bet-ticket { padding: 14px 14px 12px 16px; }
}

.bet-ticket-sel { margin: 9px 0; }
.bet-ticket-sel-market { font-weight: 700; font-size: 13px; color: var(--text); }
.bet-ticket-sel-detail { font-size: 13px; margin-top: 2px; display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.bet-ticket-sel-detail .mark { font-weight: 700; flex-shrink: 0; }
.bet-ticket-sel-detail > span:last-child { min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.bet-ticket-sel-detail.result-won { color: var(--green); }
.bet-ticket-sel-detail.result-won .mark { color: var(--green); }
.bet-ticket-sel-detail.result-lost { color: var(--red); }
.bet-ticket-sel-detail.result-lost .mark { color: var(--red); }
.bet-ticket-sel-detail.result-pending { color: var(--blue, #4dc9ff); }
.bet-ticket-sel-detail.result-void { color: var(--muted); text-decoration: line-through; }

/* ---- Barra de progreso en vivo (estilo Betano) para selecciones de Total
   de goles / Tarjetas / Juegos del partido dentro de "Mis pronósticos" y
   "Mis apuestas en este partido". Solo es informativa: el resultado real
   (ganada/perdida) se sigue decidiendo al finalizar el partido. ---- */
.bet-progress { margin: 6px 0 2px; }
.bet-progress-labels {
  display: flex; justify-content: space-between; font-size: 11px;
  color: var(--muted); margin-bottom: 3px; font-weight: 600;
}
.bet-progress-track {
  position: relative; width: 100%; height: 6px; border-radius: 6px;
  background: var(--surface-2, rgba(255,255,255,.08)); overflow: hidden;
}
.bet-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px;
  width: 0%; transition: width 0.7s cubic-bezier(.22,1,.36,1);
}
.bet-progress-fill.over { background: linear-gradient(90deg, var(--green-dim), var(--green)); }
.bet-progress-fill.under { background: linear-gradient(90deg, #4a1420, var(--red)); }
.bet-progress-fill.bump { animation: bet-progress-bump 0.7s ease; }
@keyframes bet-progress-bump {
  0% { filter: brightness(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
  35% { filter: brightness(1.6); box-shadow: 0 0 10px currentColor; }
  100% { filter: brightness(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
}
.bet-progress-fill.over.bump { box-shadow: 0 0 10px var(--green); }
.bet-progress-fill.under.bump { box-shadow: 0 0 10px var(--red); }

.bet-ticket-footer {
  display: flex; justify-content: flex-end; align-items: center; gap: 14px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 13px; color: var(--muted);
}
.bet-ticket-footer b { color: var(--text); font-family: var(--mono); }

/* Campanita de notificaciones */
.notif-bell { display: inline-flex; align-items: center; justify-content: center; }
.notif-unread { border-left: 3px solid var(--amber, #f5a623); }

/* ===== Rediseño de competencias: avatar + panel deslizante + wizard ===== */

.profile-avatar-btn {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; margin-left: 10px;
  background: var(--primary, #c6ff3d); color: #04140c; font-weight: 700;
  font-size: 13px; cursor: pointer; user-select: none; flex-shrink: 0;
}

.profile-slide-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0;
  pointer-events: none; transition: opacity .2s ease; z-index: 200;
}
.profile-slide-backdrop.open { opacity: 1; pointer-events: auto; }
.profile-slide-panel {
  position: fixed; top: 0; left: 0; bottom: 0; width: 340px; max-width: 90vw;
  background: var(--panel, #0e1420); border-right: 1px solid rgba(255,255,255,.08);
  transform: translateX(-100%); transition: transform .25s ease; z-index: 201;
  display: flex; flex-direction: column; overflow-y: auto;
}
.profile-slide-panel.open { transform: translateX(0); }
.profile-slide-head {
  display: flex; align-items: center; gap: 10px; padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.profile-slide-avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--primary, #c6ff3d);
  color: #04140c; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.profile-slide-body { padding: 16px; display: flex; flex-direction: column; }
.profile-slide-section-title { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; color: var(--muted); }
.my-comps-list { display: flex; flex-direction: column; gap: 6px; }
.my-comps-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.04); cursor: pointer;
}
.my-comps-item:hover { background: rgba(255,255,255,.08); }
.badge { font-size: 10px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
.badge-draft { background: rgba(255,255,255,.1); color: var(--muted); }
.badge-pending { background: rgba(245,166,35,.2); color: #f5a623; }
.badge-approved { background: rgba(34,197,94,.2); color: #22c55e; }
.badge-rejected { background: rgba(229,72,77,.2); color: #e5484d; }

.wizard-shell { max-width: 560px; margin: 0 auto; padding: 20px 14px; }
.wizard-steps { display: flex; gap: 6px; margin-bottom: 14px; }
.wizard-dot { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); }
.wizard-dot.active { background: var(--primary, #c6ff3d); }
.wizard-title { font-family: var(--display); margin: 0 0 14px; }
.wizard-body { display: flex; flex-direction: column; gap: 12px; }
.wizard-body input, .wizard-body select, .wizard-body textarea {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 9px 10px; color: var(--text); font: inherit;
}
.wizard-format-options { display: grid; gap: 10px; }
.wizard-format-card {
  display: block; padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1);
  cursor: pointer; background: rgba(255,255,255,.03);
}
.wizard-format-card input { width: auto; margin-right: 8px; }
.wizard-days { display: flex; gap: 6px; flex-wrap: wrap; }
.day-chip {
  padding: 6px 10px; border-radius: 20px; background: rgba(255,255,255,.06);
  cursor: pointer; font-size: 12px; border: 1px solid transparent;
}
.day-chip.active { background: var(--primary, #c6ff3d); color: #04140c; font-weight: 600; }
.wizard-checklist { max-height: 220px; overflow-y: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 6px; }
.wizard-check-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; }
.wizard-check-row input { width: auto; }

/* Switch de habilitar/deshabilitar mercados de apuestas (por competencia
   o por partido individual). */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; inset: 0; background: rgba(255,255,255,.15);
  border-radius: 999px; transition: background .2s;
}
.switch-slider::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s;
}
.switch input:checked + .switch-slider { background: var(--primary, #c6ff3d); }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }
.switch input:disabled + .switch-slider { opacity: .5; cursor: not-allowed; }

.admin-odds-market-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px;
}
.admin-odds-market.market-disabled { opacity: .5; }

/* ===== Panel de gestión con barra lateral desplegable (competencias,
   partidos y equipos: /admin/... y /manage/...) ===== */
.manage-layout { display: flex; align-items: flex-start; gap: 20px; margin-top: 4px; }

.manage-sidebar {
  width: 240px; flex-shrink: 0; background: var(--panel, #0e1420);
  border: 1px solid var(--border); border-radius: 14px; padding: 10px;
  position: sticky; top: calc(var(--topbar-h) + 16px);
  max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto;
  transition: width .18s ease; scrollbar-width: thin;
}
.manage-sidebar.collapsed { width: 60px; }
.manage-sidebar.collapsed .manage-nav-label,
.manage-sidebar.collapsed .manage-sidebar-title { display: none; }
.manage-sidebar.collapsed .manage-sidebar-head { justify-content: center; }
.manage-sidebar.collapsed .manage-collapse-btn { transform: rotate(180deg); }
.manage-sidebar.collapsed .manage-nav-item { justify-content: center; }

.manage-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.manage-sidebar-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.manage-collapse-btn {
  background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--muted);
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px; transition: transform .18s ease;
}
.manage-collapse-btn:hover { color: var(--text); background: rgba(255,255,255,.09); }

.manage-nav { display: flex; flex-direction: column; gap: 2px; }
.manage-nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 9px;
  cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.manage-nav-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.manage-nav-item.active {
  background: rgba(198,255,61,.12); color: var(--text); font-weight: 700;
  border-left-color: var(--primary, #c6ff3d);
}
.manage-nav-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 14.5px; line-height: 1; }
.manage-nav-label { overflow: hidden; text-overflow: ellipsis; }

.manage-content-wrap { flex: 1; min-width: 0; }
.manage-content { min-width: 0; }

.manage-mobile-bar { display: none; }
.manage-sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none;
  transition: opacity .2s ease; z-index: 199;
}
.manage-sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

@media (max-width: 880px) {
  .manage-layout { display: block; }
  .manage-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 270px; max-width: 82vw;
    border-radius: 0; z-index: 200; transform: translateX(-100%);
    transition: transform .22s ease; max-height: 100vh;
  }
  .manage-sidebar.collapsed { width: 270px; }
  .manage-sidebar.collapsed .manage-nav-label,
  .manage-sidebar.collapsed .manage-sidebar-title { display: block; }
  .manage-sidebar.mobile-open { transform: translateX(0); }
  .manage-collapse-btn { display: none; }
  .manage-mobile-bar {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    background: var(--panel, #0e1420); border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 10px;
  }
  .manage-mobile-toggle {
    background: rgba(198,255,61,.14); color: var(--primary, #c6ff3d); border: none;
    width: 32px; height: 32px; border-radius: 8px; font-size: 15px; cursor: pointer; flex-shrink: 0;
  }
  .manage-mobile-label { font-weight: 700; font-size: 13.5px; }
}

/* =========================================================
   ALINEACIONES (pitch.js: buildLineupEditor / buildLineupView)
   Editor (admin, edición de partido) y vista de solo lectura
   (usuarios, ficha del partido). Reutiliza pitch-wrap/pitch-svg
   de la cancha gráfica, con una capa HTML absoluta encima para
   los jugadores (arrastrables en el editor).
   ========================================================= */
.lineup-field {
  position: relative; touch-action: none;
}
.lineup-field.lineup-field-editable { touch-action: none; }
.lineup-half-hint {
  position: absolute; top: 6px; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; color: rgba(255,255,255,.55); text-transform: uppercase;
  pointer-events: none;
}
.lineup-half-hint-home { left: 10px; }
.lineup-half-hint-away { right: 10px; }
.lineup-token {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 58px; z-index: 2; user-select: none; -webkit-user-select: none;
}
.lineup-token-editable { cursor: grab; }
.lineup-token-editable:active { cursor: grabbing; z-index: 5; }
.lineup-token-dragging { z-index: 6; opacity: .92; }
.lineup-token-dot {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #0a0118; box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 0 2px rgba(10,1,24,.9);
}
.lineup-token-home .lineup-token-dot { background: var(--primary, #c6ff3d); }
.lineup-token-away .lineup-token-dot { background: #ffb3e6; }
.lineup-token-name {
  font-size: 9.5px; font-weight: 700; color: #fff; text-align: center; line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0,0,0,.8); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lineup-token-badges { font-size: 10px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.lineup-token-remove {
  position: absolute; top: -6px; right: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); color: #fff; border: 1.5px solid rgba(10,1,24,.9); font-size: 10px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lineup-drag-ghost {
  position: fixed; z-index: 999; pointer-events: none; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 58px; opacity: .95;
}
.lineup-editor-teams { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.lineup-team-block { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface-2); }
.lineup-team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.lineup-team-head-name { font-weight: 800; font-size: 13.5px; }
.lineup-team-head-count { font-size: 11.5px; color: var(--muted); }
.lineup-team-head-count.lineup-count-full { color: var(--green); }
.lineup-bench {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 34px;
  padding: 8px; border: 1px dashed var(--border); border-radius: 10px;
}
.lineup-bench-empty { font-size: 11.5px; color: var(--muted); padding: 4px 2px; }
.lineup-bench-chip {
  display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: 11.5px; font-weight: 600;
  cursor: grab; touch-action: none;
}
.lineup-bench-chip:active { cursor: grabbing; }
.lineup-bench-label { font-size: 10px; color: var(--muted); margin-top: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.lineup-view-bench-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lineup-view-bench-chip {
  font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
}
.lineup-empty-note { font-size: 12px; color: var(--muted); text-align: center; padding: 16px 10px; }

/* ============================================================
   Perfil: header hero animado, anillo de nivel con XP, tabs con
   iconos e indicador deslizante. Reusa las variables globales de
   tema (--green/--blue/--magenta/--surface) para no introducir
   una paleta nueva, pero con más movimiento y jerarquía visual.
   ============================================================ */

@keyframes profileHeroFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-2%, 2%) scale(1.05); }
}
@keyframes profileRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes profileFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes profileXpFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes profileStreakPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,180,84,.35); }
  50% { box-shadow: 0 0 0 6px rgba(255,180,84,0); }
}

.profile-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 28px 22px;
  margin-bottom: 20px;
  background: linear-gradient(160deg, rgba(198,255,61,.10), rgba(51,224,255,.06) 45%, var(--surface-2) 100%);
  animation: profileFadeUp .5s var(--ease);
}
.profile-hero::before {
  content: '';
  position: absolute; inset: -40%;
  background:
    radial-gradient(circle at 15% 20%, rgba(198,255,61,.20), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255,61,240,.16), transparent 45%),
    radial-gradient(circle at 70% 10%, rgba(51,224,255,.14), transparent 40%);
  animation: profileHeroFloat 10s ease-in-out infinite;
  pointer-events: none;
}
.profile-hero-inner { position: relative; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.profile-ring {
  position: relative;
  width: 92px; height: 92px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.profile-ring::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--xp-pct, 0) * 1%), rgba(255,255,255,.08) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  transition: background 1s var(--ease);
}
.profile-ring-avatar { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; z-index: 1; }
.profile-ring-fallback {
  width: 78px; height: 78px; border-radius: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--green), var(--blue));
  color: #04140c; font-weight: 800; font-size: 32px;
}
.profile-level-chip {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(120deg, var(--green), var(--blue));
  color: #04140c; font-family: var(--mono); font-weight: 700; font-size: 11px;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(198,255,61,.25); z-index: 2;
}

.profile-hero-info { flex: 1; min-width: 180px; }
.profile-hero-name { margin: 0; font-family: var(--display); font-size: 22px; }
.profile-hero-email { font-size: 13px; color: var(--muted); margin-top: 2px; }
.profile-hero-member { font-size: 12px; color: var(--muted); margin-top: 2px; }

.profile-xp-row { margin-top: 12px; max-width: 320px; }
.profile-xp-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; font-family: var(--mono); }
.profile-xp-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.profile-xp-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  transform-origin: left; animation: profileXpFill 1s var(--ease) both;
}

.profile-streak-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,180,84,.12); border: 1px solid rgba(255,180,84,.3);
  color: var(--amber); font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  animation: profileStreakPulse 2.4s ease-in-out infinite;
}

.profile-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
@media (max-width: 640px) { .profile-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.profile-stats-grid .stat-tile {
  animation: profileFadeUp .5s var(--ease) both;
}
.profile-stats-grid .stat-tile:nth-child(1) { animation-delay: .04s; }
.profile-stats-grid .stat-tile:nth-child(2) { animation-delay: .09s; }
.profile-stats-grid .stat-tile:nth-child(3) { animation-delay: .14s; }
.profile-stats-grid .stat-tile:nth-child(4) { animation-delay: .19s; }

.profile-tabs .tab { display: inline-flex; align-items: center; gap: 6px; }
.profile-tab-panel { animation: profileFadeUp .35s var(--ease) both; }

.profile-theme-swatches { display: flex; gap: 8px; margin-top: 10px; }
.profile-theme-swatch {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s var(--ease), border-color .15s var(--ease);
  flex-shrink: 0;
}
.profile-theme-swatch:hover { transform: scale(1.12); }
.profile-theme-swatch.active { border-color: var(--text); }

/* ---------------------------------------------------------------- */
/* Logros v2 / Insignias / Misiones / Seguro de Puntos */
/* ---------------------------------------------------------------- */
.reward-section-title { font-family: var(--display); font-size: 15px; margin: 18px 0 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.reward-section-title:first-child { margin-top: 0; }

.tier-bronce { color: #cd8a4b; }
.tier-plata { color: #cfd8e3; }
.tier-oro { color: #ffcf5c; }
.tier-platino { color: #7fe8ff; }
.tier-pill { font-size: 10px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.tier-pill.tier-bronce { background: rgba(205,138,75,.16); color: #cd8a4b; }
.tier-pill.tier-plata { background: rgba(207,216,227,.14); color: #cfd8e3; }
.tier-pill.tier-oro { background: rgba(255,207,92,.16); color: #ffcf5c; }
.tier-pill.tier-platino { background: rgba(127,232,255,.16); color: #7fe8ff; }

.achievement-card { display: flex; align-items: flex-start; gap: 10px; }
.achievement-card .ach-icon { font-size: 26px; line-height: 1; flex-shrink: 0; filter: grayscale(1); opacity: .5; }
.achievement-card.earned .ach-icon { filter: none; opacity: 1; }
.achievement-card .ach-reward { font-size: 11px; color: var(--green); margin-top: 6px; }

.rarity-comun { color: var(--muted); }
.rarity-raro { color: var(--blue); }
.rarity-epico { color: var(--magenta); }
.rarity-legendario { color: var(--amber); }

.badge-tile { text-align: center; padding: 16px 8px; opacity: .35; transition: opacity .2s var(--ease), transform .2s var(--ease); cursor: default; position: relative; }
.badge-tile.earned { opacity: 1; cursor: pointer; }
.badge-tile.earned:hover { transform: translateY(-3px); }
.badge-tile .badge-icon { font-size: 34px; display: block; margin-bottom: 6px; }
.badge-tile .badge-name { font-weight: 700; font-size: 13px; }
.badge-tile .badge-rarity { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.badge-tile.equipped { border-color: var(--green) !important; box-shadow: var(--glow); }
.badge-tile .badge-equipped-tag { position: absolute; top: 6px; right: 8px; font-size: 9px; color: var(--green); text-transform: uppercase; font-weight: 700; }

.profile-hero-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; background: rgba(198,255,61,.14); color: var(--green); padding: 3px 10px; border-radius: 20px; margin-left: 8px; font-weight: 700; vertical-align: middle; }

.mission-card { display: flex; flex-direction: column; gap: 8px; }
.mission-card .mission-head { display: flex; align-items: center; gap: 10px; }
.mission-card .mission-icon { font-size: 24px; }
.mission-card .mission-title { font-weight: 700; }
.mission-card .mission-desc { font-size: 12px; color: var(--muted); }
.mission-progress-track { height: 8px; border-radius: 20px; background: var(--surface-2); overflow: hidden; }
.mission-progress-fill { height: 100%; background: var(--green); border-radius: 20px; transition: width .3s var(--ease); }
.mission-card .mission-reward { font-size: 12px; color: var(--green); }
.mission-card.status-claimed { opacity: .55; }
.mission-status-pill { font-size: 10px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; font-weight: 700; }
.mission-status-pill.active { background: rgba(51,224,255,.16); color: var(--blue); }
.mission-status-pill.completed, .mission-status-pill.claimed { background: rgba(198,255,61,.16); color: var(--green); }

.insurance-card { display: flex; flex-direction: column; gap: 8px; }
.insurance-card .insurance-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.insurance-card .insurance-title { font-weight: 700; }
.insurance-card .insurance-status { font-size: 10px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; font-weight: 700; }
.insurance-card .insurance-status.available { background: rgba(198,255,61,.16); color: var(--green); }
.insurance-card .insurance-status.used { background: rgba(165,150,201,.16); color: var(--muted); }
.betslip-insurance { margin: 10px 0; padding: 10px; border: 1px dashed var(--border); border-radius: 12px; }
.betslip-insurance select { width: 100%; }

/* --- Página de competencia: layout tipo "liga" (héroe + selector de
   temporada + banner de campeón + dos columnas: destacado/partidos a la
   izquierda, tabla/pestañas a la derecha) --- */
.comp-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.comp-season-select {
  background: var(--surface-2, #1a1030); color: var(--text, #fff); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.champion-banner {
  display: flex; align-items: center; gap: 8px; background: rgba(255,180,84,.1);
  border: 1px solid rgba(255,180,84,.35); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px;
  font-size: 13px; color: var(--text, #fff);
}
.champion-banner-trophy { font-size: 18px; }

.comp-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .comp-layout { grid-template-columns: 1fr; } }

.comp-sidebar { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 14px; }
.comp-sidebar-title {
  font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 10px 0 4px;
}
.comp-main { min-width: 0; }

.comp-featured-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 14px; cursor: pointer;
  background: var(--surface, #150a26); transition: border-color .15s var(--ease, ease);
}
.comp-featured-card:hover { border-color: var(--amber); }
.comp-featured-time { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 8px; }
.comp-featured-teams { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.comp-featured-team { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; text-align: center; }
.comp-featured-team span { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.comp-featured-vs { font-size: 13px; font-weight: 700; color: var(--amber); flex-shrink: 0; }

.comp-sidebar-match {
  display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 8px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.comp-sidebar-match:hover { background: var(--surface-2, #1a1030); }
.comp-sidebar-match-date { font-size: 10px; color: var(--muted); white-space: pre-line; text-align: center; width: 40px; flex-shrink: 0; }
.comp-sidebar-match-teams { flex: 1; min-width: 0; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.comp-sidebar-match-teams div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-sidebar-match-score { font-size: 12px; font-weight: 700; color: var(--amber); flex-shrink: 0; }

.standings-position-cell { border-left: 3px solid transparent; font-weight: 700; text-align: center; }

/* --- Amigos / mensajes privados --------------------------------------- */
.nav-badge {
  position: absolute; top: 2px; right: 2px; background: var(--red, #e5484d); color: #fff;
  border-radius: 10px; font-size: 10px; padding: 1px 5px; line-height: 1.4; font-weight: 700;
}
.mobile-tabbar a .nav-badge { top: -2px; right: 8px; }
.chat-thread {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 4px 90px;
  min-height: 200px;
}
.chat-bubble {
  max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4;
  background: var(--surface-2, #1a1030); border: 1px solid var(--border);
}
.chat-bubble.mine { align-self: flex-end; background: var(--green, #4dff9a); color: #04140c; border-color: transparent; }
.chat-bubble.mine a, .chat-bubble.mine .card { color: inherit; }
.chat-bubble.theirs { align-self: flex-start; }
.chat-bubble-time { font-size: 10px; opacity: .65; margin-top: 4px; text-align: right; }
.chat-input-row {
  display: flex; gap: 8px; position: sticky; bottom: 0; padding: 10px 0; background: var(--bg, #070b14);
}

.presence-dot {
  position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted, #6b7280); border: 2px solid var(--bg, #070b14);
}
.presence-dot.online { background: var(--green, #4dff9a); }
.chat-status-line { font-size: 12px; color: var(--muted); margin-top: 2px; }
.chat-read-mark { font-size: 11px; opacity: .8; }
.chat-read-mark.read { color: #2fb6ff; }
.chat-bubble.mine .chat-read-mark.read { color: #0a4d78; }

/* ============================================================
   Navegación rediseñada: barra de progreso de carga, loader de
   vista, botones-ícono de la derecha y menú "Más" (desplegable
   en PC, hoja en celular) para las rutas secundarias.
   ============================================================ */

/* --- Barra de progreso de carga entre páginas --- */
.route-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  z-index: 200;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--magenta));
  background-size: 200% auto;
  animation: routeProgressShimmer 1.1s linear infinite;
  box-shadow: 0 0 10px rgba(198,255,61,.6), 0 0 2px rgba(198,255,61,.8);
  opacity: 0;
  pointer-events: none;
}
@keyframes routeProgressShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* --- Loader de vista: cubre la vista mientras carga su contenido --- */
.view {
  position: relative;
}
.view-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  background: var(--bg);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  z-index: 5;
}
.view-loader.visible { opacity: 1; }
.view-loader-spinner {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--green);
  border-right-color: var(--blue);
  animation: viewLoaderSpin .7s linear infinite;
}
@keyframes viewLoaderSpin { to { transform: rotate(360deg); } }

/* --- Botones-ícono compactos del lado derecho de la barra --- */
.icon-btn {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), transform .15s var(--ease);
}
.icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
.icon-btn:hover { color: var(--text); border-color: var(--green); transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.has-unread { color: var(--amber); border-color: var(--amber); }
.icon-btn.icon-btn-primary { color: #04140c; background: var(--green); border-color: var(--green); }
.icon-btn.icon-btn-primary:hover { filter: brightness(1.08); }
.icon-btn-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-family: var(--mono);
  box-shadow: 0 0 0 2px var(--bg);
}

/* --- Botón "Más" dentro del main-nav (PC) --- */
.nav-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav-more-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex-shrink: 0; }
.nav-more-btn .nav-more-chevron { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.nav-more-btn:hover, .nav-more-btn.active { color: var(--text); background: var(--surface-2); }
.nav-more-btn.open .nav-more-chevron { transform: rotate(180deg); }

.nav-more-dropdown {
  position: fixed;
  min-width: 200px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  z-index: 120;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.nav-more-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.nav-more-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav-more-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }
.nav-more-link:hover { color: var(--text); background: var(--surface); }
.nav-more-link.active { color: var(--green); background: rgba(198,255,61,.08); }

/* --- Hoja "Más" en celular --- */
.nav-more-backdrop {
  position: fixed; inset: 0;
  background: rgba(4,8,14,.7);
  backdrop-filter: blur(2px);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-sheet);
}
.nav-more-backdrop.open { opacity: 1; pointer-events: auto; }
.nav-more-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 70vh;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--border);
  transform: translateY(100%);
  transition: transform .32s var(--ease-sheet);
  z-index: 96;
  box-shadow: 0 -12px 40px rgba(0,0,0,.5);
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.nav-more-sheet.open { transform: translateY(0); }
.nav-more-sheet-handle {
  width: 40px; height: 4px;
  background: var(--border);
  border-radius: 4px;
  margin: 10px auto 6px;
}
.nav-more-sheet-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  padding: 4px 18px 10px;
  border-bottom: 1px solid var(--border);
}
.nav-more-sheet-links { padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 2px; }
.nav-more-sheet-links .nav-more-link { padding: 13px 12px; font-size: 15px; }
.nav-more-sheet-links .nav-more-link svg { width: 19px; height: 19px; }

/* --- Tab "Más" dentro de la pastilla flotante de celular --- */
.mobile-tabbar a.nav-more-tab.active { color: #10041f; background: linear-gradient(120deg, var(--green), var(--blue)); }

@media (max-width: 960px) {
  .nav-more-dropdown { display: none; }
}
@media (min-width: 961px) {
  .nav-more-backdrop, .nav-more-sheet { display: none; }
}