/* Estilos para mejorar la visualización en dispositivos móviles */

/* Ajuste general de elementos */
@media (max-width: 767px) {
    /* Reducir los márgenes y el padding para aprovechar mejor el espacio */
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .card {
        margin-bottom: 10px;
    }
    
    /* Mejorar la visualización de los formularios */
    .form-group {
        margin-bottom: 0.5rem;
    }
    
    /* Reducir tamaños de texto para que quepa mejor */
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    /* Hacer que los botones sean más fáciles de tocar */
    .btn {
        padding: 0.375rem 0.5rem;
        margin-bottom: 5px;
    }
    
    /* Mejorar la navegación */
    .navbar {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
    
    .navbar-brand {
        font-size: 1rem !important;
        margin-right: 5px;
    }
    
    /* Selector de pestañas móvil */
    .mobile-tab-select {
        margin-bottom: 10px;
        border: 2px solid #007bff;
        border-radius: 4px;
    }
}

/* Adaptación para pantallas muy pequeñas */
@media (max-width: 375px) {
    body {
        font-size: 0.9rem;
    }
    
    .navbar-brand {
        font-size: 0.9rem !important;
    }
}