/*
   La paleta sale de la pista de verdad: el azul del césped, el blanco de las
   líneas y el amarillo de la pelota. Sacada de foto, no inventada.

   El azul es el que manda —botones, enlaces, lo que se pulsa— porque es el
   único de los dos que se puede leer sobre blanco. Es un azul de cancha
   saturado, no un celeste desteñido: si se ve pálido es que no es este.
   El amarillo de pelota es luminoso por definición: sirve para rellenar y
   para señalar (el día de hoy, las pistas exteriores, un aviso), nunca para
   escribir encima de blanco. Para eso está `--ball-fuerte`, el mismo amarillo
   llevado hacia el oliva hasta que contrasta.

   Los grises no son grises: van tirados hacia este mismo azul, no hacia un
   celeste genérico. Un gris neutro —o un celeste que no sea EL azul— al lado
   de este color se ve desconectado de la marca.
*/
:root {
  --ground: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef2fd;
  --ink: #0c1a2b;
  --ink-2: #33528f;
  --ink-3: #61768e;
  --line: #dbe3fa;
  --line-fuerte: #aec0f0;
  --court: #1a46d6;
  --court-2: #2f5fe8;
  --ball: #dbe32e;
  --ball-fuerte: #656800;
  --ball-suave: #fafce0;
  --error: #b3341f;
  --error-suave: #fdece7;
  --sombra: 0 1px 2px rgba(12,26,43,.06), 0 8px 24px -16px rgba(12,26,43,.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0a1420;
    --surface: #0f1e2e;
    --surface-2: #16293c;
    --ink: #e6eef7;
    --ink-2: #a6bad0;
    --ink-3: #7a91aa;
    --line: #20364d;
    --line-fuerte: #2d4a68;
    --court: #6ea8ff;
    --court-2: #8fc0ff;
    --ball: #dbe43c;
    /* Sobre fondo oscuro el amarillo ya contrasta solo: no hay que apagarlo. */
    --ball-fuerte: #dbe43c;
    --ball-suave: #2b2f11;
    --error: #f09880;
    --error-suave: #2e1a15;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}

* { box-sizing: border-box; }

/* `display:flex` en un selector de tipo gana al atributo hidden, que solo trae
   `display:none` de la hoja del navegador. Sin esto, las vistas se solapan. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; font-weight: 600; }
h3 { margin: 0; font-size: 16px; letter-spacing: -.01em; font-weight: 600; }
h4 { margin: 0; font-size: 13px; font-weight: 600; }

/* ───────────────────────────── Marca ───────────────────────────── */
.marca { display: flex; align-items: center; gap: 11px; }
.marca .simbolo { color: var(--court); flex: none; }
.marca .simbolo .acento { stroke: var(--ball); }
.marca .nombre { font-size: 26px; font-weight: 600; letter-spacing: -.022em; line-height: 1; }
.marca-sm { gap: 8px; }
.marca-sm .nombre { font-size: 18px; }

/* ───────────────────────────── Acceso ──────────────────────────── */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.acceso .caja {
  width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 32px;
  display: flex; flex-direction: column; gap: 22px;
}
.cabecera { display: flex; flex-direction: column; gap: 10px; }
.sub { margin: 0; color: var(--ink-3); font-size: 14.5px; }

/* ───────────────────────── Formularios ─────────────────────────── */
form { display: flex; flex-direction: column; gap: 5px; }

label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 12px;
}

input, select, textarea {
  font: inherit; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--ground); color: var(--ink); width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--court-2); outline-offset: 1px; border-color: transparent;
}
textarea { min-height: 110px; resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.campo-sm { width: auto; padding: 7px 10px; font-size: 13.5px; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

button {
  font: inherit; font-weight: 600; padding: 10px 15px; border-radius: 8px;
  border: 1px solid var(--court); background: var(--court); color: var(--surface);
  cursor: pointer; white-space: nowrap;
}
button:hover { background: var(--court-2); border-color: var(--court-2); }
button:focus-visible { outline: 2px solid var(--ball); outline-offset: 2px; }
button[disabled] { opacity: .5; cursor: not-allowed; }
form > button { margin-top: 20px; }

button.fantasma { background: transparent; color: var(--ink-2); border-color: var(--line); }
button.fantasma:hover { background: var(--surface-2); border-color: var(--line-fuerte); }
button.peligro { background: transparent; color: var(--error); border-color: var(--error); }
button.peligro:hover { background: var(--error-suave); }
button.mini { padding: 5px 10px; font-size: 12.5px; }

.error {
  margin: 12px 0 0; padding: 10px 13px; border-radius: 8px;
  border: 1px solid var(--error); background: var(--error-suave);
  color: var(--error); font-size: 14px;
}

/* ─────────────────────────── Barra ─────────────────────────────── */
.app { min-height: 100vh; display: flex; flex-direction: column; }

/* La barra lleva el tinte azul, no el blanco del papel: con el fondo en blanco
   puro, una barra blanca sobre página blanca solo se distinguía por su línea
   de abajo y la app parecía no tener cabecera. */
/*
   Blanca, no teñida: si la barra ya lleva el mismo azul pálido que usa el
   menú para marcar «encima» o «activo», pasar el ratón no cambia nada a la
   vista y el resaltado desaparece. El blanco puro deja sitio para que el
   tinte SÍ se note.
*/
.barra {
  display: flex; align-items: center; gap: 26px; padding: 13px 24px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}

.menu {
  display: flex;
  gap: 3px;
  margin-right: auto;
  /* Sin esto el menú no cabía en un móvil, ensanchaba el documento a 437 px y
     el panel lateral —que es width:100%— heredaba ese ancho y se salía de la
     pantalla, cortando los botones del pase de lista. */
  flex-wrap: wrap;
  min-width: 0;
}
.menu button {
  background: transparent; border: none; color: var(--ink-3);
  padding: 7px 13px; font-size: 14px; border-radius: 7px;
}
.menu button:hover { background: var(--surface-2); color: var(--ink); }
.menu button.activo { background: var(--surface-2); color: var(--ink); }

.sesion { display: flex; align-items: center; gap: 12px; }
.quien { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }

.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--court); color: var(--court-2);
  font-size: 12px; font-weight: 600;
}
.chip.aviso-chip { border-color: var(--ball); color: var(--ink); background: var(--ball-suave); }
.chip.mal { border-color: var(--error); color: var(--error); background: var(--error-suave); }
.chip.neutro { border-color: var(--line-fuerte); color: var(--ink-3); }

