/* CS50 AI citation: written with the help of Claude (Anthropic), an AI assistant. Requirements, design decisions and review: JJhiru. */
/* ============================================================
   HealthMove — estilos
   CSS propio, sin librerías. Se organiza en capas para que el
   orden de importancia sea explícito y no dependa de la
   especificidad:
     tokens → base → estructura → componentes → pantallas → utilidades
   Fuente: Atkinson Hyperlegible, alojada en la app y en la caché
   del service worker (no bloquea el arranque sin red).
   ============================================================ */

@layer tokens, base, estructura, componentes, pantallas, utilidades;

/* Fuera de las capas a propósito: ninguna clase puede mostrar algo marcado con hidden. */
[hidden] { display: none !important; }

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fuente/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fuente/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------
   Tokens
   ------------------------------------------------------------ */
@layer tokens {
  :root {
    /* Color. Cada pareja texto/fondo cumple WCAG AA (4,5:1) o más. */
    --blanco: #FFFFFF;
    --tinta: #12211E;            /* texto principal */
    --tinta-suave: #50645D;      /* texto secundario, 6,1:1 sobre blanco */
    --eucalipto: #136B5A;        /* acción, 6,4:1 sobre blanco */
    --eucalipto-oscuro: #0E5546;
    --menta: #DCEFE7;            /* seleccionado */
    --menta-suave: #EEF7F3;
    --cielo: #E7F0F8;            /* información */
    --melocoton: #F7E6D8;        /* calidez */
    --niebla: #F4F7F6;           /* superficies */
    --borde: #D6E0DC;
    --borde-fuerte: #AFC0B9;
    --movimiento: #E07B39;       /* solo flechas de las ilustraciones, nunca texto */
    --aviso: #7A4100;
    --aviso-fondo: #FFF4E2;
    --detener: #A1261B;          /* solo para parar */
    --detener-fondo: #FBECEA;
    --foco: #0B57D0;

    /* Tipografía: escala 14 · 16 · 18 · 22 · 28 · 36 · 48 */
    --fuente: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --t-xs: 0.875rem;
    --t-s: 1rem;
    --t-m: 1.125rem;
    --t-l: 1.375rem;
    --t-xl: 1.75rem;
    --t-2xl: 2.25rem;
    --t-3xl: 3rem;

    /* Espacio (múltiplos de 4 px) */
    --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
    --e-5: 1.5rem;  --e-6: 2rem;   --e-7: 3rem;    --e-8: 4rem;

    /* Forma */
    --r-s: 10px;
    --r-m: 14px;
    --r-l: 20px;
    --r-total: 999px;
    --sombra: 0 10px 30px -12px rgb(18 33 30 / 0.22);
    --sombra-baja: 0 1px 2px rgb(18 33 30 / 0.06), 0 2px 8px -2px rgb(18 33 30 / 0.08);

    /* Controles: 52 px, cómodos con dedos poco precisos */
    --toque: 3.25rem;
    --ancho-lateral: 17rem;
    --ancho-hoja: 72rem;
    --ancho-lectura: 42rem;
    --borde-ancho: 2px;

    --rapido: 120ms;
    --normal: 200ms;
    color-scheme: light;
  }
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    background: var(--blanco);
    color: var(--tinta);
    font: var(--t-m) / 1.55 var(--fuente);
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
  }
  img, svg { display: block; max-width: 100%; }
  h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
  h1 { font-size: clamp(var(--t-xl), 3.2vw + 1rem, var(--t-2xl)); margin: var(--e-1) 0 var(--e-3); }
  h2 { font-size: var(--t-l); margin: var(--e-6) 0 var(--e-3); }
  h3 { font-size: var(--t-m); margin: var(--e-5) 0 var(--e-2); }
  h1:focus { outline: none; }
  p, li { max-width: var(--ancho-lectura); }
  p { margin: 0 0 var(--e-4); }
  a { color: var(--eucalipto); font-weight: 700; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
  a:hover { color: var(--eucalipto-oscuro); }
  strong { font-weight: 700; }
  :focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--menta); }
}

