/* Txedep · Entrenamientos. Sobre el lenguaje de txedep.css: sus variables, sus radios y sus tamaños. Los colores propios
   (el césped y los del diseñador) salen de :root; cada regla usa variables (lo vigila tests/test_txedep_entrenamientos.py). */

:root {
  --ent-cesped: #2f7d4a; --ent-raya: #ffffff; --ent-tinta: #141414; --ent-blanco: #ffffff;
  --ent-rojo: #d13b3b; --ent-azul: #1f6fd1; --ent-amarillo: #f2c200; --ent-negro: #141414; --ent-naranja: #f08a24; --ent-verde: #1f9d55;
  --ent-sel: #ffd400; --ent-zona: hsl(0 0% 100% / .18);
}
@media (prefers-color-scheme: dark) {
  :root { --ent-cesped: #245f39; --ent-negro: #2b2b2b; }
}

.ent-oculto { display: none; }
.ent-crece { flex: 1 1 220px; min-width: 0; max-width: 100%; }
.ent-minutos { width: 84px; }
.ent-unidad { width: 96px; }
.ent-valor { width: 96px; }
.ent-goles { width: 72px; }
.ent-bloque { display: block; }
.ent-solo-m { display: none; }
.ent-gris { color: var(--texto-2); }

/* ── semana ── */
.ent-filtros { align-items: flex-end; }
.ent-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e-2); align-items: start; }
.ent-dia { display: grid; gap: var(--e-2); padding: var(--e-3); border-radius: var(--r-campo); background: var(--bandeja); min-height: 160px; align-content: start; min-width: 0; }
.ent-dia--hoy { box-shadow: inset 0 0 0 1.5px var(--foco); }
.ent-dia__titulo { font-size: var(--t-13); font-weight: var(--p-titulo); display: flex; gap: var(--e-1); align-items: center; }
.ent-hoy { font-size: var(--t-11); font-weight: var(--p-rotulo); color: var(--sobre-accion); background: var(--accion); border-radius: var(--r-control); padding: 1px var(--e-2); }
.ent-partido { font-size: var(--t-12); font-weight: var(--p-rotulo); color: var(--aviso-texto); background: var(--aviso-fondo); border-radius: var(--r-chip); padding: 2px var(--e-2); }
.ent-plan { font-size: var(--t-12); color: var(--texto-2); }
.ent-sesion { display: grid; gap: var(--e-1); padding: var(--e-3); border-radius: var(--r-campo); background: var(--superficie); box-shadow: 0 0 0 1px var(--linea); text-decoration: none; font-size: var(--t-13); min-width: 0; overflow-wrap: anywhere; transition: box-shadow var(--dur) var(--curva); }
.ent-sesion:hover { box-shadow: 0 0 0 1px var(--borde-fuerte); }
.ent-sesion__cabeza { font-weight: var(--p-titulo); }
.ent-sesion__tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ent-sesion__tareas li { display: flex; justify-content: space-between; gap: var(--e-2); font-size: var(--t-12); }
.ent-sesion__tareas li span:last-child { white-space: nowrap; flex: none; }
.ent-anadir { width: 100%; justify-content: flex-start; color: var(--texto-2); }

/* ── sesión y tareas ── */
.ent-tareas { list-style: none; margin: 0; padding: 0; counter-reset: tarea; display: grid; }
.ent-tarea { display: flex; gap: var(--e-3); padding: var(--e-3) 0; box-shadow: inset 0 1px 0 var(--linea); align-items: flex-start; counter-increment: tarea; }
.ent-tarea::before { content: counter(tarea); font-size: var(--t-12); font-weight: var(--p-cifra); color: var(--texto-2); min-width: 18px; padding-top: var(--e-2); font-variant-numeric: tabular-nums; }
.ent-tarea > div, .ent-tarea__form { flex: 1; min-width: 0; display: grid; gap: var(--e-2); }
.ent-tarea__fila { display: flex; gap: var(--e-2); align-items: center; }
.ent-tarea__nombre { flex: 1; }
.ent-tarea__acciones { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.ent-tarea__dibujo { width: 120px; flex: none; border-radius: var(--r-chip); overflow: hidden; display: block; }

/* ── planificación mensual ── */
.ent-mes { display: grid; gap: var(--e-2); }
.ent-mes__cabeza, .ent-mes__semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e-2); }
.ent-mes__cabeza span { font-size: var(--t-12); font-weight: var(--p-rotulo); color: var(--texto-2); padding-left: var(--e-2); }
.ent-mes__ciclo { font-size: var(--t-12); color: var(--texto-2); margin-top: var(--e-2); }
.ent-mes__dia { display: grid; gap: var(--e-1); padding: var(--e-2); border-radius: var(--r-campo); background: var(--bandeja); min-width: 0; }
.ent-mes__num { font-size: var(--t-12); font-weight: var(--p-titulo); }
.ent-mes__dia textarea { width: 100%; min-height: 72px; resize: vertical; border: 0; border-radius: var(--r-chip); padding: var(--e-1) var(--e-2); background: var(--superficie); color: var(--texto); font: var(--p-texto) var(--t-12)/1.35 var(--letra); }
.ent-mes__dia textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--foco); }
.ent-mes__fuera { border-radius: var(--r-campo); }

