/**
 * navegacion_rapida.css
 * Hace que las transiciones entre páginas se vean instantáneas:
 *   1. View Transitions API (Chrome 126+) — cross-fade automático
 *   2. Barra de progreso superior
 *   3. Fondo coherente para eliminar el "flash blanco"
 *   4. Estado de transición en el wrapper intercambiable
 */

/* ── 1. View Transitions ─────────────────────────────────────────── */
@view-transition {
    navigation: auto;
}

/* Animación de entrada (nueva página) */
::view-transition-new(root) {
    animation: lpm-vt-fade-in 0.18s ease-out both;
}

/* Animación de salida (página anterior) */
::view-transition-old(root) {
    animation: lpm-vt-fade-out 0.12s ease-in both;
}

@keyframes lpm-vt-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes lpm-vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── 2. Barra de progreso superior ───────────────────────────────── */
#lpm-topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--primary-blue, #00d4ff) 0%,
        var(--accent-color, #00ff99) 100%
    );
    z-index: 10001;
    opacity: 0;
    border-radius: 0 2px 2px 0;
    pointer-events: none;
    transition: width 0.25s ease-out, opacity 0.3s ease;
}

#lpm-topbar.lpm-bar-active {
    opacity: 1;
}

#lpm-topbar.lpm-bar-error {
    background: #e74c3c;
}

/* ── 3. Eliminar flash blanco: mantener fondo del tema ───────────── */
html {
    /* Usa la variable del tema; si no existe, usa color oscuro por defecto */
    background-color: var(--bg-page, var(--bg-primary-dark, #0d1117));
}

/* ── 4. Contenedor intercambiable ────────────────────────────────── */
#lpm-content-wrapper {
    transition: opacity 0.08s ease;
}

#lpm-content-wrapper.lpm-transitioning {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}