/* Login.cshtml y RecuperarClave.cshtml - solo lo que usan estas vistas. Requiere JFGCloudERP.css (tokens, campos, botones, .Mensaje, .spinner). */

body { background: var(--jfg-azul-profundo); }

.contentLogin { position: relative; display: flex; height: 100vh; }
.contentLogin::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 125px;
    background: var(--jfg-azul-profundo);
}

/* Cabecera de marca */
.part1 { padding: 20px 80px; background: var(--jfg-azul-profundo); }
.part1 img { max-width: 220px; }
.part1 .contentText { display: none; }
.part1 .contentText h2, .part1 .contentText p { color: var(--jfg-blanco); text-align: center; font: 500 16px/150% var(--fuente-ui); }

/* Columna del formulario */
.part2 { width: 50%; background: var(--jfg-blanco); }

.formulario {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100% - 114px);
    padding: 40px 30px;
    transform: translateY(-30px);
}
.formulario h1 { text-align: center; font: 700 36px/44px var(--fuente-titulo); color: var(--jfg-azul-marino); }
.formulario > p.p2 { margin-top: 5px; text-align: center; font: 500 18px/34px var(--fuente-ui); color: var(--jfg-pizarra); }

.formulario form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 455px;
    margin-top: 35px;
}
.formulario label { position: relative; display: block; width: 100%; }
.formulario label p { margin-bottom: 7px; padding-left: 10px; text-align: start; font: 500 15px/23px var(--fuente-ui); color: var(--jfg-pizarra); }
.formulario .indicacion { font: 600 15px/23px var(--fuente-ui); color: var(--jfg-azul-marino); text-align: start; }

.formulario input { height: 56px; font-size: 16px; }
.formulario select { height: 48px; font-size: 15px; }
.formulario label.correo input,
.formulario label.contraseña input { padding-left: 37px; }
.formulario label.contraseña input { padding-right: 40px; }

/* Iconos de los campos */
.formulario label.correo::before,
.formulario label.contraseña::before {
    content: "";
    position: absolute;
    left: 13px;
    background: no-repeat 100% / 100%;
    pointer-events: none;
}
.formulario label.correo::before { bottom: 20px; width: 16px; height: 16px; background-image: url(/areas/main/styles/build/assets/D7b5AUmM.svg); }
.formulario label.contraseña::before { bottom: 17px; left: 10px; width: 24px; height: 24px; background-image: url(/areas/main/styles/build/assets/candado-rQWqvkCW.svg); }

.toggleClave { position: absolute; right: 10px; bottom: 18px; display: flex; color: var(--jfg-pizarra); cursor: pointer; }
.toggleClave:hover { color: var(--jfg-azul-profundo); }

/* Codigo de verificacion (RecuperarClave) */
.campoCodigo { text-align: center; font: 500 24px/32px var(--fuente-mono); letter-spacing: .3em; }

/* Enlace de recuperacion */
.filaOpciones { display: flex; align-items: center; justify-content: space-between; }
.filaOpciones a { font: 500 13px/19px var(--fuente-ui); }

.formulario form .Mensaje { margin: 0; }

.formulario form button { width: 100%; padding: 15px 10px; font-size: 16px; }

/* Pasos 2 y 3: botones lado a lado */
.filaBotones { display: flex; gap: 10px; width: 100%; }
.filaBotones button { width: 50%; }

/* Imagen de portada */
.contentImg {
    position: absolute;
    top: 50%;
    right: 20px;
    width: calc(50% - 20px);
    height: calc(100vh - 40px);
    overflow: hidden;
    border-radius: 20px;
    transform: translateY(-50%);
}
.contentImg img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

@media (max-width: 1440px) {
    .part1 { padding: 20px 45px; }
    .formulario { transform: none; }
}

@media (max-width: 1440px) and (max-height: 700px) {
    .part1 { padding: 14px 45px; }
    .contentLogin::before { height: 113px; }
    .formulario form { gap: 15px; margin-top: 10px; }
    .formulario input { height: 43px; }
    .formulario form button { padding: 16px 10px; }
    .formulario label.correo::before,
    .formulario label.contraseña::before { bottom: 10px; }
    .toggleClave { bottom: 11px; }
}

@media (max-width: 850px) {
    .contentImg { display: none; }
    .part2 { width: 100%; }
    .formulario form { margin-top: 20px; }
}

@media (max-width: 500px) {
    .part1 { padding-top: 60px; }
    .part1 img { width: 200px; margin: 0 auto; }
    .part1 .contentText { display: block; }
    .part1 .contentText h2, .part1 .contentText p:first-child { margin: 20px 0 10px; font: 700 28px/34px var(--fuente-titulo); color: var(--jfg-blanco); }
    .part2 { background: var(--jfg-azul-marino); border-radius: 15px 15px 0 0; }
    .formulario { justify-content: flex-start; padding: 15px 20px; background: var(--jfg-blanco); border-radius: 15px 15px 0 0; }
    .formulario h1, .formulario > p.p2 { display: none; }
    .formulario form { margin-top: 0; }
    .formulario input { height: 50px; }
    .formulario label.correo::before,
    .formulario label.contraseña::before { bottom: 15px; }
    .toggleClave { bottom: 15px; }
}