/* ════════════════════════════════════════════════════════════════════════════
   Transición login → home  ·  18/09
   ════════════════════════════════════════════════════════════════════════════

   POR QUÉ ASÍ Y NO CON DOS CAPAS EN EL MISMO DOM
   Login y home son DOCUMENTOS separados: el login hace un POST clásico y el
   servidor responde 302 hacia Home/Index. El documento del login se destruye
   antes de que exista el del home, así que nunca coexisten y no hay forma de
   poner uno encima del otro con clip-path.
   La View Transitions API resuelve exactamente ese caso: el navegador fotografía
   la pantalla vieja, espera a que la nueva esté lista y anima entre las dos. De
   ahí sale gratis el "sin parpadeo blanco" del criterio 3.

   ALCANCE
   Este archivo se carga en DOS lugares y en ninguno más:
     · _AuthLayout.cshtml  (login y recuperar contraseña)
     · _Layout.cshtml      SOLO cuando isHome es verdadero
   Los demás módulos (Ventas, Tesorería, Logística…) ni siquiera lo descargan,
   así que su navegación queda exactamente igual que hoy. Además el JS llama a
   skipTransition() en cualquier navegación que no sea login → home.

   EN REPOSO NO CAMBIA NADA
   Todo lo de acá vive en pseudo-elementos ::view-transition-* que solo existen
   mientras dura la animación, o en animaciones que terminan en el estado normal
   del elemento. Antes y después, las dos pantallas se ven idénticas.

   SOLO SE ANIMAN transform, opacity y clip-path. Ni width, ni left, ni margin.
   ════════════════════════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

:root {
  --tx-wipe: 980ms;
  --tx-ease: cubic-bezier(.68, 0, .15, 1);
  --tx-card: 320ms;
  --tx-bloque: 560ms;
  /* Cuánto espera el barrido desde que arranca la transición. En ese hueco sale
     la tarjeta, que es la secuencia pedida: primero se va la tarjeta, después
     empieza a arrastrarse el panel. */
  --tx-espera: 240ms;
}

/* ── El panel de marca del login es su propio grupo ──────────────────────────
   Al darle nombre propio sale del grupo "root": la foto vieja de root pasa a ser
   el login SIN el panel, y el panel viaja por separado. Eso es lo que permite
   que el recorte y el borde del panel avancen juntos.
   El home no tiene ningún elemento con este nombre, así que el grupo solo tiene
   parte "vieja": se va de pantalla y no vuelve. */
/* ── La capa del login es su propio grupo, ENCIMA del home ───────────────────
   Primera versión: el login viajaba dentro del grupo "root" junto con el home.
   Dentro de un mismo grupo el navegador pinta SIEMPRE la instantánea nueva
   encima de la vieja, así que el home quedaba arriba; como su contenido entra
   con opacidad, se lo veía a través del login en vez de quedar tapado hasta que
   pasara el barrido. Ése era el "se transparenta el lado derecho".
   Sacando la capa del login a un grupo propio se puede ponerla por encima, y
   entonces el home aparece de verdad de izquierda a derecha, descubierto por el
   recorte y no por un fundido. */
.lg-wrap { view-transition-name: tx-login; }

.lg-side { view-transition-name: tx-marca; }

/* ── La tarjeta también es su propio grupo ───────────────────────────────────
   Primera versión: la tarjeta se animaba al hacer clic, ANTES de navegar. Como
   el POST tarda lo que tarda el servidor, la tarjeta desaparecía y el lado
   derecho quedaba en blanco varios segundos hasta que llegaba la respuesta.
   Ahora la salida es parte de la transición: la tarjeta se mantiene intacta
   —con el botón en "Ingresando…"— durante toda la espera, y recién se va cuando
   el panel empieza a arrastrarse. */
.lg-card { view-transition-name: tx-tarjeta; }

/* ── Orden de apilado ────────────────────────────────────────────────────────
   De abajo hacia arriba: el home, la capa del login que lo tapa, el panel que
   la arrastra y la tarjeta.
   El panel TIENE que ir por encima de la capa del login; si no, a mitad de
   recorrido se ve cortado por el borde del recorte de lo que va debajo. */
:root:active-view-transition-type(tx-login-home)::view-transition-group(tx-tarjeta) { z-index: 7; }
:root:active-view-transition-type(tx-login-home)::view-transition-group(tx-marca)   { z-index: 6; }
:root:active-view-transition-type(tx-login-home)::view-transition-group(tx-login)   { z-index: 5; }
:root:active-view-transition-type(tx-login-home)::view-transition-group(root)       { z-index: 1; }

/* La tarjeta sale primero, en los 320 ms que el barrido espera */
:root:active-view-transition-type(tx-login-home)::view-transition-old(tx-tarjeta) {
  animation: tx-card-out var(--tx-card) cubic-bezier(.4, 0, 1, 1) forwards;
}

