/* XBasket Partido -- hoja de estilos.
   Pensada mobile-first (móvil primero, tablet de propina) porque Manuel la
   quiere "para ipad y para android, movil principalmente". Botones de al
   menos 44px (mínimo de Apple HIG, misma medida que ya usamos en el editor
   de cancha de XBasket tras el ajuste del Bloque 18) para que se puedan
   tocar bien sujetando el móvil con una mano durante el partido. */

:root {
  --bg: #0f172a;
  --bg-elevated: #1e293b;
  --bg-card: #16213a;
  --border: #2c3b56;
  --text: #e2e8f0;
  --text-dim: #94a3b8;
  --accent: #ed7d31;
  --accent-dim: #7c3f18;
  --verde: #22c55e;
  --rojo: #ef4444;
  --azul: #3b82f6;
  /* Aviso de faltas personales en dos escalones (12/09/2026, decimoquinta
     vuelta): amarillo a partir de 3 faltas, rojo a partir de 4 -- ver
     ".jm-faltas-aviso"/".jm-faltas-limite" y renderJugadorChip() en
     app.js. */
  --amarillo: #eab308;
  --radius: 12px;
  /* Colores por zona de pista (10/09/2026, segunda vuelta): a petición de
     Manuel, "las zonas equivalentes tienen que tener el mismo color" --
     un color por GRUPO de zona (no por zona individual), así que ambos
     lados (izq/der) y las dos canastas del campo comparten color. Elegidos
     para no chocar con los tokens semánticos de arriba (--verde=éxito/
     en curso, --rojo=peligro, --accent=naranja, CTA principal). */
  /* Colores de zona (11/09/2026, cuarta vuelta): medidos por pixel sobre el
     png de 14 zonas que envió Manuel ("aquí tienes las zonas de tiro
     coloreadas en un png") -- un color por grupo, igual en ambos lados
     (izq/der) y en las dos canastas. */
  --zona-aro: #ff8700;
  --zona-pintura: #ff00f8;
  --zona-codo: #00fbf3;
  --zona-tlibre: #8500ff;
  --zona-media: #54d763;
  --zona-fondo: #1f2af1;
  --zona-arriba-llave: #fffc00;
  --zona-ala: #fb0000;
  --zona-esquina: #6aff00;
  /* Fuera de rango (11/09/2026): más allá del arco de 9 m -- a propósito un
     gris apagado, bien distinto de los 9 colores de zona real, para que se
     note a simple vista que ahí "no se contempla" zona normal. */
  --zona-fuera-rango: #475569;
  /* Formato de pista "Azul Naranja" (10/09/2026, tercera vuelta): a
     petición de Manuel, colores tomados directamente de su diseño de
     referencia (Claude Design, "Pista Azul Naranja · plano en planta
     28x15m") -- duela de madera clara, filete perimetral naranja, banda
     exterior azul y marcaje FIBA en color crema (no blanco puro). */
  --pista-suelo: #c6a672;
  --pista-perimetro: #e2711d;
  --pista-exterior: #152f6e;
  --pista-lineas: #fbfaf6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100%;
  /* Igual que en XBasket: bloquea el bote de scroll elástico de iOS a nivel
     de documento; el scroll real ocurre dentro de cada .view. */
  overscroll-behavior: none;
}

body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.view {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  gap: 12px;
}
.view.is-active { display: flex; }

h1 { font-size: 1.25rem; margin: 0; }
h2 { font-size: 0.95rem; margin: 0 0 6px; color: var(--text-dim); font-weight: 600; }
.hint { font-weight: 400; font-size: 0.8rem; color: var(--text-dim); }

