/* ==========================================================================
   GestionaClubs — Panel del gestor
   --------------------------------------------------------------------------
   Topbar compartida inyectada por nav.js + contenido por página. Es la MISMA
   estructura y las MISMAS clases que GestionaFitness, GestionaPublica y
   GestionaAccesos (.topbar, .tb-nav, .tb-link, .tb-btn, .tb-user): quien sepa
   usar uno sabe usar los cuatro. Lo único que cambia entre productos es el
   color de acento, que es su identidad.

   La diferencia propia de GestionaClubs: un club tiene TRECE pantallas, casi
   el doble que un gimnasio. En una sola fila no caben, así que se reparten en
   dos alturas: a la izquierda Inicio y tres áreas —Gestión, Actividad y
   Administración—, y dentro de cada área un submenú en la propia pantalla.
   A la derecha del todo, sueltos y solo con su icono, Mensajes y Configuración
   del club: no son trabajo del club, son la bandeja y la llave inglesa.

   Todo lo visual sale de shared/css/tokens.css.
   ========================================================================== */

/* ==========================================================================
   TOPBAR
   ========================================================================== */

.topbar {
  position: sticky; top: 0; z-index: 80;
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.topbar-in {
  max-width: var(--maxw); margin: 0 auto; height: 100%;
  padding: 0 20px; display: flex; align-items: center; gap: 8px;
}

/* ── Marca ────────────────────────────────────────────────────────────────
   Mismo formato que GestionaFitness y GestionaPública: el símbolo suelto y,
   al lado, «Gestiona» en el color del texto con la segunda palabra en el de
   acento. Mismas medidas y misma tipografía que allí, para que los tres
   productos se reconozcan como la misma familia.

   Sustituye a los dos PNG que hacían falta —uno por tema— porque el rojo de
   la palabra no se leía sobre la barra oscura: ahora «Gestiona» usa
   `var(--text)` y se resuelve solo. */
.tb-brand { display: flex; align-items: center; gap: 10px; margin-right: 14px; flex: 0 0 auto; }
.tb-brand:hover { text-decoration: none; }

/* El símbolo va suelto, sin pastilla de color detrás: el aro ya es una forma
   cerrada y meterlo en un cuadrado le quita aire. */
.tb-logo {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: grid; place-items: center;
  filter: drop-shadow(0 3px 10px rgba(158, 17, 22, .30));
}
.tb-name {
  font-size: 1.0625rem; font-weight: 800;
  color: var(--text); letter-spacing: -.02em; line-height: 1.1;
  white-space: nowrap;
}
.tb-name-b { color: var(--accent); }

/* El club, entre la navegación y los controles de la derecha */
.tb-club-name {
  display: flex; align-items: center; gap: 8px;
  flex: 0 1 auto; min-width: 0; margin: 0 14px 0 10px;
  padding-left: 14px; border-left: 1px solid var(--border);
  font-size: .88rem; font-weight: 650; color: var(--text);
}
.tb-club-name .tcn-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tb-club-name .tcn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tb-nav { display: flex; gap: 2px; flex: 1 1 auto; overflow: visible; }
.tb-link {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--text-muted); font-size: .85rem; font-weight: 550;
  white-space: nowrap; transition: all .14s; position: relative;
}
.tb-link:hover { background: var(--bg-card-hover); color: var(--text); text-decoration: none; }
.tb-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.tb-link .ic { display: inline-flex; align-items: center; justify-content: center; }
.tb-link .n-badge {
  min-width: 17px; height: 17px; padding: 0 5px;
  background: var(--danger); color: #fff; border-radius: 99px;
  font-size: .62rem; font-weight: 700; display: grid; place-items: center;
}

/* ==========================================================================
   CONTROLES DE LA DERECHA
   ========================================================================== */

.tb-right { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.tb-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-soft);
  display: grid; place-items: center; cursor: pointer; transition: all .14s;
}
.tb-btn:hover { background: var(--bg-card-hover); color: var(--text); }
.tb-btn.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
a.tb-btn:hover { text-decoration: none; }

