/* =========================================================
   MENÚ RESPONSIVE SIN JS - Cinvestav
   Autor: Erik Martínez (versión optimizada)
========================================================= */

/* ----------- Estilos base (escritorio) ----------- */
.cinvestav-menu > nav { width:100%; }
.cinvestav-menu > nav ul,
.cinvestav-menu > nav li { margin:0; padding:0; list-style:none; }
.cinvestav-menu > nav a { text-decoration:none; display:block; }

.cinvestav-menu > nav ul { display:flex; flex-wrap:wrap; }
.cinvestav-menu > nav ul > li { position:relative; }
.cinvestav-menu > nav ul li a {
  padding:12px 18px;
  font-weight:600;
  color:#333;              /* gris oscuro */
  background:#f5f5f5;      /* gris claro */
  text-align:left;
}
.cinvestav-menu > nav ul li:hover > a {
  background:#e0e0e0;
  color:#111;
}

/* Submenús (desktop) */
.cinvestav-menu > nav ul ul {
  visibility:hidden;
  opacity:0;
  position:absolute;
  z-index:100;
  min-width:180px;
  background:#f0f0f0;
  box-shadow:2px 2px 6px rgba(0,0,0,.15);
  transition:opacity .2s ease;
}
.cinvestav-menu > nav ul li:hover > ul {
  visibility:visible; opacity:1;
}
.cinvestav-menu > nav ul ul li a {
  font-weight:normal;
  padding:10px 15px;
  color:#333;
  background:#f0f0f0;
}
.cinvestav-menu > nav ul ul li a:hover {
  background:#ddd;
}

/* =========================================================
   MODO MÓVIL
========================================================= */
@media (max-width:991px) {

  /* Ocultar el menú por defecto */
  .cinvestav-menu-responsive > nav {
    display:none;
    width:100%;
    background:#f5f5f5;
    border-top:1px solid #ccc;
    padding-top:10px;
  }
	
/* =========================================================
   OCULTAR CHECKBOXES DE SUBMENÚ (mantener funcionalidad)
========================================================= */
.cinvestav-menu-responsive .sub-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}


  /* Mostrar al activar el checkbox */
  .cinvestav-menu-responsive .cinvestav-toggle:checked + .cinvestav-hamburguesa + nav {
    display:block;
    animation:cinvestav-slideDown .3s ease;
  }

  /* Icono hamburguesa */
  .cinvestav-menu-responsive .cinvestav-hamburguesa {
    position:relative;
    width:28px;
    height:20px;
    cursor:pointer;
    display:block;
    margin:12px 15px;
  }
  .cinvestav-menu-responsive .cinvestav-hamburguesa::before,
  .cinvestav-menu-responsive .cinvestav-hamburguesa::after,
  .cinvestav-menu-responsive .cinvestav-hamburguesa span {
    content:"";
    position:absolute;
    left:0; right:0;
    height:3px;
    background:#333;
    border-radius:2px;
    transition:transform .3s ease;
  }
  .cinvestav-menu-responsive .cinvestav-hamburguesa::before { top:0; }
  .cinvestav-menu-responsive .cinvestav-hamburguesa::after  { bottom:0; }
  .cinvestav-menu-responsive .cinvestav-hamburguesa span    { top:8px; }

  /* Efecto X al abrir */
  .cinvestav-menu-responsive .cinvestav-toggle:checked + .cinvestav-hamburguesa::before {
    transform:translateY(8px) rotate(45deg);
  }
  .cinvestav-menu-responsive .cinvestav-toggle:checked + .cinvestav-hamburguesa::after {
    transform:translateY(-8px) rotate(-45deg);
  }
  .cinvestav-menu-responsive .cinvestav-toggle:checked + .cinvestav-hamburguesa span {
    transform:scale(0);
  }

  /* Menú vertical */
  .cinvestav-menu-responsive nav ul {
    display:block;
    width:100%;
  }
  .cinvestav-menu-responsive nav li {
    border-bottom:1px solid #ddd;
    position:relative;
  }
  .cinvestav-menu-responsive nav li a {
    padding:12px 16px;
    font-weight:600;
    color:#333;
    background:#f5f5f5;
  }

  /* Subniveles */
  .cinvestav-menu-responsive ul ul li a {
    padding:10px 24px;
    background:#e9e9e9;
    border-left:3px solid #ccc;
  }

  /* Submenús ocultos por defecto */
  .cinvestav-menu-responsive .has-children > ul {
    display: none;
    background:#e9e9e9;
  }

  /* Mostrar submenú cuando el checkbox está activado */
  .cinvestav-menu-responsive .sub-toggle:checked ~ ul {
    display:block;
    animation:cinvestav-fadeIn .25s ease;
  }

  /* Enlace principal con espacio para la flecha */
  .cinvestav-menu-responsive .desktop-link {
    position: relative;
    padding-right: 50px;
    z-index: 1;
    pointer-events: auto !important;
  }

  /* Flecha táctil como botón independiente */
  .cinvestav-menu-responsive .sub-trigger {
    position:absolute;
    top:0;
    right:0;
    width:44px;
    height:100%;
    cursor:pointer;
    z-index:2;
    background:transparent;
  }

  /* Flecha visual (caret) */
  .cinvestav-menu-responsive .sub-trigger::after {
    content:"";
    position:absolute;
    top:50%;
    right:14px;
    width:8px;
    height:8px;
    border-right:2px solid #444;
    border-bottom:2px solid #444;
    transform:translateY(-50%) rotate(45deg);
    opacity:0.75;
    transition:transform .25s ease, opacity .2s ease;
  }

  /* Girar flecha cuando se abre */
  .cinvestav-menu-responsive .sub-toggle:checked + .sub-trigger::after {
    transform:translateY(-50%) rotate(225deg);
    opacity:0.9;
  }
}

/* =========================================================
   DESKTOP NORMAL
========================================================= */
@media (min-width:992px) {
  .cinvestav-menu-responsive .cinvestav-hamburguesa,
  .cinvestav-menu-responsive .cinvestav-toggle {
    display:none;
  }
  .cinvestav-menu-responsive > nav {
    display:block !important;
  }
}

/* =========================================================
   ANIMACIONES
========================================================= */
@keyframes cinvestav-slideDown {
  from { opacity:0; transform:translateY(-10px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes cinvestav-fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}

/* =========================================================
   CORRECCIONES Y VISIBILIDAD DE CONTROLES
========================================================= */

/* Ocultar el checkbox global (hamburguesa) */
.cinvestav-menu-responsive > .cinvestav-toggle {
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:0;
  height:0;
}

/* Mantener visibles los submenús y flechas */
.cinvestav-menu-responsive .sub-toggle,
.cinvestav-menu-responsive .sub-trigger {
  display:block !important;
  visibility:visible !important;
  position:relative !important;
  left:auto !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
}

/* =========================================================
   AJUSTE FINAL: una sola flecha a la derecha
========================================================= */
@media (max-width:991px) {

  /* Quitar flechas duplicadas junto al texto */
  .cinvestav-menu-responsive .has-children > a::after,
  .cinvestav-menu-responsive .cinvestav-tiene-submenu > a::after {
    content:none !important;
  }

  /* Flecha al extremo derecho */
  .cinvestav-menu-responsive .sub-trigger {
    right:0;
    width:44px;
    height:100%;
  }

  .cinvestav-menu-responsive .sub-trigger::after {
    right:14px;
  }
}