/* Inter, auto-hospedada. Se sirve desde /fonts en vez de Google para que la
   app instalada siga con su tipografía sin señal y para no pedirle nada a un
   tercero en cada carga. Es una fuente variable: un archivo cubre 400 a 800.
   Solo se traen latin y latin-ext — inglés y español no necesitan más. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Anton, solo para el eslogan del login — la misma de la web del club.
   Auto-hospedada por la misma razón que Inter: la app abre sin señal. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Base */
  --bg:        #f7f4fb;
  --surface:   #ffffff;
  --surface-2: #f4eefa;
  --surface-3: #e9defa;
  --text:      #241333;
  --muted:     #7c6a94;
  --border:    #e4d9f2;
  --radius:    10px;

  /* Acento magenta/morado vivo — paleta canónica extraída de Longa_Academy.png */
  --accent:       #d4238f;  /* magenta vibrante (botones, links, cifras) */
  --accent-2:     #ac1a72;  /* magenta oscuro (hover) */
  --accent-glow:  rgba(212,35,143,0.16);
  --accent-light: #f472b6;  /* rosa brillante, para texto sobre fondos oscuros */
  --accent-purple:#4c1c66;  /* morado profundo real del escudo (antes #9013c9) */

  --danger: #ef4444;
  --ok-bg:#dcfce7; --ok-fg:#166534;
  --info-bg:#dbeafe; --info-fg:#1e40af;
  --warn-bg:#fef3c7; --warn-fg:#92400e;
  --on-accent: #fff;
  --sidebar-w: 240px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }

/* Se oculta a la vista pero sigue existiendo para un lector de pantalla.
   Lo usan los <h1> de las pantallas de acceso: el escudo ya trae el nombre
   escrito, pero la página necesita igual su encabezado. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
svg.ic { width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  min-height: 100vh;
  /* Inter trae alternativas más legibles en pantalla: la "a" de un piso y
     la "l" con cola, que evitan confundir Il1 en dorsales y montos. */
  font-feature-settings: 'cv05' 1, 'cv08' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; cursor: pointer; }
a:hover { color: var(--accent-2); }

button {
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  padding: 8px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  transition: background .15s, transform .1s;
}
button:hover { background: var(--accent-2); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
button.ghost:hover { background: var(--surface-3); transform: none; }
button.danger { background: var(--danger); }

input, select, textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
textarea { resize: vertical; min-height: 72px; }

label {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
label input, label select, label textarea { margin-top: 5px; color: var(--text); }

/* =====================
   INVITE PAGE
   ===================== */
#invite-page {
  display: none;
  min-height: 100vh;
  background: linear-gradient(135deg, #1c0e33 0%, #4c1c66 50%, #7a1465 100%);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#invite-page.active { display: flex; }

/* =====================
   LOGIN PAGE
   ===================== */
#login-page {
  display: none;
  min-height: 100vh;
  background: linear-gradient(135deg, #1c0e33 0%, #4c1c66 50%, #7a1465 100%);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#login-page.active { display: flex; }

.login-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.35);
}
.login-brand {
  text-align: center;
  margin-bottom: 32px;
}
.login-brand .brand-mark {
  height: 140px; width: auto;
  margin: 0 auto 14px;
  display: flex; justify-content: center;
}
.login-brand .brand-mark img { height: 100%; width: auto; display: block; }
.login-brand h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -1px;
}
.login-brand p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.powered-by {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .3px;
}
.powered-by strong { color: var(--text); font-weight: 700; }
.login-card label { color: var(--text); font-size: 13px; margin-bottom: 16px; }
.login-card button[type="submit"] {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  margin-top: 4px;
  background: var(--accent);
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ---- Login "Sello al centro" (propuesta A) ----
   Todo va acotado a #login-page: la pantalla de invitación reutiliza
   .login-card y tiene más campos, así que se deja con su tarjeta blanca. */
#login-page {
  position: relative;
  overflow: hidden;
  background: #1a1226;
  padding: 24px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

#login-page .login-card {
  position: relative;
  background: none; border: 0; box-shadow: none; padding: 0;
  max-width: 380px; width: 100%;
  display: flex; flex-direction: column; gap: 26px;
}
#login-page .login-brand { text-align: center; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
#login-page .login-wordmark {
  margin: 0;
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-size: 13px; font-weight: 400; letter-spacing: .34em; text-transform: uppercase; color: #b7a7cc;
}
#login-page .login-title {
  margin: 0;
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400; font-size: 52px; line-height: .95; letter-spacing: .01em;
  text-transform: uppercase; color: #f5eefb;
}
#login-page .login-title em { font-style: normal; color: #ff2d8f; }

/* Escudo gris centrado en el contenido (título + formulario), por detrás de todo. */
#login-page .login-panel { background: none; border: 0; padding: 0; }
#login-page .login-ghost {
  position: absolute; left: 50%; top: 50%;
  width: 128%; transform: translate(-50%, -50%);
  opacity: .14; pointer-events: none;
  /* Sello de agua sin color: solo el dibujo, para que no compita con el título ni el botón */
  filter: grayscale(1);
}
#login-page .login-card > :not(.login-ghost) { position: relative; }

#login-page .login-panel label {
  color: #b7a7cc; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
#login-page .login-panel input {
  margin-top: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(245,238,251,.14);
  color: #f5eefb; border-radius: 12px; padding: 12px 14px;
}
#login-page .login-panel input::placeholder { color: rgba(183,167,204,.6); }
#login-page .login-panel input:focus {
  border-color: #ff2d8f; box-shadow: 0 0 0 3px rgba(255,45,143,.22);
}
/* Mismo tono de error que el resto, pero legible sobre oscuro */
#login-page .login-panel .error { color: #ff8fb8; }
#login-page .login-card button[type="submit"] {
  border-radius: 999px; padding: 14px;
  background: #ff2d8f; color: #1a0715;
  font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
}
#login-page .login-card button[type="submit"]:hover { background: #ff53a2; }
#login-page .login-meta {
  margin: 14px 0 0; text-align: center;
  font-size: 11px; color: #b7a7cc; letter-spacing: .02em;
}
#login-page .login-meta strong { color: #f5eefb; }

/* Pantalla de crear contraseña: reutiliza este login */
#login-page .login-sub {
  margin: 0; max-width: 32ch; text-align: center;
  font-size: 15px; line-height: 1.45; color: #f5eefb;
}
#login-page .login-done a { color: #ff2d8f; font-weight: 700; }
#login-page .login-card > .login-meta { margin: 0; }

/* Pantallas bajas: título más compacto para que el botón quede a la vista */
@media (max-height: 700px) {
  #login-page .login-title { font-size: 42px; }
  #login-page .login-card { gap: 16px; }
}

/* =====================
   APP LAYOUT — SIDEBAR
   ===================== */
#app-layout {
  display: none;
  min-height: 100vh;
}
#app-layout.active { display: flex; }

/* Sidebar con grupos. Siempre oscura, también en modo claro: redefine aquí
   los tokens con los valores del modo oscuro y todo lo de adentro los hereda. */
#sidebar {
  color-scheme: dark;
  --bg:        #1a1226;
  --surface:   #1a1226;
  --surface-2: #241833;
  --surface-3: #2e2042;
  --text:      #f3ecfa;
  --muted:     #a897c0;
  --border:    #33264a;
  --accent:       #ff2d8f;
  --accent-2:     #ff6fb4;
  --accent-glow:  rgba(255, 45, 143, .22);
  --accent-light: #ff8fc4;
  --on-accent:    #fff;
  --danger: #f87171;

  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  /* Above the mobile topbar (300): the open drawer must cover it, not sit under it. */
  z-index: 400;
  transition: transform .25s ease;
}
.sidebar-brand {
  position: relative; overflow: hidden;
  min-height: 150px;
  padding: 18px 18px 14px;
  /* Cabecera siempre del tono del menú en modo oscuro, también en modo claro */
  background: #1a1226;
  border-bottom: 1px solid #33264a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
/* El escudo es una marca de agua grande y tenue; "Powered by" va debajo */
.sidebar-brand .brand-mark {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  height: 112px; opacity: .14; filter: brightness(2); pointer-events: none;
}
.brand-mark {
  height: 56px; width: auto; flex-shrink: 0;
  display: flex; align-items: center;
}
.brand-mark img { height: 100%; width: auto; display: block; }
.sidebar-brand .brand-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
}
.sidebar-brand .brand-text { position: relative; display: flex; flex-direction: column; gap: 1px; text-align: center; }
.sidebar-brand .powered-by { margin: 0; font-size: 9.5px; color: rgba(255, 255, 255, .62); }
.sidebar-brand .powered-by strong { color: rgba(255, 255, 255, .85); }

#nav {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
}
.nav-group-label {
  color: #a89bb8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 12px 11px 3px;
}
.nav-group-label:first-child { padding-top: 6px; }
#nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border-radius: 7px;
  color: var(--text);
  font-weight: 500;
  font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
#nav a .nav-icon,
#nav a svg.ic { width: 17px; height: 17px; flex-shrink: 0; color: var(--muted); }
#nav a:hover { background: var(--surface-2); }
#nav a.active { background: var(--accent-glow); color: var(--accent-2); font-weight: 700; border-left-color: var(--accent); padding-left: 8px; }
#nav a.active .nav-icon, #nav a.active svg.ic { color: var(--accent-2); }
#nav a.nav-sep { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; }

.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 9px;
}
.sidebar-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.sidebar-user-role { color: var(--muted); font-size: 11px; }
#logout-btn { padding: 6px 8px; font-size: 12px; background: transparent; color: var(--muted); border: 1px solid var(--border); }
#logout-btn:hover { color: var(--danger); border-color: var(--danger); background: transparent; transform: none; }
#logout-btn svg { width: 15px; height: 15px; display: block; }

/* Mobile topbar — min-height (no height) más padding-top con el inset del
   notch: antes esto solo se aplicaba con la barra inferior (roles familia),
   así que un admin/coach/director/manager/team_admin veía la barra metida
   bajo el notch del teléfono. Ahora es la base, para cualquier rol. */
#mobile-topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; min-height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: center;
  /* padding-bottom aparte: todo el aire extra estaba reservado arriba (para
     el notch) y abajo quedaba en 0, así que el escudo/título quedaban
     pegados al borde inferior de la barra. */
  padding: max(24px, env(safe-area-inset-top, 0px)) 16px 12px;
  gap: 12px;
  z-index: 300;
}
#hamburger {
  background: transparent; border: 0; color: var(--text);
  padding: 4px; cursor: pointer;
  transform: none !important;
}
#hamburger svg { width: 20px; height: 20px; display: block; }
.mobile-brand { font-size: 15px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; }
/* Título de sección y avatar: solo se usan junto con la barra inferior */
.mobile-section { display: none; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.topbar-avatar {
  display: none;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  color: var(--accent-2);
  font-family: inherit; font-size: 13px; font-weight: 700;
  align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Cabecera de hoja: oculta salvo en celular, donde reemplaza a la "×" */
.sheet-header { display: none; }
#sidebar-overlay {
  display: none;
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 350;
}

/* =====================
   OFRECER EL ACCESO DIRECTO
   ===================== */
#install-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 340;               /* sobre la barra inferior (320) */
  max-width: 460px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(36, 19, 51, .24);
  padding: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  animation: install-in .28s ease both;
}
#install-banner[hidden] { display: none; }
@keyframes install-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { #install-banner { animation: none; } }

#install-banner .install-icon {
  width: 44px; height: 44px; flex: none;
  border-radius: 12px; overflow: hidden;
  background: var(--surface-2);
}
#install-banner .install-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
#install-banner .install-text { flex: 1; min-width: 150px; }
#install-banner .install-text b { display: block; font-size: 14px; font-weight: 700; }
#install-banner .install-text span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
#install-banner .install-actions { display: flex; gap: 8px; flex: 1 0 auto; }
#install-banner .install-actions button { flex: 1; min-height: 44px; white-space: nowrap; }

/* Cuando hay barra de pestañas el banner se apoya encima, no sobre ella */
@media (max-width: 768px) {
  body.has-bottom-nav #install-banner {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

/* =====================
   BOTTOM TAB BAR (familias en celular)
   ===================== */
/* Barra flotante tipo píldora, despegada de los bordes: el patrón de Spond.
   Se apoya sobre el contenido en vez de partir la pantalla con una línea. */
#bottom-nav {
  display: none;
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 320;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(36, 19, 51, .16);
  padding: 5px;
}
#bottom-nav button {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border-radius: 19px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 7px 2px;
  border: 0; background: transparent;
  color: var(--muted);
  font-family: inherit; font-size: 10.5px; font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
}
#bottom-nav button svg { width: 22px; height: 22px; display: block; }
#bottom-nav button span {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La pestaña activa se marca con una píldora de fondo, no con una barrita */
#bottom-nav button.active {
  color: var(--accent);
  background: var(--accent-glow);
}
#bottom-nav button { position: relative; }
/* La barra flota, así que el contenido pasa por debajo. Este velo lo disuelve
   en vez de dejarlo cortado a media tarjeta. */
