/* public/css/transitions.css */

/* ══════════════════════════════════════
   CONTENIDO — entrada/salida
   ══════════════════════════════════════ */
.content{position:relative;overflow:hidden}

.content-inner{
    position:relative;z-index:1;
    display:flex;flex-direction:column;gap:18px
}

.content-inner.--entering{animation:contentEnter .52s var(--ease-expo) both}
.content-inner.--exiting{animation:contentExit .26s var(--ease-expo-in) both;pointer-events:none}

@keyframes contentEnter{
    0%{opacity:0;transform:translateY(16px)}
    100%{opacity:1;transform:translateY(0)}
}
@keyframes contentExit{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(-8px)}
}

/* ══════════════════════════════════════
   CAPAS DE TRANSICIÓN LOCAL (AJAX nav)
   vt-1 = top layer — orange accent flash
   Cubre sólo el área de la sección, dejando
   topbar y sidebar intactos durante la transición.
   ══════════════════════════════════════ */
.view-transition{
    position:fixed;
    top:var(--top-h);
    left:var(--sidebar-w);
    right:0;
    bottom:0;
    pointer-events:none;overflow:hidden;
    transition:left .5s var(--ease-expo)
}
.sidebar.collapsed ~ .view-transition{left:var(--sidebar-c)}
@media(max-width:768px){
    .view-transition{left:0}
}

.vt-layer{
    position:absolute;inset:0;
    transform:translateY(200%);
    will-change:transform;
    transition:none
}

/* Regla de cortinas: la capa de encima (vt-1, z:3) SIEMPRE refleja el tema:
     · DARK  → top OSCURO, con naranja como flash intermedio (vt-2).
     · LIGHT → top NARANJA, con cream como capa intermedia. */