/* Mensajes y Configuración: navegación, no utilidades.
   Van con los controles de la derecha pero separados por una raya, porque
   llevan a una pantalla y el resto de esa fila no. Y como son destinos, se
   marcan cuando estás dentro, igual que los botones de área. */
.tb-sep {
  width: 1px; height: 20px; margin: 0 3px;
  background: var(--border); flex: 0 0 auto;
}
.tb-tool { position: relative; }
.tb-tool.active {
  background: var(--accent-soft); border-color: transparent; color: var(--accent);
}

/* El contador de mensajes sin leer, colgado de la esquina del sobre: sin
   etiqueta que lo acompañe, es lo único que dice que hay algo esperando. */
.tb-tool .n-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; border: 2px solid var(--bg-elev);
  background: var(--danger); color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 12px; text-align: center;
}

.tb-user {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--bg-card); cursor: pointer; transition: all .14s;
  position: relative;
}
.tb-user:hover { background: var(--bg-card-hover); }
.tb-user .u-name { font-size: .8rem; font-weight: 600; }
.tb-user .gc-avatar { width: 26px; height: 26px; font-size: .66rem; }

/* Selector de temporada: en un club, todo cuelga de ella */
.season-pick {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: .8rem; font-weight: 600; color: var(--text-soft); cursor: pointer;
  white-space: nowrap;
}
.season-pick:hover { border-color: var(--border-strong); color: var(--text); }
.season-pick.past { background: var(--warn-soft); border-color: transparent; color: var(--warn); }

/* Menú de la cuenta, anclado al avatar */
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 244px; z-index: 95;
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   CONTENIDO
   ========================================================================== */

.main {
  max-width: var(--maxw); margin: 0 auto;
  /* Algo más de aire por arriba que por los lados: lo primero que hay debajo
     de la barra es la cabecera centrada, y pegada al borde parece un error. */
  padding: 30px 20px 20px; width: 100%;
}

/* ==========================================================================
   RESPONSIVE
   --------------------------------------------------------------------------
   Cuatro enlaces caben en casi cualquier pantalla de escritorio. Por debajo de
   980 px, con el logo y el nombre del club compitiendo por el sitio, la
   navegación se pliega tras el botón de las tres rayas. Mensajes y
   Configuración NO se pliegan: son dos iconos y se llegan siempre.
   ========================================================================== */

.tb-btn.tb-burger { display: none; }

@media (max-width: 980px) {
  .tb-nav {
    position: fixed; top: var(--topbar-h); left: 0; right: 0;
    max-height: calc(100vh - var(--topbar-h)); overflow-y: auto;
    background: var(--bg-elev); border-bottom: 1px solid var(--border);
    flex-direction: column; padding: 10px; gap: 2px;
    box-shadow: var(--shadow-lg); display: none;
  }
  .tb-nav.open { display: flex; }
  .tb-btn.tb-burger { display: inline-flex; }
  .tb-link { padding: 11px 14px; font-size: .9rem; }
  .tb-club-name { flex: 1 1 auto; }
}

@media (max-width: 900px) {
  /* Con poco sitio manda la navegación: lo accesorio se repliega. Mensajes y
     Configuración se quedan —son destinos, no adornos—, y con ellos la raya
     que los separa deja de tener sentido. */
  #tb-qr, #tb-support, .tb-sep { display: none; }
  /* La palabra se va y queda el símbolo, que ya identifica la marca: es lo
     que hacen también GestionaFitness y GestionaPública en esta anchura. */
  .tb-name { display: none; }
  .tb-logo { width: 32px; height: 32px; }
  .main { padding: 14px; }
  .topbar-in { padding: 0 12px; }
}
@media (max-width: 700px) {
  .tb-user .u-name { display: none; }
  .season-pick span { display: none; }
  .season-pick { padding: 6px 9px; }
}
@media (max-width: 560px) {
  .tb-club-name { border-left: 0; padding-left: 0; margin-left: 6px; font-size: .8rem; }
}

