/* Unificación de menús: botón hamburguesa + right-side-menu */

:root{
  --rsm-font: var(--font-body, 'Poppins', Arial, sans-serif);
  --rsm-text: #111827;
  --rsm-muted: #6b7280;
  --rsm-border: #e5e7eb;
  --rsm-surface: #ffffff;
  --rsm-hover: #f1f5f9;
}

/* --- Botones de menú en header (desktop/móvil/tablet) --- */
button#site-menu-btn,
button#site-menu-btn-mobile,
button#site-menu-btn-mobile-header{
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid var(--rsm-border) !important;
  background: #fff !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}

@media (max-width: 700px){
  button#site-menu-btn,
  button#site-menu-btn-mobile,
  button#site-menu-btn-mobile-header{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }
}

button#site-menu-btn svg,
button#site-menu-btn-mobile svg,
button#site-menu-btn-mobile-header svg{
  width: 20px !important;
  height: 20px !important;
}

/* Variante "hamb" (inicio) */
.menu-btn .hamb,
#site-menu-btn .hamb,
#site-menu-btn-mobile .hamb{
  display:inline-block;
  width:20px;
  height:14px;
  position:relative;
}
.menu-btn .hamb-line,
#site-menu-btn .hamb-line,
#site-menu-btn-mobile .hamb-line{
  display:block;
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:#111827;
  border-radius:2px;
}
.menu-btn .hamb-line.top,
#site-menu-btn .hamb-line.top,
#site-menu-btn-mobile .hamb-line.top{ top:0; }
.menu-btn .hamb-line.mid,
#site-menu-btn .hamb-line.mid,
#site-menu-btn-mobile .hamb-line.mid{ top:6px; }
.menu-btn .hamb-line.bot,
#site-menu-btn .hamb-line.bot,
#site-menu-btn-mobile .hamb-line.bot{ top:12px; }

/* Variante "hamburger" (planes/contacto) */
#site-menu-btn .hamburger{
  display:inline-block;
  width:18px;
  height:14px;
  position:relative;
}
#site-menu-btn .hamburger span{
  display:block;
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:#111827;
  border-radius:2px;
}
#site-menu-btn .hamburger span:nth-child(1){ top:0; }
#site-menu-btn .hamburger span:nth-child(2){ top:6px; }
#site-menu-btn .hamburger span:nth-child(3){ top:12px; }

/* --- Menú lateral derecho (right-side-menu) --- */
.right-side-menu-overlay{
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 35000;
  backdrop-filter: blur(2px);
}

.right-side-menu-overlay.open{
  opacity: 1;
  pointer-events: auto;
}

.right-side-menu{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(380px, 92vw);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-left: 1px solid var(--rsm-border);
  box-shadow: -18px 0 40px rgba(15, 23, 42, 0.14);
  transform: translateX(102%);
  transition: transform 0.28s cubic-bezier(.2, .9, .2, 1);
  z-index: 35001;
  display: flex;
  flex-direction: column;
}

.right-side-menu.open{ transform: translateX(0); }

@media (max-width: 700px){
  .right-side-menu{ width: min(240px, 72vw); }
}

@media (max-width: 420px){
  .right-side-menu{ width: min(220px, 68vw); }
}

.right-side-menu-overlay{
  background: rgba(15, 23, 42, 0.45) !important;
}

.right-side-menu{
  font-family: var(--rsm-font) !important;
}

/* Base layout (some pages only include this shared CSS) */
.right-side-menu .rsm-header{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  column-gap: 12px !important;
}

.right-side-menu .rsm-nav{
  display: flex !important;
  flex-direction: column !important;
  overflow: auto !important;
}

.right-side-menu .rsm-link{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: background 0.14s ease !important;
}

.right-side-menu .rsm-link:visited{
  color: var(--rsm-text) !important;
}

/* Keep danger links (logout) red even after being visited */
.right-side-menu .rsm-danger:visited{
  color: #dc2626 !important;
}

.right-side-menu .rsm-header{
  padding: 18px 18px !important;
  border-bottom: 1px solid #eef2f7 !important;
  background: linear-gradient(135deg, rgba(29,78,216,0.08), rgba(14,165,233,0.06));
}

.right-side-menu .rsm-title{
  font-family: var(--rsm-font) !important;
  font-weight: 700 !important;
  color: var(--rsm-text) !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.right-side-menu .rsm-subtitle{
  font-family: var(--rsm-font) !important;
  color: var(--rsm-muted) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin-top: 4px !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.right-side-menu .rsm-close{
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid var(--rsm-border) !important;
  background: #ffffff !important;
  color: var(--rsm-text) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
}

.right-side-menu .rsm-nav{
  padding: 12px 12px 18px 12px !important;
  gap: 8px !important;
}

.right-side-menu .rsm-link{
  font-family: var(--rsm-font) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--rsm-text) !important;
  padding: 12px 12px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: rgba(255,255,255,0.7) !important;
}

@media (max-width: 700px){
  .right-side-menu .rsm-title{ font-size: 14px !important; }
  .right-side-menu .rsm-subtitle{ font-size: 11px !important; }
  .right-side-menu .rsm-link{ font-size: 13px !important; }
}

.right-side-menu .rsm-link:hover{
  background: #f1f5f9 !important;
  border-color: rgba(29,78,216,0.18) !important;
}

.right-side-menu .rsm-danger{ color: #dc2626 !important; }
.right-side-menu .rsm-danger:hover{ background: #fef2f2 !important; }

.right-side-menu .rsm-sep{
  height: 1px !important;
  background: #eef2f7 !important;
  margin: 8px 4px !important;
}

@media (max-width: 700px){
  .right-side-menu .rsm-header{ padding: 12px 12px !important; }
  .right-side-menu .rsm-title{ font-size: 15px !important; }
  .right-side-menu .rsm-close{ width: 34px !important; height: 34px !important; font-size: 20px !important; }
  .right-side-menu .rsm-nav{ padding: 8px 8px 12px 8px !important; gap: 4px !important; }
  .right-side-menu .rsm-link{ padding: 10px 10px !important; font-size: 13px !important; }
  .right-side-menu .rsm-sep{ margin: 6px 4px !important; }
}