/* ==========================================================================
   Thunders Volleyball Club — Portal (jugadores y staff)
   Extiende los tokens y componentes de css/styles.css. No los duplica.
   ========================================================================== */

/* ---- Checkboxes y radios nativos: color de marca en vez del verde/azul del sistema ---- */
.portal-main input[type="checkbox"], .portal-main input[type="radio"] { accent-color: var(--color-accent); }

/* ---- Header simplificado del portal (sin menú de navegación pública) ---- */
.portal-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: rgba(4, 7, 11, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.portal-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}
.portal-brand { display: flex; align-items: center; gap: var(--space-3); }
.portal-brand img { width: 40px; height: 40px; border-radius: 8px; }
.portal-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.portal-brand-text .name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; text-transform: uppercase; }
.portal-brand-text .sub { font-family: var(--font-display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.portal-user { display: flex; align-items: center; gap: var(--space-4); }
.portal-user-name { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--color-text-muted); display: none; }
@media (min-width: 560px) { .portal-user-name { display: inline; } }

.portal-main {
  min-height: calc(100dvh - var(--nav-height));
  padding: var(--space-12) 0 var(--space-24);
  background:
    radial-gradient(55% 45% at 15% 0%, rgba(56, 189, 248, 0.10), transparent 65%),
    radial-gradient(40% 40% at 85% 6%, rgba(0, 119, 214, 0.14), transparent 60%),
    var(--color-bg);
}

/* ---- Tarjetas del portal: más profundidad que el .card plano del sitio público ---- */
.portal-main .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 40%), var(--color-surface);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.portal-main a.card:hover,
.portal-main .card.is-interactive:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
  border-color: rgba(56, 189, 248, 0.35);
}

/* ---- Botones e insignias del portal: gradiente sutil en vez de color sólido plano ---- */
.portal-main .btn-primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  border: none;
}
.portal-main .btn-primary:hover {
  background: linear-gradient(135deg, var(--color-accent-soft), var(--color-accent));
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}
.portal-main .badge {
  border: 1px solid transparent;
}
.portal-main .badge-win { background: linear-gradient(135deg, rgba(34,197,94,0.24), rgba(34,197,94,0.08)); border-color: rgba(34,197,94,0.35); }
.portal-main .badge-loss { background: linear-gradient(135deg, rgba(239,68,68,0.24), rgba(239,68,68,0.08)); border-color: rgba(239,68,68,0.35); }
.portal-main .badge-pending { background: linear-gradient(135deg, rgba(251,191,36,0.24), rgba(251,191,36,0.08)); border-color: rgba(251,191,36,0.35); }

.portal-main .tab-btn { transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); }

/* ---- Login ---- */
.login-shell {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background:
    radial-gradient(60% 55% at 18% 0%, rgba(56, 189, 248, 0.18), transparent 65%),
    radial-gradient(45% 50% at 82% 8%, rgba(0, 119, 214, 0.22), transparent 60%),
    var(--color-bg);
}
.login-back-link {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.login-back-link svg { width: 18px; height: 18px; }
.login-back-link:hover { color: var(--color-accent); }
.login-card {
  width: 100%; max-width: 400px; padding: var(--space-8) var(--space-6); text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 40%), var(--color-surface);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.login-logo {
  width: 64px; height: 64px; border-radius: 14px; margin: 0 auto var(--space-4);
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.3);
}
.login-card h1 { font-size: 1.6rem; margin-bottom: var(--space-2); }
.login-card .lede { color: var(--color-text-muted); margin-bottom: var(--space-8); font-size: 0.95rem; }
.login-card form { text-align: left; }
.password-field { position: relative; }
.password-toggle {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-muted);
  padding: var(--space-2);
  display: flex;
  min-height: 32px;
  min-width: 32px;
  align-items: center;
  justify-content: center;
}
.password-toggle:hover { color: var(--color-white); }
.login-hint { margin-top: var(--space-6); font-size: 0.85rem; color: var(--color-text-muted); }

