/* Portal de entrenadores · hoja única.
 *
 * El motor es el del administrativo (variables, dos temas, todo en rem para
 * que la escala de accesibilidad funcione), pero la DIRECCIÓN es otra, y sale
 * de dónde se usa: de pie en la sala, con el teléfono en una mano, entre
 * serie y serie. De ahí: navegación abajo (zona del pulgar), objetivos de
 * 48 px, y un punto más de tamaño de letra que en el administrativo, que se
 * usa sentado y de cerca.
 *
 * ORDEN DEL FICHERO (importa): tokens, base, componentes, estados, pantallas,
 * y al final lo responsive y la impresión. A igual especificidad gana la
 * última regla, así que lo que debe ganar va después.
 */

:root {
  --escala: 1;
  --peso-texto: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;

  /* --- Tema claro. Los MISMOS valores del administrativo (Adrián, 05/10:
         «usa la misma identidad visual que la aplicación administrativa»).
         Allí el acento es TINTA, no un color: el color solo se usa cuando
         significa algo (verde entra, terracota sale). Aquí no hay dinero,
         así que el verde y el terracota se reaprovechan para «al día» y
         «vencido», que es lo que hay que mirar. --- */
  --papel: #f2f2f2;
  --papel-carta: #ffffff;
  --tinta: #121212;          /* texto principal              18,73:1 */
  --tinta-suave: #595959;    /* texto secundario              7,00:1 */
  --linea: #e2e2e2;
  --linea-fuerte: #c2c2c2;

  --acento: #121212;         /* acciones y selección: tinta, no color */
  --acento-fuerte: #000000;
  --acento-tenue: #ebebeb;
  --acento-tinta: #ffffff;   /* texto encima del acento      18,73:1 */

  --alerta: #b4432a;         /* lo que administración tiene que mirar  5,56:1 */
  --alerta-tenue: #f7e6e1;
  --aviso: #3d3d3d;          /* pendiente, sin urgencia      10,86:1 */
  --aviso-tenue: #ededed;
  --bien: #0a5238;           /* al día                        9,22:1 */
  --bien-tenue: #e2efe8;

  /* La navegación, igual que la barra lateral del administrativo. */
  --barra: #0a0a0a;
  --barra-texto: #b0b0b0;    /* sobre --barra                 9,13:1 */
  --barra-activo: #1f1f1f;
  --barra-acento: #ffffff;   /* sección actual, como allí: blanco */

  --foco: #121212;
  --radio: 10px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05);
  /* 48 px: lo pulsa un pulgar de pie, no un ratón sentado. Esto NO se copia
     del administrativo: allí se usa sentado y de cerca. */
  --toque: 3rem;
}

:root[data-tema="oscuro"] {
  --papel: #0e0e0e;
  --papel-carta: #1a1a1a;
  --tinta: #ededed;
  --tinta-suave: #a8a8a8;
  --linea: #2e2e2e;
  --linea-fuerte: #454545;

  --acento: #ffffff;
  --acento-fuerte: #ffffff;
  --acento-tenue: #262626;
  --acento-tinta: #121212;

  --alerta: #e8836a;         /* el rojo se aclara: el de claro da 2,4:1 aquí */
  --alerta-tenue: #3a201a;
  --aviso: #d0d0d0;
  --aviso-tenue: #2a2a2a;
  --bien: #4ecb94;
  --bien-tenue: #12301f;

  --barra: #050505;
  --barra-texto: #a8a8a8;
  --barra-activo: #202020;
  --barra-acento: #ffffff;

  --foco: #ffffff;
  --sombra: none;
}

:root[data-letra="gruesa"] {
  --peso-texto: 500;
  --peso-medio: 600;
  --peso-fuerte: 700;
}

* { box-sizing: border-box; }

html {
  /* 106,25 %: un punto por encima del administrativo. Se lee de pie, a
     distancia de brazo y con la luz de la sala. */
  font-size: calc(17px * var(--escala));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: var(--peso-texto);
  line-height: 1.5;
  /* Una sola familia para todo: títulos, botones, etiquetas y datos. */
}

