/* Subiendo — entrada animada y login (pasajero + conductor). Solo CSS + SVG inline, sin descargas extra. */

/* ===== Escena compartida: ruta con auto en movimiento ===== */
.sx-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.sx-scene svg{position:absolute;left:0;bottom:3%;width:100%;height:auto;max-width:none;opacity:.9}
.sx-road{fill:none;stroke:rgba(255,255,255,.14);stroke-width:18;stroke-linecap:round}
.sx-route{fill:none;stroke-width:4;stroke-linecap:round;
  stroke-dasharray:900;stroke-dashoffset:900;animation:sxDraw 1.8s cubic-bezier(.65,0,.35,1) .25s forwards}
.sx-lane{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.6;stroke-dasharray:6 14;animation:sxLane 1.2s linear infinite}
.sx-pin{fill:none;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:sxPin 2.4s ease-out infinite}
.sx-pin-b{animation-delay:1.2s}
.sx-car{filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
.sx-orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none;z-index:0}
.sx-orb-a{width:260px;height:260px;background:#22d3ee;top:-80px;right:-90px;animation:sxFloat 9s ease-in-out infinite}
.sx-orb-b{width:220px;height:220px;background:#6366f1;bottom:12%;left:-110px;animation:sxFloat 11s ease-in-out infinite reverse}

@keyframes sxDraw{to{stroke-dashoffset:0}}
@keyframes sxLane{to{stroke-dashoffset:-40}}
@keyframes sxPin{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes sxFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,22px)}}
@keyframes sxGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes sxPop{0%{opacity:0;transform:scale(.6) translateY(14px);filter:blur(8px)}
  60%{opacity:1;transform:scale(1.06) translateY(0);filter:blur(0)}100%{opacity:1;transform:scale(1)}}
@keyframes sxRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes sxRing{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@keyframes sxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sxShine{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(220%) skewX(-20deg)}}
@keyframes sxBar{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

/* ===== Splash ===== */
#screen-splash{
  position:absolute;overflow:hidden;
  background:linear-gradient(135deg,#071a3d 0%,#0d47a1 30%,#1565C0 55%,#0891b2 80%,#071a3d 100%)!important;
  background-size:300% 300%!important;animation:sxGradient 12s ease infinite;
}
html[data-theme="dark"] #screen-splash{
  background:linear-gradient(135deg,#020617 0%,#0b1f4d 35%,#0c4a6e 65%,#020617 100%)!important;
  background-size:300% 300%!important;
}
#screen-splash > :not(.sx-scene):not(.sx-orb){position:relative;z-index:1}
#screen-splash .splash-logo{
  animation:sxPop .9s cubic-bezier(.34,1.56,.64,1) both;
  box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.4)!important;
}
#screen-splash .splash-logo::after{
  content:'';position:absolute;inset:-10px;border-radius:30px;
  border:2px solid rgba(255,255,255,.55);animation:sxRing 2s ease-out .6s infinite;pointer-events:none;
}
#screen-splash .splash-logo.subite-logo-wrap{overflow:visible!important}
#screen-splash .splash-name,
#screen-splash .splash-brand{animation:sxRise .7s ease-out .35s both;letter-spacing:.02em}
#screen-splash .splash-sub,
#screen-splash .splash-role{animation:sxRise .7s ease-out .55s both}
#screen-splash .splash-name{font-size:2.4rem}
#screen-splash .splash-name span{
  background:linear-gradient(90deg,#a5f3fc,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:1;
}
#screen-splash .splash-loader{
  position:relative;width:120px;height:4px;margin-top:1.6rem;overflow:hidden;
  background:rgba(255,255,255,.18);animation:sxRise .6s ease-out .75s both;
}
#screen-splash .splash-loader > div{
  width:40%!important;animation:sxBar 1.1s cubic-bezier(.4,0,.2,1) infinite!important;
  background:linear-gradient(90deg,transparent,#fff,transparent)!important;
}
#screen-splash .splash-enter-btn{box-shadow:0 10px 28px rgba(0,0,0,.25)}

