/* ==========================================================
   PORTAL DE ENTRENAMIENTO — LOS ESTILOS
   ----------------------------------------------------------
   El portal es parte de efectomariposa.club: el mismo hueso
   (#f6f4ef), la misma tinta (#0e0d0b), Space Grotesk para leer e
   Instrument Serif en cursiva para el énfasis. Lo que cambia es el
   ritmo: la web cuenta una historia y esto es una herramienta que
   se usa de pie, con el móvil en una mano y una mancuerna en la
   otra. Por eso aquí manda lo práctico: botones de 44 px como
   mínimo, números grandes, contraste alto y nada que se mueva sin
   motivo.

   Las tipografías van servidas desde fuentes/ (la política de
   seguridad del portal no deja cargar nada de otros dominios), con
   font-display:swap: si tardan, se lee igual con la del sistema.

   Ni un estilo en línea en el HTML: todo está aquí. Así la política
   de seguridad puede prohibirlos, que es lo que impide que un texto
   escrito por alguien se convierta en un estilo inyectado.
   ========================================================== */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/space-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/space-grotesk-500.woff2") format("woff2"); }
/* No hay 600 propio: el navegador usa el 700 para "semibold", que es lo
   que hace también la web con su propia carga de Google. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fuentes/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/instrument-serif-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fuentes/instrument-serif-400-italica.woff2") format("woff2"); }

:root {
  --papel: #f6f4ef;
  --papel-2: #efece5;
  --blanco: #fffefb;
  --tinta: #0e0d0b;
  --tinta-2: #2a2622;
  --gris: #6a6a6a;
  --gris-2: #a09c92;
  --linea: #e6e2d9;
  --linea-2: #cfc9bc;

  --ok: #24572c;      --ok-fondo: #e6efe4;   --ok-borde: #c3d8bf;
  --aviso: #8a4d00;   --aviso-fondo: #fbf0dc; --aviso-borde: #ecd3a8;
  --error: #9b2a1f;   --error-fondo: #f8e3df; --error-borde: #ebc3bc;
  --info: #24507a;    --info-fondo: #e4edf6;  --info-borde: #c4d6e9;
  /* El óxido de la marca (los músculos, «Imagínate que…», la mariposa) y sus tintes. */
  --acento: #b4532f;  --acento-2: #8e3f22;    --acento-fondo: #f6e7de; --acento-borde: #e8bfa8;

  --sans: "Space Grotesk", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;

  --r-chico: 12px;
  --r-medio: 16px;
  --r-grande: 22px;
  --sombra-1: 0 1px 2px rgba(14, 13, 11, .05), 0 2px 8px rgba(14, 13, 11, .04);
  --sombra-2: 0 10px 30px rgba(14, 13, 11, .12);

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --alto-cabecera: 60px;
  --alto-menu-cliente: 64px;
  --aire: clamp(16px, 4vw, 36px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.portal {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--papel); color: var(--tinta);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.01em; }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 1.5rem 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--tinta); color: var(--papel); padding: .6rem 1rem; border-radius: 999px; text-decoration: none;
}
.saltar:focus { top: 12px; }
.tenue { color: var(--gris); }
.icono { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -.2em; }
.ojo {
  margin: 0 0 .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
}
.titular {
  font-size: clamp(1.75rem, 4.2vw, 2.7rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.06;
  text-wrap: balance;
}
/* La cursiva de la web: lo que va entre *asteriscos* en el texto. */
.titular em, .marca em, .foco__titulo em, .saludo em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; font-size: 1.08em;
}
.entradilla { color: var(--gris); font-size: 1rem; max-width: 62ch; margin-top: .6rem; }
.subtitulo { font-size: 1.02rem; font-weight: 600; margin: 1.5rem 0 .6rem; }

/* ---------- la marca ---------- */
.marca { display: inline-flex; flex-direction: column; line-height: 1.05; text-decoration: none; }
.marca__nombre { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; }
.marca__sub { font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); margin-top: 3px; white-space: nowrap; }

/* ==========================================================
   BOTONES
   ----------------------------------------------------------
   En mayúsculas, como todos los de la web (lo decide el CSS y no el
   texto: se lee y se edita en normal). 44 px de alto como mínimo:
   por debajo, un dedo falla más de lo que acierta.
   ========================================================== */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .65rem 1.15rem;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: .76rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; line-height: 1.1;
  text-decoration: none; cursor: pointer; text-align: center; max-width: 100%;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s var(--ease-out);
}
/* Los botones cortos no se parten; los de frase larga («Retirar el
   consentimiento de salud») sí, en dos líneas: con nowrap se salían de la
   pantalla en «Mi cuenta» a 360 px. */
.boton--peq, .boton--icono, .cabecera .boton, .mini-acciones .boton { white-space: nowrap; }
.boton:active { transform: scale(.97); }
.boton[disabled], .boton[aria-busy="true"] { opacity: .62; cursor: progress; }
.boton--primario { background: var(--tinta); color: var(--papel); }
.boton--secundario { background: var(--blanco); color: var(--tinta); border-color: var(--linea-2); }
.boton--fantasma { background: transparent; color: var(--tinta); }
.boton--peligro { background: var(--blanco); color: var(--error); border-color: var(--error-borde); }
@media (hover: hover) and (pointer: fine) {
  .boton--primario:hover { background: var(--tinta-2); }
  .boton--secundario:hover { border-color: var(--tinta); }
  .boton--fantasma:hover { background: var(--papel-2); }
  .boton--peligro:hover { background: var(--error); color: #fff; border-color: var(--error); }
}
.boton--peq { min-height: 36px; padding: .4rem .8rem; font-size: .7rem; }
.boton--grande { min-height: 56px; padding: .9rem 1.6rem; font-size: .86rem; }
.boton--icono { width: 40px; min-height: 40px; padding: 0; }
.boton--icono span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.botonera { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mini-acciones { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.mini-acciones form, .accion-post { display: inline-flex; margin: 0; max-width: 100%; }
.enlace {
  background: none; border: 0; padding: .4rem 0; font: inherit; font-size: .84rem; color: var(--gris);
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 36px;
}
@media (hover: hover) { .enlace:hover { color: var(--tinta); } }
@media (prefers-reduced-motion: reduce) { .boton { transition: background-color .16s ease, color .16s ease, border-color .16s ease; } .boton:active { transform: none; } }

/* ==========================================================
   EL MARCO: cabecera, menú del panel, menú del cliente
   ========================================================== */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .75rem;
  height: var(--alto-cabecera); padding: 0 var(--aire);
  padding-top: env(safe-area-inset-top);
  height: calc(var(--alto-cabecera) + env(safe-area-inset-top));
  background: rgba(246, 244, 239, .94);
  border-bottom: 1px solid var(--linea);
}
@supports (backdrop-filter: blur(8px)) { .cabecera { background: rgba(246, 244, 239, .82); backdrop-filter: saturate(1.2) blur(10px); } }
.cabecera__marca { text-decoration: none; margin-right: auto; }
.cabecera__acciones { display: flex; align-items: center; gap: .35rem; }
.cabecera__icono {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--tinta);
}
@media (hover: hover) { .cabecera__icono:hover { background: var(--papel-2); } }
.punto {
  position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: var(--tinta); color: var(--papel); font-size: .64rem; font-weight: 700; line-height: 1;
  border: 2px solid var(--papel);
}
.cabecera__quien { font-size: .86rem; font-weight: 600; padding: 0 .25rem; }
.cabecera__salir { margin: 0; }
@media (max-width: 560px) {
  .cabecera__quien { display: none; }
  .cabecera__salir .boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cabecera__salir .boton { width: 40px; padding: 0; }
}

/* El cajón del menú en el móvil (panel del entrenador). Es un <details>:
   funciona sin JavaScript, y el JavaScript solo lo cierra al tocar fuera. */
.cabecera__menu { display: none; }
.cabecera__menu > summary {
  list-style: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
}
.cabecera__menu > summary::-webkit-details-marker { display: none; }
.cabecera__menu[open] > summary { background: var(--papel-2); }
.menu-panel--cajon {
  position: fixed; left: 0; top: calc(var(--alto-cabecera) + env(safe-area-inset-top)); bottom: 0; z-index: 50;
  width: min(320px, 86vw); overflow-y: auto; padding: 1rem;
  background: var(--papel); border-right: 1px solid var(--linea); box-shadow: var(--sombra-2);
}

.marco--panel { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100dvh - var(--alto-cabecera)); }
.marco--panel > .menu-panel {
  position: sticky; top: var(--alto-cabecera); align-self: start; height: calc(100dvh - var(--alto-cabecera));
  overflow-y: auto; padding: 1.25rem .9rem; border-right: 1px solid var(--linea);
  display: flex; flex-direction: column;
}
.menu-panel ul { list-style: none; display: grid; gap: 2px; }
.menu-panel a {
  display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: .55rem .8rem; border-radius: var(--r-chico);
  text-decoration: none; color: var(--gris); font-size: .92rem; font-weight: 500;
  transition: background-color .16s ease, color .16s ease;
}
.menu-panel a .icono { width: 19px; height: 19px; }
@media (hover: hover) { .menu-panel a:hover { background: var(--papel-2); color: var(--tinta); } }
.menu-panel a.es-activo { background: var(--blanco); color: var(--tinta); font-weight: 600; box-shadow: var(--sombra-1); }
.menu-panel .contador { margin-left: auto; }
.menu-panel__web { margin-top: auto !important; font-size: .82rem !important; }
.contador {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--tinta); color: var(--papel); font-size: .68rem; font-weight: 700; line-height: 1;
}
@media (max-width: 960px) {
  .cabecera__menu { display: block; }
  .marco--panel { display: block; }
  .marco--panel > .menu-panel { display: none; }
}

.contenido { padding: clamp(18px, 3.4vw, 40px) var(--aire) 3.5rem; min-width: 0; outline: none; }
.marco--panel .contenido { max-width: 1240px; }
.marco--cliente .contenido {
  max-width: 760px; margin: 0 auto;
  padding-bottom: calc(var(--alto-menu-cliente) + 2.5rem + env(safe-area-inset-bottom));
}

/* El menú del cliente va abajo: es donde llega el pulgar. */
.menu-cliente {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255, 254, 251, .96); border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
@supports (backdrop-filter: blur(8px)) { .menu-cliente { background: rgba(255, 254, 251, .86); backdrop-filter: saturate(1.2) blur(12px); } }
.menu-cliente ul { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); max-width: 760px; margin: 0 auto; }
.menu-cliente a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--alto-menu-cliente); text-decoration: none; color: var(--gris-2); font-size: .68rem; font-weight: 600; letter-spacing: .02em;
}
.menu-cliente a .icono { width: 22px; height: 22px; }
.menu-cliente a.es-activo { color: var(--tinta); }
.menu-cliente a.es-activo::before {
  content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: 0 0 2px 2px; background: var(--tinta);
}
.menu-cliente .contador { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: .62rem; border: 2px solid var(--blanco); }

/* ==========================================================
   PÁGINAS DE ACCESO (entrar, recuperar, activar, instalar)
   ========================================================== */
.acceso {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  padding: max(28px, env(safe-area-inset-top)) var(--aire) max(28px, env(safe-area-inset-bottom));
}
.acceso__marca { text-decoration: none; margin: 0 0 clamp(28px, 7vh, 64px); }
.acceso__marca .marca__nombre { font-size: 1.22rem; }
.acceso__caja {
  width: 100%; max-width: 560px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande);
  padding: clamp(22px, 5vw, 40px); box-shadow: var(--sombra-1); outline: none;
}
.acceso--estrecho .acceso__caja { max-width: 440px; }
.titular--acceso { font-size: clamp(1.85rem, 6vw, 2.5rem); }
.acceso__caja .entradilla { margin-bottom: 1.4rem; }
.acceso__alt { margin-top: 1.1rem; font-size: .9rem; }
.acceso__nota { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); font-size: .84rem; color: var(--gris); }
.acceso__pie { margin-top: auto; padding-top: 2rem; font-size: .84rem; }
.acceso__pie a { display: inline-flex; align-items: center; gap: .4rem; color: var(--gris); text-decoration: none; min-height: 44px; }
@media (hover: hover) { .acceso__pie a:hover { color: var(--tinta); } }
.acceso__caja .formulario__acciones .boton { width: 100%; }
.consentimientos { display: grid; gap: .8rem; padding: 1rem; background: var(--papel); border-radius: var(--r-medio); }
.requisitos { list-style: none; display: grid; gap: .35rem; font-size: .9rem; margin: .5rem 0 1.2rem; }
.requisitos li { display: flex; gap: .5rem; align-items: flex-start; }
.requisitos .es-ok .icono { color: var(--ok); }
.requisitos .es-mal { color: var(--error); font-weight: 600; }
.error-pagina { max-width: 560px; padding: 2rem 0; }
.error-pagina .boton { margin-top: 1rem; }

/* ==========================================================
   FORMULARIOS
   ========================================================== */
.formulario { display: grid; gap: 1rem; }
.formulario--ancho { max-width: 780px; }
.formulario--linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1.25rem; }
.formulario--linea .campo { flex: 1 1 180px; }
.formulario--linea .formulario__acciones { margin: 0; }
.formulario__acciones { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .25rem; }
.campo { display: grid; gap: .35rem; min-width: 0; align-content: start; }
/* align-content: start porque, en una fila de la rejilla, el campo más alto (el que lleva
   ayuda debajo) estiraba los demás y sus cajas crecían hasta 70-90 px. */
.campo > label, .campo__etiqueta { font-size: .82rem; font-weight: 600; }
.campo__etiqueta { margin: .6rem 0 .1rem; }
.opcional { font-weight: 400; color: var(--gris); font-size: .76rem; margin-left: .25rem; }
.campo input:not([type=checkbox]):not([type=radio]):not([type=file]),
.campo select, .campo textarea, .buscador-select,
.serie__nota input {
  width: 100%; min-height: 46px; padding: .65rem .85rem;
  /* 16 px de verdad: por debajo, Safari en el iPhone amplía la página al tocar el campo. */
  font: inherit; font-size: 16px; color: var(--tinta);
  background: var(--blanco); border: 1px solid var(--linea-2); border-radius: var(--r-chico);
  transition: border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance: none; appearance: none;
}
.campo select, .buscador-select {
  padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.buscador-select { background-image: none; padding-right: .85rem; margin-bottom: .35rem; }
.campo textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .buscador-select:focus, .serie__nota input:focus {
  outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(14, 13, 11, .1);
}
.campo input[type=file] { font: inherit; font-size: .88rem; padding: .4rem 0; }
.campo input[readonly] { background: var(--papel); color: var(--gris); }
.campo--corto { max-width: 10rem; }
.campo--medio { max-width: 17rem; }
.campo__ayuda { margin: 0; font-size: .8rem; color: var(--gris); }
.campo__error { margin: 0; font-size: .82rem; font-weight: 600; color: var(--error); }
.campo--error input, .campo--error textarea, .campo--error select { border-color: var(--error) !important; }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem 1rem; }
.rejilla-campos--item { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.rejilla-campos .campo--corto, .rejilla-campos .campo--medio { max-width: none; }
.check { display: flex; align-items: flex-start; gap: .65rem; font-size: .92rem; line-height: 1.4; }
.check input { width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--tinta); flex: 0 0 auto; }
.check label { cursor: pointer; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .45rem 1rem; }
/* La columna de la rejilla es minmax(0, 1fr) y no "auto": con "auto", una
   rejilla de dentro (la escala del 1 al 10) imponía su ancho natural, el
   fieldset crecía a 470 px en un móvil de 390 y toda la página se salía. */
