/* ==========================================================================
   Calculadora de plan de entrenamiento (10K, media maratón y maratón) — ENFAF

   Es la hoja de la calculadora de maratón y media maratón con la cabecera
   solo de ENFAF y los colores de las fases de los planes de 10K.

   Los tokens y los rasgos de marca (fondo #030915, azul #2D6BEE, cabecera
   pill, tarjetas, botón con círculo) están tomados de enfaf.com y de la hoja
   de certificaciones.enfaf.com, para que las dos piezas se vean hermanas.

   Criterios de contraste heredados de esa hoja:
     · el azul de marca da 4,2:1 sobre el fondo: sirve de borde, de relleno y
       de subrayado, nunca de texto;
     · blanco sobre el azul da 4,0:1, así que solo se usa a partir de 19px
       en semibold;
     · para mensajes de error el rojo de marca se sustituye por #FF8B8B.
   ========================================================================== */

@font-face{
  font-family:"Instrument Sans";
  src:url("fuentes/InstrumentSans-Variable.woff2") format("woff2-variations"),
      url("fuentes/InstrumentSans-Variable.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}

:root{
  --primary:#030915;
  --secondary:#2D6BEE;
  --tertiary:#FFA915;
  --quaternary:#919090;
  --quinary:#4A4A4A;
  --sextary:#0A1836;
  --septenary:#9257FF;
  --text-primary:#FFFFFF;
  --text-secondary:#919090;
  --success:#009200;
  --error:#920000;
  --error-texto:#FF8B8B;

  --font:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --content-size:860px;

  color-scheme:dark;
}

/* --- Base ---------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{background:var(--primary);-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--primary);
  color:var(--text-secondary);
  font-family:var(--font);
  font-size:1rem;
  line-height:1.5;
  overflow-wrap:break-word;
}

:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}

a{
  color:var(--text-primary);
  text-decoration:underline;
  text-decoration-color:var(--secondary);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
a:hover{text-decoration-color:var(--text-primary)}

h1,h2,h3{color:var(--text-primary);letter-spacing:0;margin:0 0 12px}
h1{font-size:clamp(2rem,7vw,2.75rem);font-weight:200;line-height:1.1;margin-bottom:20px}
h2{font-size:clamp(1.375rem,4.5vw,1.625rem);font-weight:500;line-height:1.2;margin-top:36px}
h3{font-size:1.0625rem;font-weight:600;line-height:1.3;margin-top:24px}

p{margin:0 0 16px}
svg{display:block}
[hidden]{display:none !important}

/* --- Cabecera pill -------------------------------------------------------- */

/* La pill no puede partirse ni encoger de golpe: el logotipo, el chip y el
   aire interior se estrechan a la vez con clamp(), de forma que la cápsula
   sigue entera desde 280px hasta el ancho máximo sin un salto visible. */
.cabecera{padding:20px clamp(12px,4vw,20px) 4px}

.pill{
  max-width:var(--content-size);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(8px,2.5vw,12px);
  padding:8px clamp(6px,2vw,9px) 8px clamp(13px,4vw,20px);
  border:1px solid var(--secondary);
  background:#030914;
  border-radius:50px;
  box-shadow:0 0 125px 10px rgba(146,87,255,.4);
}
/* A la izquierda, el logotipo de ENFAF, que lleva a enfaf.com. El relleno
   del enlace le da alto de sobra para pulsarlo (el logo mide 24px). */
.pill .marca{
  display:inline-flex;align-items:center;
  flex:0 0 auto;
  padding:10px 4px;
  text-decoration:none;
  transition:opacity .15s ease-out;
}
.pill .marca:hover{opacity:.8}
.marca .logo-enfaf{width:clamp(80px,26vw,104px);height:auto;color:var(--text-primary)}

/* A la derecha, el chip de sección: dice qué herramienta es. */
.seccion{
  flex:0 1 auto;min-width:0;
  padding:9px clamp(12px,3.5vw,16px);
  border:1px solid var(--quinary);
  border-radius:50px;
  color:var(--text-primary);
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* --- Estructura ----------------------------------------------------------- */

.contenido{
  flex:1;
  width:100%;
  max-width:var(--content-size);
  margin:0 auto;
  padding:28px 20px 48px;
}

.entradilla{font-size:1.0625rem;line-height:1.45;margin-bottom:28px}

.tarjeta{
  background:var(--primary);
  border:1px solid var(--quinary);
  border-radius:12px;
  padding:24px 20px;
}

.pie{
  margin-top:auto;
  padding:24px 20px 32px;
  border-top:1px solid var(--quinary);
  text-align:center;
  font-size:.875rem;
}
.pie p{margin:0 0 6px}
/* 18px de alto no llegan al mínimo de 24px de WCAG 2.5.8 para un destino
   táctil; el relleno vertical lo sube sin romper la línea de texto. */
.pie a{display:inline-block;padding-block:4px}

@media (min-width:640px){
  .tarjeta{padding:32px}
  .contenido{padding-top:40px}
}

/* --- Progreso del formulario ---------------------------------------------- */

.progreso-pasos{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
  font-size:.875rem;
  color:var(--text-secondary);
}
.barra{
  flex:1;
  height:6px;
  border-radius:50px;
  background:var(--sextary);
  overflow:hidden;
}
.barra i{
  display:block;
  /* Ancho de partida del paso 1. A partir de ahí lo mueve app.js por CSSOM,
     que la CSP sí permite: lo que no permite son los atributos style= del
     marcado, y por eso aquí no hay ninguno. */
  width:12%;
  height:100%;
  border-radius:50px;
  background:var(--secondary);
  transition:width .35s ease;
}
.paso-n{font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- Preguntas ------------------------------------------------------------ */

.paso{animation:entrar .3s ease}
@keyframes entrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.pregunta{
  margin:0 0 6px;
  color:var(--text-primary);
  font-size:clamp(1.25rem,4vw,1.5rem);
  font-weight:500;
  line-height:1.25;
}
.aclaracion{margin:0 0 20px;font-size:.9375rem;color:var(--text-secondary)}

.opciones{display:grid;gap:12px;margin:0 0 24px}
@media (min-width:560px){
  .opciones.dobles{grid-template-columns:1fr 1fr}
}

.opcion{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  /* Como item de grid, min-width:auto vale su tamaño mínimo de contenido y
     se impone al width:100%: con el texto del sistema muy grande el botón
     crecía por encima de su columna. min-width:0 le devuelve el mando. */
  min-width:0;
  max-width:100%;
  min-height:64px;
  padding:14px 18px;
  border:1px solid var(--quinary);
  border-radius:12px;
  background:var(--sextary);
  color:var(--text-primary);
  font-family:inherit;
  font-size:1.0625rem;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.opcion:hover{border-color:var(--secondary)}
.opcion[aria-pressed="true"]{
  border-color:var(--secondary);
  box-shadow:inset 0 0 0 1px var(--secondary);
}
.opcion .marca-op{
  flex:0 0 auto;
  width:22px;height:22px;
  border:2px solid var(--quinary);
  border-radius:50%;
}
.opcion[aria-pressed="true"] .marca-op{
  border-color:var(--secondary);
  background:var(--secondary);
  box-shadow:inset 0 0 0 3px var(--primary);
}
/* La etiqueta es lo que puede encoger; la marca circular no. */
.opcion > span:last-child{min-width:0;overflow-wrap:anywhere}
.opcion .detalle{display:block;margin-top:2px;font-size:.875rem;font-weight:400;color:var(--text-secondary)}

/* --- Campos --------------------------------------------------------------- */

.campo{margin-bottom:20px}

label{
  display:block;
  margin-bottom:6px;
  color:var(--text-primary);
  font-size:1rem;
  font-weight:600;
}
.ayuda{margin:0 0 10px;font-size:.875rem;color:var(--text-secondary)}

input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="search"],
input[type="number"],input[type="date"],select{
  width:100%;
  /* Tope duro: gana al ancho intrínseco del control pase lo que pase. Es la
     red que impide que un campo se salga de la tarjeta aunque el navegador
     decida dimensionarlo por su contenido. min-width:0 permite además que
     encoja dentro de un contenedor flex, como el reloj hh:mm:ss. */
  max-width:100%;
  min-width:0;
  min-height:52px;
  padding:12px 16px;
  border:1px solid var(--quinary);
  border-radius:12px;
  background:var(--sextary);
  color:var(--text-primary);
  font-family:inherit;
  /* 17px: por debajo de 16px iOS hace zoom al enfocar el campo. */
  font-size:1.0625rem;
}
input[type="text"]:hover,input[type="email"]:hover,input[type="tel"]:hover,input[type="password"]:hover,
input[type="search"]:hover,input[type="number"]:hover,input[type="date"]:hover,select:hover{border-color:var(--secondary)}
input[aria-invalid="true"]{border-color:var(--error-texto)}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield}

/* El campo de fecha se salía de la tarjeta en móvil, y solo a veces.
   iOS Safari dimensiona el control nativo de fecha por su contenido y no
   hace caso al width del autor: con el texto del sistema al 125 % el campo
   pide 222px y a 150 % pide 257px, donde una pantalla de 320px ofrece 238 y
   una de 280px ofrece 198. De ahí que unos lo vieran y otros no.
   Quitar la apariencia nativa devuelve el control al ancho que le marcamos.
   El selector nativo se sigue abriendo al tocarlo, y el resto de la caja
   (fondo, borde, radio) ya estaba restilado de todas formas. */
input[type="date"]{
  -webkit-appearance:none;
  appearance:none;
}
/* Sin apariencia nativa, iOS deja el valor centrado y recortado por arriba. */
input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
  line-height:normal;
  margin:0;
}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7;cursor:pointer}

/* Casillas de consentimiento. La casilla nativa, pintada con el azul de
   marca (que sí vale como relleno), a 22px para acertar con el dedo; toda la
   etiqueta es zona de pulsación. El enlace de dentro abre la política sin
   marcar la casilla. */
.casillas{display:grid;gap:14px;margin:0 0 16px}
.casilla{
  display:flex;align-items:flex-start;gap:12px;
  margin:0;
  color:var(--text-primary);
  font-size:.9375rem;font-weight:400;line-height:1.45;
  cursor:pointer;
}
.casilla input{
  flex:0 0 auto;
  width:22px;height:22px;
  margin:0;
  accent-color:var(--secondary);
  cursor:pointer;
}
.aviso-datos{margin:0 0 20px;font-size:.8125rem;line-height:1.5}

/* Fuera de la vista y del lector de pantalla, pero no display:none: algunos
   bots se saltan los campos ocultos así. */
.trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Solo para el lector de pantalla: ocupa cero en pantalla pero se lee. */
.visualmente-oculto{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Reloj hh:mm:ss */
.reloj{display:flex;align-items:center;gap:8px;max-width:320px}
.reloj input{text-align:center;letter-spacing:.06em;font-variant-numeric:tabular-nums;padding:12px 6px}
.reloj .sep{color:var(--text-secondary);font-size:1.25rem;font-weight:600}
.reloj .unidad{
  display:block;margin:6px 0 0;
  font-size:.75rem;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-secondary);text-align:center;
}
.reloj-campo{flex:1}

/* Días de entrenamiento */
.dias{display:flex;flex-wrap:wrap;gap:8px}
.dia-op{
  min-width:56px;min-height:48px;
  padding:10px 12px;
  border:1px solid var(--quinary);
  border-radius:50px;
  background:var(--sextary);
  color:var(--text-primary);
  font-family:inherit;font-size:.9375rem;font-weight:500;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.dia-op:hover{border-color:var(--secondary)}
.dia-op[aria-pressed="true"]{background:var(--secondary);border-color:var(--secondary);font-weight:600}

/* --- Botones -------------------------------------------------------------- */

.acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}

.boton{
  display:inline-flex;
  align-items:center;
  gap:14px;
  /* Con el texto del sistema muy grande en una pantalla de 280px el botón
     pedía 225px donde la tarjeta ofrece 198 y se salía. El tope lo impide y
     `anywhere` deja que la etiqueta parta antes que escaparse; a tamaños
     normales la palabra cabe entera y no cambia nada. No se toca el cuerpo
     de 19px: por debajo, el blanco sobre el azul de marca deja de cumplir AA. */
  max-width:100%;
  overflow-wrap:anywhere;
  min-height:56px;
  padding:5px 25px 5px 5px;
  border:0;
  border-radius:50px;
  background:var(--secondary);
  color:var(--text-primary);
  font-family:inherit;
  /* Blanco sobre el azul de marca solo cumple AA a partir de texto grande. */
  font-size:1.1875rem;
  font-weight:600;
  line-height:1.2;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:background .3s ease;
}
.boton:hover:not(:disabled):not([aria-disabled="true"]){background:color-mix(in srgb,var(--secondary),#000 14%)}
.boton:disabled,.boton[aria-disabled="true"]{background:var(--sextary);box-shadow:inset 0 0 0 1px var(--quinary);cursor:default;color:var(--text-secondary)}
.boton.ancho{width:100%}

.circulo{
  flex:0 0 auto;
  width:46px;height:46px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--text-primary);
  color:var(--secondary);
}
.boton:disabled .circulo,.boton[aria-disabled="true"] .circulo{background:var(--quinary);color:var(--text-primary)}

.boton-secundario{
  display:inline-flex;align-items:center;gap:10px;
  min-height:48px;
  padding:12px 22px;
  border:0;border-radius:50px;
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--secondary);
  color:var(--text-primary);
  font-family:inherit;font-size:1.0625rem;font-weight:500;
  text-decoration:none;
  cursor:pointer;
  transition:background .3s ease;
}
.boton-secundario:hover{background:color-mix(in srgb,var(--secondary),transparent 88%)}

.boton-texto{
  min-height:44px;
  padding:0 4px;
  border:0;background:none;
  color:var(--text-secondary);
  font-family:inherit;font-size:.9375rem;
  text-decoration:underline;
  text-decoration-color:var(--quinary);
  text-underline-offset:3px;
  cursor:pointer;
}
.boton-texto:hover{color:var(--text-primary);text-decoration-color:var(--secondary)}

/* --- Mensajes ------------------------------------------------------------- */

.error{
  margin:0 0 16px;
  padding:12px 14px;
  border-left:3px solid var(--error);
  border-radius:8px;
  background:rgba(146,0,0,.22);
  color:var(--error-texto);
  font-size:.9375rem;font-weight:500;line-height:1.45;
}

.aviso{
  display:flex;gap:14px;align-items:flex-start;
  margin:0 0 20px;
  padding:16px;
  border:1px dashed var(--tertiary);
  border-radius:12px;
  background:rgba(255,169,21,.1);
  color:var(--text-primary);
  font-size:.9375rem;
}
.aviso svg{flex:0 0 auto;color:var(--tertiary)}
.aviso :last-child{margin-bottom:0}
.aviso p{margin:0 0 8px;font-size:.9375rem}

/* --- Resumen del resultado ------------------------------------------------ */

.titulo-resultado{margin-top:0}
/* El nivel del plan, a continuación del título y un punto más callado. */
.titulo-nivel{color:var(--text-secondary);font-weight:400}

/* Vídeo tutorial: 16:9 y a todo el ancho de la columna. */
.video-tutorial{margin:0 0 48px}
.video-marco{
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid var(--quinary);
  border-radius:12px;
  background:var(--sextary);
}
.video-marco iframe{display:block;width:100%;height:100%;border:0}

.resumen{
  display:grid;
  gap:12px;
  margin:0 0 28px;
}
@media (min-width:640px){.resumen{grid-template-columns:repeat(3,1fr)}}

.dato{
  padding:18px 20px;
  border:1px solid var(--quinary);
  border-radius:12px;
  background:var(--sextary);
}
.dato dt{
  margin:0 0 6px;
  font-size:.8125rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-secondary);
}
.dato dd{
  margin:0;
  color:var(--text-primary);
  font-size:1.75rem;font-weight:600;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.dato .apunte{display:block;margin-top:6px;font-size:.875rem;font-weight:400;color:var(--text-secondary)}
/* El "/km" que acompaña a la cifra grande, en cuerpo normal. */
.dato .unidad-dato{font-size:1rem;font-weight:400}
.dato.destacado{box-shadow:inset 0 0 0 1px var(--secondary)}

/* --- Glosario ------------------------------------------------------------ */

/* Tarjeta con la misma forma que las semanas: borde fino, 12px de radio y el
   título en una franja de superficie elevada, como la cabecera de cada semana. */
.tarjeta-glosario{
  margin:8px 0 0;
  border:1px solid var(--quinary);
  border-radius:12px;
  background:var(--primary);
  overflow:hidden;
}
.tarjeta-glosario h2{
  margin:0;
  padding:14px 16px;
  border-bottom:1px solid var(--quinary);
  background:var(--sextary);
  font-size:1.0625rem;font-weight:600;line-height:1.3;
}

/* Una línea por término, término y explicación seguidos. En pantalla ancha va
   a dos columnas que se leen de arriba abajo, para que ocupe la mitad de alto. */
.glosario{margin:0;padding:16px 16px 8px;font-size:.9375rem}
.glosario > div{margin:0 0 8px;break-inside:avoid}
.glosario dt{display:inline;color:var(--text-primary);font-weight:600}
.glosario dd{display:inline;margin:0 0 0 .4em}
@media (min-width:560px){
  .tarjeta-glosario h2{padding:16px 18px}
  .glosario{padding:18px 18px 10px}
}
@media (min-width:640px){
  .glosario{columns:2;column-gap:32px}
}

/* --- Tabla de zonas ------------------------------------------------------- */

.tabla-envoltorio{overflow-x:auto;margin:0 0 28px}
/* La nota que explica la tabla va fuera del envoltorio con scroll, así que
   necesita menos aire por debajo que una leyenda suelta. */
.leyenda-tabla{margin-bottom:12px}

table.zonas{
  width:100%;
  border-collapse:collapse;
  font-size:.9375rem;
  font-variant-numeric:tabular-nums;
}
table.zonas th,table.zonas td{
  padding:10px 12px;
  border-bottom:1px solid var(--quinary);
  text-align:left;
  white-space:nowrap;
}
table.zonas thead th{
  color:var(--text-secondary);
  font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  border-bottom-color:var(--quinary);
}
table.zonas tbody th{color:var(--text-primary);font-weight:600}
table.zonas td{color:var(--text-primary)}
table.zonas .pct{color:var(--text-secondary)}

/* Cuatro columnas con white-space:nowrap piden 628px: en un móvil de 320px
   eso era un scroll lateral escondido dentro de la página, y el ritmo —que es
   justamente a lo que viene el corredor— quedaba fuera de pantalla. Por
   debajo de 680px cada zona pasa a ser un bloque: la etiqueta Z1…Z5c en una
   columna estrecha y, al lado, nombre, ritmo y porcentaje apilados. Se limita
   a `screen` para que el papel reciba siempre la tabla de verdad.

   680px no es un tamaño de dispositivo: es el ancho real en el que la tabla
   deja de caber (628px de contenido + los 40px de margen de .contenido). El
   overflow-x del envoltorio se queda como red por si un ritmo de tres cifras
   ensancha alguna celda. */
@media screen and (max-width:679px){
  .tabla-envoltorio{overflow-x:visible}

  table.zonas thead{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }

  table.zonas,table.zonas tbody,table.zonas tr,
  table.zonas th,table.zonas td{display:block}

  table.zonas tr{
    display:grid;
    grid-template-columns:2.75rem 1fr;
    align-items:baseline;
    gap:2px 10px;
    padding:12px 0;
    border-bottom:1px solid var(--quinary);
  }
  table.zonas tbody tr:last-child{border-bottom:0}

  table.zonas th,table.zonas td{
    padding:0;
    border-bottom:0;
    white-space:normal;
  }

  table.zonas tbody th{grid-column:1;grid-row:1 / span 3;align-self:start}
  table.zonas td{grid-column:2}
  /* Nombre, después el ritmo y por último el porcentaje: el ritmo es el dato
     que se busca, el porcentaje solo lo justifica. */
  table.zonas td:nth-of-type(1){grid-row:1}
  table.zonas td:nth-of-type(3){grid-row:2;font-weight:600}
  table.zonas td:nth-of-type(2){grid-row:3;font-size:.875rem}
}

/* --- Calendario ----------------------------------------------------------- */

.semana{
  margin:0 0 16px;
  border:1px solid var(--quinary);
  border-radius:12px;
  background:var(--primary);
  overflow:hidden;
}
/* Cuatro datos y la flecha no caben en una línea de móvil: hacían falta hasta
   435px y la tarjeta ofrece 278px a 320px de pantalla, así que el volumen de
   la semana y la propia flecha de desplegar quedaban recortados por el
   overflow:hidden de .semana. En móvil la cabecera se parte en dos filas
   (identidad arriba con la flecha, cifras abajo) y a partir de 560px los dos
   grupos vuelven a la misma línea, que es la composición de siempre. */
.semana > summary{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "id   flecha"
    "meta meta";
  align-items:center;
  gap:6px 12px;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
  background:var(--sextary);
}
.semana > summary::-webkit-details-marker{display:none}
.semana > summary::after{
  content:"";
  grid-area:flecha;
  width:9px;height:9px;
  margin-right:4px;
  border-right:2px solid var(--text-secondary);
  border-bottom:2px solid var(--text-secondary);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.semana[open] > summary::after{transform:rotate(-135deg)}

/* Quién es la semana: número y fase, nunca separados. */
.sem-id{
  grid-area:id;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:6px 10px;
  min-width:0;
}
/* Cuánto pesa la semana: fechas a la izquierda, volumen a la derecha. */
.sem-meta{
  grid-area:meta;
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;
  gap:2px 12px;
  min-width:0;
}

@media (min-width:560px){
  .semana > summary{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"id meta flecha";
    gap:12px;
    padding:16px 18px;
  }
}

.sem-n{
  flex:0 0 auto;
  min-width:42px;
  color:var(--text-primary);
  font-size:1.0625rem;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.sem-fechas{flex:0 0 auto;font-size:.875rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.sem-km{
  color:var(--text-primary);
  font-size:.9375rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.fase{
  flex:0 0 auto;
  padding:4px 12px;
  border-radius:50px;
  border:1px solid var(--quinary);
  background:rgba(145,144,144,.12);
  color:var(--text-primary);
  font-size:.75rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.fase[data-fase="Base"]{border-color:var(--secondary);background:rgba(45,107,238,.16)}
.fase[data-fase="Desarrollo"]{border-color:var(--septenary);background:rgba(146,87,255,.16)}
.fase[data-fase="Específico"]{border-color:var(--tertiary);background:rgba(255,169,21,.16)}
.fase[data-fase="Descarga"]{border-color:var(--quaternary);background:rgba(145,144,144,.14)}
.fase[data-fase="Afinamiento"]{border-color:#E1182E;background:rgba(225,24,46,.18)}
/* Las fases del plan principiante van con el color de su equivalente del
   intermedio: base azul, apoyo morado (desarrollo), específica ámbar y el
   tapering rojo (afinamiento). */
.fase[data-fase="Formación de la base"]{border-color:var(--secondary);background:rgba(45,107,238,.16)}
.fase[data-fase="Apoyo"]{border-color:var(--septenary);background:rgba(146,87,255,.16)}
.fase[data-fase="Específica de carrera"]{border-color:var(--tertiary);background:rgba(255,169,21,.16)}
.fase[data-fase="Tapering"]{border-color:#E1182E;background:rgba(225,24,46,.18)}

.sesiones{margin:0;padding:0;list-style:none}

.sesion{padding:18px;border-top:1px solid var(--quinary)}
.sesion.carrera{background:rgba(225,24,46,.07)}

/* En móvil el título de la sesión se lleva su propia línea y la fila de
   arriba queda para los datos (fecha a la izquierda, duración a la derecha).
   Antes el título y la duración compartían línea y la duración caía suelta a
   la derecha del salto, lejos de la sesión a la que pertenece. */
.sesion-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:12px}
.sesion-fecha{
  order:1;
  color:var(--text-secondary);
  font-size:.8125rem;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.sesion-titulo{order:3;flex:1 0 100%;color:var(--text-primary);font-size:1.0625rem;font-weight:600}
.sesion-km{
  order:2;
  margin-left:auto;
  color:var(--text-primary);
  font-size:.875rem;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

@media (min-width:560px){
  .sesion-cab{gap:8px 12px}
  .sesion-titulo{order:2;flex:0 1 auto}
  .sesion-km{order:3}
}

/* Los km del PDF van en segundo plano: el plan se prescribe en minutos. */
.sem-km-ref{color:var(--text-secondary);font-weight:400}

/* Mobile-first, y en el mismo corte de 560px que el resto del calendario: con
   el `max-width:520px` anterior había un punto en el que las dos consultas se
   cumplían a la vez. */
.bloques{margin:0;display:grid;gap:10px}
.bloque{display:grid;grid-template-columns:1fr;gap:4px 14px;align-items:baseline}
.bloque dt{
  color:var(--text-secondary);
  font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}
.bloque dd{margin:0 0 2px;color:var(--text-primary);font-size:.9375rem;line-height:1.5}
@media (min-width:560px){
  .bloque{grid-template-columns:auto 1fr}
  .bloque dd{margin-bottom:0}
}

/* El ritmo calculado: es el valor añadido de la calculadora, se distingue. */
.ritmo{
  display:inline-block;
  margin-left:6px;
  padding:1px 9px;
  border-radius:50px;
  border:1px solid var(--secondary);
  background:rgba(45,107,238,.16);
  color:var(--text-primary);
  font-size:.8125rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.ritmo.objetivo{border-color:var(--tertiary);background:rgba(255,169,21,.16)}

.leyenda{
  margin:0 0 20px;
  font-size:.875rem;
  color:var(--text-secondary);
}
.leyenda.separada{margin-top:24px}

.acciones-resultado{margin-bottom:24px}

/* --- Impresión: el informe ------------------------------------------------

   Guardar en PDF o imprimir no saca la página: saca el informe (app.js,
   htmlInforme), un cuaderno de fichas A4 con la marca de ENFAF. Portada,
   una hoja de referencia y una ficha por semana. El PDF es para leerlo en
   pantalla, así que va en el azul noche de la web y a sangre, con los fondos
   forzados para que no dependan de la casilla «Gráficos de fondo».

   En pantalla el informe no existe. */

.informe{display:none}

@media print{
  /* Sin márgenes de página: el fondo llega al borde y el navegador tampoco
     tiene sitio para imprimir su fecha y su URL. */
  @page{size:A4;margin:0}

  html,body{
    background:var(--primary);
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .cabecera,.pie,.acciones,.no-imprimir{display:none !important}
  /* Si alguien imprime a mitad del formulario, sale tal cual, con el margen
     que ya no pone @page. */
  .contenido{max-width:none;padding:14mm}

  /* Con resultado se imprime el informe y nada más. La base baja a 12,5px
     para que las piezas en rem de la pantalla quepan en la hoja. */
  html:has(.informe){font-size:12.5px}
  .contenido:has(.informe){padding:0}
  .contenido:has(.informe) > :not(#resultado),
  #resultado > :not(.informe){display:none !important}
  .informe{display:block}

  /* Colores de fase, los mismos de los chips de pantalla, como una variable
     que usan la silueta, la leyenda y la franja de cada ficha. */
  .informe [data-fase="Base"]{--fase:var(--secondary)}
  .informe [data-fase="Descarga"]{--fase:var(--quaternary)}
  .informe [data-fase="Desarrollo"]{--fase:var(--septenary)}
  .informe [data-fase="Específico"]{--fase:var(--tertiary)}
  .informe [data-fase="Afinamiento"]{--fase:#E1182E}
  .informe [data-fase="Formación de la base"]{--fase:var(--secondary)}
  .informe [data-fase="Apoyo"]{--fase:var(--septenary)}
  .informe [data-fase="Específica de carrera"]{--fase:var(--tertiary)}
  .informe [data-fase="Tapering"]{--fase:#E1182E}

  /* Una hoja, una página: todas están medidas para caber. */
  .hoja{
    position:relative;
    display:flex;
    flex-direction:column;
    height:297mm;
    padding:14mm 16mm 11mm;
    overflow:hidden;
    break-after:page;
  }
  .hoja:last-child{break-after:auto}
  /* Nada encoge para caber. Si algo no cupiera, empujaría el pie fuera de la
     hoja y el pie desaparecería, que se nota; encogiendo, el contenido se
     recortaría dentro de su tarjeta sin que nadie lo viera. */
  .hoja > *{flex-shrink:0}

  /* Cabecera y pie de las hojas interiores. */
  .hoja-cab{
    display:flex;align-items:center;justify-content:space-between;gap:6mm;
    margin:0 0 8mm;padding:0 0 4mm;
    border-bottom:1px solid var(--quinary);
    font-size:8.5pt;
  }
  .hoja-cab .logo-enfaf{width:24mm;height:auto;color:var(--text-primary)}
  .hoja-pie{
    display:flex;align-items:center;justify-content:space-between;gap:6mm;
    margin-top:auto;padding-top:4mm;
    border-top:1px solid var(--quinary);
    font-size:8pt;
    font-variant-numeric:tabular-nums;
  }
  .hoja-pie-marca{display:inline-flex;align-items:center;gap:3mm}
  .hoja-pie .logo-enfaf{width:14mm;height:auto;color:var(--text-primary)}

  /* --- Portada --- */
  .portada{padding:18mm 18mm 11mm}
  .portada-marcas{
    display:flex;align-items:center;justify-content:space-between;gap:10mm;
    padding-bottom:8mm;
    border-bottom:1px solid var(--quinary);
  }
  .portada-marcas .logo-enfaf{width:56mm;height:auto;color:var(--text-primary)}
  .portada-etiqueta{
    padding:2.2mm 5mm;
    border:1px solid var(--quinary);
    border-radius:50px;
    color:var(--text-primary);
    font-size:10pt;font-weight:500;letter-spacing:.02em;
  }

  .portada-carrera{padding-top:18mm}
  .portada h1{
    margin:0;
    font-size:78pt;font-weight:200;line-height:.95;letter-spacing:-0.02em;
    color:var(--text-primary);
  }
  .portada h1.titulo-largo{font-size:62pt}
  .portada-fecha{margin:6mm 0 0;font-size:19pt;font-weight:500;line-height:1.2;color:var(--text-primary)}
  .portada-plan{margin:2.5mm 0 0;font-size:10.5pt;font-variant-numeric:tabular-nums}

  .portada-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm;margin:14mm 0 0}
  .cifra{
    padding:5mm 5mm 4.5mm;
    border:1px solid var(--quinary);
    border-radius:12px;
    background:var(--sextary);
  }
  .cifra.destacada{border-color:var(--secondary);box-shadow:inset 0 0 0 1px var(--secondary)}
  .cifra dt{font-size:7.5pt;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
  .cifra dd{
    margin:2.5mm 0 0;
    font-size:25pt;font-weight:600;line-height:1.05;
    color:var(--text-primary);
    font-variant-numeric:tabular-nums;
  }
  .cifra-unidad{font-size:11pt;font-weight:400}
  .cifra dd.cifra-apunte{margin-top:2mm;font-size:8.5pt;font-weight:400;line-height:1.35;color:var(--text-secondary)}

  /* La silueta ocupa el tercio de abajo: es la firma del informe y vuelve,
     pequeña, en cada ficha. */
  .portada-silueta{margin:auto 0 0;padding-top:10mm}
  .portada-silueta figcaption{margin:0 0 5mm;font-size:9.5pt}
  .portada-silueta figcaption strong{color:var(--text-primary);font-weight:600}
  .silueta{display:block;width:100%;height:auto}
  .silueta .barra,.silueta-mini .barra{fill:var(--fase)}
  .silueta-mini .barra.atenuada{fill-opacity:.28}
  .silueta .eje{fill:var(--text-secondary);font-family:var(--font);font-size:11px;font-variant-numeric:tabular-nums}
  .silueta .pico{fill:var(--text-primary);font-family:var(--font);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
  .silueta .linea-base{stroke:var(--quinary);stroke-width:1}
  .leyenda-fases{display:flex;flex-wrap:wrap;gap:2mm 6mm;margin:4mm 0 0;padding:0;list-style:none;font-size:9pt}
  .leyenda-fases li{display:inline-flex;align-items:center;gap:2mm}
  .muestra-fase{width:3mm;height:3mm;border-radius:50px;background:var(--fase)}
  .portada .hoja-pie{margin-top:10mm}

  /* --- Hoja de referencia --- */
  .referencia > h2:not(.hoja-titulo){margin:9mm 0 3mm;font-size:15pt}
  /* Después de la regla anterior, que tiene la misma especificidad: el
     título de la hoja de zonas es el h2 de la propia tabla. */
  .hoja-titulo,.zonas-hoja .hoja-cab + h2{margin:0 0 6mm;font-size:26pt;font-weight:200;line-height:1.1;color:var(--text-primary)}
  .referencia .aviso{margin:0 0 3mm;padding:3mm 4mm}
  .referencia .aviso p{font-size:9pt}
  .referencia .tarjeta-glosario{margin:2mm 0 0}
  /* El glosario llena su hoja: 26 términos de una o dos frases, a dos
     columnas, con el cuerpo un punto por debajo del de pantalla. */
  .referencia .glosario{font-size:9pt;line-height:1.4}
  .referencia .glosario > div{margin-bottom:1.5mm}
  .referencia .leyenda{margin:0 0 3.5mm;font-size:9.5pt}
  .referencia .tabla-envoltorio{margin:0}
  .referencia table.zonas{font-size:10.5pt}
  .referencia table.zonas th,.referencia table.zonas td{padding:3.2mm 3mm}

  /* --- Fichas --- */
  .ficha{padding-left:25mm}
  /* La franja de la fase va a sangre por el borde izquierdo: pasando las
     páginas del PDF se ve de un vistazo en qué fase está cada semana. */
  .ficha-franja{
    position:absolute;top:0;bottom:0;left:0;
    width:12mm;
    display:flex;align-items:center;justify-content:center;
    background:var(--fase);
  }
  .ficha-franja span{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:14pt;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
    color:var(--text-primary);
  }
  /* Sobre el ámbar y el gris el blanco no llega a contraste: texto oscuro. */
  .ficha-franja[data-fase="Específico"] span,.ficha-franja[data-fase="Específica de carrera"] span,
  .ficha-franja[data-fase="Descarga"] span{color:var(--primary)}

  .ficha .hoja-cab{margin-bottom:5mm}
  .ficha-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:8mm;margin:0 0 5mm}
  .ficha-cab h2{margin:0;font-size:38pt;font-weight:200;line-height:1;color:var(--text-primary)}
  .ficha-datos{display:flex;flex-wrap:wrap;align-items:center;gap:2mm 4mm;margin:4mm 0 0;font-size:10.5pt}
  .ficha-fechas{font-variant-numeric:tabular-nums}
  .ficha-silueta{display:flex;flex-direction:column;align-items:flex-end;gap:2mm;font-size:8pt;white-space:nowrap}
  .silueta-mini{display:block;width:44mm;height:auto}

  /* El margen de abajo garantiza aire sobre el pie aunque la semana venga
     llena. */
  .ficha-sesiones{display:flex;flex-direction:column;gap:3.5mm;margin:0 0 5mm;padding:0;list-style:none}
  .ficha-sesion{
    padding:5mm 6mm;
    border:1px solid var(--quinary);
    border-radius:12px;
    background:var(--sextary);
    break-inside:avoid;
  }
  .ficha-sesion.carrera{border-color:#E1182E;background:var(--sextary)}
  .ficha .sesion-cab{margin-bottom:3.5mm}
  .ficha .sesion-fecha{font-size:8.5pt}
  .ficha .sesion-titulo{font-size:14pt}
  .ficha .sesion-km{font-size:10pt}
  .ficha .bloques{gap:3mm}
  .ficha .bloque dt{font-size:7.5pt}
  .ficha .bloque dd{font-size:11pt}
  .ficha .ritmo{font-size:9pt}

  /* --- Safari --------------------------------------------------------------

     Safari (WebKit; en el iPhone todos los navegadores lo son, aunque ahí no
     se ha probado) no hace caso de @page size. Compone la impresión al ancho
     del papel por 1,25, que en A4 son 744 × 1052 px, y luego la escala al
     papel. Una hoja de 297 mm son 1122 px: no cabía, el pie saltaba solo a la
     página siguiente y el PDF salía con el doble de páginas.

     En WebKit el informe se reduce entero a la medida de esa página, así que
     sale con la misma composición que en Chrome. Se reconoce por una fuente
     del sistema que solo entiende WebKit: Chrome no entra en este bloque.

     - zoom .936 deja la hoja en 742,9 × 1050,7 px, un pelo por debajo de la
       página. Justa del todo no vale: si la hoja pasara de la página aunque
       fuera medio píxel, ese medio píxel se iría a la página siguiente y
       detrás de cada hoja saldría otra en blanco.
     - El body en bloque: dentro de un body flex, WebKit no siempre coloca los
       saltos de página al principio de una página y las hojas van corriéndose
       de página en página.
     - WebKit evalúa las consultas de ancho contra la ventana y no contra el
       papel: imprimiendo desde el móvil o una ventana estrecha, las sesiones
       salían con la composición de móvil y la semana no cabía en su hoja.
       Aquí se fija la ancha, la misma que imprime Chrome.
     - WebKit no hace columnas al imprimir: el glosario salía a una sola. Va
       en rejilla de dos columnas que se leen de arriba abajo, como en Chrome;
       las 13 filas cubren los 26 términos que admite el test. En la rejilla
       las dos columnas comparten el alto de cada fila, así que el glosario
       sale algo más alto que en columnas; cabe en su hoja igual.

     Solo cuadra en A4 al 100 % y sin «Imprimir encabezados y pies de página»:
     Safari reserva sitio para ellos dentro de la página y la hoja ya no cabe.
     Si se cambia algo del informe, hay que imprimir en Safari el caso peor. */
  @supports (font:-apple-system-body){
    body:has(.informe){display:block;min-height:0}
    .informe{zoom:.936}

    .informe .sesion-cab{gap:8px 12px}
    .informe .sesion-titulo{order:2;flex:0 1 auto}
    .informe .sesion-km{order:3}
    .informe .bloque{grid-template-columns:auto 1fr}
    .informe .bloque dd{margin-bottom:0}

    .informe .tarjeta-glosario h2{padding:16px 18px}
    .informe .glosario{
      display:grid;
      grid-template-rows:repeat(13,auto);
      grid-auto-flow:column;
      grid-auto-columns:1fr;
      column-gap:32px;
      padding:18px 18px 10px;
    }
  }
}

/* --- Movimiento reducido --------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}