/* Escala de 1,2 entre pasos: hay muchos elementos de texto y un contraste
   exagerado solo hace ruido. Fija en rem, no fluida. */
h1 { font-size: 1.44rem; font-weight: var(--peso-fuerte); margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.2rem;  font-weight: var(--peso-fuerte); margin: 0; }
h3 { font-size: 1rem;    font-weight: var(--peso-fuerte); margin: 0; }
p  { margin: 0 0 .75rem; }

.sutil { color: var(--tinta-suave); font-size: .875rem; }
.oculto-accesible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Foco: uno solo para todo lo que se puede enfocar ------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

/* --- Botones ------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--toque);
  padding: 0 1.1rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--papel-carta);
  color: var(--tinta);
  font: inherit;
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.boton:hover { background: var(--acento-tenue); border-color: var(--acento); }
.boton:active { transform: translateY(1px); }

.boton-primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-tinta);
}
.boton-primario:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

/* Deshabilitado y cargando: los dos estados que casi nadie dibuja y que son
   los que más se ven cuando algo va mal. */
.boton[disabled], .boton[aria-busy="true"] { cursor: not-allowed; opacity: .55; }
.boton[disabled]:hover, .boton[aria-busy="true"]:hover {
  background: var(--papel-carta); border-color: var(--linea-fuerte);
}
.boton-primario[disabled]:hover, .boton-primario[aria-busy="true"]:hover {
  background: var(--acento); border-color: var(--acento);
}
.boton[aria-busy="true"]::before {
  content: ""; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girando .7s linear infinite;
}
@keyframes girando { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .boton[aria-busy="true"]::before { animation-duration: 2.5s; }
  * { transition-duration: .01ms !important; }
}

/* --- Campos ------------------------------------------------------------- */
.campo { display: block; margin-bottom: 1rem; }
.campo > span {
  display: block; margin-bottom: .35rem;
  font-size: .875rem; font-weight: var(--peso-medio); color: var(--tinta-suave);
}
.campo input, .campo textarea, .campo select {
  width: 100%;
  min-height: var(--toque);
  padding: .55rem .75rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--papel-carta);
  color: var(--tinta);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:hover, .campo textarea:hover { border-color: var(--acento); }
.campo input[aria-invalid="true"] { border-color: var(--alerta); }
.campo input[disabled] { background: var(--papel); color: var(--tinta-suave); cursor: not-allowed; }

/* --- Avisos ------------------------------------------------------------- */
.aviso {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .7rem .85rem;
  border-radius: var(--radio-chico);
  border-left: 3px solid var(--alerta);
  background: var(--alerta-tenue);
  color: var(--tinta);
  font-size: .9375rem;
}
.aviso[hidden] { display: none; }

/* --- Tarjeta ------------------------------------------------------------ */
.tarjeta {
  background: var(--papel-carta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
}

/* --- Pantalla de entrada ------------------------------------------------ */
.pantalla-acceso {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 1.5rem 1rem;
}
.caja-acceso { width: 100%; max-width: 23rem; }
.marca {
  display: flex; align-items: center; gap: .65rem;
  margin-bottom: 1.5rem;
}
/* La chapa trae su propio fondo negro, así que no lleva `background`: con
   el del acento detrás se vería un recuadro dentro de otro. */
.marca-icono {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radio-chico);
  flex-shrink: 0;
}
.marca-nombre { font-size: 1.2rem; font-weight: var(--peso-fuerte); line-height: 1.15; }
.marca-sub { font-size: .875rem; color: var(--tinta-suave); }

.pie-acceso { margin: 1.25rem 0 0; font-size: .875rem; color: var(--tinta-suave); }

/* --- Estructura de la aplicación --------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem;
  background: var(--papel-carta);
  border-bottom: 1px solid var(--linea);
}
/* El título se lleva el hueco sobrante para que el nombre de quien entró
   quede pegado a la derecha, como estaba antes de meter la chapa. */
.titulo-cabecera { flex: 1 1 auto; min-width: 0; }
.chapa-cabecera { width: 1.875rem; height: 1.875rem; border-radius: 6px; flex-shrink: 0; }

