/* =========================
   Advanced Menu Builder – Frontend CSS (completo)
   ========================= */

/* Vars y estados globales */
:root { --amb-drawer-w: 280px; } /* ancho del panel móvil por defecto */
body.amb-menu-open,
body.amb-mega-opened { overflow: hidden; }

/* Overlay general para cerrar con tap */
.amb-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:1000;
}
body.amb-menu-open .amb-overlay,
body.amb-mega-opened .amb-overlay{ display:block; }

/* Contenedor base */
.amb-custom-menu-container { background: none; margin: 0; padding: 0; position: relative; }

/* Listas */
.amb-menu,
.amb-special-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.amb-submenu { list-style: none; margin: 0; padding: 0; }

/* Items */
.amb-menu-item,
.amb-special-item { position: relative; }

/* Links */
.amb-menu-item a,
.amb-special-item a {
  display: flex;
  align-items: center;
  color: #fff !important;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 3px;
  padding: 5px 20px;
}

.amb-menu-item a:hover,
.amb-special-item a:hover { background: none; }

.amb-menu-item a:hover .amb-title,
.amb-special-item a:hover .amb-title { transform: translateY(-2px); }

/* Líneas decorativas */
.amb-menu-item a::after,
.amb-special-item a::after,
.amb-menu-item a::before,
.amb-special-item a::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ff0000, #ffffff);
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}
.amb-menu-item a::before,
.amb-special-item a::before {
  top: -15px;
  transform-origin: left;
}
.amb-menu-item a:hover::after,
.amb-special-item a:hover::after,
.amb-menu-item a:hover::before,
.amb-special-item a:hover::before { transform: scaleX(1); }

.amb-title { transition: transform 0.3s ease; display: inline-block; }

/* Vertical */
.amb-vertical-menu .amb-menu { display: block; flex-wrap: nowrap; }
.amb-vertical-menu .amb-menu-item { width: 100%; margin-bottom: 5px; }