/* ==========================================================================
   BLOQUES DE PÁGINA
   ========================================================================== */

/* Encabezado de página: lo inyecta nav.js dentro de <main>, encima del
   contenido. Antes vivía en la barra lateral; con la barra en horizontal ahí
   manda la marca, así que el título baja a donde se lee de verdad. Va
   centrado y en tres alturas —cabecera, pastilla y botones—; sus estilos
   están más abajo, en «CABECERA CENTRADA Y PASTILLA», que es donde nació
   esta composición.

   Los botones de la página, centrados bajo la pastilla. `nav.js` esconde la
   fila entera cuando la pantalla no tiene ninguno. */
.page-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-bottom: 22px;
}

/* ==========================================================================
   BOTONES DE EXPORTAR
   --------------------------------------------------------------------------
   Van en la esquina de la cabecera de cada tarjeta con tabla. Discretos a
   propósito: sin relleno, sin borde y sin etiqueta, porque exportar no es la
   acción principal de ninguna pantalla —está siempre, pero se usa de vez en
   cuando—. Al pasar por encima se encienden, que es cuando hacen falta.
   ========================================================================== */

.export-bar { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: auto; }

.gc-btn.export-btn {
  width: 30px; height: 30px; padding: 0;
  color: var(--text-muted);
}
.gc-btn.export-btn:hover { color: var(--accent); background: var(--accent-soft); }

/* Tabla sin cabecera de tarjeta donde colgarse —o tarjeta con dos tablas—:
   los botones van en una tira propia justo encima de la tabla, para que no
   haya duda de a cuál pertenecen. */
.export-strip { display: flex; justify-content: flex-end; padding: 6px 10px 0; }
.export-strip + .table-wrap { border-top-left-radius: 0; border-top-right-radius: 0; }

/* Tabla suelta a la que se le cuelga la barra a mano con `GC.exportEn` */
.has-export { position: relative; }
.has-export > .export-bar { position: absolute; top: 10px; right: 10px; z-index: 1; }

@media print { .export-bar { display: none !important; } }

/* ── Escudo del club (Ajustes → Datos) ────────────────────────────────────
   La vista previa se enseña sobre un tablero de cuadros claros: casi todos
   los escudos llegan con fondo transparente, y sobre el fondo del panel no
   habría manera de saber si el blanco del PNG es blanco o es transparente.
   En el papel va sobre blanco, así que conviene verlo. */
