/* ===== OPTIMIZACIÓN ESPECÍFICA DEL HEADER PARA MÓVILES ===== */

/* Header optimizado para móviles - FORZAR LAYOUT HORIZONTAL */
@media (max-width: 768px) {
    header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.8rem !important;
        padding: 0.8rem 0.6rem !important;
        flex-wrap: nowrap !important;
        min-height: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Título optimizado - FORZAR CENTRO Y AMPLIO */
    h1 {
        font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
        flex: 1 !important;
        text-align: center !important;
        margin: 0 0.5rem !important;
        order: 1 !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        line-height: 1.1 !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        font-weight: 600 !important;
        display: block !important;
        position: relative !important;
    }

    /* Logos contenedores - FORZAR POSICIÓN EN EXTREMOS */
    .logo {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
    }

    .logo:first-child {
        order: 0 !important;
        margin-right: 0 !important;
    }

    .logo:last-child {
        order: 2 !important;
        margin-left: 0 !important;
    }

    /* Escudos optimizados - FORZAR TAMAÑO Y POSICIÓN */
    .escudo {
        width: clamp(44px, 12vw, 50px) !important;
        height: clamp(44px, 12vw, 50px) !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
        transition: all 0.3s ease !important;
        display: block !important;
        position: relative !important;
    }

    .escudo-dud {
        order: 0 !important;
    }

    .escudo-daip {
        order: 2 !important;
    }
}

/* Móvil pequeño - LAYOUT MÁS COMPACTO */
@media (max-width: 480px) {
    header {
        gap: 0.5rem !important;
        padding: 0.7rem 0.4rem !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    h1 {
        font-size: clamp(1.1rem, 3.5vw, 1.4rem) !important;
        margin: 0 0.3rem !important;
        line-height: 1.1 !important;
        flex: 1 !important;
        order: 1 !important;
    }

    .escudo {
        width: clamp(42px, 11vw, 48px) !important;
        height: clamp(42px, 11vw, 48px) !important;
    }

    .logo:first-child {
        order: 0 !important;
        flex-shrink: 0 !important;
    }

    .logo:last-child {
        order: 2 !important;
        flex-shrink: 0 !important;
    }
}

/* Móvil muy pequeño - LAYOUT MÍNIMO */
@media (max-width: 360px) {
    header {
        gap: 0.4rem !important;
        padding: 0.6rem 0.3rem !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    h1 {
        font-size: clamp(1rem, 3vw, 1.2rem) !important;
        margin: 0 0.2rem !important;
        line-height: 1.1 !important;
        flex: 1 !important;
        order: 1 !important;
    }

    .escudo {
        width: clamp(40px, 10vw, 45px) !important;
        height: clamp(40px, 10vw, 45px) !important;
    }
}

/* Orientación vertical específica - FORZAR LAYOUT HORIZONTAL */
@media (max-width: 480px) and (orientation: portrait) {
    header {
        gap: 0.4rem !important;
        padding: 0.6rem 0.3rem !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    h1 {
        font-size: clamp(1.1rem, 3.2vw, 1.3rem) !important;
        margin: 0 0.25rem !important;
        line-height: 1.1 !important;
        flex: 1 !important;
        order: 1 !important;
    }

    .escudo {
        width: clamp(43px, 10.5vw, 46px) !important;
        height: clamp(43px, 10.5vw, 46px) !important;
    }
}

@media (max-width: 360px) and (orientation: portrait) {
    header {
        gap: 0.3rem !important;
        padding: 0.5rem 0.25rem !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    h1 {
        font-size: clamp(0.95rem, 2.8vw, 1.1rem) !important;
        margin: 0 0.15rem !important;
        line-height: 1.1 !important;
        flex: 1 !important;
        order: 1 !important;
    }

    .escudo {
        width: clamp(41px, 9.5vw, 44px) !important;
        height: clamp(41px, 9.5vw, 44px) !important;
    }
}

/* Asegurar que el layout sea consistente - FORZAR HORIZONTAL */
@media (max-width: 768px) {
    header * {
        box-sizing: border-box !important;
    }

    /* FORZAR layout horizontal */
    header {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        display: flex !important;
    }

    /* Título siempre en el centro */
    h1 {
        order: 1 !important;
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
        display: block !important;
    }

    /* Logos siempre en los extremos */
    .logo:first-child {
        order: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
    }

    .logo:last-child {
        order: 2 !important;
        flex-shrink: 0 !important;
        display: flex !important;
    }
}

/* Optimización para pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .escudo {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* Asegurar que los estilos se apliquen con prioridad - RESET COMPLETO */
@media (max-width: 768px) {
    header,
    header h1,
    header .logo,
    header .escudo {
        all: unset !important;
        display: flex !important;
        align-items: center !important;
    }

    header {
        background: rgba(255, 255, 255, 0.85) !important;
        padding: 0.8rem 0.6rem !important;
        position: sticky !important;
        top: 0 !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15) !important;
        gap: 0.8rem !important;
        z-index: 100 !important;
        backdrop-filter: blur(8px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        min-height: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    h1 {
        font-family: 'Designer', sans-serif !important;
        font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
        color: #333 !important;
        text-align: center !important;
        flex: 1 !important;
        margin: 0 0.5rem !important;
        order: 1 !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        line-height: 1.1 !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        font-weight: 600 !important;
        display: block !important;
    }

    .logo {
        flex-shrink: 0 !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
    }

    .logo:first-child {
        order: 0 !important;
        flex-shrink: 0 !important;
    }

    .logo:last-child {
        order: 2 !important;
        flex-shrink: 0 !important;
    }

    .escudo {
        width: clamp(44px, 12vw, 50px) !important;
        height: clamp(44px, 12vw, 50px) !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
        transition: all 0.3s ease !important;
        display: block !important;
    }
}

/* FORZAR LAYOUT HORIZONTAL EN TODOS LOS MÓVILES */
@media (max-width: 768px) {
    header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    h1 {
        order: 1 !important;
        flex: 1 !important;
    }
    
    .logo:first-child {
        order: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .logo:last-child {
        order: 2 !important;
        flex-shrink: 0 !important;
    }
}