fieldset { border: 1px solid var(--linea); border-radius: var(--r-medio); padding: 1rem 1.1rem 1.15rem; margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
legend { font-weight: 600; font-size: .92rem; padding: 0 .4rem; display: inline-flex; align-items: center; gap: .4rem; }
.fieldset--protegido { background: #fbfaf6; border-style: dashed; border-color: var(--linea-2); }
.pregunta { background: var(--blanco); }
.pregunta--nueva { border-style: dashed; }

/* Escalas y sí/no: botones grandes para el pulgar (son radios de verdad). */
.escala { border: 0; padding: 0; gap: .5rem; }
.escala legend, .sino legend, .pregunta-c legend { padding: 0; font-size: .95rem; margin-bottom: .45rem; }
.escala__opciones, .sino__opciones, .segmentado { display: flex; flex-wrap: wrap; gap: 6px; }
.escala__opciones input, .sino__opciones input, .segmentado input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.escala__opciones label, .sino__opciones label, .segmentado label {
  display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 .8rem;
  border: 1px solid var(--linea-2); border-radius: var(--r-chico); background: var(--blanco);
  font-weight: 600; cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
/* Del 1 al 5, en una fila. Del 1 al 10, en dos filas de cinco en el móvil
   (diez casillas de 44 px no caben en 360) y en una sola fila con sitio. */
.escala__opciones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 560px; width: 100%; }
@media (min-width: 600px) { .escala__opciones:has(> label:nth-of-type(6)) { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.escala__opciones label { min-width: 0; padding: 0; }
.escala__opciones input:checked + label, .sino__opciones input:checked + label, .segmentado input:checked + label { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.escala__opciones input:focus-visible + label, .sino__opciones input:focus-visible + label, .segmentado input:focus-visible + label { outline: 2px solid var(--tinta); outline-offset: 2px; }
/* El selector de vista del calendario: el mismo gesto que las pestañas. */
nav.segmentado { display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 4px; background: var(--papel-2); border-radius: 999px; }
nav.segmentado a {
  display: inline-flex; align-items: center; min-height: 36px; padding: .35rem .9rem; border-radius: 999px;
  font-size: .82rem; font-weight: 500; color: var(--gris); text-decoration: none; transition: background-color .16s ease, color .16s ease;
}
@media (hover: hover) { nav.segmentado a:hover { color: var(--tinta); } }
nav.segmentado a.es-activa { background: var(--blanco); color: var(--tinta); font-weight: 600; box-shadow: var(--sombra-1); }
.escala__extremos { display: flex; justify-content: space-between; max-width: 560px; margin: .3rem 0 0; font-size: .76rem; color: var(--gris); }
.sino { border: 0; padding: 0; }
.cuestionario { display: grid; gap: 1.4rem; }
.pregunta-c { border: 0; padding: 0; }

/* ==========================================================
   PIEZAS
   ========================================================== */
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.encabezado > div:first-child { min-width: 0; flex: 1 1 320px; }
.encabezado__acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

.migas { margin-bottom: 1rem; font-size: .82rem; color: var(--gris); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.migas li + li::before { content: "/"; margin-right: .35rem; color: var(--gris-2); }
.migas a { color: var(--gris); text-decoration: none; }
@media (hover: hover) { .migas a:hover { color: var(--tinta); text-decoration: underline; } }

.tarjeta {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande); min-width: 0;
  box-shadow: var(--sombra-1);
}
.tarjeta__cabeza { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem 0; flex-wrap: wrap; }
.tarjeta__cabeza h2 { font-size: 1rem; font-weight: 600; }
.tarjeta__cuerpo { padding: .9rem 1.25rem 1.25rem; }
.tarjeta__dato { font-family: var(--serif); font-size: 2rem; line-height: 1.05; margin-bottom: .3rem; }
.tarjeta__dato a { text-decoration: none; }
@media (hover: hover) { .tarjeta__dato a:hover { text-decoration: underline; text-decoration-thickness: 1px; } }
.tarjeta--peligro { border-color: var(--error-borde); }
/* Solo fuera de las rejillas y las pilas: dentro, el gap ya separa, y el margen bajaba 16 px la segunda
   tarjeta de cada fila (en la portada, «Revisión» quedaba más baja que «Esta semana»). */
:where(:not(.pila):not(.rejilla)) > :is(.tarjeta, .rejilla) + :is(.tarjeta, .rejilla) { margin-top: 1rem; }
.rejilla { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 900px) {
  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--2-1 { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
}
.pila { display: grid; gap: 1rem; min-width: 0; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.indicador {
  display: grid; gap: .2rem; align-content: start; padding: 1rem 1.05rem; min-height: 104px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); text-decoration: none; color: inherit;
  transition: border-color .16s ease, transform .16s var(--ease-out);
}
a.indicador:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { a.indicador:hover { border-color: var(--linea-2); } }
.indicador__valor { font-family: var(--serif); font-size: 2.4rem; line-height: 1; letter-spacing: -.01em; }
.indicador__etiqueta { font-size: .8rem; font-weight: 600; }
.indicador__nota { font-size: .74rem; color: var(--gris); line-height: 1.35; }
.indicador--aviso { background: var(--aviso-fondo); border-color: var(--aviso-borde); }
.indicador--aviso .indicador__valor { color: var(--aviso); }
.indicador--ok .indicador__valor { color: var(--ok); }
.indicadores--peq .indicador { min-height: 0; }
.indicadores--peq .indicador__valor { font-size: 1.9rem; }

.insignia {
  display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--papel-2); color: #4a4640;
}
.insignia--ok { background: var(--ok-fondo); color: var(--ok); }
.insignia--aviso { background: var(--aviso-fondo); color: var(--aviso); }
.insignia--error { background: var(--error-fondo); color: var(--error); }
.insignia--info { background: var(--info-fondo); color: var(--info); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }

.aviso {
  display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem; margin-bottom: 1rem;
  border: 1px solid var(--info-borde); background: var(--info-fondo); color: var(--info); border-radius: var(--r-medio); font-size: .92rem;
}
.aviso .icono { margin-top: .12rem; }
.aviso p { margin: 0; }
.aviso--ok { border-color: var(--ok-borde); background: var(--ok-fondo); color: var(--ok); }
.aviso--aviso { border-color: var(--aviso-borde); background: var(--aviso-fondo); color: var(--aviso); }
.aviso--error { border-color: var(--error-borde); background: var(--error-fondo); color: var(--error); }
/* Bloque y no flex: una nota lleva a veces un enlace en mitad de la frase,
   y en un contenedor flex cada trozo de texto se volvía una columna. */
.nota { display: block; margin: .75rem 0 0; font-size: .82rem; color: var(--gris); line-height: 1.45; }
.nota::after { content: ""; display: table; clear: both; }
.nota > .icono:first-child { float: left; width: 16px; height: 16px; margin: .1rem .45rem 0 0; }
.nota a { color: var(--tinta); }
.nota .check { display: inline-flex; margin-left: .5rem; }
.vacio { text-align: center; padding: 2rem 1.25rem; border: 1px dashed var(--linea-2); border-radius: var(--r-medio); color: var(--gris); }
.vacio__titulo { color: var(--tinta); font-weight: 600; margin-bottom: .3rem; }
.vacio .boton { margin-top: .9rem; }

.pestanas { margin: 0 0 1.25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas ul { list-style: none; display: flex; gap: 4px; padding: 4px; background: var(--papel-2); border-radius: 999px; width: max-content; }
.pestanas a {
  display: inline-flex; align-items: center; min-height: 38px; padding: .45rem .95rem; border-radius: 999px;
  font-size: .84rem; font-weight: 500; color: var(--gris); text-decoration: none; white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
@media (hover: hover) { .pestanas a:hover { color: var(--tinta); } }
.pestanas a.es-activa { background: var(--blanco); color: var(--tinta); font-weight: 600; box-shadow: var(--sombra-1); }
.pestana { min-width: 0; }

/* Tablas. En el móvil, cada fila pasa a ser una ficha con sus etiquetas
   (las lleva cada celda en data-et): una tabla de seis columnas en 360 px
   no se lee, se arrastra. */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--r-medio); background: var(--blanco); }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th {
  text-align: left; padding: .7rem .85rem; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
  border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.tabla td { padding: .75rem .85rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla a { font-weight: 600; text-decoration: none; }
@media (hover: hover) { .tabla a:hover { text-decoration: underline; } }
.tabla__principal { display: block; font-weight: 600; }
.tabla__sub { display: block; font-size: .78rem; color: var(--gris); margin-top: 2px; }
@media (max-width: 720px) {
  .tabla-envoltura { border: 0; background: none; overflow: visible; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); padding: .5rem .9rem; margin-bottom: .6rem; }
  .tabla td { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--linea); text-align: right; }
  .tabla tr td:last-child { border-bottom: 0; }
  .tabla td::before { content: attr(data-et); flex: 0 0 auto; max-width: 45%; text-align: left; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); padding-top: .15rem; }
  .tabla td:first-child { display: block; text-align: left; }
  .tabla td:first-child::before { display: none; }
  .tabla td[data-et=""]::before { display: none; }
}

.datos { display: grid; margin: 0; }
.datos > div { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: .25rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linea); }
.datos > div:last-child { border-bottom: 0; }
.datos dt { font-size: .8rem; color: var(--gris); padding-top: .1rem; }
.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .datos > div { grid-template-columns: 1fr; } }

.lista-simple { list-style: none; }
.lista-simple li { border-bottom: 1px solid var(--linea); }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple a, .lista-simple li > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; text-decoration: none; }
.lista-simple--compacta a, .lista-simple--compacta li { padding: .45rem 0; font-size: .9rem; }
.lista-simple__meta { font-size: .78rem; color: var(--gris); text-align: right; flex: 0 0 auto; }
@media (hover: hover) { .lista-simple a:hover strong, .lista-simple a:hover > span:first-child { text-decoration: underline; } }
.lista-simple--avisos li.es-nuevo a, .lista-simple--avisos li.es-nuevo > div { font-weight: 600; }
.lista-simple--avisos li.es-nuevo a::before, .lista-simple--avisos li.es-nuevo > div::before {
  content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--tinta); align-self: center; margin-right: -.4rem;
}
@media (max-width: 520px) { .lista-simple a, .lista-simple li > div { flex-wrap: wrap; } .lista-simple__meta { text-align: left; } }

.tareas { list-style: none; display: grid; gap: .45rem; }
.tareas a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem .9rem; min-height: 48px;
  background: var(--papel); border-radius: var(--r-chico); text-decoration: none; font-size: .92rem;
  transition: background-color .16s ease;
}
@media (hover: hover) { .tareas a:hover { background: var(--papel-2); } }
.tareas a > .icono:first-child { color: var(--gris); }
.tareas__texto { flex: 1 1 auto; min-width: 0; }
.tareas__cuando { font-size: .76rem; color: var(--gris); white-space: nowrap; }

.filtros { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1.25rem; padding: 1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); }
.filtros .campo { flex: 1 1 160px; }
.filtros .campo--buscar { flex: 2 1 240px; }
.filtros__acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.filtros--compactos { padding: .75rem; }

.cita { margin: .8rem 0; padding: .1rem 0 .1rem 1rem; border-left: 2px solid var(--linea-2); }
.cita p { font-family: var(--serif); font-style: italic; font-size: 1.18rem; line-height: 1.35; }
.cita footer { margin-top: .35rem; font-size: .76rem; color: var(--gris); }
.nota-entrenador {
  display: flex; gap: .75rem; align-items: flex-start; margin: 1rem 0; padding: .95rem 1.05rem;
  background: var(--papel); border-radius: var(--r-medio); font-size: .95rem;
}
.nota-entrenador .icono { margin-top: .15rem; color: var(--gris); }
.cambios { margin: .6rem 0 0 1.1rem; font-size: .9rem; display: grid; gap: .2rem; }
.instrucciones { margin-top: 1rem; }
.instrucciones h3 { font-size: .92rem; margin-bottom: .4rem; }
.historial { list-style: none; display: grid; }
.historial li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: .2rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linea); font-size: .9rem; }
.historial__cuando { color: var(--gris); font-size: .8rem; }
.historial__quien { grid-column: 2; color: var(--gris); font-size: .78rem; }
.ficha-estado { margin-bottom: 1rem; }
.punto-aviso { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--aviso); margin-right: .35rem; }

/* ==========================================================
   INICIO DEL CLIENTE
   ========================================================== */
.saludo { margin-bottom: 1.25rem; }
.saludo .titular { font-size: clamp(2rem, 8vw, 2.8rem); }
.novedades { padding: 1rem 1.15rem; margin-bottom: 1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande); }
/* La sesión de hoy: lo único que importa al abrir el portal, en tinta. */
.foco {
  position: relative; margin-bottom: 1rem; padding: clamp(1.25rem, 5vw, 1.8rem);
  background: var(--tinta); color: var(--papel); border-radius: var(--r-grande); overflow: hidden;
}
.foco .ojo { color: rgba(246, 244, 239, .6); }
.foco__titulo { font-size: clamp(1.8rem, 7vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; margin-bottom: .35rem; }
.foco__obj { font-size: 1rem; color: rgba(246, 244, 239, .82); margin-bottom: .4rem; }
.foco__meta { font-size: .84rem; color: rgba(246, 244, 239, .6); }
.foco .empezar { margin: 1.1rem 0 .8rem; }
.foco .boton--primario { background: var(--papel); color: var(--tinta); width: 100%; }
@media (hover: hover) and (pointer: fine) { .foco .boton--primario:hover { background: #fff; } }
.foco .boton--secundario { background: transparent; color: var(--papel); border-color: rgba(246, 244, 239, .35); }
.foco__alt { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .86rem; }
.foco__alt a { color: rgba(246, 244, 239, .8); min-height: 36px; display: inline-flex; align-items: center; }
.foco--vacio { background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); }
.foco--vacio .ojo, .foco--vacio .foco__meta { color: var(--gris); }
.foco--vacio .foco__obj { color: var(--gris); }
.foco .datos > div { border-color: rgba(246, 244, 239, .15); }
.foco .datos dt { color: rgba(246, 244, 239, .6); }
.foco .avance span { color: rgba(246, 244, 239, .75); }
/* «.foco .avance», no «.foco»: las reglas de .avance van después y con la misma especificidad, así que
   ganaban y en la caja oscura la barra salía al revés (lo hecho en negro invisible, lo que falta en blanco). */
.foco .avance progress { background: rgba(246, 244, 239, .18); }
.foco .avance progress::-webkit-progress-bar { background: rgba(246, 244, 239, .18); }
.foco .avance progress::-webkit-progress-value { background: var(--papel); }
.foco .avance progress::-moz-progress-bar { background: var(--papel); }
.semana p { margin-top: .5rem; }
.avance { display: flex; align-items: center; gap: .75rem; }
.avance progress {
  flex: 1 1 auto; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--papel-2);
  -webkit-appearance: none; appearance: none;
}
.avance progress::-webkit-progress-bar { background: var(--papel-2); border-radius: 999px; }
.avance progress::-webkit-progress-value { background: var(--tinta); border-radius: 999px; transition: width .3s var(--ease-out); }
.avance progress::-moz-progress-bar { background: var(--tinta); border-radius: 999px; }
.avance span { font-size: .8rem; font-weight: 600; white-space: nowrap; color: var(--gris); }
.menu-mas { list-style: none; display: grid; gap: .5rem; margin-bottom: 1rem; }
.menu-mas a {
  display: flex; align-items: center; gap: .8rem; min-height: 56px; padding: .8rem 1rem; text-decoration: none;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); font-weight: 500;
}
.menu-mas a > span { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.menu-mas a > span .tenue { font-size: .82rem; font-weight: 400; }
.menu-mas .icono.ir { color: var(--gris); }
.menu-mas .punto-aviso { margin: 0; }
.menu-mas--secundario a { background: transparent; }
.salir-grande { margin-top: 1.5rem; }
.salir-grande .boton { width: 100%; }
.opciones { display: grid; gap: .5rem; }
.opcion { display: block; padding: .9rem 1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); text-decoration: none; }

/* ==========================================================
   PROGRAMAS: lo que ve el cliente (y la vista previa)
   ========================================================== */
.vista-cliente { margin-bottom: 1rem; }
.resumen-programa { margin-bottom: 1.25rem; }
/* Los datos del programa en el constructor: plegados en una línea que
   resume lo importante; se despliegan para editar. */
