/* ================================================================
   header-nav.css — GAMS Sacaba / Tema gams  v2.3
   Reordenado: 1) generales/desktop  2) pantallas medianas
   3) móvil  4) modo oscuro (consolidado al final)
   FIX v2.3: revertidos selectores :is() en reglas de estado
   activo/current — causaban que Bulma (#1565c0) ganara por
   especificidad sobre nuestro verde. Selectores explícitos
   restaurados en esos puntos concretos.
   ================================================================ */

/* ════════════════════════════════════════════════════════════
   1. GENERALES — contenedor, resets base, desktop ≥768px
   ════════════════════════════════════════════════════════════ */

/* ── Navbar contenedor ───────────────────────────────────── */
#gams-navbar {
  background:  var(--primary-navbg);
  position:    sticky;
  top:         0;
  z-index:     90;
  box-shadow:  0 2px 10px rgba(0,0,0,0.2);
  transition:  box-shadow 0.2s ease;
}
#gams-navbar.is-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.35); }

/* Bulma resets */
#gams-navbar .navbar,
#gams-navbar .navbar-menu,
#gams-navbar .navbar-start,
#gams-navbar .navbar-end {
  background: transparent !important;
  box-shadow: none !important;
  min-height: unset;
}
#gams-navbar > .navbar {
  max-width:  var(--max-ancho);
  margin:     0 auto;
  min-height: 50px;
  padding:    0 24px;
}

/* Ocultar burger — a partir de 768px se usa el navbar horizontal */
@media screen and (min-width: 768px) {
  #gams-burger,
  #gams-nav-cerrar { display: none !important; }
}

/* ── NIVEL 1 (desktop ≥768px) ────────────────────────────── */
@media screen and (min-width: 768px) {

  #gams-navbar .navbar-start > .has-dropdown {
    background:  transparent !important;
    padding:     0 !important;
    margin:      0 !important;
    height:      50px;
    display:     flex;
    align-items: stretch;
    position:    relative;
  }

  /* Estilos base — items simples y links con dropdown */
  #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown),
  #gams-navbar .navbar-start > .has-dropdown > .navbar-link {
    color:           rgba(255,255,255,0.88);
    font-size:       0.86rem;
    font-weight:     600;
    padding:         0 10px;
    height:          50px;
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    gap:             5px;
    white-space:     nowrap;
    font-family:     var(--fuente);
    background:      transparent;
    border-bottom:   2px solid transparent;
    text-decoration: none;
    letter-spacing:  0.01em;
    transition:      background var(--transicion), color var(--transicion),
    border-color var(--transicion);
  }
  #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown) i,
  #gams-navbar .navbar-start > .has-dropdown > .navbar-link i {
    font-size: 0.95rem;
  }

  /* Hover */
  #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown):hover,
  #gams-navbar .navbar-start > .has-dropdown:hover > .navbar-link,
  #gams-navbar .navbar-start > .has-dropdown:focus-within > .navbar-link {
    background: rgba(255,255,255,0.10);
    color:      #fff;
  }

  /* Estado activo — selectores explícitos para no perder contra Bulma */
  #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown).is-active {
    background:          rgba(255,255,255,0.15) !important;
    color:               #fff !important;
    border-bottom-color: var(--color-acento) !important;
  }
  #gams-navbar .current-menu-item > .navbar-item {
    background:          rgba(255,255,255,0.15) !important;
    color:               #fff !important;
    border-bottom-color: var(--color-acento) !important;
  }
  /* current-menu-ancestor se aplica al div.has-dropdown padre —
     la regla debe apuntar al .navbar-link dentro de él */
  #gams-navbar .current-menu-ancestor > .navbar-link,
  #gams-navbar .navbar-start > .has-dropdown.current-menu-ancestor > .navbar-link {
    background: rgba(255,255,255,0.15) !important;
    color:      #fff !important;
    border-bottom: 2px solid var(--color-acento) !important;
  }
  /* El borde inferior visible requiere que el contenedor padre
     también tenga el borde — de lo contrario el link lo absorbe */
  #gams-navbar .navbar-start > .has-dropdown.current-menu-ancestor {
    border-bottom: 2px solid var(--color-acento) !important;
    background:    transparent !important;
  }
  #gams-navbar .navbar-start > .has-dropdown.current-menu-parent > .navbar-link {
    background: rgba(255,255,255,0.15) !important;
    color:      #fff !important;
  }
  #gams-navbar .navbar-start > .has-dropdown.current-menu-parent {
    border-bottom: 2px solid var(--color-acento) !important;
    background:    transparent !important;
  }

  /* Ícono del padre cuando un subítem está activo (current-menu-ancestor) */
  #gams-navbar .navbar-start > .has-dropdown.current-menu-ancestor > .navbar-link i,
  #gams-navbar .navbar-start > .has-dropdown.current-menu-item > .navbar-link i {
    color:   #fff;
    opacity: 0.9;
  }

  /* Flecha ▾ */
  #gams-navbar .navbar-start > .has-dropdown > .navbar-link::after {
    content:       '';
    display:       inline-block;
    width:         8px; height: 8px;
    border-right:  2.5px solid rgba(255,255,255,0.9);
    border-bottom: 2.5px solid rgba(255,255,255,0.9);
    border-left:   none; border-top: none;
    transform:     rotate(45deg);
    margin-top:    12px;
    margin-right:  33%;
    flex-shrink:   0;
    transition:    border-color var(--transicion), transform 0.2s ease;
  }
  #gams-navbar .navbar-start > .has-dropdown:hover > .navbar-link::after {
    border-color: #fff;
  }
  #gams-navbar .navbar-start > .has-dropdown.is-active > .navbar-link::after,
  #gams-navbar .navbar-start > .has-dropdown:focus-within > .navbar-link::after {
    border-color: #fff;
    transform:    rotate(225deg);
  }
}