/* ===== Login: hero animado ===== */
#screen-login .login-hero,
#screen-login .login-bg{
  position:relative;overflow:hidden;flex-shrink:0;
  min-height:240px;height:auto;padding:calc(env(safe-area-inset-top,0px) + 2.2rem) 1.25rem 3.2rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  background:linear-gradient(135deg,#071a3d 0%,#0d47a1 35%,#1565C0 60%,#0891b2 100%);
  background-size:300% 300%;animation:sxGradient 14s ease infinite;
}
#screen-login .login-hero::before,
#screen-login .login-bg::before{display:none}
#screen-login .login-hero > :not(.sx-scene):not(.sx-orb),
#screen-login .login-bg > :not(.sx-scene):not(.sx-orb){position:relative;z-index:1}
#screen-login .login-hero-logo,
#screen-login .login-logo{animation:sxPop .8s cubic-bezier(.34,1.56,.64,1) both,sxBob 5s ease-in-out 1s infinite}
#screen-login .login-hero-title,
#screen-login .login-brand{
  color:#fff;font-weight:800;text-shadow:0 4px 18px rgba(0,0,0,.25);animation:sxRise .6s ease-out .25s both;
}
#screen-login .login-brand{font-size:1rem;letter-spacing:.12em}
#screen-login .sx-scene svg{bottom:14px;opacity:.6}

/* ===== Login: tarjeta del formulario ===== */
#screen-login .login-body{
  position:relative;z-index:2;flex:1;margin-top:-28px;
  border-radius:28px 28px 0 0;background:var(--white);
  box-shadow:0 -12px 40px rgba(15,23,42,.12);padding:1.75rem 1.5rem 2rem;
}
#screen-login .login-body > *{animation:sxRise .5s ease-out both}
#screen-login .login-body > :nth-child(1){animation-delay:.15s}
#screen-login .login-body > :nth-child(2){animation-delay:.2s}
#screen-login .login-body > :nth-child(3){animation-delay:.27s}
#screen-login .login-body > :nth-child(4){animation-delay:.34s}
#screen-login .login-body > :nth-child(5){animation-delay:.4s}
#screen-login .login-body > :nth-child(6){animation-delay:.45s}
#screen-login .login-body > :nth-child(n+7){animation-delay:.5s}
#screen-login .login-heading{font-size:1.45rem;letter-spacing:-.03em}
#screen-login .form-label{font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--text3)}
#screen-login .form-input{
  height:52px;border-radius:14px;padding:0 1rem;font-size:.95rem;
  background:var(--surface,#f8fafc);border:1.5px solid var(--border,#e2e8f0);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
#screen-login .form-input:focus{
  outline:none;border-color:#2196F3;background:var(--white);
  box-shadow:0 0 0 4px rgba(33,150,243,.16);
}
#screen-login .btn-main,
#screen-login .btn-blue{
  position:relative;overflow:hidden;height:54px;border-radius:16px;font-weight:800;letter-spacing:.01em;
  background:linear-gradient(135deg,#0d47a1,#1e88e5 55%,#06b6d4)!important;color:#fff!important;
  box-shadow:0 12px 28px rgba(21,101,192,.35);transition:transform .15s,box-shadow .15s;
}
#screen-login .btn-main::after,
#screen-login .btn-blue::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:sxShine 3.2s ease-in-out 1.2s infinite;pointer-events:none;
}
#screen-login .btn-main:active,
#screen-login .btn-blue:active{transform:scale(.98);box-shadow:0 6px 16px rgba(21,101,192,.3)}

html[data-theme="dark"] #screen-login .login-body{box-shadow:0 -12px 40px rgba(0,0,0,.45)}
html[data-theme="dark"] #screen-login .form-input{background:var(--card);border-color:var(--border)}
html[data-theme="dark"] #screen-login .form-input:focus{background:var(--card);box-shadow:0 0 0 4px rgba(96,165,250,.2)}

@media (prefers-reduced-motion: reduce){
  #screen-splash,#screen-splash *,#screen-login,#screen-login *,.sx-scene *{
    animation:none!important;transition:none!important;
  }
  .sx-route{stroke-dashoffset:0}
}