/* ============================================================
   VnY SITE HEADER — rediseño del header público.
   Sobrescribe styles.css aplicando solo al frontend (no admin).
   Layout desktop: 1 fila compacta. Layout mobile: hamburger drawer.
   ============================================================ */

/* ============================================================
   RESET del header anterior (anula reglas de styles.css)
   ============================================================ */
body:not(.admin-body) header.main-header {
    background: rgba(6, 7, 13, 0.85) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    border-bottom: 1px solid var(--site-border) !important;
    padding: 12px 24px !important;
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    grid-template-rows: none !important;
    gap: 18px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: var(--site-header-h);
    box-sizing: border-box;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    z-index: var(--z-header);
    transition: padding var(--dur-base) var(--ease);
}

/* Header compacto al hacer scroll - aún más slim */
body:not(.admin-body) header.main-header.scrolled {
    padding: 6px 24px !important;
    min-height: 56px;
    background: rgba(6, 7, 13, 0.95) !important;
}

/* ============================================================
   LOGO
   ============================================================ */
body:not(.admin-body) header.main-header .logo {
    flex: 0 0 auto !important;
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-area: auto !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
}
body:not(.admin-body) header.main-header .logo a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none;
}
body:not(.admin-body) header.main-header .site-logo {
    height: 56px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    transition: height var(--dur-base) var(--ease);
}
body:not(.admin-body) header.main-header.scrolled .site-logo {
    height: 30px !important;
}

/* ============================================================
   NAV (desktop)
   ============================================================ */
body:not(.admin-body) header.main-header .main-nav {
    flex: 1 1 auto !important;
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position: static !important;
    grid-area: auto !important;
}
body:not(.admin-body) header.main-header .main-nav ul {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    align-items: center !important;
}
body:not(.admin-body) header.main-header .main-nav ul li {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
    text-align: left !important;
}
body:not(.admin-body) header.main-header .main-nav ul a,
body:not(.admin-body) header.main-header.scrolled .main-nav ul a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    color: var(--site-text-2) !important;
    text-decoration: none !important;
    font-family: var(--font-body) !important;
    font-size: 12.5px !important;
    font-weight: var(--fw-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid transparent !important;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1 !important;
    height: auto !important;
    min-width: 0 !important;
    width: auto !important;
}
body:not(.admin-body) header.main-header .main-nav ul a:hover {
    color: var(--site-accent) !important;
    background: var(--site-accent-soft) !important;
    border-color: var(--site-accent-mid) !important;
}
body:not(.admin-body) header.main-header .main-nav ul a i {
    font-size: 11px !important;
    opacity: .85;
}

/* ============================================================
   SEARCH BOX (desktop)
   ============================================================ */
body:not(.admin-body) header.main-header .search-box {
    flex: 0 0 260px !important;
    order: 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    grid-area: auto !important;
    width: 260px !important;
    max-width: 260px !important;
    position: relative !important;
}
body:not(.admin-body) header.main-header.scrolled .search-box {
    flex-basis: 220px !important;
    width: 220px !important;
}
body:not(.admin-body) header.main-header .search-box form {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    position: relative !important;
    width: 100% !important;
}
body:not(.admin-body) header.main-header .search-box input,
body:not(.admin-body) header.main-header.scrolled .search-box input {
    width: 100% !important;
    height: 36px !important;
    padding: 0 38px 0 14px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--site-border) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    color: var(--site-text) !important;
    font-size: 13px !important;
    font-family: var(--font-body) !important;
    outline: none !important;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease) !important;
    box-shadow: none !important;
}
body:not(.admin-body) header.main-header .search-box input:focus {
    border-color: var(--site-accent) !important;
    box-shadow: 0 0 0 2px var(--site-accent-soft) !important;
}
body:not(.admin-body) header.main-header .search-box input::placeholder {
    color: var(--site-text-faded) !important;
}
body:not(.admin-body) header.main-header .search-box .search-submit {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--site-text-muted) !important;
    cursor: pointer !important;
    border-radius: var(--radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
}
body:not(.admin-body) header.main-header .search-box .search-submit:hover {
    color: var(--site-accent) !important;
    background: var(--site-accent-soft) !important;
}

