/* ============================================================================
   Lumina CRM · aprende.css — el módulo Aprende (M-018, ADR-0058)
   AP1 Aprende (Fiora arriba, recorridos, tareas), AP2 el reproductor de un tutorial, AP3 Buenas prácticas, AP6 Soporte y el «?» de
   cada cabecera (Fiora, M-079). Todo sale de los tokens: sirve igual en claro y oscuro y con cualquier color del centro.
   ========================================================================== */

/* ---------------------------------------------------------------- el «?» en la cabecera */
.btn-icon--ayuda { color: var(--primary); background: var(--primary-soft); flex: 0 0 auto; }
/* En Hoy, el «?» va entre el nombre del centro y la foto: el nombre cede espacio con puntos suspensivos, nunca se sale de la pantalla. */
.hoy-barra .hoy-centro { flex: 1 1 auto; min-width: 0; }
.hoy-barra .hoy-centro__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecera .btn-icon--ayuda { margin-left: var(--space-1); }

/* ---------------------------------------------------------------- Fiora (M-079, ADR-0103): el «?», la cabecera de Aprende y AP6
   Limpio: el saludo, la conversación, como mucho tres líneas debajo y la caja «Pregunta lo que quieras». Sin «visto» (ADR-0093). */
.hoja.hoja--ayuda { height: 92%; }
.hoja--ayuda .hoja__cuerpo { padding-top: 0; display: flex; flex-direction: column; }
.hoja--fiora .hoja__cab h2 { flex: 0 0 auto; }
.fiora__virtual { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-icon--novedad { position: relative; }
.btn-icon--novedad::after { content: ''; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--aviso); }   /* el rojo del iPhone, sin borde (M-028) */
.fiora { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; min-height: 0; }
.fiora--aprende { margin: var(--space-1) 0 var(--space-4); padding: var(--space-3); border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--primary-soft), var(--surface)); border: 1px solid var(--border); }
.fiora--ap6 { margin-top: var(--space-2); }
.fiora__cab { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-2); }
.fiora__cab b { font-family: var(--font-display); font-size: var(--fs-md); color: var(--text); }
.fiora__avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); }
.fiora__hilo { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-1); }
.hoja--fiora .fiora__hilo, .fiora--ap6 .fiora__hilo { flex: 1 1 auto; }
.fiora--aprende .fiora-msj__globo { background: var(--surface); }
.fiora-hilo__estado { display: flex; justify-content: center; }
.fiora-msj { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 100%; }
.fiora-msj__globo { padding: var(--space-2) var(--space-3); border-radius: var(--radius-l); font-size: var(--fs-md); line-height: 1.4; min-width: 0; }
.fiora-msj__globo p { margin: 0; }
.fiora-msj__globo ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.fiora-msj__globo ul.fiora-consejo { margin: 0; padding-left: 20px; list-style: disc; }   /* M-083: la consultora, una idea por viñeta */
.fiora-msj__globo ul.fiora-consejo li + li { margin-top: 6px; }
.fiora-msj__globo ul.fiora-consejo li::marker { color: var(--accent); }
.fiora-msj--fiora .fiora-msj__globo { background: var(--surface-2); border-bottom-left-radius: 6px; max-width: calc(100% - 38px); display: flex; flex-direction: column; gap: var(--space-2); }
/* M-085 (ADR-0109): la espera de Fiora: tres puntos que laten y una frase corta que entra suave cada vez que cambia */
.fiora-msj--fiora .fiora-msj__globo--espera { flex-direction: row; align-items: center; gap: 10px; color: var(--text-2); }
.fiora-puntos { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.fiora-puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); opacity: .35; animation: fiora-late 1.2s ease-in-out infinite; }
.fiora-puntos i:nth-child(2) { animation-delay: .15s; }
.fiora-puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes fiora-late { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.fiora-frase { font-size: var(--fs-sm); }
.fiora-frase--entra { animation: fiora-frase .35s ease-out; }
@keyframes fiora-frase { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fiora-puntos i { animation: none; opacity: .6; } .fiora-frase--entra { animation: none; } }
.fiora-msj--persona { justify-content: flex-end; }
.fiora-msj--persona .fiora-msj__globo { background: var(--primary); color: var(--primary-ink); border-bottom-right-radius: 6px; max-width: 82%; white-space: pre-wrap; overflow-wrap: anywhere; }
.fiora-msj--equipo { flex-direction: column; align-items: flex-start; gap: 4px; }
.fiora-msj__quien { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.fiora-msj--equipo .fiora-msj__globo { background: var(--accent-soft); border: 1px solid var(--accent); border-bottom-left-radius: 6px; max-width: 92%; }
.fiora-msj__botones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fiora-tarjeta { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); text-align: left; color: inherit; background: var(--surface); border: 1px solid var(--primary); border-radius: var(--radius-m); }
.fiora-tarjeta > .ico-sm:first-child { color: var(--primary); flex: 0 0 auto; }
.fiora-tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.fiora-tarjeta__titulo { font-weight: 600; line-height: 1.25; }
.fiora-tarjeta__sub { font-size: var(--fs-xs); color: var(--text-2); }
/* M-090: un tutorial con sus dos caminos, «Te lo muestro» y «Hazlo conmigo» (la tarjeta ya no es un solo botón) */
.fiora-tarjeta--caminos { flex-direction: column; align-items: stretch; cursor: default; }
.fiora-tarjeta__cab { display: flex; align-items: center; gap: var(--space-2); }
.fiora-tarjeta__cab > .ico-sm { color: var(--primary); flex: 0 0 auto; }
.fiora-tarjeta__caminos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fiora-practica { display: flex; flex-direction: column; gap: 4px; padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px dashed var(--accent); border-radius: var(--radius-m); font-size: var(--fs-sm); }
.fiora-practica__et { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.fiora-nota { text-align: left; font-size: var(--fs-sm); color: var(--primary); font-weight: 600; padding: 2px 0; }
.fiora-msj__pregunta { font-size: var(--fs-sm); color: var(--text-2); }
.fiora__frecuentes[hidden] { display: none; }
.fiora-valorar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: 38px; font-size: var(--fs-sm); color: var(--text-2); }
.fiora__rotulo { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin: var(--space-1) 0; }
.fiora__frecuentes, .fiora__sugerencias { display: flex; flex-direction: column; gap: 6px; }
.fiora__sugerencias:empty { display: none; }
.fiora-linea { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: 6px var(--space-3); text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fiora-linea span { overflow: hidden; text-overflow: ellipsis; }
.fiora-linea .ico-sm { flex: 0 0 auto; color: var(--text-3); }
.fiora__abajo { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); }
/* La zona de escribir se pega abajo y tapa lo que pasa por detrás hasta el borde: el relleno de abajo vive dentro de ella, nunca en el
   contenedor que hace scroll (por esa franja se asomaba el chat). Por arriba, el chat se desvanece en la misma separación de 8 px. */
.hoja--fiora .fiora__abajo, .fiora--ap6 .fiora__abajo { position: sticky; z-index: 1; background: var(--bg); }
.hoja--fiora .fiora__abajo::before, .fiora--ap6 .fiora__abajo::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--space-2); background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
/* El «?»: la hoja ya tapa la barra de pestañas y su propio relleno guarda la zona segura del iPhone. */
.hoja--fiora .hoja__cuerpo { padding-bottom: 0; scrollbar-width: none; }   /* el chat se desliza sin barra al lado, como AP6 (#app) */
.hoja--fiora .hoja__cuerpo::-webkit-scrollbar { display: none; }
.hoja--fiora .fiora__abajo { bottom: 0; padding-bottom: var(--space-4); }
/* AP6: la caja se apoya sobre la barra de pestañas (como .pie-fijo) y su relleno deja libre el «+», que sobresale de la barra. */
.fiora--ap6 .fiora__abajo { bottom: calc(var(--tabbar-alto) + var(--safe-bottom)); padding-bottom: var(--space-5); }
.fiora__persona { display: flex; justify-content: center; }
.fiora__persona[hidden] { display: none; }
.fiora__caja { display: flex; align-items: flex-end; gap: var(--space-2); }
.fiora__texto { flex: 1 1 auto; min-height: 56px; max-height: 132px; padding: 14px 18px; border-radius: 28px; border: 2px solid var(--primary); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-lg); line-height: 1.3; resize: none; box-shadow: var(--shadow-sm); overflow-y: hidden; scrollbar-width: none; }
/* Como WhatsApp: la caja nunca dibuja barra de scroll (en computador salía con flechitas dentro de la píldora). Mide lo mismo que el botón
   de enviar (56 px) y, cuando el texto pasa de cinco líneas, se desliza con el dedo o la rueda (soporte.js: ajustarAlto). */