.contenido { padding: 1rem 1rem calc(var(--toque) + 2.5rem); }

/* Navegación: abajo y a lo ancho, que es donde llega el pulgar. */
.navegacion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--barra);
  padding-bottom: env(safe-area-inset-bottom);
}
.navegacion a {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-height: var(--toque);
  padding: .5rem .25rem;
  color: var(--barra-texto);
  text-decoration: none;
  font-size: .75rem;
  font-weight: var(--peso-medio);
}
.navegacion a[aria-current="page"] { color: var(--barra-acento); background: var(--barra-activo); }
.navegacion svg { width: 1.3rem; height: 1.3rem; }

/* --- Estado vacío: enseña qué hace la pantalla, no dice «no hay nada» --- */
.vacio {
  display: grid; gap: .5rem; justify-items: center; text-align: center;
  padding: 2.5rem 1rem;
  color: var(--tinta-suave);
}
.vacio strong { color: var(--tinta); font-size: 1.0625rem; }
.vacio p { max-width: 32ch; margin: 0; }

/* --- Alumnos ------------------------------------------------------------ */
.barra-acciones { margin-bottom: 1rem; }
.fila-botones { display: flex; gap: .6rem; flex-wrap: wrap; }

.tarjeta-alumno,
.tarjeta-conversacion {
  display: grid; gap: .35rem;
  margin-bottom: .75rem;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.tarjeta-alumno:hover,
.tarjeta-conversacion:hover { border-color: var(--acento); }
.tarjeta-alumno:active,
.tarjeta-conversacion:active { transform: translateY(1px); }
.alumno-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.alumno-cabecera strong { font-size: 1.0625rem; }
.ultima-nota {
  margin: .25rem 0 0;
  /* Dos líneas y corta: en la lista interesa recordar, no leerlo entero. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* El estado del plan dice lo que hay que hacer, y el color solo lo refuerza:
   quien no distinga los colores lo lee igual en el texto. */
.etiqueta {
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: var(--peso-medio);
  white-space: nowrap;
}
.etiqueta-bien { background: var(--bien-tenue); color: var(--bien); }
.etiqueta-aviso { background: var(--aviso-tenue); color: var(--aviso); }
.etiqueta-alerta { background: var(--alerta-tenue); color: var(--alerta); }

/* --- Ficha del alumno --------------------------------------------------- */
.cajon {
  position: fixed; inset: 0; z-index: 20;
  display: grid; align-items: end;
  background: rgba(0, 0, 0, .55);
}
.cajon[hidden] { display: none; }
.cajon-caja {
  background: var(--papel);
  border-top-left-radius: var(--radio);
  border-top-right-radius: var(--radio);
  max-height: 92dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.cajon-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1rem;
  background: var(--papel-carta);
  border-bottom: 1px solid var(--linea);
}
.cajon-cuerpo { overflow-y: auto; padding: 1rem calc(1rem + env(safe-area-inset-right)) 2rem 1rem; }
.cajon-cuerpo textarea { resize: vertical; min-height: 5rem; }
.titulo-notas { margin: 1.5rem 0 .6rem; }
.nota {
  background: var(--papel-carta);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-chico);
  padding: .7rem .85rem;
  margin-bottom: .6rem;
}
.nota p { margin: .2rem 0 0; white-space: pre-wrap; }
body.con-cajon { overflow: hidden; }

/* --- Mensajes ----------------------------------------------------------- */
.hilo { display: grid; gap: .6rem; margin-bottom: 1rem; }
.burbuja {
  display: grid; gap: .25rem;
  max-width: 85%;
  padding: .7rem .85rem;
  border-radius: var(--radio);
  background: var(--papel-carta);
  border: 1px solid var(--linea);
}
.burbuja p { margin: 0; white-space: pre-wrap; }
/* La burbuja es un grid y sus hijos se estiran: sin esto la marca «Urgente»
   ocupaba todo el ancho del mensaje, como si fuera una barra. */
.burbuja > .etiqueta { justify-self: start; }
/* Lo mío a la derecha y con el acento; lo suyo a la izquierda. La posición
   dice quién habla sin tener que leer ningún nombre. */
.burbuja.mia { justify-self: end; background: var(--acento-tenue); border-color: var(--acento); }
.burbuja.suya { justify-self: start; }
.burbuja.urgente { border-left: 3px solid var(--alerta); }
/* --- Fotos en los mensajes ---------------------------------------------- */
.foto-mensaje { display: block; margin-bottom: .35rem; }
.foto-mensaje img {
  display: block;
  max-width: 100%;
  /* Alto tope: una foto vertical de móvil ocuparía la pantalla entera y
     taparía el resto de la conversación. Se toca para verla completa. */
  max-height: 16rem;
  width: auto;
  border-radius: var(--radio-chico);
  border: 1px solid var(--linea);
  object-fit: cover;
}
.foto-elegida {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .6rem;
}
.foto-elegida[hidden] { display: none; }
.foto-elegida img {
  width: 4.5rem; height: 4.5rem;
  object-fit: cover;
  border-radius: var(--radio-chico);
  border: 1px solid var(--linea-fuerte);
}
/* El «botón» de la foto es un <label>: hay que darle el mismo alto que los
   botones de al lado o la fila queda escalonada. */
label.boton { cursor: pointer; }

.escribir { position: sticky; bottom: calc(var(--toque) + .5rem); }
.escribir textarea { resize: vertical; }
.marca-urgente { display: flex; align-items: center; gap: .4rem; font-size: .9375rem; }
/* `display: flex` de arriba pisa al atributo `hidden` (que solo vale
   `display: none` en la hoja del navegador), así que la casilla seguía
   viéndose cuando se escondía. Se dice explícitamente. */
.marca-urgente[hidden] { display: none; }
.marca-urgente input { width: 1.1rem; height: 1.1rem; }

/* --- Carga: esqueleto, no una ruedita en medio de la pantalla ---------- */
.esqueleto-linea { height: 1rem; margin: .4rem 0; }
.esqueleto-linea.corta { width: 55%; }
.esqueleto {
  border-radius: var(--radio-chico);
  background: linear-gradient(90deg, var(--linea) 25%, var(--papel) 50%, var(--linea) 75%);
  background-size: 200% 100%;
  animation: cargando 1.2s ease-in-out infinite;
}
@keyframes cargando { to { background-position: -200% 0; } }

/* --- Responsive: ESTRUCTURAL. En escritorio la navegación se va al lado,
       que es donde entra administración y hay sitio de sobra. ------------ */


/* ===========================================================================
   v10 · Rutinas, calendario y progreso
   ========================================================================= */

/* Las pestañas del cajón. Pegajosas: con una lista larga de días, al bajar se
   perdía de vista cómo volver a «Progreso». */
.pestanas-cajon {
  position: sticky; top: 0; z-index: 2;
  display: flex; gap: .25rem;
  margin: -.25rem -.25rem 1rem;
  padding: .25rem;
  background: var(--papel-carta);
  border-bottom: 1px solid var(--linea);
}
.pestana-cajon {
  flex: 1 1 0; min-width: 0;
  min-height: var(--toque);
  border: 0; border-radius: var(--radio-chico);
  background: transparent;
  color: var(--tinta-suave);
  font: inherit; font-weight: var(--peso-medio);
  cursor: pointer;
}
.pestana-cajon:hover { background: var(--acento-tenue); color: var(--tinta); }
/* La seleccionada en sólido y no con un subrayado: en el teléfono, de pie y
   con el brazo estirado, un subrayado de 2 px no se ve. */
.pestana-cajon[aria-selected="true"] {
  background: var(--acento); color: var(--acento-tinta);
}
.panel-cajon[hidden] { display: none; }

/* --- Lo último, que es a lo que se abre el cajón ----------------------- */
.ultima-vez { margin-bottom: 1rem; }
.resumen-ejercicios {
  list-style: none; margin: .6rem 0; padding: 0;
  display: grid; gap: .3rem;
}
.resumen-ejercicios li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .3rem 0;
  border-bottom: 1px dashed var(--linea);
}
.resumen-ejercicios li:last-child { border-bottom: 0; }
.nombre-ejercicio { flex: 1 1 auto; min-width: 0; }
/* Las cifras en tabulares y a la derecha: así «4x10 · 40 kg» de tres
   ejercicios se compara de un vistazo, en columna. */
