/* Pantallas de inicio de sesion (personal y clientes). Mobile-first. */
html:has(body.login-body){ height:auto; }
body.login-body{ margin:0; height:auto; min-height:100%; background:#06142e; color:#fff; font-family:"RobotoRegular",system-ui,sans-serif; }

.login-screen{
	position:relative; min-height:100vh; min-height:100dvh; width:100%;
	display:flex; flex-direction:column; justify-content:space-between; align-items:center;
	padding:max(18px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom));
	box-sizing:border-box; overflow:hidden;
	background:#06142e url("../img/login-bg.jpg") 28% center/cover no-repeat;
}
.login-screen::before{
	content:""; position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(180deg,rgba(4,16,46,.45) 0%,rgba(4,16,46,0) 28%,rgba(4,16,46,0) 40%,rgba(5,20,56,.82) 70%,#06142e 100%);
}
.login-screen > *{ position:relative; z-index:1; }

/* Móvil vertical: la foto es horizontal, se muestra completa en altura sin ampliarla y se funde con el fondo */
@media (max-aspect-ratio:1/1){
	.login-screen{ background-size:auto 42vh; background-position:50% 0; background-repeat:no-repeat; }
	.login-screen::before{ background:linear-gradient(180deg,rgba(4,16,46,.3) 0%,rgba(4,16,46,0) 18%,rgba(6,20,46,.6) 34%,#06142e 46%,#06142e 100%); }
}

.login-top{ width:100%; max-width:520px; text-align:center; }
.login-motto{ display:flex; justify-content:flex-end; align-items:center; gap:10px; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; opacity:.9; margin-bottom:18px; }
.login-flag{ width:28px; height:4px; display:inline-block; background:linear-gradient(#fcd116 0 50%,#003893 50% 75%,#ce1126 75%); }
.login-emblem{ width:min(300px,78vw); height:auto; margin:0 auto 10px; display:block; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.login-title{ font-size:clamp(1.7rem,7vw,2.4rem); font-weight:700; line-height:1.05; letter-spacing:.02em; text-transform:uppercase; margin:0; text-shadow:0 2px 10px rgba(0,0,0,.45); }
.login-subtitle{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; opacity:.85; margin-top:8px; }

.login-form{ width:100%; max-width:420px; margin:28px 0 8px; }
.login-field{ position:relative; margin-bottom:14px; }
.login-field > .login-icon{ z-index:1; position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:1.05rem; color:#fff; opacity:.9; pointer-events:none; }
.login-field input{
	width:100%; box-sizing:border-box; height:56px; padding:0 52px 0 52px; font-size:16px; color:#fff;
	background:rgba(10,30,70,.62); border:1px solid rgba(160,190,235,.45); border-radius:14px;
	-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); outline:none; transition:border-color .15s, box-shadow .15s;
}
.login-field input::placeholder{ color:rgba(190,210,245,.8); }
.login-field input:focus{ border-color:#4a8dff; box-shadow:0 0 0 3px rgba(74,141,255,.28); }
.login-eye{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:48px; height:48px; border:0; background:transparent; color:#fff; font-size:1.05rem; cursor:pointer; opacity:.9; }
.login-btn{
	width:100%; height:56px; border:0; border-radius:14px; cursor:pointer; font-size:1.1rem; font-weight:600; color:#fff;
	background:#2a74e0; display:flex; align-items:center; justify-content:center; gap:12px; transition:background .15s, transform .05s;
}
.login-btn:hover{ background:#3a84f0; }
.login-btn:active{ transform:scale(.99); }
.login-link{ display:block; text-align:center; margin-top:18px; font-size:.95rem; color:#5b9bff; }
.login-link:hover{ color:#8bb8ff; text-decoration:underline; }

.login-error{ background:rgba(180,30,50,.85); border:1px solid rgba(255,150,160,.6); border-radius:12px; padding:12px 14px; margin-bottom:14px; font-size:.92rem; }

.login-foot{ width:100%; max-width:420px; text-align:center; font-size:.85rem; margin-top:18px; }
.login-foot .login-rule{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.login-foot .login-rule::before,.login-foot .login-rule::after{ content:""; flex:1; height:1px; background:rgba(160,190,235,.35); }
.login-foot .login-rule img{ width:46px; height:auto; opacity:.9; }
.login-foot small{ display:block; opacity:.7; font-size:.82rem; }

/* Pantallas anchas: tarjeta centrada sobre la foto */
@media (min-width:768px){
	.login-screen{ justify-content:center; gap:20px; background-position:center; }
	.login-screen::before{ background:linear-gradient(90deg,rgba(4,16,46,.15),rgba(4,16,46,.55)); }
	.login-form{ margin-top:8px; padding:26px; border-radius:20px; background:rgba(5,20,56,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-sizing:border-box; }
}
/* Pantallas bajas (celular horizontal): se compacta */
@media (max-height:560px){
	.login-screen{ justify-content:flex-start; gap:10px; }
	.login-emblem{ width:70px; }
	.login-motto{ margin-bottom:6px; }
	.login-field input,.login-btn{ height:48px; }
}

.login-form .message{ margin-bottom:14px; border-radius:12px; overflow:hidden; }
.login-form .message-body,.login-form .message.is-danger .message-body{ background:rgba(180,30,50,.88); color:#fff; border:1px solid rgba(255,150,160,.6); border-radius:12px; }
.login-form .message.is-danger .message-body strong{ color:#fff; }