/* =========================================
   8. Ajustes de Formulario para Celulares
   ========================================= */
@media (max-width: 768px) {

    .contenedor-principal {
        padding: 15px !important; 
    }
    .form-container {
        padding: 30px 20px; 
        border-radius: 16px; /* Mantenemos las esquinas suaves */
        box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra más sutil en celular */
    }

    /* 3. Ajuste estético del título en celular */
    .form-container h1 {
        font-size: 1.5rem; /* Un poco más pequeño para que no robe tanto espacio */
        margin-bottom: 25px;
        padding-bottom: 12px;
    }
    .pie-pagina {
        margin-top: 0px;
    }
    .alerta-credencial {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px;
        gap: 10px;
    }
}