/* =====================================================
   INGRESAR · CRISTAL MUNICIPAL
   Solo afecta la pantalla de inicio de sesión
   ===================================================== */

/* Encabezado superior */
html body:has(main.login) .topbar {
    background: rgba(255,255,255,.72) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255,255,255,.35) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html body:has(main.login) .topbar .brand,
html body:has(main.login) .topbar .links a {
    color: #10244d !important;
}

/* Tarjeta principal del formulario */
html body main.login.card {
    background: rgba(255,255,255,.65) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    border-top: 4px solid #ffe000 !important;
    border-radius: 22px !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow: 0 16px 45px rgba(0,15,65,.16) !important;
}

/* Títulos y descripción */
html body main.login h1 {
    color: #10244d !important;
}

html body main.login .eyebrow {
    color: #0001c5 !important;
    font-weight: 850;
}

html body main.login .muted {
    color: #344b70 !important;
}

/* Etiquetas Usuario y Contraseña */
html body main.login .field {
    color: #10244d !important;
    font-weight: 750;
}

/* Campos claros para mantener buena legibilidad */
html body main.login .field input {
    background: rgba(255,255,255,.92) !important;
    color: #10244d !important;
    border: 1px solid rgba(16,36,77,.22) !important;
    border-radius: 10px !important;
}

/* Enfoque del campo */
html body main.login .field input:focus {
    border-color: #0001c5 !important;
    outline: 2px solid rgba(0,1,197,.18);
    outline-offset: 1px;
}

/* Botón de acceso */
html body main.login .form-actions button {
    background: #0001c5 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-weight: 800;
}

html body main.login .form-actions button:hover:not(:disabled) {
    background: #142c85 !important;
}

/* Errores de inicio de sesión */
html body main.login .error {
    color: #9c2638 !important;
    font-weight: 700;
}

/* Adaptación para teléfonos */
@media (max-width: 520px) {
    html body main.login.card {
        margin: 24px 16px;
        padding: 24px 20px;
        border-radius: 18px !important;
    }

    html body main.login h1 {
        font-size: 29px;
    }
}