/* MichaelMontes.us · navegación universal v1.2
   El aspecto visual NO se define aquí.
   Logo, menú principal y menú móvil usan directamente /core/base.css.
   Este archivo solo posiciona el submenú contextual. */

.mmContextPanel{
  position:fixed;
  left:50%;
  z-index:85;
  width:min(1120px,calc(100% - 28px));
  transform:translateX(-50%);
  overflow:auto;
  padding:16px;
  border:5px solid var(--ink);
  border-radius:18px 12px 19px 13px;
  background:var(--paper);
  color:var(--white);
  box-shadow:8px 8px 0 var(--shadow)
}
.mmContextPanel[hidden]{display:none!important}
.mmContextHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px
}
.mmContextHead h2{
  margin:0;
  color:var(--white);
  font:900 27px/1.1 var(--sans)
}
.mmContextClose{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border:4px solid var(--ink);
  border-radius:13px 10px 14px 11px;
  background:var(--yellow);
  color:var(--ink);
  box-shadow:5px 5px 0 var(--shadow);
  font:900 22px/1 var(--sans)
}
.mmContextGroup + .mmContextGroup{
  margin-top:16px;
  padding-top:14px;
  border-top:3px dashed var(--paper-3)
}
.mmContextTitle{
  margin:0 0 10px;
  color:var(--white);
  font:900 20px/1.2 var(--sans)
}
.mmContextGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px
}
.mmContextGrid .menuItem{
  width:100%;
  white-space:normal;
  text-align:center
}
.mmContextGrid .menuItem.active{background:var(--yellow)}
.mmMobileContext{
  margin-top:18px;
  padding-top:15px;
  border-top:3px dashed var(--paper-3)
}
.mmMobileContextTitle{
  margin:0 0 10px;
  color:var(--white);
  font-size:20px;
  font-weight:900
}
@media(max-width:900px){
  .mmContextGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .mmContextPanel{display:none!important}
}