/* ============================================================
   GESTIOPRO - menu.css
   Motor de navegacion. Es el de Easytour, con tres cambios:
     1. prefijo gp- en vez de et-
     2. area tactil de 48px en movil (lo exige la spec, seccion 2.10)
     3. texto de 16px minimo (misma seccion de la spec)
   Movil primero; escritorio desde 768px.
   ============================================================ */

.gp-nav ul{ list-style:none; margin:0; padding:0; }

/* ---------- BASE MOVIL (acordeon) ---------- */
.gp-nav{
  display:none;
  position:absolute;
  top:var(--alto-header); left:0; right:0;
  background:var(--rojo-oscuro);
  border-top:1px solid rgba(255,255,255,.16);
  padding:6px 0 16px;
  max-height:calc(100vh - var(--alto-header));
  overflow-y:auto;
  box-shadow:0 16px 34px rgba(0,0,0,.24);
}
.gp-nav.open{ display:block; }

.gp-nav-menu > .gp-nav-li > .gp-nav-link,
.gp-nav-menu > .gp-nav-li > .gp-nav-trigger{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:10px; min-height:48px; padding:12px 20px;
  color:var(--blanco); font-family:inherit;
  font-size:1rem; font-weight:600; line-height:1.4;
  background:none; border:none; text-align:left; cursor:pointer; text-decoration:none;
}
.gp-nav-menu > .gp-nav-li > .gp-nav-link:hover,
.gp-nav-menu > .gp-nav-li > .gp-nav-trigger:hover{ background:rgba(255,255,255,.12); }

.gp-nav .gp-submenu{ display:none; background:var(--rojo-profundo); }
.gp-nav-li.open > .gp-submenu{ display:block; }

.gp-sub-link{
  display:flex; align-items:center;
  min-height:48px; padding:12px 20px 12px 34px;
  color:rgba(255,255,255,.94); font-size:1rem; line-height:1.4; text-decoration:none;
}
.gp-sub-link:hover{ background:rgba(255,255,255,.14); color:var(--blanco); }

.gp-submenu .gp-nav-trigger{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; width:100%;
  min-height:48px; padding:12px 20px 12px 34px;
  color:rgba(255,255,255,.94); font-size:1rem; font-weight:600;
  background:none; border:none; text-align:left; cursor:pointer; font-family:inherit;
}
.gp-submenu .gp-nav-trigger:hover{ background:rgba(255,255,255,.14); }
.gp-submenu-3 .gp-sub-link{ padding-left:48px; background:rgba(0,0,0,.12); }

.gp-caret{
  width:0; height:0; flex-shrink:0;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid currentColor;
  transition:transform var(--transicion);
}
.gp-nav-li.open > .gp-nav-trigger .gp-caret{ transform:rotate(180deg); }

/* ---------- HAMBURGUESA ---------- */
.gp-hamburguesa{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:48px; height:48px; padding:0; flex-shrink:0;
  background:var(--blanco); border:1px solid var(--gris-linea);
  border-radius:var(--radio); cursor:pointer;
}
.gp-hamburguesa span{
  display:block; width:24px; height:2px; border-radius:2px; background:var(--grafito);
  transition:transform var(--transicion), opacity var(--transicion);
}
.gp-hamburguesa[aria-expanded="true"]{ background:var(--rojo); border-color:var(--rojo); }
.gp-hamburguesa[aria-expanded="true"] span{ background:var(--blanco); }
.gp-hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.gp-hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.gp-hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- ESCRITORIO (>=768px) ---------- */
@media (min-width:768px){
  .gp-hamburguesa{ display:none; }

  .gp-nav{
    display:flex !important;
    position:static; background:none; border:none; padding:0;
    flex:1; justify-content:center; overflow:visible;
    box-shadow:none; max-height:none;
  }
  .gp-nav-menu{ display:flex; flex-direction:row; align-items:center; gap:2px; }
  .gp-nav-li{ position:relative; }

  .gp-nav-menu > .gp-nav-li > .gp-nav-link,
  .gp-nav-menu > .gp-nav-li > .gp-nav-trigger{
    width:auto; min-height:44px; padding:8px 14px;
    border-radius:var(--radio); color:var(--grafito); font-size:1rem;
  }
  .gp-nav-menu > .gp-nav-li > .gp-nav-link:hover,
  .gp-nav-menu > .gp-nav-li > .gp-nav-trigger:hover{ background:var(--rojo-tinte); color:var(--rojo); }
  .gp-nav-menu > .gp-nav-li > .gp-nav-link[aria-current="page"]{ color:var(--rojo); box-shadow:inset 0 -3px 0 var(--rojo); }

  /* Puente invisible: cubre el hueco entre el encabezado y el desplegable,
     para que el hover no se pierda al bajar el mouse. */
  .gp-nav-menu > .gp-nav-li.gp-has-sub::after{
    content:""; position:absolute; top:100%; left:0; right:0; height:12px;
  }

  .gp-nav-menu > .gp-nav-li > .gp-submenu{
    display:none;
    position:absolute; top:calc(100% + 10px); left:0;
    min-width:380px;
    background:var(--rojo-oscuro);
    border-radius:var(--radio);
    box-shadow:0 14px 32px rgba(0,0,0,.26);
    padding:6px 0;
  }
  .gp-nav-menu > .gp-nav-li:hover > .gp-submenu,
  .gp-nav-menu > .gp-nav-li:focus-within > .gp-submenu{ display:block; }

  .gp-sub-link{ min-height:44px; padding:10px 20px; white-space:nowrap; }

  /* Nivel 3 (por si algun dia se usa) */
  .gp-submenu .gp-nav-li.gp-has-sub{ position:relative; }
  .gp-submenu .gp-nav-li.gp-has-sub::after{
    content:""; position:absolute; top:0; bottom:0; left:100%; width:10px;
  }
  .gp-submenu-3{
    display:none;
    position:absolute; top:-6px; left:100%;
    min-width:240px; background:var(--rojo-profundo);
    border-radius:var(--radio); box-shadow:0 14px 32px rgba(0,0,0,.26);
    padding:6px 0;
  }
  .gp-submenu .gp-nav-li.gp-has-sub:hover > .gp-submenu-3,
  .gp-submenu .gp-nav-li.gp-has-sub:focus-within > .gp-submenu-3{ display:block; }
  .gp-submenu .gp-nav-trigger .gp-caret{ transform:rotate(-90deg); }
  .gp-nav-li.open > .gp-nav-trigger .gp-caret{ transform:none; }
}