.logo-pick { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.logo-prev {
  width: 78px; height: 78px; flex: 0 0 auto;
  display: grid; place-items: center; text-align: center; padding: 6px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e6e9ee 25%, transparent 25%, transparent 75%, #e6e9ee 75%),
    linear-gradient(45deg, #e6e9ee 25%, transparent 25%, transparent 75%, #e6e9ee 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}
.logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-prev .gc-muted { color: #64748b; }

/* ==========================================================================
   CABECERA CENTRADA Y PASTILLA
   --------------------------------------------------------------------------
   Nació copiando la configuración de GestionaSocios y de GestionaPública,
   para que quien salte de un producto a otro reconociera la pantalla, y de
   ahí se ha llevado a LAS TRECE del panel: distintivo del área, titular con
   el final en degradado y subtítulo, todo centrado y lo primero; debajo el
   submenú del área en pastilla horizontal; debajo los botones de la página.

   El eje central es el mismo en todas, así que la vista sabe dónde caen el
   título y el menú antes de leerlos, y cambiar de pantalla no mueve nada de
   sitio.

   Configuración añade además la columna estrecha (`.page-setup`): un
   formulario de ajustes a 1440 px obliga a barrer la pantalla con la vista de
   un extremo a otro para leer una línea.
   ========================================================================== */

.main.page-setup { max-width: 1060px; padding: 34px 20px 70px; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.setup-header { text-align: center; margin-bottom: 26px; }
.setup-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 15px; margin-bottom: 14px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600; color: var(--accent);
}
.setup-header h1 {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
}
/* El degradado de la marca, que es lo que ata la pantalla al producto. Sin
   `display:inline-block` a propósito: en un móvil estrecho el titular tiene
   que poder partir en dos líneas. */
.setup-header .gradient-text {
  background: var(--brand-grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.setup-header p {
  font-size: .95rem; color: var(--text-soft);
  max-width: 560px; margin: 9px auto 0;
}

/* ── Submenú horizontal ───────────────────────────────────────────────────
   Seis apartados caben de sobra en un escritorio, pero no en un móvil, así
   que la pastilla se desplaza y aparecen flechas cuando hace falta. Sin
   ellas, los últimos apartados quedarían escondidos sin ninguna pista. */
.setup-tabs-wrap {
  position: relative;
  margin: 0 auto 26px;
  display: flex; justify-content: center;
  max-width: 100%;
}
.setup-tabs {
  display: flex; gap: 4px;
  width: fit-content; max-width: 100%;
  padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.setup-tabs::-webkit-scrollbar { display: none; }

.setup-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px;
  border: 0; background: transparent;
  border-radius: var(--r-pill);
  font-family: inherit; font-size: .865rem; font-weight: 550;
  color: var(--text-soft);
  white-space: nowrap; cursor: pointer;
  transition: background .14s, color .14s;
  flex: 0 0 auto;
}
.setup-tab:hover { background: var(--bg-card-hover); color: var(--text); text-decoration: none; }
/* En las pantallas del panel el botón de la pastilla es un <a> que navega, no
   un <button>: sin esto saldría subrayado y en el color de enlace. */
a.setup-tab { text-decoration: none; }
.setup-tab.active {
  background: var(--accent); color: var(--accent-text); font-weight: 650;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 32%, transparent);
}
.setup-tab > span:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; line-height: 0;
}
/* El contador de pendientes —deportistas por aprobar, licencias por tramitar— */
.setup-tab .n-badge {
  min-width: 18px; height: 18px; padding: 0 6px;
  background: var(--danger); color: #fff; border-radius: 99px;
  font-size: .64rem; font-weight: 700; display: grid; place-items: center;
}
.setup-tab.active .n-badge { background: var(--accent-text); color: var(--accent); }

/* Flechas de desplazamiento. Solo se enseñan si la pastilla no cabe entera:
   las pinta y las esconde el JS midiendo el ancho real. */
.tabs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: none; place-items: center;
  border: 1px solid var(--border); background: var(--bg-elev);
  color: var(--text-soft); cursor: pointer; z-index: 2;
  box-shadow: var(--shadow-sm);
  transition: color .14s, border-color .14s, opacity .14s;
}
.tabs-arrow.show { display: grid; }
.tabs-arrow:hover { color: var(--text); border-color: var(--border-strong); }
.tabs-arrow[disabled] { opacity: .3; cursor: default; }
.tabs-arrow.left  { left: -6px; }
.tabs-arrow.right { right: -6px; }

/* Difuminado en los bordes: dice «esto sigue» sin ocupar sitio. El degradado
   sale del color de la PASTILLA (--bg-elev), no del de la página: con el de
   la página quedaba una mancha más oscura sobre el propio submenú. */
.setup-tabs-wrap.overflowing::before,
.setup-tabs-wrap.overflowing::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; width: 42px;
  pointer-events: none; z-index: 1; border-radius: var(--r-pill);
}
.setup-tabs-wrap.overflowing::before {
  left: 0; background: linear-gradient(90deg, var(--bg-elev) 45%, transparent);
}
.setup-tabs-wrap.overflowing::after {
  right: 0; background: linear-gradient(270deg, var(--bg-elev) 45%, transparent);
}

@media (max-width: 900px) {
  .main.page-setup { padding: 22px 14px 60px; }
  .setup-tabs { border-radius: var(--r-lg); }
}

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }

.cols { display: grid; gap: 14px; }
.cols.c2 { grid-template-columns: 1fr 1fr; }
.cols.c3 { grid-template-columns: repeat(3, 1fr); }
.cols.main-side { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.cols.side-main { grid-template-columns: minmax(260px, 1fr) minmax(0, 2.4fr); }
@media (max-width: 1100px) { .cols.c3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .cols.c2, .cols.c3, .cols.main-side, .cols.side-main { grid-template-columns: 1fr; } }

/* Barra de filtros sobre una tabla */
.filters {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.filters .search { position: relative; flex: 1 1 220px; max-width: 340px; }
.filters .search .gc-input { padding-left: 34px; }
.filters .search .s-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; display: flex;
}
.filters .gc-select { width: auto; min-width: 130px; }
.filters .spacer { flex: 1 1 auto; }

/* Pestañas de estado con contador */
.tabs-count { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs-count .gc-chip b { font-variant-numeric: tabular-nums; }

/* Contenedor de tabla con cabecera fija */
.table-wrap { overflow: auto; max-height: calc(100vh - 300px); border-radius: var(--r); }
.table-wrap.short { max-height: 420px; }

/* Celda de persona: avatar + nombre + línea secundaria */
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who .w-name { font-weight: 600; }
.who .w-sub { font-size: .74rem; color: var(--text-muted); }

/* Paginación */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px 0; flex-wrap: wrap; }
.pager .p-info { font-size: .8rem; color: var(--text-muted); }
.pager .p-btns { display: flex; gap: 6px; }

/* ==========================================================================
   AVISOS DEL DASHBOARD
   ========================================================================== */

.alerts { display: flex; flex-direction: column; gap: 8px; }
.alert-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  font-size: .86rem; cursor: pointer; transition: background .14s;
}
.alert-row:hover { background: var(--bg-card-hover); text-decoration: none; color: var(--text); }
.alert-row.danger { border-left-color: var(--danger); }
.alert-row.warn   { border-left-color: var(--warn); }
.alert-row.info   { border-left-color: var(--info); }
.alert-row .a-ico { display: flex; }
.alert-row.danger .a-ico { color: var(--danger); }
.alert-row.warn   .a-ico { color: var(--warn); }
.alert-row.info   .a-ico { color: var(--info); }
.alert-row .a-go { margin-left: auto; color: var(--text-muted); display: flex; }

/* Feed de actividad */
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: .84rem; }
.feed-item:last-child { border-bottom: 0; }
.feed-item .f-ico {
  width: 28px; height: 28px; border-radius: var(--r-sm); flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--bg-card-hover); color: var(--text-muted);
}
.feed-item .f-when { margin-left: auto; font-size: .72rem; color: var(--text-muted); white-space: nowrap; }