/* ------------------------------------------------------------
   Estructura: la página nunca se desplaza; solo el contenido.
   Móvil: cabecera + contenido + acciones + barra inferior.
   Escritorio (≥ 992 px): menú lateral + columna.
   ------------------------------------------------------------ */
@layer estructura {
  .app { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
  .columna { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100dvh; }

  .saltar {
    position: absolute; left: var(--e-4); top: -4rem; z-index: 10;
    background: var(--tinta); color: var(--blanco); padding: var(--e-2) var(--e-4); border-radius: var(--r-s);
  }
  .saltar:focus { top: var(--e-4); }

  .marca {
    display: inline-flex; align-items: center; gap: var(--e-2);
    min-height: var(--toque);
    color: var(--tinta); text-decoration: none; font-weight: 700; font-size: var(--t-m); letter-spacing: -0.01em;
  }
  .marca img { border-radius: 9px; }

  .cabecera {
    display: flex; align-items: center; gap: var(--e-2);
    min-height: calc(var(--toque) + var(--e-2));
    padding: max(env(safe-area-inset-top), var(--e-2)) var(--e-4) var(--e-1);
  }
  .cabecera .marca-derecha { margin-left: auto; }

  .contenido { flex: 1; min-height: 0; overflow-y: auto; outline: none; overscroll-behavior: contain; scroll-padding-top: var(--e-4); }
  .hoja { width: 100%; max-width: var(--ancho-hoja); margin: 0 auto; padding: var(--e-2) var(--e-4) var(--e-7); }
  .hoja-lectura { max-width: calc(var(--ancho-lectura) + 2 * var(--e-4)); }
  .hoja-sangre { padding-top: 0; }

  .acciones { background: var(--blanco); box-shadow: 0 -1px 0 var(--borde); padding: var(--e-3) var(--e-4) var(--e-3); }
  .acciones:empty { display: none; }
  .acciones-dentro { display: flex; flex-wrap: wrap; gap: var(--e-3); max-width: var(--ancho-hoja); margin: 0 auto; }
  .acciones-dentro > * { flex: 1 1 auto; white-space: nowrap; }
  .acciones-lectura .acciones-dentro { max-width: var(--ancho-lectura); }

  /* Barra inferior (móvil) */
  .inferior {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--blanco); border-top: 1px solid var(--borde);
    padding: var(--e-1) var(--e-2) max(env(safe-area-inset-bottom), var(--e-2));
  }
  .inferior a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: var(--toque); padding: var(--e-1) 0;
    color: var(--tinta-suave); text-decoration: none; font-size: var(--t-xs); font-weight: 700;
    border-radius: var(--r-m);
  }
  .inferior .ico { width: 1.5rem; height: 1.5rem; padding: 2px 14px; box-sizing: content-box; border-radius: var(--r-total); transition: background var(--normal); }
  .inferior a[aria-current="page"] { color: var(--eucalipto-oscuro); }
  .inferior a[aria-current="page"] .ico { background: var(--menta); }

  /* Menú lateral (escritorio) */
  .lateral { display: none; }

  @media (min-width: 62rem) {
    .app { grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); }
    .lateral {
      display: flex; flex-direction: column; gap: var(--e-2);
      height: 100dvh; padding: var(--e-5) var(--e-4); border-right: 1px solid var(--borde);
      background: var(--niebla);
    }
    .lateral .marca { padding: 0 var(--e-3); margin-bottom: var(--e-4); font-size: var(--t-l); }
    .lateral-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
    .lateral-lista a {
      display: flex; align-items: center; gap: var(--e-3);
      min-height: 3rem; padding: 0 var(--e-3); border-radius: var(--r-m);
      color: var(--tinta); text-decoration: none; font-weight: 700;
    }
    .lateral-lista a:hover { background: var(--blanco); }
    .lateral-lista a[aria-current="page"] { background: var(--menta); color: var(--eucalipto-oscuro); }
    .lateral .boton-bloque { margin: var(--e-4) 0; }
    .lateral-secundaria { margin-top: auto; }
    .lateral-secundaria a { font-weight: 400; color: var(--tinta-suave); }

    .inferior { display: none; }
    .cabecera .marca { display: none; }
    .cabecera:not(:has(.atras)) { display: none; }
    .hoja { padding: var(--e-5) var(--e-6) var(--e-8); }
    .acciones { padding: var(--e-4) var(--e-6); }
    .acciones-dentro > * { flex: 0 1 auto; min-width: 12rem; }
  }

  /* Modo concentración: reproductor y bienvenida, sin navegación. */
  body[data-modo="concentracion"] .lateral,
  body[data-modo="concentracion"] .inferior { display: none; }
  @media (min-width: 62rem) {
    body[data-modo="concentracion"] .app { grid-template-columns: minmax(0, 1fr); }
    body[data-modo="concentracion"] .cabecera { display: flex; }
    body[data-modo="concentracion"] .cabecera .marca { display: inline-flex; }
  }
}

