/* Login / pantallas publicas. Movil y tablet: estilo app a pantalla completa (sin scroll). Escritorio: dos paneles. */
.auth-body{margin:0;background:#053259;-webkit-tap-highlight-color:transparent}
.auth-html,.auth-html .auth-body{height:100%}
.auth-page{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;background:#053259;color:var(--text)}
.auth-page::-webkit-scrollbar{display:none}

/* ---------- Panel de marca (hero) ---------- */
.auth-brand{position:relative;flex:0 0 auto;color:#fff;overflow:hidden;padding:calc(env(safe-area-inset-top,0px) + 22px) 24px 46px;background:radial-gradient(120% 90% at 90% 0%,rgba(1,195,151,.24),transparent 56%),linear-gradient(165deg,#0a4478 0%,#053259 58%,#042844 100%)}
.auth-brand::before{content:"";position:absolute;inset:0;background:url(img/hero-pattern.svg?v=2) center top/360px 360px repeat;pointer-events:none}
.auth-brand-inner{position:relative;display:flex;flex-direction:column;gap:18px;max-width:560px;margin:0 auto}
.auth-logo{display:flex;align-items:center;gap:12px}
.auth-logo .brand-mark{width:44px;height:44px;border-radius:5px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.auth-logo .brand-mark img{width:32px;height:32px}
.auth-logo-text{font-size:21px;font-weight:800;letter-spacing:-0.2px;line-height:1.05}
.auth-logo-text small{display:block;margin-top:3px;font-size:11.5px;font-weight:600;letter-spacing:.5px;color:#8fb0c7}
.hero-copy h1{margin:0;font-size:clamp(27px,7.4vw,36px);line-height:1.08;letter-spacing:-0.012em;font-weight:800}
.hero-copy h1 span{color:var(--mint)}
.hero-copy p{margin:10px 0 0;max-width:40ch;color:#b9d0df;font-size:14.5px;line-height:1.55}
.hero-features{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hero-features li{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.feat-ico{flex:0 0 auto;box-sizing:border-box;width:46px;height:46px;min-width:46px;border-radius:5px;display:grid;place-items:center;color:var(--mint);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.feat-ico .i{width:22px;height:22px}
.feat-txt{min-width:0}
.feat-txt b{display:block;font-size:11px;line-height:1.25;font-weight:650;color:#e3eef5}
.feat-txt em{display:none;font-style:normal;color:#9fbdd0;font-size:12.5px;line-height:1.45;margin-top:2px}
.hero-foot{display:none;margin:0;color:#7fa0b6;font-size:12px}

/* ---------- Hoja del formulario ---------- */
.auth-main{position:relative;flex:1 0 auto;display:flex;justify-content:center;align-items:stretch;margin-top:-26px;background:#fff;border-radius:5px 5px 0 0;padding:30px 24px calc(env(safe-area-inset-bottom,0px) + 22px);box-shadow:0 -14px 40px -18px rgba(2,20,40,.45);animation:auth-rise .45s cubic-bezier(.2,.7,.2,1) both}
.auth-sheet{width:100%;max-width:440px;margin:auto}
.auth-sheet .card{border:0;box-shadow:none;padding:0}
.login-box h2{margin:0;font-size:26px;line-height:1.15;letter-spacing:-0.012em;color:var(--navy);font-weight:800}
.login-sub{margin:7px 0 22px;color:var(--muted);font-size:14.5px}
.auth-alert{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 14px;border-radius:5px;background:#fff4f3;border:1px solid #f5c8c3;color:#8f2119;font-size:13.5px;line-height:1.4;animation:auth-shake .35s}
.auth-alert .i{width:18px;height:18px;margin-top:1px}
.afield{margin-bottom:14px}
.afield label{display:block;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.02em;color:#486171}
.agroup{position:relative}
.agroup-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:grid;color:#7a909e;pointer-events:none;transition:color .15s}
.agroup-ico .i{width:18px;height:18px}
.agroup:focus-within .agroup-ico{color:var(--navy)}
.ainput{display:block;width:100%;height:52px;padding:0 48px 0 44px;border:1.5px solid #d5e1e8;border-radius:5px;background:#f8fbfc;color:var(--text);font-size:16px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s,background .15s}
.ainput::placeholder{color:#9db0bb}
.ainput:focus{border-color:var(--mint);background:#fff;box-shadow:0 0 0 4px rgba(1,195,151,.15)}
.agroup-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:5px;background:none;color:#7a909e;cursor:pointer}
.agroup-btn:hover{color:var(--navy);background:#eef4f7}
.agroup-btn .i{width:19px;height:19px}
.agroup-btn .is-off{display:none}
.agroup-btn[aria-pressed=true] .is-off{display:block}
.agroup-btn[aria-pressed=true] .i:not(.is-off){display:none}
.abtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;margin-top:10px;border:0;border-radius:5px;background:linear-gradient(180deg,#0b4679,#053259);color:#fff;font-size:16px;font-weight:700;letter-spacing:.01em;cursor:pointer;box-shadow:0 12px 24px -12px rgba(5,50,89,.8);transition:transform .1s,filter .15s}
.abtn:hover{filter:brightness(1.1)}
.abtn:active{transform:scale(.985)}
.abtn-arrow{color:var(--mint);transition:transform .15s}
.abtn:hover .abtn-arrow{transform:translateX(3px)}
.abtn-spin{display:none;animation:auth-spin .8s linear infinite}
.abtn.is-loading{pointer-events:none;opacity:.88}
.abtn.is-loading .abtn-arrow{display:none}
.abtn.is-loading .abtn-spin{display:block}
.abtn:focus-visible,.agroup-btn:focus-visible{outline:3px solid rgba(1,195,151,.55);outline-offset:2px}
.login-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 6px;color:#5b7180;font-size:12.5px}
.login-note .i{width:16px;height:16px;color:#08745a}
.login-help{margin:0;text-align:center;color:#8aa0ad;font-size:12.5px}

@keyframes auth-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes auth-spin{to{transform:rotate(360deg)}}
@keyframes auth-shake{20%{transform:translateX(-5px)}50%{transform:translateX(5px)}80%{transform:translateX(-2px)}}

/* ---------- Movil / tablet: compactar segun alto para que quepa sin scroll ---------- */
@media (max-width:1023px) and (max-height:780px){.hero-features{display:none}.auth-brand{padding-bottom:40px}}
@media (max-width:1023px) and (max-height:700px){.hero-copy p{display:none}.auth-brand-inner{gap:12px}}
@media (max-width:599px){.auth-main{padding-left:22px;padding-right:22px}}

/* Tablet vertical: mas aire y descripciones */
@media (min-width:600px) and (max-width:1023px){
  .auth-brand::before{background-size:480px 480px}
  .auth-brand{padding:calc(env(safe-area-inset-top,0px) + 40px) 56px 64px}
  .auth-brand-inner{max-width:640px;gap:26px}
  .auth-logo .brand-mark{width:52px;height:52px;border-radius:5px}.auth-logo .brand-mark img{width:38px;height:38px}
  .auth-logo-text{font-size:24px}
  .hero-copy h1{font-size:44px}
  .hero-copy p{font-size:16px}
  .feat-ico{width:50px;height:50px;min-width:50px}.feat-txt b{font-size:12.5px}
  .auth-main{margin-top:-32px;border-radius:5px 5px 0 0;padding:44px 56px calc(env(safe-area-inset-bottom,0px) + 36px)}
  .auth-sheet{max-width:460px}.login-box h2{font-size:30px}
  .ainput{height:56px}.abtn{height:58px}
  .auth-brand{flex:1 0 auto;display:flex}.auth-brand-inner{width:100%;justify-content:center}.auth-main{flex:0 0 auto}
}
@media (min-width:600px) and (max-width:1023px) and (min-height:900px){
  .hero-features{grid-template-columns:1fr 1fr;gap:18px 28px}
  .hero-features li{flex-direction:row;align-items:flex-start;text-align:left;gap:14px}
  .feat-txt em{display:block}
}

/* Movil apaisado (poca altura): dos columnas */
@media (max-width:1023px) and (orientation:landscape) and (max-height:520px){
  .auth-page{flex-direction:row}
  .auth-brand{flex:0 0 42%;display:flex;padding:calc(env(safe-area-inset-top,0px) + 20px) 28px 20px}
  .auth-brand-inner{justify-content:center;min-height:100%;gap:14px}
  .hero-features,.hero-copy p{display:none}.hero-copy h1{font-size:26px}
  .auth-main{flex:1 1 auto;margin:0;border-radius:0;padding:16px 28px;box-shadow:none}
  .login-box h2{font-size:22px}.login-sub{margin:4px 0 12px;font-size:13.5px}.afield{margin-bottom:10px}.afield label{margin-bottom:4px}.ainput{height:44px}.abtn{height:46px;margin-top:6px}.login-note{margin:10px 0 0}.login-help{display:none}
}

/* ---------- Escritorio: dos paneles ---------- */
@media (min-width:1024px) and (min-height:521px){
  .auth-page{flex-direction:row;background:#fff}
  .auth-brand{flex:0 0 52%;display:flex;padding:56px clamp(48px,5vw,88px)}
  .auth-brand::before{background-size:640px 640px}
  .auth-brand-inner{flex:1;max-width:620px;margin:0;justify-content:space-between;gap:36px}
  .auth-logo .brand-mark{width:50px;height:50px}.auth-logo .brand-mark img{width:36px;height:36px}
  .hero-copy h1{font-size:clamp(34px,3.05vw,46px);line-height:1.06}
  .hero-copy p{font-size:17px;margin-top:16px;max-width:44ch}
  .hero-features{grid-template-columns:1fr 1fr;gap:22px 28px}
  .hero-features li{flex-direction:row;align-items:flex-start;text-align:left;gap:14px}
  .feat-txt b{font-size:14px;margin-top:0}.feat-txt em{display:block}
  .hero-foot{display:block}
  .auth-main{flex:1 1 auto;margin:0;border-radius:0;box-shadow:none;padding:48px;animation:none}
  .auth-sheet{max-width:410px;animation:auth-rise .5s cubic-bezier(.2,.7,.2,1) both}
  .login-box h2{font-size:30px}.login-sub{font-size:15px;margin-bottom:26px}
}
@media (min-width:1024px) and (min-height:521px) and (max-height:700px){.hero-features{display:none}}

/* ---------- Movil / tablet como app: el contenedor se ajusta al area visible (teclado incluido) y no se desmonta ---------- */
@media (max-width:1023px){
  .auth-html,.auth-html .auth-body{overflow:hidden;overscroll-behavior:none}
  .auth-page{position:fixed;left:0;right:0;top:var(--app-top,0px);height:100vh;height:var(--app-h,100dvh);overflow:hidden}
  .auth-brand{flex:0 0 auto;transition:padding .2s ease}
  .auth-main{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .auth-main::-webkit-scrollbar{display:none}
  .auth-sheet{margin:auto}
  /* teclado abierto: la cabecera se reduce al logo y el formulario ocupa el resto */
  .kb .hero-features,.kb .hero-copy p,.kb .login-sub,.kb .login-help{display:none}
  .kb .hero-copy h1{font-size:23px}
  .kb .auth-brand{padding-top:calc(env(safe-area-inset-top,0px) + 12px);padding-bottom:34px}
  .kb .auth-brand-inner{gap:10px}
  .kb .auth-main{padding-top:22px;padding-bottom:14px;margin-top:-22px}
  .kb .login-box h2{font-size:22px;margin-bottom:12px}
  .kb .afield{margin-bottom:10px}
}
@media (max-width:1023px) and (orientation:landscape) and (max-height:520px){ .kb .hero-copy{display:none} }
@media (max-width:1023px) and (max-height:430px){
  .kb .hero-copy{display:none}.kb .auth-brand{padding-bottom:28px}.kb .login-box h2{font-size:20px;margin-bottom:8px}
  .kb .ainput{height:46px}.kb .abtn{height:48px;margin-top:6px}.kb .login-note{display:none}.kb .afield label{margin-bottom:4px}
}

/* ======================================================================
   Panel de marca con FOTOGRAFIA (autobus al atardecer) — logo/nombre mas grandes
   ====================================================================== */
.auth-brand{background:#053259 url(img/login-1000.webp?v=1) 80% 46%/cover no-repeat}
.auth-brand::before{background:
  linear-gradient(180deg,rgba(3,28,54,.62) 0%,rgba(3,28,54,.30) 34%,rgba(3,28,54,.18) 52%,rgba(3,26,50,.86) 100%),
  linear-gradient(90deg,rgba(3,28,54,.55) 0%,rgba(5,50,89,.12) 70%,rgba(5,50,89,0) 100%)}
.auth-logo{gap:16px}
.auth-logo .brand-mark{width:64px;height:64px;box-shadow:0 12px 28px -10px rgba(0,0,0,.6)}
.auth-logo .brand-mark img{width:46px;height:46px}
.auth-logo-text{font-size:32px;letter-spacing:-.4px;line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.auth-logo-text small{margin-top:6px;font-size:15px;letter-spacing:.9px;font-weight:700;color:#dcebf5}
.hero-copy h1,.hero-copy p,.feat-txt{text-shadow:0 2px 16px rgba(0,0,0,.35)}
.hero-copy p{color:#d3e3ee}
.feat-txt b{color:#fff}.feat-txt em{color:#c3d8e6}
.feat-ico{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.hero-foot{color:#a9c4d6}

/* Tablet y escritorio: la foto va en ::after con su propia proporcion y se desvanece por abajo (el borde nunca se ve) */
@media (min-width:600px){
  .auth-brand{background:#042a4d}
  .auth-brand::before{z-index:1}.auth-brand-inner{z-index:2}
  .auth-brand::after{content:"";position:absolute;z-index:0;top:0;width:var(--ph-w,118%);left:calc((100% - var(--ph-w,118%)) * var(--ph-x,.8));aspect-ratio:1672/941;background:url(img/login-1672.webp?v=1) center/100% 100% no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%);pointer-events:none}
}
@media (min-width:600px) and (max-width:1023px){
  .auth-brand{--ph-w:150%;--ph-x:.84}
  .auth-brand::before{background:
    linear-gradient(180deg,rgba(3,28,54,.60) 0%,rgba(3,28,54,.16) 22%,rgba(3,28,54,0) 38%,rgba(4,42,77,.20) 52%,rgba(4,42,77,.70) 82%),
    linear-gradient(90deg,rgba(3,28,54,.50) 0%,rgba(4,40,74,.16) 46%,rgba(5,50,89,0) 80%)}
  .auth-logo .brand-mark{width:84px;height:84px}.auth-logo .brand-mark img{width:60px;height:60px}
  .auth-logo-text{font-size:44px}.auth-logo-text small{font-size:19px;margin-top:8px}
}
@media (min-width:1024px) and (min-height:521px){
  .auth-brand{--ph-w:118%;--ph-x:.8}
  .auth-brand::before{background:
    linear-gradient(180deg,rgba(3,28,54,.62) 0%,rgba(3,28,54,.20) 20%,rgba(3,28,54,0) 38%,rgba(4,42,77,.12) 52%,rgba(4,42,77,.62) 76%),
    linear-gradient(90deg,rgba(3,28,54,.58) 0%,rgba(4,40,74,.20) 46%,rgba(5,50,89,0) 80%)}
  .auth-brand-inner{justify-content:flex-start;gap:0}
  .auth-logo{gap:20px}
  .auth-logo .brand-mark{width:84px;height:84px}.auth-logo .brand-mark img{width:60px;height:60px}
  .auth-logo-text{font-size:46px;letter-spacing:-.6px}.auth-logo-text small{font-size:20px;margin-top:8px;letter-spacing:1px}
  .hero-copy{margin-top:auto}
  .hero-features{margin-top:26px}
  .hero-foot{margin-top:24px}
}

/* ---------- Ajustes finales de la foto por dispositivo (van al final para ganar la cascada) ---------- */
/* Movil: foto con el autobus visible entre el logo y el titular */
@media (max-width:599px){
  .auth-brand{background:#042a4d url(img/login-1000.webp?v=1) 76% 34%/cover no-repeat;display:flex;min-height:clamp(330px,43dvh,400px)}
  .auth-brand::before{background:
    linear-gradient(180deg,rgba(3,28,54,.66) 0%,rgba(3,28,54,.14) 30%,rgba(3,28,54,.08) 46%,rgba(4,42,77,.80) 76%,rgba(4,42,77,.94) 100%),
    linear-gradient(90deg,rgba(3,28,54,.40) 0%,rgba(3,28,54,0) 70%)}
  .auth-brand-inner{width:100%;justify-content:flex-start;gap:0}
  .hero-copy{margin-top:auto}.hero-copy p{display:none}
  .hero-features{margin-top:16px}
}
@media (max-width:599px) and (max-height:780px){.auth-brand{min-height:0}.hero-features{display:none}}
@media (max-width:599px) and (max-height:700px){
  .auth-logo .brand-mark{width:52px;height:52px}.auth-logo .brand-mark img{width:38px;height:38px}
  .auth-logo-text{font-size:27px}.auth-logo-text small{font-size:13px;margin-top:4px}
  .auth-brand{padding-top:calc(env(safe-area-inset-top,0px) + 16px);padding-bottom:40px}
  .hero-copy h1{font-size:23px}
}
/* Tablet vertical: la cabecera ocupa mas alto y la foto se ve entera */
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait){
  .auth-brand{--ph-w:124%;--ph-x:.84;flex:0 0 56%;display:flex}
  .auth-brand-inner{width:100%;justify-content:flex-start;gap:0}
  .hero-copy{margin-top:auto}
  .hero-features{margin-top:24px}
}
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait) and (max-height:900px){.hero-features{display:none}}
/* Movil apaisado: logo y nombre contenidos */
@media (max-width:1023px) and (orientation:landscape) and (max-height:520px){
  .auth-logo .brand-mark{width:52px;height:52px}.auth-logo .brand-mark img{width:38px;height:38px}
  .auth-logo-text{font-size:28px}.auth-logo-text small{font-size:13px;margin-top:4px}
  .auth-brand{--ph-w:190%;--ph-x:.8}
}
.auth-brand{isolation:isolate}
@media (max-width:599px){.auth-brand{background-position:90% 30%}}
@media (max-width:599px) and (max-height:780px){.auth-brand{min-height:236px}}
@media (max-width:599px) and (max-height:680px){.auth-brand{min-height:204px}}
/* teclado abierto en movil: la cabecera se reduce a logo + titular (anula la altura minima de la foto) */
@media (max-width:1023px){.kb .auth-brand{min-height:0}}