.cifra-ejercicio {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
  font-size: .9375rem;
}
.nota-sesion { margin: .4rem 0 .8rem; }

/* --- El calendario ----------------------------------------------------- */
.calendario { margin: 1.25rem 0; }
.calendario-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .5rem;
}
.calendario-barra strong { font-size: 1rem; text-transform: capitalize; }
.boton-icono {
  min-width: var(--toque); min-height: var(--toque);
  padding: 0; font-size: 1.25rem; line-height: 1;
}
.calendario-rejilla {
  display: grid;
  /* minmax(0, 1fr) y no 1fr: con 1fr, un día de dos cifras ensancha la
     columna y la rejilla se sale del cajón en pantallas estrechas. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
.calendario-cabeza {
  text-align: center; font-size: .75rem; color: var(--tinta-suave);
  padding-bottom: .25rem;
}
.calendario-dia {
  display: grid; place-items: center;
  aspect-ratio: 1;
  border: 0; border-radius: var(--radio-chico);
  background: transparent;
  color: var(--tinta-suave);
  font: inherit; font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
.calendario-hueco { aspect-ratio: 1; }
/* El día con entrenamiento, en sólido. Es la única información del
   calendario: si fuera un puntito, habría que buscarlo. */
button.calendario-dia.con-sesion {
  background: var(--acento); color: var(--acento-tinta);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}
button.calendario-dia.con-sesion:hover { background: var(--acento-fuerte); }
.calendario-dia.es-hoy { outline: 2px solid var(--linea-fuerte); outline-offset: -2px; }
.calendario-pie { margin: .5rem 0 0; }

/* --- La lista de días -------------------------------------------------- */
.tarjeta-sesion {
  display: block; width: 100%; text-align: left;
  background: var(--papel-carta);
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .75rem .9rem; margin-bottom: .6rem;
  font: inherit; color: inherit; cursor: pointer;
}
.tarjeta-sesion:hover { border-color: var(--acento); }
.tarjeta-sesion:active { transform: translateY(1px); }
.grupos-sesion { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }

/* --- El editor de ejercicios ------------------------------------------- */
.fila-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.campo-plantilla { margin-bottom: 0; width: 100%; }
.ejercicio {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .7rem; margin-bottom: .6rem;
  background: var(--papel-carta);
}
.ejercicio-cabecera { display: flex; gap: .5rem; align-items: center; }
.ejercicio-nombre {
  flex: 1 1 auto; min-width: 0;
  min-height: var(--toque);
  padding: .55rem .7rem;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico);
  background: var(--papel-carta); color: var(--tinta);
  font: inherit; font-weight: var(--peso-medio);
}
.quitar-ejercicio { flex: 0 0 auto; color: var(--tinta-suave); }
.quitar-ejercicio:hover { color: var(--alerta); border-color: var(--alerta); }
.ejercicio-grupo {
  width: 100%; min-height: var(--toque); margin-top: .45rem;
  padding: .5rem .7rem;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico);
  background: var(--papel-carta); color: var(--tinta); font: inherit;
}
/* Las cinco medidas, como pastillas que se encienden. Pastillas y no un
   desplegable porque hay que poder encender VARIAS: un WOD son series,
   repeticiones y tiempo a la vez. */