/* --- Botones --- */
.btn {
  min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 0.95rem;
  padding: 8px 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #1a1005; font-weight: 700; }
.btn-ghost { background: transparent; }
.btn-small { min-height: 36px; font-size: 0.85rem; padding: 6px 10px; }
.btn-block { width: 100%; }
.btn-round { min-width: 40px; padding: 0; border-radius: 999px; }
.btn:disabled { opacity: 0.4; cursor: default; }
/* Botones compactos (10/09/2026, segunda vuelta): a petición de Manuel,
   "todos los botones de acciones más pequeños, incluso solo dejaría letras
   iniciales para permitir más espacio" -- usado en el selector de modo de
   la pista y en tiro libre/asistencia. */
.btn-compacto { font-size: 0.72rem; padding: 5px 6px; min-height: 34px; }

/* --- Login --- */
#view-login { justify-content: center; align-items: center; }
.login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.login-card h1 { text-align: center; }
.subtitle { text-align: center; color: var(--text-dim); font-size: 0.9rem; margin: -8px 0 4px; }
#form-login { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--text-dim); flex: 1; }
input, select {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  padding: 8px 10px;
  font-size: 1rem;
}
.error-text { color: var(--rojo); font-size: 0.85rem; }
.success-text { color: var(--verde); font-size: 0.85rem; }

/* Recuperar contraseña (12/09/2026, vigésima vuelta): enlace de texto plano
   para no competir visualmente con el botón principal "Entrar"/"Enviar". */
.btn-link-simple {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
  align-self: center;
}
.btn-link-simple:hover { color: var(--text); }

/* Ver/ocultar contraseña en el login (12/09/2026, decimonovena vuelta): el
   botón ojo se superpone dentro del propio campo, a la derecha -- el input
   deja hueco a la derecha (padding-right) para que el texto no quede debajo
   del botón. */
.campo-password { position: relative; display: flex; }
.campo-password input { flex: 1; padding-right: 40px; }
.btn-ver-password {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px 10px;
  color: var(--text-dim);
}
.btn-ver-password:hover { color: var(--text); }
.empty-text { color: var(--text-dim); font-size: 0.9rem; }

/* --- Cabeceras de vista --- */
.view-header { display: flex; align-items: center; gap: 10px; justify-content: space-between; }

/* --- Listas (equipos / partidos) --- */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.list-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.list-item:active { background: var(--bg-elevated); }
.list-item-title { font-weight: 600; }
.list-item-meta { font-size: 0.8rem; color: var(--text-dim); }
.badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); }
.badge-en_curso { color: var(--verde); border-color: var(--verde); }
.badge-finalizado { color: var(--text-dim); }
/* Badge + botón eliminar (10/09/2026) agrupados para no romper el
   space-between de .list-item con un tercer hijo suelto. */