/* ---- Bienvenida / resumen del jugador ---- */
.portal-welcome {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.portal-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--color-bg-elevated-2), var(--color-navy));
  border: 2px solid var(--color-border-strong);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-accent-soft);
  flex-shrink: 0;
}
.portal-welcome-info h2 { margin-bottom: 4px; text-transform: none; }
.portal-welcome-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; color: var(--color-text-muted); font-size: 0.9rem; }

/* ---- Inicio: chips de resumen ---- */
.chip-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.chip {
  flex: 1; min-width: 100px; background: var(--color-surface); border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-3); text-align: center;
}
.chip-val { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.chip-lbl { font-size: 0.68rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.chip.is-good { border-top-color: var(--color-success); }
.chip.is-warn { border-top-color: var(--color-warning); }
.chip.is-info { border-top-color: var(--color-accent); }
.chip.is-good .chip-val { color: var(--color-success); }
.chip.is-warn .chip-val { color: var(--color-warning); }
.chip.is-info .chip-val { color: var(--color-accent); }
.chip-trend { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); }

/* ---- Inicio: banner de anuncios ---- */
.banner {
  display: flex; gap: var(--space-3); align-items: flex-start; border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-6); border: 1px solid var(--color-border); background: var(--color-surface);
}
.banner svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--color-accent); }
.banner-title { font-weight: 700; font-size: 0.9rem; margin: 0 0 2px; }
.banner-text { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
.banner-time { font-size: 0.72rem; color: var(--color-text-muted); opacity: 0.7; margin-top: 4px; display: block; }

/* ---- Inicio: en escritorio, resumen a la izquierda y partidos a la derecha ---- */
.inicio-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.inicio-col .chip-row, .inicio-col .banner { margin-bottom: var(--space-6); }
.inicio-col .card { margin-bottom: var(--space-6); }
.inicio-col .card:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .inicio-grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* ---- Staff: anuncios recientes en dos columnas en pantallas anchas ---- */
@media (min-width: 900px) {
  .announcement-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); }
  .announcement-list .announcement-item { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; padding-bottom: var(--space-4); margin-bottom: var(--space-4); }
  .announcement-list .announcement-item:nth-child(even) { border-left: 1px solid var(--color-border); padding-left: var(--space-6); }
}

/* ---- Etiqueta de categoría compacta en tarjetas pequeñas (ej. próximos partidos) ---- */
.match-card-category {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---- Íconos de las tarjetas de acceso rápido (staff) ---- */
.quick-link-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(0, 119, 214, 0.1));
  border: 1px solid rgba(56, 189, 248, 0.25);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.quick-link-icon svg { width: 20px; height: 20px; color: var(--color-accent-soft); }

/* ---- Datos personales ---- */
.data-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); padding: var(--space-6); margin-bottom: var(--space-8); }
@media (max-width: 560px) { .data-list { grid-template-columns: 1fr; } }
.data-item dt { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 4px; }
.data-item dd { margin: 0; font-size: 1rem; }

/* ---- Rutina de hoy ---- */
.routine-card { padding: var(--space-6); margin-bottom: var(--space-8); }
.routine-card .routine-date { color: var(--color-accent); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: var(--space-2); display: block; }
.routine-card h3 { margin-bottom: var(--space-4); }
.routine-list { display: flex; flex-direction: column; gap: var(--space-3); }
.routine-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}
.routine-list li svg { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }
.routine-assigned-by { margin-top: var(--space-4); font-size: 0.85rem; color: var(--color-text-muted); }
.routine-empty { padding: var(--space-6); text-align: center; color: var(--color-text-muted); }
.routine-empty svg { width: 32px; height: 32px; color: var(--color-border-strong); margin: 0 auto var(--space-3); }

/* ---- Filas de ejercicio editables (staff) ---- */
.exercise-row-form {
  display: grid; grid-template-columns: 2fr 1fr 1fr 2fr auto; gap: var(--space-2);
  margin-bottom: var(--space-3); align-items: center;
}
.exercise-row-form input, .exercise-row-form select {
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); color: var(--color-white);
  border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font-body); font-size: 0.9rem; min-height: 40px;
}
@media (max-width: 700px) { .exercise-row-form { grid-template-columns: 1fr; } }