/* ── NIVEL 2: dropdown ───────────────────────────────────── */
#gams-navbar .navbar-dropdown {
  display:         block;
  opacity:         0;
  visibility:      hidden;
  pointer-events:  none;
  transform:       translateY(-6px);
  transition:      opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  position:        absolute;
  top:             100%;
  left:            0;
  min-width:       300px;
  background:      #fff !important;
  border-top:      3px solid var(--color-acento);
  border-radius:   0 0 12px 12px;
  box-shadow:      var(--sombra-dropdown);
  padding:         0.5rem;
  z-index:         100;
}
#gams-navbar .has-dropdown.is-active > .navbar-dropdown,
#gams-navbar .has-dropdown:focus-within > .navbar-dropdown {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  transform:      translateY(0);
}

/* Items nivel 2 — selectores explícitos (no :is()) */
#gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown),
#gams-navbar .navbar-dropdown > .has-dropdown > .navbar-link {
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  gap:             12px;
  color:           var(--texto-default) !important;
  font-size:       0.86rem;
  font-weight:     500;
  padding:         0.5rem 0.7rem;
  height:          auto;
  border-radius:   10px;
  background:      transparent !important;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background var(--transicion), color var(--transicion);
}
#gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown) i,
#gams-navbar .navbar-dropdown > .has-dropdown > .navbar-link i {
  width:           30px;
  height:          30px;
  min-width:       30px;  /* evita que flex aplaste el ancho */
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.92rem;
  color:           var(--color-acento);
  background:      color-mix(in srgb, var(--color-acento) 10%, white); /* placa circular modo claro */
  flex-shrink:     0;
  transition:      background var(--transicion), color var(--transicion);
}
#gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown):hover,
#gams-navbar .navbar-dropdown > .has-dropdown:hover > .navbar-link,
#gams-navbar .navbar-dropdown > .has-dropdown:focus-within > .navbar-link {
  background: #f0f7f0 !important;
}
/* Ícono en hover nivel 2 modo claro — fondo más sólido */
#gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown):hover i,
#gams-navbar .navbar-dropdown > .has-dropdown:hover > .navbar-link i {
  background: color-mix(in srgb, var(--primary-main) 18%, white);
  color:      var(--primary-main);
}

