/* ═══════════════════════════════════════════════════════════════════
   rwe-nav-menu — CSS del menú de navegación (EL MÁS CRÍTICO: navegación
   de toda la web). R1+R2.

   Acoplamiento CSS↔JS resuelto:
   - Clases uid-prefijadas → clases fijas:
       .{uid}-wrap      → .rwe-nav-wrap   (el JS cierra "al clicar fuera"
                                           con querySelector; se actualiza)
       .{uid}-hamburger → .rwe-nav-hamburger
       .{uid}-mobile    → .rwe-nav-mobile
   - La lista desktop dejaba de colgar de #uid y cuelga de su clase .rwe-menu.
   - IDS QUE SE MANTIENEN (el JS los usa): #{uid}-btn (hamburguesa),
     #{uid}-mobile (div móvil), #{uid}-sub-{ID} (submenús móvil, data-target).
     El id #{uid} del <ul> ya no lo usa el CSS ni el JS, pero se conserva
     inocuo por si algo externo lo referencia.

   ⚠️ El breakpoint móvil es CONFIGURABLE por instancia y las media queries
   NO admiten variables CSS → esas 3 reglas responsive se quedan en un
   <style> mínimo por instancia (ver el PHP). Todo lo demás vive aquí.

   Variables (inyectadas en el wrapper .rwe-nav-wrap):
     --rwe-nav-justify     alineación (justify-content)
     --rwe-nav-flexdir     dirección de la lista (row/column)
     --rwe-nav-ff          familia tipográfica
     --rwe-nav-fs          tamaño de fuente px
     --rwe-nav-fs1         tamaño de fuente móvil px (fs+1)
     --rwe-nav-fw          peso
     --rwe-nav-ls          letter-spacing px
     --rwe-nav-tt          text-transform
     --rwe-nav-ph / --rwe-nav-pv   padding horizontal/vertical de item px
     --rwe-nav-color / --rwe-nav-color-h   color item / hover
     --rwe-nav-dd-bg / --rwe-nav-dd-color / --rwe-nav-dd-ch / --rwe-nav-dd-bgh
     --rwe-nav-dd-radius / --rwe-nav-dd-width   dropdown
     --rwe-nav-hb-color    color de la hamburguesa
     --rwe-nav-mob-bg / --rwe-nav-mob-color   fondo/color del menú móvil
   ═══════════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.rwe-nav-wrap{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:var(--rwe-nav-justify,center);
    width:100%;
}

/* ── Lista desktop ── */
.rwe-nav-wrap .rwe-menu{
    display:flex;
    flex-direction:var(--rwe-nav-flexdir,row);
    justify-content:var(--rwe-nav-justify,center);
    align-items:stretch;
    list-style:none;
    margin:0; padding:0;
    flex-wrap:wrap;
    width:100%;
}
.rwe-nav-wrap .rwe-menu > li{
    position:relative;
    display:flex;
    align-items:center;
    padding-bottom:8px;
    margin-bottom:-8px;
}
.rwe-nav-wrap .rwe-menu > li > a{
    display:flex;
    align-items:center;
    font-family:var(--rwe-nav-ff,'Lato'),sans-serif;
    font-size:var(--rwe-nav-fs,13px);
    font-weight:var(--rwe-nav-fw,600);
    letter-spacing:var(--rwe-nav-ls,1px);
    text-transform:var(--rwe-nav-tt,uppercase);
    color:var(--rwe-nav-color,#444);
    text-decoration:none;
    padding:var(--rwe-nav-pv,20px) var(--rwe-nav-ph,14px);
    transition:color 0.2s;
    white-space:nowrap;
    position:relative;
}

/* Indicador hover/activo — solo si está la clase .rwe-nav-indicator en el wrapper */
.rwe-nav-indicator .rwe-menu > li > a::after{
    content:'';
    position:absolute;
    bottom:0; left:var(--rwe-nav-ph,14px); right:var(--rwe-nav-ph,14px);
    height:2px;
    background:var(--rwe-nav-color-h,#c0392b);
    transform:scaleX(0);
    transition:transform 0.2s;
}
.rwe-nav-indicator .rwe-menu > li > a:hover::after,
.rwe-nav-indicator .rwe-menu > li.current-menu-item > a::after,
.rwe-nav-indicator .rwe-menu > li.current-menu-parent > a::after,
.rwe-nav-indicator .rwe-menu > li.current-menu-ancestor > a::after{ transform:scaleX(1); }

/* Flecha desplegable */
.rwe-nav-wrap .rwe-menu li.menu-item-has-children > a .rwe-arrow{
    display:inline-block; margin-left:4px; font-size:9px;
    transition:transform 0.2s; opacity:0.55;
}
.rwe-nav-wrap .rwe-menu li.menu-item-has-children:hover > a .rwe-arrow{ transform:rotate(180deg); }

/* Hover color items nivel 1 */
.rwe-nav-wrap .rwe-menu > li > a:hover,
.rwe-nav-wrap .rwe-menu > li.current-menu-item > a,
.rwe-nav-wrap .rwe-menu > li.current-menu-parent > a,
.rwe-nav-wrap .rwe-menu > li.current-menu-ancestor > a{ color:var(--rwe-nav-color-h,#c0392b); }

/* ── Dropdown ──
   FIX del "hueco" que cerraba el submenú al mover el ratón hacia él:
   1) opacity/visibility con transición (no display:none) → hay un margen de
      tiempo mientras cruzas, el submenú no desaparece de golpe.
   2) puente invisible (::before) que cubre físicamente el espacio entre el
      item y el submenú, para que el :hover no se pierda al cruzarlo.
   El submenú va pegado al item (top:100%, sin gap real). */
.rwe-nav-wrap .rwe-menu li.menu-item-has-children{ position:relative; }
.rwe-nav-wrap .rwe-menu .rwe-submenu{
    position:absolute;
    top:100%;
    left:0;
    min-width:var(--rwe-nav-dd-width,200px);
    background:var(--rwe-nav-dd-bg,#fff);
    border-radius:var(--rwe-nav-dd-radius,6px);
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
    list-style:none; margin:0; padding:6px 0; z-index:9999;
    border-top:2px solid var(--rwe-nav-color-h,#c0392b);
    /* estado oculto: invisible pero presente, con delay al cerrar */
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
    transition-delay:.15s; /* margen de gracia al salir */
}
/* Puente invisible: tapa el hueco entre el item y el submenú */
.rwe-nav-wrap .rwe-menu .rwe-submenu::before{
    content:''; position:absolute;
    left:0; right:0; top:-14px; height:14px;
    background:transparent;
}
.rwe-nav-wrap .rwe-menu > li:hover > .rwe-submenu,
.rwe-nav-wrap .rwe-menu > li:focus-within > .rwe-submenu{
    opacity:1; visibility:visible; transform:translateY(0);
    transition-delay:0s; /* al abrir, inmediato */
}
.rwe-nav-wrap .rwe-menu .rwe-submenu li a{
    display:block;
    font-family:var(--rwe-nav-ff,'Lato'),sans-serif;
    font-size:var(--rwe-nav-fs,13px);
    font-weight:var(--rwe-nav-fw,600);
    color:var(--rwe-nav-dd-color,#333);
    text-decoration:none;
    padding:10px 18px;
    transition:color 0.15s, background 0.15s;
    white-space:nowrap;
}
.rwe-nav-wrap .rwe-menu .rwe-submenu li a:hover{
    color:var(--rwe-nav-dd-ch,#c0392b);
    background:var(--rwe-nav-dd-bgh,#fafafa);
}

/* ── Hamburguesa — oculta en desktop por defecto ── */
.rwe-nav-hamburger{
    display:none; cursor:pointer;
    background:none; border:none; padding:8px;
    flex-direction:column; gap:5px;
    align-items:center; justify-content:center;
    margin-left:auto;
}
.rwe-nav-hamburger span{
    display:block; width:24px; height:2px;
    background:var(--rwe-nav-hb-color,#444);
    border-radius:2px; transition:all 0.3s;
}
.rwe-nav-hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.rwe-nav-hamburger.open span:nth-child(2){ opacity:0; }
.rwe-nav-hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Menú móvil ── */
.rwe-nav-mobile{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--rwe-nav-mob-bg,#fff);
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
    z-index:9998; padding:8px 0;
}
.rwe-nav-mobile.open{ display:block; }
.rwe-nav-mobile ul{ list-style:none; margin:0; padding:0; }
.rwe-nav-mobile li a{
    display:block; padding:13px 24px;
    font-family:var(--rwe-nav-ff,'Lato'),sans-serif;
    font-size:var(--rwe-nav-fs1,14px);
    font-weight:var(--rwe-nav-fw,600);
    color:var(--rwe-nav-mob-color,#333);
    text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,0.06);
    transition:background 0.15s;
}
.rwe-nav-mobile li a:hover{ background:rgba(0,0,0,0.04); }
.rwe-nav-mobile .rwe-mob-sub li a{ padding-left:40px; font-size:var(--rwe-nav-fs,13px); opacity:0.8; }
.rwe-nav-mobile .rwe-mob-sub{ display:none; }
.rwe-nav-mobile .rwe-mob-sub.open{ display:block; }
.rwe-nav-mobile .rwe-mob-toggle{ float:right; padding:0 8px; font-size:16px; opacity:0.5; }