/* ==========================================================================
   CUADRANTE SEMANAL DE ENTRENAMIENTOS
   --------------------------------------------------------------------------
   Una columna por día. Las tarjetas NO se posicionan por hora en píxeles: se
   apilan en orden. Un club entrena de 17:00 a 22:00, así que una rejilla
   horaria de 24 h dejaría el 70% del alto en blanco.
   ========================================================================== */

.week {
  display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 8px; overflow-x: auto; padding-bottom: 6px;
}
.week-day { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.week-head {
  padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--bg-elev); border: 1px solid var(--border);
  text-align: center; position: sticky; top: 0; z-index: 2;
}
.week-head .wd { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.week-head .wn { font-size: 1.05rem; font-weight: 700; }
.week-head.today { background: var(--accent-soft); border-color: transparent; }
.week-head.today .wd, .week-head.today .wn { color: var(--accent); }

.sess {
  border-radius: var(--r-sm); padding: 9px 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  font-size: .8rem; cursor: pointer; transition: background .14s, transform .06s;
}
.sess:hover { background: var(--bg-card-hover); }
.sess:active { transform: scale(.99); }
.sess .s-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.sess .s-cat { font-weight: 600; margin: 1px 0 3px; }
.sess .s-meta { font-size: .72rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.sess.cancelled { opacity: .55; }
.sess.cancelled .s-cat { text-decoration: line-through; }
.sess.changed { border-style: dashed; }
.sess .s-flag {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
  font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 99px;
}
.sess .s-flag.warn { background: var(--warn-soft); color: var(--warn); }
.sess .s-flag.danger { background: var(--danger-soft); color: var(--danger); }

.week-empty { text-align: center; padding: 18px 6px; color: var(--text-muted); font-size: .76rem; }

/* ==========================================================================
   TARJETAS DE CATEGORÍA
   ========================================================================== */

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

.cat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px;
  border-top: 3px solid var(--accent);
  cursor: pointer; transition: background .14s, border-color .14s;
}
.cat-card:hover { background: var(--bg-card-hover); }
.cat-card .cc-top { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; }
.cat-card .cc-name { font-weight: 700; font-size: .98rem; }
.cat-card .cc-sport { font-size: .74rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.cat-card .cc-rows { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; color: var(--text-soft); }
.cat-card .cc-row { display: flex; align-items: center; gap: 8px; }
.cat-card .cc-row .gc-i { color: var(--text-muted); }
.cat-card .cc-foot { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; }

/* Plantilla del equipo */
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.player {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; transition: background .14s;
}
.player:hover { background: var(--bg-card-hover); }
.player .p-dorsal {
  width: 28px; height: 28px; border-radius: var(--r-sm); flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--bg-card-hover); color: var(--text-soft);
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.player .p-name { font-size: .84rem; font-weight: 600; }
.player .p-sub { font-size: .71rem; color: var(--text-muted); }
.player .p-right { margin-left: auto; text-align: right; }

/* ==========================================================================
   FICHA (modal ancho con pestañas)
   ========================================================================== */

.sheet-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.sheet-head .sh-name { font-size: 1.15rem; font-weight: 700; }
.sheet-head .sh-sub { font-size: .8rem; color: var(--text-muted); }
.sheet-head .sh-actions { margin-left: auto; display: flex; gap: 7px; }

.def { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 18px; }
.def .d-item { min-width: 0; }
.def .d-label { font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 2px; }
.def .d-value { font-size: .87rem; }
.def .d-value.empty { color: var(--text-muted); }

/* Aviso médico: tiene que saltar a la vista, es lo que importa si pasa algo */
.med-flag {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--danger-soft); color: var(--danger);
  font-size: .83rem; font-weight: 550; margin-bottom: 12px;
}
.med-flag .gc-i { flex: 0 0 auto; margin-top: 1px; }

/* ==========================================================================
   COMPETICIÓN
   ========================================================================== */

.match-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; border-radius: var(--r-sm);
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; transition: background .14s;
}
.match-row:hover { background: var(--bg-card-hover); }
.match-row + .match-row { margin-top: 7px; }
.match-row .m-date {
  width: 52px; flex: 0 0 auto; text-align: center;
  border-right: 1px solid var(--border-soft); padding-right: 10px;
}
.match-row .m-date .md { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.match-row .m-date .mm { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; }
.match-row .m-body { flex: 1 1 auto; min-width: 0; }
.match-row .m-teams { font-weight: 600; font-size: .9rem; }
.match-row .m-meta { font-size: .74rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.match-row .m-score {
  font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 3px 10px; border-radius: var(--r-sm); background: var(--bg-card-hover);
}
.match-row .m-score.win  { background: var(--accent-soft); color: var(--accent); }
.match-row .m-score.loss { background: var(--danger-soft); color: var(--danger); }
.match-row .m-score.draw { background: var(--warn-soft); color: var(--warn); }

/* ── Las competiciones ─────────────────────────────────────────────────────
   Una tarjeta por competición, en rejilla. Se lee de un vistazo qué es, quién
   la juega y cómo va, que es lo que se busca al entrar en la pantalla. */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; }

.comp-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: var(--r);
  background: var(--bg-card); border: 1px solid var(--border);
  /* La franja del color del deporte: distingue la liga de baloncesto de la de
     fútbol antes de leer una sola palabra. */
  border-left: 3px solid var(--comp-color, var(--accent));
  cursor: pointer; transition: background .14s, border-color .14s;
}
.comp-card:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }

.comp-card .cc-head { display: flex; align-items: flex-start; gap: 10px; }
.comp-card .cc-ico {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--comp-color) 16%, transparent);
  color: var(--comp-color);
}
.comp-card .cc-title { flex: 1 1 auto; min-width: 0; }
.comp-card .cc-name { font-weight: 650; font-size: .95rem; letter-spacing: -.01em; }
.comp-card .cc-sub  { font-size: .74rem; color: var(--text-muted); margin-top: 1px; }

.comp-card .cc-teams { display: flex; flex-wrap: wrap; gap: 5px; }
.comp-card .cc-stats {
  display: flex; align-items: center; gap: 12px;
  font-size: .78rem; color: var(--text-soft);
  padding-top: 9px; border-top: 1px solid var(--border-soft);
}
.comp-card .cc-record { font-variant-numeric: tabular-nums; }
.comp-card .cc-actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* Convocatoria */
.callup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px; }
.callup {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: .83rem; cursor: pointer; user-select: none;
}
.callup.on { border-color: var(--accent); background: var(--accent-soft); }
.callup .c-status { margin-left: auto; flex: 0 0 auto; }

/* El aviso de si la convocatoria está en borrador o enviada. Va arriba del
   todo y ocupa sitio a propósito: es la diferencia entre que las familias
   estén viendo la lista o no, y equivocarse ahí se nota. */