#bottom-nav::before {
  content: '';
  position: absolute;
  left: -12px; right: -12px; bottom: calc(-10px - env(safe-area-inset-bottom, 0px));
  top: -22px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(247, 244, 251, 0) 0%, var(--bg) 60%);
}
#sidebar-overlay.open { display: block; }

/* Main content */
#main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  /* Sin esto el item flex no puede encoger bajo el min-content de su contenido:
     un solo texto con white-space:nowrap adentro (el resumen de un aviso)
     estira TODA la columna y la página scrollea de lado. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content-inner {
  padding: 22px 32px;
  flex: 1;
}

/* =====================
   VIEWS
   ===================== */
.view { display: none; }
.view.active { display: block; animation: view-in .18s ease both; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* =====================
   SKELETONS
   ===================== */
/* Mientras carga se dibuja la silueta de lo que viene, no una pantalla en
   blanco: el salto de layout al llegar los datos es lo que delata una web. */
.skeleton { display: flex; flex-direction: column; gap: 12px; }
.sk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.sk-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.3s ease-in-out infinite;
}
.sk-line.title { height: 16px; width: 52%; }
.sk-line.short { width: 34%; }
.sk-line.mid   { width: 68%; }
.sk-line.block { height: 40px; border-radius: 8px; }
@keyframes sk-shimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}
/* Respeta a quien pidió menos movimiento en el sistema */
@media (prefers-reduced-motion: reduce) {
  .sk-line { animation: none; }
  .view.active { animation: none; }
}

/* =====================
   HOME DE FAMILIA (el diseño de la propuesta)
   ===================== */