.medidas-ejercicio {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-top: .5rem;
}
.chip-medida {
  min-height: 2rem;
  padding: .25rem .6rem;
  border: 1px dashed var(--linea-fuerte); border-radius: 999px;
  background: transparent; color: var(--tinta-suave);
  font: inherit; font-size: .8125rem; cursor: pointer;
}
.chip-medida:hover { border-style: solid; color: var(--tinta); }
/* La encendida en sólido: con un subrayado o un cambio de color flojo no se
   distingue de un vistazo cuál está puesta y cuál no. */
.chip-medida[aria-pressed="true"] {
  background: var(--acento); border-color: var(--acento);
  border-style: solid; color: var(--acento-tinta);
  font-weight: var(--peso-medio);
}

/* Las categorías de «Yo». */
.lista-categorias { display: grid; gap: .3rem; margin: .5rem 0 .75rem; }
.fila-categoria {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem 0;
  border-bottom: 1px dashed var(--linea);
}
.fila-categoria:last-child { border-bottom: 0; }
.nombre-categoria { flex: 1 1 auto; min-width: 0; }
.quitar-categoria:hover { color: var(--alerta); border-color: var(--alerta); }
.fila-nueva-categoria { display: flex; gap: .5rem; }
.fila-nueva-categoria input {
  flex: 1 1 auto; min-width: 0; min-height: var(--toque);
  padding: .5rem .7rem;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico);
  background: var(--papel-carta); color: var(--tinta); font: inherit;
}