.datos-programa { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); margin: 1rem 0 .5rem; }
.datos-programa > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .8rem;
  padding: .85rem 2.6rem .85rem 1rem; position: relative; min-height: 48px;
}
.datos-programa > summary::-webkit-details-marker { display: none; }
.datos-programa > summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 1.15rem; width: 8px; height: 8px;
  border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(45deg); transition: transform .2s var(--ease-out);
}
.datos-programa[open] > summary::after { transform: rotate(-135deg); top: 1.35rem; }
.datos-programa > .formulario { padding: 0 1rem 1rem; }
.datos-programa__t { font-size: .7rem; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .12em; }
.datos-programa > summary .tenue { color: var(--tinta); font-size: .92rem; }
.sesion {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande); margin-bottom: 1rem; overflow: hidden;
}
details.sesion > summary { list-style: none; cursor: pointer; }
details.sesion > summary::-webkit-details-marker { display: none; }
.sesion__cabeza { padding: 1.1rem 1.25rem; }
details.sesion > summary .sesion__cabeza { position: relative; padding-right: 3rem; }
details.sesion > summary .sesion__cabeza::after {
  content: ""; position: absolute; right: 1.35rem; top: 1.45rem; width: 9px; height: 9px;
  border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(45deg); transition: transform .2s var(--ease-out);
}
details.sesion[open] > summary .sesion__cabeza::after { transform: rotate(-135deg); top: 1.7rem; }
.sesion__titulo { font-size: 1.22rem; font-weight: 600; }
.sesion__titulo a { text-decoration: none; }
.sesion__meta { display: flex; align-items: center; gap: .35rem; margin: .3rem 0 0; font-size: .82rem; color: var(--gris); }
.sesion__meta .icono { width: 15px; height: 15px; }
.sesion__objetivo { margin: .3rem 0 0; color: var(--gris); font-size: .92rem; }
.sesion__cuerpo { padding: 0 1.25rem 1.25rem; }
.bloque { padding-top: 1rem; border-top: 1px solid var(--linea); margin-top: .2rem; }
.bloque + .bloque { margin-top: 1rem; }
.bloque__cabeza { display: flex; align-items: center; gap: .65rem; margin-bottom: .6rem; }
.bloque__letra {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%;
  background: var(--tinta); color: var(--papel); font-size: .72rem; font-weight: 700;
}
.bloque__titulo { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bloque__formato { margin: .1rem 0 0; font-size: .8rem; color: var(--gris); }
.bloque__notas { margin: .4rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--gris); line-height: 1.35; }
/* Superseries y circuitos: una línea une los ejercicios que van seguidos. */
.bloque--agrupado .items { border-left: 2px solid var(--tinta); margin-left: 12px; padding-left: .9rem; }
.items { list-style: none; display: grid; gap: .1rem; }
.item { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: .65rem; padding: .7rem 0; border-bottom: 1px solid var(--linea); }
.item:last-child { border-bottom: 0; }
.item__codigo {
  display: inline-grid; place-items: center; height: 26px; padding: 0 .35rem; border-radius: 8px;
  background: var(--papel-2); font-size: .74rem; font-weight: 700; align-self: start;
}
.item__nombre { margin: 0; font-weight: 600; font-size: 1rem; }
.item__nombre a { text-decoration: none; }
@media (hover: hover) { .item__nombre a:hover { text-decoration: underline; } }
.item__prescripcion { margin: .1rem 0 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.item__detalles { margin: .15rem 0 0; font-size: .84rem; color: var(--gris); }
.item__obs { margin: .35rem 0 0; font-size: .88rem; }
.item__alt, .item__prog { display: flex; align-items: flex-start; gap: .35rem; margin: .3rem 0 0; font-size: .82rem; color: var(--gris); }
.item__alt .icono, .item__prog .icono { width: 15px; height: 15px; margin-top: .1rem; }
.item__como { margin-top: .5rem; }
.item__como > summary, .editar > summary, .anadir > summary, .escribir__mas > summary, .serie__mas > summary {
  list-style: none; cursor: pointer;
}
.item__como > summary::-webkit-details-marker, .editar > summary::-webkit-details-marker, .anadir > summary::-webkit-details-marker,
.escribir__mas > summary::-webkit-details-marker, .serie__mas > summary::-webkit-details-marker { display: none; }
.item__como > summary {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; font-size: .82rem; font-weight: 600; color: var(--tinta);
  text-decoration: underline; text-underline-offset: .2em;
}
.item__como[open] > summary { margin-bottom: .4rem; }
.item__como, .ficha-ej { font-size: .9rem; }
.item__como p, .ficha-ej p { margin: .4rem 0; }
/* Los pasos, numerados en un círculo y con aire entre ellos: se siguen con el móvil en la mano. */
.pasos { list-style: none; counter-reset: paso; margin: .5rem 0 .7rem; display: grid; gap: .5rem; max-width: 64ch; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .55rem; align-items: start; line-height: 1.45; }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tinta); color: var(--papel); font-size: .75rem; font-weight: 700; }
.como__etq { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: .15rem; }
.como__empieza { max-width: 64ch; }
.como__clave { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem .75rem; border-radius: var(--r-chico); background: var(--ok-fondo); color: var(--tinta); max-width: 64ch; }
.como__clave .icono { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .15rem; color: var(--ok); }
.como__errores { margin: .5rem 0; }
.errores { list-style: none; margin: .2rem 0 .4rem; display: grid; gap: .25rem; max-width: 64ch; }
.errores li { position: relative; padding-left: 1.1rem; }
.errores li::before { content: ""; position: absolute; left: .15rem; top: .55em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--error); opacity: .7; }
.como__titulo { font-weight: 600; margin-top: .6rem !important; }
.seguridad { display: flex; gap: .45rem; align-items: flex-start; padding: .6rem .75rem; border-radius: var(--r-chico); background: var(--aviso-fondo); color: var(--aviso); max-width: 64ch; }
.seguridad .icono { flex: 0 0 auto; }
.ficha-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 1rem; }
.ficha-chips span { padding: .2rem .65rem; border-radius: 999px; background: var(--papel-2); font-size: .8rem; }
.ficha-ej__ver { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 720px) { .ficha-ej__ver { grid-template-columns: 1fr; } }
.ficha-bloque { margin-top: 1.4rem; }
.ficha-bloque__t { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.variantes { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.variantes li { display: flex; gap: .55rem; align-items: flex-start; padding: .7rem .8rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-chico); font-size: .9rem; }
.variantes li .icono { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .1rem; color: var(--gris); }
.variantes strong { display: block; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .1rem; }
.ficha-sinonimos { font-size: .8rem; margin-top: 1rem; }
/* Listas que salen de un texto (instrucciones, el porqué del programa base, revisiones): con aire y un punto de color. */
.lista-puntos { list-style: none; display: grid; gap: .45rem; margin: .4rem 0 .8rem; max-width: 68ch; }
.lista-puntos li { position: relative; padding-left: 1.2rem; line-height: 1.45; }
.lista-puntos li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .45rem; height: .45rem; border-radius: 50%; background: #b4532f; }
.instrucciones, .nota-entrenador, .razonamiento__cuerpo, .cita { max-width: 72ch; }
.seguridad .icono { width: 16px; height: 16px; margin-top: .12rem; }
.prescrito { padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--tinta); color: var(--papel); border-radius: var(--r-medio); }
.prescrito .ojo { color: rgba(246, 244, 239, .6); }
.prescrito__linea { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.prescrito .item__obs { color: rgba(246, 244, 239, .82); }
.media { margin-top: 1rem; }

/* Biblioteca */
.tarjetas-ej { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.tarjetas-ej > li { display: grid; }
.tarjeta-ej {
  display: grid; gap: .3rem; align-content: start; padding: 1rem 1.05rem; min-height: 112px; text-decoration: none;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio);
  transition: border-color .16s ease;
}
@media (hover: hover) and (pointer: fine) { .tarjeta-ej:hover { border-color: var(--tinta); } }
.tarjeta-ej.es-archivado { opacity: .6; }
.tarjeta-ej__nombre { font-weight: 600; font-size: 1rem; }
.tarjeta-ej__meta { font-size: .78rem; color: var(--gris); }
.tarjeta-ej__musc { font-size: .8rem; }

/* ==========================================================
   CONSTRUCTOR DE RUTINAS
   ========================================================== */
.constructor { margin-top: 1.5rem; }
.constructor__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.constructor__cabeza h2 { font-size: 1.2rem; }
.ed-sesion { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.ed-sesion__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.ed-sesion__cabeza h3 { font-size: 1.15rem; }
.ed-sesion__obj { margin: .25rem 0 0; font-size: .88rem; }
.ed-bloque { margin-top: .9rem; padding: .85rem .9rem; background: var(--papel); border-radius: var(--r-medio); }
.ed-bloque--agrupado { box-shadow: inset 3px 0 0 var(--tinta); }
.ed-bloque__cabeza { display: flex; align-items: center; gap: .6rem; }
.ed-bloque__cabeza > div:not(.mini-acciones) { flex: 1 1 auto; min-width: 0; }
.ed-bloque__cabeza h4 { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ed-bloque__cabeza p { margin: 0; font-size: .78rem; }
.ed-items { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; margin-top: .7rem; }
.ed-item { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-chico); padding: .55rem .65rem; }
.ed-item__fila { display: flex; align-items: center; gap: .65rem; }
.ed-item__texto { flex: 1 1 auto; min-width: 0; }
.ed-item__texto .item__nombre { font-size: .94rem; }
.ed-item__texto .item__prescripcion { font-size: .9rem; }
/* Los botones de mover, duplicar y borrar en una sola fila: partidos en dos
   filas, cada ejercicio del constructor medía el doble en el móvil. */
.ed-sesion__cabeza .mini-acciones, .ed-bloque__cabeza .mini-acciones, .ed-item .mini-acciones { flex-wrap: nowrap; flex: 0 0 auto; }
.ed-item .mini-acciones .boton--icono, .ed-bloque__cabeza .mini-acciones .boton--icono, .ed-sesion__cabeza .mini-acciones .boton--icono { width: 36px; min-height: 36px; }
@media (max-width: 420px) {
  /* Con los cuatro botones a la derecha queda poco texto: la pastilla de la capacidad («Fuerza-resistencia»)
     se parte en vez de empujar la fila 18 px fuera de la pantalla (pasaba en el constructor a 360 px). */
  .ed-item .trabaja__cap { white-space: normal; overflow-wrap: anywhere; }
  .ed-sesion { padding: .9rem .8rem; }
  .ed-bloque { padding: .75rem .6rem; }
  .ed-item { padding: .5rem .5rem; }
  .ed-item .mini-acciones .boton--icono, .ed-bloque__cabeza .mini-acciones .boton--icono, .ed-sesion__cabeza .mini-acciones .boton--icono { width: 34px; }
}
.editar > summary {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; margin-top: .35rem; padding: 0 .7rem;
  border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
}
@media (hover: hover) { .editar > summary:hover { color: var(--tinta); background: var(--papel-2); } }
.editar[open] > summary { color: var(--tinta); }
.editar > .formulario { margin: .5rem 0 .25rem; padding: .9rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); }
.ed-bloque .editar > .formulario { background: var(--blanco); }
.anadir { margin-top: .7rem; }
.anadir > summary {
  display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .5rem 1rem;
  border: 1px dashed var(--linea-2); border-radius: var(--r-chico); font-size: .8rem; font-weight: 600; color: var(--gris);
}
@media (hover: hover) { .anadir > summary:hover { color: var(--tinta); border-color: var(--tinta); } }
.anadir[open] > summary { border-style: solid; color: var(--tinta); margin-bottom: .5rem; }
.anadir > .formulario { padding: .9rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); }
.anadir--bloque > summary { background: transparent; }

/* ==========================================================
   CALENDARIO
   ========================================================== */
.barra-cal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.barra-cal__nav { display: flex; align-items: center; gap: .35rem; }
.barra-cal__titulo { font-size: 1.1rem; font-weight: 600; margin: 0 .4rem; }
.cal-mes { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); overflow: hidden; }
.cal-mes__cab, .cal-mes__fila { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-mes__cab span { padding: .5rem; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); border-bottom: 1px solid var(--linea); }
.cal-mes__dia { min-height: 104px; padding: .35rem; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-mes__dia:nth-child(7n) { border-right: 0; }
.cal-mes__fila:last-child .cal-mes__dia { border-bottom: 0; }
.cal-mes__num { font-size: .78rem; font-weight: 600; color: var(--gris); padding: .1rem .2rem; }
.cal-mes__dia.es-fuera { background: #fbfaf7; }
.cal-mes__dia.es-fuera .cal-mes__num { color: var(--gris-2); }
.cal-mes__dia.es-hoy .cal-mes__num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tinta); color: var(--papel); padding: 0; }
@media (max-width: 720px) {
  .cal-mes__dia { min-height: 64px; padding: .2rem; }
  .cal-mes .ev__titulo, .cal-mes .ev__cliente, .cal-mes .ev__hora { display: none; }
  .cal-mes .ev { padding: 0; min-height: 8px; height: 8px; border-radius: 4px; border-left: 0; }
  .cal-mes .ev__tipo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.cal-semana__dia { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); padding: .6rem; min-height: 140px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-semana__dia h3 { font-size: .9rem; margin-bottom: .3rem; }
.cal-semana__dia h3 span { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-right: .2rem; }
.cal-semana__dia.es-hoy { border-color: var(--tinta); }
@media (max-width: 900px) { .cal-semana { grid-template-columns: 1fr; } .cal-semana__dia { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; } .cal-semana__dia h3 { margin: 0 .5rem 0 0; min-width: 70px; } }
.cal-vacio { margin: 0; color: var(--gris-2); font-size: .82rem; }
.cal-lista { list-style: none; display: grid; gap: .6rem; }
.cal-lista__dia { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: .5rem 1rem; padding: .8rem 1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); }
.cal-lista__dia.es-hoy { border-color: var(--tinta); }
.cal-lista__fecha { margin: 0; font-size: .88rem; }
.cal-lista__fecha span { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.cal-lista__eventos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (max-width: 560px) { .cal-lista__dia { grid-template-columns: 1fr; } }
.ev {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35rem; padding: .22rem .45rem; border-radius: 7px;
  font-size: .74rem; line-height: 1.3; text-decoration: none; color: var(--tinta); background: var(--papel); border-left: 3px solid var(--gris-2); min-width: 0;
}
.ev__tipo { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.ev__titulo { font-weight: 600; overflow-wrap: anywhere; }
.ev__cliente, .ev__hora { color: var(--gris); }
.ev--hecho, .ev--hecha { background: var(--ok-fondo); border-left-color: var(--ok); }
.ev--revision { background: var(--aviso-fondo); border-left-color: var(--aviso); }
.ev--recordatorio, .ev--sesion { background: var(--info-fondo); border-left-color: var(--info); }
.ev--perdida { background: var(--error-fondo); border-left-color: var(--error); }
.ev--prevista { background: var(--papel); border-left-color: var(--tinta); }
.ev--descanso { background: var(--papel-2); }
.ev--llamada { background: var(--acento-fondo); border-left-color: var(--acento); }
@media (hover: hover) { a.ev:hover .ev__titulo { text-decoration: underline; } }
.leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .8rem; font-size: .78rem; color: var(--gris); }

/* ==========================================================
   MENSAJES
   ========================================================== */
.bandeja { list-style: none; display: grid; gap: .5rem; }
.bandeja__hilo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; padding: .9rem 1rem; text-decoration: none;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio);
}
.bandeja__hilo.es-pendiente { border-color: var(--tinta); }
.bandeja__quien { font-weight: 600; }
.bandeja__ultimo { grid-column: 1 / -1; color: var(--gris); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeja__cuando { font-size: .76rem; color: var(--gris); text-align: right; }
.conversacion { display: grid; gap: 1rem; }
.hilo { list-style: none; display: flex; flex-direction: column; gap: .65rem; padding: .5rem 0; }
.hilo__dia { text-align: center; margin: .5rem 0; }
.hilo__dia span { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); background: var(--papel-2); padding: .25rem .65rem; border-radius: 999px; }
.hilo__msg { display: flex; flex-direction: column; max-width: min(82%, 560px); }
.hilo__msg--mio { align-self: flex-end; align-items: flex-end; }
.hilo__msg--otro { align-self: flex-start; }
.hilo__burbuja { padding: .7rem .9rem; border-radius: 18px; background: var(--blanco); border: 1px solid var(--linea); font-size: .95rem; overflow-wrap: anywhere; }
.hilo__msg--mio .hilo__burbuja { background: var(--tinta); color: var(--papel); border-color: var(--tinta); border-bottom-right-radius: 6px; }
.hilo__msg--otro .hilo__burbuja { border-bottom-left-radius: 6px; }
.hilo__meta { margin: .25rem .4rem 0; font-size: .72rem; color: var(--gris); }
.hilo__refs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem !important; }
.hilo__ref { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 999px; font-size: .76rem; background: var(--papel); color: var(--tinta); }
.hilo__ref .icono { width: 14px; height: 14px; }
.hilo__msg--mio .hilo__ref { background: rgba(246, 244, 239, .14); color: var(--papel); }
.hilo__adjunto { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .84rem; color: inherit; }
.hilo__msg--mio .hilo__adjunto .tenue { color: rgba(246, 244, 239, .65); }
.escribir { position: sticky; bottom: 0; display: grid; gap: .6rem; padding: .9rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande); box-shadow: var(--sombra-1); }
.marco--cliente .escribir { bottom: calc(var(--alto-menu-cliente) + env(safe-area-inset-bottom) + 8px); }
.escribir textarea { min-height: 56px !important; }
.escribir__mas > summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; font-size: .8rem; color: var(--gris); }
.escribir__mas[open] > summary { margin-bottom: .5rem; }
.escribir__mas .rejilla-campos { margin-bottom: .6rem; }

/* ==========================================================
   REVISIONES Y DOCUMENTOS
   ========================================================== */
.respuestas { display: grid; margin: 0; }
.respuestas > div { padding: .7rem 0; border-bottom: 1px solid var(--linea); }
.respuestas > div:last-child { border-bottom: 0; }
.respuestas dt { font-size: .84rem; color: var(--gris); display: flex; align-items: center; gap: .3rem; }
.respuestas dt .icono { width: 14px; height: 14px; }
.respuestas dd { margin: .2rem 0 0; }
.respuestas__detalle { margin-top: .3rem; padding-left: .75rem; border-left: 2px solid var(--linea-2); font-size: .92rem; }
.es-salud dd { background: #fbfaf6; }
.escala-valor { font-family: var(--serif); font-size: 1.5rem; line-height: 1; }
.respuesta-entrenador { padding: 1rem 1.1rem; background: var(--papel); border-radius: var(--r-medio); margin-top: 1rem; }
.documentos { list-style: none; display: grid; gap: .6rem; }
.documento {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .9rem; align-items: center; padding: .9rem 1rem;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio);
}
.documento__icono { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-chico); background: var(--papel); }
.documento__titulo { margin: 0; font-weight: 600; }
.documento__texto .tenue { font-size: .8rem; margin: .1rem 0 0; }
.documento__acciones { grid-column: 1 / -1; display: flex; gap: .45rem; flex-wrap: wrap; }
@media (min-width: 640px) { .documento { grid-template-columns: auto minmax(0, 1fr) auto; } .documento__acciones { grid-column: auto; } }

/* Gráficas: SVG del servidor, coloreado aquí. */
.graficas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .9rem; }
.grafica { margin: 0; padding: 1rem 1.05rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); }
.grafica figcaption { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .5rem; }
.grafica figcaption span { font-size: .82rem; color: var(--gris); }
.graf { width: 100%; height: auto; display: block; overflow: visible; }
.graf__guia { stroke: var(--linea); stroke-width: 1; }
.graf__eje { fill: var(--gris); font-size: 13px; font-family: var(--sans); }
.graf__area { fill: rgba(14, 13, 11, .05); }
.graf__linea { fill: none; stroke: var(--tinta); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.graf__punto { fill: var(--blanco); stroke: var(--tinta); stroke-width: 2; }
.graf__punto--ultimo { fill: var(--tinta); }

/* ==========================================================
   MODO ENTRENAMIENTO
   ----------------------------------------------------------
   Se usa entre series, con prisa y a veces sudando. Los campos
   son grandes, el «hecho» es un círculo de 48 px que se pulsa con
   el pulgar, y el descanso aparece solo encima del menú.
   ========================================================== */
.entreno { position: relative; }
.entreno__barra {
  position: sticky; top: calc(var(--alto-cabecera) + env(safe-area-inset-top)); z-index: 30;
  display: flex; align-items: center; gap: .6rem; margin: 0 calc(-1 * var(--aire)) .75rem; padding: .55rem var(--aire);
  background: rgba(246, 244, 239, .96); border-bottom: 1px solid var(--linea);
}
.entreno__titulo { flex: 1 1 auto; min-width: 0; }
.entreno__nombre { margin: 0; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entreno__reloj { margin: 0; font-size: .8rem; color: var(--gris); font-variant-numeric: tabular-nums; }
/* Reloj y «Reiniciar» en la misma línea: lo que se pone a cero, al lado de lo que lo hace. */
.entreno__reloj-fila { display: flex; align-items: center; gap: .7rem; }
.entreno__reinicio { margin: 0; }
.entreno__reiniciar { display: inline-flex; align-items: center; gap: .25rem; min-height: 32px; font-size: .76rem; color: var(--gris); text-decoration: none; }
.entreno__reiniciar .icono { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .entreno__reiniciar:hover { color: var(--tinta); text-decoration: underline; } }
/* Volver a empezar y descartar, debajo de «He terminado»: a mano, pero sin competir con él. */
.entreno__otras { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; margin-top: 1rem; }
.entreno__otras form { margin: 0; }
.entreno__otras .enlace { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-size: .86rem; color: var(--gris); }
.entreno__otras .icono { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .entreno__otras .enlace:hover { color: var(--tinta); } }
.entreno__avance { margin-bottom: 1rem; }
.e-bloque { margin-bottom: 1.4rem; }
.e-bloque__cabeza { display: flex; align-items: center; gap: .65rem; margin-bottom: .6rem; }
.e-bloque__cabeza h2 { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.e-bloque__cabeza p { margin: .1rem 0 0; font-size: .8rem; color: var(--gris); }
.e-bloque .bloque__notas { margin: -.2rem 0 .7rem; }
.e-bloque--agrupado > .e-item { border-left: 3px solid var(--tinta); }
.e-item {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande); padding: 1rem; margin-bottom: .65rem;
  scroll-margin-top: calc(var(--alto-cabecera) + 70px); transition: border-color .2s ease, background-color .2s ease;
}
.e-item.es-hecho { border-color: var(--ok-borde); }
.e-item__cabeza { display: flex; gap: .7rem; align-items: flex-start; }
.e-item__cabeza h3 { font-size: 1.08rem; font-weight: 600; }
.e-item.es-hecho .e-item__cabeza .item__codigo { background: var(--ok); color: #fff; }
.e-item .item__prescripcion { font-size: 1.15rem; }
.e-item .item__como { margin: .5rem 0 .2rem; }
.series { display: grid; gap: .45rem; margin-top: .75rem; }
.serie {
  /* Una serie en una sola fila hasta en 360 px: número, los datos (que se
     reparten el hueco), el círculo de «hecha» y el «…». Medido: a 360 px
     quedan 280 px dentro de la tarjeta y la fila mínima ocupa 276. */
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 46px 30px; align-items: center; gap: 6px;
  padding: .45rem; border-radius: var(--r-medio);
  background: var(--papel); border: 1px solid transparent; transition: background-color .2s ease, border-color .2s ease;
  scroll-margin-top: calc(var(--alto-cabecera) + 70px);
}
.serie.es-hecha { background: var(--ok-fondo); border-color: var(--ok-borde); }
.serie.es-no { background: var(--error-fondo); border-color: var(--error-borde); }
.serie__n {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--blanco); font-size: .74rem; font-weight: 700; text-align: center; line-height: 1;
}
.serie__campos { display: flex; gap: 5px; min-width: 0; }
.serie__campo { position: relative; display: block; flex: 1 1 0; min-width: 0; }
.serie__campo--rpe { flex: 0 0 58px; }
.serie__campo input, .serie__campo select {
  width: 100%; height: 48px; padding: 0 .4rem 0 .6rem; border: 1px solid var(--linea-2); border-radius: var(--r-chico); background: var(--blanco);
  font: inherit; font-size: 18px; font-weight: 600; color: var(--tinta); text-align: left;
  -webkit-appearance: none; appearance: none; -moz-appearance: textfield;
}
.serie__campo input::-webkit-outer-spin-button, .serie__campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.serie__campo input { padding: 12px 6px 0 9px; }
.serie__campo input::placeholder { color: var(--gris-2); font-weight: 500; }
/* La unidad, pequeña en la esquina de arriba: a 360 px cada casilla mide
   unos 60 px y con la unidad al lado del número («10 reps») se pisaban. */
.serie__campo span { position: absolute; right: 7px; top: 5px; font-size: .56rem; font-weight: 600; letter-spacing: .04em; color: var(--gris); pointer-events: none; line-height: 1; }
.serie__campo--rpe select { font-size: 15px; text-align: center; text-align-last: center; padding: 0 .2rem; color: var(--tinta); }
.serie__campo input:focus, .serie__campo select:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(14, 13, 11, .1); }
.serie__hecha { position: relative; display: inline-grid; cursor: pointer; }
.serie__hecha input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.serie__hecha > span {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--linea-2); background: var(--blanco); color: transparent;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s var(--ease-out);
}
.serie__hecha > span .icono { width: 22px; height: 22px; }
.serie__hecha:active > span { transform: scale(.94); }
.serie__hecha input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.serie__hecha input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }
.serie__mas { position: relative; }
.serie__mas { position: relative; }
.serie__mas > summary { display: inline-grid; place-items: center; width: 30px; height: 46px; border-radius: var(--r-chico); color: var(--gris); }
.serie__mas[open] > summary { color: var(--tinta); background: var(--blanco); }
/* Lo de dentro del «…», como un menú que sale debajo del botón: no mueve
   la fila ni empuja las series de abajo mientras se escribe la nota. */
.serie__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; width: min(270px, 80vw);
  display: grid; gap: .65rem; padding: .8rem; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--r-medio); box-shadow: var(--sombra-2);
}
.serie__nota { display: grid; gap: .25rem; font-size: .78rem; font-weight: 600; }
.serie__guardar { grid-column: 2 / -1; min-height: 44px; }
.js .serie__guardar { display: none; }
.serie__estado { grid-column: 2 / -1; font-size: .74rem; color: var(--gris); min-height: 0; }
.serie__estado:empty { display: none; }
.serie__estado--ok { color: var(--ok); }
.serie__estado--error { color: var(--error); font-weight: 600; }
.serie__estado--aviso { color: var(--aviso); font-weight: 600; }
.serie__crono { min-height: 48px; flex: 0 0 auto; }
.serie__crono.es-contando { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.e-item__nopude { margin-top: .4rem; text-align: right; }
.pie-accion { margin: 1.5rem 0 1rem; }
.pie-accion .boton { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .serie__hecha > span { transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
  .serie__hecha:active > span { transform: none; }
}
/* El descanso: aparece encima del menú de abajo, en tinta. Entra con un
   fundido corto (aparece decenas de veces por sesión: nada de rebotes). */
.descanso {
  /* Rejilla y no fila: debajo del reloj va «Siguiente: …», que ocupa todo
     el ancho. Por eso el radio ya no es de píldora (999 px): con dos líneas,
     una píldora se convierte en un óvalo que recorta el texto por los lados. */
  position: fixed; left: 50%; bottom: calc(var(--alto-menu-cliente) + env(safe-area-inset-bottom) + 12px); z-index: 45;
  transform: translateX(-50%); width: min(92vw, 420px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .1rem 1rem; padding: .7rem .8rem .7rem 1.2rem;
  background: var(--tinta); color: var(--papel); border-radius: var(--r-grande); box-shadow: var(--sombra-2);
  animation: descanso-entra .2s var(--ease-out);
}
.descanso__sig { grid-column: 1 / -1; grid-row: 2; margin: .1rem 0 0; font-size: .78rem; line-height: 1.35; color: rgba(246, 244, 239, .78); }
@keyframes descanso-entra { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .descanso { animation: none; } }
.descanso__t { margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 244, 239, .65); }
.descanso__n { margin: 0 auto 0 0; font-family: var(--serif); font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.descanso .boton--secundario { background: transparent; color: var(--papel); border-color: rgba(246, 244, 239, .4); }

/* Resultado de un entrenamiento (panel) */
.resultado { display: grid; gap: .5rem; }
/* El «N ejercicios · Ver archivados» de los listados comparte nombre con el bloque de resultado
   de un entrenamiento y heredaba su rejilla: el enlace caía a otra línea. */
p.resultado { display: block; }
.registro-item { padding: .7rem 0; border-bottom: 1px solid var(--linea); }

/* ==========================================================
   LA FIGURA: QUÉ TRABAJA CADA EJERCICIO
   ----------------------------------------------------------
   SVG dibujado en el servidor (lib/figura-datos.php). Los colores
   van por clase, como todo: la política de seguridad no admite
   estilos en línea. Principal en terracota y secundario en su tono
   claro: se distinguen también en gris (oscuro y claro), y la
   leyenda lo dice con palabras, que es lo que de verdad no falla.
   ========================================================== */
.figura { display: block; height: auto; flex: 0 0 auto; overflow: visible; }
.figura--mini { width: 60px; }
.figura--peq { width: 96px; }
.figura--med { width: 168px; }
.figura--gran { width: min(100%, 300px); }
/* El cuerpo de base va una vez por página en <symbol>; este contenedor no ocupa nada. */
.figura-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fig__cuerpo { fill: #efebe3; stroke: #cfc8ba; stroke-width: .45; }
.fig__pelo { fill: #d9d2c4; }
.fig__m { fill: #e3ddd1; }
.fig__m--s { fill: #e6b49c; }
.fig__m--p { fill: #b4532f; }
.fig__linea { fill: none; stroke: #efebe3; stroke-width: .5; opacity: .85; pointer-events: none; }
.fig__etq { font-family: var(--sans); font-size: 6.4px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: var(--gris); }
/* Figura con enlaces (el mapa de la biblioteca). El foco se marca en el
   propio músculo: el contorno de un <a> de SVG es su caja entera, que
   tapa media figura y no dice cuál está elegido. */
.figura a { cursor: pointer; }
.figura a:focus { outline: none; }
.figura a .fig__m { transition: fill .16s ease; }
.figura a:focus-visible .fig__m { stroke: var(--tinta); stroke-width: 1.2; }
@media (hover: hover) and (pointer: fine) { .figura a:hover .fig__m:not(.fig__m--p) { fill: #d9a189; } }

.figura-leyenda { list-style: none; display: grid; gap: .35rem; margin: 0; font-size: .86rem; line-height: 1.4; }
.figura-leyenda li { display: flex; align-items: flex-start; gap: .5rem; }
.figura-leyenda__p, .figura-leyenda__s { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; margin-top: .32em; }
.figura-leyenda__p { background: #b4532f; }
.figura-leyenda__s { background: #e6b49c; }

/* «Qué trabaja» de cada ejercicio en un programa: capacidad, músculos y patrón en una línea que se parte. */
.trabaja { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin: .4rem 0 0; font-size: .78rem; line-height: 1.35; }
.trabaja__cap {
  display: inline-flex; align-items: center; padding: .14rem .55rem; border-radius: 999px;
  background: var(--tinta); color: var(--papel); font-size: .7rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.trabaja__m, .trabaja__s { display: inline-flex; align-items: center; gap: .32rem; min-width: 0; }
.trabaja__m { font-weight: 600; }
.trabaja__s { color: var(--gris); }
.trabaja__m::before, .trabaja__s::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.trabaja__m::before { background: #b4532f; }
.trabaja__s::before { background: #e6b49c; }
.trabaja__p { color: var(--gris); }
.e-item .trabaja { margin-top: .35rem; }

/* Lo que trabaja una sesión entera, antes de sus bloques. */
.trabaja-sesion { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 0 1rem; border-top: 1px solid var(--linea); }
.trabaja-sesion__datos { display: grid; gap: .5rem; margin: 0; font-size: .86rem; min-width: 0; flex: 1 1 auto; }
.trabaja-sesion__datos > div { display: grid; gap: .1rem; }
.trabaja-sesion__datos dt { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.trabaja-sesion__datos dd { margin: 0; overflow-wrap: anywhere; }
.trabaja-sesion__m { font-weight: 600; }
.trabaja-sesion__caps { display: flex; flex-wrap: wrap; gap: .3rem; }
.trabaja-sesion--compacta { padding: .7rem 0 .1rem; border-top: 0; gap: .8rem; }
.trabaja-sesion--compacta .trabaja-sesion__datos { font-size: .8rem; gap: .35rem; }

/* La ficha de un ejercicio: figura y datos lado a lado; en el móvil, la figura arriba. */
.que-trabaja { margin: 1rem 0 1.25rem; padding: 1rem 1.1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); }
.que-trabaja__cabeza { display: flex; align-items: center; justify-content: space-between; gap: .5rem .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.que-trabaja__cabeza .subtitulo { margin: 0; }
.que-trabaja__cuerpo { display: flex; gap: 1.25rem; align-items: flex-start; }
.que-trabaja__datos { display: grid; gap: .6rem; min-width: 0; flex: 1 1 auto; }
@media (max-width: 520px) {
  .que-trabaja__cuerpo { flex-direction: column; align-items: center; }
  .que-trabaja__datos { width: 100%; }
}
.como__figura { display: flex; gap: .9rem; align-items: center; margin: .2rem 0 .7rem; }
/* La leyenda al lado de la figura tiene que poder estrecharse: con min-width automático,
   «Principal: Cuádriceps, Glúteos» empujaba 9-10 px fuera de la pantalla en un móvil de 360. */
.como__figura .figura-leyenda, .que-trabaja__datos .figura-leyenda { min-width: 0; flex: 1 1 auto; }
.figura-leyenda li { min-width: 0; overflow-wrap: anywhere; }

/* El mapa de la biblioteca: la figura entera para filtrar por músculo y, al lado, la misma lista en botones. */
.mapa { margin-bottom: 1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); scroll-margin-top: calc(var(--alto-cabecera) + 12px); }
.mapa > summary, .cobertura > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .8rem;
  padding: .85rem 2.6rem .85rem 1rem; position: relative; min-height: 48px;
}
.mapa > summary::-webkit-details-marker, .cobertura > summary::-webkit-details-marker { display: none; }
.mapa > summary::after, .cobertura > summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 1.15rem; width: 8px; height: 8px;
  border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(45deg); transition: transform .2s var(--ease-out);
}
.mapa[open] > summary::after, .cobertura[open] > summary::after { transform: rotate(-135deg); top: 1.35rem; }
.mapa__t, .cobertura__t { font-size: .7rem; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .12em; }
.mapa__sel { font-weight: 600; color: #8e3f22; }
.mapa__cuerpo { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.25rem 2rem; padding: 0 1rem 1.1rem; }
.mapa__figura { display: grid; justify-items: center; align-content: start; gap: .75rem; }
.mapa__region { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin: .2rem 0 .5rem; }
.mapa__region:not(:first-child) { margin-top: 1.1rem; }
.mapa__lista { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-musculo {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .3rem .8rem; border: 1px solid var(--linea); border-radius: 999px;
  background: var(--papel); font-size: .86rem; text-decoration: none; color: var(--tinta);
  transition: border-color .16s ease, background-color .16s ease, transform .16s var(--ease-out);
}
a.chip-musculo:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { a.chip-musculo:hover { border-color: var(--tinta); } }
/* Sin ejercicios que lo trabajen: se ve que existe, pero no lleva a una lista vacía. */
.chip-musculo.es-vacio { background: transparent; border-style: dashed; color: var(--gris); }
.chip-musculo__n { font-size: .72rem; color: var(--gris); font-variant-numeric: tabular-nums; }
/* Blanco sobre terracota: 4,98 a 1, pasa AA para texto pequeño. */
.chip-musculo.es-activo { background: #b4532f; border-color: #b4532f; color: #fff; font-weight: 600; }
.chip-musculo.es-activo .chip-musculo__n { color: rgba(255, 255, 255, .85); }
.mapa__quitar { margin-top: 1rem; font-size: .88rem; }
@media (max-width: 720px) { .mapa__cuerpo { grid-template-columns: 1fr; } }

/* La tarjeta de la biblioteca con su figura pequeña a la izquierda. */
.tarjeta-ej { grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; align-items: start; }
.tarjeta-ej__texto { display: grid; gap: .3rem; align-content: start; min-width: 0; }
.tarjeta-ej__musc { font-weight: 600; }
.tarjeta-ej__patron { font-size: .76rem; color: var(--gris); }

/* Lo que trabaja el programa (constructor). */
.cobertura { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); margin: .5rem 0 1rem; }
.cobertura > summary .tenue { color: var(--tinta); font-size: .92rem; }
.cobertura__cuerpo { display: flex; gap: 1.5rem; padding: 0 1rem 1.1rem; align-items: flex-start; }
.cobertura__datos { flex: 1 1 auto; min-width: 0; display: grid; gap: 1rem; }
.cobertura__avisos { list-style: none; display: grid; gap: .5rem; }
.cobertura__avisos li { display: flex; gap: .55rem; align-items: flex-start; padding: .65rem .8rem; border-radius: var(--r-chico); background: var(--aviso-fondo); color: var(--aviso); font-size: .88rem; }
.cobertura__avisos .icono { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .15rem; }
.cobertura__ok { display: flex; gap: .5rem; align-items: center; color: var(--ok); font-size: .9rem; margin: 0; }
.cobertura__ok .icono { width: 18px; height: 18px; }
.cobertura__listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.5rem; }
.cobertura__listas h4 { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: .4rem; }
.cuentas { list-style: none; display: grid; }
.cuentas li { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem 0; border-bottom: 1px solid var(--linea); font-size: .86rem; }
.cuentas li:last-child { border-bottom: 0; }
.cobertura__nota { font-size: .74rem; margin: .45rem 0 0; }
.cobertura__caps { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .86rem; margin: 0; }
@media (max-width: 640px) {
  .cobertura__cuerpo { flex-direction: column; align-items: center; }
  .cobertura__datos { width: 100%; }
}

/* La lectura de la evaluación (entrenador y cliente). */
.tarjeta--lectura { margin-bottom: 1rem; }
.lectura { list-style: none; display: grid; gap: .55rem; }
.lectura__punto { display: flex; gap: .65rem; align-items: flex-start; padding: .75rem .85rem; border-radius: var(--r-chico); background: var(--papel); }
.lectura__punto > .icono { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .1rem; }
.lectura__punto--ok > .icono { color: var(--ok); }
.lectura__punto--aviso > .icono { color: var(--aviso); }
.lectura__punto--info > .icono { color: var(--info); }
.lectura__punto > div { min-width: 0; }
.lectura__t { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.lectura__x { margin: .15rem 0 0; font-size: .94rem; overflow-wrap: anywhere; }
.lectura__por { margin: .25rem 0 0; font-size: .82rem; color: var(--gris); }
.lectura-con-figura { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: start; }
.lectura__figura { margin: 0; display: grid; justify-items: center; gap: .35rem; font-size: .76rem; color: var(--gris); text-align: center; }
@media (max-width: 560px) {
  .lectura-con-figura { grid-template-columns: 1fr; }
  .lectura__figura { order: -1; }
}

/* El razonamiento del programa base: solo lo ve el entrenador. */
.razonamiento { background: var(--info-fondo); border: 1px solid var(--info-borde); border-radius: var(--r-medio); margin: 1rem 0 .5rem; }
.razonamiento > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .75rem 1rem; font-weight: 600; font-size: .92rem; color: var(--info); }
.razonamiento > summary::-webkit-details-marker { display: none; }
.razonamiento > summary .icono { width: 16px; height: 16px; flex: 0 0 auto; }
.razonamiento__cuerpo { padding: 0 1rem 1rem; font-size: .9rem; }
.razonamiento__cuerpo p { margin: 0 0 .55rem; }

/* Qué trabaja, en el formulario de un ejercicio: la figura se queda a la vista mientras se marca. */
.que-trabaja-form__rejilla { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.que-trabaja-form__figura { position: sticky; top: calc(var(--alto-cabecera) + 1rem); display: grid; justify-items: center; gap: .4rem; text-align: center; }
.que-trabaja-form__grupo { margin-top: 1rem; }
.que-trabaja-form__grupo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 40px; font-weight: 600; font-size: .92rem; }
.que-trabaja-form__grupo > summary::-webkit-details-marker { display: none; }
.campo__etiqueta--sub { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-top: .8rem; }
.checks--musculos { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 640px) {
  .que-trabaja-form__rejilla { grid-template-columns: 1fr; }
  .que-trabaja-form__figura { position: static; }
}

/* ==========================================================
   EL PROGRESO QUE SE VE
   ----------------------------------------------------------
   Kilos y récords, el mapa de calor del programa, el semáforo de
   la semana, el modo viaje y las fotos de progreso.
   ========================================================== */

/* ---- kilos y récords al terminar un entrenamiento ----
   Se ve unas pocas veces por semana y es el momento de «lo he
   hecho»: aquí sí cabe una entrada (opacidad y 6 px, nada más),
   escalonada 60 ms entre las dos cajas. */
/* Dos columnas como mucho: con auto-fit y la nota a todo lo ancho, en el panel salía una tercera
   columna vacía (la nota la ocupaba y no se plegaba) y las cajas se quedaban a la izquierda. */
.logros { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - .9rem) / 2)), 1fr)); gap: .9rem; margin: 0 0 1.25rem; }
.rejilla + .logros { margin-top: 1rem; }
.logros__kilos, .logros__records { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande); padding: 1.1rem 1.25rem; animation: logro-entra .42s var(--ease-out) both; }
.logros__records { animation-delay: .06s; }
.logros__cifra { font-family: var(--serif); font-size: clamp(2.6rem, 10vw, 3.4rem); line-height: 1; letter-spacing: -.01em; margin: .25rem 0 .4rem; }
.logros__equivale { font-size: .95rem; margin-bottom: .3rem; }
.logros__cambio { font-size: .84rem; color: var(--gris); margin: 0; }
.logros__cambio.es-sube { color: var(--ok); font-weight: 600; }
.logros__records ul { list-style: none; display: grid; gap: .55rem; margin-top: .45rem; }
.logros__records li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; }
.logros__records .icono { width: 18px; height: 18px; flex: 0 0 auto; color: #b4532f; margin-top: .12rem; }
.logros__nota { grid-column: 1 / -1; font-size: .76rem; margin: 0; }
@keyframes logro-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Con movimiento reducido se queda el fundido (ayuda a ver que es nuevo) y se quita el desplazamiento. */
@media (prefers-reduced-motion: reduce) { @keyframes logro-entra { from { opacity: 0; } to { opacity: 1; } } }
.semana__kilos { font-size: .9rem; }
.tarjeta--records .icono { width: 16px; height: 16px; color: #b4532f; vertical-align: -3px; }

/* ---- lo que trabaja el programa: mapa de calor + porcentajes ----
   Cinco tonos de la misma terracota de la figura (el principal de
   siempre es el más oscuro): se lee como «más o menos», sin leyenda
   de colores que aprender. */
.fig__m--c1 { fill: #f2e0d5; }
.fig__m--c2 { fill: #e8bfa8; }
.fig__m--c3 { fill: #d99474; }
.fig__m--c4 { fill: #c66e4b; }
.fig__m--c5 { fill: #b4532f; }
.trabaja-programa { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); margin: 0 0 1.25rem; }
.trabaja-programa > summary, .plegable > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 48px;
  padding: .75rem 2.6rem .75rem 1rem; position: relative; font-weight: 600; font-size: .92rem;
}
.trabaja-programa > summary::-webkit-details-marker, .plegable > summary::-webkit-details-marker { display: none; }
.trabaja-programa > summary::after, .plegable > summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 1.15rem; width: 8px; height: 8px;
  border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(45deg); transition: transform .2s var(--ease-out);
}
.trabaja-programa[open] > summary::after, .plegable[open] > summary::after { transform: rotate(-135deg); top: 1.35rem; }
.trabaja-programa > .porc { padding: 0 1rem 1.1rem; }
.plegable { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); margin: 1rem 0; }
.plegable > :not(summary) { margin-left: 1rem; margin-right: 1rem; }
.plegable > :last-child { margin-bottom: 1rem; }
.porc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.5rem; align-items: start; }
.porc__datos { min-width: 0; }
.porc__zonas { margin: 0 0 .5rem; font-size: .86rem; font-weight: 600; }
.porc__lista { list-style: none; display: grid; gap: .1rem; }
/* Nombre · barra · número. La columna del nombre tiene tope para que la barra
   no se quede en nada a 360 px; los nombres largos («Isquiotibiales») caben en 8,5rem. */
.porc__lista li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(2.5rem, 1fr) 2.9rem; gap: .6rem; align-items: center; padding: .28rem 0; font-size: .9rem; }
.porc__m { min-width: 0; overflow-wrap: anywhere; }
.porc__barra { display: block; width: 100%; height: 8px; }
.porc__fondo { fill: var(--papel-2); }
.porc__valor { fill: #c66e4b; }
.porc__n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.porc__otros { color: var(--gris); }
.porc__otros .porc__n { font-weight: 400; }
.porc__leyenda { display: flex; align-items: center; gap: .5rem; margin: .7rem 0 0; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.porc__escala { display: block; width: 90px; height: 8px; border-radius: 4px; flex: 0 0 auto;
  background: linear-gradient(to right, #f2e0d5 0 20%, #e8bfa8 20% 40%, #d99474 40% 60%, #c66e4b 60% 80%, #b4532f 80% 100%); }
.porc__nota { font-size: .76rem; margin: .5rem 0 0; }
.cobertura__figura { display: grid; justify-items: center; gap: .3rem; flex: 0 0 auto; }
.cobertura__figura .porc__leyenda { margin: 0; }
@media (max-width: 560px) {
  .porc { grid-template-columns: 1fr; }
  .porc > .figura { justify-self: center; }
}

/* ---- el semáforo de la semana (solo lo ve el entrenador) ---- */
.semaforo { display: flex; gap: .8rem; align-items: flex-start; }
.semaforo__luz { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; margin-top: .3rem; background: var(--gris-2); box-shadow: 0 0 0 4px var(--papel-2); }
.semaforo--verde .semaforo__luz, .semaforo__luz--verde { background: #2f7a3a; box-shadow: 0 0 0 4px var(--ok-fondo); }
.semaforo--ambar .semaforo__luz, .semaforo__luz--ambar { background: #d48a1c; box-shadow: 0 0 0 4px var(--aviso-fondo); }
.semaforo--rojo .semaforo__luz, .semaforo__luz--rojo { background: #b8372a; box-shadow: 0 0 0 4px var(--error-fondo); }
.semaforo__t { font-weight: 600; margin: 0 0 .25rem; }
.semaforo__motivos { margin: 0 0 .5rem 1.1rem; font-size: .9rem; }
.semaforo__motivo { font-size: .88rem; color: var(--gris); margin: 0; }
.semaforo__consejo { font-size: .88rem; padding: .55rem .75rem; border-radius: var(--r-chico); background: var(--papel-2); margin: 0; }
.semaforo__nota { font-size: .78rem; margin: .7rem 0 0; }
.lista-semaforo { list-style: none; }
.lista-semaforo li { border-bottom: 1px solid var(--linea); }
.lista-semaforo li:last-child { border-bottom: 0; }
.lista-semaforo a { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .55rem 0; text-decoration: none; }
.lista-semaforo a > span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.lista-semaforo .semaforo__luz { margin: 0 .2rem 0 .25rem; }
.lista-semaforo__t { font-size: .84rem; }
.lista-semaforo .tenue { font-size: .78rem; }
.lista-semaforo .icono.ir { color: var(--gris); flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) { .lista-semaforo a:hover strong { text-decoration: underline; } }

/* ---- modo viaje ---- */
.viaje-oferta { margin-top: 1rem; padding: .9rem 1rem; border: 1px dashed var(--linea-2); border-radius: var(--r-medio); display: grid; gap: .6rem; scroll-margin-top: calc(var(--alto-cabecera) + 12px); }
.viaje-oferta p { margin: 0; font-size: .88rem; }
.item__viaje { display: flex; gap: .4rem; align-items: center; margin: .3rem 0 0; font-size: .82rem; font-weight: 600; color: var(--info); }
.item__viaje .icono { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---- fotos de progreso ---- */
/* El aviso de que el entrenador las ve no puede ser letra pequeña: es la condición. */
.nota--foto { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .9rem; margin: 0 0 1rem; border-radius: var(--r-chico); background: var(--info-fondo); color: var(--tinta); font-size: .86rem; }
.nota--foto > .icono:first-child { float: none; flex: 0 0 auto; margin: .1rem 0 0; color: var(--info); }
.subir-foto__estado { margin: .6rem 0 0; font-size: .86rem; color: var(--gris); }
.subir-foto__estado--error { color: var(--error); font-weight: 600; }
.galeria { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.galeria__foto { position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); overflow: hidden; }
.galeria__foto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--papel-2); }
.galeria__pie { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .65rem; margin: 0; font-size: .8rem; }
.galeria__acciones { position: absolute; top: .4rem; right: .4rem; display: flex; gap: .3rem; }
.galeria__acciones form { margin: 0; }
.galeria__acciones .boton--icono { background: rgba(255, 254, 251, .92); }
.botonera--pie { margin: 1.5rem 0 .5rem; }

/* El comparador. Sin JavaScript, lado a lado; con él, una encima de otra
   y la de «después» recortada desde la izquierda hasta --corte. clip-path
   recorta sin deformar la foto ni mover nada de sitio. */
.comparador { margin-bottom: 1.5rem; }
.comparador__elige { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: .9rem; }
/* 200 px de mínimo: a 390 px los dos desplegables uno al lado del otro cortaban la fecha («21 sep · de frent»); así se apilan en el móvil. */
.comparador__elige .campo { flex: 1 1 200px; margin: 0; }
/* Con JavaScript los desplegables comparan solos al cambiarlos: el botón sobra. */
.js .comparador__elige .filtros__acciones { display: none; }
.comparador__vista { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.comparador__foto { position: relative; margin: 0; border-radius: var(--r-medio); overflow: hidden; background: var(--papel-2); }
.comparador__foto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; -webkit-user-drag: none; }
.comparador__foto figcaption { position: absolute; left: .5rem; bottom: .5rem; padding: .2rem .6rem; border-radius: 999px; background: rgba(14, 13, 11, .72); color: var(--papel); font-size: .74rem; font-weight: 600; }
.comparador.es-deslizable .comparador__vista { grid-template-columns: 1fr; position: relative; max-width: 480px; margin: 0 auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.comparador.es-deslizable .comparador__foto { grid-area: 1 / 1; }
.comparador.es-deslizable .comparador__foto--b { clip-path: inset(0 0 0 var(--corte, 50%)); }
/* Deslizable: el pie de cada foto se queda para el lector de pantalla y se ve la etiqueta de fuera del recorte. */
.comparador.es-deslizable .comparador__foto figcaption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.comparador__etq { display: none; }
.comparador.es-deslizable .comparador__etq { display: block; position: absolute; bottom: .5rem; z-index: 1; padding: .2rem .6rem; border-radius: 999px; background: rgba(14, 13, 11, .72); color: var(--papel); font-size: .74rem; font-weight: 600; pointer-events: none; }
.comparador__etq--a { left: .5rem; }
.comparador__etq--b { right: .5rem; }
/* La línea del corte: se mueve con el dedo, sin transición (es manipulación directa,
   no una animación). Va en absoluto, así que moverla no recoloca nada más. */
.comparador.es-deslizable .comparador__vista::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--corte, 50%); width: 2px; margin-left: -1px;
  background: var(--papel); box-shadow: 0 0 0 1px rgba(14, 13, 11, .3); pointer-events: none;
}
.comparador__control { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; justify-content: center; max-width: 480px; margin: .6rem auto 0; }
.comparador__barra { flex: 1 1 220px; min-height: 44px; accent-color: var(--tinta); }
.comparador__pie { margin: .5rem 0 0; text-align: center; font-size: .82rem; color: var(--gris); }

/* La cámara con guía. Oscura, como cualquier cámara: la foto manda. */
.camara { width: min(100vw, 520px); max-width: 100vw; max-height: 100dvh; margin: auto; padding: .75rem; border: 0; border-radius: var(--r-grande); background: var(--tinta); color: var(--papel); }
.camara[open] { display: flex; flex-direction: column; gap: .6rem; }
.camara::backdrop { background: rgba(14, 13, 11, .82); }
@media (max-width: 560px) { .camara { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; padding: .6rem; } }
/* Ancho atado al alto disponible: con width:100% y max-height, el alto se recortaba y la vista dejaba de ser 3:4. */
.camara__visor { position: relative; width: min(100%, calc(64dvh * 3 / 4)); aspect-ratio: 3 / 4; margin: 0 auto; border-radius: var(--r-medio); overflow: hidden; background: #000; }
.camara__video, .camara__sombra, .camara__resultado { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camara__visor.es-espejo .camara__video, .camara__visor.es-espejo .camara__sombra { transform: scaleX(-1); }
/* Capas explícitas: sin z-index, el vídeo (que el navegador compone aparte) se pintaba por encima de la sombra. */
.camara__video { z-index: 0; }
.camara__sombra { z-index: 1; opacity: .35; pointer-events: none; }
.camara__guia-caja { z-index: 2; }
.camara__resultado { z-index: 3; }
.camara__cuenta { z-index: 4; }
.camara__sombra.es-oculta { display: none; }
.camara__guia-caja { position: absolute; inset: 3% 10%; display: grid; place-items: center; pointer-events: none; }
.camara__guia { width: 100%; height: 100%; fill: none; stroke: rgba(246, 244, 239, .9); stroke-width: 2; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; }
.camara__guia line, .camara__guia circle, .camara__guia path { vector-effect: non-scaling-stroke; }
.camara__cuenta { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-family: var(--serif); font-size: clamp(5rem, 30vw, 9rem); line-height: 1; color: var(--papel); text-shadow: 0 2px 24px rgba(0, 0, 0, .5); pointer-events: none; }
.camara__poses { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.camara__pose { background: transparent; color: var(--papel); border-color: rgba(246, 244, 239, .35); }
.camara__pose[aria-pressed="true"] { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.camara__ayuda { margin: 0; font-size: .8rem; text-align: center; color: rgba(246, 244, 239, .75); }
.camara__acciones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.camara .boton--fantasma { color: var(--papel); }
.camara .boton--primario { background: var(--papel); color: var(--tinta); }
.camara .boton--secundario { background: transparent; color: var(--papel); border-color: rgba(246, 244, 239, .35); }
.camara__disparar { flex: 1 1 100%; min-height: 56px; }
.camara__temporizador[aria-pressed="false"] { color: rgba(246, 244, 239, .6); }
.camara__estado { min-height: 1.3em; margin: 0; font-size: .86rem; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .camara .boton--fantasma:hover { background: rgba(246, 244, 239, .1); }
  .camara .boton--primario:hover { background: #fff; }
}



/* ---- ejercicios objetivo y sus vídeos ---- */
.objetivos { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin: .5rem 0 1.25rem; }
.objetivo { display: grid; gap: .45rem; height: 100%; padding: 1rem 1.1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); text-decoration: none; }
.objetivo__nombre { font-weight: 700; font-size: 1.05rem; }
.objetivo__meta { display: flex; gap: .4rem; align-items: center; font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.2; }
.objetivo__meta .icono { width: 16px; height: 16px; flex: 0 0 auto; color: #b4532f; }
.objetivo__pie { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .8rem; }
@media (hover: hover) and (pointer: fine) { .objetivo { transition: border-color .16s ease; } .objetivo:hover { border-color: var(--tinta); } }
.comparar-videos { margin-bottom: 1.5rem; }
.comparar-videos__par { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.comparar-videos__par figure { margin: 0; }
.comparar-videos__par video, .video__ver video { display: block; width: 100%; max-height: 70vh; border-radius: var(--r-chico); background: #000; }
.comparar-videos__par figcaption { font-size: .78rem; font-weight: 600; margin-top: .3rem; }
.comparar-videos__control { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: .6rem; }
.videos { list-style: none; display: grid; gap: 1rem; }
.video { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; padding: 1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); scroll-margin-top: calc(var(--alto-cabecera) + 12px); }
@media (max-width: 640px) { .video { grid-template-columns: 1fr; } }
.video__fecha { font-weight: 700; margin: 0 0 .4rem; }
.video__nota, .video__revision { margin: 0 0 .6rem; max-width: 64ch; }
.video__revision { padding: .6rem .75rem; border-left: 3px solid #b4532f; background: var(--papel); border-radius: 0 var(--r-chico) var(--r-chico) 0; }
.video__revisar { margin-bottom: .5rem; }
.subir-video__barra { width: 100%; height: 8px; margin-top: .6rem; accent-color: var(--tinta); }
.bloque-objetivos { margin-bottom: 1rem; }

/* ---- el muñeco que hace el ejercicio (portal.js, «MUÑECO») ----
   Trazo grueso y redondo de la tinta de la marca, sobre papel: se lee como dibujo, no como persona. */
.muneco { margin: 0 0 1.1rem; padding: .6rem .75rem .5rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); }
.muneco svg { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.muneco figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .82rem; font-weight: 600; margin-top: .2rem; }
.muneco figcaption .tenue { font-weight: 400; }
.muneco__hueso { stroke: var(--tinta); stroke-width: 6; stroke-linecap: round; fill: none; }
.muneco__tronco { stroke-width: 8; }
.muneco__pie { stroke-width: 5; }
.muneco__hueso--lejos { stroke: var(--gris-2); }
.muneco__cabeza { fill: var(--tinta); }
.muneco__suelo { stroke: var(--linea-2); stroke-width: 1.5; }
.muneco__aparato { stroke: #b4532f; stroke-width: 4; stroke-linecap: round; }
.muneco__aparato--fino { stroke-width: 2; }

/* ==========================================================
   QUÉ TOCA HOY
   ----------------------------------------------------------
   Lo primero que se lee de cada ejercicio al entrenar: el objetivo
   (peso × repeticiones), por qué y cómo fue la última vez. En una
   caja de papel dentro de la tarjeta blanca; con un filo de color
   según lo que toca (subir en verde, bajar en ámbar, descarga en
   azul), que también lo dice la frase: el color nunca va solo.
   ========================================================== */
.hoy { margin: .75rem 0 .15rem; padding: .65rem .8rem .7rem; border-radius: var(--r-medio); background: var(--papel); border-left: 3px solid var(--linea-2); }
.hoy--subir, .hoy--tope, .hoy--mas_reps { border-left-color: var(--ok); }
.hoy--subir { background: var(--ok-fondo); }
.hoy--bajar { border-left-color: var(--aviso); background: var(--aviso-fondo); }
.hoy--descarga { border-left-color: var(--info); background: var(--info-fondo); }
.hoy__obj { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; margin: 0; }
.hoy__etq { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.hoy__obj strong { font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.hoy__series, .hoy__rir { font-size: .82rem; color: var(--gris); }
.hoy__discos { margin: .15rem 0 0; font-size: .8rem; font-weight: 600; color: var(--tinta-2); }
.hoy__por { margin: .3rem 0 0; font-size: .88rem; line-height: 1.4; max-width: 60ch; }
.hoy__ultima { margin: .25rem 0 0; font-size: .78rem; color: var(--gris); }
.hoy__aprox { margin-top: .4rem; font-size: .84rem; }
/* El mismo «Hoy», en corto, en «Ver la sesión antes»: para llegar sabiendo el peso. */
.item__hoy { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; margin: .4rem 0 0; padding: .45rem .65rem; border-radius: var(--r-chico); background: var(--papel); font-size: .92rem; }
.item__hoy .tenue { flex-basis: 100%; font-size: .8rem; line-height: 1.4; }
/* En el panel («Ese día»), la caja va justo encima de la tabla de series: sin aire, se pegaban. */
.registro-item .item__hoy { margin-bottom: .6rem; }
.hoy__aprox > summary { cursor: pointer; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; }
.hoy__aprox p { margin: .1rem 0 .2rem; }
/* La serie que hoy se puede saltar (semana de descarga, día flojo): con el
   borde a trazos y algo más clara, para que se vea de un vistazo sin texto. */
.serie--opcional { border: 1px dashed var(--linea-2); background: transparent; }
.serie--opcional:not(.es-hecha) .serie__campo input, .serie--opcional:not(.es-hecha) .serie__campo select { background: var(--papel); }
.serie__opc { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* «¿Cómo vienes hoy?»: tres botones que se tocan con el pulgar. */
.animo { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; margin: 0 0 .9rem; padding: .6rem .7rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); }
.animo__t { margin: 0; font-size: .86rem; font-weight: 600; }
.animo__opciones { display: flex; flex: 1 1 auto; gap: .35rem; }
.animo__op {
  flex: 1 1 0; min-height: 40px; padding: .3rem .5rem; border: 1px solid var(--linea-2); border-radius: 999px; background: var(--papel);
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--tinta); cursor: pointer; white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, transform .16s var(--ease-out);
}
.animo__op:active { transform: scale(.97); }
.animo__op[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.animo--elegido { padding: .4rem .6rem; }
.animo--elegido .animo__t { color: var(--gris); font-weight: 500; }
.animo__pista { flex-basis: 100%; margin: 0; font-size: .78rem; line-height: 1.4; color: var(--gris); }
@media (prefers-reduced-motion: reduce) { .animo__op:active { transform: none; } }
.aviso-dia { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 .9rem; padding: .7rem .85rem; border-radius: var(--r-medio); background: var(--info-fondo); border: 1px solid var(--info-borde); color: var(--info); font-size: .88rem; line-height: 1.45; }
.aviso-dia .icono { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .1rem; }
.aviso-dia a { color: inherit; font-weight: 600; }
.aviso-dia--energia { background: var(--ok-fondo); border-color: var(--ok-borde); color: var(--ok); }
/* Lo ajustado tras una serie que se salió del margen: encima de las series que quedan. */
.e-item__ajuste { display: block; margin: .6rem 0 .2rem; padding: .5rem .7rem; border-radius: var(--r-chico); border-left: 3px solid var(--linea-2); background: var(--papel); font-size: .86rem; line-height: 1.4; }
/* Ya lo oculta la regla general «[hidden]» (con !important); se deja dicho aquí porque, sin ella,
   el «display: block» de arriba pisaría el «hidden» y el aviso vacío ocuparía sitio. */
.e-item__ajuste[hidden] { display: none; }
.e-item__ajuste--subir { border-left-color: var(--ok); background: var(--ok-fondo); color: var(--ok); }
.e-item__ajuste--bajar { border-left-color: var(--aviso); background: var(--aviso-fondo); color: var(--aviso); }
.entreno__pista { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 .9rem; font-size: .84rem; color: var(--gris); line-height: 1.45; }
.entreno__pista .icono { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .15rem; }
.entreno__pista strong, .entreno__pista a { color: var(--tinta); }

/* Antes de empezar, en la tarjeta de tinta de la portada. */
.foco__trabaja, .foco__descarga, .foco__ultima { display: flex; gap: .45rem; align-items: flex-start; margin: .45rem 0 0; font-size: .84rem; color: rgba(246, 244, 239, .78); line-height: 1.4; }
.foco__trabaja .icono, .foco__descarga .icono { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .12rem; }
.foco__descarga { color: var(--papel); }
.foco__descarga a, .foco a.ayuda { color: inherit; }
.foco__reto { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem; margin: .8rem 0 0; padding: .6rem .75rem; border-radius: var(--r-medio); background: rgba(246, 244, 239, .1); }
.foco__reto strong { font-size: 1rem; }
.foco__etq { padding: .12rem .5rem; border-radius: 999px; background: var(--papel); color: var(--tinta); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.foco__por { display: block; margin-top: .15rem; font-size: .8rem; color: rgba(246, 244, 239, .72); }
.foco__ultima { color: rgba(246, 244, 239, .6); font-size: .8rem; }

/* Al terminar: lo conseguido, en corto. */
.conseguido { margin: 0 0 1rem; padding: .9rem 1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande); }
.conseguido ul { list-style: none; display: grid; gap: .45rem; margin: .35rem 0 0; }
.conseguido li { display: flex; flex-direction: column; gap: .05rem; font-size: .92rem; line-height: 1.4; }
.conseguido--mejoras li { flex-direction: row; align-items: flex-start; gap: .45rem; }
.conseguido--mejoras .icono { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .2rem; color: var(--ok); }
.conseguido li .tenue { font-size: .8rem; }
.conseguido > p.tenue { margin: .55rem 0 0; font-size: .8rem; line-height: 1.4; }
.conseguido--proxima { background: var(--papel); }
.conseguido__semana { display: flex; gap: .5rem; align-items: center; margin: 0 0 1.25rem; font-size: .9rem; }
.conseguido__semana .icono { width: 18px; height: 18px; color: var(--gris); }
.conseguido__semana--cumplida { padding: .6rem .85rem; border-radius: var(--r-medio); background: var(--acento-fondo); }
.conseguido__semana--cumplida .icono { color: var(--acento); }

/* La fase después de cada sesión: una línea, con lo que falta para la siguiente. */
.metamorfosis { display: flex; align-items: center; gap: .85rem; margin: 0 0 1rem; padding: .8rem 1rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande); }
.metamorfosis .fase-img { width: 52px; height: 52px; }
.metamorfosis > div { flex: 1 1 auto; min-width: 0; }
.metamorfosis p { margin: 0; font-size: .92rem; }
.metamorfosis .fase__barra { max-width: none; }
.metamorfosis__falta { font-size: .8rem; color: var(--gris); }

/* El hito (la sesión 1, la 10, la 25… o un cambio de fase): la única celebración del portal,
   en oscuro como la tarjeta de lo que toca, con la fase dentro del anillo de puntos completo. */
.hito { display: grid; justify-items: center; gap: .8rem; margin: 0 0 1.25rem; padding: 1.5rem 1.25rem 1.4rem; text-align: center;
  background: var(--tinta); color: var(--papel); border-radius: var(--r-grande); }
.hito__dibujo { position: relative; display: grid; place-items: center; width: 150px; height: 150px; }
.hito__dibujo .fase-img { width: 92px; height: 92px; }
.hito .ojo { margin: 0; color: rgba(246, 244, 239, .6); }
.hito__titulo { margin: .2rem 0 .4rem; font-size: clamp(1.7rem, 6.5vw, 2.3rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.hito__txt > p:not(.ojo) { max-width: 34ch; margin: 0 auto; color: rgba(246, 244, 239, .85); }
.hito .fase__barra { max-width: 220px; margin: 1rem auto .4rem; }
.hito .fase__fondo { fill: rgba(246, 244, 239, .16); }
.hito .hito__falta { font-size: .8rem; color: rgba(246, 244, 239, .65); }
/* La celebración se ve rara vez (por eso cabe una animación más larga que la de la interfaz):
   el anillo se dibuja punto a punto con una máscara cónica que gira, la fase crece un poco y
   el texto sube. La máscara anima una propiedad registrada (--barrido): repinta en cada
   fotograma, asumible en 150 px y una sola vez; sin @property el anillo sale entero, sin barrido. */
@property --barrido { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@keyframes hito-barrido { from { --barrido: 0deg; } to { --barrido: 360deg; } }
@keyframes hito-fase { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hito-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hito-funde { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .hito--nuevo .anillo {
    -webkit-mask-image: conic-gradient(#000 var(--barrido), transparent 0);
            mask-image: conic-gradient(#000 var(--barrido), transparent 0);
    animation: hito-barrido 1.1s var(--ease-out) .15s both;
  }
  .hito--nuevo .fase-img { animation: hito-fase .6s var(--ease-out) .3s both; }
  .hito--nuevo .hito__txt { animation: hito-sube .5s var(--ease-out) .5s both; }
}
/* Con movimiento reducido, menos y más suave (no cero): aparece fundiéndose, sin barrido ni desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .hito--nuevo .hito__dibujo, .hito--nuevo .hito__txt { animation: hito-funde .4s ease-out both; }
}

/* ==========================================================
   AYUDAS Y APRENDE
   ----------------------------------------------------------
   Un término con explicación se subraya a puntos: se distingue de
   un enlace normal y no grita. Al tocarlo se abre una ventanita; en
   el móvil sale desde abajo (donde llega el pulgar) y en pantallas
   grandes, en el centro.
   ========================================================== */
a.ayuda { color: inherit; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: .22em; cursor: help; padding: .1em 0; }
a.ayuda:focus-visible { outline-offset: 1px; }
.ayudas { display: none; }
.ayuda-dialogo {
  width: min(94vw, 460px); max-height: min(86vh, 640px); margin: auto; padding: 1.2rem 1.2rem 1rem; overflow: auto;
  border: 0; border-radius: var(--r-grande); background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-2);
}
.ayuda-dialogo::backdrop { background: rgba(14, 13, 11, .42); }
/* Se abre unas decenas de veces como mucho: fundido y un 3 % de escala, en
   200 ms con salida suave. Nunca desde scale(0): nada aparece de la nada. */
.ayuda-dialogo[open] { animation: ayuda-entra .2s var(--ease-out); }
@keyframes ayuda-entra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .ayuda-dialogo { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--r-grande) var(--r-grande) 0 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .ayuda-dialogo[open] { animation-name: ayuda-sube; }
  @keyframes ayuda-sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .ayuda-dialogo[open] { animation: ayuda-funde .16s ease; }
  @keyframes ayuda-funde { from { opacity: 0; } to { opacity: 1; } }
}
.ayuda-texto__t { font-size: 1.2rem; font-weight: 600; margin: 0 0 .5rem; letter-spacing: -.01em; }
.ayuda-texto__mas { margin: .8rem 0 0; font-size: .84rem; }
.ayuda-dialogo__cerrar { width: 100%; margin-top: 1rem; }
.concepto__corto { font-weight: 600; margin: 0 0 .6rem; line-height: 1.4; }
.concepto__imagina { margin: 0 0 .7rem; padding: .7rem .85rem; border-radius: var(--r-medio); background: var(--papel); border-left: 3px solid #b4532f; line-height: 1.5; }
.concepto__etq { display: block; margin-bottom: .15rem; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: #8e3f22; }
.concepto__imagina--corto { font-size: .88rem; }
.concepto__practica { list-style: none; display: grid; gap: .4rem; margin: 0; }
.concepto__practica li { position: relative; padding-left: 1.15rem; font-size: .92rem; line-height: 1.45; }
.concepto__practica li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .42rem; height: .42rem; border-radius: 50%; background: var(--tinta); }
.concepto__rel { margin: .7rem 0 0; font-size: .84rem; }
/* La página Aprende: cada concepto, una tarjeta plegada con su frase debajo del título. */
.conceptos { margin-bottom: 1.6rem; }
.conceptos .subtitulo { margin-bottom: .15rem; }
.conceptos__sub { margin: 0 0 .7rem; font-size: .86rem; }
.concepto { margin-bottom: .5rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); scroll-margin-top: calc(var(--alto-cabecera) + 12px); }
.concepto > summary { list-style: none; cursor: pointer; display: grid; gap: .15rem; padding: .8rem 2.6rem .8rem 1rem; position: relative; min-height: 48px; }
.concepto > summary::-webkit-details-marker { display: none; }
.concepto > summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 1.2rem; width: 8px; height: 8px;
  border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(45deg); transition: transform .2s var(--ease-out);
}
.concepto[open] > summary::after { transform: rotate(-135deg); top: 1.4rem; }
.concepto__t { font-weight: 600; }
.concepto__resumen { font-size: .86rem; color: var(--gris); line-height: 1.4; }
.concepto[open] .concepto__resumen { display: none; }
.concepto__cuerpo { padding: 0 1rem 1rem; max-width: 70ch; }
.concepto:target { border-color: var(--tinta); }
.tarjeta--aprende .tarjeta__dato { font-size: 1.5rem; }
/* Por qué este concepto hoy (sale de la sesión que toca) y dos más a mano. */
.aprende-hoy__por { margin: .35rem 0 .55rem; font-size: .86rem; line-height: 1.4; font-weight: 600; }
.aprende-hoy__mas { margin: .7rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--gris); }
.aprende-hoy__mas a { color: var(--tinta); }
/* Otras formas de hacer un ejercicio, en la ficha. */
.otras-formas { list-style: none; display: grid; gap: .45rem; max-width: 70ch; }
.otras-formas li { padding-left: .9rem; border-left: 2px solid var(--linea-2); font-size: .92rem; line-height: 1.45; }
.campo__ayuda--escala { margin: -.4rem 0 1rem; }

/* ==========================================================
   CONSTRUCTOR: PAUTAS, SERIES POR SEMANA, DESCARGA Y CHULETA
   ========================================================== */
.herramientas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; margin: .5rem 0 1rem; }
.herramientas .tarjeta + .tarjeta { margin-top: 0; }
.tarjeta--herramienta .tarjeta__cuerpo > .tenue { font-size: .82rem; margin-top: .6rem; }
.pautas__botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.pautas__t { margin: 0 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.pautas--item { margin-bottom: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--linea); }
.pautas--bloque { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--linea); }
.cambiar-ej { margin-top: .6rem; }
.cambiar-ej > summary { cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; font-size: .86rem; font-weight: 600; }
.cambiar-ej > summary .icono { width: 16px; height: 16px; }
.volumen, .chuleta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); margin: .5rem 0 1rem; }
.volumen > summary, .chuleta > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .8rem;
  padding: .85rem 2.6rem .85rem 1rem; position: relative; min-height: 48px;
}
.volumen > summary::-webkit-details-marker, .chuleta > summary::-webkit-details-marker { display: none; }
.volumen > summary::after, .chuleta > summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 1.15rem; width: 8px; height: 8px;
  border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(45deg); transition: transform .2s var(--ease-out);
}
.volumen[open] > summary::after, .chuleta[open] > summary::after { transform: rotate(-135deg); top: 1.35rem; }
.volumen__t { font-size: .7rem; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .12em; }
.volumen > summary .tenue { color: var(--tinta); font-size: .92rem; }
.volumen__cuerpo { padding: 0 1rem 1rem; }
.vols { list-style: none; display: grid; gap: .35rem; max-width: 760px; }
/* Tres columnas: el músculo, la barra (se estira) y la cifra. La cifra con
   ancho mínimo para que las barras empiecen y acaben todas en el mismo sitio. */
.vol { display: grid; grid-template-columns: minmax(7.5rem, 9rem) minmax(0, 1fr) minmax(8.5rem, auto); align-items: center; gap: .6rem; font-size: .84rem; }
.vol__barra { width: 100%; height: 12px; display: block; }
.vol__fondo { fill: var(--linea); }
.vol__rango { fill: var(--ok-fondo); stroke: var(--ok-borde); stroke-width: .6; }
.vol__valor { fill: var(--tinta); }
.vol--bajo .vol__valor { fill: #b4532f; }
.vol--alto .vol__valor { fill: var(--aviso); }
.vol__n { font-variant-numeric: tabular-nums; font-weight: 600; }
.vol__n .tenue { font-weight: 400; }
@media (max-width: 560px) {
  /* En el móvil, el nombre y la cifra arriba y la barra debajo, a lo ancho: con las tres en fila la barra se quedaba en 60 px. */
  .vol { grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; }
  .vol__barra { grid-column: 1 / -1; grid-row: 2; }
}
.volumen__nota { margin: .7rem 0 0; font-size: .78rem; max-width: 76ch; }
.chuleta > summary { align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; }
.chuleta > summary .icono { width: 16px; height: 16px; flex: 0 0 auto; }
.chuleta__cuerpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem 1.5rem; padding: 0 1rem 1rem; }
.chuleta__cuerpo h3 { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: .4rem; }
.chuleta__cuerpo ul { list-style: none; display: grid; gap: .35rem; }
.chuleta__cuerpo li { position: relative; padding-left: 1rem; font-size: .86rem; line-height: 1.45; }
.chuleta__cuerpo li::before { content: ""; position: absolute; left: .15rem; top: .55em; width: .38rem; height: .38rem; border-radius: 50%; background: #b4532f; }
.chuleta__fuentes { grid-column: 1 / -1; font-size: .76rem; margin: 0; }
/* De la evaluación al programa publicado: cuatro pasos, lo hecho con su marca y el siguiente resaltado. */
.pasos-programa { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .6rem; margin: 0 0 1rem; }
.pasos-programa li { display: flex; gap: .65rem; align-items: flex-start; padding: .8rem .9rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); }
.pasos-programa li .tenue { font-size: .8rem; margin: .1rem 0 .4rem; line-height: 1.4; }
.pasos-programa li .boton { margin-top: .2rem; }
.pasos-programa__n { display: inline-grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--papel); border: 1px solid var(--linea-2); font-size: .8rem; font-weight: 700; }
.pasos-programa__n .icono { width: 16px; height: 16px; }
.pasos-programa__t { margin: .1rem 0 0; font-weight: 600; }
.pasos-programa .es-hecho .pasos-programa__n { background: var(--ok); border-color: var(--ok); color: #fff; }
.pasos-programa .es-siguiente { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }

/* ==========================================================
   IMPRESIÓN
   ----------------------------------------------------------
   Para quien imprime una pantalla en vez de usar los PDF: sin menús
   ni botones, en blanco y negro.
   ========================================================== */
@media print {
  .cabecera, .menu-panel, .menu-cliente, .boton, .mini-acciones, .editar, .anadir, .descanso, .saltar, .escribir, .camara, .comparador__control, .comparador__elige, .muneco { display: none !important; }
  body.portal { background: #fff; }
  .marco--panel { display: block; }
  .tarjeta, .sesion, .e-item { box-shadow: none; break-inside: avoid; }
}

/* ==========================================================
   QUE NADA SE VEA PEGADO
   ----------------------------------------------------------
   Bloques que se siguen en el flujo de la página (tarjetas, avisos,
   tablas, calendario, gráficas, botoneras…) sin margen propio se
   tocaban: la caja gris del semáforo pegada al botón de debajo, la
   tarjeta del mes encima de sus cifras, «Enviar la revisión» contra la
   tarjeta siguiente… Aquí, el aire entre ellos. Solo cuando el padre
   NO es una rejilla o una pila (ahí ya lo pone el gap y un margen lo
   duplicaría o descuadraría las columnas). En flujo normal los márgenes
   se colapsan: si uno ya tenía su margen, no se suma.
   Lo mide navegador-espacios.py (en navegador.sh): menos de 6 px entre
   una caja y lo que la sigue, falla.
   ========================================================== */
:where(:not(.pila):not(.rejilla):not(.graficas):not(.indicadores):not(.formulario)) > :is(.tarjeta, .rejilla, .vacio, .indicadores, .graficas, .cal-mes, .tabla-envoltura, .aviso, .constructor, .formulario, .semaforo, .avance, .logros, .ficha-bloque, .nota)
  + :is(.tarjeta, .rejilla, .vacio, .indicadores, .graficas, .tabla-envoltura, .aviso, .botonera, .formulario, .cal-mes) { margin-top: 1rem; }
/* Un botón suelto (acción con confirmación) y el párrafo que le sigue. */
.accion-post + :is(p, .tarjeta, .aviso, .accion-post) { margin-top: .9rem; }
/* Dentro de un aviso, el botón no va pegado al texto. */
.aviso form, .aviso .botonera { margin-top: .65rem; }
/* La ayuda bajo el desplegable de ejercicios (el selector con buscador no es una rejilla). */
.campo--selector .campo__ayuda, .campo--selector + .campo__ayuda { margin-top: .4rem; }
/* Lo que trabaja (etiquetas que saltan de línea en el móvil) y lo que va debajo. */
.trabaja { row-gap: .45rem; }
.item__alt, .item__prog { margin-top: .5rem; }
.trabaja + p { margin-top: .45rem; }
/* En la lista de documentos, los botones algo separados del texto. */
.documento__acciones { margin-top: .35rem; }
/* En el entrenamiento visto por el entrenador: «Previsto…» y su tabla. */
.registro-item .tabla-envoltura { margin-top: .6rem; }

/* ==========================================================
   EL INICIO DEL CLIENTE: EL PANEL
   ----------------------------------------------------------
   Arriba, quién es: la foto (o las iniciales) dentro de un anillo de
   puntos —el halftone del logo— que se enciende con las sesiones de la
   semana; el saludo; su fase (huevo → oruga → crisálida → mariposa →
   efecto mariposa) con lo que falta para la siguiente; y cuatro cifras
   con su icono. Es lo único con adorno de la página (la trama de puntos
   de la esquina): el resto, tarjetas tranquilas.
   ========================================================== */
.panel-cliente {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.1rem; align-items: center;
  margin: 0 0 1.25rem; padding: 1.1rem 1.1rem 1rem;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-grande); box-shadow: var(--sombra-1);
}
/* La trama de puntos de la marca en la esquina, desvaneciéndose: un degradado, cero imágenes. */
.panel-cliente::before {
  content: ""; position: absolute; top: 0; right: 0; width: 70%; height: 100%; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(180, 83, 47, .22) 1.15px, transparent 1.4px); background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(110% 95% at 100% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(110% 95% at 100% 0%, #000 0%, transparent 72%);
}
.panel-cliente__foto { position: relative; display: block; border-radius: 50%; text-decoration: none; }
.panel-cliente__poner { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--tinta); color: var(--papel); box-shadow: 0 0 0 3px var(--blanco); }
.panel-cliente__poner .icono { width: 16px; height: 16px; }
.panel-cliente__quien { min-width: 0; }
.panel-cliente__quien .ojo { margin: 0; }
/* break-word: un nombre largo («Maximiliano») no cabe entero en la columna de al lado de la foto
   a 360 px; mejor partido que saliéndose de la tarjeta. */
.panel-cliente__quien .titular { margin: .1rem 0 0; font-size: clamp(1.9rem, 7.5vw, 2.6rem); overflow-wrap: break-word; }
/* En el móvil la fase y las cifras van debajo, a todo el ancho: al lado de la foto, la fase
   quedaba en 200 px y «Crisálida · 35 sesiones» se partía en dos líneas. */
.panel-cliente > .fase { grid-column: 1 / -1; }
.panel-cliente__cifras { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .1rem 0 0; }
.cifra { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .6rem .7rem; border-radius: var(--r-medio); background: var(--papel); }
.cifra .icono { flex: 0 0 auto; width: 21px; height: 21px; color: var(--acento); }
.cifra > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cifra strong { font-size: 1.08rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cifra strong + span { font-size: .74rem; color: var(--gris); }
/* La racha encendida (dos semanas o más), con el fondo del acento. */
.cifra--viva { background: var(--acento-fondo); }
/* En el ordenador, tres columnas: la foto; el saludo con la fase debajo; las cifras. */
@media (min-width: 900px) {
  .panel-cliente { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); gap: .75rem 1.6rem; padding: 1.4rem 1.6rem; }
  .panel-cliente__foto { grid-row: 1 / span 2; }
  .panel-cliente__quien { grid-column: 2; grid-row: 1; align-self: end; }
  .panel-cliente > .fase { grid-column: 2; grid-row: 2; align-self: start; }
  .panel-cliente__cifras { grid-column: 3; grid-row: 1 / span 2; }
}

/* La foto (o las iniciales), con o sin el anillo de puntos. */
.avatar { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; }
.avatar--s { width: 30px; height: 30px; }
.avatar--m { width: 46px; height: 46px; }
.avatar--l { width: 88px; height: 88px; }
.avatar__img, .avatar__ini { width: 100%; height: 100%; border-radius: 50%; }
.avatar__img { display: block; object-fit: cover; background: var(--papel-2); }
.avatar__ini { display: grid; place-items: center; background: var(--tinta); color: var(--papel); font-weight: 700; font-size: .8rem; letter-spacing: .02em; }
.avatar--m .avatar__ini { font-size: .95rem; }
.avatar--l .avatar__ini { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.9rem; letter-spacing: 0; }
/* Con anillo, la foto deja sitio a los puntos alrededor. */
.avatar--anillo { padding: 10px; }
.avatar--anillo.avatar--l { width: 108px; height: 108px; }
.anillo { position: absolute; inset: 0; width: 100%; height: 100%; }
.anillo__p { fill: var(--linea-2); }
.anillo__p.es-on { fill: var(--acento); }
@media (min-width: 900px) { .avatar--anillo.avatar--l { width: 124px; height: 124px; } }

/* La fase de la metamorfosis. */
.fase { display: flex; align-items: center; gap: .75rem; }
.fase-img { flex: 0 0 auto; width: 62px; height: 62px; }
@media (min-width: 900px) { .fase-img { width: 76px; height: 76px; } }
.fase__txt { flex: 1 1 auto; min-width: 0; }
.fase__txt p { margin: 0; font-size: .9rem; }
.fase__barra { display: block; width: 100%; max-width: 240px; height: 6px; margin: .4rem 0 .35rem; }
.fase__fondo { fill: var(--papel-2); }
.fase__valor { fill: var(--acento); }
.fase__txt .fase__falta { font-size: .8rem; color: var(--gris); }

/* El cuerpo del inicio: lo que toca y tu semana a un lado; tus citas y tus retos al otro.
   En el móvil, una sola columna con lo importante arriba: lo que toca, tus citas, tu semana y
   tus retos (las dos pilas se «deshacen» con display: contents y manda el orden). */
.inicio-rejilla { display: grid; gap: 1rem; align-items: start; }
@media (max-width: 899px) {
  .inicio-rejilla > .pila { display: contents; }
  .inicio-rejilla .foco { order: 1; }
  .inicio-rejilla .tarjeta--citas { order: 2; }
  .inicio-rejilla .tarjeta--resumen { order: 3; }
  .inicio-rejilla .tarjeta--semana-mus { order: 4; }
  .inicio-rejilla .tarjeta--retos { order: 5; }
}
@media (min-width: 900px) { .inicio-rejilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
/* En el ordenador, el inicio usa más ancho que el resto de páginas del cliente (que se leen como el móvil). */
@media (min-width: 900px) { .marco--cliente .contenido:has(.panel-cliente) { max-width: 1100px; } }
.inicio-mas { margin-top: 1rem; }

/* Los títulos de las tarjetas con su icono. */
.tarjeta__icono { width: 19px; height: 19px; margin-right: .45rem; vertical-align: -3px; color: var(--acento); }

/* Tus citas. */
.cita-item { display: flex; gap: .7rem; align-items: flex-start; }
.cita-item > .icono { flex: 0 0 auto; width: 22px; height: 22px; margin-top: .1rem; color: var(--acento); }
.cita-item > div { min-width: 0; }
.cita-item__t { margin: 0; font-weight: 600; }
.cita-item__cuando { margin: .1rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.2; }
.cita-item .boton { margin-top: .6rem; }
.para-llamada { margin: 1rem 0; padding: .85rem .9rem; border-radius: var(--r-medio); background: var(--acento-fondo); }
.para-llamada__t { display: flex; align-items: center; gap: .45rem; margin: 0 0 .55rem; font-weight: 600; font-size: .92rem; }
.para-llamada__t .icono { width: 18px; height: 18px; color: var(--acento-2); }
.para-llamada > .tenue { margin: 0 0 .6rem; font-size: .84rem; }
.para-llamada__lista { list-style: none; display: grid; gap: .35rem; margin: 0 0 .65rem; }
.para-llamada__lista li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .3rem .35rem .7rem; border-radius: var(--r-chico); background: var(--blanco); font-size: .88rem; line-height: 1.4; }
.para-llamada__lista form { flex: 0 0 auto; margin: 0; }
.para-llamada__lista li > span { min-width: 0; }
.para-llamada__de { display: block; margin-top: .1rem; font-size: .74rem; color: var(--acento-2); }
.para-llamada__lista li:not(:has(form)) { padding-right: .7rem; }
.para-llamada__form { display: grid; gap: .5rem; }
.para-llamada__form textarea { width: 100%; min-height: 64px; padding: .55rem .7rem; border: 1px solid var(--acento-borde); border-radius: var(--r-chico); background: var(--blanco); color: var(--tinta); font: inherit; font-size: .9rem; resize: vertical; }
.para-llamada__form .boton { justify-self: start; }

/* Tu semana, por músculo. */
.semana-mus { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.semana-mus .figura { width: 96px; height: auto; }
.mus-lista { list-style: none; display: grid; gap: .5rem; }
/* El nombre y la cifra en una línea; la barra debajo, a todo el ancho. En una sola fila
   (nombre | barra | cifra) la barra se quedaba en 50 px en el móvil y no se leía. */
.mus { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .6rem; align-items: baseline; font-size: .86rem; }
.mus__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mus__c { grid-row: 1; grid-column: 2; }
.mus__barra { grid-row: 2; grid-column: 1 / -1; display: block; width: 100%; height: 8px; }
.mus__fondo { fill: var(--papel-2); }
.mus__valor { fill: var(--acento); }
.mus--hecho .mus__valor { fill: var(--ok); }
.mus__c { font-size: .78rem; color: var(--gris); white-space: nowrap; }
.semana-mus__nota { margin: .7rem 0 0; font-size: .78rem; }

/* Cuánto llevas de tu semana y qué te conviene entrenar (arriba de «Tu semana, por músculo»). */
.semana-pct { margin: 0 0 1.1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--linea); }
.semana-pct__cifra { display: flex; align-items: baseline; gap: .45rem; margin: 0 0 .5rem; }
.semana-pct__cifra strong { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 2.2rem; line-height: 1; }
.semana-pct__cifra span { font-size: .86rem; color: var(--gris); }
.semana-pct__barra { display: block; width: 100%; height: 8px; }
.semana-pct__valor { fill: var(--acento); }
.semana-pct--completa .semana-pct__valor { fill: var(--ok); }
.semana-pct__consejo { display: flex; gap: .5rem; align-items: flex-start; margin: .7rem 0 0; font-size: .9rem; line-height: 1.45; }
.semana-pct__consejo .icono { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .1rem; color: var(--acento); }
.semana-pct--completa .semana-pct__consejo .icono { color: var(--ok); }
.conseguido__consejo { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 1.25rem; padding: .7rem .85rem; border-radius: var(--r-medio); background: var(--blanco); border: 1px solid var(--linea); font-size: .9rem; line-height: 1.45; }
.conseguido__consejo .icono { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .1rem; color: var(--acento); }

/* Tus retos. */
.retos { list-style: none; display: grid; gap: .6rem; }
.reto a { display: grid; gap: .4rem; padding: .75rem .85rem; border-radius: var(--r-medio); background: var(--papel); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .reto a:hover { background: var(--papel-2); } }
.reto__cab { display: flex; gap: .55rem; align-items: flex-start; }
.reto__cab .icono { flex: 0 0 auto; width: 20px; height: 20px; margin-top: .1rem; color: var(--acento); }
.reto__cab > span { display: flex; flex-direction: column; min-width: 0; }
.reto__cab .tenue { font-size: .8rem; }
.reto__barra { display: block; width: 100%; height: 8px; }
.reto__fondo { fill: var(--blanco); }
.reto__valor { fill: var(--acento); }
.reto--logrado .reto__valor { fill: var(--ok); }
.reto__txt { font-size: .8rem; color: var(--gris); }

/* «Mi cuenta»: tu foto. */
.tu-foto { display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: wrap; }
.tu-foto > div { flex: 1 1 260px; min-width: 0; }
.tu-foto .formulario { margin: .7rem 0 .4rem; }
.tu-foto__nota { margin: .6rem 0 0; font-size: .78rem; }

/* ==========================================================
   EL PANEL: CARAS, FASE Y LA LLAMADA CON SU DOSSIER
   ========================================================== */

/* La ficha empieza por su cara (o sus iniciales) y su fase. */
/* Arriba y no centrada: en el móvil los botones bajan a otra línea y, centrada, la cara quedaba al lado de los botones y no del nombre. */
.ficha-cabeza { display: flex; align-items: flex-start; gap: .9rem; }
.ficha-cabeza > .avatar { width: 52px; height: 52px; }
@media (min-width: 700px) { .ficha-cabeza > .avatar { width: 64px; height: 64px; } }
.ficha-cabeza > .avatar .avatar__ini { font-size: 1.45rem; }
.ficha-cabeza > .encabezado { flex: 1 1 auto; min-width: 0; }
.ficha-fase { display: inline-flex; align-items: center; gap: .4rem; margin-right: .35rem; font-size: .86rem; vertical-align: middle; }
.ficha-fase .fase-img { width: 26px; height: 26px; }
/* Una cara pequeña al lado del nombre (listado de clientes, bandeja de mensajes). */
.quien { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.quien > div { min-width: 0; }
.bandeja__quien { display: flex; align-items: center; gap: .5rem; min-width: 0; }

/* Lo que se apunta desde un mensaje para la llamada. */
.hilo__apuntar { margin: .1rem .4rem 0; }
.hilo__apuntar .enlace, .contado__fijar .enlace { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; padding: .2rem 0; font-size: .76rem; }
.hilo__apuntar .icono, .contado__fijar .icono, .hilo__apuntado .icono, .contado__fijo .icono { width: 14px; height: 14px; }
.hilo__apuntado, .contado__fijo { display: inline-flex; align-items: center; gap: .3rem; margin: .25rem .4rem 0; font-size: .74rem; color: var(--acento-2); }

/* Arriba de la pestaña: la llamada y el periodo del dossier, lado a lado en el ordenador. */
.llamada-cabeza + .dossier { margin-top: 1rem; }
@media (min-width: 1000px) { .llamada-cabeza { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.llamada-prox { display: flex; gap: .8rem; align-items: flex-start; }
.llamada-prox > .icono { flex: 0 0 auto; width: 26px; height: 26px; margin-top: .15rem; color: var(--acento); }
.llamada-prox > div { flex: 1 1 auto; min-width: 0; }
.llamada-prox .ojo { margin: 0; }
.llamada-prox__cuando { margin: .1rem 0 .2rem; font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1.15; }
.llamada-prox .tenue { margin: .15rem 0 0; font-size: .82rem; }
.llamada-programar__t { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 .9rem; }
.llamada-programar__t > .icono { flex: 0 0 auto; width: 24px; height: 24px; margin-top: .1rem; color: var(--acento); }
.llamada-programar__t > span { display: flex; flex-direction: column; gap: .15rem; }
.llamada-programar__t .tenue { font-size: .84rem; }
.llamada-ult { margin: .8rem 0 0; font-size: .8rem; }
.nota--aviso { color: var(--tinta); }
.nota--aviso > .icono:first-child { color: var(--aviso, var(--acento)); }

.dossier-periodo { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: flex-end; justify-content: space-between; }
.dossier-periodo .ojo { margin: 0; }
.dossier-periodo__fechas { margin: .15rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1.15; }
.dossier-periodo__form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.dossier-periodo__form .campo { margin: 0; width: 150px; }
.dossier-periodo__pdf { margin: 0; }
.dossier-periodo__nota { margin: .85rem 0 0; font-size: .78rem; }
.dossier-periodo__nota .icono { width: 14px; height: 14px; margin-right: .35rem; vertical-align: -2px; }

/* El dossier: lo que ha pasado a la izquierda; lo que se escribe durante la llamada a la derecha,
   quieto mientras se baja por los datos (en pantallas donde cabe: si no, va debajo, normal). */
.dossier { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1100px) {
  .dossier { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); }
  /* Debajo de la cabecera, que también se queda fija arriba. */
  .dossier__durante { position: sticky; top: calc(var(--alto-cabecera) + 1rem); }
}
/* Si la ventana es baja, el formulario no cabe quieto: con su propio scroll antes que cortado. */
@media (min-width: 1100px) and (max-height: 960px) {
  .dossier__durante { max-height: calc(100vh - var(--alto-cabecera) - 2rem); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-grande); }
}
.puntos-hablar { margin: 0; padding-left: 1.3rem; display: grid; gap: .55rem; }
.puntos-hablar li { padding-left: .2rem; line-height: 1.45; }
.puntos-hablar li::marker { font-weight: 700; color: var(--acento); }
/* La última siempre es la pregunta abierta: en cursiva, como la voz de la marca. */
.puntos-hablar li:last-child { font-family: var(--serif); font-style: italic; font-size: 1.12rem; }
.puntos-hablar__nota { margin: .9rem 0 0; font-size: .78rem; }
.temas-lista { list-style: none; display: grid; gap: .45rem; margin: 0 0 .8rem; }
.temas-lista li { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; padding: .55rem .3rem .55rem .8rem; border-radius: var(--r-chico); background: var(--acento-fondo); }
.temas-lista form { flex: 0 0 auto; margin: 0; }
.temas-lista li p { margin: 0; }
.temas-lista li .tenue { margin-top: .15rem; font-size: .76rem; }
.temas-nuevo { display: flex; gap: .5rem; align-items: center; }
.temas-nuevo__nota { margin: .45rem 0 0; font-size: .76rem; }
.temas-nuevo input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--linea-2); border-radius: var(--r-chico); background: var(--blanco); font: inherit; font-size: .9rem; color: var(--tinta); }
.cifras { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .8rem; }
.cifra--baja { background: var(--acento-fondo); }
.tabla--dossier td { vertical-align: top; }
/* La nota de debajo de la tabla: sin margen quedaba a 1 px de su borde (lo cazó navegador-espacios.py). */
.dossier__nota { margin: .7rem 0 0; font-size: .8rem; }
.contado-lista { list-style: none; display: grid; gap: .8rem; }
.contado { padding: 0 0 .8rem; border-bottom: 1px solid var(--linea); }
.contado:last-child { padding-bottom: 0; border-bottom: 0; }
.contado__de { display: flex; align-items: center; gap: .35rem; margin: 0 0 .25rem; font-size: .76rem; color: var(--gris); }
.contado__de .icono { width: 14px; height: 14px; }
.contado__texto p { margin: 0 0 .35rem; font-size: .92rem; line-height: 1.5; }
.contado.es-salud .contado__texto { padding-left: .7rem; border-left: 2px solid var(--acento-borde); }
.contado__fijar { margin: 0; }
.durante .opciones--checks { display: grid; gap: .45rem; margin: 0 0 1rem; padding: 0; border: 0; }
.durante .opciones--checks legend { margin-bottom: .45rem; padding: 0; font-weight: 600; font-size: .9rem; }
.durante__cual { margin: 0 0 .9rem; font-size: .82rem; }
.llamadas-ant { list-style: none; display: grid; gap: 1rem; }
.llamada-ant { padding-bottom: 1rem; border-bottom: 1px solid var(--linea); }
.llamada-ant:last-child { padding-bottom: 0; border-bottom: 0; }
.llamada-ant__cab { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin: 0; }
.llamada-ant .cita { margin: .6rem 0 0; }
.llamada-ant .plegable { margin: .6rem 0 0; }
/* En el constructor, lo decidido en la llamada (hasta que se publica la versión nueva). */
/* Con el óxido de la marca y no en azul: es lo de las llamadas, y no se confunde con «Por qué este programa», que va justo debajo. */
.aviso.de-llamada { background: var(--acento-fondo); border-color: var(--acento-borde); color: var(--tinta); }
.de-llamada > .icono { color: var(--acento); }
.de-llamada > div { display: grid; gap: .3rem; }
.de-llamada a { color: inherit; font-weight: 600; }
.de-llamada__resumen { color: var(--tinta-2); }


/* ==========================================================
   EL CHAT DEL PROGRAMA: «ESCRÍBELO Y LO CAMBIO»
   ----------------------------------------------------------
   Como la conversación con el cliente (lo tuyo a la derecha, en
   oscuro), pero la respuesta es una lista de lo que cambia: lo que
   se hará con su ✓ y lo que no se ha entendido con su aviso.
   ========================================================== */
.tarjeta--chat { border-color: var(--acento-borde); }
/* Las tarjetas a las que se vuelve con un ancla (#chat, #citas, #temas, #foto…): sin esto, al volver de un
   formulario su título quedaba tapado por la cabecera fija. */
.tarjeta[id] { scroll-margin-top: calc(var(--alto-cabecera) + 12px); }
.chat__intro { margin: 0 0 .9rem; color: var(--tinta-2); line-height: 1.5; }
/* Con su propio scroll si hay mucho: el constructor de debajo no debe quedar a kilómetros. */
.chat { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin: 0 0 1rem; max-height: 560px; overflow-y: auto; overscroll-behavior: contain; padding: .15rem .1rem .15rem 0; }
.chat__msg { display: flex; flex-direction: column; max-width: min(88%, 680px); }
.chat__msg--yo { align-self: flex-end; align-items: flex-end; }
.chat__msg--portal { align-self: flex-start; }
.chat__burbuja { padding: .7rem .9rem; border: 1px solid var(--linea); border-radius: 16px; background: var(--papel); font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.chat__msg--yo .chat__burbuja { background: var(--tinta); border-color: var(--tinta); color: var(--papel); border-bottom-right-radius: 6px; }
.chat__msg--portal .chat__burbuja { border-bottom-left-radius: 6px; }
.chat__meta { margin: .2rem .45rem 0; font-size: .72rem; color: var(--gris); }
.chat__lista { list-style: none; display: grid; gap: .45rem; margin: 0; }
.chat__lista li { display: flex; gap: .5rem; align-items: flex-start; }
.chat__lista .icono { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .17rem; }
.chat__ok .icono { color: var(--ok); }
.chat__no .icono { color: var(--aviso); }
.chat__pregunta { margin: .75rem 0 0; font-size: .84rem; color: var(--tinta-2); }
.chat__botones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.chat__accion { display: inline-flex; margin: 0; }
.chat__estado { display: flex; align-items: center; gap: .35rem; margin: .6rem 0 0; font-size: .8rem; color: var(--gris); }
.chat__estado:first-child { margin-top: 0; }
.chat__estado .icono { width: 15px; height: 15px; }
.chat__estado--hecho { color: var(--ok); font-weight: 600; }
.chat__escribir { display: flex; gap: .5rem; align-items: flex-end; }
.chat__escribir textarea { flex: 1 1 auto; min-width: 0; min-height: 50px; padding: .7rem .85rem; border: 1px solid var(--linea-2); border-radius: var(--r-medio);
  background: var(--blanco); color: var(--tinta); font: inherit; font-size: .95rem; line-height: 1.4; resize: vertical; }
@media (max-width: 599px) { .chat__escribir { flex-direction: column; align-items: stretch; } }
.chat__ayuda { margin: .9rem 0 0; }
.chat__ejemplos { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .7rem; }
.chat__ejemplo { padding: .4rem .75rem; border: 1px solid var(--linea-2); border-radius: 999px; background: var(--blanco); color: var(--tinta);
  font: inherit; font-size: .8rem; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .16s ease, transform .16s var(--ease-out); }
.chat__ejemplo:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .chat__ejemplo:hover { border-color: var(--tinta); } }
@media (prefers-reduced-motion: reduce) { .chat__ejemplo { transition: border-color .16s ease; } .chat__ejemplo:active { transform: none; } }
.chat__ayuda .tenue { font-size: .8rem; line-height: 1.5; }


/* ==========================================================
   EL ENTRENO POR TU CUENTA: «ESCRÍBELO Y LO ORDENO»
   ----------------------------------------------------------
   Lo que escribe con su jerga, convertido en una hoja ordenada:
   cada ejercicio con su número en la cursiva de la marca (como un
   cuaderno), sus tandas de series y, en óxido, la serie que fue al
   fallo. Lo que el portal no tiene claro se pregunta en la misma
   tarjeta («¿O era…?»), sin abrir nada más.
   ========================================================== */
.aviso--info { border-color: var(--info-borde); background: var(--info-fondo); color: var(--info); }
.libre-form { max-width: 760px; }
.libre-form .campo textarea { min-height: 220px; font-size: 16px; line-height: 1.5; }
.libre-ayuda { border: 1px solid var(--linea); border-radius: var(--r-medio); background: var(--blanco); }
.libre-ayuda > summary { cursor: pointer; padding: .7rem .9rem; font-size: .88rem; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.libre-ayuda > ul { list-style: none; display: grid; gap: .45rem; padding: 0 .9rem .3rem; }
.libre-ayuda li { display: grid; gap: .1rem; font-size: .86rem; }
/* El ejemplo en mono no: en la tipografía de siempre, sobre papel, para que se lea como lo que se escribe. */
.libre-ayuda code { justify-self: start; padding: .15rem .45rem; border-radius: 6px; background: var(--papel-2); font: inherit; font-weight: 600; overflow-wrap: anywhere; }
.libre-ayuda li span { color: var(--gris); }
.libre-ayuda > p { padding: 0 .9rem .8rem; font-size: .8rem; margin: .4rem 0 0; }

/* Al volver de «Ordenarlo», la página baja aquí: que no la tape la cabecera fija. */
.libre-vista { scroll-margin-top: calc(var(--alto-cabecera) + 12px); margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--linea-2); display: grid; gap: 1rem; }
.libre-vista__cab .ojo { margin-bottom: .2rem; }
.libre-vista__titulo { font-size: clamp(1.5rem, 3.6vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.libre-cifras { margin: .35rem 0 0; font-size: .9rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.libre-cifras span { white-space: nowrap; }
.libre-avisos { margin: 0 0 0 1rem; display: grid; gap: .3rem; font-size: .88rem; }
/* En la tarjeta «Lo que hiciste» las cifras van justo encima de la lista (en la vista previa las separa
   la rejilla de la sección): sin esto, se medían 2,6 px entre las dos. */
.libre-cifras + .libre-ejs { margin-top: .8rem; }

.libre-ejs { list-style: none; display: grid; gap: .7rem; }
.libre-ej { padding: .85rem .95rem .9rem; border: 1px solid var(--linea); border-radius: var(--r-medio); background: var(--blanco); min-width: 0; }
.libre-ej--sin { border-style: dashed; border-color: var(--linea-2); }
.libre-ej__cab { display: flex; gap: .7rem; align-items: baseline; }
/* El número, en la cursiva de la web: es el orden en que lo hizo, como en su libreta. */
.libre-ej__n { flex: 0 0 1.4rem; font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1; color: var(--acento); text-align: right; }
.libre-ej__quien { min-width: 0; }
.libre-ej__nombre { margin: 0; font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.libre-ej__escrito { margin: .1rem 0 0; font-size: .8rem; color: var(--gris); overflow-wrap: anywhere; }
.libre-ej__series { list-style: none; display: grid; gap: .25rem; margin: .55rem 0 0 2.1rem; font-size: .95rem; font-variant-numeric: tabular-nums; }
.libre-ej__series li { overflow-wrap: anywhere; }
.libre-ej__fallo { display: inline; font-size: .84rem; color: var(--acento-2); }
.libre-ej__nota, .libre-notas { display: flex; gap: .4rem; align-items: flex-start; margin: .5rem 0 0 2.1rem; font-size: .85rem; color: var(--tinta-2); overflow-wrap: anywhere; }
.libre-ej__nota .icono, .libre-notas .icono { width: 15px; height: 15px; margin-top: .16rem; color: var(--gris); }
.libre-notas { margin-left: 0; }
.libre-ej__ajuste { margin: .35rem 0 0 2.1rem; font-size: .8rem; color: var(--gris); }
.libre-ej__trabaja { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; margin: .55rem 0 0 2.1rem; font-size: .84rem; color: var(--tinta-2); }
.libre-ej__etq { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.libre-ej__elige { margin: .7rem 0 0 2.1rem; display: grid; gap: .5rem; }
.libre-ej__sin { display: flex; gap: .45rem; align-items: flex-start; margin: 0; font-size: .84rem; color: var(--info); }
.libre-ej__sin .icono { width: 16px; height: 16px; margin-top: .15rem; }
.libre-ej__dudas { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0; font-size: .84rem; }
.libre-ej__dudas > span { color: var(--gris); margin-right: .15rem; }
.libre-ej__opcion { min-height: 36px; padding: .35rem .8rem; border: 1px solid var(--linea-2); border-radius: 999px; background: var(--blanco); color: var(--tinta);
  font: inherit; font-size: .82rem; line-height: 1.25; text-align: left; cursor: pointer; transition: border-color .16s ease, transform .16s var(--ease-out); }
.libre-ej__opcion:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .libre-ej__opcion:hover { border-color: var(--tinta); } }
.libre-ej__cambiar > summary { cursor: pointer; font-size: .82rem; color: var(--gris); min-height: 36px; display: inline-flex; align-items: center; }
.libre-ej__cambiar[open] > summary { color: var(--tinta); }
.libre-ej__cambiar input { width: 100%; min-height: 46px; margin-top: .3rem; padding: .6rem .8rem; border: 1px solid var(--linea-2); border-radius: var(--r-chico);
  background: var(--blanco); color: var(--tinta); font: inherit; font-size: 16px; }
.libre-ej__cambiar .campo__ayuda { margin-top: .3rem; }
.libre-vista__musculos .subtitulo, .libre-vista__datos .subtitulo { margin-top: .4rem; }
.libre-vista__datos { display: grid; gap: .9rem; padding: 1rem; border-radius: var(--r-medio); background: var(--papel-2); }
.libre-vista__guardar { margin-top: .2rem; }
@media (max-width: 420px) {
  /* A 360 px, los dos rem de sangría se comen la línea: las series van pegadas al borde. */
  .libre-ej__series, .libre-ej__nota, .libre-ej__ajuste, .libre-ej__trabaja, .libre-ej__elige { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .libre-ej__opcion { transition: border-color .16s ease; } .libre-ej__opcion:active { transform: none; } }

.libre-invita { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; margin-top: 1.4rem; padding: 1rem 1.1rem;
  border: 1px dashed var(--linea-2); border-radius: var(--r-grande); background: var(--blanco); }
.libre-invita > div { flex: 1 1 18rem; min-width: 0; }
.libre-invita__titulo { margin: 0 0 .2rem; font-weight: 600; }
.libre-invita p:last-child { margin: 0; font-size: .9rem; color: var(--tinta-2); }
.libre-resultado { margin-top: 1rem; }
.libre-texto { margin: 1rem 0; border: 1px solid var(--linea); border-radius: var(--r-medio); background: var(--blanco); }
.libre-texto > summary { cursor: pointer; padding: .7rem .9rem; font-size: .88rem; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
/* Tal cual lo escribió, con sus saltos de línea; sin tipografía de máquina, que no es código. */
.libre-texto pre { margin: 0; padding: 0 .9rem .9rem; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9rem; color: var(--tinta-2); }

/* ==========================================================
   TU ESTADO AHORA
   ----------------------------------------------------------
   Lo primero, lo que pide atención (en ámbar, como cualquier
   aviso del portal); debajo, cómo se reparte el trabajo de dos
   semanas por grupos, con la barra en SVG (la política de
   seguridad no deja anchos en línea) y la última vez de cada uno.
   ========================================================== */
.estado__cab { margin: 0 0 .7rem; font-size: .86rem; color: var(--gris); }
.estado__avisos { list-style: none; display: grid; gap: .45rem; margin: 0 0 1rem; }
.estado__aviso { display: flex; gap: .55rem; align-items: flex-start; padding: .65rem .8rem; border-radius: var(--r-chico); border: 1px solid; font-size: .9rem; line-height: 1.45; }
.estado__aviso .icono { width: 17px; height: 17px; margin-top: .12rem; }
.estado__aviso--ojo { background: var(--aviso-fondo); border-color: var(--aviso-borde); color: var(--aviso); }
.estado__aviso--bien { background: var(--ok-fondo); border-color: var(--ok-borde); color: var(--ok); }
.estado__aviso--info { background: var(--info-fondo); border-color: var(--info-borde); color: var(--info); }
.estado__semana { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 1rem; font-size: .9rem; }
.estado__semana .icono { color: var(--acento); margin-top: .12rem; }
.estado__reparto .ojo { margin-bottom: .3rem; }
.estado__grupos { list-style: none; display: grid; gap: .05rem; }
/* Grupo · barra · % · última vez. La última columna es texto («hace 12 días»): con tope, se parte en dos líneas antes de empujar la barra a nada. */
.estado__grupos li { display: grid; grid-template-columns: minmax(0, 6.2rem) minmax(2.5rem, 1fr) 2.7rem minmax(0, 6.8rem); gap: .55rem; align-items: center; padding: .3rem 0; font-size: .9rem; }
.estado__g { min-width: 0; overflow-wrap: anywhere; }
.estado__barra { display: block; width: 100%; height: 8px; }
.estado__fondo { fill: var(--papel-2); }
.estado__valor { fill: #c66e4b; }
.estado__n { text-align: right; font-weight: 600; }
.estado__cuando { font-size: .76rem; color: var(--gris); line-height: 1.25; }
.estado__nota { font-size: .76rem; margin: .5rem 0 0; }
.estado__mapa { display: grid; justify-items: center; gap: .3rem; margin: 1rem 0 0; }
.estado__lista { margin-top: 1rem; }
.estado__lista ul { list-style: none; }
.estado__lista li { border-bottom: 1px solid var(--linea); }
.estado__lista li:last-child { border-bottom: 0; }
.estado__lista li > a, .estado__lista li > span { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .55rem 0; font-size: .88rem; text-decoration: none; min-height: 44px; }
.estado__fecha { color: var(--gris); font-size: .8rem; }
.estado__ent { min-width: 0; overflow-wrap: anywhere; }
.estado__zona { justify-self: end; padding: .15rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--papel-2); color: var(--tinta-2); white-space: nowrap; }
.estado__zona--pierna { background: #eef1e2; color: #3e5216; }
.estado__zona--superior { background: var(--acento-fondo); color: var(--acento-2); }
.estado__zona--core { background: var(--info-fondo); color: var(--info); }
@media (hover: hover) and (pointer: fine) { .estado__lista a:hover .estado__ent { text-decoration: underline; } }
@media (max-width: 480px) {
  .estado__grupos li { grid-template-columns: minmax(0, 5.4rem) minmax(2rem, 1fr) 2.6rem; }
  /* A 360 px no caben cuatro columnas: la última vez baja debajo, alineada con la barra. */
  .estado__cuando { grid-column: 2 / -1; margin-top: -.2rem; }
  .estado__lista li > a, .estado__lista li > span { grid-template-columns: minmax(0, 1fr) auto; }
  .estado__fecha { grid-column: 1 / -1; margin-bottom: -.3rem; }
}
/* En el inicio, una línea con lo primero que pide atención. */
.estado-aviso { display: flex; gap: .55rem; align-items: flex-start; margin: 0; padding: .75rem .9rem; border-radius: var(--r-medio); background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde); color: var(--aviso); font-size: .9rem; line-height: 1.45; }
.estado-aviso .icono { width: 18px; height: 18px; margin-top: .1rem; }
.estado-aviso a { color: inherit; font-weight: 600; white-space: nowrap; }