/* Tarjeta del hijo: foto cuadrada redondeada, nombre y ficha en una línea. */
.player-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
  display: flex; gap: 13px; align-items: center;
  margin-bottom: 11px;
}
.player-card .pic {
  width: 56px; height: 56px; border-radius: 17px; flex: none;
  background: linear-gradient(140deg, #3d1554, #7a1465);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 17px;
  overflow: hidden;
}
.player-card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-card .who { flex: 1; min-width: 0; }
.player-card h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.player-card p { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }

/* Las dos cifras de cabecera: lo que se debe y la asistencia */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 4px; }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 14px;
}
.stat .k {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.stat .v {
  font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
/* Deber plata se lee antes de leer la palabra */
.stat .v.due { color: var(--danger); }
.stat .v.small { font-size: 16px; }

/* =====================
   POSTS — formato "From the coach"
   ===================== */
/* Cada aviso es un mensaje de una persona: banda de color que nombra el tipo,
   luego el autor con su avatar, y el cuerpo como prosa legible. */
.post-card {
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(36, 19, 51, .07);
  overflow: hidden;
  margin-bottom: 14px;
}

/* La banda deja triar el aviso antes de leerlo */
.post-band {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  min-width: 0;
}
.post-band .kind {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.post-band .when {
  margin-left: auto;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.post-band svg { width: 14px; height: 14px; flex-shrink: 0; }

.post-card.match    .post-band { background: var(--accent-glow); color: var(--accent-2); }
.post-card.schedule .post-band { background: var(--warn-bg);     color: var(--warn-fg); }
.post-card.announcement .post-band { background: var(--ok-bg);   color: var(--ok-fg); }

.post-body { padding: 15px 16px 16px; }

.post-author { display: flex; gap: 11px; align-items: center; }
.post-author .who {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(140deg, #3d1554, #7a1465);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
}
.post-author .name { flex: 1; min-width: 0; }
.post-author .name b { display: block; font-size: 14px; font-weight: 700; }
.post-author .name span {
  display: block; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.post-body h3 {
  margin: 13px 0 0;
  font-size: 17px; font-weight: 700; letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.post-body .text {
  margin: 7px 0 0;
  font-size: 14px; line-height: 1.62;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.post-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--surface-2);
  font-size: 11.5px; color: var(--muted);
}
.post-foot svg { width: 13px; height: 13px; flex-shrink: 0; }
.post-foot .spacer { flex: 1; }

/* =====================
   TEAM DIRECTORY (el diseño de la propuesta)
   ===================== */
/* Ficha del equipo y luego una fila por compañero: dorsal en un cuadrito,
   jugador y apoderado en dos líneas, y el contacto a un toque. */
.team-head {
  border-radius: 22px; padding: 20px 22px; margin-bottom: 4px;
  background: linear-gradient(135deg, #1c0f2b, var(--accent-purple) 60%, #8a1a70);
  color: #fff; box-shadow: 0 14px 30px rgba(76, 28, 102, .25);
  display: flex; gap: 16px; align-items: center;
}
.team-head .crest {
  width: 62px; height: 62px; border-radius: 16px; flex: none;
  background: rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 16px;
  overflow: hidden;
}
.team-head .crest img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-head .info { flex: 1; min-width: 0; }
.team-head .info b {
  display: block; font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-size: 1.6rem; font-weight: 400; text-transform: uppercase; line-height: 1.1;
}
.team-head .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.team-head .chip {
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18);
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff;
}

.mate-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px;
}
.mate {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 16px; position: relative;
  display: flex; flex-direction: column; gap: 12px;
}
.mate.mine { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
/* El dorsal es lo que se busca primero: grande, sólido y en el color de la marca. */
.mate .no {
  position: absolute; top: 10px; right: 14px;
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-size: 2.4rem; font-weight: 400; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.mate .av {
  width: 52px; height: 52px; border-radius: 50%; flex: none; overflow: hidden;
  background: linear-gradient(150deg, var(--accent-purple), #a3187a); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif; font-size: 1.1rem;
}
.mate .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mate .who { min-width: 0; }
.mate .who b { display: block; font-size: 15px; font-weight: 700; }
.mate .who > span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.mate .foot {
  margin-top: auto; border-top: 1px solid var(--border); padding-top: 10px;
  display: flex; align-items: center; gap: 6px; min-height: 48px;
  font-size: 12.5px; color: var(--muted);
}
.mate .foot > svg { width: 14px; height: 14px; flex: none; }
.mate .foot .sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mate .tap {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transform: none;
}
.mate .tap:active { transform: scale(.94); }
.mate .tap svg { width: 17px; height: 17px; }
.mate .me-pill {
  display: inline-block; vertical-align: 1px; margin-left: 4px;
  font-size: 11px; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; background: var(--accent-glow); color: var(--accent);
}

@media (max-width: 600px) {
  .mate { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 12px; padding: 14px 16px; }
  .mate .foot { grid-column: 1 / -1; }
  .mate .who { padding-right: 44px; }
}

/* =====================
   PAGOS (admin): resumen por tipo de ingreso
   ===================== */
.pay-seg { max-width: 520px; }
.segmented.pay-seg button[aria-pressed="true"],
:root[data-theme="dark"] .segmented.pay-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }
.pay-hero { display: grid; grid-template-columns: 1.1fr 1.5fr; gap: 14px; margin-bottom: 18px; }
.pay-total {
  border-radius: 18px; padding: 20px; color: #fff;
  background: linear-gradient(135deg, #1c0f2b, var(--accent-purple) 60%, #8a1a70);
}
.pay-lbl { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #e9c9f5; }
.pay-big { font-family: 'Anton', Impact, 'Arial Narrow', sans-serif; font-size: 2.1rem; line-height: 1.15; margin: 6px 0 14px; word-break: break-word; }
.pay-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; display: flex; }
.pay-bar i { display: block; height: 100%; }
.pay-bar .t, .pay-dot.t { background: var(--accent); }
.pay-bar .f, .pay-dot.f { background: #a855f7; }
.pay-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: #e9c9f5; flex-wrap: wrap; }
.pay-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.pay-break {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 18px;
}
.pay-break table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pay-break th {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; text-align: right; padding: 0 0 8px; background: transparent;
}
.pay-break td { padding: 11px 0; border-top: 1px solid var(--border); text-align: right; font-weight: 600; }
.pay-break th:first-child, .pay-break td:first-child { text-align: left; }
.pay-break td:first-child { font-weight: 700; white-space: nowrap; }
.pay-break tr.on td:first-child { color: var(--accent); }
.pay-break tr.total td { font-weight: 800; }
.pay-break .ok { color: #16a34a; } .pay-break .bad { color: var(--danger); }
:root[data-theme="dark"] .pay-break .ok { color: #4ade80; }
.pay-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin-right: 4px; vertical-align: 1px; }
.pay-tag.tuition { background: var(--accent-glow); color: var(--accent); }
.pay-tag.fee { background: rgba(168, 85, 247, .16); color: #a855f7; }
@media (max-width: 700px) { .pay-hero { grid-template-columns: 1fr; } .pay-break { padding: 10px 12px; } .pay-break table { font-size: 12.5px; } }

/* =====================
   CALENDARIO (el diseño de la propuesta)
   ===================== */
/* Agrupa por día en vez de por mes plegable, pone la hora en una insignia a la
   izquierda y convierte el RSVP en tres botones. */
.day-head {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 9px;
}
.day-head:first-child { margin-top: 2px; }
.day-head.today { color: var(--accent); }

.ev-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
  margin-bottom: 11px;
}
.ev { display: flex; gap: 12px; align-items: flex-start; }
.ev .when {
  /* min-width, no width fijo: una hora con minutos de dos dígitos como
     "10:33" no entraba en los 50px fijos y se cortaba o partía en dos
     líneas. Con min-width + padding lateral, se ensancha solo cuando el
     texto lo necesita ("5 PM" sigue viéndose igual de compacto). */
  flex: none; min-width: 50px; text-align: center;
  background: var(--accent-glow); border-radius: 12px; padding: 7px 6px;
}
.ev .when b {
  display: block; font-size: 17px; font-weight: 800; color: var(--accent);
  line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ev .when span {
  display: block; font-size: 10px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .06em; margin-top: 2px;
}
.ev .what { flex: 1; min-width: 0; }
.ev .what b { display: block; font-size: 14.5px; font-weight: 700; }
.ev .what span { display: block; font-size: 12.5px; color: var(--muted); }
.ev .what .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Tres botones de toque en vez de un <select> al que hay que apuntar */
.rsvp { display: flex; gap: 7px; margin-top: 12px; }
.rsvp button {
  flex: 1; min-height: 44px; border-radius: 11px; cursor: pointer;
  border: 1.4px solid var(--border); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 700;
  transition: transform .1s, background .15s, border-color .15s, color .15s;
  transform: none;
}
.rsvp button:active { transform: scale(.96); }
.rsvp button[aria-pressed="true"] {
  background: var(--accent-purple); border-color: var(--accent-purple); color: #fff;
}

/* Acciones del staff dentro de la tarjeta: la familia no las ve nunca */
.ev-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.ev-actions a { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ev-actions svg { width: 15px; height: 15px; }

/* =====================
   EMPTY STATES
   ===================== */
.empty-state {
  text-align: center;
  padding: 36px 20px;
  color: var(--muted);
}
.empty-state .empty-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.empty-state .empty-icon svg { width: 26px; height: 26px; }
.empty-state h3 {
  margin: 0 0 6px;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.empty-state p { margin: 0 auto; max-width: 34ch; font-size: 13px; line-height: 1.5; }

h1 { margin: 0 0 20px; font-size: 22px; font-weight: 700; color: var(--text); }

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.header-row h1 { margin: 0; }

/* Filtros de Reportes: en escritorio van en una fila; en celular, en grilla
   de 2 columnas con el equipo y el botón ocupando el ancho completo — antes
   era un flex-wrap genérico y el <select> largo de "Team / Division" quedaba
   solo en su propia línea con las fechas amontonadas debajo, sin alinear. */
.report-filters {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px;
}
/* Los <label> traen 14px de margen inferior (para separar filas cuando el
   formulario es vertical); en esta fila ese margen quedaba solo del lado de
   los campos con label, así que "align-items:flex-end" alineaba el botón
   14px más abajo que los inputs. Sin el margen, ambos comparten el mismo
   borde inferior real. */
.report-filters > label { margin-bottom: 0; }
.report-filters > button { height: 39px; }
@media (max-width: 640px) {
  .report-filters {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px;
    align-items: stretch;
  }
  .report-filters > label:first-child { grid-column: 1 / -1; }
  .report-filters > label { margin-bottom: 0; }
  .report-filters > button { grid-column: 1 / -1; min-height: 44px; }
}

/* =====================
   TOPBAR / BREADCRUMB
   ===================== */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
#breadcrumb { font-size: 12px; color: var(--muted); }
#breadcrumb strong { color: var(--text); font-weight: 600; }
#breadcrumb svg.ic { width: 10px; height: 10px; margin: 0 2px; }

/* =====================
   METRIC STRIP (dashboard)
   ===================== */
.metric-strip {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.metric-item {
  flex: 1;
  min-width: 160px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-right: 1px solid var(--border);
}
.metric-item:last-child { border-right: 0; }
.metric-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--accent-glow); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.metric-icon svg { width: 16px; height: 16px; }
.metric-icon.alt { background: rgba(144,19,201,.12); color: var(--accent-purple); }
.metric-icon.muted { background: var(--surface-2); color: var(--muted); }
.metric-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.metric-value { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.3; }
@media (max-width: 768px) {
  .metric-item { border-right: 0; border-bottom: 1px solid var(--border); flex: 1 1 100%; }
  .metric-item:last-child { border-bottom: 0; }
}

/* =====================
   CARDS / GRID
   ===================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.tile {
  background: var(--surface);
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: border-color .15s, box-shadow .15s;
}
.tile:hover { border-color: #cbd5e1; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.tile h3 { margin: 0 0 6px; font-size: 15px; color: var(--text); }
.tile .meta { color: var(--muted); font-size: 12px; line-height: 1.6; }
.tile .stat { font-size: 32px; font-weight: 800; color: var(--accent); }

/* Team card */
.team-card { cursor: pointer; }
.team-card:hover { border-color: var(--accent); }
.team-logo-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
.team-logo { width: 80px; height: 80px; object-fit: contain; border-radius: 10px; }
.team-logo-placeholder {
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 10px;
}
.team-logo-placeholder svg { width: 32px; height: 32px; }

/* =====================
   TABLE
   ===================== */
.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.data th, .data td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}
.data th { background: var(--surface-2); font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.5px; }
.data tr:last-child td { border-bottom: 0; }
.data tr:hover td { background: #fafbfd; }

/* Carril de rescate: en escritorio angosto una tabla ancha se desplaza dentro
   de su caja en vez de estirar la página. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* En pantalla chica la tabla deja de ser tabla: cada fila pasa a ser una
   tarjeta y cada celda una línea "etiqueta / valor". La etiqueta sale del
   atributo data-label del <td>, así que no se pierde ninguna columna — antes
   se escondían la 4 y la 5 y la tabla igual desbordaba.
   Una celda SIN data-label es el título de la tarjeta. */
@media (max-width: 720px) {
  .data { display: block; border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .data thead { display: none; }
  .data tbody, .data tr, .data td { display: block; width: auto; }

  /* Columna flex para poder subir el título/foto sin cambiar el orden de la
     tabla en escritorio (.card-title, .card-media). */
  .data tr {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .data tr:last-child { margin-bottom: 0; }
  .data tr:hover td { background: transparent; }

  .data td { border: 0; padding: 3px 0; font-size: 13.5px; }
  .data td:empty { display: none; }

  .data td[data-label] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  }
  .data td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
  }

  .data td:not([data-label]):not(.row-actions):not(.card-media):not(.hint) {
    font-size: 15px; font-weight: 700; padding-bottom: 6px;
  }
  .data td.card-title { order: -1; font-size: 15px; font-weight: 700; padding-bottom: 6px; }
  .data td.card-title::before { content: none; }
  .data td.card-media { order: -2; padding-bottom: 8px; }
  .data td.row-actions { order: 1; }
  .data td.hint { font-weight: 400; }

  .data td.row-actions {
    white-space: normal;
    margin-top: 8px; padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .data td.row-actions a { display: inline-block; padding: 5px 0; }

  /* El resumen del grupo baja a su propia línea en vez de estirar la cabecera */
  .month-group summary .month-count { flex-basis: 100%; }

  /* ---- Posts en celular ----
     El ancho ya lo limita la pantalla: los topes en ch solo dejaban media
     tarjeta vacía y partían "Regular Season only" en dos líneas de a poco. */
  .post-body { padding: 14px 14px 15px; }
  .post-band { padding: 9px 14px; }
  .post-body h3 { font-size: 16px; }
  .post-body .text { font-size: 13.5px; }

  /* Las tablas apiladas ya no necesitan el carril horizontal que las envolvía */
  .table-scroll { overflow-x: visible; }
}

/* =====================
   EVENTS
   ===================== */
.events-wrap { display: flex; flex-direction: column; gap: 12px; }

.month-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.month-group summary {
  display: flex;
  align-items: center;
  /* sin wrap el resumen largo ("9 fees · paid … · outstanding …") fija un
     min-content mayor que la pantalla y desborda la vista entera */
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text);
  list-style: none;
}
.month-group summary::-webkit-details-marker { display: none; }
.month-group summary .chev {
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .15s;
  flex-shrink: 0;
}
.month-group[open] summary .chev { transform: rotate(-135deg); }
.month-group summary .month-count {
  font-weight: 500; font-size: 12px; color: var(--muted);
  min-width: 0; overflow-wrap: anywhere;
}
.month-group .month-events {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}
.event-item {
  background: var(--surface);
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.event-left { flex: 1; min-width: 0; }
.event-right { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.event-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.event-title .hint { color: var(--muted); font-weight: normal; }
.event-meta { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.event-address { color: var(--muted); font-size: 12px; }
.time-display { background: var(--accent-glow); color: var(--accent-2); padding: 6px 12px; border-radius: 16px; font-size: 12px; font-weight: 600; border: 1px solid var(--accent); }
.rsvp-select { padding: 6px 8px; font-size: 12px; border: 1px solid #ddd; border-radius: 4px; }
.event-right .event-actions { display: flex; gap: 8px; font-size: 12px; }
.event-item.match    { border-left-color: var(--accent); }
.event-item.training { border-left-color: var(--info-fg); }
.event-item.meeting  { border-left-color: var(--accent-purple); }
.event-item.other    { border-left-color: var(--muted); }
.event-item .when {
  color: var(--muted); font-size: 12px; margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.event-item .event-meta {
  gap: 0;
  flex-wrap: nowrap;
}

.event-item .event-meta > span:not(.time-display) {
  padding: 0 8px;
  border-right: 1px solid var(--border);
}

.event-item .event-meta > span:last-of-type:not(.time-display) {
  border-right: none;
}

.event-item .time-display {
  margin-left: auto;
  padding-left: 8px;
  flex-shrink: 0;
  font-weight: 500;
  color: var(--text);
}

.event-item .event-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.type-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 5px;
  font-size: 11px; font-weight: 700;
  vertical-align: middle;
}
.type-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.type-chip.match    { background: var(--accent-glow);          color: var(--accent-2); }
.type-chip.training { background: var(--info-bg);               color: var(--info-fg); }
.type-chip.meeting  { background: rgba(76,28,102,.12);          color: var(--accent-purple); }
.type-chip.other    { background: var(--surface-2);             color: var(--muted); }

/* =====================
   BADGES
   ===================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--muted);
}
.badge::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge.paid, .badge.completed, .badge.active-badge { background: var(--ok-bg); color: var(--ok-fg); }
.badge.pending, .badge.scheduled { background: var(--info-bg); color: var(--info-fg); }
.badge.pending_review { background: var(--warn-bg); color: var(--warn-fg); }
.badge.failed, .badge.cancelled  { background: #fee2e2; color: #991b1b; }

/* =====================
   PLAYERS
   ===================== */
/* Un solo tamaño manda: quien use el avatar redefine --avatar y la foto y el
   ícono de relleno escalan con él, en vez de quedar fijos en 38px. */
.player-avatar {
  --avatar: 38px;
  width: var(--avatar); height: var(--avatar);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.player-avatar svg { width: calc(var(--avatar) * 0.47); height: calc(var(--avatar) * 0.47); }
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-photo-edit { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block; }
.player-photo-placeholder {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.player-photo-placeholder svg { width: 34px; height: 34px; }
.avatar-ini {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
  background: var(--accent-purple);
}

/* =====================
   TARJETA DE JUGADOR (My Players) — "ficha de club", opción C revisada
   ===================== */
/* Réplica fiel del mockup aprobado: panel oscuro tipo carta de colección,
   Anton para nombre y dorsal, escudo superpuesto a la foto. En vez de
   estadísticas inventadas —hoy no hay partidos cargados— la franja
   inferior muestra el coach. Tocar la tarjeta abre la ficha completa. */
.roster-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}
.roster-card {
  --rc-panel: #171020;
  --rc-ink: #f5eefb;
  --rc-dim: #b7a7cc;
  --rc-line: rgba(245, 238, 251, .12);
  width: 100%;
  max-width: 280px;
  aspect-ratio: 280 / 440;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--rc-panel);
  border: 1px solid var(--rc-line);
  box-shadow: 0 20px 40px rgba(23, 16, 32, .35);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.roster-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px rgba(23, 16, 32, .45); }
.roster-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.roster-card-photo {
  position: relative;
  height: 56%;
  background: linear-gradient(150deg, var(--accent-purple), #7a1465) center / cover no-repeat;
}
.roster-card-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23, 16, 32, 0) 55%, var(--rc-panel) 100%);
}
.roster-card-noPhoto {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .5);
}
.roster-card-noPhoto svg { width: 40px; height: 40px; }
.roster-card-crest {
  position: absolute; top: 14px; left: 14px; width: 41px; height: 41px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
  z-index: 1;
}
.roster-card-num {
  position: absolute; top: 8px; right: 14px; z-index: 1;
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-size: 2.3rem; font-weight: 400; color: #fff; opacity: .92;
  text-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.roster-card-edit {
  position: absolute; bottom: 10px; right: 10px; z-index: 1;
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(11,7,16,.55); border: 1px solid rgba(255,255,255,.2);
  color: #fff; display: flex; align-items: center; justify-content: center;
  transform: none;
}
.roster-card-edit svg { width: 14px; height: 14px; }
.roster-card-edit:hover { background: rgba(11,7,16,.8); transform: none; }

.roster-card-body {
  position: relative;
  margin-top: -6px;
  padding: 0 18px 16px;
  display: flex; flex-direction: column; flex: 1;
}
.roster-card-body h3 {
  margin: 0;
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-size: 1.4rem; font-weight: 400; text-transform: uppercase;
  line-height: 1; letter-spacing: .01em; color: var(--rc-ink);
}
.roster-card-pos { font-size: .76rem; color: var(--rc-dim); margin-top: 5px; }
.roster-card-rows {
  margin-top: auto; border-top: 1px solid var(--rc-line); padding-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.roster-card-row { display: flex; align-items: center; gap: 10px; }
.roster-card-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.roster-card-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgba(212, 35, 143, .16); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
}
.roster-card-ico svg { width: 15px; height: 15px; }
.roster-card-lbl { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rc-dim); font-weight: 600; }
.roster-card-row b { color: var(--rc-ink); font-weight: 700; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Ficha completa (popup al tocar la tarjeta) ---- */
/* Opción 3 de los mockups revisados: franja "de un vistazo" (edad, pie,
   altura — sin uniforme, se pidió sacarlo de ahí) + secciones en acordeón
   para no mostrar todo de una, con los botones de abajo tomados de la
   Opción 2 (mismo alto, uno relleno y otro contorneado). */
/* Cabecera morada reutilizable: la ficha de solo lectura y el formulario de
   edición comparten el mismo header, así que va en una clase aparte en vez
   de duplicarse. Los colores de texto van con !important porque compiten
   con ".modal-content h2 { color: var(--text) }", que es igual de
   específica y perdía el empate por venir antes en el archivo. */
.modal-purple-head {
  display: flex; gap: 14px; align-items: center;
  margin: -28px -28px 0;
  padding: 22px 24px 42px;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(160deg, var(--accent-purple), #7a1465);
}
/* La ficha de solo lectura deja 42px de aire abajo a propósito, para que la
   franja "de un vistazo" flote encima. El formulario de edición no tiene esa
   franja, así que ese aire de más solo dejaba el primer campo pegado contra
   un morado excesivo — aquí se recorta al espaciado normal. */
.modal-purple-head.compact { padding-bottom: 22px; margin-bottom: 20px; }
.modal-purple-head h2 { color: #fff !important; }
.modal-purple-head .hint { color: rgba(255, 255, 255, .72) !important; }
.profile-avatar-ini {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-size: 1.05rem; letter-spacing: .02em; color: #fff;
}

.profile-glance {
  position: relative;
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(36, 19, 51, .16);
  padding: 12px 6px;
  margin: -24px 10px 18px;
}
.profile-glance div { flex: 1; text-align: center; padding: 0 4px; }
.profile-glance div + div { border-left: 1px solid var(--border); }
.profile-glance b { display: block; font-size: 15px; font-weight: 800; color: var(--accent-purple); }
.profile-glance span {
  display: block; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-top: 2px;
}

.profile-acc {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.profile-acc + .profile-acc { margin-top: 10px; }
.profile-acc summary {
  list-style: none; cursor: pointer; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text); background: var(--surface-2);
}
.profile-acc summary::-webkit-details-marker { display: none; }
.profile-acc summary .chev { transition: transform .15s; color: var(--muted); flex-shrink: 0; }
.profile-acc[open] summary .chev { transform: rotate(180deg); }
.profile-acc .profile-acc-inner { padding: 14px; }

.profile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 20px;
}
.profile-grid > div { display: flex; flex-direction: column; gap: 3px; }
.profile-grid span { font-size: 11.5px; color: var(--muted); }
.profile-grid b { font-size: 14px; font-weight: 600; }
.profile-guardians { display: flex; flex-direction: column; gap: 12px; }
.profile-guardian { display: flex; gap: 10px; align-items: flex-start; }
.profile-guardian b { font-size: 14px; font-weight: 700; }

.profile-actions { display: flex; gap: 10px; margin-top: 20px; }
.profile-actions .upload-btn,
.profile-actions button.ghost {
  flex: 1; height: 44px; padding: 0 16px; font-size: 13.5px; font-weight: 700;
  border-radius: var(--radius); border: 1.5px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  background: var(--surface); color: var(--text); line-height: normal;
}
.profile-actions .upload-btn svg, .profile-actions button.ghost svg { width: 16px; height: 16px; }
.profile-actions .upload-btn:hover { background: var(--surface-3); }
.profile-actions .upload-btn input[type="file"] { display: none; }
.profile-actions button.primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.profile-actions button.primary:hover { background: var(--accent); opacity: .92; }

/* =====================
   MIS PAGOS (vista padre/jugador)
   ===================== */
/* Control segmentado: una sola opción activa, al estilo de una app.
   Reutilizable en cualquier vista que separe contenido en dos o tres grupos. */
.segmented {
  display: flex;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  margin-bottom: 16px;
}
.segmented button {
  flex: 1; min-height: 40px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 700;
  transition: background .15s, color .15s;
}
.segmented button:hover { color: var(--text); background: transparent; transform: none; }
.segmented button[aria-pressed="true"] {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 3px rgba(36,19,51,.13);
}
.segmented button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.segmented .tally { font-weight: 600; opacity: .6; }

/* Cabecera con lo que se debe: lo primero que un padre necesita saber */
.due-summary {
  background: var(--accent-purple); color: #fff;
  border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 16px;
}
.due-summary .k {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; opacity: .7;
}
.due-summary .v {
  font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.due-summary .sub { font-size: 12.5px; opacity: .78; }

/* Desglose de la cabecera: una barra de avance por plan (un hijo en un
   programa) más el pago único. No se suman entre sí: un porcentaje que mezcla
   dos planes de dos hijos no significa nada. */
.due-split {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex; flex-direction: column; gap: 14px;
}
.plan-progress .head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.plan-progress .lbl {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; opacity: .72;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-progress .num {
  font-size: 15px; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.plan-progress .bar {
  height: 7px; border-radius: 99px;
  background: rgba(255, 255, 255, .2);
  overflow: hidden;
  margin-top: 6px;
}
.plan-progress .bar i {
  display: block; height: 100%;
  background: var(--accent-light);
  border-radius: 99px;
  transition: width .35s ease;
}
.plan-progress .sub { font-size: 11.5px; opacity: .74; margin-top: 5px; }

@media (prefers-reduced-motion: reduce) {
  .plan-progress .bar i { transition: none; }
}

.due-list { display: flex; flex-direction: column; gap: 10px; }
.due-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  align-items: start;
}
.due-item.pending { border-left-color: var(--warn-fg); }
.due-item.pending_review { border-left-color: var(--info-fg); }
.due-item.paid, .due-item.refunded { border-left-color: var(--ok-fg); }
.due-item.failed, .due-item.overdue { border-left-color: var(--danger); }

.due-item .due-title { margin: 0; font-size: 15px; font-weight: 700; min-width: 0; }
.due-item .due-amount {
  font-size: 17px; font-weight: 800; color: var(--text);
  white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right;
}
.due-item .due-meta {
  grid-column: 1 / -1;
  color: var(--muted); font-size: 12.5px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.due-item .due-actions {
  grid-column: 1 / -1;
  display: flex; gap: 8px; align-items: center; margin-top: 8px;
}
.due-item .due-actions label.upload-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  background: var(--accent); color: var(--on-accent); padding: 8px 14px;
  border-radius: var(--radius); font-weight: 700; font-size: 13.5px; cursor: pointer;
  transition: background .15s;
}
.due-item .due-actions label.upload-btn:hover { background: var(--accent-2); }
.due-item .due-actions input[type="file"] { display: none; }
.due-item .due-actions a.proof-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13.5px; font-weight: 600;
}

/* =====================
   MISC FORM HELPERS
   ===================== */
.img-upload-wrap {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  padding: 16px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.search { max-width: 320px; margin-bottom: 16px; }

/* =====================
   TOASTS (confirmación de acciones)
   ===================== */
#toast-stack {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 900;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(380px, calc(100vw - 36px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  box-shadow: 0 8px 26px rgba(36, 19, 51, 0.18);
  font-size: 13.5px; line-height: 1.45;
  animation: toast-in .18s ease-out;
}
.toast.closing { animation: toast-out .18s ease-in forwards; }
.toast.ok    { border-left-color: #16a34a; }
.toast.error { border-left-color: var(--danger); }
.toast.info  { border-left-color: var(--accent); }
.toast-icon { flex: none; font-weight: 700; line-height: 1.3; }
.toast.ok .toast-icon    { color: #16a34a; }
.toast.error .toast-icon { color: var(--danger); }
.toast.info .toast-icon  { color: var(--accent); }
.toast-body { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.toast-close {
  flex: none; background: none; border: 0; padding: 0 2px;
  color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
}
.toast-close:hover { color: var(--text); background: none; transform: none; }

@keyframes toast-in  { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }

@media (max-width: 560px) {
  #toast-stack { top: auto; bottom: 14px; left: 14px; right: 14px; max-width: none; }
  @keyframes toast-in  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(14px); } }
}

.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
}
.filter-bar .search { margin-bottom: 0; flex: 1 1 240px; }
.filter-bar select { width: auto; min-width: 160px; flex: 0 1 200px; }
.filter-bar button { white-space: nowrap; }
@media (max-width: 560px) {
  .filter-bar > * { flex: 1 1 100%; }
  .filter-bar select { width: 100%; max-width: none; }
}
.error  { color: var(--danger); margin-top: 6px; font-size: 13px; min-height: 1.2em; }
.hint   { color: var(--muted); font-size: 12px; margin-top: 8px; }
.danger-link { color: var(--danger) !important; }

/* =====================
   MODAL
   ===================== */
.modal[hidden] { display: none; }
.modal:not([hidden]) {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
  padding: 16px;
}
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px;
  border-radius: 16px;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.modal-content h2 { margin: 0 0 20px; font-size: 18px; color: var(--text); }
.close {
  position: absolute; top: 12px; right: 16px;
  background: transparent; color: var(--muted);
  font-size: 22px; padding: 0; width: 28px; height: 28px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transform: none !important;
}
.close:hover { background: var(--surface-2); color: var(--text); }
/* La ficha del jugador tiene cabecera morada de borde a borde; la X gris
   quedaría invisible encima, así que ahí se ve blanca sobre un círculo
   traslúcido. */
.modal-content:has(.player-profile) .close { color: #fff; background: rgba(255,255,255,.18); }
.modal-content:has(.player-profile) .close:hover { background: rgba(255,255,255,.3); color: #fff; }

/* form error inside modal */
.form-error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
}
.form-error.visible { display: block; }

/* =====================
   MOBILE
   ===================== */
@media (max-width: 768px) {
  #mobile-topbar { display: flex; }
  #sidebar { transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
  #main-content { margin-left: 0; }
  #topbar { display: none; }
  /* El "max(24px, ...)" es un piso: algunos Android devuelven 0 en
     env(safe-area-inset-top) para la barra de estado normal (solo reportan
     inset real cuando hay un recorte/notch físico), así que sin el piso el
     contenido queda tapado igual en esos teléfonos aunque la fórmula esté
     bien escrita. Con notch real, env() gana igual porque es el mayor. */
  .content-inner { padding: calc(80px + max(24px, env(safe-area-inset-top, 0px))) 16px 24px; }

  /* El cajón lateral (hamburguesa) tapa toda la pantalla en celular, así que
     su cabecera también necesita el inset del notch — antes solo lo tenía
     la versión "barra inferior" (roles familia); admin/coach/director/
     manager/team_admin abrían el cajón con el nombre del club bajo el notch. */
  .sidebar-brand { padding-top: calc(18px + max(24px, env(safe-area-inset-top, 0px))); }

  /* Con barra inferior: "More" reemplaza a la hamburguesa, el escudo se centra
     y el contenido reserva el alto de la barra para que el último elemento
     no quede tapado. */
  body.has-bottom-nav #bottom-nav { display: flex; }
  body.has-bottom-nav #hamburger { display: none; }
  /* Avatar a la izquierda y título grande al lado, alineados: el encabezado
     de Spond. El avatar abre el menú, que es donde vive la cuenta. */
  /* Cabecera morada, como en la propuesta: el escudo del club es morado y la
     barra le da identidad a la app apenas se abre. */
  body.has-bottom-nav #mobile-topbar {
    justify-content: flex-start; gap: 12px; padding: 0 16px 12px;
    border-bottom: 0;
    background: var(--accent-purple);
    height: auto;
    min-height: var(--topbar-h);
    padding-top: max(24px, env(safe-area-inset-top, 0px));
  }
  body.has-bottom-nav .mobile-section { color: #fff; }
  body.has-bottom-nav .topbar-avatar {
    display: flex;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
  }
  body.has-bottom-nav .content-inner {
    padding-top: calc(72px + max(24px, env(safe-area-inset-top, 0px)));
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
  /* El toast se apoya sobre la barra en vez de quedar encima de las pestañas */
  body.has-bottom-nav #toast-stack { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

  /* La marca cede el lugar al título de la sección */
  body.has-bottom-nav .mobile-brand { display: none; }
  body.has-bottom-nav .mobile-section { display: block; }

  /* El título ya está en la barra: repetirlo dentro de la vista gasta media
     pantalla. El .header-row queda solo con sus botones. */
  body.has-bottom-nav .view > h1,
  body.has-bottom-nav .view > .header-row > h1 { display: none; }
  /* Sin el h1 el botón queda solo: que ocupe el ancho, como acción principal */
  body.has-bottom-nav .view > .header-row { gap: 10px; }
  body.has-bottom-nav .view > .header-row > button { flex: 1; min-height: 44px; }
  body.has-bottom-nav .view > h1 + p.hint { margin-top: 0 !important; }

  /* El detalle deja de ser una tarjeta flotante y se abre a pantalla completa,
     con su propia cabecera de navegación. */
  body.has-bottom-nav .modal:not([hidden]) { padding: 0; background: var(--surface); }
  body.has-bottom-nav .modal-content {
    max-width: none; width: 100%;
    max-height: none; height: 100%;
    border: 0; border-radius: 0; box-shadow: none;
    padding: 0;
    display: flex; flex-direction: column;
  }
  body.has-bottom-nav .modal-content > .close { display: none; }
  body.has-bottom-nav #modal-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  /* El <h2> ya se muestra en la cabecera */
  body.has-bottom-nav #modal-body > h2:first-of-type { display: none; }

  /* En una hoja completa la acción principal va a todo el ancho */
  body.has-bottom-nav #modal-body form button[type="submit"] {
    width: 100%; min-height: 48px;
  }

  /* La cabecera morada de la ficha del jugador también va de borde a borde,
     pero aquí el "borde" de #modal-body es 18px/16px, no los 28px del modal
     flotante de escritorio — el margen negativo tiene que coincidir con eso. */
  body.has-bottom-nav .modal-purple-head { margin: -18px -16px 0; border-radius: 0; }

  body.has-bottom-nav .sheet-header {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    /* min-height, no height: con box-sizing border-box el inset del notch se
       comería el alto de la cabecera */
    min-height: var(--topbar-h);
    padding: 0 8px 0 4px;
    padding-top: max(24px, env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  /* ---- El cajón, con el lenguaje de la propuesta ----
     Deja de ser un menú de escritorio metido en un teléfono: cabecera con el
     avatar grande, filas agrupadas en tarjetas y chevron a la derecha. */
  body.has-bottom-nav #sidebar {
    width: min(86vw, 330px);
    background: var(--bg);
    border-right: 0;
    box-shadow: 8px 0 32px rgba(36, 19, 51, .22);
  }

  /* El escudo del club cede el lugar a quién eres */
  body.has-bottom-nav .sidebar-brand {
    background: #1a1226;
    border-bottom: 0;
    padding: 20px 18px;
    padding-top: calc(20px + max(24px, env(safe-area-inset-top, 0px)));
    min-height: calc(150px + max(24px, env(safe-area-inset-top, 0px)));
  }
  body.has-bottom-nav .sidebar-brand .brand-mark { height: 112px; opacity: .14; filter: brightness(2); }
  body.has-bottom-nav .sidebar-brand .brand-name { color: #fff; font-size: 16px; }
  body.has-bottom-nav .sidebar-brand .powered-by { color: rgba(255, 255, 255, .62); }
  body.has-bottom-nav .sidebar-brand .powered-by strong { color: rgba(255, 255, 255, .85); }

  body.has-bottom-nav #nav { padding: 16px 14px 8px; gap: 0; }

  body.has-bottom-nav .nav-group-label {
    font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
    color: var(--muted);
    padding: 20px 4px 9px;
  }
  body.has-bottom-nav .nav-group-label:first-child { padding-top: 0; }

  /* Cada enlace es una fila de tarjeta; las consecutivas se pegan en un bloque
     con una hairline entre medio, como una lista de ajustes nativa. */
  body.has-bottom-nav #nav a {
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-width: 0;
    border-radius: 0;
    border-left-width: 1px;
    padding: 14px 15px;
    font-size: 14.5px; font-weight: 600;
    min-height: 50px;
    gap: 13px;
  }
  /* Esquinas solo en los extremos de cada grupo. Qué enlace abre y cierra cada
     bloque lo marca markNavGroups() en JS: los enlaces que el rol no ve siguen
     en el DOM con display:none, así que la adyacencia de CSS mentiría. */
  body.has-bottom-nav #nav a.grp-first { border-top-width: 1px; border-radius: 14px 14px 0 0; }
  body.has-bottom-nav #nav a.grp-last  { border-bottom-width: 1px; border-radius: 0 0 14px 14px; }
  body.has-bottom-nav #nav a.grp-first.grp-last { border-radius: 14px; }

  body.has-bottom-nav #nav a svg.ic { width: 19px; height: 19px; color: var(--accent); }
  body.has-bottom-nav #nav a.active {
    background: var(--accent-glow);
    padding-left: 15px;
  }
  /* El chevron de "esto lleva a otra pantalla" */
  body.has-bottom-nav #nav a::after {
    content: '';
    margin-left: auto; flex: none;
    width: 7px; height: 7px;
    border-right: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    transform: rotate(-45deg);
  }

  /* Pie: la cuenta y el cerrar sesión, también como tarjeta */
  body.has-bottom-nav .sidebar-footer {
    border-top: 0;
    margin: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    padding: 13px 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    gap: 12px;
  }
  body.has-bottom-nav .sidebar-avatar { width: 38px; height: 38px; font-size: 14px; }
  body.has-bottom-nav .sidebar-user-name { font-size: 14px; font-weight: 700; }
  body.has-bottom-nav .sidebar-user-role { font-size: 12px; }
  body.has-bottom-nav #logout-btn {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--danger); border-color: var(--border);
  }

  /* Atrás en círculo a la izquierda y título centrado: el detalle de Spond.
     Antes este "padding: 0 12px" pisaba el padding-top con el inset del
     notch que se había fijado más arriba (misma especificidad, gana el que
     viene después en el archivo) — el botón de "Atrás" quedaba montado
     sobre la hora/batería del teléfono. Ahora solo toca los lados. */
  body.has-bottom-nav .sheet-header { padding-left: 12px; padding-right: 12px; gap: 12px; }
  .sheet-header #sheet-back {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    background: var(--surface-2); border: 0; border-radius: 50%;
    color: var(--text);
    cursor: pointer; transform: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  .sheet-header #sheet-back svg { width: 20px; height: 20px; display: block; }
  .sheet-header #sheet-title {
    flex: 1; text-align: center;
    /* compensa el ancho del botón para que el título quede centrado de verdad */
    margin-right: 38px;
    font-size: 16px; font-weight: 800; color: var(--text);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ---- Superficies estilo Spond: muy redondeadas, con sombra y sin borde
     marcado. Solo en la vista de familia, el panel del staff no cambia. ---- */
  body.has-bottom-nav .tile,
  body.has-bottom-nav .due-summary,
  body.has-bottom-nav .month-group,
  body.has-bottom-nav .metric-strip,
  body.has-bottom-nav .data tr {
    border-radius: 18px;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(36, 19, 51, .07);
  }
  /* La tarjeta de cobro va aparte: su borde izquierdo codifica el estado
     (pendiente / pagado / vencido) y no puede volverse transparente. */
  body.has-bottom-nav .due-item {
    border-radius: 18px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    box-shadow: 0 2px 10px rgba(36, 19, 51, .07);
  }
  body.has-bottom-nav .event-item { border-radius: 18px; }

  /* Tabs secundarios sin riel: el activo es una píldora blanca */
  body.has-bottom-nav .segmented {
    background: transparent; padding: 0; gap: 8px;
  }
  body.has-bottom-nav .segmented button { border-radius: 18px; }
  body.has-bottom-nav .segmented button[aria-pressed="true"] {
    background: var(--surface);
    box-shadow: 0 2px 10px rgba(36, 19, 51, .1);
  }
  .grid { grid-template-columns: 1fr 1fr; }
  .modal-content { padding: 20px; }
}
@media (max-width: 768px) {
  /* Event cards - layout vertical en móvil */
  .event-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 12px 14px !important;
  }

  .event-left {
    padding-bottom: 12px;
  }

  .event-right {
    align-items: stretch;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .time-display {
    flex-shrink: 0;
  }

  .rsvp-select {
    flex: 1;
    text-align: right;
  }
  .event-item .when { margin-top: 6px; }
  .event-item .event-actions {
    width: 100%;
    justify-content: space-between;
  }
  .event-item select {
    flex: 1;
    font-size: 13px;
    padding: 6px 8px;
  }

  /* La tarjeta ya nace mobile-first; en pantalla chica solo se aprieta el tipo
     y el comprobante deja de competir por el ancho con el botón. */
  .due-item { padding: 13px 14px; }
  .due-item .due-amount { font-size: 16px; }
  .due-item .due-actions { flex-wrap: wrap; }
  .due-item .due-actions a.proof-link { flex: 1; }

  /* Métricas compactas */
  .metric-item { padding: 12px 14px; }
  .metric-label { font-size: 11px; }
  .metric-value { font-size: 16px; }
}

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

  /* Event cards - más compactos */
  .event-item {
    padding: 10px 12px;
    gap: 8px;
  }
  .event-item .event-actions {
    gap: 6px;
  }
  .event-item select {
    font-size: 12px;
    padding: 5px 6px;
  }

  /* Month group - header compacto */
  .month-group summary {
    padding: 10px 14px;
    font-size: 12px;
  }
}

/* ---- iOS: sin zoom automático al escribir ----
   Safari en iPhone amplía la página al enfocar un campo con letra menor de 16px y, al
   enviar el formulario, no vuelve a alejarla: tras iniciar sesión el contenido queda
   ampliado y corrido a un lado (se ve cortado en ambos bordes) y hay que ajustarlo a
   mano. Con 16px en móvil no hay zoom. El id repite la especificidad de la regla del
   login. */
@media (max-width: 768px) {
  input, select, textarea,
  #login-page .login-panel input { font-size: 16px; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* =====================================================================
   LEGIBILIDAD EN CELULAR + CALENDARIO PARA FAMILIAS
   ---------------------------------------------------------------------
   En el teléfono la letra quedaba chica (14px de base y muchos textos de
   11–13px). Subir el zoom del navegador la agranda pero también estira los
   espacios; aquí se sube SOLO el tamaño de letra y se deja el espaciado casi
   igual. Va al final para ganarle a las reglas anteriores sin cambiarlas.
   ===================================================================== */
@media (max-width: 768px) {
  html, body { font-size: 16px; }

  /* Textos secundarios: del piso de 11–12px a 13–14px */
  label { font-size: 14.5px; }
  .hint { font-size: 13.5px; }
  .view > p.hint { font-size: 14.5px; line-height: 1.5; }
  button { font-size: 15.5px; }
  .badge, .type-chip { font-size: 12.5px; padding: 4px 10px; }
  .empty-state p { font-size: 15px; }
  .empty-state h3 { font-size: 17px; }
  .error { font-size: 14.5px; }

  /* Barra inferior y menú */
  #bottom-nav button { font-size: 12px; min-height: 52px; }
  #bottom-nav button svg { width: 24px; height: 24px; }
  .nav-group-label { font-size: 11.5px; }
  .sidebar-user-role { font-size: 13px; }

  /* Calendario */
  .day-head { font-size: 12.5px; margin: 24px 0 10px; }
  .ev-card { padding: 16px; margin-bottom: 12px; }
  .ev { gap: 14px; }
  .ev .when { min-width: 60px; padding: 9px 8px; }
  .ev .when b { font-size: 21px; }
  .ev .when span { font-size: 12px; }
  .ev .what b { font-size: 17.5px; line-height: 1.25; }
  .ev .what span { font-size: 14.5px; margin-top: 2px; line-height: 1.4; }
  .ev .what .chips { margin-top: 8px; }
  .rsvp { margin-top: 14px; gap: 8px; }
  .rsvp button { min-height: 50px; font-size: 15.5px; }
  .ev-actions { font-size: 15px; gap: 18px; }
  .ev-actions a { min-height: 40px; }
  .ev-actions svg { width: 17px; height: 17px; }
  .segmented button { min-height: 44px; font-size: 14.5px; }

  /* Roster (Teammates & parents) */
  .team-head .info b { font-size: 1.8rem; }
  .team-head .chip { font-size: 13.5px; }
  .mate .who b { font-size: 17px; }
  .mate .who > span, .mate .foot { font-size: 14px; }
  .mate .tap { width: 46px; height: 46px; border-radius: 13px; }
  .mate .tap svg { width: 20px; height: 20px; }
  .mate .me-pill { font-size: 13px; padding: 3px 11px; }

  /* My Players: tarjeta con letra legible, algo más ancha */
  .roster-card { max-width: 340px; margin: 0 auto; }
  .roster-card-body h3 { font-size: 1.65rem; }
  .roster-card-pos { font-size: .92rem; margin-top: 6px; }
  .roster-card-lbl { font-size: .66rem; }
  .roster-card-row b { font-size: .95rem; }
  .player-card h3 { font-size: 18.5px; }
  .player-card p { font-size: 14.5px; }

  /* Tarjetas generales, posts, pagos */
  .tile h3 { font-size: 17.5px; }
  .tile .meta { font-size: 14px; }
  .post-author .name b { font-size: 16px; }
  .post-author .name span { font-size: 13.5px; }
  .post-body h3 { font-size: 19px; }
  .post-body p { font-size: 16px; }
  .due-item .due-title { font-size: 17px; }
  .due-item .due-amount { font-size: 19px; }
  .due-summary .k { font-size: 12.5px; }
  .metric-label { font-size: 12.5px; }
  .metric-value { font-size: 18px; }

  /* Tablas que en celular se vuelven tarjetas */
  .data td { font-size: 15.5px; }
  .data th { font-size: 12.5px; }
  .data td[data-label]::before { font-size: 12.5px; }
  .data td.card-title { font-size: 17px; }

  /* Ficha del jugador y ventanas */
  .modal-content h2 { font-size: 21px; }
  .profile-glance b { font-size: 17px; }
  .profile-glance span { font-size: 12px; }
  .profile-grid span { font-size: 13.5px; }
  .profile-grid b, .profile-guardian b { font-size: 16px; }
}

/* ---------------------------------------------------------------------
   Calendario para familias: "Next up"
   Lo primero que ve un padre es el próximo evento en grande —cuándo, dónde
   y los botones para confirmar— en vez de una lista pareja donde todo pesa
   igual. El resto sigue debajo, agrupado por día.
   --------------------------------------------------------------------- */
.next-hero {
  background: linear-gradient(155deg, var(--accent-purple), #2f1245);
  color: #fff;
  border-radius: 20px;
  padding: 20px 18px 18px;
  margin-bottom: 8px;
  box-shadow: 0 14px 30px rgba(36, 19, 51, .28);
}
.next-hero-top {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.next-hero-top .next-hero-label { opacity: .75; }
.next-hero-count {
  background: #fff; color: var(--accent-purple);
  padding: 4px 12px; border-radius: 999px; letter-spacing: .04em;
}
.next-hero h3 { margin: 14px 0 0; font-size: 22px; line-height: 1.2; font-weight: 800; color: #fff; }
.next-hero-time {
  margin-top: 12px; font-size: 34px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.next-hero-date { margin-top: 6px; font-size: 16px; opacity: .9; }
.next-hero-place {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 12px 14px;
  background: rgba(255, 255, 255, .12); border-radius: 14px;
  color: #fff; text-decoration: none; font-size: 15.5px; line-height: 1.3;
}
.next-hero-place svg { width: 20px; height: 20px; flex: none; }
.next-hero-place span { flex: 1; min-width: 0; }
.next-hero-place em {
  flex: none; font-style: normal; font-weight: 800; font-size: 13.5px;
  background: #fff; color: var(--accent-purple); padding: 6px 12px; border-radius: 999px;
}
.next-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.next-hero-chips .type-chip, .next-hero-chips .badge {
  background: rgba(255, 255, 255, .16); color: #fff;
}
.next-hero-ask {
  margin: 16px 0 0; font-size: 16px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.next-hero .rsvp { margin-top: 10px; }
.next-hero .rsvp button {
  min-height: 54px; font-size: 16.5px;
  background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .5);
}
.next-hero .rsvp button[aria-pressed="true"] {
  background: #fff; color: var(--accent-purple); border-color: #fff;
}

/* "Responde" en las tarjetas del resto de la lista */
.reply-chip {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 5px;
  font-size: 12.5px; font-weight: 800;
  background: var(--warn-bg); color: var(--warn-fg);
}
.next-hero .reply-chip { background: #ffd66b; color: #3b2a00; }

/* ---------------------------------------------------------------------
   Ficha de un compañero (Roster): foto grande + lista, estilo TeamSnap
   --------------------------------------------------------------------- */
.mate[role="button"] { cursor: pointer; }
.mate[role="button"]:active { background: var(--surface-2); }

.pd-hero {
  position: relative; height: 210px; overflow: hidden;
  background: linear-gradient(150deg, var(--accent-purple), #7a1465);
  border-radius: 14px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
}
.pd-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%);
}
.pd-hero-initials { font-size: 64px; font-weight: 800; color: rgba(255,255,255,.35); }
.pd-hero-name { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 1; color: #fff; }
.pd-hero-name b { display: block; font-size: 24px; font-weight: 800; line-height: 1.15; }
.pd-hero-name span { display: block; font-size: 16px; opacity: .92; margin-top: 2px; }

.pd-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; border-radius: 12px; margin-bottom: 14px;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  font-size: 16.5px; font-weight: 700;
}
.pd-btn svg { width: 19px; height: 19px; }

.pd-rows { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.pd-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 14px 16px; font-size: 16px;
}
.pd-row + .pd-row { border-top: 1px solid var(--border); }
.pd-row span { color: var(--muted); }
.pd-row b { font-weight: 600; text-align: right; }
.pd-row em { display: block; font-style: normal; font-weight: 500; font-size: 13.5px; color: var(--muted); }
.pd-row em.pd-soon { color: var(--accent); font-weight: 700; }

.pd-section {
  margin: 18px 0 8px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.pd-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; margin-bottom: 8px; min-height: 56px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-size: 16px; overflow-wrap: anywhere;
}
.pd-contact small { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 2px; }
.pd-contact svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.pd-add {
  display: block; padding: 6px 2px 14px; font-size: 15px; font-weight: 700;
  color: var(--accent); cursor: pointer;
}

@media (max-width: 768px) {
  /* A pantalla completa la foto va de borde a borde, como el encabezado de la ficha del jugador */
  body.has-bottom-nav .pd-hero { margin: -18px -16px 14px; border-radius: 0; height: 230px; }
}

/* =====================================================================
   TEMA OSCURO (preferencia por persona: Claro / Oscuro / Automático)
   ---------------------------------------------------------------------
   Se activa con data-theme="dark" en <html>. Solo redefine las variables y
   corrige los pocos colores que estaban escritos a mano. El morado del club
   (encabezados, tarjeta "Next up", ficha del jugador) no cambia: ya es oscuro.
   ===================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0f0a17;
  --surface:   #1a1226;
  --surface-2: #241833;
  --surface-3: #2e2042;
  --text:      #f3ecfa;
  --muted:     #a897c0;
  --border:    #33264a;

  /* Mismo rosa fuerte de la web; el hover y el texto sobre el brillo van más claros */
  --accent:       #ff2d8f;
  --accent-2:     #ff6fb4;
  --accent-glow:  rgba(255, 45, 143, .22);
  --accent-light: #ff8fc4;
  --on-accent:    #fff;

  --danger: #f87171;
  --ok-bg:   rgba(34, 197, 94, .18);  --ok-fg:   #86efac;
  --info-bg: rgba(59, 130, 246, .20); --info-fg: #93c5fd;
  --warn-bg: rgba(245, 158, 11, .20); --warn-fg: #fcd34d;
}
/* Textos que usaban el morado del club como color: sobre oscuro no se leen */
:root[data-theme="dark"] .profile-glance b,
:root[data-theme="dark"] .type-chip.meeting,
:root[data-theme="dark"] .metric-icon.alt { color: #d4a8f0; }
:root[data-theme="dark"] .type-chip.meeting { background: rgba(212, 168, 240, .16); }
:root[data-theme="dark"] .badge.failed,
:root[data-theme="dark"] .badge.cancelled { background: rgba(248, 113, 113, .18); color: #fca5a5; }
:root[data-theme="dark"] .form-error { background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .4); color: #fca5a5; }
:root[data-theme="dark"] .data tr:hover td { background: var(--surface-2); }
:root[data-theme="dark"] .tile:hover { border-color: var(--surface-3); box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] .rsvp-select { background: var(--surface-2); color: var(--text); border-color: var(--border); }
:root[data-theme="dark"] #bottom-nav::before { background: linear-gradient(to bottom, rgba(15, 10, 23, 0) 0%, var(--bg) 60%); }
:root[data-theme="dark"] .segmented button[aria-pressed="true"] { background: var(--surface-3); box-shadow: none; }
:root[data-theme="dark"] .rsvp button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Selector de tema, en el menú lateral (More en el celular) */
.theme-switch { padding: 12px 16px 0; }
.theme-switch-label {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
}
.theme-switch .segmented { margin-bottom: 0; }
.theme-switch .segmented button { min-height: 38px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.theme-switch .segmented svg { width: 15px; height: 15px; }
@media (max-width: 768px) {
  body.has-bottom-nav .theme-switch { padding: 6px 14px 0; }
  body.has-bottom-nav .theme-switch .segmented button { min-height: 44px; font-size: 14.5px; }
  .theme-switch-label { font-size: 12px; }
}

/* ---------------------------------------------------------------------
   Calendario: la hora como banda de color (propuesta C)
   La hora va a ~36px en un bloque lleno a la izquierda; el color indica el
   tipo de evento. Solo el calendario: el Home conserva su insignia de día.
   --------------------------------------------------------------------- */
.ev-card.ev-band {
  padding: 0; overflow: hidden;
  --band: var(--accent-purple); --band-ink: #fff;
}
.ev-card.ev-band[data-type="training"] { --band: var(--accent); --band-ink: #fff; }
.ev-card.ev-band[data-type="match"]    { --band: var(--accent-purple); --band-ink: #fff; }
.ev-card.ev-band[data-type="meeting"]  { --band: #1d7a74; --band-ink: #fff; }
.ev-card.ev-band[data-type="other"]    { --band: #5b4b73; --band-ink: #fff; }

.ev-band .ev { gap: 0; align-items: stretch; }
.ev-card.ev-band .ev .when {
  border-radius: 0; background: var(--band);
  flex: none; width: 106px; padding: 14px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ev-card.ev-band .ev .when b { color: var(--band-ink); font-size: 34px; letter-spacing: -.02em; }
.ev-card.ev-band .ev .when span { color: var(--band-ink); font-size: 13px; margin-top: 4px; }
.ev-card.ev-band .ev .when small {
  color: var(--band-ink); opacity: .85; font-size: 12px; font-weight: 600;
  margin-top: 8px; white-space: nowrap;
}
.ev-band .ev .what { padding: 14px 14px 12px; }
.ev-band .rsvp { margin: 6px 14px 14px; }
.ev-band .ev-actions { margin: 0 14px; padding: 11px 0 12px; }

/* Dirección tocable en las tarjetas de evento (Home y Calendario) */
.ev .what a.ev-place {
  display: inline-flex; align-items: flex-start; gap: 6px;
  min-height: 32px; padding: 4px 0;
  color: var(--accent); font-weight: 600; font-size: 14.5px; line-height: 1.35;
  text-decoration: underline; text-decoration-color: rgba(212, 35, 143, .35); text-underline-offset: 3px;
}
.ev .what a.ev-place svg { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.ev .what a.ev-place span { display: inline; font-size: inherit; color: inherit; margin: 0; }
.ev .what a.ev-place:active { opacity: .7; }
:root[data-theme="dark"] .ev .what a.ev-place { text-decoration-color: rgba(255, 45, 143, .45); }

/* =====================================================================
   PAGOS (admin): pestañas Collect / Report
   Collect = cobranza diaria, ordenada por urgencia. Report = consulta por mes.
   ===================================================================== */
.pay-head-actions { display: flex; gap: 8px; }
.narrow-only { display: none; }
.pay-mode { max-width: 360px; }
#pay-filters-toggle { display: none; }
.pay-mini { display: none; }

#pay-collect { max-width: 760px; }
.cx-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cx-kpi {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px;
}
.cx-kpi span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cx-kpi b { font-size: 20px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cx-kpi small { font-size: 13px; color: var(--muted); }
.cx-kpi.bad b { color: var(--danger); }
.cx-kpi.warn b { color: var(--warn-fg); }
#pay-collect .search { width: 100%; margin-bottom: 4px; }

.cx-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 18px 2px 8px; font-size: 13px; color: var(--muted); }
.cx-sec b { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.cx-list { display: flex; flex-direction: column; gap: 8px; }
.cx-row { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.cx-top { display: flex; gap: 12px; align-items: flex-start; }
.cx-ini {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent-purple, var(--accent));
  font-size: 13px; font-weight: 800;
}
.cx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cx-main b { font-size: 15.5px; overflow-wrap: anywhere; }
.cx-main span { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.cx-main .cx-line.bad { color: var(--danger); font-weight: 700; }
.cx-main .cx-line.warn { color: var(--warn-fg); font-weight: 700; }
.cx-amt { flex: none; font-size: 16px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-amt small { font-size: 12px; font-weight: 600; color: var(--muted); }
.cx-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.cx-acts button { flex: 1 1 130px; min-height: 44px; font-size: 14px; }
.cx-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 14px; font-weight: 700; }
.cx-empty { margin-top: 12px; padding: 18px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: 14px; }
.cx-upcoming { margin-top: 16px; }
.cx-upcoming > summary {
  display: flex; align-items: center; min-height: 48px; padding: 0 2px;
  font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.cx-upcoming > summary::-webkit-details-marker { display: none; }
.cx-upcoming > summary::after { content: '›'; margin-left: 8px; font-size: 20px; color: var(--muted); transform: rotate(90deg); }
.cx-upcoming[open] > summary::after { transform: rotate(-90deg); }
.cx-fab { position: sticky; bottom: 16px; z-index: 5; margin-top: 16px; display: flex; justify-content: center; }
.cx-fab button { min-height: 52px; padding: 0 22px; border-radius: 14px; font-weight: 800; box-shadow: 0 8px 22px rgba(36, 19, 51, .22); }
.cx-fab button span { margin-left: 8px; padding: 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, .24); }
body.has-bottom-nav .cx-fab { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
body.has-bottom-nav .cx-fab button { width: 100%; }
/* La pestaña activa de los segmentados de Pagos: la regla genérica de la vista de
   familia la volvía blanca sobre blanco. */
body.has-bottom-nav .segmented.pay-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }

@media (max-width: 720px) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  .pay-head-actions { flex: 1; }
  .pay-head-actions button { flex: 1; min-height: 44px; }
  .pay-seg { max-width: none; }
  .pay-seg button { min-height: 44px; }

  /* Filtros: buscador + botón; el resto aparece al tocarlo */
  #pay-filter-bar { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 12px; }
  #pay-filter-bar > * { grid-column: 1 / -1; min-height: 44px; }
  #pay-filter-bar > #pay-search { grid-column: 1; }
  #pay-filter-bar > #pay-filters-toggle { grid-column: 2; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
  #pay-filter-bar:not(.open) > :not(#pay-search):not(#pay-filters-toggle) { display: none; }

  /* Resumen: una tarjeta clara con las tres cifras que importan */
  .pay-total { background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 16px; }
  .pay-lbl, .pay-legend { color: var(--muted); }
  .pay-bar { background: var(--surface-2); }
  .pay-big { font-size: 1.9rem; margin: 4px 0 12px; }
  .pay-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
  .pay-mini span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .pay-mini b { font-size: 16px; font-variant-numeric: tabular-nums; }
  .pay-mini b.bad { color: var(--danger); }
  .pay-break { display: none; }
  .pay-hero { margin-bottom: 12px; }

  /* Cada cobro del reporte: dos líneas; al tocar se abre el resto */
  #payments-groups .data tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline; cursor: pointer; padding: 12px 14px; }
  #payments-groups .data td { padding: 2px 0; }
  #payments-groups .data td.c-player { grid-column: 1; grid-row: 1; display: block; font-size: 16px; font-weight: 700; padding-bottom: 0; }
  #payments-groups .data td.c-player::before { content: none; }
  #payments-groups .data td.c-amount { grid-column: 2; grid-row: 1; justify-content: flex-end; font-size: 15px; font-weight: 800; white-space: nowrap; }
  #payments-groups .data td.c-amount::before { content: none; }
  #payments-groups .data td.c-concept { grid-column: 1; grid-row: 2; order: 0; font-size: 14px; font-weight: 500; color: var(--muted); padding-bottom: 2px; }
  #payments-groups .data td.c-status { grid-column: 2; grid-row: 2; justify-content: flex-end; align-items: center; }
  #payments-groups .data td.c-status::before { content: none; }
  #payments-groups .data td.c-status::after { content: '›'; margin-left: 6px; font-size: 20px; line-height: 1; color: var(--muted); transform: rotate(90deg); }
  #payments-groups .data tr.open td.c-status::after { transform: rotate(-90deg); }
  #payments-groups .data tr:not(.open) td.x { display: none; }
  #payments-groups .data tr.open td.x { grid-column: 1 / -1; }
  #payments-groups .data td.row-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  #payments-groups .data td.row-actions a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; font-weight: 700; }
}
@media (max-width: 720px) {
  /* El equipo ya se ve en el detalle; en la fila cerrada solo ocupa una línea más */
  #payments-groups .data tr:not(.open) td.c-player .hint { display: none; }
}

/* =====================================================================
   PAGOS (familia): vista simple
   Para quien casi no usa el celular: texto base de 18 px, botones de 56 px,
   una cifra arriba y una sola acción. El detalle va en una hoja aparte.
   ===================================================================== */
.mp { display: flex; flex-direction: column; gap: 14px; max-width: 560px; font-size: 18px; line-height: 1.4; }
.mp-answer { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px; }
.mp-q { font-size: 16px; font-weight: 600; color: var(--muted); }
.mp-amt { margin: 2px 0 4px; font-size: 38px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mp-amt.bad { color: var(--danger); }
.mp-amt.ok { color: var(--ok-fg); font-size: 30px; }
.mp-sub { font-size: 16px; color: var(--muted); }
.mp-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: 56px; padding: 0 16px;
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: 16px;
  font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
.mp-btn:hover { background: var(--accent); transform: none; }
.mp-btn input { display: none; }
.mp-btn.busy { opacity: .6; pointer-events: none; }
.mp-kid { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 8px; padding: 0 2px; font-size: 20px; font-weight: 800; }
.mp-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 16px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px;
  font: inherit; text-align: left; cursor: pointer;
}
.mp-row:hover { background: var(--surface); transform: none; }
.mp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-t b { font-size: 18px; overflow-wrap: anywhere; }
.mp-t span { font-size: 16px; color: var(--muted); }
.mp-s.bad { color: var(--danger); font-weight: 700; }
.mp-s.warn { color: var(--warn-fg); font-weight: 700; }
.mp-s.ok { color: var(--ok-fg); font-weight: 700; }
.mp-a { flex: none; font-size: 20px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-chev { flex: none; font-size: 24px; color: var(--muted); }
.mp-more {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px;
  background: transparent; color: var(--accent); border: 2px solid var(--border); border-radius: 16px;
  font: inherit; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.mp-more:hover { background: transparent; transform: none; }
.mp-step { display: flex; gap: 12px; align-items: flex-start; }
.mp-step i {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: 17px; font-weight: 800;
  background: var(--accent-glow); color: var(--accent);
}
.mp-step div { flex: 1; min-width: 0; }
.mp-step b { display: block; font-size: 18px; }
.mp-step span { display: block; font-size: 16px; color: var(--muted); }
.mp-bank, .mp-hint { margin-top: 8px; padding: 14px 16px; background: var(--surface-2); border-radius: 14px; font-size: 16px; overflow-wrap: anywhere; }
.mp-bank { white-space: pre-wrap; color: var(--text); }
.mp-hint { margin-top: 0; color: var(--muted); }
.mp-details { margin: 0; display: flex; flex-direction: column; }
.mp-details div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--border); font-size: 16px; }
.mp-details dt { color: var(--muted); }
.mp-details dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.mp-center { align-items: center; text-align: center; padding-top: 24px; }
.mp-check { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok-fg); font-size: 40px; font-weight: 800; }
.mp-big { font-size: 24px; font-weight: 800; }
.cx-settings {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px;
  margin: 0 0 10px; padding: 0 14px;
  background: var(--surface); color: var(--accent); border: 1px solid var(--border); border-radius: 12px;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cx-settings:hover { background: var(--surface); transform: none; }

/* Collect: tarjeta de familia (dos o más cobros vencidos del mismo apoderado) */
.cx-fam .cx-amt small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.cx-fam-fees { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.cx-fam-fees .cx-row { background: var(--surface-2); border-color: transparent; }

/* Familia: un comprobante para varias cuotas */
.mp-pick {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; cursor: pointer;
}
.mp-pick:has(input:checked) { border-color: var(--accent); }
.mp-pick input { flex: none; width: 28px; height: 28px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.mp-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 2px; font-size: 18px; }
.mp-total b { font-size: 24px; font-variant-numeric: tabular-nums; }
.mp-btn.off { opacity: .45; pointer-events: none; }
/* El total y el botón quedan a la vista aunque la lista de cuotas sea larga */
.mp-sendbar { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 0 6px; background: var(--surface); }

/* Familia: el monto de cada cobro va en una píldora (mismo tamaño de texto) */
.mp-a {
  padding: 6px 14px; border-radius: 999px;
  background: var(--surface-2);
}

/* Familia: el estado/vencimiento de cada cobro va en una píldora que lo resalta */
.mp-s {
  display: inline-block; align-self: flex-start;
  margin-top: 6px; padding: 4px 12px; border-radius: 999px;
  background: var(--accent-glow); color: var(--text);
  font-size: 16px; font-weight: 700; line-height: 1.3;
}
.mp-t span.mp-s { color: var(--text); }
.mp-t span.mp-s.bad { background: rgba(239, 68, 68, .14); color: var(--danger); }
.mp-t span.mp-s.warn { background: var(--warn-bg); color: var(--warn-fg); }
.mp-t span.mp-s.ok { background: var(--ok-bg); color: var(--ok-fg); }
.mp-sub.mp-s { margin-top: 8px; }
.mp-sub.mp-s.bad { background: rgba(239, 68, 68, .14); color: var(--danger); }
.mp-sub.mp-s.warn { background: var(--warn-bg); color: var(--warn-fg); }
.mp-sub.mp-s.ok { background: var(--ok-bg); color: var(--ok-fg); }
/* Rojo más oscuro en la píldora para que el texto se lea bien (contraste AA) */
.mp-t span.mp-s.bad, .mp-sub.mp-s.bad { background: #fee2e2; color: #991b1b; }
:root[data-theme="dark"] .mp-t span.mp-s.bad,
:root[data-theme="dark"] .mp-sub.mp-s.bad { background: rgba(248, 113, 113, .18); color: #fca5a5; }

/* =====================================================================
   MARCADOR EN VIVO
   Pensado para la cancha: botones de gol de 92 px, texto de 17 px y el
   marcador a 76 px. Se usa con una mano y a la luz del día.
   ===================================================================== */
.lv { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 560px; font-size: 17px; line-height: 1.35; }
.lv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; }
.lv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.lv-title { margin-top: 8px; font-size: 24px; font-weight: 800; }
.lv-meta { font-size: 15px; color: var(--muted); }
.lv-meta b { color: var(--text); }
.lv-hint { margin: 0; font-size: 15px; color: var(--muted); text-align: center; }
.lv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; background: var(--surface-2); font-size: 14px; font-weight: 700; }
.lv-pill.live { background: #fee2e2; color: #991b1b; }
.lv-pill.live::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
:root[data-theme="dark"] .lv-pill.live { background: rgba(248, 113, 113, .18); color: #fca5a5; }
.lv-score { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; text-align: center; }
.lv-score .tm { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.lv-score .tm.us { color: var(--accent); }
.lv-score .n { font-family: 'Anton', Impact, 'Arial Narrow', sans-serif; font-size: 76px; line-height: 1; font-variant-numeric: tabular-nums; }
.lv-score .dash { font-family: 'Anton', Impact, 'Arial Narrow', sans-serif; font-size: 40px; color: var(--muted); }
.lv-clock { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px; font-size: 18px; font-weight: 800; }
.lv-btn {
  display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 56px; padding: 0 16px;
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: 16px; font: inherit; font-size: 18px; font-weight: 800; cursor: pointer;
}
.lv-btn:hover { background: var(--accent); transform: none; }
.lv-btn.g { background: var(--surface-2); color: var(--text); }
.lv-btn.g:hover { background: var(--surface-2); }
.lv-btn.o { background: transparent; color: var(--accent); border: 2px solid var(--border); }
.lv-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--warn-bg); color: var(--warn-fg); font-size: 15px; font-weight: 700; }
.lv-banner.me { background: var(--ok-bg); color: var(--ok-fg); }
.lv-banner button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; font-weight: 800; }
.lv-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lv-goal {
  min-height: 92px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: inherit; font-size: 19px; font-weight: 800; cursor: pointer; padding: 6px;
}
.lv-goal small { font-size: 13px; font-weight: 700; opacity: .9; overflow-wrap: anywhere; text-align: center; }
.lv-goal.us { background: var(--accent); color: var(--on-accent); border: 0; }
.lv-goal.us:hover { background: var(--accent); transform: none; }
.lv-goal.them { background: var(--surface-2); color: var(--text); border: 2px solid var(--border); }
.lv-goal.them:hover { background: var(--surface-2); transform: none; }
.lv-undo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lv-undo button {
  min-height: 48px; border-radius: 14px; background: transparent; color: var(--muted); border: 2px solid var(--border);
  font: inherit; font-size: 14px; font-weight: 700; padding: 0 6px; overflow-wrap: anywhere;
}
.lv-undo button:hover { background: transparent; transform: none; }
.lv-label { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lv-tl { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 4px 14px; }
.lv-tl > div { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.lv-tl > div:first-child { border-top: 0; }
.lv-tl .min { flex: none; width: 44px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.lv-tl .ball { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-glow); }
.lv-tl .ball.them { background: var(--surface-2); }
.lv-tl .who { flex: 1; min-width: 0; }
.lv-tl .who b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.lv-tl .who span { font-size: 14px; color: var(--muted); }
/* hojas de abajo: goleador y terminar partido */
.lv-dim { position: fixed; inset: 0; background: rgba(20, 10, 30, .45); z-index: 60; }
.lv-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 80vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
}
@media (min-width: 721px) { .lv-sheet { left: 50%; right: auto; width: 480px; transform: translateX(-50%); } }
.lv-grab { width: 44px; height: 5px; border-radius: 99px; background: var(--border); margin: 0 auto 2px; }
.lv-sheet h3 { margin: 0; font-size: 21px; }
.lv-pl-list { display: flex; flex-direction: column; gap: 8px; }
.lv-pl {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border-radius: 14px; border: 0;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 17px; font-weight: 700; text-align: left; cursor: pointer;
}
.lv-pl:hover { background: var(--surface-2); transform: none; }
.lv-pl .no { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-family: 'Anton', Impact, sans-serif; font-size: 16px; font-weight: 400; }
/* entrada desde las tarjetas del calendario */
.lv-row { margin-top: 8px; }
.lv-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--accent-glow); color: var(--accent); border: 0; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.lv-link:hover { background: var(--accent-glow); transform: none; }
.lv-link.live { background: #fee2e2; color: #991b1b; }
.lv-link.live::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
:root[data-theme="dark"] .lv-link.live { background: rgba(248, 113, 113, .18); color: #fca5a5; }

/* Match alerts: estado "activadas" */
.mp-banner-ok { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; }

/* Reporte del partido: enlaces a los videos */
.lv-vids { display: flex; flex-direction: column; gap: 8px; }
.lv-vid { display: flex; align-items: stretch; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.lv-vid a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; color: var(--text); text-decoration: none; }
.lv-vid .play { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-glow); color: var(--accent); font-size: 15px; }
.lv-vid .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lv-vid .t b { font-size: 17px; overflow-wrap: anywhere; }
.lv-vid .t span { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.lv-x { flex: none; width: 48px; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.lv-x:hover { background: var(--surface-2); color: var(--danger); transform: none; }
.lv-vform { display: flex; flex-direction: column; gap: 8px; }
.lv-vform input { min-height: 48px; font-size: 16px; }

/* Entrada al marcador / reporte dentro de la tarjeta: misma sangría y mismo trazo que los
   botones de asistencia (Going / Maybe), de ancho completo, no una píldora suelta en el borde. */
.ev-band .lv-row { margin: 14px 14px 12px; }
.lv-row .lv-link {
  width: 100%; justify-content: center; min-height: 44px; border-radius: 11px;
  font-size: 14px; letter-spacing: .01em;
}
@media (max-width: 720px) { .lv-row .lv-link { min-height: 50px; font-size: 15.5px; } }

/* Login: enlace "Forgot your password?" y texto de ayuda de la pantalla de recuperación */
#login-page .login-forgot { margin: 4px 0 0; text-align: center; font-size: 13px; }
#login-page .login-forgot a { color: #c9b8dd; text-decoration: underline; text-underline-offset: 3px; }
#login-page .login-forgot a:hover { color: #ff6fb4; }
#login-page .login-hint { margin: 0; font-size: 14px; line-height: 1.5; color: #b7a7cc; text-align: center; }
#login-page .login-hint strong { color: #f5eefb; }

/* =====================================================================
   DRILLS (tarjeta con imagen y franja de categoría) y PLANES (línea de tiempo)
   ===================================================================== */
.cat-tech  { --cat: #c42a82; --cat-bg: rgba(196, 42, 130, .1); }
.cat-tact  { --cat: #4a55a8; --cat-bg: #eceefa; }
.cat-phys  { --cat: #b4651c; --cat-bg: #fbefe0; }
.cat-gk    { --cat: #1d7a74; --cat-bg: #e1f3f1; }
.cat-other { --cat: #5b4b73; --cat-bg: var(--surface-2); }
:root[data-theme="dark"] .cat-tech  { --cat: #ec8fbd; --cat-bg: rgba(236, 143, 189, .15); }
:root[data-theme="dark"] .cat-tact  { --cat: #a9b0ee; --cat-bg: rgba(169, 176, 238, .14); }
:root[data-theme="dark"] .cat-phys  { --cat: #f0b072; --cat-bg: rgba(240, 176, 114, .14); }
:root[data-theme="dark"] .cat-gk    { --cat: #7fd6cd; --cat-bg: rgba(127, 214, 205, .13); }
:root[data-theme="dark"] .cat-other { --cat: #c9b8dd; --cat-bg: rgba(201, 184, 221, .12); }

.dr-card {
  background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--cat);
  border-radius: 16px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
}
.dr-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
.dr-pic {
  position: relative; height: 118px; overflow: hidden;
  background: repeating-linear-gradient(90deg, #2f8a55 0 28px, #2a7f4e 28px 56px);
}
.dr-pic .dr-pitch, .dr-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dr-time, .dr-play {
  position: absolute; bottom: 9px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.dr-time { right: 10px; background: rgba(20, 12, 28, .72); color: #fff; }
.dr-play { left: 10px; background: rgba(255, 255, 255, .92); color: #241a30; }
.dr-in { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.dr-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.dr-cat { background: var(--cat-bg); color: var(--cat); font-weight: 700; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; }
.dr-diff { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.dr-dots { display: inline-flex; gap: 3px; }
.dr-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); display: block; }
.dr-dots i.on { background: var(--cat); }
.dr-card h3 { margin: 0 0 4px; font-size: 17px; }
.dr-card p {
  margin: 4px 0 8px; font-size: 14px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dr-facts { font-size: 13px; font-weight: 600; color: var(--muted); }
.dr-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.dr-actions button { flex: 1; min-height: 40px; font-size: 13px; }
.dr-detail { max-width: 560px; }
.dr-detail .dr-pic { border-radius: 14px; }
.dr-sec { margin-top: 14px; }
.dr-lbl { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dr-sec p { margin: 4px 0 0; font-size: 16px; line-height: 1.5; white-space: pre-wrap; }
.dr-video {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; margin-top: 18px;
  padding: 0 16px; border-radius: 14px; background: var(--accent-glow); color: var(--accent);
  font-size: 16px; font-weight: 800; text-decoration: none;
}
.dr-video span { font-size: 13px; font-weight: 600; color: var(--muted); }
.dr-back { min-height: 44px; margin-bottom: 10px; }

#plans-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.pl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; }
.pl-head { cursor: pointer; }
.pl-head h3 { margin: 0 0 4px; font-size: 18px; }
.pl-head .meta { font-size: 13px; color: var(--muted); }
.pl-obj { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.pl-tl { display: flex; flex-direction: column; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.pl-step { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 4px; border-radius: 12px; cursor: pointer; }
.pl-step:hover { background: var(--surface-2); }
.pl-step:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 42px; bottom: -14px; width: 2px; background: var(--border); }
.pl-step .n { position: relative; z-index: 1; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-glow); color: var(--accent); font-size: 13px; font-weight: 800; }
.pl-step .x { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-step .x b { font-size: 16px; overflow-wrap: anywhere; }
.pl-step .x span { font-size: 13px; color: var(--muted); }
.pl-step .m { flex: none; font-size: 14px; font-weight: 800; }
.pl-step .chev { flex: none; font-size: 22px; line-height: 1; color: var(--muted); }

/* Campo de imagen del diagrama en el formulario de drills */
.dr-diagram-field { margin: 4px 0 12px; }
.dr-diagram-label { display: block; font-weight: 600; margin-bottom: 6px; }
.dr-diagram-prev { border-radius: 10px; overflow: hidden; border: 1px solid var(--border, #e4dfea); margin-bottom: 8px; max-height: 180px; }
.dr-diagram-prev img { display: block; width: 100%; max-height: 180px; object-fit: cover; }
.dr-diagram-actions { display: flex; gap: 8px; }
.dr-diagram-pick { cursor: pointer; margin: 0; }
.dr-diagram-pick { display: inline-block; padding: 9px 16px; border-radius: 8px; background: #efe9f5; color: #4a2b6b; font-weight: 600; }

/* Tablero de drills */
.dr-pic .dr-board { position: absolute; inset: 0; width: 100%; height: 100%; }
.dr-board-field { margin: 4px 0 12px; }
.dr-board-prev { border-radius: 10px; overflow: hidden; margin-bottom: 8px; aspect-ratio: 700 / 450; max-height: 220px; background: #2f7d3d; }
.dr-board-prev svg { display: block; width: 100%; height: 100%; }
.bd-root { position: fixed; inset: 0; z-index: 10000; background: #f7f4fa; display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); gap: 8px; overflow: auto; }
.bd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bd-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-grp { display: flex; flex-wrap: wrap; gap: 3px; background: #fff; border: 1px solid #ddd5e6; border-radius: 12px; padding: 3px; }
.bd-grp button { background: transparent; color: #241a30; border: 0; border-radius: 9px; padding: 8px 10px; min-height: 40px;
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.bd-grp button:hover { background: #efe9f5; transform: none; }
.bd-grp button.on { background: #241a30; color: #fff; }
.bd-grp button i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #0003; display: inline-block; }
.bd-stage { background: #fff; border: 1px solid #ddd5e6; border-radius: 14px; padding: 8px; touch-action: none; }
.bd-stage svg { width: 100%; height: auto; display: block; border-radius: 8px; user-select: none; -webkit-user-select: none; max-height: 62vh; }
.bd-hint { font-size: 13px; color: #6d6078; }

.dr-pic.has-board { height: auto; aspect-ratio: 700 / 450; }

/* My Players con varios hijos: carrusel en celular */
.rc-dots { display: none; }
@media (max-width: 720px) {
  .roster-card-grid.is-carousel {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .roster-card-grid.is-carousel::-webkit-scrollbar { display: none; }
  .roster-card-grid.is-carousel .roster-card { flex: 0 0 84%; scroll-snap-align: center; }
  .rc-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
  .rc-dots span { width: 8px; height: 8px; border-radius: 50%; background: #d9cfe6; transition: width .2s, background .2s; }
  .rc-dots span.on { width: 22px; border-radius: 4px; background: #b0307a; }
}

.rc-hint { display: none; }
@media (max-width: 720px) {
  .rc-hint { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; font-size: 13px; color: #6d6078; }
  .rc-hint b { font-size: 15px; color: #241a30; }
  .rc-dots { align-items: center; }
  .rc-dots span { width: 10px; height: 10px; }
  .rc-dots span.on { width: 26px; }
  .rc-dots em { font-style: normal; font-size: 13px; font-weight: 600; color: #6d6078; margin-left: 6px; }
}

/* Familias con varios hijos: color por hijo, etiqueta y filtro */
.kid-pill {
  display: inline-block !important; width: auto; align-self: flex-start;
  background: var(--kb); color: var(--ki) !important; font-size: 12px !important; font-weight: 700;
  border-radius: 99px; padding: 3px 10px; margin-bottom: 6px;
}
.ev-card.has-kid { border-left: 6px solid var(--kc); }
.next-hero.has-kid { border-left: 6px solid var(--kc); }
.next-hero .kid-pill { margin: 8px 0 2px; }
.rsvp.named { align-items: center; }
.rsvp.named + .rsvp.named { margin-top: 8px; }
.rsvp-nm { flex: none; min-width: 52px; font-size: 13px; font-weight: 800; }
.kid-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.kid-filter button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 99px;
  border: 1.4px solid var(--border); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transform: none;
}
.kid-filter button i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.kid-filter button[aria-pressed="true"] { background: #241a30; border-color: #241a30; color: #fff; }

/* ---------- Tablero táctico (js/tactics.js) ---------- */
body.tb-open { overflow: hidden; }
.tb-overlay { position: fixed; inset: 0; z-index: 900; background: var(--bg); color: var(--text); display: flex; flex-direction: column; }
.tb-overlay[hidden] { display: none; }
.tb-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tb-title, .tb-title-ro { flex: 1 1 200px; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; }
.tb-title { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); }
.tb-team { color: var(--muted); font-size: 13px; }
.tb-top-actions { display: flex; gap: 8px; margin-left: auto; }
.tb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
.tb-btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.tb-btn.danger { color: #c62828; }
.tb-btn.tool.on { background: var(--accent); color: #fff; border-color: transparent; }
.tb-btn .ic { width: 16px; height: 16px; }
[data-act="close"] .ic { transform: rotate(90deg); }
.tb-main { flex: 1; display: flex; min-height: 0; }
.tb-stage-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 10px; gap: 8px; }
.tb-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.tb-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
#tb-svg { flex: 1; min-height: 0; width: 100%; border-radius: 14px; touch-action: none; user-select: none; background: #2f8f4e; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.tb-item { cursor: grab; }
.tb-item.tb-sel circle:first-of-type, .tb-item.tb-sel path { stroke: #ffe14d; stroke-width: 4; }
.tb-arrow.tb-sel line:last-child { stroke-width: 6; }
.tb-caption { min-height: 22px; font-size: 16px; font-weight: 600; text-align: center; }
.tb-side { width: 280px; flex: none; overflow: auto; padding: 12px; background: var(--surface); border-left: 1px solid var(--border); }
.tb-side h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tb-side h4:first-child { margin-top: 0; }
.tb-side h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.tb-side select, .tb-side textarea { width: 100%; }
.tb-roster { display: flex; flex-direction: column; gap: 4px; }
.tb-chip { display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px 8px; border-radius: 10px; font-size: 13px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
.tb-chip b { min-width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); font-size: 12px; }
.tb-chip.on { border-color: var(--accent); }
.tb-chip.on b { background: var(--accent); color: #fff; }
.tb-chip small { margin-left: auto; color: var(--muted); font-size: 11px; }
.tb-bottom { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--border); flex-wrap: wrap; }
.tb-play { display: flex; gap: 6px; }
.tb-frames { display: flex; gap: 6px; flex-wrap: wrap; }
.tb-frame { min-width: 34px; height: 34px; border-radius: 50%; font-weight: 700; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
.tb-frame.on { background: var(--accent); color: #fff; border-color: transparent; }
.tb-frame.add { background: transparent; border-style: dashed; }
.tb-caption-in { flex: 1 1 220px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); }
/* Modo presentación (y vista de familias): solo cancha, pasos y reproducción */
.tb-overlay.present .tb-side, .tb-overlay.present .tb-caption-in { display: none; }
.tb-overlay.present .tb-caption { font-size: 22px; }
.tb-overlay:not(.present) .tb-caption { display: none; }
@media (max-width: 800px) {
  .tb-main { flex-direction: column; overflow: auto; }
  .tb-stage-wrap { flex: none; }
  #tb-svg { flex: none; height: auto; aspect-ratio: 700 / 450; }
  .tb-side { width: auto; border-left: 0; border-top: 1px solid var(--border); overflow: visible; }
  .tb-overlay.present .tb-main { overflow: hidden; }
}
.tb-check { white-space: nowrap; }
.tb-check input { width: auto; margin: 0; flex: none; }
.tb-side .tb-check { white-space: normal; align-items: flex-start; }
@media (min-width: 801px) { #tb-svg { flex: 0 1 auto; align-self: center; max-height: 100%; aspect-ratio: 700 / 450; width: auto; max-width: 100%; } .tb-stage-wrap { align-items: stretch; } }

.tb-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.tb-color.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
/* Tablet / táctil: botones y fichas más grandes para usar con el dedo */
@media (pointer: coarse) { .tb-btn { padding: 12px 16px; font-size: 15px; } .tb-frame { min-width: 44px; height: 44px; } .tb-color { width: 38px; height: 38px; } }