/* ===== Diseñar jugada =====
   Estilos propios del módulo. No comparte una sola regla con la pizarra
   principal a propósito: aquel campo son divs posicionados en porcentaje y
   este es un SVG, así que cualquier clase compartida acabaría siendo un
   estorbo para los dos. */

/* La × del diálogo de alta. Copia el aspecto de `.close` de la app pero con
   clase propia: compartirla la ataba al diálogo de la ficha de jugador, porque
   app.js engancha todos los `.close` del documento de una vez. */
.jg-cerrar{border:0;background:none;font-size:22px;cursor:pointer;color:inherit;line-height:1}

/* ---------- Listado ---------- */
.jg-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:13px}
.jg-card{background:white;border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:var(--sombra);
         text-align:left;padding:0;cursor:pointer;display:flex;flex-direction:column}
.jg-card:hover{border-color:var(--borde-tinte);box-shadow:0 4px 14px #27134d14}
.jg-card .jg-mini{display:block;width:100%;background:var(--pitch)}
.jg-card-pie{padding:11px 13px;display:flex;align-items:center;gap:8px}
.jg-card-pie p{margin:0;min-width:0;flex:1}
.jg-card-pie strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jg-card-pie small{display:block;font-size:9px;color:#928c9b;margin-top:2px}
.jg-card-pie .jg-del{border:0;background:none;color:#c9c4d2;font-size:15px;cursor:pointer;padding:4px;flex:none}
.jg-card-pie .jg-del:hover{color:var(--red)}
.jg-vacio{grid-column:1/-1;background:white;border:1px dashed #ddd9e5;border-radius:11px;
          padding:34px 22px;text-align:center;color:var(--muted)}
.jg-vacio b{display:block;font:800 15px Manrope;color:var(--ink);margin-bottom:6px}
.jg-vacio small{display:block;max-width:46ch;margin:0 auto;line-height:1.55;font-size:11px}

/* ---------- Editor ---------- */
.jg-editor{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--sombra)}
.jg-head{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line);flex-wrap:wrap}
/* Volver, como un botón y no como un enlace perdido en la esquina. Era la
   salida del editor y se leía como parte del título: quien entraba a dibujar
   una estación no encontraba la manera de deshacer el camino. */
.jg-volver{display:inline-flex;align-items:center;gap:8px;flex:none;
           border:1px solid var(--line);background:#fff;color:var(--ink);
           font:800 12px Manrope,sans-serif;cursor:pointer;padding:10px 15px;
           border-radius:9px;min-height:42px;white-space:nowrap;
           transition:background .15s,border-color .15s,color .15s}
.jg-volver:hover{background:var(--tinte-2);border-color:var(--borde-tinte);color:var(--purple)}
.jg-volver i{font-style:normal;font-size:16px;line-height:1;color:var(--purple)}
.jg-head input.jg-nombre{border:1px solid transparent;border-radius:7px;padding:7px 9px;font:800 15px Manrope;
                         color:var(--ink);min-width:0;flex:1;background:transparent}
.jg-head input.jg-nombre:hover{border-color:#e4e0ec}
.jg-head input.jg-nombre:focus{border-color:var(--purple);outline:0;background:white}
.jg-acciones{display:flex;gap:7px;flex-wrap:wrap}

/* Los tres grupos de la barra: Fichas, Material y Trazos. Existen porque con el
   material los botones pasaron de ocho a veinte, y en una fila de veinte iconos
   nadie encuentra el cono. */
/* Mismas pestañas que el resto de la app (ver .tactic-tab en styles.css): barra
   blanca elevada sobre la banda clara, la activa rellena en morado. Antes eran
   texto con un fondo casi blanco encima de otro casi blanco, y con el editor a
   pantalla completa no se leían como pestañas sino como tres palabras sueltas
   encima de la barra de herramientas. */
.jg-grupos-wrap{background:var(--tinte-2);padding:12px 12px 0}
.jg-grupos{display:inline-flex;gap:5px;padding:6px;background:#fff;
           border:1px solid var(--line);border-radius:14px;box-shadow:var(--sombra);
           max-width:100%;overflow-x:auto}
.jg-grupo{flex:none;border:0;background:none;cursor:pointer;padding:12px 20px;border-radius:10px;
          font:800 13px Manrope,sans-serif;color:#6b6579;white-space:nowrap;
          transition:background .15s,color .15s,box-shadow .15s}
.jg-grupo:hover{color:var(--purple);background:var(--tinte-2)}
.jg-grupo.active{background:var(--purple);color:#fff;box-shadow:0 3px 10px #31098c45}

/* Barra de herramientas. Los botones son de 44px de alto porque esto se usa
   con el dedo sobre una tablet, de pie y en un campo. */
.jg-barra{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);
          flex-wrap:wrap;background:var(--tinte-2)}
.jg-tool{border:0;background:none;border-radius:7px;padding:10px 11px;min-height:44px;color:#746e7e;
         cursor:pointer;font-weight:700;font-size:11px;display:flex;align-items:center;gap:6px}
/* Qué hace la herramienta elegida, escrito debajo de la barra. Es la ÚNICA
   ayuda que se lee con el dedo: el `title` de un botón necesita un ratón encima,
   y en un móvil eso no pasa nunca. Hacía falta desde que el pase se cuenta con
   dos toques, que es un gesto que nadie adivina si no se lo cuentan. */
.jg-ayuda{margin:0;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--tinte-2);
          font-size:12px;line-height:1.35;color:#6f6a79}
.jg-ayuda b{color:var(--purple);font-weight:800}

.jg-tool:hover{background:var(--tinte);color:var(--purple)}
.jg-tool.active{background:var(--purple);color:white}
.jg-tool:disabled{color:#c3bfcd;cursor:default}
.jg-tool:disabled:hover{background:none;color:#c3bfcd}
.jg-tool i{font-style:normal;font-size:14px}
/* El balón del contador de balones: dice de qué va esa cuenta sin leer. */
.jg-icono{font-style:normal;font-size:13px}
/* La mano es común a los tres grupos y por eso va aparte, en blanco: no es una
   herramienta más de la pestaña que toque, es la de siempre. */
.jg-mano{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.jg-mano:hover{background:var(--tinte)}
.jg-mano.active{box-shadow:none}
/* Deshacer y Borrar quitan cosas del dibujo, así que se ven de lejos y en rojo:
   son las dos que no se pueden pulsar por error buscando la de al lado. */
.jg-tool.peligro{background:#fdecec;color:#a52a34;box-shadow:inset 0 0 0 1px #f3c9cc}
.jg-tool.peligro:hover{background:#f8dada;color:#8a2733}
.jg-tool.peligro.active{background:var(--red);color:#fff;box-shadow:none}
.jg-tool.peligro:disabled{background:#f3f1f6;color:#c3bfcd;box-shadow:inset 0 0 0 1px #e6e2ee}
.jg-tool.peligro:disabled:hover{background:#f3f1f6;color:#c3bfcd}
.jg-sep{height:24px;border-left:1px solid #e2dfe9;margin:0 3px}
.jg-barra select{border:1px solid #dedbe5;border-radius:7px;padding:9px;min-height:44px;
                 font-weight:700;color:var(--purple);background:white}
/* Los ＋/− de cuántas fichas hay. Estrechos y sin rótulo: van pegados a su
   número, que es el que dice de qué equipo son. */
.jg-mini-tool{padding:10px 8px;min-width:34px;justify-content:center}
.jg-cuenta{font-size:9px;font-weight:700;color:#8c8698;letter-spacing:.06em;margin-left:4px}
.jg-cuenta b{color:var(--ink);font-size:12px;margin-left:3px}
.jg-color{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;color:#8c8698;letter-spacing:.06em}
.jg-color input{width:34px;height:30px;border:1px solid #dedbe5;border-radius:5px;background:none;padding:2px;cursor:pointer}

/* El campo. touch-action:none es lo que impide que arrastrar una ficha
   desplace la página o seleccione texto en la tablet. */
.jg-campo-wrap{background:#e9e6ed;padding:14px;display:flex;justify-content:center}
/* El alto manda sobre el ancho a propósito. El campo completo es muy vertical
   y, dejándolo crecer a sus anchas, en un portátil la tira de fotogramas caía
   por debajo del borde de la pantalla: el entrenador tenía que hacer scroll
   entre dibujar y cambiar de fotograma, que son las dos cosas que más se
   alternan. Con la altura acotada, editor completo sin desplazar. */
.jg-lienzo{height:clamp(320px,calc(100vh - 330px),860px);max-width:min(100%,620px);
           aspect-ratio:var(--ar,.7);margin:auto}
.jg-campo{display:block;width:100%;height:100%;background:var(--pitch);touch-action:none;
          user-select:none;-webkit-user-select:none;box-shadow:0 14px 30px #0b2c1e3d,0 2px 7px #0b2c1e26;border-radius:3px}
/* La caja del 3D ocupa el mismo hueco que el lienzo y con la misma proporción,
   así que encender y apagar el 3D no da el salto de la página. */
/* APAISADA, al revés que el lienzo 2D. El campo visto en perspectiva desde
   detrás de la portería se proyecta como un trapecio ancho y bajo: metido en
   una caja vertical como la del 2D, tocaba los lados y dejaba dos franjas
   enormes de gris arriba y abajo. Con la caja tumbada el campo llena, que es
   justo lo que se pedía. */
.jg-3d{width:min(100%,980px);max-height:calc(100vh - 300px);
       aspect-ratio:1.5;margin:auto;position:relative;overflow:hidden;
       border-radius:3px;box-shadow:0 14px 30px #0b2c1e3d,0 2px 7px #0b2c1e26;
       /* Blanco a propósito, NO el gris del fondo de la escena 3D: con el mismo
          color, una caja vacía y un 3D funcionando se veían idénticos y no había
          forma de saber si estaba cargando, roto o bien. */
       background:#0b2a4a;display:grid;place-items:center}
.jg-3d[hidden]{display:none}
.jg-3d canvas{display:block;width:100%;height:100%}
.jg-campo.dibujando{cursor:crosshair}
/* La manita: abierta sobre la ficha, cerrada mientras se arrastra. Es la señal
   de "esto se coge" que todo el mundo conoce, y la única pista que hay en un
   ratón de que las fichas se mueven pero las líneas del campo no. */
.jg-ficha{cursor:grab}
.jg-ficha:active{cursor:grabbing}
.jg-campo.marcando .jg-ficha{cursor:pointer}
.jg-campo.reproduciendo .jg-ficha{cursor:default}

/* Latido del jugador marcado. Solo el halo late; el círculo y el dorsal se
   quedan quietos para que el dorsal siga siendo legible. */
.jg-halo{transform-box:fill-box;transform-origin:center;animation:jgLatido 1.8s ease-in-out infinite}
@keyframes jgLatido{
  0%,100%{transform:scale(1);opacity:.95}
  50%{transform:scale(1.13);opacity:.55}
}
@media(prefers-reduced-motion:reduce){.jg-halo{animation:none}}

/* A quién se le va a dar el balón. Se enciende mientras se arrastra el balón por
   encima de un jugador y dice, antes de soltar, que al soltarlo ahí se lo queda
   él y lo llevará pegado al pie. Sin esta señal, que el balón se pegue o se
   quede suelto parecería cosa del azar. */
.jg-recibe circle:not(.jg-halo){stroke:#f6c344;stroke-width:7}

/* Quién está dando el pase. Se enciende con el primer toque y dice que el pase
   está a medias: el toque siguiente elige a quién va. Late, para que no se
   confunda con el aro fijo del jugador marcado y para que un pase empezado sin
   querer se vea y se pueda cancelar volviendo a tocarlo. */
.jg-pasa circle:not(.jg-halo){stroke:#f6c344;stroke-width:7;animation:jgPasa 1.2s ease-in-out infinite}
/* Late el COLOR y no el tamaño: jgLatido escala, y escalar necesita el
   transform-box y el origen que lleva el halo. Sobre el círculo de la ficha, que
   no los tiene, escalaría desde la esquina del SVG y la ficha saldría volando. */
@keyframes jgPasa{
  0%,100%{stroke-opacity:1}
  50%{stroke-opacity:.35}
}
@media(prefers-reduced-motion:reduce){.jg-pasa circle:not(.jg-halo){animation:none}}

/* ---------- Tira de fotogramas ---------- */
.jg-tira{display:flex;align-items:center;gap:9px;padding:12px;border-top:1px solid var(--line);overflow-x:auto}
.jg-fot{border:2px solid var(--line);border-radius:8px;background:white;padding:0;cursor:pointer;
        flex:none;width:92px;overflow:hidden;position:relative}
.jg-fot.active{border-color:var(--purple);box-shadow:0 0 0 3px #31098c1f}
.jg-fot svg{display:block;width:100%;background:var(--pitch)}
.jg-fot b{display:block;font-size:9px;font-weight:800;color:#746e7e;padding:4px}
.jg-fot.active b{color:var(--purple)}
.jg-mas{border:1px dashed #cdc7da;background:white;border-radius:8px;flex:none;min-height:60px;padding:0 15px;
        color:var(--purple);font-weight:800;font-size:12px;cursor:pointer}
.jg-mas:disabled{color:#bdb8c7;border-color:#e6e2ee;cursor:default}
.jg-fot-ops{display:flex;gap:4px;padding:0 4px 5px;justify-content:center}
.jg-fot-ops button{border:0;background:var(--tinte);color:#6b6479;border-radius:5px;font-size:10px;
                   line-height:1;padding:5px 6px;cursor:pointer}
.jg-fot-ops button:hover{background:var(--purple);color:white}
.jg-fot-ops button:disabled{opacity:.35;cursor:default}
.jg-fot-ops button.del:hover{background:var(--red)}

.jg-pie{display:flex;align-items:center;gap:9px;padding:11px 14px;border-top:1px solid var(--line);
        background:var(--tinte-2);flex-wrap:wrap}
.jg-pie .helper{margin:0;flex:1;min-width:160px}

@media(max-width:680px){
  .jg-campo-wrap{padding:7px}
  /* Los siete rótulos no caben, así que se esconden y quedan los iconos. Pero el
     ELEGIDO sí dice cómo se llama: es lo que ata el nombre al dibujito, y sin eso
     la barra del móvil es una fila de siete símbolos que hay que adivinar. */
  .jg-tool span{display:none}
  .jg-tool.active span{display:inline}
  .jg-tool{padding:10px}
  .jg-head input.jg-nombre{flex-basis:100%;order:-1}
}

/* ---------- Catálogo de jugadas prediseñadas ----------
   Reutiliza `.jg-card` del listado a propósito: es la misma cosa vista antes de
   ser tuya, y darle otra tarjeta habría dejado dos diseños que mantener. Lo
   único propio es que aquí la tarjeta lleva botón y el resumen puede ocupar
   varias líneas, que en el listado se recorta a una. */
.jg-base-intro{margin:0 0 14px;font-size:12px;color:#6f6a79;max-width:70ch}
.jg-base .jg-card-pie small{white-space:normal;font-size:10px;line-height:1.45}
.jg-base .jg-base-usar{margin:0 13px 13px;width:calc(100% - 26px);padding:8px}
.jg-base-vacio{grid-column:1/-1;color:#6f6a79;font-size:13px;margin:0}
/* La barra de filtros del catálogo. Copia la forma de la de ejercicios —búsqueda
   ancha, dos desplegables y un «Limpiar»— porque es la misma faena y el
   entrenador ya sabe usarla. */
.jg-base-filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-bottom:16px}
.jg-base-filtros .search{height:34px;flex:1 1 150px;min-width:0}
.jg-base-filtros label{display:flex;flex-direction:column;gap:3px;font-size:9px;font-weight:700;color:#6f6a79}
.jg-base-filtros select{border:1px solid var(--line);border-radius:8px;background:white;padding:7px 9px;font:inherit;font-size:11px}
.jg-base-limpiar{border:0;background:none;color:var(--purple);font-weight:700;font-size:10px;cursor:pointer;padding:9px 2px}
.jg-base-total{font-size:10px;color:#928c9b;margin-left:auto;padding-bottom:9px}
/* El rótulo del grupo es lo que hace hojeable un catálogo largo: se busca «qué
   tengo de córners», no «una jugada». El número al lado evita abrir un grupo
   para ver que tiene una. */
.jg-base-grupo{margin-bottom:18px}
.jg-base-grupo h3{display:flex;align-items:center;gap:7px;margin:0 0 9px;
                  font:800 12px Manrope;color:var(--ink);text-transform:uppercase;letter-spacing:.6px}
.jg-base-grupo h3 span{background:var(--tinte);color:var(--purple);border-radius:9px;
                       padding:2px 7px;font-size:9px;letter-spacing:0}
.jg-base-edad{display:block;font-size:9px;font-style:normal;color:var(--purple);font-weight:700;margin-top:2px}
/* Este diálogo es más ancho que los demás a propósito: los otros son un
   formulario de ocho campos y este es un catálogo que se hojea. Con los 580 px
   de serie entraba UNA tarjeta por fila, y treinta jugadas eran treinta
   pantallas de scroll. */
#jgBaseDlg{width:min(880px,calc(100% - 24px))}
#jgBaseLista .jg-lista{grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:11px}
#jgBaseLista .jg-card-pie{padding:9px 11px}
#jgBaseLista .jg-card-pie small{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Ver una jugada antes de quedársela ----------
   El campo va grande: se entra aquí justamente a mirarla, y en la miniatura de
   la tarjeta no se distingue quién va a dónde. */
.jg-ver-campo svg{display:block;width:100%;height:auto;background:var(--pitch);border-radius:10px}
/* La caja del 3D dentro del visor. Hereda la forma de .jg-3d pero con su propio
   tope de alto: aquí vive dentro de un <dialog> que ya tiene cabecera, barra y
   pie, y con el tope del editor se salía por abajo en un portátil. */
.jg-ver-3d{width:100%;max-height:calc(100vh - 340px);aspect-ratio:1.5;margin:auto;
  position:relative;overflow:hidden;border-radius:10px;background:#0b2a4a;
  display:grid;place-items:center}
.jg-ver-3d[hidden]{display:none}
.jg-ver-3d canvas{display:block;width:100%;height:100%}
/* El botón de la acción se esconde cuando quien abre el visor no da ninguna.
   Con !important porque los botones del pie se pintan con display propio y
   `hidden` a secas se queda corto. */
#jgVerUsar[hidden]{display:none!important}
/* Y el de reproducir cuando el dibujo es uno solo y no hay nada que animar. Con
   !important por lo mismo: la barra reparte a sus botones con display propio. */
#jgVerPlay[hidden]{display:none!important}
.jg-ver-barra{display:flex;align-items:center;gap:11px;margin-top:11px}
/* Los botones de la barra, en una línea. «◲ Ver en 3D» se partía en dos y
   dejaba la barra con un botón el doble de alto que el de al lado. */
.jg-ver-barra .btn{white-space:nowrap}
.jg-ver-datos{font-size:10px;color:#928c9b}
.jg-ver-notas{margin:12px 0 0;font-size:12px;line-height:1.6;color:#57525f}

/* ---------- El 3D del visor, a pantalla completa ----------
   Dentro del diálogo el campo 3D se quedaba en cuatro dedos: por delante iban
   la cabecera, la barra, las notas y el pie, y en el móvil eso es casi toda la
   pantalla. Un entrenador que pulsa «Ver en 3D» viene a MIRAR, así que el
   diálogo se convierte en la pantalla entera y se queda solo lo que hace falta
   para eso: el campo, la botonera de cámaras —que es de vista3d.js y va dentro
   de la caja— y, justo encima de ella, la barra de Reproducir / Salir del 3D.
   La explicación del ejercicio no desaparece: vuelve al salir del 3D. */
#jgVerDlg.jg-3d-full{width:100%;max-width:none;height:100%;height:100dvh;
  max-height:none;margin:0;border-radius:0;background:#0b2a4a}
#jgVerDlg.jg-3d-full[open]{max-height:none}
#jgVerDlg.jg-3d-full .modal-head,
#jgVerDlg.jg-3d-full .modal-actions,
#jgVerDlg.jg-3d-full #jgVerNotas,
#jgVerDlg.jg-3d-full #jgVerDatos{display:none}
/* Columna flex y no altura en porcentaje: el alto del diálogo lo reparte el
   flex, y un height:100% aquí dependería de que el padre lo tuviera resuelto.
   position:relative porque la barra y el rótulo se cuelgan de ESTA caja: son
   hermanos del 3D y no hijos suyos, que es lo que los mantiene vivos cuando
   vista3d.js vacía la suya. */
#jgVerDlg.jg-3d-full .modal-scroll{padding:0;overflow:hidden;position:relative;
  display:flex;flex-direction:column;min-height:0}
#jgVerDlg.jg-3d-full .jg-ver-3d{flex:1 1 auto;min-height:0;width:100%;height:auto;
  max-height:none;aspect-ratio:auto;border-radius:0}
/* La barra flota SOBRE el campo y ABAJO, pegada a la botonera de cámaras: las
   dos cosas que se tocan mientras se mira el 3D, juntas y donde llega el
   pulgar. Arriba estuvo un día y fue un error: el botón de salir es lo que hay
   que encontrar sin buscar. Los 52 px son el alto de la botonera de cámaras
   (styles.css) más un dedo de aire. */
#jgVerDlg.jg-3d-full .jg-ver-barra{position:absolute;z-index:4;margin:0;gap:9px;
  left:9px;right:9px;bottom:calc(52px + env(safe-area-inset-bottom));
  justify-content:center;align-items:center;pointer-events:none}
#jgVerDlg.jg-3d-full .jg-ver-barra .btn{pointer-events:auto;padding:9px 14px;
  font-size:12px;box-shadow:0 2px 10px #02120b59}
/* El de salir, relleno y en el morado de marca: es LA salida de una pantalla
   que lo ocupa todo, no un botón más de una fila de botones blancos. Morado y
   no el azul marino de la app porque el cielo del 3D ES azul marino y el botón
   se perdía dentro; contra el césped y contra el cielo, el morado se ve. */
#jgVerDlg.jg-3d-full #jgVer3dBtn{background:var(--purple);border-color:transparent;
  color:#fff}
/* La botonera de cámaras es de vista3d.js y está pegada al borde de abajo: en
   pantalla completa ese borde es el del teléfono, con su barra de gestos. */
#jgVerDlg.jg-3d-full .p3d-camaras{bottom:calc(10px + env(safe-area-inset-bottom))}
/* El nombre del ejercicio, arriba y sin fondo: es un rótulo, no un botón, y
   arriba no le quita sitio a nada. */
.jg-3d-full-titulo{display:none}
#jgVerDlg.jg-3d-full .jg-3d-full-titulo{display:block;position:absolute;z-index:4;
  left:12px;right:12px;top:calc(10px + env(safe-area-inset-top));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;
  color:#fff;font:800 13px Manrope;text-shadow:0 1px 8px #02120bd9}
@media(max-width:680px){
  #jgVerDlg.jg-3d-full .jg-ver-barra{bottom:calc(46px + env(safe-area-inset-bottom));gap:7px}
  #jgVerDlg.jg-3d-full .jg-ver-barra .btn{padding:9px 12px;font-size:11px}
}

/* Los dos botones de la tarjeta, a lo ancho y en la misma fila. «Ver» primero
   porque es el que no tiene consecuencias. */
.jg-base-botones{display:flex;gap:7px;margin:0 11px}
.jg-base-botones .btn{flex:1;padding:7px;font-size:10px}
.jg-base-fots{display:block;padding:6px 11px 10px;font-size:9px;color:#a8a2b1}