/* Las casillas de las medidas encendidas. No caben cinco campos en una línea
   de 390 px, así que el nombre va arriba a lo ancho y las cifras debajo, que
   es como se dicta una serie: «cuatro por diez, cuarenta». */
.ejercicio-cifras {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem; margin-top: .45rem;
}
.campo-cifra { display: grid; gap: .2rem; }
.campo-cifra > span { font-size: .75rem; color: var(--tinta-suave); }
.campo-cifra input {
  width: 100%; min-height: var(--toque);
  padding: .5rem; text-align: center;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico);
  background: var(--papel-carta); color: var(--tinta);
  font: inherit; font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}
.campo-cifra input:focus-visible { border-color: var(--acento); }
.boton-peligro { color: var(--alerta); border-color: var(--alerta); }
.boton-peligro:hover { background: var(--alerta-tenue); border-color: var(--alerta); }
.aviso.aviso-bien { border-color: var(--bien); color: var(--bien); background: var(--bien-tenue); }

/* --- Progreso ---------------------------------------------------------- */
.rejilla-cifras {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem; margin-bottom: 1rem;
}
.cifra-grande {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .7rem .8rem; background: var(--papel-carta);
}
.cifra-grande strong {
  display: block; font-size: 1.375rem; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.bloque-grafica { margin-bottom: 1rem; }
.bloque-grafica h3 { margin: 0 0 .25rem; font-size: 1.0625rem; }
.bloque-grafica > .sutil { margin: 0 0 .8rem; }
.grafica { width: 100%; height: auto; display: block; }
.grafica .barra { fill: var(--acento); }
.grafica .linea { stroke: var(--acento); stroke-width: 2; }
.grafica .punto { fill: var(--acento); }
.grafica .eje { stroke: var(--linea); stroke-width: 1; }
/* Las letras del SVG escalan con el viewBox, asi que van en px del dibujo y
   no en rem: a 320 de ancho, 9 px son unos 11 px reales en el telefono. */
.grafica .tope-grafica, .grafica .fecha-grafica {
  fill: var(--tinta-suave); font-size: 9px; font-family: inherit;
}

/* Reparto por grupo: barras con el nombre al lado. Un anillo sin etiquetas
   obliga a ir y volver a una leyenda, y esto se mira en un teléfono. */
.barras-grupo { display: grid; gap: .45rem; }
.barra-grupo { display: grid; grid-template-columns: 7rem 1fr 2.5rem; align-items: center; gap: .5rem; }
.nombre-grupo { font-size: .9375rem; }
.pista-grupo {
  display: block; height: .65rem; border-radius: 999px;
  background: var(--acento-tenue); overflow: hidden;
}
.relleno-grupo { display: block; height: 100%; background: var(--acento); }
.cifra-grupo {
  text-align: right; font-size: .875rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.selector-ejercicio, #periodo-informe {
  width: 100%; min-height: var(--toque); margin-bottom: .6rem;
  padding: .5rem .7rem;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico);
  background: var(--papel-carta); color: var(--tinta); font: inherit;
}
.acciones-informe { display: grid; gap: .5rem; }
.acciones-informe .boton { min-height: var(--toque); }

