/* Rayo Hamburguesa Mobile v1.1.0 - estilo tipo app Mercado Libre (MODIFICADO para Overlay, 80% de Ancho y Slide del contenido) */

/* El z-index del panel será 10000, por lo que estos deben estar por debajo */
#header-mobile-fijo, #menu-mobile-fijo { z-index:9000 !important; }

/* Oculto en desktop */
@media(min-width:769px){.rayo-hamburger-wrapper{display:none!important;}}

/* Wrapper */
.rayo-hamburger-wrapper{display:inline-block;}

/* Botón (MODIFICADO para replicar el estilo de pestaña lateral fija en la derecha) */
.rayo-hamburger-btn{
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;

  /* Posición fija tipo "pestaña" a la DERECHA */
  position: fixed;
  top: 150px; /* Misma posición que el cdt-filtros */
  right: 0;
  left: auto;
  z-index: 9999;

  /* Redondeo solo en la izquierda */
  border-radius: 5px 0 0 5px;

  display: flex;
  align-items: center;
  gap: 8px;
}
.rayo-hamburger-btn:hover {
  background-color: #555;
}


/* Panel (actúa como el overlay completo, sin deslizar, solo controlando opacidad) */
.rayo-hamburger-panel{
  position:fixed;
  top:0; /* 100% del alto */
  bottom:0; /* 100% del alto */
  left:0;
  right:0;
  width:100%;
  height: 100%;
  /* CAMBIO: Overlay más suave (0.5), como el cdt-filtros */
  background:rgba(0,0,0,0.5);

  /* NUEVO: Inicialmente invisible y transparente */
  opacity: 0;
  visibility: hidden;
  /* CAMBIO: Transición a 0.3s */
  transition: opacity .3s ease, visibility .3s ease;

  /* CAMBIO: Z-INDEX más alto para estar por encima del botón */
  z-index:10000;
  box-shadow:none;
  /* IMPORTANTE: Evita que cualquier toque en el overlay propague la acción al fondo */
  touch-action: none;
  overflow:hidden;
}

/* Panel abierto: overlay visible y opaco */
.rayo-hamburger-panel.is-open{
  opacity: 1;
  visibility: visible;
}

/* Contenido interno (el panel de contenido real, 80% de ancho, fondo blanco, AHORA ES EL QUE SE DESLIZA) */
.rayo-hamburger-inner{
  /* Posicionamiento del panel de contenido a la derecha */
  position:absolute;
  /* El top y height 100% se ajustará en JS para empezar en 153px */
  top:0;
  right:0;

  width:80%; /* 80% del ancho de la pantalla */
  height:100%; /* 100% del alto de la pantalla */
  background:#fff; /* Fondo blanco para el contenido */

  /* Desplazamiento inicial fuera de la vista y transición */
  transform: translateX(100%);
  /* CAMBIO: Transición a 0.3s ease-in-out */
  transition: transform .3s ease-in-out;

  /* Propiedades de scroll */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* CAMBIO: Padding aumentado a 25px */
  padding:25px;

  /* SOLUCIÓN SCROLL CHAINING: Evita que el scroll se propague al fondo */
  overscroll-behavior: contain;
  /* Asegura que el scroll del panel sea el único que se active verticalmente */
  touch-action: pan-y;
}

/* El contenido interno se mueve a posición 0 cuando el panel padre (overlay) está abierto */
.rayo-hamburger-panel.is-open .rayo-hamburger-inner{
  transform: translateX(0);
}

/* Botón cerrar (Ajustado al estilo y tamaño de la 'X' de cdt-filtros) */
.rayo-hamburger-close{
  position:absolute;
  /* Reajustado por el padding de 25px */
  top:15px;right:15px;
  background:transparent;border:none;
  font-size:32px; /* Tamaño del cdt-filtros */
  line-height:1;
  cursor:pointer;
  z-index:2;
  color: #888;
  padding: 5px;
}
.rayo-hamburger-close:hover {
  color: #000;
}


/* Oculto en desktop */
@media(min-width:769px){.rayo-hamburger-wrapper{display:none!important;}}


/* SOLUCIÓN SCROLL EXTREMA: Bloquea el scroll del body cuando el menú está abierto */
body.menu-mobile-open {
    overflow: hidden !important;
}