/* ===== Menú visual estilo panel lateral ===== */
:root{
  --panel-bg: #0f1419;
  --panel-card: #151b22;
  --panel-card-border: #1f2a37;
  --panel-text: #e6edf3;
  --panel-muted: #9aa7b2;
  --panel-accent: #0d6efd;
  --panel-radius: 16px;
}

#screenMenu.menu-sidepanel{
  min-height: calc(100vh - 56px);
  background:
    radial-gradient(1000px 600px at 25% 40%, rgba(0,255,200,.06), transparent 60%),
    linear-gradient(180deg, rgba(5,8,11,.85), rgba(5,8,11,.95));
  padding: clamp(8px, 2.6vw, 28px);
  color: var(--panel-text);
}
#screenMenu.menu-sidepanel .menu-layout{
  display:grid;
  grid-template-columns:minmax(320px,420px) 1fr;
  gap:clamp(12px,3vw,36px);
  align-items:start;
  max-width:1400px;
  margin:0 auto;
}
#screenMenu.menu-sidepanel .menu-side{
  position:sticky;
  top:clamp(8px, 2.6vw, 28px);
  max-height:calc(100vh - 56px - clamp(8px, 2.6vw, 28px));
  overflow:auto;
  padding-right:2px;
}
.menu-card{
  background:var(--panel-card);
  border:1px solid var(--panel-card-border);
  border-radius:var(--panel-radius);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  padding:14px 14px 10px;
  margin-bottom:14px;
}
.menu-card .section-title{
  font-weight:800;
  color:var(--panel-accent);
  font-size:clamp(18px, 1.2rem, 22px);
  margin:2px 2px 8px;
  letter-spacing:.2px;
}
.menu-card .section-copy{
  color:var(--panel-muted);
  font-size:13px;
  line-height:1.45;
  margin:0 2px 10px;
}
.menu-card .group-title{
  color:var(--panel-muted);
  font-size:12.5px;
  margin:8px 2px 6px;
}
.menu-list{display:grid; gap:8px; margin:6px 0 10px;}
.menu-item.btn{
  all:unset;
  display:grid;
  grid-template-columns:42px 1fr 18px;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:12px;
  cursor:pointer;
  color:var(--panel-text);
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.04);
}
.menu-item.btn:hover{ background:rgba(255,255,255,.06); }
.menu-item.btn:focus-visible{ outline:2px solid var(--panel-accent); outline-offset:2px; }
.mi-icon{
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  color:#0b2610; font-weight:800; font-size:18px;
}
.mi-copy{display:flex; flex-direction:column; gap:2px; min-width:0;}
.mi-label{font-weight:700; letter-spacing:.2px;}
.mi-sub{font-size:12px; color:var(--panel-muted); line-height:1.35;}
.mi-chevron{color:var(--panel-muted); font-size:20px;}
.menu-hero{
  min-height:72vh;
  border-radius:var(--panel-radius);
  border:1px solid var(--panel-card-border);
  background:
    linear-gradient(180deg, rgba(9,14,19,.45), rgba(9,14,19,.58)),
    radial-gradient(700px 420px at 75% 35%, rgba(56,242,198,.14), transparent 60%),
    url('menu-hero.jpg') center center / cover no-repeat;
  box-shadow:0 12px 36px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
}
.menu-hero::after{
  content:'';
  position:absolute; inset:auto 18px 18px 18px;
  height:120px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(12,18,24,.05), rgba(12,18,24,.78));
}
.menu-hero-content{
  position:absolute; left:24px; right:24px; bottom:28px; z-index:1;
  color:#f8fbff;
}
.menu-hero-kicker{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,18,26,.45);
  backdrop-filter: blur(8px);
  color:#dbeafe;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  margin-bottom:12px;
}
.menu-hero h2{
  margin:0 0 8px;
  font-size:clamp(24px, 3vw, 40px);
  line-height:1.1;
}
.menu-hero p{
  margin:0; max-width:720px; color:#d9e6f2; line-height:1.55;
}
@media (max-width: 840px){
  #screenMenu.menu-sidepanel .menu-layout{ grid-template-columns:1fr; gap:12px; }
  .menu-hero{ min-height:280px; }
  #screenMenu.menu-sidepanel .menu-side{ position:static; max-height:none; overflow:visible; }
}