@media (min-width: 30rem) {
  .rejilla-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .acciones-informe { grid-template-columns: 1fr auto; align-items: center; }
  #periodo-informe { margin-bottom: 0; }
}

/* En pantalla ancha, un ejercicio es UNA fila. Con el diseño del teléfono
   estirado, cada ejercicio medía 230 px de alto en 1280 px —tres casillas de
   240 px para escribir «4», «10» y «75»— y solo cabían dos en pantalla.
   Las tres cifras llevan ancho fijo: son de dos o tres dígitos y estiradas
   no se leen como una serie. */
/* En pantalla ancha, un ejercicio es UNA fila. Con el diseño del teléfono
   estirado, cada ejercicio medía 230 px de alto en 1280 px —casillas de
   240 px para escribir «4», «10» y «75»— y solo cabían dos en pantalla.
   Las cifras son de una a cinco según lo que se mida, así que ocupan lo que
   necesiten y las pastillas se van a la segunda línea. */
@media (min-width: 48rem) {
  .ejercicio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9.5rem auto var(--toque);
    align-items: end;
    gap: .5rem;
  }
  .ejercicio-cabecera { display: contents; }
  /* La fila se declara entera. Sin decir la fila a cada pieza, las pastillas
     (que ocupan todo el ancho y van antes en el DOM) empujaban las cifras a
     una TERCERA fila y el ejercicio pasaba de 99 px a 204 px. */
  .ejercicio-nombre { grid-column: 1; grid-row: 1; }
  .ejercicio-grupo { grid-column: 2; grid-row: 1; margin-top: 0; }
  .ejercicio-cifras {
    grid-column: 3; grid-row: 1; margin-top: 0;
    display: flex; gap: .5rem; align-items: end;
  }
  .campo-cifra { width: 4.5rem; }
  .campo-cifra:has(.cifra-segundos) { width: 6rem; }
  /* El orden del DOM pone la equis antes de las cifras (en el teléfono va
     arriba a la derecha); aquí se manda al final sin tocar el marcado. */
  .quitar-ejercicio { grid-column: 4; grid-row: 1; }
  /* Las pastillas, a lo ancho en la segunda fila: son cinco y en la primera
     estrujarían el nombre del ejercicio. */
  .medidas-ejercicio { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .chip-medida { min-height: 1.75rem; padding: .15rem .55rem; font-size: .75rem; }
  .campo-cifra > span { white-space: nowrap; }
}

@media (min-width: 48rem) {
  /* Solo el body de la APLICACIÓN se parte en dos columnas. La pantalla de
     entrada no tiene barra lateral, y con este grid su tarjeta caía dentro de
     la columna de 14rem: pegada a la izquierda y aplastada. */
  body.app { display: grid; grid-template-columns: 14rem 1fr; min-height: 100dvh; }
  .navegacion {
    position: sticky; top: 0; bottom: auto;
    grid-auto-flow: row; grid-auto-columns: auto;
    align-content: start; gap: .25rem;
    height: 100dvh;
    padding: 1rem .6rem;
  }
  .navegacion a {
    flex-direction: row; justify-content: flex-start; gap: .65rem;
    border-radius: var(--radio-chico);
    padding: .6rem .75rem;
    font-size: .9375rem;
  }
  .principal { min-width: 0; }
  .contenido { padding: 1.5rem; max-width: 70rem; }
  /* En pantalla ancha la ficha deja de ser una hoja que sube desde abajo y
     se centra: aquí hay sitio y no hay pulgar que alcanzar. */
  .cajon { align-items: center; justify-items: center; padding: 2rem; }
  .cajon-caja { border-radius: var(--radio); width: min(44rem, 100%); max-height: 85dvh; }
}

/* --- Impresión: al final del fichero a propósito ----------------------- */
@media print {
  .navegacion, .cabecera { display: none !important; }
  body { background: #fff; color: #000; display: block; }
  .tarjeta { box-shadow: none; border-color: #999; }
}