/* Descargas / Footer */
.amb-special-menu.amb-show-in-downloads .amb-special-item a { color: #333 !important; }
.amb-special-menu.amb-show-in-downloads .amb-special-item a:hover .amb-title { transform: translateY(-2px); }

/* Iconos */
.amb-icon{
  display: inline-block !important;
  font: normal normal normal 14px/1 FontAwesome !important;
  font-size: inherit !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  margin-right: 8px;
  width: 1em;
  text-align: center;
}

/* Botón hamburguesa */
.amb-hamburger-button{
  display: none;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 1004; /* por encima del overlay */
}
.amb-hamburger-bars{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 8px;
}
.amb-hamburger-bars span{
  display: block;
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 2px 0;
  transition: all 0.3s ease;
}
.amb-menu-text{ color:#fff; font-size:16px; font-weight:bold; }

.amb-hamburger-button.amb-active .amb-hamburger-bars span:first-child { transform: rotate(45deg) translate(5px, 5px); }
.amb-hamburger-button.amb-active .amb-hamburger-bars span:nth-child(2) { opacity: 0; }
.amb-hamburger-button.amb-active .amb-hamburger-bars span:last-child { transform: rotate(-45deg) translate(5px, -5px); }

/* Especiales */
.amb-special-menu.amb-show-in-downloads{
  background: rgba(0,0,0,0.05);
  padding: 15px;
  border-radius: 8px;
  margin: 0;
}
.amb-special-menu.amb-show-in-downloads .amb-special-list{ flex-direction: column; gap: 8px; }
.amb-special-menu.amb-show-in-downloads .amb-special-item a{
  background: none;
  color: #BDC0C4 !important;
}
.amb-special-menu.amb-show-in-downloads .amb-special-item a:hover{
  background: none;
  transform: translateX(5px);
}

.amb-special-menu.amb-show-in-footer{ background: none; padding: 10px 0; }
.amb-special-menu.amb-show-in-footer .amb-special-list{ justify-content: start; gap: 15px; }
.amb-special-menu.amb-show-in-footer .amb-special-item a{ padding: 5px 10px; }

/* Submenú (desktop) */
.amb-submenu{
  display: none;
  position: absolute;
  min-width: 350px;
  background: #252424;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  z-index: 100;
  padding: 10px 0;
  margin-top: -5px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.amb-has-children:hover .amb-submenu{
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.amb-submenu .amb-menu-item a{ padding: 10px 20px; display: flex; align-items: center; }
.amb-submenu .amb-menu-item{ white-space: nowrap; }

.amb-has-children > a::after{
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 8px;
  transition: transform 0.3s ease;
}
.amb-has-children:hover > a::after{ transform: rotate(180deg); }

/* Mega menú (desktop) */
.amb-mega-menu-content{
  display: none;
  position: absolute;
  top: 100%;
  left: 350%;
  transform: translateX(-50%);
  background: #252424;
  width: 1200px;
  min-width: 300px;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  z-index: 100;
  opacity: 0;
  margin-top: -5px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.amb-menu-item:hover .amb-mega-menu-content{
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Responsivo */
@media (max-width: 1200px){
  .amb-mega-menu-content{ width: 90%; padding: 10px; }
}

@media (max-width: 992px){
  .amb-menu{ flex-wrap: wrap; }
  .amb-special-menu.amb-show-in-downloads,
  .amb-special-menu.amb-show-in-footer{ display: block !important; }
}

/* =========================
   MÓVIL (<=768px) – Drawer derecha + Mega centrado
   ========================= */
@media (max-width: 768px){
  /* Mostrar botón hamburguesa */
  .amb-main-menu .amb-hamburger-button,
  .amb-vertical-menu .amb-hamburger-button{ display:flex; }

  /* Drawer derecho */
  .amb-main-menu .amb-menu,
  .amb-vertical-menu .amb-menu{
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: var(--amb-drawer-w);
    background: #252424;
    flex-direction: column;
    z-index: 1002; /* por encima del overlay */
    padding: 60px 0 15px 0;
    box-shadow: -10px 0 20px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
  }
  .amb-main-menu .amb-menu.amb-active,
  .amb-vertical-menu .amb-menu.amb-active{
    display: flex;
    transform: translateX(0);
    animation: amb-slideIn 0.3s ease;
  }

  .amb-main-menu .amb-menu-item,
  .amb-vertical-menu .amb-menu-item{ width:100%; }

  .amb-main-menu .amb-menu a,
  .amb-vertical-menu .amb-menu a{ padding:12px 20px; }

  /* Submenús normales dentro del drawer */
  .amb-main-menu .amb-submenu,
  .amb-vertical-menu .amb-submenu{
    position: static;
    min-width: auto;
    box-shadow: none;
    padding: 0;
    background: rgba(255,255,255,0.08);
    display: none;
  }
  .amb-main-menu .amb-has-children.amb-active .amb-submenu,
  .amb-vertical-menu .amb-has-children.amb-active .amb-submenu{ display:block; }

  .amb-main-menu .amb-has-children > a::after,
  .amb-vertical-menu .amb-has-children > a::after{ position:absolute; right:20px; }

  .amb-main-menu .amb-toggle-submenu,
  .amb-vertical-menu .amb-toggle-submenu{
    margin-left:auto;
    transition: transform 0.3s ease;
  }
  .amb-main-menu .amb-has-children.amb-active .amb-toggle-submenu,
  .amb-vertical-menu .amb-has-children.amb-active .amb-toggle-submenu{ transform: rotate(180deg); }

  /* ---------- MEGA MENÚ EN MÓVIL (CENTRADO) ---------- */
  .amb-main-menu .amb-mega-menu-content,
  .amb-vertical-menu .amb-mega-menu-content{
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(92vw, 700px);
    max-height: 82vh;
    display: none;            /* se abre con .amb-mega-open en JS */
    background: #252424;
    z-index: 1003;            /* por encima del drawer (1002) */
    overflow: auto;
    transform: translate(-50%,-50%);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    padding: 0;               /* header + body manejan el padding */
  }
  /* Cuando el item está abierto */
  .amb-menu-item.amb-mega-open > .amb-mega-menu-content{ display:block; }

  /* Header del mega-menú */
  .amb-mega-header{
    position: sticky; top: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(180deg,#2e2d2d 0%, #252424 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    z-index: 1;
  }
  .amb-mega-title{
    color:#fff; font-size:16px; font-weight:700; margin:0; line-height:1;
  }
  .amb-mega-actions{ display:flex; align-items:center; gap:8px; }

  .amb-mega-back,
  .amb-mega-close{
    background: transparent; border: 0; color: #fff;
    font-size: 16px; display:flex; align-items:center; gap:6px;
    padding: 8px 10px; border-radius: 10px; cursor: pointer;
  }
  .amb-mega-back{ font-weight:600; }
  .amb-mega-back:active, .amb-mega-close:active{ transform: scale(.98); }

  /* Cuerpo del mega-menú (envoltura que agregamos por JS) */
  .amb-mega-body{ padding: 14px 16px 18px; }

  /* Asegurar que el contenido embebido no desborde */
  .amb-mega-menu-content img,
  .amb-mega-menu-content iframe{ max-width:100%; height:auto; }
  .amb-mega-menu-content .amb-menu,
  .amb-mega-menu-content .amb-submenu{ width:100%; }

  /* Menús especiales */
  .amb-special-menu.amb-show-in-downloads,
  .amb-special-menu.amb-show-in-footer{
    display:block !important;
    position:static !important;
    width:auto !important;
    transform:none !important;
  }
  .amb-special-menu.amb-show-in-footer .amb-special-list{ flex-wrap: wrap; }
}

/* Animaciones */
@keyframes amb-slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes amb-section-bounce{
  0%,20%,50%,80%,100%{ transform: translateY(0); }
  40%{ transform: translateY(-20px); }
  60%{ transform: translateY(-10px); }
}
.amb-section-bounce{ animation: amb-section-bounce 1s; }