/**
 * Terxo Mobile — encabezado móvil unificado (título + lupa + búsqueda colapsada)
 * Debe cargarse DESPUÉS de neo-catalog / index-neo para ganar a estilos inline legacy.
 */

@media (max-width: 760px) {
    .menu-superior .search-form {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        gap: 0 !important;
    }

    .menu-superior .search-form:not(.expanded) input[type="search"] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        clip: rect(0, 0, 0, 0) !important;
        overflow: hidden !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .menu-superior .search-container {
        position: fixed !important;
        top: var(--mobile-header-top) !important;
        right: calc(var(--mobile-edge) + var(--mobile-btn) + var(--mobile-btn-gap)) !important;
        left: auto !important;
        z-index: 1003 !important;
        width: var(--mobile-btn) !important;
        height: var(--mobile-btn) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .menu-superior .search-container:has(.search-form.expanded),
    .menu-superior .search-container.search-active {
        left: calc(var(--mobile-edge-left) + 40px + 12px) !important;
        right: calc(var(--mobile-edge) + var(--mobile-btn) + var(--mobile-btn-gap)) !important;
        width: auto !important;
        height: var(--mobile-btn) !important;
    }

    .menu-superior .search-form.expanded {
        flex: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .menu-superior .search-form.expanded input[type="search"] {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        border: var(--neo-border, 3px solid #0a0a0a) !important;
        box-shadow: var(--neo-shadow-sm, 4px 4px 0 #0a0a0a) !important;
        background: var(--neo-surface, #fff) !important;
        color: var(--neo-ink, #0a0a0a) !important;
        font-size: 16px !important;
        clip: auto !important;
        overflow: visible !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        flex: 1 !important;
    }

    .menu-superior .search-form.expanded input[type="search"]::placeholder {
        color: rgba(10, 10, 10, 0.45) !important;
    }

    .menu-superior .search-mobile-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        border: var(--neo-border, 3px solid #0a0a0a) !important;
        background: var(--neo-surface, #fff) !important;
        box-shadow: var(--neo-shadow-sm, 4px 4px 0 #0a0a0a) !important;
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        cursor: pointer !important;
        padding: 0 !important;
        color: var(--neo-ink, #0a0a0a) !important;
        font-family: var(--font-display, 'Syne', sans-serif) !important;
        flex-shrink: 0 !important;
    }

    .menu-superior .search-mobile-trigger span {
        display: block !important;
        line-height: 1 !important;
        font-size: 1.35rem !important;
        transform: translateY(-1px);
    }

    .menu-superior .search-form.expanded .search-mobile-trigger {
        display: none !important;
    }

    .menu-superior:not(.search-panel-open) .titulo-menu {
        font-family: var(--font-display, 'Syne', sans-serif) !important;
        font-size: clamp(0.7rem, 3.6vw, 0.95rem) !important;
        font-weight: 800 !important;
        letter-spacing: -0.03em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        color: var(--neo-ink, #0a0a0a) !important;
        background: none !important;
        -webkit-background-clip: border-box !important;
        background-clip: border-box !important;
        -webkit-text-fill-color: var(--neo-ink, #0a0a0a) !important;
        margin-left: 4px !important;
        line-height: 1 !important;
        max-width: none !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        opacity: 1 !important;
        padding-right: calc(var(--mobile-edge) + (var(--mobile-btn) * 2) + var(--mobile-btn-gap) + 10px) !important;
        pointer-events: auto !important;
    }

    .menu-superior.search-panel-open .titulo-menu {
        opacity: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        flex: 0 0 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 600px) {
    .menu-superior:not(.search-panel-open) .titulo-menu {
        font-size: clamp(0.65rem, 3.2vw, 0.85rem) !important;
        padding-right: calc(var(--mobile-edge) + (var(--mobile-btn) * 2) + var(--mobile-btn-gap) + 10px) !important;
    }

    .menu-superior .search-container:has(.search-form.expanded),
    .menu-superior .search-container.search-active {
        left: calc(var(--mobile-edge-left) + 40px + 10px) !important;
    }
}
