/* --- Temas claro/oscuro (Bloque 14.5, segunda pieza) --- Manuel pidió dos temas con colores pastel: uno claro con los colores de los New York Knicks (azul/naranja) y uno oscuro "bonito" sin más indicación, a nuestro criterio. Se aplican con el atributo `data-theme="claro"|"oscuro"` en (ver `applyTheme` en app.js, que también lo persiste en preferencias.json junto a los colores del editor de cancha). El tema oscuro es el que ya había desde el principio del proyecto, ahora movido a su propio bloque para poder alternar con el claro sin duplicar el resto de la hoja de estilos: casi todo el resto del CSS usa estas variables (--bg/--panel/--sidebar/--text/--muted/--accent/ --border), así que cambia de golpe con el tema. */ :root, :root[data-theme='oscuro'] { color-scheme: dark; --bg: #161a22; --panel: #1e2430; --panel-alt: #232a37; --sidebar: #10141b; --text: #f0f0f0; --muted: #9aa4b2; --accent: #e67e22; --accent-contrast: #14181f; --border: #2a323f; --danger: #e08a8a; --danger-strong: #ffb3b3; --success: #8fd19e; /* Colores personalizables del editor de cancha (Bloque 14.5): valores por defecto, iguales a los que ya había fijos antes de esta pieza. Se sobrescriben en tiempo de ejecución (app.js, `applyColorPrefs`) con lo que el usuario elija en el panel "🎨 Colores", y esos mismos valores se mandan también a la exportación a PDF (ver PRINT_CSS en main.js) para que pantalla y PDF coincidan siempre. Son independientes del tema visual de la app (se guardan y aplican igual en claro y en oscuro). */ /* Negro por defecto para todos (Bloque 14.5, novena pieza): Manuel pidió "color por defecto de todos los elementos gráficos siempre negro" — antes cada tipo tenía un color distinto de fábrica (azul/rojo/naranja para atacante/defensor/cono, casi blanco para las líneas). Sigue siendo 100% personalizable desde el panel "🎨 Colores"; esto solo cambia el valor con el que arranca una instalación nueva (o tras pulsar "Restablecer"). */ --color-atacante: #000000; --color-defensor: #000000; --color-cono: #000000; --color-linea-movimiento: #000000; --color-linea-pase: #000000; --color-linea-tiro: #000000; --color-linea-bote: #000000; --color-linea-bloqueo: #000000; --color-linea-mano-amano: #000000; /* Zonas (Bloque 14.5, décima pieza): un único color por defecto para las tres formas (rectángulo/círculo/triángulo) — se dibujan con relleno traslúcido (ver .zone-visible más abajo), así que aunque el color de partida sea negro como el resto de elementos, la zona se lee como un área semitransparente y no como una figura sólida. */ --color-zona: #000000; /* Círculo del balón (29/08/2026, revisión técnica interna): variable nueva y aparte de --color-atacante -- antes el círculo del balón reutilizaba siempre el mismo color que el número del atacante, así que un atacante con balón y color propio se quedaba con el número invisible sobre su propio círculo (mismo color exacto). Mismo negro por defecto que el resto ("todos los colores por defecto siempre negro"), 100% editable aparte desde el panel "🎨 Colores" o por jugador. */ --color-balon: #000000; /* Cono plano (29/08/2026): nuevo elemento colocable ("un cono plano, que se representa con un donut"), con su propio color por defecto, aparte de --color-cono del cono normal -- mismo criterio de negro por defecto que el resto de elementos gráficos. */ --color-cono-plano: #000000; /* Entrenador (15/09/2026, a petición de Manuel: "el entrenador con icono como silbato"): color propio, mismo criterio de negro por defecto que el resto. */ --color-entrenador: #000000; /* Balón como elemento colocable (15/09/2026): en un primer intento este icono reutilizaba --color-balon (el mismo círculo de posesión del atacante), pero Manuel pidió después "métele administración de colores" -- es decir, su propia entrada independiente en el panel "🎨 Colores", igual que cono/cono plano, no un color compartido con otro elemento. Mismo criterio de negro por defecto que el resto. */ --color-balon-elemento: #000000; } /* Tema claro (Bloque 14.5): pastel, inspirado en los colores clásicos de los New York Knicks (azul "Knicks Blue" y naranja "Knicks Orange"), suavizados para que el conjunto se vea tranquilo en pantallas grandes de trabajo y no como una app de fan deportivo. */ :root[data-theme='claro'] { color-scheme: light; --bg: #f3f6fb; --panel: #ffffff; --panel-alt: #eef2fa; --sidebar: #e8eefa; --text: #1c2634; --muted: #5c6b80; --accent: #f0883e; --accent-contrast: #241608; --border: #d7deea; --danger: #b23a3a; --danger-strong: #8f2020; --success: #2f8f52; /* La pista del editor mantiene siempre su mismo aspecto (naranja/marrón, fija en court.js/PRINT_CSS) sea cual sea el tema de la app alrededor — por eso estos valores por defecto se quedan igual que en el tema oscuro, casi blancos, para verse bien sobre esa pista. Los reemplaza en cuanto arranca la app el valor guardado en preferencias.json (o este mismo valor por defecto), sea cual sea el tema visual elegido. */ --color-atacante: #000000; --color-defensor: #000000; --color-cono: #000000; --color-linea-movimiento: #000000; --color-linea-pase: #000000; --color-linea-tiro: #000000; --color-linea-bote: #000000; --color-linea-bloqueo: #000000; --color-linea-mano-amano: #000000; --color-zona: #000000; --color-balon: #000000; --color-cono-plano: #000000; --color-entrenador: #000000; --color-balon-elemento: #000000; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; background: var(--bg); color: var(--text); } /* `height: 100vh` (Bloque 14.5, sexta pieza), no `min-height`: antes, en cualquier vista con contenido alto (Jugadas con varios gráficos, un equipo largo...) toda la página crecía más allá de la ventana y el scroll de la propia página se llevaba por delante también la barra lateral, así que había que desplazarse hacia abajo para volver a ver las pestañas "Jugadas/Ejercicios/Biblioteca/Equipos" — justo lo contrario de "usar los scroll de pantalla lo mínimo posible" que pidió Manuel. Con la altura fija aquí y `min-height: 0` en `.content` (el `min-height: 0` es necesario porque, si no, un hijo flex nunca se encoge por debajo del tamaño de su propio contenido, y el `overflow: auto` de `.content` no llegaría a activarse), ahora solo se desplaza el contenido central; la barra lateral se queda siempre visible. */ .app-shell { display: flex; height: 100vh; } /* --- Barra lateral de navegación (Bloque 2) --- */ /* Ancho reducido (Bloque 14.5, sexta pieza): Manuel pidió "optimizar mucho mejor el espacio en la pantalla" y, en concreto, reducir este selector de pestañas — antes 200px con bastante hueco vacío para solo cuatro botones de texto cortos. Se reduce el padding lateral a la vez para que el texto siga sin recortarse en el nuevo ancho. */ .sidebar { width: 140px; flex-shrink: 0; background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 8px; gap: 4px; overflow-y: auto; } .brand { font-weight: 700; font-size: 15px; padding: 8px 10px 16px; color: var(--text); } /* Número de versión (15/09/2026, a petición de Manuel: "me gustaria que en la app se pusiera un numero de control de versiones"): texto pequeño y apagado junto al nombre de la app, no una insignia llamativa -- es una referencia para depurar/soporte, no algo que deba llamar la atención. Ahora también es un botón (mismo día, a petición de Manuel de tener "un espacio para ver las ultimas modificaciones introducidas"): un clic abre el modal de Novedades -- ver #novedades-btn más abajo para la otra forma, más visible, de llegar a lo mismo. */ .app-version { font-weight: 400; font-size: 11px; color: var(--muted); appearance: none; border: none; background: none; padding: 0; margin-left: 2px; font-family: inherit; cursor: pointer; } .app-version:hover, .app-version:focus-visible { color: var(--accent); text-decoration: underline; } /* Novedades (15/09/2026): historial de cambios visible desde la propia aplicación -- Manuel: "incluye en la aplicacion un espacio para ver las ultimas modificaciones introducidas". Contenido de APP_CHANGELOG (ver 01-core.js), mostrado dentro de #modal-novedades reutilizando el modal genérico de siempre. */ .novedades-entry + .novedades-entry { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } .novedades-entry h3 { margin: 0 0 8px; font-size: 15px; color: var(--text); } .novedades-entry ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } .novedades-entry li { font-size: 13px; color: var(--muted); line-height: 1.4; } .nav-btn { appearance: none; border: none; background: transparent; color: var(--muted); text-align: left; padding: 10px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; } .nav-btn:hover { background: var(--panel-alt); color: var(--text); } .nav-btn.is-active { background: var(--accent); color: var(--accent-contrast); font-weight: 600; } .sidebar-spacer { flex: 1; } /* Selector de tema (Bloque 14.5, segunda pieza): alterna claro/oscuro y guarda la elección en preferencias.json (ver `applyTheme` en app.js). */ .theme-toggle-btn { appearance: none; border: 1px solid var(--border); background: var(--panel); color: var(--muted); display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; } .theme-toggle-btn:hover { color: var(--text); } /* --- Contenido principal --- */ .content { flex: 1; min-height: 0; padding: 20px 24px; overflow: auto; } .view { display: none; } .view.is-active { display: block; } .view h1 { margin: 0 0 6px; font-size: 20px; } .view-note { color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 560px; } .test-field { display: block; max-width: 360px; font-size: 13px; color: var(--muted); margin-top: 8px; } .test-field input { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 14px; } /* --- Guardar / abrir jugada (Bloque 7) --- */ .file-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .file-status { font-size: 13px; color: var(--muted); min-height: 18px; } /* Bloque 14: Guardar/Abrir/Exportar viven ahora en el menú Archivo, no en botones por vista; este texto recuerda dónde están y el atajo. */ .file-toolbar-hint { font-size: 12px; color: var(--muted); font-style: italic; } .file-status.is-error { color: var(--danger-strong); } /* Enlace "¿Olvidaste tu contraseña?" / "Volver a entrar" del modal Cuenta (13/09/2026, recuperar contraseña) -- un botón que se ve como un enlace discreto, no como los botones de acción normales (mode-btn). */ .btn-link-simple { background: none; border: none; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px 0; display: block; } .file-status.is-ok { color: var(--success); } /* Enlace "Deshacer" de la papelera de 30 segundos (revisión técnica interna, 29/08/2026, ver offerUndoableRemoval() en app.js) -- dentro del mismo .file-status donde ya se mostraba el aviso de "eliminado". */ .undo-link { color: var(--accent); text-decoration: underline; cursor: pointer; } .undo-link:hover { color: var(--text); } /* Playbook (Bloque 14.5, tercera pieza): franja que sustituye al guardado en archivo mientras se edita una copia de jugada dentro del Playbook de un equipo (ver jugada-playbook-banner en index.html / app.js). */ .playbook-edit-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; background: var(--panel-alt); border: 1px solid var(--accent); border-radius: 8px; font-size: 13px; } .playbook-edit-banner span { flex: 1 1 auto; } .playbook-edit-banner[hidden] { display: none; } /* Aviso de próximos partidos (26/08/2026, cuadro de mandos): mismo lenguaje visual que .playbook-edit-banner (franja con borde de acento), pero como lista de partidos en vez de una sola línea -- ver renderProximosPartidosAlert() en app.js. */ .equipo-dashboard-alert { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 18px; padding: 12px 16px; background: var(--panel-alt); border: 1px solid var(--accent); border-radius: 8px; } .equipo-dashboard-alert h3 { margin: 0; font-size: 14px; } .equipo-dashboard-alert[hidden] { display: none; } .equipo-dashboard-alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .equipo-dashboard-alert-item { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; width: 100%; font-size: 13px; font-family: inherit; color: var(--text); background: none; border: none; border-radius: 6px; padding: 4px 6px; text-align: left; cursor: pointer; } .equipo-dashboard-alert-item:hover { background: var(--panel); } .equipo-dashboard-alert-item-fecha { font-weight: 600; min-width: 110px; } .equipo-dashboard-alert-item-liga { color: var(--muted); } /* Convocatorias agrupadas por liga/competición (26/08/2026), a petición de Manuel -- ver renderEquipoConvocatorias() en app.js. Cada liga es ahora un grupo plegable ("las ligas se tienen que poder agrupar para que quede la pantalla más limpia"), con el mismo lenguaje visual de chevron que las tarjetas de partido de dentro (.evaluacion-player-chevron), y dentro de cada una los partidos se subagrupan por mes. */ .convocatorias-grupo { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .convocatorias-grupo-toggle { appearance: none; width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: var(--panel-alt); border: none; color: var(--text); padding: 12px 14px; cursor: pointer; text-align: left; font: inherit; } .convocatorias-grupo-toggle:hover { background: var(--panel); } .convocatorias-grupo.is-expanded .convocatorias-grupo-toggle .evaluacion-player-chevron { transform: rotate(90deg); } .convocatorias-grupo-title { font-size: 15px; font-weight: 600; } .convocatorias-grupo-meta { color: var(--muted); font-size: 13px; } .convocatorias-grupo-body { padding: 14px; border-top: 1px solid var(--border); } .convocatorias-grupo-body[hidden] { display: none; } /* Meses plegables dentro de cada liga (26/08/2026), a petición de Manuel: "quiero que se puedan agrupar también los partidos de cada mes" -- mismo patrón de chevron+toggle que la liga que los contiene, pero un escalón más pequeño y sin fondo propio (la liga ya tiene el suyo). */ .convocatorias-mes { margin: 10px 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .convocatorias-mes:first-child { margin-top: 0; } .convocatorias-mes-toggle { appearance: none; width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: none; border: none; color: var(--text); padding: 8px 10px; cursor: pointer; text-align: left; font: inherit; } .convocatorias-mes-toggle:hover { background: var(--panel-alt); } .convocatorias-mes.is-expanded .convocatorias-mes-toggle .evaluacion-player-chevron { transform: rotate(90deg); } .convocatorias-mes-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; } .convocatorias-mes-meta { color: var(--muted); font-size: 12px; } .convocatorias-mes-body { padding: 10px; border-top: 1px solid var(--border); } .convocatorias-mes-body[hidden] { display: none; } /* --- Formulario de ejercicios (Bloque 8) --- */ .exercise-form { max-width: 900px; margin-top: 16px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; margin-bottom: 12px; } .form-field { display: block; font-size: 13px; color: var(--muted); } .form-field input[type='text'], .form-field textarea { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 14px; font-family: inherit; resize: vertical; } .form-field-wide { display: block; margin-bottom: 12px; } .form-field-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); max-width: 900px; margin-top: 4px; } .form-field-checkbox input { width: 16px; height: 16px; } .court-editor { margin-top: 12px; /* Columna en vez de bloque (16/09/2026): ahora `.court-editor` tiene dos hijos en el flujo normal, `.court-row` y la leyenda de colores (`.jugada-graphic-note`) que antes vivía en la columna de texto de la izquierda -- ver el comentario junto a esa clase más abajo y en index.html. Como columna flex, la leyenda queda debajo de la cancha en vez de superpuesta o al lado. */ display: flex; flex-direction: column; } /* Layout en dos columnas de Jugadas y Ejercicios (Bloque 14.5, octava pieza): Manuel, viendo la sexta/séptima pieza en marcha: "esto me parece muy cutre... no hace falta esos campos de textos tan grandes, la parte gráfica no la quiero abajo y a la derecha, quiero en menos de la mitad a la izquierda los textos y la otra mitad el gráfico". Antes los campos de texto (aunque ya plegables desde la séptima pieza) ocupaban todo el ancho por encima de la cancha; ahora van en una columna izquierda más estrecha y la cancha con su botonera en la columna derecha, uno junto al otro. */ .editor-layout { display: flex; align-items: flex-start; gap: 20px; margin-top: 16px; } /* Ancho de la columna de texto: una base de 380px que puede encogerse en pantallas estrechas pero no crecer más allá de 560px en pantallas muy anchas/maximizadas (Bloque 14.5, novena pieza: "no aprovechamos la pantalla completa" — antes el tope era 460px, demasiado poco en una ventana maximizada), para que el gráfico siempre se lleve la mayor parte del ancho pero la columna de texto también crezca y aproveche el espacio, sin pasar de la mitad de la pantalla. */ .editor-panel-left { flex: 1 1 380px; max-width: 560px; min-width: 260px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .editor-panel-left > *:first-child { margin-top: 0; } .editor-panel-right { flex: 3 1 620px; min-width: 0; } .editor-panel-right .court-editor { margin-top: 0; } /* Ajuste a pantalla completa en Jugadas/Ejercicios (Bloque 18, 09/09/2026): Manuel probó de verdad en un iPad con lápiz y reportó selección de iconos poco fiable, el lápiz provocando scroll de página al dibujar, y pidió "recoger el texto superior, haciendo como dos columnas: en la izquierda los textos, en la derecha la parte gráfica", con "los iconos junto a la pista" y sin que eso "genere un scroll en el navegador". El HTML ya movió el título/instrucciones/toolbar de archivo dentro de `.editor-panel-left` (ver index.html) para que la columna derecha arranque justo arriba del todo; aquí se encadena una altura acotada desde `.view.is-active` (marcada con la clase `view-court-fit`) hasta la propia cancha, en vez de dejar que cada nivel crezca según su contenido y confiar en el scroll general de `.content` (justo lo que Manuel pidió evitar). Solo se aplica a estas dos vistas -- marcadas explícitamente con `.view-court-fit` en el HTML -- así que el resto de vistas (Equipos, Biblioteca, Calendario...) no cambian nada de su comportamiento ni de su scroll habitual. Manuel confirmó que este mismo ajuste debe verse igual en Windows, no solo en iPad -- por eso no va detrás de ninguna media query de tamaño de pantalla. */ .view.is-active.view-court-fit { display: flex; flex-direction: column; height: 100%; min-height: 0; } .view-court-fit .editor-layout { flex: 1 1 auto; min-height: 0; /* La base de `.editor-layout` (arriba) usa align-items:flex-start a propósito para que cada columna ocupe solo lo que necesita; aquí pasa a stretch para que las dos columnas compartan siempre la misma altura -- toda la que quede disponible en la vista -- y así ninguna de las dos pueda estirar la vista entera por encima de esa altura. */ align-items: stretch; } .view-court-fit .editor-panel-left { /* Base de 300px (antes 380px en `.editor-panel-left` general) y suelo de 200px (antes 260px) -- comprobado con Playwright en un ancho de iPad real (834px de viewport en vertical): con los valores de escritorio la columna de texto se quedaba en su suelo de 260px y a la cancha+botonera solo le quedaban ~366px, un diagrama incómodamente pequeño para dibujar con el dedo/lápiz -- y, al haber desactivado el pellizco-zoom de la página (ver meta viewport en index.html), no hay ningún zoom de respaldo si el diagrama sale pequeño. Con esta base más ajustada la cancha gana a sitio siempre que el ancho esté ajustado (iPad), sin cambiar casi nada en una ventana de escritorio ancha, donde ambas columnas ya llegan sobradas a su tope. */ flex: 1 1 300px; min-width: 200px; min-height: 0; /* Con el título/instrucciones/toolbar de archivo ahora también dentro de esta columna, puede haber más texto del que cabe en la altura disponible (sobre todo en Ejercicios, con más campos) -- en vez de dejar que desborde y arrastre un scroll de página entera, esta columna se desplaza sola, por su cuenta, sin afectar a la columna derecha. */ overflow-y: auto; } .view-court-fit .editor-panel-right { min-height: 0; display: flex; flex-direction: column; } .view-court-fit .editor-panel-right .court-editor { flex: 1; min-height: 0; } .view-court-fit .court-row { /* Antes `height: 100%` (se quedaba con todo el alto de `.court-editor`, que entonces solo tenía este único hijo). Ahora `.court-editor` es una columna flex con `.court-row` y, debajo, la leyenda de colores -- así que `.court-row` solo debe quedarse con el hueco que le sobra después de esa leyenda (`flex: 1 1 auto`), no con el 100% fijo, o la leyenda no tendría sitio y se saldría de la vista acotada (Bloque 18). */ flex: 1 1 auto; min-height: 0; } /* La cancha ya no solo se limita por ancho (`.court-stack`/`.court-half`/ `.court-full` de más abajo) sino también por la altura que le deja disponible `.court-row` -- si no, en un iPad en horizontal (más ancho que alto que en vertical) podría seguir intentando crecer más alta de lo que cabe y forzar scroll. `.court-stack` recibe su relación de aspecto por JS (`aspect-ratio`, calculado del viewBox en `renderCourt()` -- Bloque 18, quinta vuelta, 10/09/2026, antes esta proporción intrínseca la aportaba el propio `` de `.court-svg`), así que con `width`/ `height` ya en juego el navegador reduce ambas dimensiones a la vez para no deformarla -- igual que ya hace cualquier con `max-width`/ `max-height` combinados. */ .view-court-fit .court-stack { max-height: 100%; } /* La botonera de iconos tiene una altura fija (la suma de sus botones de 44px); en la inmensa mayoría de tamaños de pantalla cabe entera junto a la cancha, pero por si un iPad en horizontal con la barra de Safari visible se quedara justo, se le da un scroll propio SOLO a la botonera (nunca a toda la página) como último recurso -- así ningún icono queda inaccesible del todo, aunque en la práctica no debería llegar a hacer falta. */ .view-court-fit .tool-rail { max-height: 100%; overflow-y: auto; } /* --- Sesiones (Bloque 9) --- */ .form-field-title { display: block; max-width: 500px; font-size: 13px; color: var(--muted); margin-top: 16px; } .form-field-title input, .form-field-title textarea { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 14px; font-family: inherit; } .session-add-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; max-width: 1000px; } .session-add-col { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px; } .session-add-col h2 { margin: 0 0 8px; font-size: 13px; color: var(--muted); } .session-add-col > .mode-btn { width: 100%; margin-bottom: 8px; } .session-quick-form { display: flex; flex-direction: column; gap: 6px; } .session-quick-form input, .session-quick-form textarea, .session-quick-form select { padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit; resize: vertical; } .session-quick-form .mode-btn { margin-top: 2px; } .session-summary { display: flex; align-items: center; gap: 16px; margin-top: 18px; font-size: 14px; } .session-summary span#sesion-block-count { color: var(--muted); font-size: 13px; } .session-block-list { list-style: none; margin: 12px 0 0; padding: 0; max-width: 1000px; display: flex; flex-direction: column; gap: 8px; } .session-block { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .session-block-index { font-size: 13px; color: var(--muted); width: 20px; flex-shrink: 0; } .session-block-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; flex-shrink: 0; text-transform: uppercase; } .session-block-badge.badge-exercise { background: #2a4d7a; color: #eef4fb; } .session-block-badge.badge-jugada { background: #6a3a1f; color: #fbeee4; } .session-block-badge.badge-free { background: #3a4a2a; color: #eef7ea; } .session-block-body { flex: 1; min-width: 0; } .session-block-title { font-size: 14px; font-weight: 600; } .session-block-preview { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .session-block-duration { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); flex-shrink: 0; } .session-block-duration input { width: 56px; padding: 5px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; } .session-block-actions { display: flex; gap: 4px; flex-shrink: 0; } .session-block-actions button { appearance: none; border: 1px solid var(--border); background: var(--bg); color: var(--muted); border-radius: 6px; padding: 5px 8px; font-size: 13px; cursor: pointer; } .session-block-actions button:hover { color: var(--text); } .session-block-actions button:disabled { opacity: 0.35; cursor: default; } /* --- Biblioteca (Bloque 10) --- */ .lib-pending-col { border-color: var(--accent); } .lib-pending-checkbox { margin: 2px 0; } .library-list { list-style: none; margin: 12px 0 0; padding: 0; max-width: 1000px; display: flex; flex-direction: column; gap: 8px; } .library-item { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .library-item-badges { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .library-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; text-align: center; } .library-badge.badge-exercise { background: #2a4d7a; color: #eef4fb; } .library-badge.badge-jugada { background: #6a3a1f; color: #fbeee4; } .library-badge.badge-sesion { background: #4a2a5a; color: #f6ecfb; } .library-badge.badge-template { background: var(--accent); color: var(--accent-contrast); } .library-item-body { flex: 1; min-width: 0; } .library-item-title { font-size: 14px; font-weight: 600; } .library-item-meta { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .library-item-actions { display: flex; gap: 6px; flex-shrink: 0; } .library-item-actions button { appearance: none; border: 1px solid var(--border); background: var(--bg); color: var(--muted); border-radius: 6px; padding: 6px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; } .library-item-actions button:hover { color: var(--text); } /* --- Palabras clave / búsqueda en Biblioteca (Bloque 14) --- */ .library-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 900px; } .library-item-keywords { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .library-keyword-tag { font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; } .mode-selector { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .toolbar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; } .mode-btn { appearance: none; border: 1px solid var(--border); background: var(--panel); color: var(--muted); padding: 8px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; } .mode-btn:hover { color: var(--text); } .mode-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 600; } .mode-btn:disabled { opacity: 0.4; cursor: default; } .mode-btn:disabled:hover { color: var(--muted); } #court { width: 100%; height: auto; touch-action: none; border-radius: 8px; margin-top: 16px; display: block; } /* Arreglo (19/08/2026, feedback de Manuel): estas reglas apuntaban a "#court", un id que no existe en ningún sitio (el real tiene class="court-svg"), así que nunca se aplicaban y el diagrama de cancha crecía sin límite hasta ocupar todo el ancho disponible de la pantalla. Con el selector correcto, la media cancha (casi cuadrada, cabe alta) se limita más en ancho para no ocupar una pantalla entera de alto; la cancha completa es apaisada y no tiene ese problema, así que puede ser más ancha. `width: 100%` + `max-width` deja que se achique en pantallas pequeñas sin pasarse del tamaño pensado en pantallas grandes. */ .court-svg { /* Corrección (Bloque 18, quinta vuelta, 10/09/2026): `display:block`, `width:100%` y `height:auto` vivían aquí porque, antes de separar fondo y líneas en dos , este era el único elemento de la pareja y el que el `.court-row` (flex) medía para darle tamaño. Ahora ese trabajo lo hace `.court-stack` (ver más abajo, con `aspect-ratio` puesto por JS) -- `.court-svg` y `.court-svg-bg` simplemente rellenan la celda de la rejilla que `.court-stack` les da, así que les basta con ocupar el 100% de esa celda en ambas dimensiones. */ width: 100%; height: 100%; /* Evita que Safari en iPad interprete un arrastre con el dedo/lápiz sobre la cancha como un gesto de scroll/zoom de página (Bloque 18, 09/09/2026, feedback de Manuel probando en un iPad real: "el lápiz hace scroll al intentar dibujar" y "no se selecciona/deselecciona bien los iconos" -- ambos síntomas del mismo problema: el navegador compitiendo con el propio arrastre de la app por el mismo gesto). Mismo mecanismo que ya usan `.panel-header`/`.modal-header` más abajo para sus propias cabeceras arrastrables -- aquí faltaba en la propia cancha, que es donde el usuario dibuja/arrastra de verdad. Se aplica a todo el y por tanto a todos los grupos que arrastra dentro (jugadores, zonas, texto libre, tiradores de línea/zona), sin tener que repetirlo en cada uno. */ touch-action: none; } /* `.court-stack` (Bloque 18, cuarta vuelta, 10/09/2026): envuelve `.court-svg-bg` (superficie + textura de parqué) y `.court-svg` (líneas/jugadores/zonas, el de siempre) apilándolos uno encima del otro con CSS Grid -- los dos ocupan la misma celda (`grid-area: 1 / 1`), así que se superponen sin usar `position: absolute` ni tener que calcular a mano el tamaño de uno a partir del otro. Se pintan en el orden del propio HTML (fondo primero, `.court-svg` después, así que queda encima), como con cualquier par de elementos normales -- ver la nota larga junto a `courtSkinTextureMarkup` en court.js sobre POR QUÉ hacía falta separarlos en dos `` en vez de dejarlos convivir dentro de uno solo. Corrección (Bloque 18, quinta vuelta, 10/09/2026): esta nota decía antes que el tamaño real de todo el conjunto lo seguía marcando `.court-svg` con sus propias reglas -- ESO ERA INCORRECTO y causaba una regresión real (detectada por `panel-arrastrable.test.js`, no a simple vista): un normal tiene relación de aspecto intrínseca (por su viewBox) y por eso `width:100%; height:auto` le bastaba para calcular su propia altura, pero un
de rejilla como `.court-stack` NO tiene ninguna relación de aspecto propia, así que con solo `display:grid` colapsaba a un tamaño mínimo (la cancha salía a la mitad de su tamaño real). Ahora es `.court-stack` quien lleva el `width:100%`, los topes de `.court-half`/`.court-full` y `.view-court-fit`'s `max-height`, IGUAL que antes llevaba `.court-svg` -- y además recibe un `aspect-ratio` calculado por JS a partir del propio viewBox (ver `renderCourt()` en 01-core.js), que es lo que le da la relación de aspecto intrínseca que un
no tiene por sí solo. `.court-svg`/`.court-svg-bg` ya no necesitan marcar ningún tamaño propio: simplemente rellenan (100%/100%) la celda que `.court-stack` les da. */ .court-stack { display: grid; width: 100%; min-width: 0; } .court-stack > svg { grid-area: 1 / 1; } .court-svg-bg { width: 100%; height: 100%; /* Nunca debe robarle el toque/clic a la cancha interactiva de encima. */ pointer-events: none; } /* Topes ampliados (Bloque 14.5, novena pieza): Manuel, viendo la octava pieza maximizada de verdad ("no aprovechamos la pantalla completa"), pidió que la cancha también creciera con la ventana. Además, pidió aparte que la media pista en concreto se viera "al menos un 25% más" grande: al ser casi cuadrada (frente a la completa, apaisada) antes se limitaba más para no crecer también en alto sin control, quedando proporcionalmente pequeña. Su tope crece más que el de la cancha completa (700px, un 25% más que los 560px que le tocarían si mantuviera la misma proporción de antes) para que se note claramente más grande sin dejar de caber cómoda en alto en una ventana maximizada. */ .court-stack.court-half { max-width: 700px; } .court-stack.court-full { max-width: 1000px; } /* Bloque 14.5, cuarta pieza: el rectángulo de `court-surface` ya no termina en la línea de banda/fondo real, sino que incluye además la franja de fuera de banda/fondo (ver OOB_M en court.js) — por eso ya no lleva su propio borde (antes `stroke: #f5f5f5`, que dibujaba un marco alrededor de TODA la franja, no de la cancha real). El borde de la cancha de verdad ahora es `.court-boundary` (más abajo), dibujado en las coordenadas reales de la línea de banda/fondo, no en el borde del rectángulo de superficie. */ .court-surface { fill: #c8845a; } .court-line { fill: none; stroke: #f5f5f5; stroke-width: 3; } /* Borde exterior de la cancha (línea de banda/fondo real, Bloque 14.5, cuarta pieza): mismo color que el resto de líneas de cancha, un poco más grueso para distinguirlo como el límite de juego (a diferencia de `court-line` a secas, usado para las marcas internas: zona, círculos...). */ .court-boundary { stroke-width: 4; } .court-basket { fill: #f5f5f5; } .court-backboard { stroke-width: 5; } /* Herramientas de edición del gráfico (Bloque 14.5, segunda pieza): a petición de Manuel, pasan de una fila de botones de texto encima de la cancha a una columna estrecha de iconos a la derecha del propio gráfico (ver el nuevo `.tool-rail` dentro de `.court-row` en el HTML). El nombre completo de cada herramienta sigue disponible como `title` (tooltip al pasar el ratón) y como texto para lectores de pantalla. */ .tool-rail { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; } /* Agrupación visual de los 3 bloques de la botonera (Bloque 14.5, octava pieza): Manuel, sobre la botonera de la séptima pieza: "los selectores gráficos no están bien agrupados y ordenados". Una línea fina separa cada bloque (vista/deshacer-rehacer/colores, colocar elemento, dibujar línea) del siguiente, en vez de que los tres queden pegados sin ninguna separación visual entre ellos. */ .tool-rail > * + * { padding-top: 10px; border-top: 1px solid var(--border); } /* Bloque 14.5, sexta pieza: Manuel pidió repartir los iconos de herramienta en "dos columnas y uno en solo una columna larga" en vez de una única columna de 10 botones, para que el conjunto ocupe menos alto junto a la cancha (norma general de esta entrega: minimizar el scroll de pantalla). Los cinco de "colocar elemento" (mover, atacante, defensor, cono, mano a mano) van en una rejilla de 2 columnas; los cinco de "dibujar línea" (movimiento/pase/tiro/bote/bloqueo), que se usan de forma más secuencial, se quedan en una única columna larga debajo. */ .tool-rail-grid { display: grid; grid-template-columns: repeat(2, 44px); gap: 6px; } /* Bloque 14.5, novena pieza: Manuel, viendo la botonera ya agrupada de la octava pieza en su pantalla real: "esto tiene que estar a dos columnas" (sobre las capturas del grupo de líneas, que aún iba en una única columna larga desde la sexta pieza). Pasa al mismo patrón de rejilla de 2 columnas que el grupo de "colocar elemento", para que ambos bloques ocupen menos alto junto a la cancha. Con 5 iconos en 2 columnas sobra una celda: el último botón (Bloqueo) se ensancha a las 2 columnas para no dejar un hueco vacío suelto (mismo recurso que `.tool-btn-wide` ya usa en el otro grupo). */ .tool-rail-lines { display: grid; grid-template-columns: repeat(2, 44px); gap: 6px; } /* Zonas (Bloque 14.5, décima pieza): mismo patrón de rejilla de 2 columnas que el resto de grupos de esta botonera; el triángulo (tercer botón, impar) se ensancha a las 2 columnas igual que "Bloqueo" en .tool-rail-lines, para no dejar una celda vacía suelta. */ .tool-rail-zones { display: grid; grid-template-columns: repeat(2, 44px); gap: 6px; } .tool-btn { appearance: none; /* 44px (antes 42px, Bloque 18, 09/09/2026): Manuel probó en un iPad real y reportó que la selección de iconos "no funciona bien" con el dedo/ lápiz -- 44×44pt es el tamaño mínimo de objetivo táctil que recomienda la guía de interfaz de Apple; 42px se quedaba justo por debajo. */ width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; } .tool-btn svg { width: 22px; height: 22px; stroke: currentColor; } .tool-btn:hover { color: var(--text); } .tool-btn.is-active { background: #2a4d7a; border-color: #2a4d7a; color: #eef4fb; } /* Botón "ancho" dentro de una rejilla de 2 columnas (Bloque 14.5, octava pieza): ocupa las 2 columnas en vez de dejar una celda vacía y descuadrada. Se usa en el botón "Mover / seleccionar" (la herramienta por defecto, primero de su grupo) y en "Colores" (último de su grupo, antes quedaba solo en una fila con una celda vacía al lado) — al ser el primer y el último elemento de cada rejilla respectivamente, la colocación automática de CSS Grid ya deja el resto de botones repartidos en un 2×2 perfecto sin necesidad de reordenar nada en el HTML. */ .tool-btn-wide { grid-column: span 2; width: auto; } /* Modo de cancha, deshacer/rehacer y colores integrados en la propia botonera del gráfico (Bloque 14.5, séptima pieza) — antes vivían en una fila `.mode-btn` aparte encima de la cancha; deshacer/rehacer necesitan el mismo estado deshabilitado que tenían allí. */ .tool-btn:disabled { opacity: 0.35; cursor: default; } .tool-btn:disabled:hover { color: var(--muted); } /* Texto solo para lectores de pantalla (los botones de herramienta son icono + `title`, sin texto visible, para que quepan en la columna estrecha junto al gráfico). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* `justify-content` (Bloque 14.5, sexta pieza -> octava pieza): en la sexta pieza esto era `flex-end` para "encajar la pista a la derecha" cuando la cancha ocupaba sola todo el ancho de la vista. Con el layout en dos columnas de la octava pieza (`.editor-layout`), la cancha ya vive en su propia columna derecha `.editor-panel-right`; `flex-end` ahí solo abriría un hueco vacío entre la columna de texto y la cancha en pantallas anchas, así que pasa a `flex-start` para que la cancha quede pegada al borde izquierdo de su columna (junto a la columna de texto), no al borde derecho de la ventana. */ .court-row { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; position: relative; } /* Panel flotante junto al elemento seleccionado (Bloque 14.5, cuarta pieza): antes vivía fijo en el hueco a la derecha de la cancha, a petición de Manuel — "me gustaría ver las opciones de cambio con unos iconos alrededor del cursor y no tener que desplazarlo hasta el hueco a la derecha de la pantalla". Un menú circular de iconos alrededor del cursor es poco práctico aquí (hay selectores de color e inputs numéricos, no solo botones), así que en su lugar el mismo panel de siempre ahora flota junto al elemento seleccionado (`positionFloatingPanel()` en app.js, usando `getScreenCTM()` para convertir la posición del elemento en la cancha a coordenadas de pantalla) en vez de quedarse fijo en el lateral — se sigue viendo sin mover la vista, sea cual sea el sitio de la cancha donde esté. Ya no ocupa hueco en el `.court-row` (position: absolute), así que la cancha no se encoge ni se desplaza al aparecer. */ .player-panel, .line-panel, .zone-panel, .text-panel { width: 220px; position: absolute; z-index: 5; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; } /* Icono de edición (16/09/2026, a petición de Manuel: "la ventana que se abre para poder modificarlo cuando seleccionas un elemento es realmente molesta ... a lo mejor un icono pequeño anexo"). Seleccionar un elemento ya no abre de golpe su panel completo -- solo aparece este icono redondo junto a él (misma colocación automática que los paneles de arriba, ver positionFloatingPanel() en 01-core.js); hace falta pulsarlo para abrir el panel de edición, que entonces se coloca en el mismo sitio. */ .element-edit-btn { width: 32px; height: 32px; position: absolute; z-index: 5; appearance: none; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .element-edit-btn:hover { background: var(--panel-alt); } /* Cabecera del panel flotante con aspa de cerrar (Bloque 14.5, sexta pieza): Manuel señaló que el panel no tenía ninguna forma de quitarse de encima del gráfico salvo deseleccionar con la herramienta "mover" sobre la propia cancha, así que se añade un botón explícito y visible. */ .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; /* Arrastrable (29/08/2026): Manuel — "todas las ventanas que se generan para editar cuando se insertan se tienen que poder mover/desplazar donde desee". El cursor de "mover" en la cabecera es la única pista visual de que se puede arrastrar (ver makeFloatingPanelDraggable() en 01-core.js); `touch-action: none` evita que el navegador intente hacer scroll/zoom con el propio gesto de arrastre en vez de dejarlo llegar como eventos pointermove normales. */ cursor: move; touch-action: none; } .panel-header:active { cursor: grabbing; } .panel-title { margin: 0; font-size: 14px; } .panel-close-btn { appearance: none; border: 1px solid var(--border); background: var(--panel-alt); color: var(--muted); width: 26px; height: 26px; line-height: 1; border-radius: 6px; font-size: 16px; cursor: pointer; flex: none; } .panel-close-btn:hover { color: var(--text); background: var(--border); } .line-color-field { /* Columna, no fila (Bloque 14.5, duodécima pieza): con la fila de 9 círculos básicos + el personalizado (ver `.color-swatch-row` más abajo) ya no cabe cómodo un layout de "texto a la izquierda, selector a la derecha" en los 220px del panel flotante -- la etiqueta va arriba y la fila de colores debajo, a todo el ancho disponible. */ display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--muted); } .line-color-field input[type='color'] { width: 48px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); cursor: pointer; } .line-reset-color-btn { appearance: none; width: 100%; border: 1px solid var(--border); background: var(--panel-alt); color: var(--muted); padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; margin-bottom: 12px; } .line-reset-color-btn:hover { color: var(--text); } .panel-field { display: block; font-size: 13px; color: var(--muted); margin-bottom: 12px; } .panel-field input[type='number'] { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 14px; } .panel-checkbox { display: flex; align-items: center; gap: 8px; } .panel-checkbox input { width: 16px; height: 16px; } /* Cuadro de texto libre (Bloque 14.5, decimoquinta pieza): mismo estilo que el resto de campos del panel flotante (`.panel-field input[type='number']` más arriba), pero para el `