[data-theme="dark"] .vt-1{background:linear-gradient(160deg,#0f1622 0%,#070b14 100%)}
[data-theme="dark"] .vt-2{background:linear-gradient(135deg,#ff8c00 0%,#e07000 55%,#b85a00 100%)}
[data-theme="dark"] .vt-3{background:linear-gradient(160deg,#0d1e38 0%,#0a1428 100%)}

[data-theme="light"] .vt-1{background:linear-gradient(135deg,#ff9a1a 0%,#e07000 60%,#c55e00 100%)}
[data-theme="light"] .vt-2{background:linear-gradient(160deg,#ece9e4,#f3f0ec)}
[data-theme="light"] .vt-3{background:#faf8f5}

.vt-1{z-index:3}
.vt-2{z-index:2}
.vt-3{z-index:1}

/* ══════════════════════════════════════
   TOPBAR FADE
   ══════════════════════════════════════ */
.tb-title,.tb-pill{
    transition:opacity .22s var(--ease-silk), transform .22s var(--ease-silk)
}
.tb-title.--fade,.tb-pill.--fade{
    opacity:0;transform:translateY(-4px)
}

/* ══════════════════════════════════════
   SIDEBAR — 4 ESTADOS DE NAVEGACIÓN
   .active               → sección actual
   .active.--leaving     → abandonando sección (mismo layout, tono gris)
   .--loading            → cargando (click intermedio, texto gris + pulso icono)
   .--loading-latest     → próxima sección (accent + barra con progreso)
   ══════════════════════════════════════ */
@keyframes navPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* .active.--leaving: mismo estilo de active pero gris */
.nav-it.active.--leaving,
.sb-dash.active.--leaving{
    color:var(--t3);
    background:var(--inp)
}
.nav-it.active.--leaving::before,
.sb-dash.active.--leaving::before{background:var(--t4)}
.nav-it.active.--leaving .nav-ic svg,
.sb-dash.active.--leaving .nav-ic svg{filter:none}

/* .--loading: cargando en cola */
.nav-it.--loading,
.sb-dash.--loading{color:var(--t3)}
.nav-it.--loading .nav-ic svg,
.sb-dash.--loading .nav-ic svg{animation:navPulse .55s ease-in-out infinite}

/* .--loading-latest: próxima sección (sobrescribe .--loading) */
.nav-it.--loading-latest,
.sb-dash.--loading-latest{
    color:var(--accent);
    background:var(--accent-soft)
}
.nav-it.--loading-latest::before,
.sb-dash.--loading-latest::before{
    content:'';position:absolute;left:0;top:50%;
    width:3px;height:20px;
    background:var(--accent);border-radius:0 3px 3px 0;
    animation:navTargetLoad 1.1s ease-in-out infinite
}
.nav-it.--loading-latest .nav-ic svg,
.sb-dash.--loading-latest .nav-ic svg{animation:navPulse .55s ease-in-out infinite}
@keyframes navTargetLoad{
    0%,100%{transform:translateY(-50%) scaleY(.25);opacity:.5}
    50%    {transform:translateY(-50%) scaleY(1);   opacity:1}
}

/* ══════════════════════════════════════
   THEME CURTAIN
   Colors injected inline from JS
   ══════════════════════════════════════ */
.theme-curtain{
    position:fixed;inset:0;z-index:10001;
    pointer-events:none;overflow:hidden
}
.tc-layer{
    position:absolute;inset:0;
    transform:translateY(200%);
    will-change:transform;
    transition:none
}
.tc-1{z-index:3}
.tc-2{z-index:2}
.tc-3{z-index:1}

/* ══════════════════════════════════════
   PAGE ENTRANCE — tsE (5 layers)
   ALL layers rise upward to reveal.
   Front layer (z:5) rises first, exposing
   the orange accent (z:4), then progressively
   lighter darks, until the page is revealed.
   ══════════════════════════════════════ */
.ts{position:fixed;inset:0;z-index:10000;pointer-events:none}
.ts.--ent{pointer-events:all}
.tl{position:absolute;inset:0;will-change:transform}

/* z-index por capa (z:5 es la que visualmente domina al cubrir). */
.tl.--e1{z-index:5}
.tl.--e2{z-index:4;opacity:.92}
.tl.--e3{z-index:3}
.tl.--e4{z-index:2}
.tl.--e5{z-index:1}

/* DARK → capa dominante (e1) oscura; acento naranja como flash intermedio. */
[data-theme="dark"] .tl.--e1{background:linear-gradient(160deg,#0f1117 0%,#0a0d14 100%)}
[data-theme="dark"] .tl.--e2{background:linear-gradient(135deg,#ff8c00,#e07000)}
[data-theme="dark"] .tl.--e3{background:#131620}
[data-theme="dark"] .tl.--e4{background:#17192a}
[data-theme="dark"] .tl.--e5{background:linear-gradient(200deg,#0f1117,#17192a)}

/* LIGHT → capa dominante (e1) naranja; cream en capas intermedias. */
[data-theme="light"] .tl.--e1{background:linear-gradient(135deg,#ff9a1a 0%,#e07000 60%,#c55e00 100%)}
[data-theme="light"] .tl.--e2{background:#faf8f5}
[data-theme="light"] .tl.--e3{background:#f7f4f0}
[data-theme="light"] .tl.--e4{background:#ece9e4}
[data-theme="light"] .tl.--e5{background:linear-gradient(200deg,#f3f0ec,#ece9e4)}

/* Front layer (z:5) rises first → back layer (z:1) rises last */
.ts.--ent.--go .tl.--e1{animation:tsRise .86s var(--ease-expo) .05s forwards}
.ts.--ent.--go .tl.--e2{animation:tsRise .86s var(--ease-expo) .14s forwards}
.ts.--ent.--go .tl.--e3{animation:tsRise .88s var(--ease-expo) .24s forwards}
.ts.--ent.--go .tl.--e4{animation:tsRise .88s var(--ease-expo) .34s forwards}
.ts.--ent.--go .tl.--e5{animation:tsRise .90s var(--ease-expo) .44s forwards}

@keyframes tsRise{to{transform:translateY(-105%)}}

/* ══════════════════════════════════════
   PAGE EXIT — tsX (5 layers, logout)
   ALL layers cascade DOWN from above.
   Back layer (z:1) falls first, accent
   orange (z:4) penultimate, solid dark
   (z:5) falls last → screen fully covered.
   Mirror of entrance: entrance starts from
   this covered state and rises.
   ══════════════════════════════════════ */
/* z-index + posición inicial (arriba del viewport). Colores se asignan por tema abajo. */
.tl.--x1{z-index:1;transform:translateY(-105%)}
.tl.--x2{z-index:2;transform:translateY(-105%)}
.tl.--x3{z-index:3;transform:translateY(-105%)}
.tl.--x4{z-index:4;transform:translateY(-105%);opacity:.96}
.tl.--x5{z-index:5;transform:translateY(-105%)}

/* DARK → capa dominante (x5) oscura; flash naranja en x4. */
[data-theme="dark"] .tl.--x1{background:#17192a}
[data-theme="dark"] .tl.--x2{background:#131620}
[data-theme="dark"] .tl.--x3{background:#0f1117}
[data-theme="dark"] .tl.--x4{background:linear-gradient(135deg,#ff8c00,#c86000)}
[data-theme="dark"] .tl.--x5{background:linear-gradient(160deg,#0f1117,#0a0d14)}

/* LIGHT → capa dominante (x5) naranja; cream en las demás. */
[data-theme="light"] .tl.--x1{background:#faf8f5}
[data-theme="light"] .tl.--x2{background:#f7f4f0}
[data-theme="light"] .tl.--x3{background:#f3f0ec}
[data-theme="light"] .tl.--x4{background:#ece9e4}
[data-theme="light"] .tl.--x5{background:linear-gradient(135deg,#ff9a1a 0%,#e07000 60%,#c55e00 100%)}

/* Back layer (z:1) falls first → front layer (z:5) falls last */
.ts.--xit .tl.--x1{animation:tsFall .60s var(--ease-expo) 0s    forwards}
.ts.--xit .tl.--x2{animation:tsFall .60s var(--ease-expo) .08s  forwards}
.ts.--xit .tl.--x3{animation:tsFall .62s var(--ease-expo) .15s  forwards}
.ts.--xit .tl.--x4{animation:tsFall .60s var(--ease-expo) .22s  forwards}
.ts.--xit .tl.--x5{animation:tsFall .62s var(--ease-expo) .28s  forwards}

@keyframes tsFall{to{transform:translateY(0)}}