/* ── NIVEL 3: sub-dropdown ───────────────────────────────── */
#gams-navbar .navbar-dropdown > .has-dropdown {
  position: relative;
  display:  block;
}
#gams-navbar .navbar-dropdown > .has-dropdown > .navbar-link::after {
  content:      '';
  display:      inline-block;
  width:        6px; height: 6px;
  border-right: 2px solid var(--texto-suave);
  border-top:   2px solid var(--texto-suave);
  border-left:  none; border-bottom: none;
  transform:    rotate(45deg);
  margin-left:  auto;
  flex-shrink:  0;
}
#gams-navbar .navbar-dropdown > .has-dropdown > .navbar-dropdown {
  top:           0;
  left:          100%;
  border-top:    none;
  border-left:   3px solid var(--color-acento);
  border-radius: 0 12px 12px 12px;
  transform:     translateX(-6px);
}
#gams-navbar .navbar-dropdown > .has-dropdown.is-active > .navbar-dropdown,
#gams-navbar .navbar-dropdown > .has-dropdown:focus-within > .navbar-dropdown {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  transform:      translateX(0);
}

  .navbar-item-text {
  white-space: normal;
}

/* ════════════════════════════════════════════════════════════
   2. RANGO MEDIO 768px – 1024px: navbar horizontal, solo íconos
   ════════════════════════════════════════════════════════════ */
@media screen and (min-width: 768px) and (max-width: 1023px) {

  #gams-navbar .navbar-menu,
  #gams-navbar .navbar-start {
    display: flex !important;
  }

  #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown) > .navbar-item-text,
  #gams-navbar .navbar-start > .has-dropdown > .navbar-link > .navbar-item-text {
    display: none;
  }

  #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown),
  #gams-navbar .navbar-start > .has-dropdown > .navbar-link {
    padding: 0 12px;
    gap:     0;
  }
  #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown) i,
  #gams-navbar .navbar-start > .has-dropdown > .navbar-link i {
    font-size: 1.05rem;
  }

  #gams-navbar .navbar-link::after { margin-right: 0px !important; }

  #gams-logo-right,
  #gams-bicentenario {
    display: none !important;
  }
}


