/*
   Resumen: estilos de la pantalla de inicio de sesión (Views/Account/Login.cshtml).
   ¿Sigue creciendo?: no, es exclusivo del login. El resto del sitio usa site.css.

   Todo es CSS propio a propósito: nada de Tailwind ni fuentes de Google, porque esto
   corre en la red interna del municipio y puede no tener salida a internet.
*/

:root {
    --azul-institucional: #003366;
    --azul-texto: #001e40;
    --azul-acento: #4285f4;
    --azul-icono: #2563eb;
    --gris-texto: #5c6984;
    --gris-borde: #d1d5db;
    --gris-placeholder: #9ca3af;
    --error-fondo: #ffebee;
    --error-texto: #c62828;
    --pie-fondo: #eef2f9;
}

.login-page {
    min-height: 100vh;
    /* dvh tiene en cuenta la barra del navegador en celulares; los navegadores que
       no lo entienden se quedan con el 100vh de arriba. */
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    color: var(--azul-texto);
    /* Ilustración del cerro y la ciudad. El degradado de arriba aclara la zona donde
       cae la tarjeta; el color de fondo queda de respaldo por si la imagen faltara.

       El tamaño cambia por dispositivo (igual que el banner de Inicio): con "cover"
       en celular la imagen se agranda tantísimo que solo se alcanza a ver un trozo
       del centro del cerro, sin ciudad y sin silueta reconocible. Por eso aquí abajo
       se ancla por ancho, y "cover" se reserva para monitor.

         celular -> la ciudad como franja al fondo, con el cerro asomándose
         tablet  -> lo mismo, más cerca del ancho real
         monitor -> la ilustración cubriendo toda la pantalla (como estaba) */
    background-color: #eef1f7;
    background-image: linear-gradient(160deg, #f6f8fc 0%, rgb(238 241 247 / 0%) 45%),
                      url('../img/fondo-sanicolas.png');
    background-repeat: no-repeat;
    background-size: auto, 165% auto;
    background-position: center, center bottom;
    /* En celular el fondo fijo se ve mal: salta y se agranda al hacer scroll. */
    background-attachment: scroll, scroll;
}

@media (min-width: 768px) {
    .login-page { background-size: auto, 120% auto; }
}

@media (min-width: 1024px) {
    .login-page {
        background-size: auto, cover;
        background-attachment: scroll, fixed;
    }
}

/* Los espacios verticales son fluidos (clamp) en vez de fijos: en monitores altos se
   ven amplios, y en pantallas bajas se encogen solos para que la tarjeta siempre quepa
   sin sacar barra de scroll. */
.login-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vh, 48px) 24px;
}

.login-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 30px rgb(0 0 0 / 12%);
    padding: clamp(24px, 3.5vh, 40px) clamp(24px, 5vw, 40px) clamp(28px, 4vh, 48px);
}

/* ---------- Encabezado ---------- */

.login-header {
    text-align: center;
    margin-bottom: clamp(14px, 3vh, 28px);
}

/* El archivo del logo trae mucho espacio en blanco arriba y abajo (y su fondo no es
   transparente). Esta caja lo recorta: fija el alto visible y esconde lo que sobra.
   Si algún día llega el logo ya recortado, subir el 'height' hasta que se vea completo. */
.login-logo-caja {
    height: clamp(120px, 19vh, 168px);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.login-logo {
    width: 340px;
    max-width: 100%;
    height: auto;
    /* Dentro del archivo, el dibujo no está centrado: queda 2.4% arriba del centro.
       Este empujón lo deja centrado dentro de la caja de recorte. */
    transform: translateY(2.4%);
}

/* El tamaño del texto NO se encoge en pantallas bajas: hay usuarios con presbicia y
   monitores viejos. Lo que se recorta para ganar espacio son los márgenes, no la letra. */
.login-titulo {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--azul-texto);
    margin: 0 0 4px;
}

.login-subtitulo {
    font-size: 20px;
    font-weight: 500;
    color: var(--gris-texto);
    margin: 0;
}

.login-separador {
    width: 80px;
    height: 6px;
    background: var(--azul-acento);
    border-radius: 999px;
    margin: clamp(12px, 2.5vh, 24px) auto 0;
}

/* ---------- Mensajes de error ---------- */

/* Solo se pinta el recuadro rojo cuando ASP.NET realmente metió errores adentro.
   Sin esto, el recuadro aparecería vacío al entrar por primera vez. */
.login-errores:not(:empty) {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--error-fondo);
    color: var(--error-texto);
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 15px;
}

.login-errores ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.login-errores .icono {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ---------- Campos ---------- */

.login-campo {
    margin-bottom: clamp(14px, 2.5vh, 20px);
}

.login-campo label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--azul-texto);
    margin-bottom: 8px;
}

