/* ==========================================================================
   Lumbre Visual Engine (LVE) — estilos base del escenario de explicación.
   Coherencia con Lumbre: reutiliza las variables globales (--surface, --line,
   --accent, --muted…) y sólo añade lo propio de las escenas y la depuración.
   ========================================================================== */

/* Capa donde los renderizadores especializados montan sus Scene (§6).
   El bloque estándar NO usa esta capa: vive directamente en .lo-stage-body. */
.lve-scene {
    --lve-stage-bg: var(--surface);
    --lve-foreground: var(--fg);
    --lve-accent: var(--accent);
    --lve-muted: var(--muted);
    --lve-speed: .55s;
    position: relative;
    width: min(96vw, 1440px);
    max-height: 100%;
    margin: auto;
    overflow-y: auto;
    color: var(--lve-foreground);
}
.lve-scene .lve-el { transition: opacity var(--lve-speed) ease; }

/* Tema whiteboard de Scribe (Fase 5): fondo limpio, líneas del color del texto. */
.lve-scene.lve-theme-whiteboard { --lve-stage-bg: #fdfdfb; background: var(--lve-stage-bg); }

/* Microsteps (§7): los elementos marcados se revelan uno a uno.
   Sólo se animan opacidad/transform (rendimiento §38). En modo normal ningún
   elemento recibe .lve-ms, así que no hay ningún cambio respecto al guía viejo. */
.lve-ms { transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1); }
.lve-ms.lve-hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }

/* Escenas tipográficas (Fase 3, §13-§15): el texto del bloque se agiganta con
   jerarquía. Hereda el color del tema; el fondo blanco del whiteboard se anula para
   respetar el tema claro/oscuro del OA (los tipográficos no son pizarra cerrada). */
.lve-typography { text-align: center; padding: clamp(16px, 5vw, 64px); min-height: 100%; justify-content: center; align-items: center; display: flex; flex-direction: column; gap: clamp(14px, 2.4vw, 30px); }
.lve-typography.lve-theme-whiteboard { background: transparent; }
.lve-typography .lve-el { opacity: 0; }
.lve-typography .lve-el.lve-shown { opacity: 1; }
.lve-in-fade { transform: none; }
.lve-in-rise { transform: translateY(22px); }
.lve-in-pop { transform: scale(.82); }
.lve-in-write { clip-path: inset(0 100% 0 0); }
.lve-in-none { transform: none; }
.lve-typography .lve-shown.lve-in-rise, .lve-typography .lve-shown.lve-in-pop { transform: none; }
.lve-typography .lve-shown.lve-in-write { clip-path: inset(0 0 0 0); }
.lve-typography .lve-el.lve-shown { transition: opacity .5s ease, transform .55s cubic-bezier(.2, .8, .3, 1), clip-path .6s ease; }

.lve-ty-number { display: flex; align-items: baseline; justify-content: center; gap: .12em; line-height: .9; }
.lve-ty-figure { font-weight: 800; font-size: clamp(4rem, 20vw, 15rem); color: var(--lve-accent); letter-spacing: -.02em; }
.lve-ty-unit { font-weight: 700; font-size: clamp(1.6rem, 6vw, 4rem); color: var(--lve-muted); }
.lve-ty-note { max-width: 30ch; font-size: clamp(1.1rem, 2.6vw, 1.7rem); color: var(--lve-foreground); line-height: 1.35; }
.lve-ty-term { font-weight: 800; font-size: clamp(2.2rem, 8vw, 5.5rem); color: var(--lve-foreground); margin: 0; letter-spacing: -.01em; }
.lve-ty-phrase, .lve-ty-hero { font-weight: 800; line-height: 1.08; color: var(--lve-foreground); max-width: 20ch; margin: 0 auto; }
.lve-ty-phrase { font-size: clamp(1.8rem, 6vw, 4rem); }
.lve-ty-hero { font-size: clamp(3rem, 12vw, 9rem); color: var(--lve-accent); }
.lve-emph { text-transform: uppercase; letter-spacing: .02em; }