.callup-state {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.callup-state.draft { background: var(--warn-soft); color: var(--warn); }
.callup-state.ok    { background: var(--accent-soft); color: var(--accent); }
.callup-state div   { color: var(--text); }
.callup-state b     { font-size: .87rem; }

/* La racha: los últimos resultados en fila, como en cualquier clasificación.
   Se lee de un vistazo si el equipo viene de ganar tres o de perder cuatro,
   que es lo que se mira antes que ningún número. */
.racha { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.racha-p {
  width: 22px; height: 22px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 6px;
  font-size: .68rem; font-weight: 700; cursor: default;
  background: var(--bg-card-hover); color: var(--text-soft);
}
.racha-p.win  { background: var(--accent); color: var(--accent-text); }
.racha-p.draw { background: var(--warn-soft); color: var(--warn); }
.racha-p.loss { background: var(--danger-soft); color: var(--danger); }

.callup-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border);
}

/* El modal del partido mide SIEMPRE lo mismo. Con el alto libre, cada pestaña
   —datos, convocatoria, resultado— medía lo que medía su contenido y la
   ventana pegaba un salto al cambiar de una a otra. */
.gc-modal-box.match-modal .gc-modal-body { min-height: 64vh; }
@media (max-height: 720px) {
  .gc-modal-box.match-modal .gc-modal-body { min-height: 56vh; }
}

/* Clasificación */
.standing-own td { background: var(--accent-soft) !important; font-weight: 650; }

/* ==========================================================================
   ECONOMÍA
   ========================================================================== */

.chart-box { height: 260px; position: relative; }
.chart-box.sm { height: 190px; }
.chart-box.lg { height: 320px; }

.money-pos { color: var(--accent); font-weight: 650; }
.money-neg { color: var(--danger); font-weight: 650; }

/* Barra ingresos/gastos del resumen */
.balance-bar { display: flex; height: 30px; border-radius: var(--r-sm); overflow: hidden; margin: 10px 0 6px; }
.balance-bar > i { display: block; height: 100%; }
.balance-bar .bb-in { background: var(--accent); }
.balance-bar .bb-out { background: var(--danger); }

/* ==========================================================================
   VARIOS
   ========================================================================== */

/* Selector de destinatarios de un aviso o un cargo */
.audience {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: var(--r-sm);
  background: var(--bg-input); border: 1px solid var(--border);
}
.audience .a-preview {
  font-size: .8rem; color: var(--text-soft);
  padding: 9px 11px; border-radius: var(--r-sm); background: var(--accent-soft);
  display: flex; align-items: center; gap: 8px;
}
.audience .a-preview b { color: var(--accent); }

