/**
 * TOPBAR — Menú de categorías + buscador (BUILD 2)
 * 
 * Reutiliza el contenedor existente .sticky-navbar-ad-container
 * NO crear un nuevo topbar, usar el existente que está vacío
 * 
 * Diseño: Estilo Infobae
 * - Mobile (normal): toggle menú + lupa
 * - Desktop (normal): menú categorías (80%) + lupa (20%)
 * - Sticky: logo centrado + lupa derecha + toggle izquierda
 * 
 * @package InformeDigital
 */

/* REFACTOR: Top bar vacío, reservado para anuncios */
.sticky-navbar-ad-container {
    position: relative;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

/* Top bar vacío: sin bordes, sin contenido visible */
.informe-topbar.informe-topbar--empty {
    display: none;
}

/* Ocultar toggle/search solo dentro del topbar vacío; mostrar en logo-wrap */
.informe-topbar .informe-topbar__toggle,
.informe-topbar .informe-topbar__search,
.informe-topbar .informe-topbar__search-btn {
    display: none !important;
}

/* Mantener compatibilidad si se muestra contenido en el futuro */
.informe-topbar:not(.informe-topbar--empty) {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
    height: 55px;
    background: #ffffff;
    border-bottom: none;
}

@media (min-width: 769px) {
    .informe-topbar:not(.informe-topbar--empty) {
        height: 96px;
    }
}

/* FIX 6: Toggle menú (mobile Y desktop) - ícono hamburger CSS */
.informe-topbar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    font-size: 0;
}

.informe-topbar__toggle::before {
    content: '';
    display: block;
    width: 1.25rem;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.informe-topbar__toggle:hover {
    background: transparent;
    color: var(--color-brand-primary);
}

/* FIX 6: Menú desktop ELIMINADO (ahora todo es toggle) */

/* Logo (solo visible en sticky) */
.informe-topbar__logo {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.informe-topbar__logo img {
    max-width: 180px; /* Reducido para mejor proporción */
    height: auto;
    width: auto;
}

/* Buscador (position:relative para dropdown del formulario) */
.informe-topbar__search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
}

/* Ícono lupa CSS (cuando no hay Font Awesome) */
.informe-topbar__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    font-size: 0;
}

.informe-topbar__search-btn::before {
    content: '';
    display: block;
    width: .875rem;
    height: .875rem;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.informe-topbar__search-btn::after {
    content: '';
    position: absolute;
    bottom: .5rem;
    right: .35rem;
    width: .55rem;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: right center;
}

.informe-topbar__search-btn:hover {
    background: var(--color-gray-300);
    border-radius: 4px;
}

/* Formulario de búsqueda (oculto por defecto) */
.informe-topbar__search-form {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border: 1px solid var(--color-gray-900);
    border-top: none;
    padding: var(--space-4);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.informe-topbar__search-form.is-active {
    display: block;
}

.informe-topbar__search-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-gray-900);
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
}

.informe-topbar__search-input:focus {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* Estado STICKY */
.sticky-navbar-ad-container.is-scrolled {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sticky-navbar-ad-container.is-scrolled .informe-topbar__logo {
    display: flex;
}

/* FIX 6: Toggle siempre visible (desktop Y mobile) */

/* Menú drawer (ahora en home-header, debajo del logo-wrap sticky) */
.informe-topbar__mobile-menu {
    display: none;
    position: fixed;
    top: 4rem; /* Debajo del logo-wrap en mobile */
    left: 0;
    width: 100%;
    height: calc(100vh - 4rem);
    background: #ffffff;
    z-index: 999;
    padding: var(--space-5);
    overflow-y: auto;
}

@media (min-width: 769px) {
    .informe-topbar__mobile-menu {
        top: 5.5rem; /* Debajo del logo-wrap en desktop */
        height: calc(100vh - 5.5rem);
    }
}

.informe-topbar__mobile-menu.is-active {
    display: block;
}

.informe-topbar__mobile-menu nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* FIX 6: Unificar estilo de texto (Capitalizado) */
.informe-topbar__mobile-menu a {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-gray-300);
}

.informe-topbar__mobile-menu a:hover {
    color: var(--color-brand-primary);
    background: var(--color-gray-200);
}

/* Responsive */
@media (max-width: 768px) {
    .informe-topbar {
        padding: 0 var(--container-padding-mobile);
    }
}