/* Search dropdown de resultados */
body:not(.admin-body) #search-results.search-results-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #060709 !important;
    border: 1px solid var(--site-border-2) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    z-index: 200 !important;
    padding: 6px !important;
}
body:not(.admin-body) #search-results.search-results-dropdown .search-result-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    color: var(--site-text) !important;
    transition: background var(--dur-fast) var(--ease);
}
body:not(.admin-body) #search-results.search-results-dropdown .search-result-item:hover,
body:not(.admin-body) #search-results.search-results-dropdown .search-result-item:focus {
    background: var(--site-accent-soft) !important;
    outline: none !important;
}
body:not(.admin-body) #search-results.search-results-dropdown .search-result-thumb {
    width: 36px !important; height: 36px !important;
    border-radius: var(--radius-sm) !important;
    object-fit: cover !important;
    border: 1px solid var(--site-border) !important;
    flex-shrink: 0 !important;
}
body:not(.admin-body) #search-results.search-results-dropdown .search-result-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
body:not(.admin-body) #search-results.search-results-dropdown .search-result-name {
    font-size: 13px !important;
    font-weight: var(--fw-bold) !important;
    color: var(--site-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body:not(.admin-body) #search-results.search-results-dropdown .search-result-type {
    font-size: 10.5px !important;
    color: var(--site-accent) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-weight: var(--fw-bold) !important;
}
body:not(.admin-body) #search-results.search-results-dropdown .no-results {
    padding: 24px 12px !important;
    text-align: center !important;
    color: var(--site-text-muted) !important;
    font-size: 13px !important;
}

/* ============================================================
   SOCIAL BAR (desktop)
   ============================================================ */
body:not(.admin-body) header.main-header .social-bar,
body:not(.admin-body) header.main-header.scrolled .social-bar {
    display: flex !important;
    flex: 0 0 auto !important;
    order: 4 !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    grid-area: auto !important;
    height: auto !important;
}
body:not(.admin-body) header.main-header .social-bar a,
body:not(.admin-body) header.main-header.scrolled .social-bar a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--radius-sm) !important;
    color: var(--site-text-muted) !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
    font-size: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
body:not(.admin-body) header.main-header .social-bar a:hover {
    background: var(--site-surface-2) !important;
    color: var(--site-accent) !important;
}

/* ============================================================
   LOGIN BUTTON / USER NAME LINK
   ============================================================ */
body:not(.admin-body) header.main-header .header-right {
    flex: 0 0 auto !important;
    order: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    grid-area: auto !important;
}
body:not(.admin-body) header.main-header .login-btn,
body:not(.admin-body) header.main-header.scrolled .login-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 36px !important;
    padding: 0 16px !important;
    background: var(--site-accent) !important;
    color: var(--site-accent-text) !important;
    border: 1px solid var(--site-accent) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: var(--fw-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    text-decoration: none !important;
    transition: filter var(--dur-fast) var(--ease);
    box-shadow: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}
body:not(.admin-body) header.main-header .login-btn:hover {
    filter: brightness(1.12);
}
body:not(.admin-body) header.main-header .user-name-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 36px !important;
    padding: 0 14px !important;
    background: var(--site-surface) !important;
    color: var(--site-text) !important;
    border: 1px solid var(--site-border-2) !important;
    border-radius: var(--radius-md) !important;
    font-size: 12.5px !important;
    font-weight: var(--fw-bold) !important;
    text-decoration: none !important;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
