/* ==========================================================================
   Calculadora de maratón y media maratón — The Running Coach / ENFAF

   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}
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 aire interior
   y el chip de sección 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.
   Con medidas fijas se salía del recuadro por debajo de 300px. */
.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 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);
}
.pill .marca{display:inline-flex;align-items:center;padding:10px 4px;text-decoration:none}
.logo{width:clamp(112px,33vw,150px);height:auto}

.seccion{
  padding:9px clamp(11px,3.5vw,16px);
  border:1px solid var(--quinary);
  border-radius:50px;
  color:var(--text-primary);
  font-size:clamp(.75rem,2.6vw,.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="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="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}

/* 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){background:color-mix(in srgb,var(--secondary),#000 14%)}
.boton:disabled{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{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}

.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)}

/* --- 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)}

.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 ------------------------------------------------------------ */

@media print{
  @page{margin:14mm}
  :root{--content-size:100%}
  html,body{background:#fff;color:#111}
  .cabecera,.pie,.acciones,.no-imprimir{display:none !important}
  .contenido{max-width:none;padding:0}
  h1,h2,h3{color:#000}
  h1{font-size:22pt}
  h2{font-size:14pt;margin-top:18pt}
  .entradilla,.leyenda,.aviso{color:#333}
  .aviso{border-color:#999;background:none}
  .dato{border-color:#bbb;background:#f5f5f5;break-inside:avoid}
  .dato dt{color:#555}
  .dato dd{color:#000;font-size:15pt}
  .resumen{grid-template-columns:repeat(3,1fr)}
  /* La regla de pantalla "table.zonas tbody th" tiene más especificidad que
     "table.zonas th", así que hay que nombrarla aquí o las etiquetas Z1…Z5c
     se imprimen en blanco sobre blanco. */
  table.zonas th,table.zonas td,table.zonas tbody th{border-bottom-color:#ccc;color:#000}
  table.zonas thead th,table.zonas .pct,table.zonas caption{color:#555}
  /* El fondo oscuro de pantalla tiene que caer también aquí: si el usuario
     imprime con «Gráficos de fondo» activado —lo normal si quiere conservar
     los colores de fase— las sesiones salían en negro sobre negro. */
  .semana{background:#fff;border-color:#bbb;break-inside:avoid;page-break-inside:avoid;margin-bottom:10pt}
  .semana > summary{background:#f0f0f0;color:#000}
  .semana > summary::after{display:none}
  /* El papel es ancho: la cabecera de semana y la de sesión van siempre en la
     composición de una línea, sin depender de que la consulta de 560px se
     cumpla en el cuadro de página. */
  .semana > summary{
    grid-template-columns:auto 1fr;
    grid-template-areas:"id meta";
    gap:12px;
  }
  .sesion-titulo{order:2;flex:0 1 auto}
  .sesion-km{order:3}
  .sem-n,.sem-km,.sesion-titulo,.sesion-km,.bloque dd{color:#000}
  .sem-fechas,.sesion-fecha,.bloque dt{color:#444}
  /* #919090 sobre papel blanco se queda en 3,18:1 y no llega al 4,5:1 de AA. */
  .sem-km-ref,.dato .apunte{color:#555}
  .sesion{border-top-color:#ddd;break-inside:avoid}
  .sesion.carrera{background:#f7f7f7}
  .fase{border-color:#999 !important;background:none !important;color:#000}
  .ritmo{border-color:#666;background:none;color:#000}
  /* En papel los <details> van siempre abiertos. */
  .semana:not([open]) > .sesiones{display:block}
}

/* --- 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;
  }
}