/* ── fichas con dibujo (ejercicios, diseñador y pizarra) ── */
.ent-fichas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-4); }
.ent-ficha { padding: 0; overflow: hidden; gap: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.ent-ficha__imagen { grid-column: 1 / -1; display: block; text-decoration: none; aspect-ratio: 1050 / 680; background: var(--bandeja); overflow: hidden; }
.ent-ficha__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ent-ficha__vacia { display: grid; place-items: center; height: 100%; color: var(--texto-2); font-size: var(--t-13); }
.ent-ficha__texto { display: grid; gap: 2px; padding: var(--e-3) var(--e-4) var(--e-4); min-width: 0; }
.ent-ficha__texto .nombre { font-weight: var(--p-rotulo); text-decoration: none; overflow-wrap: anywhere; }
.ent-ficha__texto .nombre:hover { text-decoration: underline; }
.ent-ficha__acciones { display: flex; padding: var(--e-2) var(--e-2) 0 0; }
.ent-marca { color: var(--texto-2); font-weight: var(--p-cifra); }
.ent-marca--si { background-color: var(--accion); color: var(--sobre-accion); }
.ent-marca--si:hover { background-color: var(--accion-hover); color: var(--sobre-accion); }
.ent-favorito { color: var(--texto-4); font-size: var(--t-16); }
.ent-favorito--si { color: var(--v-descartar); }
.ent-grande { border-radius: var(--r-campo); overflow: hidden; }
.ent-imagen { max-width: 100%; border-radius: var(--r-campo); display: block; }

/* ── el dibujo (SVG): los colores de la hoja mandan sobre los del archivo descargable ── */
.ent-dibujo { display: block; width: 100%; height: auto; }
.ent-cesped { fill: var(--ent-cesped); }
.ent-raya { stroke: var(--ent-raya); }
.ent-punto, .ent-flecha { fill: var(--ent-raya); }
.ent-c-rojo { fill: var(--ent-rojo); } .ent-c-azul { fill: var(--ent-azul); } .ent-c-amarillo { fill: var(--ent-amarillo); }
.ent-c-blanco { fill: var(--ent-blanco); } .ent-c-negro { fill: var(--ent-negro); } .ent-c-naranja { fill: var(--ent-naranja); }
.ent-c-verde { fill: var(--ent-verde); }
.ent-el circle, .ent-el polygon, .ent-pica, .ent-valla { stroke: var(--ent-tinta); stroke-width: 2; }
.ent-dorsal { fill: var(--ent-blanco); font: 700 17px var(--letra); pointer-events: none; }
.ent-dorsal--oscuro { fill: var(--ent-tinta); }
.ent-balon { fill: var(--ent-blanco); }
.ent-pica { fill: var(--ent-amarillo); }
.ent-valla { fill: var(--ent-naranja); }
.ent-porteria { fill: var(--ent-zona); stroke: var(--ent-raya) !important; stroke-width: 4 !important; }
.ent-texto { fill: var(--ent-blanco); font: 600 26px var(--letra); paint-order: stroke; stroke: var(--ent-tinta); stroke-width: 3px; }
.ent-linea { stroke: var(--ent-raya); stroke-width: 4; stroke-linecap: round; }
.ent-linea--movimiento { stroke-dasharray: 14 10; }
.ent-linea--conduccion { stroke-dasharray: 3 7; }
.ent-linea-toque { stroke: transparent; stroke-width: 22; }
.ent-trazo-libre { stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ent-s-rojo { stroke: var(--ent-rojo); } .ent-s-azul { stroke: var(--ent-azul); } .ent-s-amarillo { stroke: var(--ent-amarillo); }
.ent-s-blanco { stroke: var(--ent-blanco); } .ent-s-negro { stroke: var(--ent-negro); } .ent-s-naranja { stroke: var(--ent-naranja); }
.ent-s-verde { stroke: var(--ent-verde); }
.ent-sel .ent-trazo-libre { stroke: var(--ent-sel); }
.ent-icono--lapiz { border-radius: 0; height: 2px; transform: rotate(-30deg); }
.ent-zona { fill: var(--ent-zona); stroke: var(--ent-raya); stroke-width: 2; stroke-dasharray: 8 6; }

/* ── el editor ── */
.ent-editor { display: grid; gap: var(--e-3); }
.ent-herramientas { display: grid; gap: var(--e-3); position: sticky; top: 60px; z-index: 4; background: var(--fondo); padding: var(--e-2) 0; box-shadow: 0 1px 0 var(--linea); }
.ent-herramientas[hidden], .ent-fases[hidden], .ent-herramientas__grupo[hidden] { display: none; }
.ent-pestanas { display: flex; flex-wrap: wrap; gap: var(--e-1); box-shadow: inset 0 -1px 0 var(--linea); }
.ent-pestana { border: 0; background: none; color: var(--texto-2); font: var(--p-rotulo) var(--t-13)/1 var(--letra); padding: var(--e-2) var(--e-3); cursor: pointer; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.ent-pestana:hover { color: var(--texto); }
.ent-pestana[aria-selected="true"] { color: var(--texto); box-shadow: inset 0 -2px 0 var(--accion); }
.ent-herramientas__grupo { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: flex-end; }
.ent-herramienta { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--e-3); border: 0; border-radius: var(--r-control); background-color: var(--bandeja); color: var(--texto-2); font: var(--p-rotulo) var(--t-13)/1 var(--letra); cursor: pointer; transition: background-color var(--dur) var(--curva), color var(--dur) var(--curva); }
.ent-herramienta:hover { background-color: var(--bandeja-hover); color: var(--texto); }
.ent-herramienta[aria-pressed="true"] { background-color: var(--accion); color: var(--sobre-accion); }
.ent-icono { width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
.ent-icono--cono { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ent-icono--pica, .ent-icono--valla, .ent-icono--porteria { border-radius: 2px; width: 6px; }
.ent-icono--valla { width: 12px; height: 5px; }
.ent-icono--pase, .ent-icono--movimiento, .ent-icono--conduccion { border-radius: 0; height: 2px; }
.ent-icono--movimiento { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }
.ent-icono--conduccion { background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); }
.ent-icono--texto { border-radius: 0; background: none; box-shadow: inset 0 -2px 0 currentColor; }
.ent-icono--zona { border-radius: 2px; background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.ent-icono--mover { border-radius: 0; background: none; box-shadow: inset 2px 2px 0 currentColor; }
.ent-etiqueta { width: 120px; }
.ent-color { width: 64px; }
.campo.ent-color input[type="color"][data-color] { width: 64px; padding: 4px; cursor: pointer; }
.ent-lienzo-caja { border-radius: var(--r-campo); overflow: hidden; box-shadow: 0 0 0 1px var(--linea); }
.ent-lienzo { touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.ent-lienzo--mover { cursor: grab; }
.ent-lienzo:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.ent-sel > :first-child, rect.ent-sel { stroke: var(--ent-sel) !important; stroke-width: 4 !important; }
.ent-sel .ent-linea { stroke: var(--ent-sel); }
.ent-fases { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: space-between; }
.ent-fases__lista, .ent-fases__acciones { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.ent-fase { min-width: 32px; height: 32px; border: 0; border-radius: var(--r-control); background-color: var(--bandeja); color: var(--texto-2); font: var(--p-cifra) var(--t-13)/1 var(--letra); cursor: pointer; font-variant-numeric: tabular-nums; }
.ent-fase:hover { background-color: var(--bandeja-hover); }
.ent-fase[aria-pressed="true"] { background-color: var(--accion); color: var(--sobre-accion); }

/* ── estadística ── */
.ent-barras__col { width: 40%; }
.ent-barra { display: block; width: 100%; height: 10px; }
.ent-barra rect { fill: var(--texto); }

/* ── partidos externos ── */
.ent-marcador { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px minmax(0, 1fr); gap: var(--e-3); align-items: end; }
.ent-lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }

/* ── pruebas ── */
.ent-desliza { overflow-x: auto; }
.ent-pruebas td { white-space: nowrap; }
.ent-control { display: flex; gap: var(--e-2); }
.ent-media td { color: var(--texto-2); font-weight: var(--p-rotulo); }
.ent-evol { width: 120px; height: 32px; display: block; }
.ent-evol polyline { stroke: var(--texto-2); }
.ent-evol--sube polyline { stroke: var(--v-fichar); }
.ent-evol--baja polyline { stroke: var(--v-descartar); }
.ent-prueba-def + .ent-prueba-def { padding-top: var(--e-3); box-shadow: inset 0 1px 0 var(--linea); }

/* ── tableta y teléfono ── */
@media (max-width: 1100px) {
  .ent-semana { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .ent-dia { min-height: 0; }
}
@media (max-width: 760px) {
  .ent-mes__cabeza, .ent-mes__fuera { display: none; }
  .ent-mes__semana { grid-template-columns: minmax(0, 1fr); }
  .ent-solo-m { display: inline; }
  .ent-lados { grid-template-columns: minmax(0, 1fr); }
  .ent-marcador { grid-template-columns: minmax(0, 1fr) 72px; }
  .ent-marcador .ent-goles:nth-of-type(3) { grid-row: 2; grid-column: 2; }
  .ent-marcador > :nth-child(4) { grid-row: 2; grid-column: 1; }
}
@media (max-width: 600px) {
  .ent-semana { grid-template-columns: minmax(0, 1fr); }
  .ent-tarea { flex-wrap: wrap; }
  .ent-tarea__dibujo { width: 96px; }
  .ent-herramientas { position: static; }
  .ent-control { flex-direction: column; }
  .ent-barras__col { width: 30%; }
}

@media print {
  .ent-filtros, .ent-anadir, .ent-herramientas, .ent-fases { display: none !important; }
  .ent-semana { grid-template-columns: repeat(7, 1fr); }
}