body:not(.admin-body) header.main-header .user-name-link:hover {
    background: var(--site-surface-2) !important;
    border-color: var(--site-accent-mid) !important;
}
body:not(.admin-body) header.main-header .user-name-link i { color: var(--site-accent); }
body:not(.admin-body) header.main-header .user-name-link .username-text {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botones toggle mobile (ocultos en desktop) */
body:not(.admin-body) header.main-header .mobile-menu-toggle,
body:not(.admin-body) header.main-header .mobile-search-toggle {
    display: none !important;
}


/* ============================================================
   MOBILE (<= 1024px) - reorganización
   ============================================================ */
@media (max-width: 1024px) {
    body:not(.admin-body) header.main-header {
        padding: 8px 14px !important;
        min-height: var(--site-header-h-mobile);
        gap: 8px !important;
    }
    body:not(.admin-body) header.main-header.scrolled {
        padding: 6px 14px !important;
    }
    body:not(.admin-body) header.main-header .site-logo {
        height: 44px !important;
    }
    body:not(.admin-body) header.main-header.scrolled .site-logo {
        height: 28px !important;
    }

    /* Mostrar toggles */
    body:not(.admin-body) header.main-header .mobile-menu-toggle {
        display: inline-flex !important;
        order: 0 !important;
        width: 38px;
        height: 38px;
        background: rgba(var(--site-accent-rgb),.08) !important;
        border: 1px solid var(--site-accent-mid) !important;
        color: var(--site-accent) !important;
        border-radius: var(--radius-md);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 15px;
        flex-shrink: 0;
        margin: 0 !important;
        padding: 0 !important;
    }
    body:not(.admin-body) header.main-header .mobile-search-toggle {
        display: inline-flex !important;
        order: 4 !important;
        width: 38px;
        height: 38px;
        background: transparent !important;
        border: 1px solid var(--site-border-2) !important;
        color: var(--site-text-2) !important;
        border-radius: var(--radius-md);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 13px;
        flex-shrink: 0;
        margin: 0 !important;
        padding: 0 !important;
    }
    body:not(.admin-body) header.main-header .mobile-menu-toggle:hover {
        background: rgba(var(--site-accent-rgb),.18) !important;
    }
    body:not(.admin-body) header.main-header .mobile-search-toggle:hover {
        background: var(--site-surface-2) !important;
        color: var(--site-accent) !important;
        border-color: var(--site-accent-mid) !important;
    }

    /* Logo al centro/izquierda */
    body:not(.admin-body) header.main-header .logo {
        flex: 1 1 auto !important;
        order: 1 !important;
        justify-content: flex-start !important;
    }

    /* Header-right: solo login (la búsqueda toggle ya está aparte) */
    body:not(.admin-body) header.main-header .header-right {
        order: 5 !important;
        gap: 6px !important;
    }

    /* Login en mobile más compacto */
    body:not(.admin-body) header.main-header .login-btn {
        height: 38px !important;
        padding: 0 12px !important;
        font-size: 11.5px !important;
    }
    body:not(.admin-body) header.main-header .login-btn span {
        display: inline-block;
    }

    /* User-name-link en mobile: botón circular icon-only con icono centrado */
    body:not(.admin-body) header.main-header .user-name-link {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    body:not(.admin-body) header.main-header .user-name-link .username-text {
        display: none !important;
    }
    body:not(.admin-body) header.main-header .user-name-link i {
        font-size: 18px !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* DRAWER del menú nav - bg sólido + sin backdrop blur (texto crispy) */
    body:not(.admin-body) header.main-header .main-nav {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 280px !important;
        max-width: 80vw !important;
        height: 100vh !important;
        background: #060709 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-right: 1px solid var(--site-border-2) !important;
        box-shadow: 14px 0 40px rgba(0,0,0,.5);
        margin: 0 !important;
        padding: 70px 0 24px !important;
        z-index: 1100 !important;
        overflow-y: auto;
        transition: left var(--dur-base) var(--ease) !important;
        display: block !important;
        order: unset !important;
        flex: none !important;
        /* Forzar layer GPU + anti-blur del texto en mobile */
        transform: translateZ(0);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    body:not(.admin-body) header.main-header .main-nav.active {
        left: 0 !important;
    }
    /* Mismo tratamiento al search overlay */
    body:not(.admin-body) header.main-header .search-box {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    body:not(.admin-body) header.main-header .main-nav.active {
        left: 0 !important;
    }
    body:not(.admin-body) header.main-header .main-nav ul {
        flex-direction: column !important;
        gap: 2px !important;
        padding: 0 14px !important;
        align-items: stretch !important;
    }
    body:not(.admin-body) header.main-header .main-nav ul a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        font-size: 13.5px !important;
        border-radius: var(--radius-md) !important;
        text-align: left;
        width: 100% !important;
        box-sizing: border-box;
    }
    body:not(.admin-body) header.main-header .main-nav ul a i {
        font-size: 14px !important;
        width: 18px;
        text-align: center;
    }

    /* Social bar dentro del drawer (al final) */
    body:not(.admin-body) header.main-header .social-bar {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 280px !important;
        max-width: 80vw !important;
        margin: 0 !important;
        padding: 0 24px !important;
        z-index: 1101 !important;
        transition: left var(--dur-base) var(--ease) !important;
        gap: 8px !important;
        background: transparent !important;
        height: auto !important;
        bottom: 24px !important;
        top: auto !important;
        justify-content: center !important;
    }
    body:not(.admin-body) header.main-header .social-bar.active {
        left: 0 !important;
    }
    body:not(.admin-body) header.main-header .social-bar a {
        width: 40px !important;
        height: 40px !important;
        background: var(--site-surface) !important;
        border: 1px solid var(--site-border) !important;
        font-size: 14px !important;
    }

    /* Search box dentro de overlay cuando .active - SIN backdrop-filter (causa blur de texto en mobile) */
    body:not(.admin-body) header.main-header .search-box {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 12px 14px !important;
        background: #060709 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 1200 !important;
        transform: translateY(-100%) !important;
        transition: transform var(--dur-base) var(--ease) !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--site-border-2) !important;
        box-shadow: var(--shadow-lg) !important;
        display: block !important;
        flex: none !important;
        opacity: 1 !important;
    }
    body:not(.admin-body) header.main-header .search-box.active {
        transform: translateY(0) !important;
    }
    body:not(.admin-body) header.main-header .search-box input {
        height: 44px !important;
        font-size: 15px !important;
        padding: 0 44px 0 18px !important;
    }
    body:not(.admin-body) header.main-header .search-box .search-submit {
        width: 36px !important;
        height: 36px !important;
        right: 18px !important;
    }
    body:not(.admin-body) #search-results.search-results-dropdown {
        max-height: calc(100vh - 80px) !important;
        top: calc(100% + 4px) !important;
        left: 14px !important;
        right: 14px !important;
        border-radius: var(--radius-md) !important;
    }
}


/* ============================================================
   SIDEBAR OVERLAY (drawer backdrop)
   ============================================================ */
.site-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    /* Sin backdrop-filter: hace que el contenido de drawers/search se vea borroso en mobile */
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease);
}
.site-drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}


