/* ==========================================================================
   custom.css — Estilos personalizados para casadecontenedores.com (static)
   Edita este archivo para personalizar la apariencia del sitio.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MENÚ HAMBURGUESA
   Controla la apertura/cierre del overlay lateral de navegación.
   El JS en inject_menu.py maneja data-visible="true/false" en #comp-mfy8mq19.
   -------------------------------------------------------------------------- */

/* Oculto por defecto */
#comp-mfy8mq19[data-visible="false"],
#comp-mfy8mq19:not([data-visible="true"]) {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Visible al abrir */
#comp-mfy8mq19[data-visible="true"] {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Fondo oscuro semitransparente al abrir */
#comp-mfy8mq19[data-visible="true"] .HamburgerOverlay547129737__overlay {
  display: block !important;
  background: rgba(0, 0, 0, 0.4) !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* Panel blanco deslizable desde la derecha */
#comp-mfy8mq24 {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  width: min(480px, 80vw) !important;
  background: #fff !important;
  box-shadow: -3px 0 30px 3px rgba(0, 0, 0, 0.2) !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  padding: 24px 0 !important;
  transition: transform 0.3s ease !important;
}

/* Panel cerrado → fuera de pantalla */
#comp-mfy8mq19[data-visible="false"] #comp-mfy8mq24,
#comp-mfy8mq19:not([data-visible="true"]) #comp-mfy8mq24 {
  transform: translateX(110%) !important;
}

/* Panel abierto → en pantalla */
#comp-mfy8mq19[data-visible="true"] #comp-mfy8mq24 {
  transform: translateX(0) !important;
}

/* Botón cerrar alineado a la derecha */
#comp-mfy8mq2d {
  display: flex !important;
  justify-content: flex-end !important;
  padding-right: 20px !important;
  margin-bottom: 16px !important;
}

#comp-mfy8mq2d button {
  cursor: pointer !important;
}


/* --------------------------------------------------------------------------
   2. ESTILOS PERSONALIZADOS
   Añade aquí tus propias reglas para modificar la apariencia del sitio.
   -------------------------------------------------------------------------- */

/* Ejemplo: cambiar el color del encabezado */
/* #SITE_HEADER {
    background-color: #ffffff !important;
} */

/* Ejemplo: fuente global */
/* body {
    font-family: 'Helvetica Neue', sans-serif;
} */