.lienzo { flex: 1; padding: 26px 24px 80px; max-width: 1240px; width: 100%; margin: 0 auto; }

/* El calendario es la única pantalla que pide todo el ancho: es un cuadrante,
   y cuanto más sitio tenga la rejilla, más se lee. El resto de vistas siguen
   con su ancho de lectura, que a 1240 px ya es generoso para una tabla. */
.lienzo.ancho { max-width: none; padding-bottom: 26px; }
.vista { display: flex; flex-direction: column; gap: 18px; }

.titulo-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ───────────────────────── Calendario ──────────────────────────── */
/*
   Rejilla semanal: los días son columnas y las horas filas, de 07:00 a 24:00.
   Por dentro avanza en franjas de media hora (SLOTS = 34) para que quepan las
   clases de 90 minutos; visualmente solo se marcan las horas en punto.
*/
/* El calendario tiene su propio scroll en vez de estirar la página: así la
   cabecera de días y la columna de horas se quedan fijas mientras se recorre,
   y al pintar se puede llevar la vista a la primera clase del día. */
/* El alto lo marca la pantalla, no un número fijo: se descuentan la barra, el
   título con sus controles y el pie de la leyenda. Con 620 px fijos quedaba
   medio monitor en blanco por debajo de las pistas. */
.rejilla-scroll {
  max-height: calc(100dvh - 210px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}

.rejilla {
  display: grid;
  grid-template-columns: 58px repeat(7, minmax(96px, 1fr));
  /* La primera fila es la cabecera de días y necesita su propio alto: con
     grid-auto-rows a secas se quedaba aplastada a 21 px y cortaba los nombres. */
  grid-template-rows: 46px;
  grid-auto-rows: 44px;                 /* media hora = 44 px, la clase de 60 = 88 */
  min-width: 760px;
  position: relative;
  user-select: none;                    /* al arrastrar no se selecciona texto */
}

.celda-esquina {
  position: sticky; left: 0; z-index: 3;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cabecera-dia {
  position: sticky; top: 0; z-index: 2;
  grid-row: 1;
  display: flex; align-items: baseline; gap: 6px;
  padding: 10px 10px 9px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  overflow: hidden;
}
.cab-dia {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.cab-num { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.cab-festivo {
  font-size: 11px; color: var(--ink-3); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cabecera-dia.es-hoy { background: var(--ball-suave); }
.cabecera-dia.es-hoy .cab-num { color: var(--court-2); }
.cabecera-dia.es-festivo .cab-num { color: var(--ink-3); font-weight: 500; }

.hora-etiqueta {
  position: sticky; left: 0; z-index: 3;
  grid-column: 1;
  display: flex; justify-content: flex-end;
  padding: 2px 9px 0 0;
  font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

/* Una celda por media hora. Es también el objetivo del arrastre. */
.celda {
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.celda.media { border-top-style: dotted; }   /* la media hora, más tenue */
.celda-festivo { background: var(--surface-2); }
.admin-puede .celda:hover { background: var(--ball-suave); cursor: cell; }

/* ── Bloques de clase ── */
.bloque {
  position: relative;
  z-index: 1;
  margin: 1px 0;
  padding: 4px 7px;
  border: none;
  border-left: 3px solid var(--c);
  border-radius: 5px;
  background: var(--cb);
  color: var(--ink);
  text-align: left;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 0;
  font-weight: 500;
  cursor: pointer;
}
.bloque:hover { background: var(--cb); filter: brightness(1.06); border-left-width: 5px; }
.bloque:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
/* Con la fila ya alta de sobra caben tres líneas: la hora, quién ocupa el
   hueco y un detalle más (el aforo en una clase, la pista en una reserva).
   El resto —nombre del grupo, nivel, nota— se queda en el «title». */
.bloque-hora {
  font-size: 11px; font-weight: 700; color: var(--c);
  font-variant-numeric: tabular-nums; line-height: 1.3;
  letter-spacing: .01em;
}
.bloque-nombre {
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bloque-detalle {
  font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bloque.cancelada { opacity: .5; text-decoration: line-through; }

/* Colores por nivel. Se asignan por el orden del nivel en el catálogo.
   El primero es el azul de la pista y el último el amarillo de la pelota; los
   de en medio recorren la distancia entre los dos. Tienen que distinguirse de
   un vistazo: aquí el color es información, no decoración — por eso el
   relleno va bien saturado y no en un pastel casi blanco. */
.n0 { --c: #12508f; --cb: #7fabe8; }
.n1 { --c: #0d6f86; --cb: #5ec4dc; }
.n2 { --c: #8a5f0b; --cb: #ecb84f; }
.n3 { --c: #a32f4a; --cb: #ec84a0; }
.n4 { --c: #6f7505; --cb: #cdda45; }

@media (prefers-color-scheme: dark) {
  .n0 { --c: #6fb2f2; --cb: #1c3355; }
  .n1 { --c: #5cc3d9; --cb: #173a42; }
  .n2 { --c: #e0b25f; --cb: #3d2f18; }
  .n3 { --c: #ef8ba4; --cb: #3f212c; }
  .n4 { --c: #d3dc45; --cb: #333714; }
}

/* Reservas de pista suelta: dos colores propios, fuera de la gama de niveles,
   para que se lean como «otra cosa» de un vistazo. El partido en violeta, la
   recurrente en magenta — hermanos entre sí, pero inconfundibles con ningún
   nivel ni entre ellos. */
.n-partido { --c: #6d28d9; --cb: #a78bfa; }
.n-recurrente { --c: #9d174d; --cb: #e56ec4; }

@media (prefers-color-scheme: dark) {
  .n-partido { --c: #c4aefb; --cb: #3a2566; }
  .n-recurrente { --c: #f0a0d8; --cb: #4a1d3c; }
}

/* Selección con el ratón, al estilo de Playtomic */
.seleccion {
  z-index: 4;
  margin: 1px 2px;
  border: 2px dashed var(--court);
  border-radius: 5px;
  background: var(--ball-suave);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  overflow: hidden;
}

/* Línea de la hora actual */
.ahora {
  position: relative;
  z-index: 5;
  pointer-events: none;
}
.ahora::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: var(--pos);
  height: 2px;
  background: var(--error);
}
.ahora::after {
  content: "";
  position: absolute;
  left: -4px; top: calc(var(--pos) - 3px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--error);
}

.pie-calendario {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; }
.leyenda-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.leyenda-item i { width: 13px; height: 13px; border-radius: 4px; background: var(--c); display: block; }


/* ─────────────────────────── Tarjetas ──────────────────────────── */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.tarjeta {
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  padding: 17px 19px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--sombra); text-align: left; color: inherit; cursor: pointer;
}
/*
   `.tarjeta` es un <button> por debajo (los grupos, las sesiones, se abren al
   pulsar). Sin este `background` explícito, heredaba el fondo azul sólido del
   botón genérico (`button:hover`) mientras el texto se quedaba oscuro por el
   `color: inherit` de arriba: la tarjeta entera se volvía azul con las letras
   ilegibles encima. Aquí se corta esa herencia y la tarjeta se ilumina como
   lo que es, una tarjeta, no un botón de acción.
*/
.tarjeta:hover {
  background: var(--surface-2);
  border-color: var(--court);
}
.tarjeta .cuando { font-size: 13px; color: var(--ink-3); }
.tarjeta-pie { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

.barra-aforo { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.barra-aforo i { display: block; height: 100%; background: var(--court); border-radius: 3px; }
.barra-aforo.completo i { background: var(--ball); }

/* ───────────────────────────- Tablas ───────────────────────────── */
.tabla-envoltorio {
  overflow-x: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 11px;
}
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
th {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-2); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr.pulsable { cursor: pointer; }
tbody tr.pulsable:hover { background: var(--surface-2); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ──────────────────────────── Panel ────────────────────────────── */
.velo { position: fixed; inset: 0; background: rgba(8,16,15,.42); z-index: 30; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  /* 100dvw y no 100%: si algo ensancha el documento, el panel no debe crecer
     con él. Nunca puede ser más ancho que la pantalla. */
  width: min(520px, 100dvw);
  max-width: 100dvw;
  background: var(--surface); border-left: 1px solid var(--line); z-index: 31;
  display: flex; flex-direction: column;
}
.panel-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.panel-cuerpo { padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
.panel-cuerpo form > button { margin-top: 22px; }

.bloque { display: flex; flex-direction: column; gap: 10px; }
.bloque > h4 {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); padding-bottom: 7px; border-bottom: 1px solid var(--line);
}

.datos { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.datos > div { display: grid; grid-template-columns: 118px 1fr; gap: 12px; align-items: baseline; }
dt { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
dd { margin: 0; font-size: 14px; }

.lista { display: flex; flex-direction: column; gap: 7px; }
.lista-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; background: var(--surface-2); border-radius: 8px; font-size: 13.5px;
}

/* Los cuatro jugadores de un partido: el que reserva, y tres invitados hasta
   que se sepa quiénes son de verdad. */
.jugadores { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.jugador {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; background: var(--surface-2); border-radius: 7px; font-size: 13.5px;
}
.jugador b {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--court); color: var(--surface); font-size: 11px;
}
.jugador.invitado span { color: var(--ink-3); }
.jugador.invitado b { background: var(--line-fuerte); color: var(--ink-2); }
.precio-partido { font-weight: 600; color: var(--ink); margin-top: -2px; }

.nota { margin: 0; font-size: 13px; color: var(--ink-3); }
.vacio { padding: 34px; text-align: center; color: var(--ink-3); font-size: 14px; }

.recuadro {
  padding: 13px 15px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface-2); font-size: 13.5px; display: flex; flex-direction: column; gap: 5px;
}
.recuadro.ok { border-color: var(--court); }
.recuadro.ojo { border-color: var(--ball); background: var(--ball-suave); }
.recuadro b { font-size: 14px; }

/* Elegir qué se monta en un hueco de la rejilla: grupo o reserva. */
.opciones-hueco { display: flex; flex-direction: column; gap: 10px; }
.opcion-hueco {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); text-align: left; color: inherit; cursor: pointer;
  font: inherit;
}
.opcion-hueco:hover { border-color: var(--court); background: var(--surface-2); }
.opcion-hueco b { font-size: 14.5px; }
.opcion-hueco span { font-size: 13px; color: var(--ink-3); }

/* ─────────────────────────── Avisos ────────────────────────────── */
.aviso {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--ink); color: var(--ground); padding: 11px 20px;
  border-radius: 9px; font-size: 14px; z-index: 60; box-shadow: var(--sombra);
  max-width: min(560px, calc(100vw - 40px));
}
.aviso.mal { background: var(--error); color: #fff; }

@media (max-width: 900px) {
  .semana { grid-template-columns: 1fr; }
  .dia { min-height: 0; }
  .barra { gap: 12px; padding: 11px 16px; }
  .quien { display: none; }
  .lienzo { padding: 20px 16px 60px; }
  .panel-cuerpo { padding: 18px 16px; }
  .menu button { padding: 6px 10px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.salto {
  margin: 0; display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; border-radius: 9px; border: 1px dashed var(--line-fuerte);
  color: var(--ink-3); font-size: 13.5px;
}
td.papeles { display: flex; gap: 5px; flex-wrap: wrap; }

.fila-campos.tres { grid-template-columns: 1fr 1fr 1fr; }

/* Listas de casillas: las pistas y los monitores de un evento. Se envuelven
   solas porque un club con diez pistas no cabe en una fila. */
.casillas {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-bottom: 14px;
}
.casilla {
  display: flex; align-items: center; gap: 6px;
  margin: 0; font-weight: 400; font-size: 13px; cursor: pointer;
}
.casilla input { width: auto; margin: 0; }

/* ─────────────────────── Hoy y pase de lista ───────────────────── */
.tarjeta-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hora-grande {
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--court-2);
}
.tarjeta.apagada { opacity: .62; }
.tarjeta.apagada .hora-grande { color: var(--ink-3); text-decoration: line-through; }

/* El pase de lista se hace de pie en la pista: objetivos grandes y de un toque. */
.lista-pase { display: flex; flex-direction: column; gap: 8px; }
.pase-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; background: var(--surface-2); border-radius: 9px; flex-wrap: wrap;
}
.pase-nombre { font-size: 14.5px; font-weight: 500; }
.pase-botones { display: flex; gap: 5px; }
.pase-boton {
  padding: 8px 12px; min-width: 62px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-fuerte); background: var(--surface);
  color: var(--ink-3); border-radius: 8px;
}
.pase-boton:hover { background: var(--ground); border-color: var(--ink-3); color: var(--ink); }
.pase-boton.elegido.asistio { background: var(--court); border-color: var(--court); color: var(--surface); }
.pase-boton.elegido.falta_avisada { background: var(--ball); border-color: var(--ball); color: #0c1a2b; }
.pase-boton.elegido.falta { background: var(--error); border-color: var(--error); color: #fff; }

@media (max-width: 560px) {
  .pase-fila { flex-direction: column; align-items: stretch; gap: 8px; }
  .pase-botones { justify-content: stretch; }
  .pase-boton { flex: 1; padding: 12px 8px; }
}
.ficha-grupo { display: flex; flex-direction: column; gap: 8px; }

/* ─────────────── Calendario diario: pistas en columnas ────────────── */
/*
   Cada pista es una columna y las horas corren en vertical, igual que la
   vista semanal pero con pistas en vez de días. Se admite scroll vertical a
   propósito: con diez pistas listas para el mismo día, obligar a que todo
   quepa sin desplazar solo consigue letras diminutas. `grid-template-columns`
   se fija desde pintarDia() porque el número de pistas varía de un club a
   otro; aquí solo se fija el ancho mínimo de cada una y el alto de fila.
*/
.rejilla-dia {
  grid-template-rows: 46px;
  grid-auto-rows: 44px;                 /* media hora = 44 px, igual que la semanal */
  min-width: 0;
}

.cabecera-pista {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  overflow: hidden;
}
.pista-nombre { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pista-tipo {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}
/* Las exteriores se marcan arriba: son las que se caen cuando llueve. */
.cabecera-pista.exterior { border-top: 3px solid var(--ball); }
.cabecera-pista.exterior .pista-tipo { color: var(--ball-fuerte); }

/* Conmutador Día / Semana */
.conmutador {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
}
.conmutador button {
  background: transparent; border: none; color: var(--ink-3);
  padding: 5px 13px; font-size: 13.5px; border-radius: 7px;
}
.conmutador button:hover { color: var(--ink); }
.conmutador button.activo { background: var(--surface); color: var(--ink); box-shadow: var(--sombra); }

/* ─────────────────── Grupos: nombres de alumnos en chip ───────────────
   Una hilera que envuelve línea, no un párrafo suelto: cada chip recorta su
   propio texto con elipsis, así que un nombre nunca empuja el ancho de la
   tarjeta ni se sale de ella — el fallo que tenía el párrafo de antes. */
.lista-alumnos { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.chip-alumno {
  display: inline-block; max-width: 100%; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 11.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-alumno.mas { color: var(--ink-3); border-style: dashed; }
.chip-alumno.vacio { color: var(--ink-3); font-style: italic; border-style: dashed; }

/* ─────────────────── Grupos: vista semanal compacta ───────────────────
   A diferencia del Calendario, un grupo no tiene una hora exacta que
   enseñar minuto a minuto contra las demás — lo que importa es en qué
   orden caen dentro del día. Por eso aquí no hay rejilla de horas: cada
   día es una columna que solo ocupa el alto de sus propios grupos, sin
   huecos por las horas sin clase. Con `.lienzo.ancho` ya no compite por
   sitio con el ancho de lectura del resto de la app, así que las 7
   columnas se reparten todo el ancho de la pantalla en vez de amontonarse
   detrás de un scroll horizontal. */
.semana-grupos-scroll { overflow-x: auto; }
.semana-grupos {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  min-width: 840px;
  align-items: start;
}
.semana-grupos-dia {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px;
}
.semana-grupos-dia > h3 {
  margin: 0 2px 2px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.dia-vacio { margin: 0 2px; font-size: 12px; color: var(--ink-3); font-style: italic; }

.grupo-mini {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--c);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--sombra);
  color: var(--ink);
  cursor: pointer;
}
.grupo-mini:hover { background: var(--surface-2); border-left-width: 5px; }
.grupo-mini:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.grupo-mini-cab { display: flex; align-items: center; justify-content: space-between; }
.grupo-mini-hora {
  font-size: 11px; font-weight: 700; color: var(--c);
  font-variant-numeric: tabular-nums;
}
.punto-nivel { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.grupo-mini-nombre {
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grupo-mini-detalle {
  font-size: 11px; font-weight: 500; color: var(--ink-2); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─────────────────── Recuperaciones y espera ───────────────────── */
.opcion-deuda {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  background: var(--surface-2); border: 1px solid transparent;
  font-size: 13.5px;
}
.opcion-deuda:hover { border-color: var(--line-fuerte); }
.opcion-deuda.elegida { border-color: var(--court); background: var(--ball-suave); }
.opcion-deuda input { width: auto; margin: 0; }
.opcion-deuda > span:first-of-type { margin-right: auto; }

/* ────────────────────────── Cobros ─────────────────────────────── */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
}
.cifra {
  background: var(--surface);
  padding: 17px 20px;
  display: flex; flex-direction: column; gap: 3px;
}
.cifra b {
  font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  color: var(--court-2); font-variant-numeric: tabular-nums;
}
.cifra.mal b { color: var(--error); }
.cifra span {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.lista-fila.apagada { opacity: .6; }
.lista-fila.apagada b { text-decoration: line-through; }