/* ── El barrido ──────────────────────────────────────────────────────────────
   Misma duración y misma curva que el desplazamiento del panel: los dos bordes
   viajan pegados y parece que el panel empuja al login fuera de la vista. */
/* El recorte va sobre la capa del login, que ahora es la que está arriba */
:root:active-view-transition-type(tx-login-home)::view-transition-old(tx-login) {
  animation: tx-wipe var(--tx-wipe) var(--tx-ease) var(--tx-espera) both;
}

/* La foto vieja de "root" ya no tiene nada útil (todo el login está en su propio
   grupo): se la saca de en medio para que no aporte ningún fundido. */
:root:active-view-transition-type(tx-login-home)::view-transition-old(root) {
  animation: none;
  opacity: 0;
}
/* 22/09 · El color base del panel va sobre la INSTANTÁNEA, no sobre el grupo.
   Para qué: un elemento con view-transition-name propio se recorta de la foto de
   su ancestro, así que la de tx-login tiene un hueco con la forma del panel. Si
   la instantánea del panel llega vacía —la primera vez, con la foto recién
   descargada y aún sin rasterizar— se veía por el hueco, y detrás está
   ::view-transition-old(root) en opacity:0, así que asomaba el body blanco.
   Pintado acá, el azul viaja CON la instantánea: tx-slide la lleva hasta
   translateX(100vw) y se va con ella.
   Sobre el grupo NO funciona, y es un error que ya cometí: el grupo es el
   contenedor y vive toda la transición, así que dejaba un rectángulo azul fijo
   tapando el home hasta el final. */
:root:active-view-transition-type(tx-login-home)::view-transition-old(tx-marca) {
  animation: tx-slide var(--tx-wipe) var(--tx-ease) var(--tx-espera) both;
  background: #0B1030;
}

/* El home entra desde su posición adelantada. Se reemplaza la animación por
   defecto (un fundido) para que no haya un blanco entre las dos pantallas.
   Con `both` el home queda quieto en su posición de partida durante la espera,
   en vez de aparecer de golpe apenas arranca la transición. */
:root:active-view-transition-type(tx-login-home)::view-transition-new(root) {
  animation: tx-home var(--tx-wipe) var(--tx-ease) var(--tx-espera) both;
}

@keyframes tx-wipe  { from { clip-path: inset(0 0 0 0);    } to { clip-path: inset(0 0 0 100%); } }
@keyframes tx-slide { from { transform: translateX(0);     } to { transform: translateX(100vw); } }
@keyframes tx-home  { from { transform: translateX(-26px) scale(1.012); } to { transform: none; } }

@keyframes tx-card-out {
  to { transform: translateX(70px) scale(.97); opacity: 0; }
}

/* ── Entrada escalonada del contenido del home ───────────────────────────────
   De izquierda a derecha, con los retardos pedidos. Termina en el estado normal
   (opacity 1, sin desplazamiento), así que en reposo el home es idéntico a hoy.
   Se aplica solo bajo .tx-entrando, que el JS pone y saca: en una carga normal
   del home, o entrando por deep-link, esta regla no existe. */
.tx-entrando .dash-fijo,
.tx-entrando .dash-card,
.tx-entrando .dash-atajos {
  animation: tx-bloque var(--tx-bloque) cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes tx-bloque {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Los retardos son los pedidos (80, 150, 210, 270, 330, 390, 450, 510) contados
   DESDE que arranca el barrido, así que a cada uno se le suma la espera. */
.tx-entrando .dash-fijo               { animation-delay: calc(var(--tx-espera) +  80ms); }
.tx-entrando .dash-card:nth-child(1)  { animation-delay: calc(var(--tx-espera) + 150ms); }
.tx-entrando .dash-card:nth-child(2)  { animation-delay: calc(var(--tx-espera) + 210ms); }
.tx-entrando .dash-card:nth-child(3)  { animation-delay: calc(var(--tx-espera) + 270ms); }
.tx-entrando .dash-card:nth-child(4)  { animation-delay: calc(var(--tx-espera) + 330ms); }
.tx-entrando .dash-card:nth-child(5)  { animation-delay: calc(var(--tx-espera) + 390ms); }
.tx-entrando .dash-card:nth-child(6)  { animation-delay: calc(var(--tx-espera) + 450ms); }
.tx-entrando .dash-card:nth-child(n+7){ animation-delay: calc(var(--tx-espera) + 510ms); }
.tx-entrando .dash-atajos             { animation-delay: calc(var(--tx-espera) + 510ms); }

/* ── Reducir movimiento ──────────────────────────────────────────────────────
   No se desactiva la transición: se la lleva a 1ms, que es el salto directo al
   home que pediste. Quien tenga esta preferencia activada no ve movimiento y
   llega igual de rápido. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tx-wipe: 1ms;
    --tx-card: 1ms;
    --tx-bloque: 1ms;
    --tx-espera: 0ms;
  }
  .tx-entrando .dash-fijo,
  .tx-entrando .dash-card,
  .tx-entrando .dash-atajos { animation-delay: 0ms !important; }
}