/* ============================================================
   FOOTER REDISEÑADO
   ============================================================ */
body:not(.admin-body) .main-footer {
    background: var(--site-bg-2) !important;
    border-top: 1px solid var(--site-border);
    padding: 0 !important;
    margin-top: var(--space-2xl);
    color: var(--site-text-muted);
}
body:not(.admin-body) .main-footer .site-footer-inner {
    max-width: var(--site-content-max);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-xl);
}
body:not(.admin-body) .main-footer .site-footer-col h4 {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--site-accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 var(--space-md);
    font-weight: var(--fw-bold);
}
body:not(.admin-body) .main-footer .site-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body:not(.admin-body) .main-footer .site-footer-col ul li {
    margin-bottom: var(--space-sm);
}
body:not(.admin-body) .main-footer .site-footer-col a {
    color: var(--site-text-muted);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--dur-fast) var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body:not(.admin-body) .main-footer .site-footer-col a:hover {
    color: var(--site-accent);
}
body:not(.admin-body) .main-footer .site-footer-col a i {
    width: 14px;
    font-size: 11px;
    opacity: .8;
}
body:not(.admin-body) .main-footer .site-footer-brand p {
    margin: 0 0 var(--space-md);
    font-size: 13px;
    line-height: 1.6;
    color: var(--site-text-muted);
}
body:not(.admin-body) .main-footer .site-footer-brand .site-footer-logo {
    height: 36px;
    margin-bottom: var(--space-md);
    display: block;
}
body:not(.admin-body) .main-footer .site-footer-socials {
    display: flex;
    gap: var(--space-sm);
}
body:not(.admin-body) .main-footer .site-footer-socials a {
    width: 34px; height: 34px;
    border-radius: var(--radius-md);
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--site-text-muted);
    font-size: 14px;
    transition: all var(--dur-fast) var(--ease);
}
body:not(.admin-body) .main-footer .site-footer-socials a:hover {
    background: var(--site-accent-soft);
    border-color: var(--site-accent-mid);
    color: var(--site-accent);
}
body:not(.admin-body) .main-footer .site-footer-bottom {
    border-top: 1px solid var(--site-border);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    font-size: 12px;
    color: var(--site-text-faded);
}
body:not(.admin-body) .main-footer .site-footer-bottom p { margin: 0; }
body:not(.admin-body) .main-footer .site-footer-bottom .site-accent { color: var(--site-accent); }

