/* Login LAMTRA · la imagen final se coloca en /wwwroot/images/login/login-bg.webp.
   Logotipo oficial: /wwwroot/images/branding/logo-lamtra.png. */
.login-view{
  position:relative;grid-template-columns:minmax(0,1.15fr) minmax(430px,.85fr);
  min-height:100svh;background:#081a36;color:#f7fbff;isolation:isolate;overflow:hidden;
}
.login-view::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    linear-gradient(90deg,#03112ae6 0%,#061933a8 37%,#091f3794 64%,#132944bd 100%),
    url('../images/login/login-bg.webp') center center/cover no-repeat,
    radial-gradient(ellipse at 25% 45%,#215a9b,#06172d 60%,#101d38);
}
.login-story{min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:space-between;
  background:transparent!important;padding:38px clamp(28px,5vw,95px) 34px;isolation:isolate}
.login-story::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(90deg,#07132c99,transparent 85%);}
.login-logo{display:inline-flex;align-self:flex-start;max-width:310px;width:min(35vw,280px);min-height:72px}
.login-logo img{width:100%;height:auto;max-height:140px;object-fit:contain;object-position:left top;filter:drop-shadow(0 10px 16px #0008)}
.login-logo-fallback{font-size:38px;font-weight:900;letter-spacing:.13em;color:white;text-shadow:0 4px 14px #0008}
.login-logo-fallback small{display:block;font-size:11px;font-weight:700;letter-spacing:.24em;color:#a6cafa}
.story-content{margin:auto 0;padding:65px 0 78px;max-width:670px;animation:lamtra-enter .7s both}
.story-content .eyebrow{color:#7dc8ff;font-weight:800;letter-spacing:2.7px}
.story-content h1{font-size:clamp(38px,3.5vw,67px);letter-spacing:-2px;text-shadow:0 3px 22px #0009}
.story-content em{color:#56a5ff;text-shadow:0 0 26px #316cf044}
.story-content p{color:#e1eaf9;font-size:clamp(14px,1vw,18px);line-height:1.7;text-shadow:0 2px 7px #0008}
.story-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.story-pills span{display:grid;align-content:center;min-height:68px;padding:14px 16px;border:1px solid #8bb9fa47;
 background:#0b294c74;backdrop-filter:blur(9px);border-radius:13px;color:#f2f7ff;font-weight:600;font-size:12px;
 box-shadow:inset 0 1px #ffffff1d}
.login-route-progress{display:flex;align-items:center;gap:9px;margin-top:32px;color:#e1eeff;font-weight:800}
.login-route-progress span{display:flex;flex-direction:column;gap:4px;min-width:66px;font-size:12px}
.login-route-progress span:first-child{color:#6bbcff}
.login-route-progress small{font-size:10px;font-weight:500}
.login-route-progress i{position:relative;flex:1;max-width:75px;border-top:1px dashed #7fbfff94}
.login-route-progress i::after{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:100%;
 background:#79c4ff;box-shadow:0 0 14px #77c7ff;animation:lamtra-route 6s linear infinite}
.login-route-progress i:nth-of-type(2)::after{animation-delay:-3s}
.login-route-glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.login-route-glow span{position:absolute;width:36vw;height:36vw;min-width:280px;min-height:280px;right:-18%;top:23%;
 background:radial-gradient(circle,#328cff22,transparent 67%);animation:lamtra-breathe 7s ease-in-out infinite}
.story-footer{color:#a8bcd5;letter-spacing:2px;text-transform:uppercase;text-shadow:0 2px 6px #0008}
.login-panel{background:transparent!important;position:relative;display:flex;align-items:center;justify-content:center;
 padding:105px clamp(28px,3.5vw,75px) 40px}
.login-theme-control{top:27px;right:35px;z-index:2}
.login-card{width:100%;max-width:560px;padding:clamp(27px,3vw,55px);border-radius:23px;
 background:linear-gradient(145deg,#395575b0,#2e3a5bbc 65%,#182d4bd9);
 backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
 border:1px solid #c4dfff65;box-shadow:0 18px 70px #0008,inset 0 1px #ffffff45;
 color:#fff;animation:lamtra-card-in .8s .12s both}
.login-card .eyebrow{color:#bbdcff;letter-spacing:2.6px}
.login-card h2{font-size:clamp(27px,2vw,36px);color:#fff;letter-spacing:-.9px}
.login-card p{color:#d6e5fa;font-size:14px}
.login-card label{color:#e4edff;font-size:12px;font-weight:600}
.login-card input{background:#eaf1ff;border:1px solid #d4e1fb;border-radius:11px;color:#102a51;min-height:49px}
.login-card input:focus{outline:2px solid #5db5ff;box-shadow:0 0 0 4px #5397ff36}
.login-card .button.primary{background:linear-gradient(105deg,#298dff,#245cae);
 border:1px solid #72b8ff;box-shadow:0 0 0 2px #448efe22,0 9px 24px #005ec35c;
 color:white;font-weight:750;min-height:54px;transition:transform .18s,box-shadow .18s}
.login-card .button.primary:hover{transform:translateY(-2px);box-shadow:0 0 0 2px #448efe44,0 11px 34px #167cff88}
.login-card .form-error{color:#ffafaf}
.login-card .login-security{color:#c9d7eb;border-top:1px solid #c5dafa4f;padding-top:18px}
.login-capabilities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:26px}
.login-capabilities span{min-width:0;text-align:center;padding:13px 5px;border-radius:12px;background:#ffffff10;
 border:1px solid #d5e9ff2a;font-weight:700;font-size:11px}
.login-capabilities small{display:block;margin-top:5px;color:#c2d5ee;font-size:9px;font-weight:400}
html[data-theme=day] .login-view,html[data-theme=night] .login-view{background:#091b36;color:#fff}
html[data-theme=night] .login-card,html[data-theme=day] .login-card{color:#fff}
html[data-theme=night] .login-card input{background:#eaf1ff;color:#102a51}
@keyframes lamtra-enter{from{opacity:0;transform:translateY(19px)}to{opacity:1;transform:none}}
@keyframes lamtra-card-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes lamtra-route{to{left:100%}}
@keyframes lamtra-breathe{50%{opacity:.45;transform:scale(1.1)}}
@media(max-width:1000px){.login-view{grid-template-columns:1fr 1fr}.login-panel{padding:85px 20px 30px}
 .login-story{padding:35px 30px}.login-card{padding:26px}.story-pills span{padding:10px}}
@media(max-width:760px){.login-view{display:block;min-height:100svh}.login-view::before{background-position:43% center}
 .login-story{min-height:0;padding:24px 22px 5px}.login-logo{width:195px;min-height:65px}.story-content{padding:25px 0 8px}
 .story-content h1{font-size:32px}.story-content p{font-size:12px;margin:12px 0}.story-pills,.login-route-progress,.story-footer{display:none}
 .login-panel{padding:24px 17px 30px}.login-theme-control{position:fixed;top:18px;right:17px}
 .login-card{max-width:550px;padding:28px 23px}.login-capabilities{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.story-content,.login-card,.login-route-progress i::after,.login-route-glow span{animation:none!important}
 .login-card .button.primary{transition:none}}

/* Retoques de composición basados en el boceto aprobado (octubre 2026). */
@media(min-width:1001px){
 .login-view{grid-template-columns:minmax(0,1.22fr) minmax(470px,.78fr)}
 .login-story{padding-left:clamp(44px,5.2vw,100px);padding-right:28px}
 .story-content{max-width:690px;padding-bottom:76px}
 .login-panel{padding:96px clamp(30px,3.25vw,67px) 35px}
 .login-card{max-width:590px;padding:clamp(34px,3.15vw,58px)}
 .login-capabilities span{padding:19px 4px}
}
.login-view::before{
 background:
 linear-gradient(90deg,#04142bbc 0%,#061c3270 39%,#102a4452 67%,#1028448c 100%),
 url('../images/login/login-bg.webp') center center/cover no-repeat,
 radial-gradient(ellipse at 25% 45%,#215a9b,#06172d 60%,#101d38);
}
.login-story::before{background:linear-gradient(90deg,#04102468,transparent 91%)}
.story-content h1{line-height:1.1;font-weight:850;letter-spacing:-2.4px}
.story-content p{color:#f1f5ff;text-shadow:0 2px 12px #061629c9}
.story-pills span{min-height:80px;padding:15px 18px;background:#0c2a4f72;border-color:#b2d5ff48;
 box-shadow:inset 0 1px #ffffff2b,0 10px 30px #04132b2b;backdrop-filter:blur(11px)}
.login-logo{max-width:325px;width:min(34vw,300px)}
.login-logo img{max-height:148px}
.login-card{
 background:linear-gradient(142deg,#4a6885a8 0%,#4c516ca8 52%,#1b3357c4 100%);
 border-color:#c8e9ff9e;
 box-shadow:0 20px 76px #010d257a,inset 0 1px #ffffff55,0 0 33px #429ff724;
}
.login-card .eyebrow{font-size:11px;margin-bottom:19px}
.login-card h2{font-weight:800;margin-bottom:10px}
.login-card p{margin-bottom:29px}
.login-card input{min-height:54px;box-shadow:inset 0 1px 3px #1c3b6420}
.login-card .button.primary{min-height:57px;font-size:14px}
.login-capabilities span{background:#b9d8ff12;border-color:#e3f0ff38}
@media(max-width:1000px) and (min-width:761px){
 .login-card{padding:28px}.story-pills span{min-height:64px}
}
@media(max-width:760px){
 .login-view::before{background-position:43% center}
 .login-story{background:linear-gradient(180deg,#05152b72,transparent)!important}
 .login-card{background:linear-gradient(145deg,#425879df,#172b4aed)}
 .login-logo{width:195px}
}

/* Acabado final: cristal cromático, reflejos y tarjetas con iconografía. */
.login-view::before{background:
 linear-gradient(90deg,#031227a8 0%,#07192d4d 38%,#12284542 68%,#1028447c 100%),
 url('../images/login/login-bg.webp') center center/cover no-repeat,
 radial-gradient(ellipse at 25% 45%,#215a9b,#06172d 60%,#101d38)}
.login-card{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;
 background:linear-gradient(145deg,rgba(88,114,153,.42),rgba(76,92,129,.36) 34%,rgba(67,77,114,.34) 62%,rgba(34,51,82,.52))!important;
 border:1px solid rgba(205,230,255,.58)!important;
 backdrop-filter:blur(34px) saturate(145%)!important;-webkit-backdrop-filter:blur(34px) saturate(145%)!important;
 box-shadow:0 30px 90px rgba(1,13,37,.55),0 0 0 1px #ffffff14 inset,0 1px 0 #ffffff50 inset,0 0 36px #52a3ff30!important}
.login-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
 background:linear-gradient(180deg,#ffffff27 0%,#ffffff0a 18%,transparent 44%),radial-gradient(circle at 15% 10%,#ffffff20,transparent 30%)}
.login-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
 box-shadow:0 0 0 1px #92cdff26 inset,0 0 28px #3c86ff20 inset}
.login-card .eyebrow{color:#d7ebff!important;letter-spacing:3px;font-weight:800}
.login-card h2{color:#fff!important;text-shadow:0 4px 18px #0004;font-size:clamp(30px,2.2vw,38px);letter-spacing:-1.1px}
.login-card p{color:#e3edfb!important}
.login-card input{background:#f1f6ffeb!important;border:1px solid #d2e3f8f2!important;border-radius:15px!important;min-height:54px!important;
 box-shadow:0 8px 18px #00000014,inset 0 1px 2px #1b355a1a}
.login-card input:focus{outline:2px solid #6abdff!important;box-shadow:0 0 0 5px #408fff29,0 10px 24px #00000020!important}
.login-card .button.primary{position:relative;overflow:hidden;min-height:60px!important;border-radius:16px!important;
 background:linear-gradient(135deg,#248cff,#2d7df5 35%,#2b69d0 70%,#2455a6)!important;
 border:1px solid #85c7ffc7!important;box-shadow:0 0 0 1px #ffffff1f inset,0 12px 30px #176eff57,0 0 22px #45a2ff3d!important}
.login-card .button.primary::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,#ffffff38, #ffffff0f 35%,transparent)}
.login-card .button.primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #ffffff24 inset,0 16px 34px #176eff6b,0 0 26px #4cb1ff4d!important}
.login-card .login-security{color:#d3def0!important;border-top:1px solid #d6e6ff40!important}
.login-capabilities{gap:12px;margin-top:28px}
.login-capabilities span{position:relative;overflow:hidden;border-radius:16px;padding:15px 6px 16px!important;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 background:linear-gradient(145deg,#ffffff20,#add1ff0d 36%,#5f7eb422)!important;
 border:1px solid #d2e4ff57!important;
 box-shadow:inset 0 1px #ffffff30,0 10px 24px #00000029,0 0 14px #5198ff14;
 backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%);
 color:#fff!important;font-weight:700!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.login-capabilities span::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,#ffffff29, #ffffff0a 40%,transparent)}
.login-capabilities span:hover{transform:translateY(-2px);border-color:#87c8ff80!important;
 box-shadow:inset 0 1px #ffffff35,0 14px 28px #00000038,0 0 18px #58a4ff29}
.login-capabilities svg{height:28px;width:28px;display:block;flex:none;color:#d1eaff;margin-bottom:9px;
 filter:drop-shadow(0 0 7px #66adff75)}
.login-capabilities small{color:#d7e5fa!important;font-size:10px!important;margin-top:5px!important}
@media(min-width:1001px){.login-panel{padding-top:88px;padding-bottom:28px}.login-card{max-width:580px}}
@media(max-width:760px){.login-card{padding:27px 21px}.login-capabilities{gap:8px}.login-capabilities span{padding:12px 5px!important}.login-capabilities svg{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.login-capabilities span:hover,.login-card .button.primary:hover{transform:none}}

/* Logotipo corporativo oficial en la navegación: conserva el enlace #modules. */
.app-shell .topbar-official-logo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:0;padding:2px 0;line-height:1;text-decoration:none}
.app-shell .topbar-official-logo img{display:block;width:auto;height:58px;max-width:190px;object-fit:contain;object-position:center;filter:drop-shadow(0 2px 3px #132b4d18);transition:transform .2s ease,filter .2s ease}
.app-shell .topbar-official-logo:hover img{transform:translateY(-1px);filter:drop-shadow(0 4px 6px #2762a44a)}
.app-shell .topbar-official-logo:focus-visible{outline:3px solid #4789e5;outline-offset:5px;border-radius:9px}
.app-shell .topbar-official-logo .topbar-logo-fallback{font-size:19px;color:var(--text)}
@media(max-width:900px){.app-shell .topbar-official-logo img{height:46px;max-width:155px}}
@media(max-width:600px){.app-shell .topbar-official-logo img{height:40px;max-width:125px}}
@media(prefers-reduced-motion:reduce){.app-shell .topbar-official-logo img{transition:none}}