/* ==========================================================================
LOGIN.CSS
Estilos EXCLUSIVOS de la pantalla de login.
--------------------------------------------------------------------------
Todo lo genérico (tipografía, colores, radios, look de los campos e
íconos de fm-field, fm-btn-volver) ya viene de forms.css + fonts.css.
Acá solo va lo que es propio de ESTA pantalla: el banner superior, el
card centrado, el botón de submit y los links de ayuda.
Requiere, en este orden, en el :
========================================================================== */
/* ══════════════════════════════════════
1. BANNER SUPERIOR (logo / volver)
══════════════════════════════════════ */
.banner-superior {
/* background: var(--fm-color-fondo-card); */
/* border-bottom: 1px solid var(--fm-color-borde-suave); */
background: var(--fm-color-header);
padding: 14px 16px;
}
.main-title-login {
font-family: var(--fm-font);
}
/* ══════════════════════════════════════
2. CARD CENTRADO DEL LOGIN
══════════════════════════════════════ */
.login-container {
min-height: calc(100vh - 74px);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 100px 16px;
}
.login-content {
width: 100%;
max-width: 380px;
background: var(--fm-color-fondo-card);
border: 1px solid var(--fm-color-borde-suave);
border-radius: var(--fm-radius-card);
box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
padding: 28px 24px 24px;
}
/* ══════════════════════════════════════
3. CAMPO DE CONTRASEÑA (input + ojito)
El input en sí ya se ve bien gracias a fm-field .form-control;
acá solo se resuelve el posicionamiento del ícono de mostrar/ocultar.
══════════════════════════════════════ */
/* .login-pass-wrap {
position: relative;
width: 100%;
} */
/* .login-pass-wrap .form-control {
padding-right: 32px !important;
} */
/* .login-pass-toggle {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
cursor: pointer;
color: var(--fm-color-texto-muted);
font-size: 14px;
} */
/* ══════════════════════════════════════
4. BOTÓN PRINCIPAL (Iniciar sesión)
Mismo lenguaje visual que fm-btn-guardar (fondo header, sombra acento)
pero de ancho completo y sin el botón "limpiar" al lado.
══════════════════════════════════════ */
.btn-login {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 13px;
margin: 6px 0 18px;
border: none;
border-radius: var(--fm-radius-btn);
background: var(--fm-color-header);
color: #fff;
font-family: var(--fm-font);
font-size: 14px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 4px 14px var(--fm-color-acento-shadow);
transition: opacity .15s;
-webkit-tap-highlight-color: transparent;
}
.btn-login:hover {
opacity: .9;
}
/* ══════════════════════════════════════
5. LINKS DE AYUDA (crear cuenta / código / recuperar clave)
══════════════════════════════════════ */
.login-links {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 4px;
}
.login-links a {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(--fm-color-acento);
text-decoration: none;
}
.login-links a:hover {
text-decoration: underline;
}
.login-links a i {
font-size: 14px;
width: 16px;
text-align: center;
}
.logo-login {
height: 45px;
width: auto;
}
.login-brand {
font-family: 'Poppins', sans-serif;
font-size: 2rem;
font-weight: 600;
color: #fff;
letter-spacing: 0.5px;
/* background: var(--fm-color-header); */
/* padding: 6px 16px; */
/* border-radius: var(--fm-radius-input); */
}