@media (max-width: 768px) {
    body:not(.admin-body) .main-footer .site-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
        padding: var(--space-lg);
    }
    body:not(.admin-body) .main-footer .site-footer-brand {
        grid-column: 1 / -1;
    }
}
@media (max-width: 480px) {
    /* Mantener 2 cols para Navegación + Comunidad; brand ocupa fila completa arriba */
    body:not(.admin-body) .main-footer .site-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
        padding: var(--space-md);
    }
    body:not(.admin-body) .main-footer .site-footer-brand {
        grid-column: 1 / -1;
    }
    body:not(.admin-body) .main-footer .site-footer-col h4 {
        font-size: 11px;
        letter-spacing: 1.2px;
        margin-bottom: var(--space-sm);
    }
    body:not(.admin-body) .main-footer .site-footer-col a { font-size: 12.5px; }
}

/* ============================================================
   FIX - mejorar legibilidad de menu mobile y foco visible
   ============================================================ */
@media (max-width: 1024px) {
    /* Links del drawer: blanco pleno + tamaño leíble */
    body:not(.admin-body) header.main-header .main-nav ul a {
        color: #fff !important;
        font-size: 14px !important;
        font-weight: var(--fw-bold) !important;
        opacity: 1 !important;
    }
    body:not(.admin-body) header.main-header .main-nav ul a i {
        color: var(--site-accent) !important;
        opacity: 1 !important;
        font-size: 14px !important;
    }
    body:not(.admin-body) header.main-header .main-nav ul a:hover,
    body:not(.admin-body) header.main-header .main-nav ul a:active,
    body:not(.admin-body) header.main-header .main-nav ul a:focus {
        background: var(--site-accent-soft) !important;
        color: var(--site-accent) !important;
        border-color: var(--site-accent-mid) !important;
        outline: none !important;
    }

    /* Search input - placeholder más claro */
    body:not(.admin-body) header.main-header .search-box input::placeholder {
        color: rgba(255,255,255,.55) !important;
    }
    body:not(.admin-body) header.main-header .search-box input {
        color: #fff !important;
        background: var(--site-surface) !important;
        border: 2px solid var(--site-border-2) !important;
    }
    /* Focus súper visible: borde accent grueso + halo */
    body:not(.admin-body) header.main-header .search-box input:focus,
    body:not(.admin-body) header.main-header .search-box input:focus-visible {
        border-color: var(--site-accent) !important;
        background: rgba(var(--site-accent-rgb),.04) !important;
        box-shadow: 0 0 0 3px var(--site-accent-soft), 0 0 20px rgba(var(--site-accent-rgb),.18) !important;
        outline: none !important;
    }
    /* Lupa con color accent cuando el input tiene focus */
    body:not(.admin-body) header.main-header .search-box:focus-within .search-submit {
        color: var(--site-accent) !important;
    }
}

