/**
 * Hybinet Interface — Navegación Principal
 * Archivo: assets/css/navigation.css
 *
 * Reescrito desde cero. Diseño inspirado en Meta / Android:
 *  - Barra delgada blanca con borde inferior sutil
 *  - Logo a la izquierda, nav centrado, acciones a la derecha
 *  - Sin conflictos con GeneratePress
 *  - Sin !important innecesarios
 *
 * Tabla de contenidos:
 *   1. Variables
 *   2. Header (sticky, fondo, borde)
 *   3. Barra interior (layout de 3 zonas)
 *   4. Logo
 *   5. Navegación desktop
 *   6. Dropdowns
 *   7. Acciones (iconos derecha)
 *   8. Buscador desplegable
 *   9. Drawer móvil
 *  10. Media queries
 */

/* ─────────────────────────────────────────────────────────────────
   1. VARIABLES
   ───────────────────────────────────────────────────────────────── */
:root {
    --hn-height: 64px;
    --hn-bg: #ffffff;
    --hn-border: #e5e7eb;
    --hn-link: #1a1a1a;
    --hn-link-hover: #000000;
    --hn-link-active: var(--hybinet-color-brand-accent, #8DC219);
    --hn-dropdown-bg: #ffffff;
    --hn-drawer-width: 300px;
    --hn-overlay-bg: rgba(0, 0, 0, 0.4);
    --hn-ease: 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────────
   2. HEADER — sticky, blanco, borde inferior
   ───────────────────────────────────────────────────────────────── */
.hybinet-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--hn-bg);
    border-bottom: none;
}

/* ─────────────────────────────────────────────────────────────────
   3. BARRA INTERIOR — 3 zonas: logo | nav | acciones
   Usamos hybinet-container para max-width + margin:auto.
   El layout es nuestro flex propio.
   ───────────────────────────────────────────────────────────────── */
.hybinet-header__bar {
    display: flex;
    align-items: center;
    height: var(--hn-height);
    box-sizing: border-box;
    position: relative;
    /* Necesario para que .hybinet-search-overlay (position:absolute) lo cubra exactamente */
}

/* ─────────────────────────────────────────────────────────────────
   4. LOGO — ocupa el espacio izquierdo (flex: 1)
   ───────────────────────────────────────────────────────────────── */
.hybinet-header__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.hybinet-header__logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.hybinet-header__logo img {
    display: block;
    width: 120px;
    height: auto;
}

.hybinet-header__site-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hn-link);
    white-space: nowrap;
    letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────────────────────────────
   5. NAVEGACIÓN DESKTOP — zona central
   ───────────────────────────────────────────────────────────────── */
.hybinet-nav {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 32px;
}

.hybinet-nav__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    height: 100%;
}

.hybinet-nav__item {
    height: 100%;
    display: flex;
    align-items: center;
}

.hybinet-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.95rem;
    /* Aumentado ligeramente para mejor legibilidad (aprox 15px) */
    font-weight: 500;
    color: var(--hn-link);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--hn-ease), background-color var(--hn-ease);
    position: relative;
    border-radius: 9999px;
    /* Forma de pill (pastilla) */
}