.list-item-actions { display: flex; align-items: center; gap: 8px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.row-inline { display: flex; gap: 10px; flex-wrap: wrap; }
.row-inline > label { min-width: 100px; }

/* --- Marcador --- */
/* Segunda fila para el quinteto (12/09/2026, quinta vuelta): a petición de
   Manuel, "no me has integrado el quinteto en el marcador... tiene que
   encajar en la mitad porque la otra mitad puede que en un futuro metamos
   al equipo contrario" -- la cabecera ya no es una sola fila de 4 columnas,
   sino una rejilla de 2 filas: la fila 1 conserva volver/equipo
   propio/centro/equipo rival, la fila 2 (.marcador-alineaciones) ocupa las
   4 columnas de golpe (grid-column: 1 / -1) y dentro se parte en dos
   mitades iguales. La cabecera puede crecer en altura lo que haga falta
   ("lo puedes hacer mas alto si hace falta"). */
.marcador {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}
.marcador-volver { grid-column: 1; }
.marcador-equipo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* 2 filas en vez de 3 (11/09/2026, undécima vuelta): a petición de Manuel
   ("no entiendo que le dejes tantisimo espacio al marcador... reparte
   mejor los elementos en todo ese espacio"), el botón de TM comparte fila
   con el número de puntos en vez de vivir en su propia fila debajo. */
.marcador-equipo-fila { display: flex; align-items: center; gap: 14px; }
.marcador-label { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
/* Tamaño IGUAL al del cronómetro (12/09/2026, quinta vuelta): a petición de
   Manuel, "los numeros del marcador deben ser como los del tiempo de
   alto" -- esto REVIERTE la decisión de la segunda vuelta (dejada aquí
   documentada más abajo, en el comentario de .partido-crono, para no perder
   el porqué de aquella otra decisión): el marcador de puntos vuelve a ser
   tan grande como el crono, ya no el elemento discreto de la cabecera. */
.marcador-num { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.marcador-centro { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.85rem; }
/* Parciales por cuarto (12/09/2026, octava vuelta; integrados junto al
   cronómetro en la décima vuelta, 11/09/2026): a petición de Manuel,
   "quiero que los parciales se integren junto al cronometro c1 y c2 a la
   izquierda y c3 y c4 a la derecha" -- ya no es una tira propia debajo del
   marcador (era ".marcador-parciales", con su propia etiqueta "Parciales"),
   sino que flanquea el propio "--:--" en la misma fila: el primer grupo de
   2 cuartos a la izquierda, el segundo grupo de 2 a la derecha (y así
   sucesivamente si hubiera más de 4 -- ver renderParcialesCuarto() en
   app.js). Chips más compactos que antes (menos padding/letra) porque aquí
   comparten sitio con el propio cronómetro en una columna estrecha. */
.marcador-centro-crono-fila { display: flex; align-items: center; justify-content: center; gap: 6px; }
.marcador-centro-crono-fila .parciales-cuarto-lista { max-width: 76px; }
.marcador-centro-crono-fila .parcial-cuarto-chip { padding: 2px 5px; border-radius: 6px; }
.marcador-centro-crono-fila .parcial-cuarto-num { font-size: 0.55rem; }
.marcador-centro-crono-fila .parcial-cuarto-marcador { font-size: 0.68rem; }
.parciales-cuarto-lista { display: flex; gap: 4px; overflow-x: auto; }
.parcial-cuarto-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.parcial-cuarto-num { font-size: 0.6rem; color: var(--text-dim); }
.parcial-cuarto-marcador { font-size: 0.8rem; font-weight: 700; }
.parcial-cuarto-chip.parcial-cuarto-actual { border-color: var(--accent); background: var(--accent-dim); }
.marcador-alineaciones {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.quinteto-bloque h2 { font-size: 0.85rem; }
/* Alineación rival por dorsales (12/09/2026, quinta vuelta): a petición de
   Manuel, "mete el menu para introducir dorsales del rival" -- deja de ser
   un hueco discreto sin función (borde discontinuo, atenuado) para pasar a
   ser un bloque activo más, mismo tratamiento visual que ".quinteto-bloque"
   de nuestro propio equipo. */
.quinteto-bloque-rival {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dorsales-rival-lista { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
/* Dorsal suelto (solo número, sin ficha de jugador -- no tenemos la
   plantilla del rival, "al menos con los numeros" según pidió Manuel):
   misma idea que un .jugador-chip pero mucho más compacto, con su propia
   ✕ para quitarlo. Seleccionable desde la séptima vuelta (12/09/2026): a
   petición de Manuel, "los rivales tienen que poder anotar y todas las
   demas acciones como los locales" -- se toca igual que un cuadro de
   jugador nuestro para anotar a su nombre, así que necesita el mismo
   feedback visual de "seleccionado". */
.dorsal-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 4px 8px;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
}
.dorsal-chip.seleccionado { border-color: var(--accent); background: var(--accent-dim); }
.dorsal-chip-num { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.dorsal-chip-stats { font-size: 0.6rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dorsal-chip-quitar {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-dim);
  font-size: 0.65rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.form-dorsal-rival { display: flex; gap: 6px; }
.input-dorsal-rival {
  width: 52px;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 4px 6px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.estado-sync { color: var(--verde); font-size: 0.7rem; }
.estado-sync.pendiente { color: var(--accent); }
.estado-sync.offline { color: var(--rojo); }

/* --- Cronómetro del partido (10/09/2026, agrandado en la segunda vuelta a
   petición de Manuel: "el contador de tiempo se tiene que ver más grande,
   no hace falta que se vean el contador de puntos tan grande"). Esa
   decisión se REVIRTIÓ en la quinta vuelta (12/09/2026): "los numeros del
   marcador deben ser como los del tiempo de alto" -- ver el comentario en
   .marcador-num más arriba. El crono conserva aquí el mismo tamaño que
   tenía, ahora ya no en solitario sino a la par del marcador. --- */
/* Una sola fila para cuarto/pausa-stop/posesión/sync (11/09/2026, undécima
   vuelta): a petición de Manuel ("no entiendo que le dejes tantisimo
   espacio al marcador... reparte mejor los elementos en todo ese
   espacio"), estos 4 controles (antes cada uno en su propia fila --
   ".marcador-cuarto-fila", ".crono-controles", la ya retirada
   ".marcador-centro-fila2" y "#estado-sync" suelto) comparten ahora una
   única fila que envuelve (flex-wrap) si hiciera falta en una pantalla muy
   estrecha, en vez de apilarse en 4 filas sueltas. */
.marcador-centro-controles { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.marcador-cuarto-fila { display: flex; align-items: center; gap: 4px; }
.partido-crono { font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--text); }
.partido-crono.crono-corriendo { color: var(--verde); }
/* Pausado (10/09/2026, tercera vuelta): color distinto del "corriendo" para
   que se note de un vistazo que el cronómetro está parado (por un tiempo
   muerto o por el botón de pausa) y no simplemente que el partido aún no
   ha empezado. */
.partido-crono.crono-pausado { color: var(--accent); }
.btn-crono-pausa { font-size: 0.7rem; padding: 3px 10px; }
.btn-crono-pausa.crono-pausa-activa { border-color: var(--accent); color: var(--accent); font-weight: 700; }
/* Pausa + stop en la misma fila (12/09/2026, quinta vuelta): a petición de
   Manuel, el botón de finalizar manual ("por si acaso") se traslada junto
   al de pausar/reanudar en vez de vivir como botón de texto aparte más
   abajo (ver #btn-stop-partido en index.html/app.js). */
.crono-controles { display: flex; align-items: center; gap: 6px; }
.btn-stop-partido { font-size: 0.85rem; padding: 3px 9px; line-height: 1; border-color: var(--rojo); color: var(--rojo); }

/* Antes ".rival-controles" -- renombrado en la quinta vuelta (12/09/2026)
   al quitar los puntos del rival (ver más abajo): ya solo queda el botón de
   estado del partido, así que el nombre de la clase pasa a describir lo que
   de verdad contiene. */
.controles-partido { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-estado { margin-left: auto; background: var(--verde); border-color: var(--verde); color: #052e12; font-weight: 700; }
.btn-estado.en-curso { background: var(--rojo); border-color: var(--rojo); color: #2e0505; }

/* --- Tiempos muertos, integrados en el marcador (11/09/2026, cuarta
   vuelta): a petición de Manuel, "los tiempos muertos integrados en la
   zona del marcador... como los TM van a cada lado del equipo con poner TM
   sobra" -- cada botón vive dentro de .marcador-equipo, a un lado de su
   propio equipo, así que en su día bastaba con un icono (⏱) y el contador,
   sin repetir el texto "TM".

   Cambio de símbolo (12/09/2026, duodécima vuelta): a petición de Manuel,
   "el indicador de tiempos muertos junto al marcador cambia el simbolo por
   TM y separalo un poco mas, hay espacio" -- el icono de reloj (⏱) se
   sustituye por el texto "TM" (ver index.html, #btn-tm-propio/#btn-tm-rival:
   sigue siendo un solo botón con el contador al lado, "TM 0/2", no una
   repetición del nombre del equipo) y el hueco respecto al número de
   puntos (".marcador-equipo-fila") crece de 6px a 14px. --- */
.btn-tm { font-size: 0.7rem; padding: 2px 8px; }
.tm-contador { font-variant-numeric: tabular-nums; font-weight: 700; }
.tm-bucket-hint { margin: 0; }

/* --- Flecha de posesión alterna (12/09/2026, quinta vuelta) -- el botón de
   Cambio que antes vivía aquí se trasladó a la matriz de jugadores en pista
   (ver .jugadores-grid-matriz/.jugador-chip-cambio); este hueco lo ocupa
   ahora la flecha FIBA. Vivía en su propia fila (".marcador-centro-fila2")
   hasta la undécima vuelta, cuando pasó a compartir fila con el resto de
   controles pequeños del centro (ver ".marcador-centro-controles" más
   arriba). --- */
/* Más grande (12/09/2026, duodécima vuelta): a petición de Manuel, "la
   flecha de direccion debe ser mas grande" -- prevalece sobre lo compacto
   que se dejó esta fila en la undécima vuelta (era 0.7rem/2px 8px, ahora
   el doble de letra y más relleno); el icono (◄/►/↔) crece todavía más
   que el texto porque es lo que se lee de un vistazo, según el propio
   comentario de index.html sobre este botón. */
.btn-flecha-posesion { font-size: 1rem; padding: 6px 14px; }
.btn-flecha-posesion #flecha-posesion-icono { font-size: 1.3em; font-weight: 700; }
/* Sin fijar todavía (estado inicial, ningún equipo la tiene marcada): icono
   neutro ↔ y texto atenuado, para no sugerir un lado antes de que el
   anotador la fije a mano tras el salto inicial. */
.btn-flecha-posesion.flecha-sin-fijar { color: var(--text-dim); }
/* Fijada hacia un equipo: mismo acento que el resto de controles activos de
   la cabecera, y el icono pasa a una flecha real (◄ hacia "Nosotros", a la
   izquierda del marcador; ► hacia el rival, a la derecha) para que se lea
   de un vistazo sin tener que fijarse en el texto. */
.btn-flecha-posesion.flecha-propio, .btn-flecha-posesion.flecha-rival { border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* --- Cambio de jugador (Bloque 1, 10/09/2026; integrado en la matriz del
   quinteto desde la quinta vuelta -- ver comentario junto a
   #btn-modo-cambio en index.html) --- */
/* Mismo color que .btn-estado.en-curso (rojo, "algo está pasando ahora
   mismo") mientras el modo está activo, para que se note claramente que
   los toques en los jugadores ya no anotan un tiro sino que están
   marcando un cambio. */
.btn-modo-cambio-activo { background: var(--rojo); border-color: var(--rojo); color: #2e0505; font-weight: 700; }

/* --- Franja de botones del marcador (11/09/2026, décima vuelta) ----------
   A petición de Manuel ("los botones sueltos vertical y horizontal
   banquillo registros y estadisticas se integren en esa franja"), el
   selector de layout (antes junto a "Empezar partido") y los tres
   botones-ventana (novena vuelta, antes su propia fila bajo la pista) se
   integran juntos en esta única franja dentro de ".marcador" -- mismo
   tratamiento de separador (borde superior) que tenía antes
   ".marcador-parciales", ese hueco que dejó libre al fusionarse con el
   cronómetro. */
.marcador-botones {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
/* Selector vertical/horizontal (12/09/2026, octava vuelta; solo icono desde
   la décima vuelta -- "▯"/"▭" sin texto, para caber en esta franja
   compacta junto a los tres botones-ventana; el title() de cada botón
   conserva el texto completo). */
.layout-selector { display: flex; gap: 6px; }
.layout-selector .btn { padding: 2px 10px; font-size: 0.9rem; line-height: 1; }
.layout-selector .btn.is-modo-activo { background: var(--accent); border-color: var(--accent); color: #1a1005; font-weight: 700; }

/* --- Banquillo / Registro / Estadísticas: botones-ventana (11/09/2026,
   novena vuelta) --------------------------------------------------------
   Sustituye a los antiguos ".banquillo-detalle"/".registro-acciones"/
   ".totales-detalle" siempre visibles en el flujo principal (a petición de
   Manuel: "deben ser botones que se vean en otra ventana, flotante o
   no") -- el contenido real vive en sus modales (#modal-banquillo/
   #modal-registro/#modal-estadisticas, más abajo), que heredan el aspecto
   de cualquier otro modal de la app vía ".modal-card". */
.ventanas-partido { display: flex; gap: 6px; flex-wrap: wrap; }
.ventanas-partido .btn { flex: 0 0 auto; }
.modal-card-header { justify-content: space-between; align-items: center; }
.modal-card-header h2 { margin: 0; }
#modal-banquillo .jugadores-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }

/* --- Quintetos --- */
.quinteto-bloque h2 { display: flex; align-items: center; justify-content: space-between; }
.jugadores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.jugador-chip {
  min-height: 56px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  cursor: pointer;
  touch-action: manipulation;
}
.jugador-chip .num { font-size: 1.1rem; font-weight: 800; }
.jugador-chip .nom { font-size: 0.65rem; color: var(--text-dim); text-align: center; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Puntos y faltas personales (11/09/2026, cuarta vuelta): a petición de
   Manuel, "en cada cuadro del jugador poner las faltas personales y los
   puntos que llevan" -- una segunda línea pequeña, separada del nombre,
   con los dos datos que se consultan sobre la marcha durante el partido
   (ver resumenRapidoPorJugador() en app.js). Aviso en dos escalones
   (12/09/2026, decimoquinta vuelta: "cuando un jugador llega a las tres
   faltas debe resaltarse como amarillo y con 4 en rojo") -- amarillo a
   partir de 3 faltas, rojo a partir de 4 (incluida la 5ª, límite de
   eliminado en 5x5 FIBA), para verlo sin tener que pararse a contar. */
.jugador-mini-stats { font-size: 0.62rem; color: var(--text-dim); font-variant-numeric: tabular-nums; margin-top: 2px; }
.jm-faltas-aviso { color: var(--amarillo); font-weight: 700; }
.jm-faltas-limite { color: var(--rojo); font-weight: 700; }
.jugador-chip.seleccionado { border-color: var(--accent); background: var(--accent-dim); }
.jugador-chip.en-banquillo { opacity: 0.8; }
/* Marcado durante el modo cambio: "sale" (rojo, jugador de pista tocado
   para salir) y "entra" (verde, jugador de banquillo tocado para entrar) --
   colores distintos para que, con los dos marcados a la vez un instante
   antes de completarse el cambio, se lea de un vistazo quién va a cada
   lado sin tener que leer el hint de texto. */
.jugador-chip.marcado-sale { border-color: var(--rojo); background: var(--rojo); opacity: 1; }
.jugador-chip.marcado-entra { border-color: var(--verde); background: var(--verde); opacity: 1; }
.jugador-chip.marcado-sale .nom, .jugador-chip.marcado-entra .nom,
.jugador-chip.marcado-sale .jugador-mini-stats, .jugador-chip.marcado-entra .jugador-mini-stats { color: #0b0f16; }
.jugador-chip.marcado-sale .jm-faltas-limite, .jugador-chip.marcado-entra .jm-faltas-limite,
.jugador-chip.marcado-sale .jm-faltas-aviso, .jugador-chip.marcado-entra .jm-faltas-aviso { color: #0b0f16; }

/* Quinteto en pista como matriz 3x2 (12/09/2026, quinta vuelta): a petición
   de Manuel, "el quintero si tiene que estar apilado en una matriz no pasa
   nada, queda hasta mas elegante, una matriz de 3x2 con el boton cambio
   integrado en la pieza que queda vacia del quinteto en la matriz" --
   sustituye a la rejilla "grande" de auto-fill de la cuarta vuelta: ahora
   son SIEMPRE 3 columnas fijas (5 jugadores + el botón de Cambio = 6
   piezas, exactas para 2 filas de 3), y vive dentro de la mitad propia de
   .marcador-alineaciones, así que el tamaño se reduce un poco frente a la
   versión anterior para no desbordar la cabecera. El banquillo (fuera de la
   matriz) se queda con el tamaño compacto de siempre. */
.jugadores-grid-matriz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.jugadores-grid-matriz .jugador-chip { min-height: 58px; padding: 6px 4px; }
.jugadores-grid-matriz .jugador-chip .num { font-size: 1.15rem; }
.jugadores-grid-matriz .jugador-chip .nom { font-size: 0.62rem; }
.jugadores-grid-matriz .jugador-mini-stats { font-size: 0.58rem; }
/* La "pieza vacía" del cambio: mismas medidas que un .jugador-chip para que
   encaje igual en la rejilla, pero con su propio estilo de botón (ghost) en
   vez del aspecto de tarjeta de jugador, para que se note que es un control
   y no un jugador más. */
.jugador-chip-cambio {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.3;
  padding: 6px 4px;
}

/* --- Acciones --- */
.btn-accion { font-size: 0.85rem; padding: 10px 4px; }
.btn-acierto { border-color: var(--verde); }
.btn-fallo { border-color: var(--rojo); }

/* --- Selector de modo de acción sobre la pista (10/09/2026, segunda
   vuelta) -- incluye T1/AS desde la tercera vuelta ("integra el tiro libre
   con el resto de botones de accion"): la regla de tamaño de botón se
   aplica a CUALQUIER botón dentro del selector (.btn-modo-accion Y
   .btn-accion), para que T1/AS midan igual que RO/RD/etc. aunque no
   "armen" un modo como esos. --- */
.pista-modo-selector { display: flex; flex-wrap: wrap; gap: 6px; }
.pista-modo-selector .btn { flex: 1 1 auto; min-width: 40px; }
.btn-modo-accion.is-modo-activo { background: var(--accent); border-color: var(--accent); color: #1a1005; font-weight: 700; }

/* --- Pista de tiro (10/09/2026, completa y a color en la segunda vuelta) -
   A petición de Manuel: "la pista tiene que ser la parte más importante de
   la pantalla" -- ya no lleva un max-width pequeño, ocupa el ancho
   disponible.
   Horizontal (10/09/2026, tercera vuelta): a petición de Manuel, "la pista
   completa la quiero en horizontal" -- el SVG ahora es más ancho que alto
   (aspect-ratio 290x150, transpuesto en app.js), así que el tamaño se
   acota por el ANCHO disponible (con un máximo para no verse gigante en
   pantallas grandes) en vez de por una altura de viewport como antes. --- */
.pista-tiro {
  /* Formato "Azul Naranja" (10/09/2026, tercera vuelta): la tarjeta que
     envuelve la pista usa la banda exterior azul del diseño de referencia
     en vez del --bg-card genérico del resto de la app -- da la sensación
     de "salir a la pista" en vez de quedarse dentro de una tarjeta más. */
  background: var(--pista-exterior);
  border: 1px solid var(--pista-perimetro);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.pista-tiro-hint { margin: 0; color: rgba(255,255,255,0.75); }
.pista-tiro-svg {
  display: block;
  width: min(100%, 780px);
  height: auto;
  aspect-ratio: 290 / 150;
  margin: 0 auto;
  touch-action: manipulation;
  cursor: pointer;
}
.pista-suelo { fill: var(--pista-suelo); }
.pista-perimetro {
  fill: none;
  stroke: var(--pista-perimetro);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.pista-lineas-reales path, .pista-lineas-reales circle {
  fill: none;
  stroke: var(--pista-lineas);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.pista-aro { fill: var(--accent); stroke: none; }
.pista-tablero { stroke: var(--pista-lineas); stroke-width: 1.8; }
/* Divisores de zona: NO son líneas reales de la pista, así que van
   discontinuas -- a petición explícita de Manuel ("hay que integrarlas con
   líneas discontinuas"). */
.pista-zonas-divisorias path {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 3 2.4;
  vector-effect: non-scaling-stroke;
}
/* Zonas a color (10/09/2026, segunda vuelta): "diferencia las zonas por
   colores. Las zonas equivalentes tienen que tener el mismo color." Un
   color por GRUPO (ver --zona-* en :root), semitransparente para que las
   líneas reales sigan leyéndose por encima. */
.pista-zona { stroke: none; opacity: 0.6; }
.pista-zona-aro { fill: var(--zona-aro); }
.pista-zona-pintura { fill: var(--zona-pintura); }
.pista-zona-codo { fill: var(--zona-codo); }
.pista-zona-tlibre { fill: var(--zona-tlibre); }
.pista-zona-media { fill: var(--zona-media); }
.pista-zona-fondo { fill: var(--zona-fondo); }
.pista-zona-arriba_llave { fill: var(--zona-arriba-llave); }
.pista-zona-ala { fill: var(--zona-ala); }
.pista-zona-esquina { fill: var(--zona-esquina); }
.pista-zona-fuera_de_rango { fill: var(--zona-fuera-rango); opacity: 0.45; }
.pista-marca { fill: var(--accent); stroke: var(--bg-card); stroke-width: 1; }
/* Bug menor corregido (12/09/2026, decimotercera vuelta, encontrado al
   probar la ventana de tipo de pérdida): en un <circle> de SVG el atributo
   "hidden" no basta -- a diferencia de un elemento HTML normal, este
   navegador sigue mostrándolo (display: inline por la hoja de estilos
   propia de SVG) aunque "hidden" esté puesto; ".pista-marca.hidden =
   true/false" llevaba así desde que existe (segunda vuelta, 10/09/2026) sin
   que se notara -- el punto seguía viéndose en la pista tras soltar el
   dedo. Mismo motivo/arreglo que ya lleva ".modal-overlay[hidden]" más
   abajo. */
.pista-marca[hidden] { display: none; }
/* #pista-confirmar (12/09/2026, octava vuelta): dejó de ser un panel fijo
   bajo la pista para ser un modal-overlay (a petición de Manuel, "para
   mayor velocidad de anotacion") -- su fondo/borde/padding propios ya no
   hacen falta, los hereda de ".modal-card" como cualquier otro modal;
   ".pista-confirmar-fila" se conserva tal cual para la fila interna de
   botones (zona/resultado, o la cuadrícula de asistencia). */
.pista-confirmar-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pista-confirmar-fila[hidden] { display: none; }
.pista-zona-texto-modal { font-size: 1rem; font-weight: 600; color: var(--text); flex-basis: 100%; }
.modal-card-pista-confirmar #btn-pista-acierto, .modal-card-pista-confirmar #btn-pista-fallo {
  flex: 1 1 auto;
  padding: 12px;
  font-size: 1rem;
}
.jugadores-grid-compacta { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); flex: 1 1 auto; }

/* --- Registro de acciones (10/09/2026; ventana modal desde la novena
   vuelta -- ver #modal-registro en index.html) --- */
.registro-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.registro-header h2 { margin: 0; }
.registro-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.registro-item { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.registro-tiempo { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 0.75rem; min-width: 38px; }
.registro-desc { flex: 1; }
/* Registro editable (10/09/2026, segunda vuelta): "el registro de acciones
   debe ser editable cada acción por posibles errores" -- 🗑 propio por
   entrada, más pequeño que el resto de botones redondos para no dominar
   una fila de texto compacta. */
.registro-borrar { min-height: 26px; min-width: 26px; font-size: 0.75rem; flex-shrink: 0; }

/* Estadísticas (10/09/2026, segunda vuelta; ventana modal y renombrado de
   "Totales del partido" desde la novena vuelta -- ver #modal-estadisticas
   en index.html).
   Sin barra de scroll (11/09/2026, décima vuelta): a petición de Manuel,
   "la ventana de estadisticas debe ajustarse al contenido nada de barra
   para hacer scroll" -- antes la tabla imponía un ancho mínimo propio
   (640px) y un contenedor con scroll horizontal (".tabla-totales-scroll")
   para no desbordar un modal normal (480px). Ahora la ventana crece hasta
   un ancho bastante mayor que un modal normal (96vw, sin un max-width fijo
   en px para no limitarla en pantallas grandes) y la tabla ya NO impone
   ningún ancho mínimo ni lleva contenedor con scroll -- letra y márgenes
   más ajustados (0.62rem, menos padding) para que quepa por sí sola en la
   práctica totalidad de anchos de pantalla habituales, incluido un móvil
   normal en vertical -- por eso este modal reduce además su propio padding
   (8px en vez de los 16px de ".modal-card" normal), esos 16px extra
   también cuentan a la hora de caber sin scroll.

   Pantalla completa + pestañas por cuarto (12/09/2026, duodécima vuelta):
   Manuel pidió lo contrario -- "debe ser mucho mas grande para que se
   pueda ver, debe ocupar la pantalla en ancho" -- así que gana esto sobre
   la letra diminuta de la décima vuelta: el modal pasa a ocupar casi todo
   el ancho Y el alto de pantalla (no solo un max-width, también un
   width/height explícitos, si no un modal con poco contenido -- p.ej. la
   pestaña de un cuarto suelto -- se quedaría estrecho por "encoger al
   contenido"), y la tabla recupera un tamaño de letra normal. Como
   consecuencia, en un móvil muy estrecho la tabla completa (pestaña
   "Total", 19 columnas) puede volver a no caber sin scroll -- se acepta
   ese scroll horizontal ocasional (".tabla-totales-cont" vuelve a llevar
   "overflow-x:auto") como mal menor: es preferible a una letra
   ilegible. */
.modal-card-estadisticas { max-width: 98vw; width: 98vw; max-height: 92vh; height: 92vh; padding: 10px 12px; display: flex; flex-direction: column; overflow: hidden; }
.modal-card-estadisticas .modal-card-header { flex-shrink: 0; }
.tabs-estadisticas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; flex-shrink: 0; }
.btn-tab-estadisticas { padding: 4px 14px; }
.btn-tab-estadisticas.is-tab-activa { background: var(--accent); border-color: var(--accent); color: #1a1005; font-weight: 700; }
.tabla-totales-cont { margin-top: 10px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.tabla-totales { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.tabla-totales th, .tabla-totales td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabla-totales th:first-child, .tabla-totales td:first-child { text-align: left; white-space: normal; position: sticky; left: 0; background: var(--bg-card); }
/* Oculta "Min" y "+/-" cuando se filtra por un cuarto concreto (ver
   renderTotales() en app.js): esas dos columnas solo son correctas como
   acumulado de todo el partido. */
.tabla-totales.sin-tiempo [data-col="min"], .tabla-totales.sin-tiempo [data-col="pm"] { display: none; }
.val-positivo { color: var(--verde); }
.val-negativo { color: var(--rojo); }

/* --- Modal quinteto --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 30;
}
/* Misma especificidad que ".modal-overlay" de arriba (una clase), así que
   por orden de cascada esta regla (que va después) es la que gana cuando el
   atributo "hidden" está presente -- sin esto, "display: flex" del bloque
   anterior anula al "display: none" que el propio navegador aplicaría por
   defecto a [hidden], y el modal se queda invisible mostrando un color de
   fondo transparente pero interceptando igualmente los toques de toda la
   pantalla de detrás. */
.modal-overlay[hidden] { display: none; }
@media (min-width: 700px) {
  .modal-overlay { align-items: center; }
}
.modal-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 700px) {
  .modal-card { border-radius: var(--radius); }
}
/* Ventana "¿Qué tipo de pérdida?" (12/09/2026, decimotercera vuelta): 8
   botones en rejilla de 2 columnas -- caben todos sin scroll en un móvil
   normal y el toque es más grande que en una lista de una sola columna. */
.tipos-perdida-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tipos-perdida-grid .btn { width: 100%; white-space: normal; }

.modal-lista { display: flex; flex-direction: column; gap: 6px; }
.modal-lista label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.95rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.modal-lista input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; }

/* --- Toast --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.85rem;
  z-index: 20;
}

/* --- Tablet / escritorio: aprovechar el ancho, más columnas --- */
@media (min-width: 700px) {
  .jugadores-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .view { max-width: 900px; margin: 0 auto; width: 100%; }
}

/* --- Versión horizontal para tablet (12/09/2026, octava vuelta): a
   petición de Manuel, primero "estamos con una version vertical de la
   pantalla, pero habria que crear otra horizontal para trabajar mas comodo
   en la tablet" y después "tengo que poder seleccionar pantalla horizontal
   y pantalla vertical". No es una pantalla nueva ni un HTML aparte --
   sigue siendo #view-partido de siempre, la MISMA que ya se ve en el móvil.

   Décima vuelta (11/09/2026) -- de grid de 2 columnas a columna única:
   la versión anterior ponía la pista en una columna izquierda y la fila
   de botones-ventana (".ventanas-partido") en una columna derecha. Ahora
   que esa fila (junto con el selector vertical/horizontal) se integró
   dentro de ".marcador" (petición de Manuel: "los botones sueltos...
   se integren en esa franja"), ya no queda ningún hijo directo de
   #view-partido para ocupar esa columna derecha -- así que se simplifica
   a una sola columna (flex, no grid) que solo aprovecha el ancho extra de
   la tablet para que la pista pueda crecer hasta su tamaño máximo
   (".pista-tiro-svg" ya limita a 780px), sin dejar una columna vacía al
   lado. Los modales (.modal-overlay) no hace falta excluirlos: son
   position:fixed en cuanto se muestran, así que no interfieren.

   Selección manual, no @media (12/09/2026): la primera versión decidía
   SOLO con una @media (min-width:860px y orientation:landscape), sin
   intervención del usuario -- esa @media tenía un bug de especificidad
   ("#view-partido.view" sin ".is-active" ganaba SIEMPRE a
   ".view.is-active" de la línea 80 de aquí arriba, así que la pantalla de
   partido se veía "por encima" de login/equipos/partidos nada más abrir
   la app en una tablet en horizontal -- root cause de que Manuel viera
   "la pantalla primera... se ve la pantalla de un partido"). Ahora es
   app.js quien decide (aplicarLayoutPartido()) y aplica una clase en
   <body> -- la regla de aquí abajo ya incluye ".is-active" desde el
   principio, así que no puede volver a colarse aquel bug. */
body.layout-horizontal #view-partido.view.is-active {
  /* display/flex-direction/gap ya vienen de ".view"/".view.is-active" de la
     línea 80 -- aquí solo hace falta ensanchar el máximo respecto al de
     ".view" en tablet (900px, línea 702) para dejar más margen a la pista. */
  max-width: 1100px;
}
body.layout-horizontal #view-partido > .pista-tiro { margin-bottom: 0; }