.login-input-grupo {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-grupo .icono-izq {
    position: absolute;
    left: 15px;
    color: var(--azul-icono);
    pointer-events: none;
    display: flex;
}

.login-campo input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    font-size: 16px;
    font-family: inherit;
    color: var(--azul-texto);
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.login-campo input::placeholder {
    color: var(--gris-placeholder);
}

.login-campo input:focus {
    border-color: var(--azul-institucional);
    box-shadow: 0 0 0 3px rgb(0 51 102 / 15%);
}

/* Quita las flechitas del campo numérico: la nómina se teclea, no se sube y baja. */
.login-campo input[type=number] {
    -moz-appearance: textfield;
}

.login-campo input[type=number]::-webkit-outer-spin-button,
.login-campo input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.login-campo input[type=password] {
    letter-spacing: .15em;
    padding-right: 48px;
}

.login-ver-password {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
}

.login-ver-password:hover {
    color: #374151;
}

/* De los dos iconos del ojo solo se dibuja el que tenga la clase "activo". */
.login-ojo {
    display: none;
}

.login-ojo.activo {
    display: block;
}

.login-ver-password:focus-visible {
    outline: 2px solid var(--azul-institucional);
    outline-offset: 1px;
}

/* Mensaje de validación de cada campo (lo llena ASP.NET). */
.login-campo .field-validation-error {
    display: block;
    font-size: 13px;
    color: var(--error-texto);
    margin-top: 6px;
}

.login-aviso-mayus {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gris-texto);
    margin-top: 8px;
}

.login-aviso-mayus.visible {
    display: flex;
}

/* ---------- Botón ---------- */

.login-boton {
    width: 100%;
    margin-top: 12px;
    padding: 16px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: var(--azul-institucional);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
    transition: background .15s, transform .05s;
}

.login-boton:hover {
    background: #002a55;
}

.login-boton:active {
    transform: scale(.99);
}

/* Candado del botón: chico, del alto del texto, para que acompañe sin robar cámara. */
.login-boton-candado {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    overflow: visible;
}

/* El arco queda colgado de su pata DERECHA (esa no se mueve, sigue metida en el
   cuerpo) y la izquierda se levanta girando hacia ese lado: es el movimiento de un
   candado que se abre. "fill-box" pone el pivote en la esquina del arco y no en la
   del SVG completo.
   Ojo con el signo: en SVG el eje Y va hacia abajo, así que un giro NEGATIVO con
   este pivote hunde la pata izquierda en vez de levantarla. */
.login-candado-arco {
    transform-box: fill-box;
    transform-origin: right bottom;
    transition: transform .26s cubic-bezier(.34, .8, .3, 1);
}

/* :not([disabled]) porque al enviar el formulario el botón se bloquea y aparece el
   spinner — ahí el candado ya no debe moverse. */
.login-boton:not([disabled]):hover .login-candado-arco,
.login-boton:not([disabled]):focus-visible .login-candado-arco {
    transform: translateY(-1.4px) rotate(14deg);
}

/* Al picarle el arco gira de verdad: la pata izquierda sale del cuerpo y queda la
   silueta de un candado abierto. Es el remate del gesto, por eso es mucho más
   marcado que el del mouse encima. */
.login-boton:not([disabled]):active .login-candado-arco {
    transform: translateY(-2.6px) rotate(52deg);
}

/* La clase la pone el JS al tocar el botón y la deja puesta mientras se envía. Es lo
   que hace que la animación se vea en celular, donde no hay "mouse encima" y el
   :active se apaga al instante porque el botón se deshabilita al mandar el formulario.
   Va sin :not([disabled]) justamente para sobrevivir a ese bloqueo. */
.login-boton.abriendo .login-candado-arco {
    transform: translateY(-2.6px) rotate(52deg);
}

.login-boton:focus-visible {
    outline: 3px solid var(--azul-acento);
    outline-offset: 2px;
}

.login-boton[disabled] {
    opacity: .7;
    cursor: not-allowed;
}

.login-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgb(255 255 255 / 35%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-girar .7s linear infinite;
}

@keyframes login-girar {
    to { transform: rotate(360deg); }
}

/* Quien tenga configurado "reducir animaciones" en su sistema no ve el giro. */
@media (prefers-reduced-motion: reduce) {
    .login-spinner { animation: none; }
    .login-boton { transition: none; }
    .login-candado-arco { transition: none; }
}

/* ---------- Pie de página ---------- */

.login-footer {
    background: var(--pie-fondo);
    padding: 20px 32px;
    font-size: 14px;
}

.login-footer-contenido {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: var(--gris-texto);
}

.login-footer-marca {
    font-weight: 700;
    color: var(--azul-texto);
}

/* ---------- Pantallas de poca altura ---------- */

/* Laptops de 1366x768, o monitores con el escalado de Windows al 125%: ahí el alto
   disponible se queda corto. Se encoge SOLO lo decorativo (el logo y la rayita); el
   texto y los campos se quedan del mismo tamaño para no perder legibilidad. */
@media (max-height: 680px) {
    .login-logo { max-width: 220px; }
    .login-separador { display: none; }
    .login-subtitulo { margin-bottom: 4px; }
}

/* Pantallas muy bajas (por ejemplo un laptop de 1366x768 con el escalado de Windows
   al 125%, que deja apenas ~615px útiles). Se encoge el logo, nunca el texto. */
@media (max-height: 680px) {
    .login-main { padding: 12px 24px; }
    .login-logo { width: 270px; }
    .login-logo-caja { height: 108px; margin-bottom: 6px; }
}

/* ---------- Pantallas chicas ---------- */

@media (max-width: 540px) {
    .login-main { padding: 20px 16px; }
    .login-card { border-radius: 18px; }
    .login-footer { padding: 16px; }
    .login-footer-contenido { justify-content: center; text-align: center; gap: 4px; }
}