/* ============================================================================
   Lumina CRM · aprende.css — el módulo Aprende (M-018, ADR-0058)
   AP1 Aprende (buscador, recorridos, tareas), AP2 el reproductor de un tutorial, AP3 Buenas prácticas y el «?» de cada
   cabecera. 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); }

/* ---------------------------------------------------------------- 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 b { color: var(--text); }
.ap-rec__pie .btn { flex: 0 0 auto; }
.ap-rec__botones { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.ap-rec--hecho .ap-rec__num { background: var(--accent-soft); color: var(--accent); }
.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--visto .ap-pregunta__n { background: var(--accent-soft); color: var(--accent); }
.ap-pregunta__cuerpo { flex: 1; min-width: 0; }
.ap-pregunta__titulo { font-weight: 600; }
.ap-pregunta__sub { 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; }

/* ---------------------------------------------------------------- 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 16px 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 11px 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; }
.rep__fin { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rep__fin .btn { background: rgba(255, 255, 255, 0.14); color: #fff; }
.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; }