/* Fondo Pill en hover o mientras el menú desplegable esté abierto */
.hybinet-nav__link:hover,
.hybinet-nav__list > .hybinet-nav__item:hover > .hybinet-nav__link,
.hybinet-nav__list > .hybinet-nav__item:focus-within > .hybinet-nav__link {
    color: var(--hn-link-hover);
    background-color: var(--hybinet-color-bg-tertiary, #f0f0f0);
}



/* Caret (flecha) para ítems con submenú */
.hybinet-nav__caret {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
    transition: transform var(--hn-ease);
}

.hybinet-nav__item--has-children:hover>.hybinet-nav__link .hybinet-nav__caret {
    transform: rotate(180deg);
}


/* ─────────────────────────────────────────────────────────────────
   6. MEGA MENU Y DROPDOWNS
   ───────────────────────────────────────────────────────────────── */
/* Fondo a todo lo ancho (100%) */
.hybinet-nav__mega-wrapper {
    position: absolute;
    top: 100%;
    /* Ya no necesitamos el +1px porque quitamos el borde del header */
    left: 0;
    right: 0;
    background: #f8f8f9;
    /* Color gris suave tipo Meta */
    border: none;
    border-top: 1px solid var(--hn-border);
    box-shadow: 0 5px 35px rgba(0, 14, 43, 0.08);

    /* Animación */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
        opacity var(--hn-ease),
        transform var(--hn-ease),
        visibility var(--hn-ease);
    z-index: 200;

    /* Estética: Esquinas inferiores redondeadas según tokens */
    border-radius: 0 0 var(--hybinet-radius-lg) var(--hybinet-radius-lg);
}

.hybinet-nav__item--has-children:hover>.hybinet-nav__mega-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Contenido interior con límite de ancho */
.hybinet-nav__dropdown {
    max-width: 1440px;
    margin: 0 auto;
    padding: 36px 40px;
    list-style: none;

    /* Layout Mega Menu: apilados verticalmente, envolviendo en columnas */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;

    /* Híbrido: crece con el contenido pero nunca desborda la pantalla.
       min(560px, 70vh) = 560px en pantallas altas, menos en pantallas cortas */
    max-height: min(560px, 70vh);

    gap: 4px 64px;
}

/* Resetear el comportamiento flex heredado del header principal */
.hybinet-nav__dropdown .hybinet-nav__item {
    display: block;
    height: auto;
}

/* Solo los ítems directos del Mega Menu (Nivel 2) definen el ancho de su columna */
.hybinet-nav__dropdown>.hybinet-nav__item {
    width: 280px;
}

/* Enlaces dentro del Mega Menu (Nivel 2 sueltos) */
.hybinet-nav__dropdown .hybinet-nav__link {
    height: auto;
    padding: 8px 0;
    /* Sin padding lateral para que alineen con los títulos */
    font-size: 0.95rem;
    /* Reducido de 1.25rem para no ser abrumador */
    font-weight: 500;
    /* Medium para enlaces normales */
    display: block;
    border-radius: 0;
    color: var(--hn-link);
}

/* Hover minimalista sin fondo en el dropdown */
.hybinet-nav__dropdown .hybinet-nav__link:hover {
    background: transparent;
    color: var(--hn-link-hover);
}

/* Títulos de columnas (Nivel 2 con hijos) — etiqueta de sección, pequeña y suave */
.hybinet-nav__dropdown .hybinet-nav__item--has-children>.hybinet-nav__link {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    /* Mayor espaciado para un look más premium en mayúsculas */
    text-transform: uppercase;
    padding: 8px 0 10px 0;
    margin-bottom: 2px;
    color: var(--hybinet-color-text-meta, #828D85);
    border-radius: 0;
    cursor: default;
    pointer-events: none;
}

/* Ocultar el chevron del título porque el contenido ya está visible abajo */
.hybinet-nav__dropdown .hybinet-nav__item--has-children>.hybinet-nav__link .hybinet-nav__caret {
    display: none;
}

/* Sin hover interactivo en el título de sección */
.hybinet-nav__dropdown .hybinet-nav__item--has-children>.hybinet-nav__link:hover {
    background: transparent;
    color: var(--hybinet-color-text-meta, #828D85);
}

/* Separador: aparece antes del primer nivel 2 sin hijos que sigue a un grupo con hijos */
.hybinet-nav__dropdown>.hybinet-nav__item--has-children+.hybinet-nav__item:not(.hybinet-nav__item--has-children) {
    border-top: 1px solid var(--hn-border);
    padding-top: 16px;
    margin-top: 12px;
}

/* Separador también entre dos grupos con hijos consecutivos */
.hybinet-nav__dropdown>.hybinet-nav__item--has-children+.hybinet-nav__item--has-children {
    border-top: 1px solid var(--hn-border);
    padding-top: 16px;
    margin-top: 12px;
}

/* El menú de tercer nivel (enlaces reales) está SIEMPRE visible debajo del título (pero hereda la visibilidad del padre) */
.hybinet-nav__dropdown .hybinet-nav__dropdown {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    transform: none;
}

/* Enlaces del tercer nivel — mismo estilo que nivel 2 sin hijos */
.hybinet-nav__dropdown .hybinet-nav__dropdown .hybinet-nav__link {
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 0;
    border-radius: 0;
}

/* Hover minimalista: solo cambia el color del texto, sin fondo */
.hybinet-nav__dropdown .hybinet-nav__dropdown .hybinet-nav__link:hover {
    background: transparent;
    color: var(--hn-link-hover);
}

/* ─────────────────────────────────────────────────────────────────
   7. ACCIONES (iconos derecha) — ocupa el espacio derecho (flex: 1)
   ───────────────────────────────────────────────────────────────── */
.hybinet-header__actions {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    /* Separación real entre los iconos, sin contar padding */
}

/* Todos los botones icono */
#hybinet-header .hybinet-header__btn,
#hybinet-mobile-drawer .hybinet-header__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    /* Tamaño estricto del botón (solo el icono, sin espacio extra) */
    height: 24px;
    padding: 0;
    background-color: transparent;
    /* Anulamos el fondo global (verde) de WP */
    border: none;
    box-shadow: none;
    color: var(--hn-link);
    cursor: pointer;
    position: relative;
    /* Para anclar el efecto hover */
}

/* Efecto hover: círculo que se pone "encima/detrás" sin separar elementos ni afectar el layout */
.hybinet-header__btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    /* Área del hover */
    height: 40px;
    border-radius: 999px;
    /* Circular */
    background: transparent;
    transition: background var(--hn-ease);
    z-index: -1;
    /* Queda debajo del icono */
}

.hybinet-header__btn:hover::before {
    background: var(--hybinet-color-bg-tertiary);
}

/* SVG icono */
.hybinet-icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Hamburguesa — oculta por defecto en desktop */
#hybinet-header button.hybinet-header__btn.hybinet-header__hamburger {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────
   8. BUSCADOR OVERLAY (Estilo Android/Google)
   ───────────────────────────────────────────────────────────────── */

/**
 * El overlay se posiciona SOBRE la barra del header (position:absolute).
 * El header padre tiene position:sticky, así que el overlay "viaja" con él.
 * Estado inicial: invisible, sin interacción.
 */
.hybinet-search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    z-index: 100;

    /* Estado inicial: invisible */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Estado activo: aparece con un flash suave */
.hybinet-search-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Barra interior: Logo (oculto) + Input (flex-1) + Botón cerrar */
.hybinet-search-overlay__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* Icono lupa decorativo */
.hybinet-search-overlay__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    opacity: 0.4;
}

/* El form ocupa todo el espacio disponible */
.hybinet-search-overlay__form {
    flex: 1;
    display: flex;
}

/* Input minimalista, sin bordes visibles */
/* Mayor especificidad (ID + Clases + Atributo) para anular globales sin usar !important */
#hybinet-header .hybinet-search-overlay .hybinet-search-overlay__form input.hybinet-search-overlay__input[type="search"] {
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    box-shadow: none;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--hn-link);
    font-family: inherit;
    padding: 0;
}

#hybinet-header .hybinet-search-overlay .hybinet-search-overlay__form input.hybinet-search-overlay__input[type="search"]:focus {
    border: none;
    background-color: transparent;
    box-shadow: none;
}

#hybinet-header .hybinet-search-overlay .hybinet-search-overlay__form input.hybinet-search-overlay__input[type="search"]::placeholder {
    color: #a0a0a0;
    font-weight: 300;
}

/* Ocultar la "x" nativa de los navegadores para evitar confusión con el botón de cerrar overlay */
#hybinet-header .hybinet-search-overlay .hybinet-search-overlay__form input.hybinet-search-overlay__input[type="search"]::-webkit-search-decoration,
#hybinet-header .hybinet-search-overlay .hybinet-search-overlay__form input.hybinet-search-overlay__input[type="search"]::-webkit-search-cancel-button,
#hybinet-header .hybinet-search-overlay .hybinet-search-overlay__form input.hybinet-search-overlay__input[type="search"]::-webkit-search-results-button,
#hybinet-header .hybinet-search-overlay .hybinet-search-overlay__form input.hybinet-search-overlay__input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}

/* Botón cerrar: hereda estilos de .hybinet-header__btn */
.hybinet-search-overlay__close {
    flex-shrink: 0;
}

/* ── BACKDROP (Niebla detrás del header) ─────────────────────────── */
/**
 * Capa fija que cubre toda la página debajo del header.
 * Aplica blur para enfocar la atención en el buscador.
 */
.hybinet-search-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 90;
    /* Debajo del overlay del header (z:100), encima del contenido */

    /* Estado inicial: invisible */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.hybinet-search-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ── Indicador visual en el header cuando búsqueda está activa ─── */
/**
 * Cuando el overlay está abierto, el header necesita position:relative
 * para que el overlay con position:absolute se posicione sobre él.
 */