/* ------------------------------------------------------------
   Componentes
   ------------------------------------------------------------ */
@layer componentes {
  .ico { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

  /* Botones. Por defecto, secundario (borde); .primario relleno; .peligro solo para parar. */
  button, .boton {
    font: inherit; font-weight: 700; line-height: 1.2;
    min-height: var(--toque);
    padding: var(--e-3) var(--e-5);
    border-radius: var(--r-m);
    border: var(--borde-ancho) solid var(--eucalipto);
    background: var(--blanco); color: var(--eucalipto);
    cursor: pointer; text-align: center; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    touch-action: manipulation;
    transition: background var(--rapido), border-color var(--rapido), color var(--rapido), box-shadow var(--rapido);
  }
  button:hover, .boton:hover { background: var(--menta-suave); }
  button:active, .boton:active { transform: translateY(1px); }
  .primario { background: var(--eucalipto); color: var(--blanco); box-shadow: var(--sombra-baja); }
  .primario:hover { background: var(--eucalipto-oscuro); border-color: var(--eucalipto-oscuro); color: var(--blanco); }
  .suave { color: var(--tinta-suave); }
  .boton-suave { background: var(--niebla); border-color: transparent; color: var(--tinta); }
  .boton-suave:hover { background: var(--menta); }
  .peligro { background: var(--blanco); border-color: var(--detener); color: var(--detener); }
  .peligro:hover { background: var(--detener-fondo); }
  .boton-bloque { width: 100%; }
  .boton-grande { min-height: 3.75rem; font-size: var(--t-l); padding-inline: var(--e-6); }
  button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
  .enlace { border: 0; background: none; padding: 0 var(--e-1); min-height: 2.75rem; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; box-shadow: none; }
  .enlace:hover { background: none; color: var(--eucalipto-oscuro); }

  .atras {
    min-height: var(--toque); padding: 0 var(--e-4) 0 var(--e-3);
    border: 0; background: var(--niebla); color: var(--tinta); border-radius: var(--r-total);
  }
  .atras:hover { background: var(--menta); }

  /* Píldoras (información fija) e insignias */
  .pildoras { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; }
  .pildora {
    display: inline-flex; align-items: center; gap: var(--e-1);
    padding: var(--e-1) var(--e-3); min-height: 2.25rem;
    background: var(--niebla); border-radius: var(--r-total);
    font-size: var(--t-s); color: var(--tinta);
  }
  .insignia {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: var(--r-total);
    font-size: var(--t-xs); font-weight: 700; line-height: 1.5;
    background: var(--blanco); color: var(--tinta);
  }
  .insignia-borrador { background: var(--aviso-fondo); color: var(--aviso); }
  .insignia-ok { background: var(--menta); color: var(--eucalipto-oscuro); }

  /* Chips (filtros que se pueden marcar) */
  .chips { display: flex; gap: var(--e-2); overflow-x: auto; padding: var(--e-1) var(--e-4); margin: 0 calc(-1 * var(--e-4)); scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip {
    flex: none; min-height: 2.75rem; padding: var(--e-2) var(--e-4);
    border: var(--borde-ancho) solid var(--borde); border-radius: var(--r-total);
    background: var(--blanco); color: var(--tinta); font-weight: 700; font-size: var(--t-s);
  }
  .chip:hover { background: var(--niebla); }
  .chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }

  /* Filas de navegación: toda la fila se puede tocar. */
  .filas { list-style: none; padding: 0; margin: 0; border-radius: var(--r-l); background: var(--niebla); overflow: hidden; }
  .filas li { max-width: none; }
  .filas li + li { border-top: 1px solid var(--blanco); }
  .filas a {
    display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--e-3);
    min-height: 4.25rem; padding: var(--e-3) var(--e-4);
    color: var(--tinta); text-decoration: none; font-weight: 400;
  }
  .filas a::after {
    content: ""; width: 0.6rem; height: 0.6rem; grid-row: 1 / span 2; grid-column: 2;
    border-right: 2px solid var(--tinta-suave); border-top: 2px solid var(--tinta-suave); transform: rotate(45deg);
  }
  .filas a:hover { background: var(--menta-suave); }
  .fila-titulo { font-weight: 700; }
  .fila-detalle { color: var(--tinta-suave); font-size: var(--t-s); }
  .fila-estatica { display: flex; flex-direction: column; justify-content: center; min-height: 4.25rem; padding: var(--e-3) var(--e-4); }

  /* Formularios: cada opción es una tarjeta que se toca entera. */
  fieldset { border: 0; margin: 0 0 var(--e-5); padding: 0; min-width: 0; }
  legend { font-weight: 700; font-size: var(--t-m); margin-bottom: var(--e-3); padding: 0; }
  .opcion {
    display: flex; align-items: flex-start; gap: var(--e-3);
    min-height: var(--toque); padding: var(--e-4); margin-bottom: var(--e-2);
    background: var(--blanco);
    border: var(--borde-ancho) solid var(--borde); border-radius: var(--r-m);
    cursor: pointer; transition: border-color var(--rapido), background var(--rapido);
  }
  .opcion:hover { border-color: var(--borde-fuerte); }
  .opcion input { width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; flex: none; accent-color: var(--eucalipto); }
  .opcion:has(input:checked) { border-color: var(--eucalipto); background: var(--menta-suave); box-shadow: inset 0 0 0 1px var(--eucalipto); }
  .opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
  .opcion-ninguna { background: var(--niebla); border-color: transparent; }
  .grupo-titulo { font-size: var(--t-s); color: var(--tinta-suave); margin: var(--e-4) 0 var(--e-2); font-weight: 700; }
  .si-no { display: flex; gap: var(--e-2); flex-wrap: wrap; }
  .si-no .opcion { flex: 1 1 6rem; }

  .campo-texto {
    width: 100%; font: inherit; font-size: var(--t-l);
    min-height: var(--toque); padding: var(--e-3) var(--e-4);
    border: var(--borde-ancho) solid var(--borde-fuerte); border-radius: var(--r-m);
    color: var(--tinta); background: var(--blanco);
  }
  .campo-texto:focus { border-color: var(--eucalipto); outline: 3px solid var(--foco); outline-offset: 2px; }
  label.etiqueta { display: block; font-weight: 700; margin-bottom: var(--e-2); }

  /* Notas: información (cielo), aviso, peligro, éxito. */
  .nota { background: var(--cielo); border-radius: var(--r-l); padding: var(--e-4) var(--e-5); margin: var(--e-4) 0; }
  .nota > :first-child { margin-top: 0; }
  .nota > :last-child { margin-bottom: 0; }
  .nota h2 { margin-top: 0; font-size: var(--t-m); }
  .nota ul { padding-left: 1.2rem; margin: var(--e-2) 0; }
  .nota-neutra { background: var(--niebla); }
  .nota-aviso { background: var(--aviso-fondo); }
  .nota-aviso strong { color: var(--aviso); }
  .nota-peligro { background: var(--detener-fondo); }
  .nota-peligro strong { color: var(--detener); }
  .nota-exito { background: var(--menta); }
  .nota-con-icono { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; }
  .nota-con-icono > .ico { width: 1.5rem; height: 1.5rem; margin-top: 2px; }
  details.nota summary { cursor: pointer; font-weight: 700; min-height: 2.75rem; display: flex; align-items: center; }

  .franja { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: 0 var(--e-2) 0 var(--e-4); background: var(--menta); font-size: var(--t-s); line-height: 1.3; }
  .franja > span { padding: var(--e-2) 0; }
  .franja .enlace { font-weight: 700; flex: none; }
  .franja-aviso { background: var(--aviso-fondo); }

  /* Progreso por pasos */
  .pasos { display: flex; gap: var(--e-1); margin: var(--e-1) 0 var(--e-2); }
  .pasos span { flex: 1; height: 0.375rem; border-radius: var(--r-total); background: var(--borde); }
  .pasos span.hecho { background: var(--eucalipto); }
  .paso-texto { margin: 0 0 var(--e-2); color: var(--tinta-suave); font-size: var(--t-s); }

  .estado-falta { color: var(--aviso); font-weight: 700; }

  /* Cabecera de sección con enlace a la derecha */
  .seccion-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); margin: var(--e-6) 0 var(--e-3); }
  .seccion-cabecera h2 { margin: 0; }
  .seccion-cabecera a { white-space: nowrap; font-size: var(--t-s); }

  /* Esqueletos de carga */
  .esqueleto { background: linear-gradient(90deg, var(--niebla) 0%, #E9EFED 50%, var(--niebla) 100%); background-size: 200% 100%; animation: brillo 1.4s ease-in-out infinite; border-radius: var(--r-m); }
  @keyframes brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }

  /* Estado vacío */
  .vacio { text-align: center; padding: var(--e-7) var(--e-4); background: var(--niebla); border-radius: var(--r-l); }
  .vacio > .ico { width: 2.5rem; height: 2.5rem; margin: 0 auto var(--e-3); color: var(--eucalipto); }
  .vacio p { margin-inline: auto; }
}