/* ============================================================
   FIX v2 - mejorar contraste del drawer mobile y del search
   ============================================================ */
@media (max-width: 1024px) {
    /* DRAWER: bg ligeramente más claro + borde accent izquierdo
       para diferenciar del fondo body (#000) */
    body:not(.admin-body) header.main-header .main-nav {
        background: #0d0e14 !important;
        border-left: 3px solid var(--site-accent) !important;
        border-right: 1px solid var(--site-border-2) !important;
        box-shadow: 16px 0 50px rgba(0,0,0,.7) !important;
    }

    /* Ocultar social bar dentro del drawer - ya está en el footer */
    body:not(.admin-body) header.main-header .social-bar {
        display: none !important;
    }

    /* Items del nav con divisor sutil + mejor padding táctil */
    body:not(.admin-body) header.main-header .main-nav ul {
        padding: 0 12px !important;
    }
    body:not(.admin-body) header.main-header .main-nav ul li {
        border-bottom: 1px solid rgba(255,255,255,.04) !important;
    }
    body:not(.admin-body) header.main-header .main-nav ul li:last-child {
        border-bottom: none !important;
    }
    body:not(.admin-body) header.main-header .main-nav ul a {
        padding: 14px 14px !important;
        border-radius: 0 !important;
        border: none !important;
    }
    body:not(.admin-body) header.main-header .main-nav ul a:hover,
    body:not(.admin-body) header.main-header .main-nav ul a:active {
        background: var(--site-accent-soft) !important;
        border: none !important;
        border-radius: var(--radius-md) !important;
    }

    /* SEARCH overlay: borde inferior accent, fondo más claro */
    body:not(.admin-body) header.main-header .search-box {
        background: #0d0e14 !important;
        border-bottom: 2px solid var(--site-accent) !important;
        padding: 16px 14px !important;
    }
    /* Input siempre con tinte accent (incluso sin focus) para
       que se note que es el control activo */
    body:not(.admin-body) header.main-header .search-box input {
        background: rgba(var(--site-accent-rgb),.06) !important;
        border: 2px solid var(--site-accent-mid) !important;
        color: #fff !important;
        font-size: 16px !important;
        height: 46px !important;
        font-weight: var(--fw-bold) !important;
        letter-spacing: .3px;
    }
    body:not(.admin-body) header.main-header .search-box input::placeholder {
        color: rgba(255,255,255,.5) !important;
        font-weight: 500;
    }
    /* Focus súper destacado */
    body:not(.admin-body) header.main-header .search-box input:focus {
        border-color: var(--site-accent) !important;
        background: rgba(var(--site-accent-rgb),.1) !important;
        box-shadow: 0 0 0 4px var(--site-accent-soft),
                    0 0 24px rgba(var(--site-accent-rgb),.25) !important;
    }
    /* Lupa siempre visible en accent */
    body:not(.admin-body) header.main-header .search-box .search-submit {
        color: var(--site-accent) !important;
        background: rgba(var(--site-accent-rgb),.1) !important;
        width: 38px !important;
        height: 38px !important;
    }
}

/* Overlay: tinte muy ligero accent para que se distinga del bg negro */
.site-drawer-overlay {
    background: rgba(6, 12, 18, 0.82) !important;
}

/* ============================================================
   FIX v3 - DRAWER & SEARCH negros como la web + bordes finos
   ============================================================ */