/* ════════════════════════════════════════════════════════════
   3. MÓVIL < 768px — panel lateral (drawer)
   ════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {

  #gams-burger {
    display:       flex !important;
    align-items:   center;
    background:    none;
    border:        none;
    cursor:        pointer;
    padding:       8px 12px;
    margin-left:   auto;
    color:         #fff;
    font-size:     1.4rem;
    line-height:   1;
    border-radius: var(--radio);
    transition:    background var(--transicion);
  }
  #gams-burger:hover { background: rgba(255,255,255,0.12); }

  #gams-navbar > .navbar { padding: 0; min-height: 0; }

  #gams-navbar .navbar-menu {
    display:    none;
    position:   fixed;
    inset:      0;
    z-index:    9999;
    background: rgba(15, 20, 15, 0.5);
    overflow:   hidden;
  }
  #gams-navbar .navbar-menu.is-active {
    display:         flex;
    justify-content: flex-end;
    animation:       navBackdropOpen 0.2s ease;
  }
  @keyframes navBackdropOpen {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  #gams-navbar .navbar-menu::before { content: none; }

  #gams-navbar .navbar-start {
    width:          82%;
    max-width:      320px;
    height:         100%;
    background:     #fff !important;
    box-shadow:     -10px 0 30px rgba(0,0,0,0.25) !important;
    overflow-y:     auto;
    flex-direction: column;
    align-items:    stretch;
    padding:        20px 0 28px;
    gap:            2px;
    transform:      translateX(100%);
    transition:     transform 0.26s ease;
  }
  #gams-navbar .navbar-menu.is-active .navbar-start {
    transform: translateX(0);
  }

  #gams-navbar .navbar-start::before {
    content:        "Menú";
    display:        block;
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--texto-suave);
    padding:        0 20px 14px;
    margin-bottom:  6px;
    border-bottom:  1px solid var(--borde-suave, #eee);
  }

  #gams-nav-cerrar {
    position:        absolute;
    top:             14px;
    right:           18px;
    width:           34px;
    height:          34px;
    border-radius:   50%;
    border:          none;
    background:      var(--background-default, #f2f2f2);
    color:           var(--texto-default);
    font-size:       1rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    z-index:         1;
  }
  #gams-nav-cerrar:hover { background: #e4e4e4; }

  /* Nivel 1 mobile */
  #gams-navbar .navbar-start > .has-dropdown {
    height:         auto;
    flex-direction: column;
    align-items:    stretch;
    position:       static;
  }

  #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown),
  #gams-navbar .navbar-start > .has-dropdown > .navbar-link {
    height:          auto;
    padding:         11px 20px;
    font-size:       0.95rem;
    font-weight:     600;
    border-bottom:   none;
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    gap:             13px;
    color:           var(--texto-default);
    background:      transparent;
    transition:      background var(--transicion);
  }
  #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown) i,
  #gams-navbar .navbar-start > .has-dropdown > .navbar-link i {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.95rem;
    background:      color-mix(in srgb, var(--primary-main) 10%, white);
    color:           var(--primary-main);
    flex-shrink:     0;
    transition:      background var(--transicion), color var(--transicion);
  }
  #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown):hover,
  #gams-navbar .navbar-start > .has-dropdown > .navbar-link:hover {
    background: var(--background-default, #f7f7f7);
  }

  /* Estado activo mobile — selectores explícitos */
  #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown).is-active {
    background: color-mix(in srgb, var(--color-acento) 10%, white) !important;
    color:      var(--texto-default) !important;
  }
  #gams-navbar .current-menu-item > .navbar-item {
    background: color-mix(in srgb, var(--color-acento) 10%, white) !important;
    color:      var(--texto-default) !important;
  }
  #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown).is-active i,
  #gams-navbar .current-menu-item > .navbar-item i {
    background: var(--color-acento);
    color:      #fff;
  }

  /* Flecha mobile */
  #gams-navbar .navbar-start > .has-dropdown > .navbar-link::after {
    content:       '';
    display:       inline-block;
    width:         8px; height: 8px;
    border-right:  2px solid var(--texto-suave);
    border-bottom: 2px solid var(--texto-suave);
    border-left:   none; border-top: none;
    transform:     rotate(45deg);
    transition:    transform 0.2s ease;
    flex-shrink:   0;
    margin-left:   auto;
  }
  #gams-navbar .navbar-start > .has-dropdown.is-active > .navbar-link::after {
    transform: rotate(-135deg);
  }
  #gams-navbar .navbar-start > .has-dropdown.is-active > .navbar-link {
    background: var(--background-default, #f7f7f7);
  }
  /* Padre activo en móvil cuando contiene el subítem actual */
  #gams-navbar .navbar-start > .has-dropdown.current-menu-ancestor > .navbar-link  {
    background: color-mix(in srgb, var(--color-acento) 10%, white) !important;
    color:      var(--texto-default) !important;
  }
  #gams-navbar .navbar-start > .has-dropdown.current-menu-ancestor > .navbar-link i {
    background: var(--color-acento) !important;
    color:      #fff !important;
  }

  /* Dropdown nivel 2 (acordeón mobile) */
  #gams-navbar .navbar-dropdown {
    display:        none !important;
    position:       static !important;
    top:            auto !important;
    left:           auto !important;
    opacity:        1 !important;
    visibility:     visible !important;
    pointer-events: auto !important;
    transform:      none !important;
    box-shadow:     none !important;
    border-top:     none !important;
    border-radius:  0 !important;
    background:     transparent !important;
    padding:        2px 0 6px !important;
    margin:         0;
    min-width:      unset;
  }
  #gams-navbar .has-dropdown.is-active > .navbar-dropdown {
    display:        block !important;
    visibility:     visible !important;
    pointer-events: auto !important;
    opacity:        1 !important;
  }

  #gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown),
  #gams-navbar .navbar-dropdown > .has-dropdown > .navbar-link {
    color:           var(--texto-suave) !important;
    font-size:       0.87rem;
    font-weight:     500;
    padding:         9px 20px 9px 52px;
    border-left:     none;
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    gap:             10px;
    background:      transparent !important;
    text-decoration: none;
    transition:      background var(--transicion), color var(--transicion);
  }
  #gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown) i,
  #gams-navbar .navbar-dropdown > .has-dropdown > .navbar-link i {
    width:           26px;
    height:          26px;
    min-width:       26px;   /* evita que flexbox aplaste el ancho */
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.82rem;
    flex-shrink:     0;
    color:           var(--color-acento);
    background:      color-mix(in srgb, var(--color-acento) 10%, white);
  }
  #gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown):hover,
  #gams-navbar .navbar-dropdown > .has-dropdown > .navbar-link:hover {
    background: var(--background-default, #f7f7f7) !important;
    color:      var(--texto-default) !important;
  }

  /* Nivel 3 mobile */
  #gams-navbar .navbar-dropdown > .has-dropdown {
    position: static;
    display:  block;
  }
  #gams-navbar .navbar-dropdown > .has-dropdown > .navbar-dropdown {
    padding-left: 16px !important;
  }
  #gams-navbar .navbar-dropdown > .has-dropdown > .navbar-link::after {
    border-right:  2px solid var(--texto-suave);
    border-bottom: 2px solid var(--texto-suave);
    border-top:    none; border-left: none;
  }
}