/* ---- Filas de progreso físico (staff) ---- */
.physical-row-form {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-2);
  margin-bottom: var(--space-3); align-items: center;
}
.physical-row-form input {
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); color: var(--color-white);
  border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font-body); font-size: 0.9rem; min-height: 40px;
}
@media (max-width: 700px) { .physical-row-form { grid-template-columns: 1fr; } }

/* ---- Checklist de rutina (jugadora) ---- */
.exercise-item {
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.exercise-item.is-done { opacity: 0.6; }
.exercise-item.is-done .exercise-name { text-decoration: line-through; }
.exercise-check {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-border-strong);
  flex-shrink: 0; background: none; display: flex; align-items: center; justify-content: center; padding: 0;
}
.exercise-check.is-checked { background: var(--color-success); border-color: var(--color-success); }
.exercise-check svg { width: 14px; height: 14px; display: none; color: var(--color-bg); }
.exercise-check.is-checked svg { display: block; }
.exercise-name { font-weight: 600; font-size: 0.9rem; }
.exercise-sets { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-accent-soft); }
.exercise-media-link {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem;
  color: var(--color-text-muted); border: 1px dashed var(--color-border-strong); border-radius: 8px; padding: 4px 8px;
}

/* ---- Estadísticas ---- */
.stat-tile { padding: var(--space-6); text-align: center; }
.stat-tile .stat-num { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: var(--color-accent); display: block; }
.stat-tile .stat-label { color: var(--color-text-muted); font-size: 0.8rem; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; }

/* ---- Pagos ---- */
.badge-pending { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
.payment-current { padding: var(--space-6); margin-bottom: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.payment-current-label { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 4px; }
.payment-current .badge { font-size: 0.9rem; padding: 8px 18px; }
.payment-table { width: 100%; border-collapse: collapse; }
.payment-table th, .payment-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: 0.95rem; }
.payment-table th { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; color: var(--color-text-muted); }
.payment-table tr:last-child td { border-bottom: none; }
.payment-table-wrap { overflow-x: auto; padding: var(--space-2); }
.payment-table input, .payment-table select {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  min-height: 38px;
  transition: border-color 200ms;
}
.payment-table input:focus, .payment-table select:focus { border-color: var(--color-accent); outline: none; }
.payment-table select { min-width: 130px; }

/* ---- Panel de staff: lista de jugadores ---- */
.staff-player-card { padding: var(--space-6); text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.staff-player-card .portal-avatar { width: 48px; height: 48px; font-size: 1.1rem; flex-shrink: 0; }
.staff-player-info { flex: 1; min-width: 0; }
.staff-player-info h3 { margin-bottom: 2px; font-size: 1.05rem; overflow-wrap: break-word; }
.staff-player-info .meta { color: var(--color-text-muted); font-size: 0.85rem; margin: 0; }
.staff-player-card .btn { flex: 1 0 100%; }

/* ---- Panel de staff: detalle de jugador ---- */
.staff-detail-header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6); margin-bottom: var(--space-8); flex-wrap: wrap; }
.staff-detail-header .btn-outline { margin-left: auto; }