/* Estructuras (Fase 4, §16-§19): flujo de pasos, cronología y comparación.
   Reusa variables del tema; en móvil la comparación apila columnas y el flujo gira flechas. */
.lve-structure { padding: clamp(18px, 4vw, 56px); display: flex; align-items: center; justify-content: center; min-height: 100%; }
.lve-structure .lve-el { opacity: 0; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1); }
.lve-structure .lve-el.lve-shown { opacity: 1; }

.lve-st-flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .6rem; max-width: 1100px; }
.lve-st-card { display: flex; align-items: center; gap: .6rem; background: var(--surface-2, #fff); border: 1px solid var(--line, #ddd); border-radius: 14px; padding: .8rem 1rem; box-shadow: 0 6px 18px rgba(0,0,0,.06); transform: translateY(8px); }
.lve-st-card.lve-shown { transform: none; }
.lve-st-num { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--lve-accent); color: #fff; font-weight: 800; }
.lve-st-text { font-size: 1.05rem; color: var(--lve-foreground); }
.lve-st-arrow { align-self: center; color: var(--lve-muted); font-size: 1.4rem; }

.lve-tl { display: flex; gap: clamp(10px, 3vw, 32px); align-items: flex-start; position: relative; max-width: 1200px; width: 100%; justify-content: center; }
.lve-tl::before { content: ""; position: absolute; top: 2.1rem; left: 6%; right: 6%; height: 2px; background: var(--lve-accent); opacity: .5; }
.lve-tl-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex: 1 1 0; min-width: 110px; max-width: 220px; transform: translateY(8px); }
.lve-tl-item.lve-shown { transform: none; }
.lve-tl-year { font-weight: 800; color: var(--lve-accent); font-size: 1.3rem; }
.lve-tl-dot { width: .9rem; height: .9rem; border-radius: 50%; background: var(--lve-accent); border: 3px solid var(--surface, #fff); }
.lve-tl-label { font-size: .95rem; text-align: center; color: var(--lve-foreground); line-height: 1.3; }

.lve-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3vw, 28px); max-width: 1000px; width: 100%; }
.lve-cmp-panel { background: var(--surface-2, #fff); border: 1px solid var(--line, #ddd); border-radius: 16px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; transform: translateY(10px); }
.lve-cmp-panel.lve-shown { transform: none; }
.lve-cmp-left { border-top: 4px solid var(--lve-accent); }
.lve-cmp-right { border-top: 4px solid var(--lve-muted); }
.lve-cmp-title { margin: 0 0 .2rem; font-size: 1.2rem; color: var(--lve-foreground); }
.lve-cmp-item { font-size: 1.02rem; color: var(--lve-foreground); line-height: 1.35; padding: .35rem 0; border-bottom: 1px dashed var(--line, #e5e5e5); }
.lve-cmp-item:last-child { border-bottom: none; }
@media (max-width: 560px) {
    .lve-cmp { grid-template-columns: 1fr; }
    .lve-st-arrow { transform: rotate(90deg); }
    .lve-st-card { flex: 1 1 100%; }                                  /* flujo: una tarjeta por fila */
    .lve-tl { flex-direction: column; align-items: stretch; gap: 10px; }   /* cronología vertical: año · punto · texto */
    .lve-tl::before { display: none; }
    .lve-tl-item { flex-direction: row; max-width: none; align-items: baseline; gap: .7rem; }
    .lve-tl-label { text-align: left; }
}

/* Ficha técnica del paso: SOLO en modo debug (§40). No interfiere con el contenido. */
.lve-debug {
    position: absolute; left: 10px; bottom: 64px; z-index: 5;
    padding: 8px 10px; border-radius: 8px;
    background: #20201ecc; color: #d7e6d7;
    font: 11px/1.5 ui-monospace, Consolas, monospace;
    pointer-events: none; opacity: .92;
}
.lve-debug div { white-space: pre; }

/* ---------------------------------------------------------------------------
 *  Fase 5 · Scribe — la pizarra que se dibuja sola (§8-§12).
 *  El trazado lo anima el JS (stroke-dashoffset); el CSS sólo pone el marco,
 *  los temas y el punteador. Colores por tema: la tinta es currentColor.
 * --------------------------------------------------------------------------- */
.lve-scribe { padding: clamp(16px, 4vw, 36px); border-radius: 14px; text-align: center; color: #26323b; }
.lve-sc-title { font-size: clamp(1.25rem, 3.4vw, 2rem); margin: 0 0 .6em; font-weight: 700; letter-spacing: .01em; }
.lve-sc-board { display: inline-block; max-width: min(560px, 92%); }
.lve-sc-svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
img.lve-sc-svg { border-radius: 8px; }
.lve-sc-note { margin: .8em auto 0; max-width: 46ch; font-size: clamp(.95rem, 2.2vw, 1.05rem); line-height: 1.5; }
.lve-sc-hand { fill: currentColor; opacity: 0; transition: opacity .2s; }

.lve-scribe-whiteboard { background: #fdfdfb; border: 1px solid #e3e6ea; color: #37474f; }
.lve-scribe-blackboard { background: #20402f; color: #f3f1e7; }
.lve-scribe-blackboard .lve-sc-title { font-weight: 600; }
.lve-scribe-notebook {
    background:
        repeating-linear-gradient(#fffef8 0 30px, #dbe4ee 30px 31px);
    color: #2f3a46; border: 1px solid #dfe3e8; text-align: left;
}
.lve-scribe-technical { background: #f7f9fb; border: 1px solid #b9c6d3; color: #1f4e79; }
.lve-scribe-technical .lve-sc-svg g { stroke-width: 2; }
.lve-scribe-kids { background: #fff8e7; border: 3px dashed #f6a83c; color: #d1495b; }
.lve-scribe-kids .lve-sc-svg g { stroke-width: 5; }

/* ---------------------------------------------------------------------------
 *  Fase 6 · Imágenes — la foto protagonista (§17-§20).
 *  Ken Burns: zoom/deriva lentísimos (18s) — movimiento pequeño para no marear.
 *  Spotlight: viñeta radial que lleva la mirada al centro, sólo con pie de foto.
 * --------------------------------------------------------------------------- */
.lve-image { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: #0e1116; }
.lve-img { display: block; width: 100%; max-height: min(62vh, 560px); object-fit: cover; }
.lve-image .lve-img-cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: .9em 1.2em;
    color: #f5f7fa; font-size: clamp(.95rem, 2vw, 1.1rem); line-height: 1.45; text-align: center;
    background: linear-gradient(transparent, rgba(6, 10, 15, .78));
}
@keyframes lve-kb { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-1.6%, 1.4%); } }
.lve-kb .lve-img { animation: lve-kb 18s ease-in-out infinite alternate; will-change: transform; }
.lve-spot::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 46%, transparent 42%, rgba(6, 10, 15, .42) 100%);
}
.lve-paused .lve-img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    /* La calma del usuario manda sobre cualquier escena (§37). */
    .lve-scene .lve-el { transition: none; animation: none !important; }
    .lve-typography .lve-el { opacity: 1; transform: none; clip-path: none; }
    .lve-structure .lve-el { opacity: 1; transform: none; }
    .lve-sc-hand { display: none; }                    /* con calma no hay mano que dibuje */
    .lve-kb .lve-img { animation: none; transform: none; }   /* ni Ken Burns ni deriva */
    .lve-ms { transition: none; }
    .lve-ms.lve-hidden { opacity: 1; transform: none; }   /* con calma, nada se oculta */
}