/* ------------------------------------------------------------
   Pantallas
   ------------------------------------------------------------ */
@layer pantallas {
  .saludo { font-size: clamp(2.4rem, 7vw + 0.5rem, var(--t-3xl)); line-height: 1.05; letter-spacing: -0.03em; margin: var(--e-5) 0 var(--e-3); }
  .saludo-linea { font-size: var(--t-l); line-height: 1.45; margin: 0 0 var(--e-5); max-width: 28em; }

  /* Fotos de ambiente: recorte fijo, esquinas de 20 px y rótulo «Foto ilustrativa». */
  .foto { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; background: var(--niebla); }
  .foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
  .foto-rotulo {
    position: absolute; right: var(--e-2); bottom: var(--e-2);
    padding: 2px 8px; border-radius: var(--r-total);
    background: rgb(18 33 30 / 0.72); color: var(--blanco); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em;
  }

  /* Portada: en móvil la foto va a sangre; en escritorio, texto y foto en dos columnas. */
  .portada { display: grid; gap: var(--e-2); }
  .portada-foto { margin: calc(-1 * var(--e-2)) calc(-1 * var(--e-4)) 0; border-radius: 0 0 var(--r-l) var(--r-l); }
  .portada-foto img { aspect-ratio: 16 / 10; object-position: 50% 30%; }
  .portada .saludo { margin-top: var(--e-3); }
  .portada-botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
  .portada-botones > * { flex: 1 1 auto; }
  .portada-historial { display: flex; align-items: center; gap: var(--e-2); margin: var(--e-4) 0 0; color: var(--tinta-suave); }
  @media (min-width: 62rem) {
    .portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--e-7); padding: var(--e-4) 0 var(--e-2); }
    .portada-foto { order: 2; margin: 0; border-radius: var(--r-l); }
    .portada-foto img { aspect-ratio: 4 / 3; }
    .portada .saludo { margin-top: 0; }
    .portada-botones > * { flex: 0 1 auto; }
  }

  /* Mosaico por posición: fotos con el título encima, no tarjetas blancas. */
  .mosaico { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .mosaico li { max-width: none; }
  .azulejo { position: relative; display: block; border-radius: var(--r-l); overflow: hidden; color: var(--blanco); text-decoration: none; }
  .azulejo .foto { border-radius: 0; }
  .azulejo .foto img { aspect-ratio: 4 / 5; transition: transform var(--normal); }
  .azulejo:hover .foto img { transform: scale(1.03); }
  .azulejo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(18 33 30 / 0) 40%, rgb(18 33 30 / 0.82) 100%); }
  .azulejo-texto { position: absolute; left: var(--e-3); right: var(--e-3); bottom: var(--e-3); z-index: 1; display: grid; gap: 2px; }
  .azulejo-titulo { font-size: var(--t-m); font-weight: 700; line-height: 1.2; }
  .azulejo-detalle { font-size: var(--t-xs); font-weight: 700; opacity: 0.92; }
  .azulejo:focus-visible { outline-offset: 3px; }
  @media (min-width: 48rem) { .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); } }

  /* Bloque editorial: foto + puntos con icono. */
  .editorial { display: grid; gap: var(--e-4); margin-top: var(--e-7); padding: var(--e-4); background: var(--melocoton); border-radius: calc(var(--r-l) + 4px); }
  .editorial h2 { margin-top: var(--e-2); }
  .editorial-foto img { aspect-ratio: 16 / 10; }
  .puntos { list-style: none; padding: 0; margin: 0 0 var(--e-4); display: grid; gap: var(--e-3); }
  .puntos li { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; }
  .puntos .ico { width: 1.5rem; height: 1.5rem; color: var(--eucalipto); margin-top: 2px; }
  @media (min-width: 62rem) {
    .editorial { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: var(--e-6); padding: var(--e-5); }
    .editorial-foto img { aspect-ratio: 4 / 3; }
  }

  .bienvenida-foto { margin: 0 0 var(--e-4); }
  .bienvenida-foto img { aspect-ratio: 16 / 9; }

  /* Ilustraciones de ejercicios */
  .ilus { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--niebla); border-radius: var(--r-l); overflow: hidden; }
  .ilus .ilustracion { width: 100%; height: 100%; }
  .insignia-tiempo { position: absolute; right: var(--e-2); bottom: var(--e-2); background: var(--blanco); box-shadow: var(--sombra-baja); }
  .insignia-tiempo .ico { width: 0.95em; height: 0.95em; }

  /* Tarjeta de ejercicio: la ilustración manda, sin caja blanca alrededor. */
  .tarjeta-ej { display: grid; gap: 4px; color: var(--tinta); text-decoration: none; font-weight: 400; border-radius: var(--r-l); }
  .tarjeta-ej-ilus { position: relative; display: block; transition: transform var(--normal), box-shadow var(--normal); border-radius: var(--r-l); }
  .tarjeta-ej:hover .tarjeta-ej-ilus { transform: translateY(-2px); box-shadow: var(--sombra); }
  .tarjeta-ej:hover .tarjeta-ej-nombre { text-decoration: underline; }
  .tarjeta-ej-nombre { font-weight: 700; line-height: 1.3; margin-top: var(--e-1); }
  .tarjeta-ej-meta { color: var(--tinta-suave); font-size: var(--t-xs); }
  .tarjeta-ej .insignia-borrador { justify-self: start; }

  .rejilla-ej { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-3); }
  .rejilla-ej li { max-width: none; }
  @media (min-width: 48rem) { .rejilla-ej { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6) var(--e-4); } }
  @media (min-width: 75rem) { .rejilla-ej { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .mas { margin-top: var(--e-6); }

  /* Fila horizontal desplazable (inicio) */
  .riel { list-style: none; margin: 0 calc(-1 * var(--e-4)); padding: var(--e-1) var(--e-4) var(--e-3); display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: var(--e-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .riel li { scroll-snap-align: start; max-width: none; }
  @media (min-width: 48rem) { .riel { grid-auto-columns: 32%; } }
  @media (min-width: 62rem) { .riel { grid-auto-columns: 23%; margin: 0; padding-inline: 0; } }

  /* Explorar */
  .explorar-cabecera { margin-bottom: var(--e-4); }
  .filtros { display: grid; gap: var(--e-2); margin-bottom: var(--e-3); }
  .interruptor { display: inline-flex; align-items: center; gap: var(--e-3); min-height: 2.75rem; font-weight: 700; cursor: pointer; justify-self: start; }
  .interruptor input { appearance: none; width: 3rem; height: 1.75rem; margin: 0; border-radius: var(--r-total); background: var(--borde-fuerte); position: relative; cursor: pointer; transition: background var(--rapido); flex: none; }
  .interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.75rem - 6px); height: calc(1.75rem - 6px); border-radius: 50%; background: var(--blanco); transition: transform var(--rapido); box-shadow: var(--sombra-baja); }
  .interruptor input:checked { background: var(--eucalipto); }
  .interruptor input:checked::after { transform: translateX(1.25rem); }
  .interruptor input:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }

  /* Detalle de ejercicio: ilustración y texto en dos columnas en escritorio. */
  .detalle { display: grid; gap: var(--e-5); }
  .detalle-ilus { display: grid; gap: var(--e-2); align-content: start; }
  .ilus-grande { border-radius: var(--r-l); }
  .leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); margin: 0; color: var(--tinta-suave); font-size: var(--t-xs); }
  .leyenda span { display: inline-block; width: 1.4rem; height: 0.45rem; border-radius: var(--r-total); margin-right: 4px; vertical-align: middle; }
  .muestra-gris { background: #9AABA4; }
  .muestra-negra { background: var(--tinta); }
  .muestra-flecha { background: var(--movimiento); }
  .detalle-desc { font-size: var(--t-l); color: var(--tinta-suave); }
  .detalle .pildoras { margin-bottom: var(--e-2); }
  .detalle .pildora .ico { width: 1em; height: 1em; }
  .pasos-numerados { list-style: none; counter-reset: paso; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
  .pasos-numerados li { counter-increment: paso; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--e-3); align-items: start; }
  .pasos-numerados li::before { content: counter(paso); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--menta); color: var(--eucalipto-oscuro); font-weight: 700; }
  .dosis-detalle { margin-top: var(--e-4); padding: var(--e-3) var(--e-4); background: var(--niebla); border-radius: var(--r-m); }
  .ico-enlace { display: inline; width: 0.85em; height: 0.85em; margin-left: 4px; vertical-align: -1px; }
  @media (min-width: 62rem) {
    .detalle { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--e-7); align-items: start; }
    .detalle-ilus { position: sticky; top: var(--e-4); }
  }

  /* Rutina (lista provisional hasta la línea de tiempo) */
  .fase-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); }
  .fase-titulo span { color: var(--tinta-suave); font-size: var(--t-s); font-weight: 400; }
  .rutina { padding-left: 1.5rem; margin: 0; }
  .rutina li { padding: var(--e-2) 0; max-width: none; }
  .rutina .meta { display: block; color: var(--tinta-suave); font-size: var(--t-s); }

  /* Rutina: línea de tiempo vertical, no tarjetas */
  .rutina-resumen { margin-bottom: var(--e-3); }
  .rutina-resumen .ico { width: 1em; height: 1em; }
  .linea-tiempo { list-style: none; margin: var(--e-5) 0 0; padding: 0; }
  .linea-tiempo > .fase { position: relative; padding-left: var(--e-6); padding-bottom: var(--e-4); max-width: none; }
  .linea-tiempo > .fase::before { content: ""; position: absolute; left: 9px; top: 0.6rem; bottom: 0; width: 3px; background: var(--menta); border-radius: 2px; }
  .linea-tiempo > .fase::after { content: ""; position: absolute; left: 2px; top: 0.35rem; width: 17px; height: 17px; border-radius: 50%; background: var(--eucalipto); box-shadow: 0 0 0 4px var(--blanco); }
  .linea-tiempo .fase-titulo { margin: 0 0 var(--e-3); }
  .rutina-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
  .rutina-pasos li { max-width: none; }
  .paso-rutina {
    display: grid; grid-template-columns: auto 5.5rem 1fr auto; align-items: center; gap: var(--e-3);
    padding: var(--e-2); border-radius: var(--r-l); color: var(--tinta); text-decoration: none; font-weight: 400;
  }
  .paso-rutina:hover { background: var(--niebla); }
  .paso-num { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--niebla); font-weight: 700; font-size: var(--t-s); }
  .ilus-mini { border-radius: var(--r-m); }
  .paso-texto { display: grid; gap: 2px; min-width: 0; }
  .paso-nombre { font-weight: 700; line-height: 1.3; }
  .paso-meta { color: var(--tinta-suave); font-size: var(--t-s); }
  .paso-tiempo { color: var(--tinta-suave); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
  @media (max-width: 30rem) { .paso-rutina { grid-template-columns: auto 4.5rem 1fr; } .paso-tiempo { display: none; } }

  /* Perfil: posición con dibujo */
  .opciones-dibujo { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .opcion-dibujo { flex-direction: column; align-items: stretch; padding: var(--e-3); margin: 0; }
  .opcion-dibujo .ilus { border-radius: var(--r-m); background: var(--blanco); }
  .opcion-dibujo-texto { display: flex; gap: var(--e-3); align-items: flex-start; }

  /* Reproductor */
  .reproductor { display: flex; flex-direction: column; gap: var(--e-3); }
  .repro-cuerpo { display: grid; gap: var(--e-4); }
  .repro-texto { display: grid; gap: var(--e-3); align-content: start; }
  .controles { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--e-2); }
  .controles button { padding-inline: var(--e-3); }
  /* En móvil la ilustración no puede empujar los controles fuera de la pantalla. */
  .repro-ilus .ilus { width: min(100%, calc(26dvh * 4 / 3)); margin-inline: auto; }
  @media (min-width: 62rem) {
    .repro-ilus .ilus { width: 100%; }
    .repro-cuerpo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e-6); align-items: start; }
    .repro-ilus { position: sticky; top: 0; }
  }
  .reproductor .fase { margin: 0; color: var(--tinta-suave); font-size: var(--t-s); }
  .reproductor h1 { font-size: clamp(1.9rem, 5vw + 0.5rem, 2.5rem); margin: 0; }
  .reproductor ol { padding-left: 1.4rem; margin: 0; font-size: 1.2rem; }
  .reproductor ol li { margin-bottom: var(--e-2); }
  .dosis { font-weight: 700; font-size: 1.15rem; margin: var(--e-1) 0 0; }
  .tiempo { background: var(--niebla); border-radius: var(--r-l); padding: var(--e-4) var(--e-5); }
  .tiempo-cifra { font-size: 2.8rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
  .barra { height: 0.6rem; border-radius: var(--r-total); background: var(--borde); overflow: hidden; margin-top: var(--e-3); }
  .barra > span { display: block; height: 100%; width: 0; background: var(--eucalipto); transition: width 1s linear; }
  #anuncio { margin: 0; }
  /* "Detener" va en su propia fila, lejos de "Siguiente", para no tocar el botón equivocado. */
  .acciones-dentro > .parar { flex-basis: 100%; order: 2; }
  @media (min-width: 62rem) {
    /* En escritorio, «Detener» a la izquierda y «Siguiente» a la derecha, bien separados. */
    .acciones-dentro > .parar { flex-basis: auto; order: 0; margin-right: auto; }
  }
}

/* ------------------------------------------------------------
   Utilidades
   ------------------------------------------------------------ */
@layer utilidades {
  .solo-lectores { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .pequeno { font-size: var(--t-s); }
  .centrado { text-align: center; }
  .sin-margen { margin: 0; }
  .pila > * + * { margin-top: var(--e-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}