#hybinet-header {
    position: sticky;
    /* Ya debe estarlo, pero lo reforzamos */
    top: 0;
    z-index: 200;
}

/* (Estilos del antiguo .hybinet-search-drawer__close eliminados — ver secc. 8) */

/* ─────────────────────────────────────────────────────────────────
   9. DRAWER MÓVIL (off-canvas)
   ───────────────────────────────────────────────────────────────── */
.hybinet-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000; /* Supera el 99999 de la admin bar de WP */
    pointer-events: none;
    visibility: hidden;
}

.hybinet-mobile-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.hybinet-mobile-drawer__overlay {
    position: absolute;
    inset: 0;
    background: var(--hn-overlay-bg);
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

.hybinet-mobile-drawer.is-open .hybinet-mobile-drawer__overlay {
    opacity: 1;
}

.hybinet-mobile-drawer__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--hn-drawer-width);
    height: 100%;
    background: #ffffff;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}

.hybinet-mobile-drawer.is-open .hybinet-mobile-drawer__panel {
    transform: translateX(0);
}

.hybinet-mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hn-border);
    flex-shrink: 0;
}

.hybinet-mobile-drawer__logo img {
    max-height: 30px;
    width: auto;
}

.hybinet-mobile-drawer__body {
    flex: 1;
    padding: 0;
    /* Padding movido a las listas */
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* Botón de cerrar dentro del panel móvil (Corrige el cuadro verde sin afectar desktop) */
#hybinet-mobile-drawer .hybinet-header__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--hn-link);
    cursor: pointer;
}

#hybinet-mobile-drawer .hybinet-icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Lista del menú móvil (Diseño Meta) */
.hybinet-mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hybinet-mobile-nav__list li>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    font-size: 1.25rem;
    /* 20px para máxima legibilidad móvil */
    font-weight: 500;
    /* Medium en Inter da una presencia premium */
    color: var(--hn-link);
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background var(--hn-ease);
}

.hybinet-mobile-nav__list li>a:hover {
    background: #f9f9f9;
}

/* Chevron para ítems con hijos (Todos los niveles) */
.hybinet-mobile-nav__list .menu-item-has-children>a::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1; /* Mismo color sólido del texto */
}

/* Submenús Nivel 2 y 3 (Paneles Drill-down) */
.hybinet-mobile-nav__list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: #ffffff;
    z-index: 10;

    /* Estado inicial: oculto hacia la derecha */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), visibility 0.3s;
}

/* Panel activo */
.hybinet-mobile-nav__list ul.is-active-submenu {
    transform: translateX(0);
    visibility: visible;
}

/* Botón dinámico de volver (Inyectado por JS) */
.hybinet-mobile-back {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
}

.hybinet-mobile-back button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 24px;
    background: transparent;
    border: none;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hn-link);
    text-align: left;
    cursor: pointer;
    transition: background var(--hn-ease);
}

/* Remover el espacio fantasma (descender gap) del icono SVG para un centrado vertical perfecto */
.hybinet-mobile-back button svg {
    display: block;
}

.hybinet-mobile-back button:hover {
    background: #f9f9f9;
}

/* ─────────────────────────────────────────────────────────────────
   10. MEDIA QUERIES
   ───────────────────────────────────────────────────────────────── */

/* Desktop ≥ 768px: mostrar nav */
@media (min-width: 768px) {
    .hybinet-nav {
        display: flex;
    }
}

/* Mobile ≤ 767px */
@media (max-width: 767px) {

    /* Ocultar nav desktop */
    .hybinet-nav {
        display: none;
    }

    /* Mostrar hamburguesa */
    #hybinet-header button.hybinet-header__btn.hybinet-header__hamburger {
        display: inline-flex;
    }

    .hybinet-search-drawer__inner {
        padding: 12px 20px;
    }

    /* UX Móvil: Aumentar el tamaño táctil (Touch Target) y el icono para pulgares */
    #hybinet-header button.hybinet-header__btn,
    #hybinet-mobile-drawer button.hybinet-header__btn {
        width: 28px;
        height: 28px;
    }

    #hybinet-header button.hybinet-header__btn::before,
    #hybinet-mobile-drawer button.hybinet-header__btn::before {
        width: 48px;
        height: 48px;
    }

    .hybinet-icon {
        width: 24px;
        height: 24px;
    }
}