.fiora__texto::-webkit-scrollbar { display: none; }
.fiora__texto--desborda { overflow-y: auto; }
.fiora__texto::placeholder { color: var(--text-3); }
.fiora__texto:focus { outline: none; box-shadow: 0 0 0 4px var(--primary-glow, rgba(30, 112, 102, 0.3)); }
.fiora__enviar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); transition: transform var(--dur-fast) var(--ease); }
.fiora__enviar:active { transform: scale(0.94); }
.fiora-estado { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; }
.fiora-estado--neutro { background: var(--surface-2); color: var(--text-2); }
.fiora-estado--aviso { background: var(--warning-soft); color: var(--warning-texto); }
.fiora-estado--primario { background: var(--primary-soft); color: var(--primary); }
.fiora-estado--apagado { background: var(--surface-2); color: var(--text-3); }
.fiora-lista { display: flex; flex-direction: column; gap: var(--space-2); }
.fiora-fila { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); text-align: left; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.fiora-fila--novedad { border-color: var(--primary); }
.fiora-fila__cuerpo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.fiora-fila__texto { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fiora-fila__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-2); }
.fiora-fila__novedad { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 700; }
.ap-biblioteca { margin-top: var(--space-2); }

/* ---------------------------------------------------------------- AP1 Aprende */
.ap-buscar { position: relative; margin: var(--space-2) 0 var(--space-4); }
.ap-buscar input { width: 100%; min-height: var(--tap); padding: 0 var(--space-4) 0 44px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-md); }
.ap-buscar .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.ap-resultados { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.ap-resultados .nota { font-size: var(--fs-sm); color: var(--text-2); }
.ap-rec { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; padding: var(--space-3); text-align: left; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.ap-rec__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.ap-rec__titulo { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); line-height: 1.2; }
.ap-rec__para { font-size: var(--fs-sm); color: var(--text-2); }
.ap-rec__num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-m); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-family: var(--font-display); font-weight: 600; }
.ap-rec__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-2); }
.ap-rec__pie .btn { flex: 0 0 auto; }
.ap-rec__botones { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.ap-tarea .fila__sub { white-space: normal; }
.ap-lista { display: flex; flex-direction: column; gap: var(--space-2); }
.ap-pregunta { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3); text-align: left; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.ap-pregunta__n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); }
.ap-pregunta__cuerpo { flex: 1; min-width: 0; }
.ap-pregunta__titulo { display: block; font-weight: 600; }
.ap-pregunta__sub { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.ap-pregunta .chip { flex: 0 0 auto; }
.chip--xs { font-size: var(--fs-xs); padding: 2px 8px; min-height: 0; }

/* ---------------------------------------------------------------- M-082 (ADR-0106): la explicación animada y «Hazlo conmigo»
   La pantalla grabada se acerca al botón de cada paso (el mismo anillo y el mismo dedo del reproductor), el esquema del flujo arriba con
   los íconos de la app y el botón recortado en grande junto a la frase. Sin movimiento si el teléfono pide reducirlo. */
.fiora-xpl { margin-top: var(--space-2); }
.xpl { display: flex; flex-direction: column; gap: var(--space-2); }
.xpl__flujo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.xpl__nodo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.xpl__nodo.actual { background: var(--primary); color: var(--primary-ink); }
.xpl__flecha { color: var(--text-2); display: inline-flex; opacity: 0.6; }
.xpl__escena { position: relative; isolation: isolate; border-radius: var(--radius-l); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }   /* sus capas (progreso, dedo, zonas de toque) se quedan adentro: nunca pasan por encima de la caja de Fiora */
.xpl__lienzo { position: relative; height: 270px; overflow: hidden; }
.xpl__mueve { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.xpl__img { display: block; width: 100%; height: 100%; }
.xpl__progreso { position: absolute; top: 6px; left: 8px; right: 8px; display: flex; gap: 3px; z-index: 6; pointer-events: none; }
.xpl__progreso i { flex: 1; height: 3px; border-radius: 3px; background: rgba(20, 16, 40, 0.18); }
.xpl__progreso i.hecha, .xpl__progreso i.actual { background: var(--primary); }
.xpl .rep__zona { bottom: 0; }
.xpl__texto { display: flex; flex-direction: column; gap: 4px; min-height: 52px; }
.xpl__num { font: 600 var(--fs-xs) var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.xpl__frase { display: flex; align-items: center; gap: var(--space-2); }
.xpl__frase:has(.xpl__boton--ancho) { flex-direction: column; align-items: stretch; }
.xpl__frase p { min-width: 0; }
.xpl__frase p { margin: 0; font-weight: 600; line-height: 1.3; }
.xpl__frase b { color: var(--primary); }
.xpl__boton { flex: 0 0 auto; display: inline-block; max-width: 45%; border-radius: 10px; background-repeat: no-repeat; background-color: var(--surface); box-shadow: 0 0 0 2px var(--primary), var(--shadow-sm); }
.xpl__boton--ancho { width: 100%; max-width: 100%; max-height: 64px; }
.xpl__ctl { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.xpl__pausa { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: var(--radius-pill); padding: 0 var(--space-3); min-height: 32px; font: 600 var(--fs-xs) var(--font-ui); }
.xpl__lista summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-2); padding: 6px 0; }
.xpl__lista ol { margin: var(--space-1) 0 0; padding-left: 1.2em; font-size: var(--fs-sm); color: var(--text-2); }
.xpl__fin[hidden] { display: none; }
.conmigo { position: absolute; inset: 0; z-index: 14; pointer-events: none; }
.conmigo__globo { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); pointer-events: auto; background: rgba(30, 27, 46, 0.94); color: #fff; border-radius: var(--radius-l); padding: 12px 14px; box-shadow: var(--shadow); display: grid; gap: 6px; }
.conmigo--arriba .conmigo__globo { bottom: auto; top: calc(14px + env(safe-area-inset-top, 0px)); }
.conmigo__globo .xpl__num { color: #cdc4ff; }
.conmigo__texto { margin: 0; font: 600 var(--fs-md) / 1.3 var(--font-ui); }
.conmigo__botones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.conmigo__botones .btn--ghost { color: #fff; background: rgba(255, 255, 255, 0.14); }
.conmigo--listo .conmigo__foco, .conmigo--listo .conmigo__dedo { opacity: 0 !important; }
.conmigo [hidden], .xpl [hidden] { display: none !important; }
/* M-090 (etapa «Fiora en la app»): con Fiora, el globo deja de ser una franja y va pegado a ella (fiora.css lo pone con left/top) */
.conmigo--fiora .conmigo__globo { right: auto; bottom: auto; width: min(300px, calc(100% - 24px)); }
.conmigo--fiora .conmigo__globo .xpl__num { color: #CBDDA0; }   /* un .btn con `hidden` se oculta de verdad */
@media (prefers-reduced-motion: reduce) { .xpl__mueve, .xpl__nodo { transition: none; } }

/* ---------------------------------------------------------------- AP2 reproductor */
.pantalla[data-pantalla="AP2"] { display: flex; flex-direction: column; padding-bottom: var(--space-3); }
.rep { position: relative; margin: 0 auto; width: 100%; max-width: 360px; aspect-ratio: 390 / 844; max-height: calc(100vh - 230px); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); user-select: none; touch-action: manipulation; }
/* Sin fundido: una captura reemplaza a la otra de golpe, para que nunca se vea la pantalla anterior detrás. */
.rep img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.rep img.vive { opacity: 1; }
/* En vivo (M-018): la demo de verdad en un recuadro del ancho del teléfono y del alto que queda en su pantalla; nada se escala. */
.rep--vivo { aspect-ratio: auto; max-width: 440px; height: clamp(440px, calc(100dvh - 230px), 760px); max-height: none; background: var(--bg); }
.rep__vivo { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.rep__respaldo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top center; background: var(--surface-2); opacity: 1 !important; }
.rep__respaldo[hidden], .rep__vivo[hidden] { display: none; }
body.en-tutorial [data-ayuda] { display: none !important; }   /* dentro del tutorial, la demo no ofrece otro «?» */
.rep__escudo { position: absolute; inset: 0; z-index: 2; }
.rep__cargando { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: var(--bg); color: var(--text-2); font-size: var(--fs-sm); }
.rep__cargando[hidden] { display: none; }
.rep__progreso { position: absolute; top: 8px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 6; }
.rep__progreso i { flex: 1; height: 3px; border-radius: 3px; background: rgba(20, 16, 40, 0.18); overflow: hidden; position: relative; }
.rep__progreso i::after { content: ""; position: absolute; inset: 0; background: var(--primary); transform-origin: left; transform: scaleX(var(--p, 0)); }
.rep__progreso i.hecha::after { transform: scaleX(1); }
.rep__foco { position: absolute; border: 3px solid var(--primary); border-radius: 12px; box-shadow: 0 0 0 9999px var(--overlay), 0 0 0 4px rgba(255, 255, 255, 0.65) inset; z-index: 3; opacity: 0; transition: opacity var(--dur-fast) var(--ease), left var(--dur) var(--ease), top var(--dur) var(--ease), width var(--dur) var(--ease), height var(--dur) var(--ease); pointer-events: none; }
.rep__foco.vive { opacity: 1; animation: rep-late 1.3s ease-in-out infinite; }
.rep__foco--mira { border-style: dashed; }
@keyframes rep-late { 0%, 100% { border-color: var(--primary); } 50% { border-color: #fff; } }
.rep__dedo { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--primary-glow); border: 2px solid rgba(255, 255, 255, 0.95); box-shadow: var(--shadow-sm); z-index: 4; opacity: 0; transition: left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--dur-fast), transform 0.18s; pointer-events: none; }
.rep__dedo.vive { opacity: 1; }
.rep__dedo.toca { transform: scale(0.62); background: var(--primary); }
.rep__tecleo { position: absolute; z-index: 5; display: flex; align-items: center; padding-left: 14px; font: 500 var(--fs-md) var(--font-ui); color: #1e1b2e; letter-spacing: 0.005em; pointer-events: none; white-space: nowrap; }
.rep__tecleo::after { content: ""; width: 2px; height: 1.1em; background: var(--primary); margin-left: 1px; animation: rep-cursor 1s steps(2) infinite; }
@keyframes rep-cursor { 50% { opacity: 0; } }
.rep__zona { position: absolute; top: 0; bottom: 130px; width: 50%; z-index: 5; cursor: pointer; background: transparent; border: 0; padding: 0; margin: 0; appearance: none; }
.rep__zona--izq { left: 0; } .rep__zona--der { right: 0; }
.rep__leyenda--arriba { bottom: auto !important; top: 22px; }   /* si el botón del paso está abajo, la frase sube para no taparlo */
.rep__leyenda { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 7; background: rgba(30, 27, 46, 0.92); color: #fff; border-radius: var(--radius-l); padding: 12px 14px 12px; box-shadow: var(--shadow); }
.rep__leyenda .num { font: 600 var(--fs-xs) var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: #cdc4ff; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rep__leyenda .num .opc { background: rgba(255, 255, 255, 0.16); color: #fff; padding: 1px 8px; border-radius: var(--radius-pill); letter-spacing: 0.02em; text-transform: none; font-weight: 500; }
.rep__leyenda p { margin: 4px 0 0; font: 600 var(--fs-md) / 1.3 var(--font-ui); }
.rep__leyenda p b { color: #cdc4ff; }
/* M-090 (etapa «Fiora en la app»): con Fiora en el recuadro, la frase del paso deja de ser una franja y va pegada a ella (fiora.css la
   pone con left/top); Fiora queda por encima del anillo y debajo de la frase, y no recibe toques (los de las zonas siguen igual) */
.rep--fiora .rep__leyenda { right: auto; bottom: auto; width: min(300px, calc(100% - 24px)); }
.rep--fiora .rep__leyenda .num { color: #CBDDA0; }
.rep--fiora .rep__leyenda p b { color: #CBDDA0; }
.rep--fiora .fiora-guia, .rep--fiora .fiora-punteada { z-index: 6; }
.rep__fin { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rep__fin .btn { background: rgba(255, 255, 255, 0.14); color: #fff; max-width: 100%; min-width: 0; height: auto; min-height: 36px; padding-block: 7px; white-space: normal; text-align: left; line-height: 1.25; }   /* «Siguiente: Ver los mensajes que has enviado» baja de renglón en vez de salirse de la tarjeta */
.rep__fin .btn--primary { background: var(--primary); color: var(--primary-ink); }
.rep__puerta { position: absolute; inset: 0; z-index: 8; background: var(--overlay); display: grid; place-items: center; padding: var(--space-4); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); }
.rep__puerta.vive { opacity: 1; pointer-events: auto; }
.rep__puerta-tarjeta { background: var(--surface); color: var(--text); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-4) var(--space-3); display: grid; gap: var(--space-2); width: 100%; box-shadow: var(--shadow); }
.rep__puerta-tarjeta .opcional { color: var(--warning); display: flex; align-items: center; gap: 6px; }
.rep__puerta-tarjeta h3 { font-size: var(--fs-lg); margin: 0; }
.rep__puerta-tarjeta p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.rep__puerta-tarjeta .acciones { display: grid; gap: var(--space-2); margin-top: var(--space-1); }
.rep__controles { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0 0; flex-wrap: wrap; }
.rep__ctl { width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: grid; place-items: center; }
.rep__ctl--play { width: 56px; height: 56px; background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.rep__ctl--play .ico { width: 26px; height: 26px; }
.rep__velocidad { font: 600 var(--fs-sm) var(--font-ui); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: var(--radius-pill); padding: 0 var(--space-3); min-height: 36px; }
.rep__velocidad[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.rep__aviso { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-m); background: var(--warning-soft); font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.rep__aviso .ico { color: var(--warning); flex: 0 0 auto; }
.rep__aviso b { font-weight: 600; }
.rep__aviso .btn--link { padding: 0; min-height: 0; font-size: inherit; }
.rep__preguntas { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-3) 0; }
.rep__preguntas div { background: var(--surface); border-radius: var(--radius-m); padding: var(--space-2) var(--space-3); color: var(--text-2); font-size: var(--fs-sm); }
@media (prefers-reduced-motion: reduce) { .rep__foco.vive { animation: none; } .rep__dedo, .rep__foco, .rep img { transition: none; } }

/* La lista de pasos bajo el teléfono: el paso actual resaltado, los hechos con su marca; tocar uno salta ahí. */
.rep__pasos { list-style: none; margin: var(--space-3) 0 0; padding: 4px; display: flex; flex-direction: column; gap: 4px; max-height: 176px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); }
.rep__pasos button { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-2); align-items: start; width: 100%; padding: var(--space-2) var(--space-3); text-align: left; color: var(--text-2); background: transparent; border: 1px solid transparent; border-radius: var(--radius-m); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.rep__pasos-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); }
.rep__pasos li.hecho .rep__pasos-n { background: var(--accent-soft); color: var(--accent); }
.rep__pasos li[aria-current="step"] button { background: var(--primary-soft); color: var(--text); border-color: transparent; font-weight: 600; }
.rep__pasos li[aria-current="step"] .rep__pasos-n { background: var(--primary); color: var(--primary-ink); }

/* ---------------------------------------------------------------- AP3 Buenas prácticas */
.bp { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); }
.bp__n { font: 600 var(--fs-xs) var(--font-display); letter-spacing: 0.06em; color: var(--primary); text-transform: uppercase; }
.bp h3 { margin: 0; font-size: var(--fs-md); }
.bp p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.bp p b { color: var(--text); font-weight: 600; }
.bp__como { background: var(--surface-2); border-radius: var(--radius-m); padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); }
.bp__pie { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }