/* 
 * Correcciones específicas para dispositivos móviles 
 * Este archivo contiene correcciones CSS que se aplican solo a dispositivos móviles
 * para garantizar que el layout se vea correctamente en pantallas pequeñas
 */

/* Corregir el logo para que siempre se muestre horizontalmente */
@media (max-width: 767px) {
    /* Corrección general para todos los logos */
    .header-logo,
    .main-header-logo,
    .mobile-header-logo,
    .offcanvas__logo .header-logo,
    .logo .header-logo {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        width: auto !important;
    }
    
    /* Corrección para la imagen del logo */
    .header-logo img,
    .main-logo,
    .mobile-logo {
        display: inline-block !important;
        margin-right: 6px !important;
        flex-shrink: 0 !important;
        max-height: 30px !important;
        width: auto !important;
    }
    
    /* Corrección para el texto del logo */
    .header-logo h2 {
        display: inline-block !important;
        white-space: nowrap !important;
        margin-bottom: 0 !important;
    }
}

/* Correcciones específicas para dispositivos muy pequeños */
@media (max-width: 360px) {
    .header-logo,
    .main-header-logo,
    .mobile-header-logo {
        width: auto !important;
        display: flex !important;
        flex-direction: row !important;
    }
    
    .header-logo img,
    .main-logo,
    .mobile-logo {
        max-width: 20px !important;
        max-height: 20px !important;
    }
    
    .header-logo h2 {
        font-size: 1rem !important;
    }
}