/* Recuadro de firma en la tableta */
.sign-box {
  border: 2px dashed var(--border-strong); border-radius: var(--r);
  background: #fff; height: 190px; position: relative; overflow: hidden;
  touch-action: none;
}
.sign-box .sign-canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.sign-box::after {
  content: "Firma aquí"; position: absolute; inset: 0;
  display: grid; place-items: center; color: #b8c0cc; font-size: .9rem;
  pointer-events: none; transition: opacity .2s;
}
.sign-box.has-ink::after { opacity: 0; }

/* Texto legal dentro del modal de firma */
.legal {
  max-height: 300px; overflow-y: auto;
  padding: 14px; border-radius: var(--r-sm);
  background: var(--bg-input); border: 1px solid var(--border);
  font-size: .8rem; line-height: 1.65; color: var(--text-soft);
  white-space: pre-wrap;
}

/* Lista simple con acciones a la derecha */
.rowlist { display: flex; flex-direction: column; }
.rowlist .rl {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 2px; border-bottom: 1px solid var(--border-soft);
}
.rowlist .rl:last-child { border-bottom: 0; }
.rowlist .rl-main { flex: 1 1 auto; min-width: 0; }
.rowlist .rl-title { font-size: .87rem; font-weight: 600; }
.rowlist .rl-sub { font-size: .74rem; color: var(--text-muted); }
.rowlist .rl-actions { display: flex; gap: 5px; flex: 0 0 auto; }

/* Impresión: fuera el armazón, solo el contenido */
@media print {
  .topbar, .tb-nav, .page-actions, .setup-tabs-wrap, .filters, .pager, .gc-btn { display: none !important; }
  .main { padding: 0; max-width: none; }
  .gc-card { border: 0; padding: 0; }
  .table-wrap { max-height: none; overflow: visible; }
}

/* ==========================================================================
   ALMACÉN DE EQUIPACIÓN — el stock, talla a talla
   --------------------------------------------------------------------------
   «Quedan 14 camisetas» no dice nada si las catorce son de la XL. Cada talla
   es una pastilla con sus unidades, y la que está bajo mínimos se ve desde el
   otro lado de la mesa: es lo que se copia para pedirle al proveedor.
   ========================================================================== */

.size-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.size-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: var(--r-sm);
  background: var(--bg-card-hover); border: 1px solid var(--border);
  font-size: .7rem; line-height: 1.5; white-space: nowrap;
}
.size-chip b { font-weight: 650; color: var(--text-soft); }
.size-chip i { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Bajo mínimos, pero queda algo: se puede aguantar unos días */
.size-chip.low  { background: var(--warn-soft); border-color: transparent; }
.size-chip.low i { color: var(--warn); }
/* A cero: no se puede entregar, y el desplegable de la entrega la bloquea */
.size-chip.zero { background: var(--danger-soft); border-color: transparent; }
.size-chip.zero b, .size-chip.zero i { color: var(--danger); }

/* Rejilla para contar o dar entrada: una casilla por talla */
.stock-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
.stock-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px; border-radius: var(--r-sm);
  background: var(--bg-card); border: 1px solid var(--border);
}
.stock-cell .sc-size { font-size: .74rem; font-weight: 700; color: var(--text-soft); }
.stock-cell .sc-have { font-size: .66rem; color: var(--text-muted); }
.stock-cell .gc-input { padding: 5px 7px; font-size: .82rem; text-align: right; }

/* Fila que reclama atención sin gritar: una petición fuera de plazo.
   Se tiñe el fondo, no el texto, para que la tabla se siga leyendo. */
.gc-table tbody tr.row-danger td { background: var(--danger-soft); }
.gc-table tbody tr.row-danger:hover td { background: color-mix(in srgb, var(--danger) 20%, transparent); }

/* Solo la celda del nombre lleva al detalle. La fila entera no: comparte
   sitio con botones de acción y un clic mal puesto te sacaría de la
   pantalla en la que estabas trabajando. */
.gc-table td.clickable-cell { cursor: pointer; font-weight: 550; }
.gc-table td.clickable-cell:hover { color: var(--accent); }