/* ---- Partidos en vivo: selector de equipo ---- */
.live-team-card { padding: var(--space-6); }
.live-team-card h3 { margin-bottom: var(--space-2); }
.live-team-card .meta { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.btn-danger-outline { border-color: rgba(239, 68, 68, 0.4); color: #f87171; }
.btn-danger-outline:hover { border-color: #f87171; background: rgba(239, 68, 68, 0.08); }
.btn-sm { padding: 8px 14px; font-size: 0.78rem; min-height: 34px; width: auto; }

/* ==========================================================================
   Partido en vivo — pantalla única sin scroll (tablet/laptop), apilada en móvil
   Coincide con la estructura de portal/staff/live/match.php + portal/js/live.js
   ========================================================================== */
html.live-page, body.live-page { height: 100dvh; overflow: hidden; }
.live-shell { display: flex; flex-direction: column; height: 100%; }

.live-back-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.live-topbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.live-topbar-brand { display: flex; align-items: center; gap: var(--space-3); }
.live-topbar-brand img { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; object-fit: cover; }
.live-topbar-brand > div { display: flex; flex-direction: column; line-height: 1.2; }
.live-topbar-brand .name { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; }
.live-topbar-brand .sub { font-size: 0.72rem; color: var(--color-text-muted); }

.live-topbar-team { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; color: var(--color-text-muted); }
.live-topbar-team.is-serving { color: var(--color-accent); }
.serve-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-border-strong); flex-shrink: 0; }
.live-topbar-team.is-serving .serve-dot { background: var(--color-accent); box-shadow: 0 0 0 3px rgba(56,189,248,0.25); }
.score-vs { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; }
.score-btn {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-bg); border: 1px solid var(--color-border-strong);
  color: var(--color-white); font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.score-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

.live-topbar-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-left: auto; }
.live-topbar-meta .sets-label { font-family: var(--font-display); font-size: 0.68rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; text-align: center; }
.live-topbar-meta .sets-num { color: var(--color-white); font-weight: 700; font-family: var(--font-display); font-size: 0.9rem; text-align: center; }
.live-dot-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(239,68,68,0.15); color: #f87171; padding: 5px 10px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.live-dot-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #f87171; }
.live-set-badge { font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }

/* ---- Aviso flotante de error (partido en vivo) ---- */
.live-toast {
  position: fixed; top: var(--space-4); left: 50%; transform: translateX(-50%);
  z-index: 300; background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.35);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem;
  max-width: 90vw;
}

.live-body { flex: 1; display: grid; grid-template-columns: 250px 1fr 300px; overflow: hidden; min-height: 0; }
.live-col { overflow-y: auto; padding: var(--space-4); border-right: 1px solid var(--color-border); min-height: 0; }
.live-col:last-child { border-right: none; }
.live-col-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.live-col-head h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; color: var(--color-text-muted); margin: 0; }
.link-btn { color: var(--color-accent); font-size: 0.78rem; font-weight: 600; background: none; border: none; padding: 0; white-space: nowrap; }
.link-btn:hover { color: var(--color-accent-soft); }
.undo-link { color: var(--color-text-muted); font-size: 0.76rem; font-weight: 600; background: none; border: none; padding: 0; white-space: nowrap; }
.undo-link:hover { color: #f87171; }

/* Botón grande de sustitución (columna de jugadores) */
.live-sub-btn {
  width: 100%; margin-bottom: var(--space-4); font-size: 0.95rem; padding: 14px 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-sub-btn:disabled { opacity: 0.4; pointer-events: none; }

/* Marcador grande, junto a la cancha (columna central) */
.live-scoreboard {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); margin-bottom: var(--space-4);
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.sb-team { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.sb-team .live-topbar-team { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sb-controls { display: flex; align-items: center; gap: var(--space-3); }
.sb-controls .score-btn { width: 38px; height: 38px; font-size: 1.3rem; }
.sb-controls .score-num { font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--color-white); min-width: 56px; text-align: center; display: inline-block; }

/* Columna: jugadores */
#rosterList { display: flex; flex-direction: column; gap: 2px; }
.live-player-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
  padding: var(--space-2); border-radius: var(--radius-sm);
  background: none; border: 1px solid transparent; color: var(--color-text);
}
.live-player-row:hover { background: var(--color-bg-elevated-2); }
.live-player-row.is-selected { background: var(--color-accent); border-color: var(--color-accent); }
.live-player-row.is-selected .lp-name, .live-player-row.is-selected .lp-pos, .live-player-row.is-selected .lp-num,
.live-player-row.is-selected .lp-bench-tag { color: #04202f; }
.lp-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--color-bg-elevated-2); border: 1px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; flex-shrink: 0;
}
.lp-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lp-name { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-pos { font-size: 0.7rem; color: var(--color-text-muted); }
.lp-bench-tag { font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); flex-shrink: 0; }

/* Columna: jugador seleccionado + estadísticas */
.selected-player-banner { padding: var(--space-4); margin-bottom: var(--space-4); text-align: center; }
.selected-player-banner .label { display: block; font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 4px; }
.selected-player-banner .name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }

/* Puntos a favor (azul) vs. errores (rojo) — separados visualmente */
.stat-group { margin-bottom: var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.stat-group-label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; margin-bottom: var(--space-3); }
.stat-group-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

.stat-group-positive { background: rgba(56, 189, 248, 0.06); border-color: rgba(56, 189, 248, 0.25); }
.stat-group-positive .stat-group-label { color: var(--color-accent); }
.stat-group-negative { background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.25); }
.stat-group-negative .stat-group-label { color: #f87171; }

/* Variante de solo-lectura de .stat-btn, para mostrar totales sin que sean clicables */
.stat-group-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--color-surface); font-size: 0.85rem;
}
.stat-group-item .stat-group-item-val { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Historial de partidos: desglose personal desplegable */
.match-history-details { margin-top: var(--space-3); }
.match-history-details summary { cursor: pointer; font-size: 0.82rem; color: var(--color-accent); font-weight: 600; }
.match-history-details[open] summary { margin-bottom: var(--space-3); }

.stat-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: var(--space-3); text-align: center; min-height: 76px; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.stat-group-positive .stat-btn:hover:not(:disabled) { border-color: var(--color-accent); }
.stat-group-negative .stat-btn:hover:not(:disabled) { border-color: #f87171; }
.stat-btn svg { width: 22px; height: 22px; color: var(--color-accent); flex-shrink: 0; }
.stat-group-negative .stat-btn svg { color: #f87171; }
.stat-btn-label { font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.stat-btn-count { font-family: var(--font-mono); font-weight: 700; color: var(--color-text-muted); font-size: 1.1rem; }
.stat-btn:disabled { opacity: 0.4; pointer-events: none; }

/* Columna: cancha + eventos */
.court-net-label { text-align: center; font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.court-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: var(--space-2);
  background: linear-gradient(160deg, #0c3a2e, #0a2e24);
  border: 2px solid rgba(255,255,255,0.15); border-radius: var(--radius-md); padding: var(--space-2);
  margin-bottom: var(--space-4);
}
.court-cell {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm);
  padding: var(--space-2); min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px;
  transition: all 150ms;
}
.court-cell.is-empty { color: var(--color-text-muted); font-size: 0.68rem; border-style: dashed; }
.court-cell .cc-num { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--color-white); }
.court-cell .cc-name { font-size: 0.66rem; color: var(--color-text); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.court-cell .cc-pos { font-size: 0.58rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.court-cell.is-server { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(56,189,248,0.35); }
.court-cell.is-selected { background: var(--color-accent); border-color: var(--color-accent); }
.court-cell.is-selected .cc-num, .court-cell.is-selected .cc-name, .court-cell.is-selected .cc-pos { color: #04202f; }

.event-log { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: 4px; }
.event-log li { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.78rem; }
.event-log .ev-player { font-weight: 600; }
.event-log .ev-stat { color: var(--color-accent); font-family: var(--font-display); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; }
.event-log .ev-stat.is-negative { color: #f87171; }

.live-finish-btn { width: 100%; margin-top: var(--space-2); }

/* Responsive: en pantallas angostas (celular) se apila y sí hace scroll */
@media (max-width: 860px) {
  html.live-page, body.live-page { height: auto; overflow: visible; }
  .live-shell { height: auto; }
  .live-topbar { justify-content: center; text-align: center; }
  /* margin-left:auto está pensado para el layout de escritorio (empuja este
     bloque a la derecha, lejos del logo) — en celular, cuando el topbar se
     apila en varias líneas, ese margen lo sigue empujando a la derecha en
     vez de dejarlo centrarse con el resto. */
  .live-topbar-meta { margin-left: 0; justify-content: center; width: 100%; }
  .live-body { grid-template-columns: 1fr; overflow: visible; }
  .live-col {
    overflow-y: visible; border-right: none; border-bottom: 1px solid var(--color-border);
    /* Sin esto, la fila de botones de estadística con scroll horizontal
       empuja el ancho de toda la columna (y de la página) en vez de
       recortarse y scrollear dentro de sí misma. */
    min-width: 0;
  }

  /* La jugadora seleccionada y sus botones de estadística quedan siempre a
     la mano, sin importar en qué parte del roster/cancha/eventos esté el
     staff — así no hay que scrollear hasta abajo por cada punto anotado.
     --live-stats-h se comparte con el padding de .live-col-court de abajo
     para que SIEMPRE alcance a despejar el alto real de esta barra, la
     tapara o no el botón de Finalizar Set / Eventos Recientes. */
  .live-body { --live-stats-h: 48vh; }
  .live-col-stats {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    background: var(--color-bg-elevated-2);
    border-top: 1px solid var(--color-border);
    border-bottom: none;
    max-height: var(--live-stats-h);
    overflow-y: auto;
    padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
  /* Deja espacio abajo en la última columna del flujo normal para que la
     barra fija no tape el botón de Finalizar Set ni Eventos Recientes. */
  .live-col-court { padding-bottom: calc(var(--live-stats-h) + var(--space-8)); }

  .live-col-stats .selected-player-banner { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
  .live-col-stats .selected-player-banner .name { font-size: 0.9rem; }

  .live-col-stats .stat-group { margin-bottom: var(--space-2); padding: var(--space-2); position: relative; }
  .live-col-stats .stat-group-label { margin-bottom: var(--space-2); }
  .live-col-stats .stat-group-grid {
    display: flex;
    overflow-x: auto;
    gap: var(--space-2);
    scroll-snap-type: x proximity;
  }
  .live-col-stats .stat-group::after {
    content: '';
    position: absolute;
    top: 34px;
    bottom: var(--space-2);
    right: 0;
    width: 28px;
    background: linear-gradient(to left, var(--color-bg-elevated-2), transparent);
    pointer-events: none;
  }
  .live-col-stats .stat-btn {
    flex: 0 0 78px;
    min-height: 62px;
    padding: var(--space-2);
    scroll-snap-align: start;
  }
  .live-col-stats .stat-btn svg { width: 18px; height: 18px; }
  .live-col-stats .stat-btn-label { font-size: 0.62rem; }
  .live-col-stats .stat-btn-count { font-size: 0.95rem; }
}

/* ---- Editor de alineación: overlay modal ---- */
.lineup-modal-backdrop {
  position: fixed; inset: 0; background: rgba(4,7,11,0.75); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: var(--space-6); z-index: 200;
}
.lineup-modal { width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; padding: var(--space-6); }
.lineup-editor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
@media (max-width: 560px) { .lineup-editor-grid { grid-template-columns: 1fr; } }
.lineup-editor-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.lineup-editor-actions .btn { flex: 1 1 140px; }

/* ==========================================================================
   Optimización mobile — que el portal se sienta como una app en el celular.
   ========================================================================== */

/* Encabezado: en pantallas angostas el botón de salir no debe empujar el
   subtítulo a partirse en dos líneas incómodas. */
@media (max-width: 480px) {
  .portal-brand-text .sub {
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .portal-user .btn {
    padding: 8px 14px;
    font-size: 0.78rem;
  }
}

/* Barra de pestañas del portal (Inicio/Estadísticas/Pagos/Rutina/Perfil, y las
   de la ficha de staff) como barra de navegación fija estilo app nativa. */
@media (max-width: 640px) {
  .portal-main:has(.tabs) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + var(--space-6)); }

  .portal-main .tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: none;
    margin-bottom: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    gap: 0;
    overflow-x: visible;
  }
  .portal-main .tab-btn {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    font-size: 0.6rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
    padding: 6px 2px;
    min-height: 52px;
    border-bottom: none;
    margin-bottom: 0;
    white-space: normal;
    text-align: center;
    border-radius: var(--radius-sm);
  }
  .portal-main .tab-btn.is-active { background: rgba(56, 189, 248, 0.1); }
}

.payment-table-wrap { position: relative; }