/* Agend One – app.css

Fondo de login igual al dashboard (usa --bg)

Transición de ruta: salida izquierda (login) y entrada derecha (dashboard) con llegada descompasada

Estilos de la intro (#entryIntro) trasladados desde el JS

Respeta prefers-reduced-motion
*/

/* === Fondo autenticación igual al dashboard === */
body.auth-page {
   background-color: var(--bg) !important;
}

/* === Transición nueva Ruta: login -> dashboard === */
[data-route-shell] {
   will-change: transform, opacity;
}

.rt-exit-left {
   animation: rtExitLeft 520ms cubic-bezier(.22, .61, .36, 1) forwards;
}

.rt-enter-right {
   animation: rtEnterRight 620ms cubic-bezier(.22, .61, .36, 1) both;
}

/* Llegada descompasada de los hijos */
.rt-enter-right>* {
   animation: rtChild .7s cubic-bezier(.16, .84, .44, 1) both;
}

.rt-enter-right>*:nth-child(1) {
   animation-delay: 40ms;
}

.rt-enter-right>*:nth-child(2) {
   animation-delay: 80ms;
}

.rt-enter-right>*:nth-child(3) {
   animation-delay: 120ms;
}

.rt-enter-right>*:nth-child(4) {
   animation-delay: 160ms;
}

.rt-enter-right>*:nth-child(5) {
   animation-delay: 200ms;
}

.rt-enter-right>*:nth-child(6) {
   animation-delay: 240ms;
}

.rt-enter-right>*:nth-child(7) {
   animation-delay: 280ms;
}

.rt-enter-right>*:nth-child(8) {
   animation-delay: 320ms;
}

/* Keyframes de ruta */
@keyframes rtExitLeft {
   from {
      opacity: 1;
      transform: none;
   }

   to {
      opacity: 0;
      transform: translateX(-64px) scale(.98);
   }
}

@keyframes rtEnterRight {
   from {
      opacity: 0;
      transform: translateX(64px) scale(.98);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@keyframes rtChild {
   from {
      opacity: 0;
      transform: translateY(6px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

/* === Intro “signup” (#entryIntro) – estilos portados desde JS === */
#entryIntro {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: grid;
   place-items: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity .35s ease;
}

#entryIntro.is-open {
   opacity: 1;
   pointer-events: auto;
}

/* Fondo con máscara vertical: revela de abajo→arriba */
#entryIntro .bg {
   position: absolute;
   inset: 0;
   -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 18%, rgba(0, 0, 0, 1) 100%);
   mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 18%, rgba(0, 0, 0, 1) 100%);
   -webkit-mask-size: 100% 300%;
   mask-size: 100% 300%;
   -webkit-mask-position: 0% 200%;
   mask-position: 0% 200%;
   will-change: -webkit-mask-position, mask-position, opacity;
}

#entryIntro .stage {
   position: relative;
   width: min(92vw, 1100px);
   height: min(64vh, 600px);
   display: grid;
   place-items: center;
   perspective: 1100px;
}

/* Grupo completo (bola + texto + eslogan) */
#entryIntro .group {
   position: relative;
   transform: translateY(-60vh) scale(.96);
   transform-style: preserve-3d;
   display: grid;
   place-items: center;
   gap: clamp(14px, 2.6vh, 24px);
   will-change: transform, opacity;
}

/* Bola + texto */
#entryIntro .brandRow {
   display: inline-flex;
   align-items: center;
   gap: clamp(8px, 2vw, 18px);
}

/* Marco circular */
#entryIntro .symbolWrap {
   width: min(44vw, 230px);
   aspect-ratio: 1/1;
   display: grid;
   place-items: center;
   overflow: hidden;
   border-radius: 50%;
   clip-path: circle(50% at 50% 50%);
   isolation: isolate;
}

#entryIntro .symbol {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   display: block;
   backface-visibility: hidden;
}

/* Texto grande */
#entryIntro .wordmark {
   font-family: Garamond, "Times New Roman", Times, serif;
   font-weight: 600;
   letter-spacing: .02em;
   font-size: clamp(60px, 13.5vw, 120px);
   color: #07689f;
   opacity: 0;
   transform: translateX(12px);
}

/* Eslogan */
#entryIntro .slogan {
   font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
   letter-spacing: .34em;
   font-size: clamp(16px, 4.6vw, 22px);
   color: #334155;
   opacity: 0;
   transform: translateY(6px);
   text-transform: uppercase;
   text-align: center;
   max-width: min(80vw, 900px);
   margin-top: clamp(6px, 1.6vh, 18px);
}

@media (prefers-color-scheme: dark) {
   #entryIntro .slogan {
      color: #d0d6de;
   }
}

/* Keyframes intro /
@keyframes dropInGroup{
from{ transform:translateY(-60vh) scale(.96); }
to { transform:translateY(0) scale(1); }
}
@keyframes slideInRight{
from{ opacity:0; transform:translateX(12px); }
to { opacity:1; transform:translateX(0); }
}
@keyframes fadeUp{
from{ opacity:0; transform:translateY(6px); }
to { opacity:1; transform:translateY(0); }
}
/ Dos vueltas, linear */
@keyframes spinY2full {
   0% {
      transform: translateY(0) rotateY(0deg) scale(1);
   }

   100% {
      transform: translateY(0) rotateY(720deg) scale(1.02);
   }
}

/* === Accesibilidad: reduce motion === */
@media (prefers-reduced-motion: reduce) {

   .rt-exit-left,
   .rt-enter-right,
   .rt-enter-right>*,
   #entryIntro .group,
   #entryIntro .wordmark,
   #entryIntro .slogan {
      animation: none !important;
      transform: none !important;
   }
}

/* Opcional: estilo del grupo teléfono si no existe en tu UI */
.phone-menu {
   background: var(--card);
   color: var(--ink);
   border: 1px solid var(--border);
   border-radius: 16px;
}