@media (max-width: 1024px) {
    /* Drawer: fondo NEGRO como la web, solo borde accent izq diferencia */
    body:not(.admin-body) header.main-header .main-nav,
    body header.main-header .main-nav.active {
        background: #000 !important;
        border-left: 3px solid var(--site-accent) !important;
    }

    body:not(.admin-body) header.main-header .main-nav ul a,
    body header.main-header .main-nav ul a {
        color: #ffffff !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        opacity: 1 !important;
    }
    body:not(.admin-body) header.main-header .main-nav ul a i,
    body header.main-header .main-nav ul a i {
        color: var(--site-accent) !important;
        font-size: 16px !important;
        width: 22px !important;
        text-align: center !important;
        opacity: 1 !important;
    }
    body:not(.admin-body) header.main-header .main-nav ul li {
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
    }

    /* SEARCH overlay: bg negro + borde inferior accent fino */
    body:not(.admin-body) header.main-header .search-box,
    body header.main-header .search-box.active {
        background: #000 !important;
        border-bottom: 1px solid var(--site-accent) !important;
        padding: 14px 16px !important;
    }
    body:not(.admin-body) header.main-header .search-box input,
    body header.main-header .search-box input {
        background: rgba(255,255,255,.04) !important;
        border: 1px solid var(--site-border-2) !important;
        color: #ffffff !important;
        font-size: 16px !important;
        height: 44px !important;
        font-weight: 500 !important;
        padding: 0 44px 0 16px !important;
        box-shadow: none !important;
    }
    body:not(.admin-body) header.main-header .search-box input::placeholder {
        color: rgba(255,255,255,.5) !important;
        font-weight: 500 !important;
    }
    /* Focus: borde accent fino (1px) + halo sutil */
    body:not(.admin-body) header.main-header .search-box input:focus {
        border-color: var(--site-accent) !important;
        background: rgba(var(--site-accent-rgb),.04) !important;
        box-shadow: 0 0 0 2px var(--site-accent-soft) !important;
        outline: none !important;
    }
}

/* Overlay casi negro pleno para que el drawer se vea claramente */
.site-drawer-overlay {
    background: rgba(0, 0, 0, 0.92) !important;
}

/* ============================================================
   FIX CRITICO - stacking context del header
   El header sticky crea su propio stacking context con z:100,
   asi sus hijos (drawer + search) nunca pueden subir por
   encima del overlay (z:1050) que esta en el body.
   Subimos el header por encima del overlay para que el contenido
   del header (drawer, search, toggles) sea clickable y visible.
   ============================================================ */
body:not(.admin-body) header.main-header {
    z-index: 1100 !important;
}
/* Overlay debe quedarse DEBAJO del header pero sigue cubriendo
   el resto de la página */
.site-drawer-overlay {
    z-index: 1050 !important;
}

/* ============================================================
   Cuando search-box está activo:
   - Ocultar TODO el resto del header (logo, menu, login, search-toggle).
   - El usuario cierra tocando afuera (overlay), ESC o el boton volver.
   ============================================================ */
@media (max-width: 1024px) {
    body:not(.admin-body) header.main-header:has(.search-box.active) .logo,
    body:not(.admin-body) header.main-header:has(.search-box.active) .mobile-menu-toggle,
    body:not(.admin-body) header.main-header:has(.search-box.active) .mobile-search-toggle,
    body:not(.admin-body) header.main-header:has(.search-box.active) .header-right .login-btn,
    body:not(.admin-body) header.main-header:has(.search-box.active) .header-right .user-name-link {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body:not(.admin-body) header.main-header .search-box {
        padding: 12px 16px !important;
        min-height: var(--site-header-h-mobile) !important;
        display: flex !important;
        align-items: center !important;
    }
    body:not(.admin-body) header.main-header .search-box form {
        flex: 1 !important;
        margin: 0 !important;
    }
}