/* ════════════════════════════════════════════════════════════
   4. MODO OSCURO — consolidado (desktop + móvil)
   ════════════════════════════════════════════════════════════ */

/* ── Desktop / general ───────────────────────────────────── */
[data-theme="dark"] #gams-navbar .navbar-dropdown {
  background: #1e1e2e !important;
}
[data-theme="dark"] #gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown),
[data-theme="dark"] #gams-navbar .navbar-dropdown > .has-dropdown > .navbar-link {
  color: #f0f0f0 !important;
}
[data-theme="dark"] #gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown) i,
[data-theme="dark"] #gams-navbar .navbar-dropdown > .has-dropdown > .navbar-link i {
  background: color-mix(in srgb, var(--color-acento) 22%, #1e1e2e);
}
[data-theme="dark"] #gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown):hover {
  background: #2a2a3a !important;
  color:      #fff !important;
}
[data-theme="dark"] #gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown):hover i {
  background: var(--color-acento);
  color:      #fff;
}

/* ── Panel móvil oscuro ───────────────────────────────────── */
@media screen and (max-width: 767px) {
  [data-theme="dark"] #gams-navbar .navbar-menu {
    background: rgba(0, 0, 0, 0.6);
  }
  [data-theme="dark"] #gams-navbar .navbar-start {
    background: #1a1a24 !important;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5) !important;
  }
  [data-theme="dark"] #gams-navbar .navbar-start::before {
    color:               #9a9aa8;
    border-bottom-color: #2e2e3d;
  }
  [data-theme="dark"] #gams-nav-cerrar {
    background: #2a2a3a;
    color:      #f0f0f0;
  }
  [data-theme="dark"] #gams-nav-cerrar:hover { background: #35354a; }

  [data-theme="dark"] #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown),
  [data-theme="dark"] #gams-navbar .navbar-start > .has-dropdown > .navbar-link {
    color: #f0f0f0;
  }
  [data-theme="dark"] #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown) i,
  [data-theme="dark"] #gams-navbar .navbar-start > .has-dropdown > .navbar-link i {
    background: color-mix(in srgb, var(--primary-main) 25%, #1a1a24);
    color:      #8fd39a;
  }
  [data-theme="dark"] #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown):hover,
  [data-theme="dark"] #gams-navbar .navbar-start > .has-dropdown > .navbar-link:hover,
  [data-theme="dark"] #gams-navbar .navbar-start > .has-dropdown.is-active > .navbar-link {
    background: #24243066;
  }
  [data-theme="dark"] #gams-navbar .navbar-start > .navbar-item:not(.has-dropdown).is-active,
  [data-theme="dark"] #gams-navbar .current-menu-item > .navbar-item {
    background: color-mix(in srgb, var(--color-acento) 25%, #1a1a24) !important;
    color:      #fff !important;
  }
  [data-theme="dark"] #gams-navbar .navbar-start > .has-dropdown > .navbar-link::after {
    border-color: #9a9aa8;
  }
  [data-theme="dark"] #gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown),
  [data-theme="dark"] #gams-navbar .navbar-dropdown > .has-dropdown > .navbar-link {
    color: #b8b8c8 !important;
  }
  [data-theme="dark"] #gams-navbar .navbar-dropdown > .navbar-item:not(.has-dropdown):hover,
  [data-theme="dark"] #gams-navbar .navbar-dropdown > .has-dropdown > .navbar-link:hover {
    background: #24243066 !important;
    color:      #fff !important;
  }
}