/* --- ADAPTACIÓN PARA DISPOSITIVOS MÓVILES (moviles1.css) --- */

@media screen and (max-width: 768px) {
    /* Ajustes generales de cuerpo */
    body, html {
        overflow-y: auto; /* Permitir scroll si el contenido es alto */
    }

    /* Barra de navegación responsiva */
    .navbar {
        padding: 10px 20px;
        flex-direction: column;
        gap: 10px;
        height: auto;
        position: relative; /* Evita que tape el formulario en pantallas muy pequeñas */
    }

    .brand-container {
        justify-content: center;
        width: 100%;
    }

    .brand {
        font-size: 1.2rem;
    }

    .nav-buttons {
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 5px;
    }

    .nav-btn {
        padding: 6px 15px;
        font-size: 0.8rem;
        margin: 0;
        flex: 1; /* Botones del mismo tamaño */
        text-align: center;
    }

    /* Ajuste del carrusel para móviles */
    .carousel-slide {
        background-attachment: scroll; /* Mejor rendimiento en móviles */
    }

    /* Contenedor principal y Formulario */
    .main-container {
        height: auto;
        min-height: calc(100vh - 100px);
        padding: 20px 0;
        align-items: flex-start; /* Empieza desde arriba para evitar recortes */
    }

    .form-box {
        width: 95%;
        padding: 25px 20px;
        margin: 0 auto;
        border-radius: 8px;
    }

    h2 {
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    .input-group label {
        font-size: 0.75rem;
    }

    .input-group input {
        padding: 10px;
        font-size: 16px; /* Evita el zoom automático en iOS al enfocar */
    }

    .btn-submit {
        padding: 12px;
        font-size: 1rem;
    }

    /* Ajustes para el menú de perfil en móviles */
    .p-drop {
        width: 90%;
        right: 5%;
        left: 5%;
        top: 60px;
    }

    .avatar-container {
        width: 80px;
        height: 80px;
    }
}

/* Ajustes para pantallas muy pequeñas (relojes o móviles antiguos) */
@media screen and (max-width: 380px) {
    .brand {
        font-size: 1rem;
    }
    
    .form-box {
        padding: 15px;
    }
}