/* Menú lateral compartido (mismo que el de la app de estudio). Se pinta con menu.js */
.menu-btn{width:36px;height:36px;flex:none;display:grid;place-items:center;padding:0;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;cursor:pointer}
.menu-btn svg{width:20px;height:20px}
.menu-btn:focus-visible,.mi:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#menu{position:fixed;top:0;bottom:0;left:0;z-index:20;width:82%;max-width:320px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;background:var(--surface);border-right:1px solid var(--line);text-align:left;
  padding:calc(22px + env(safe-area-inset-top,0px)) 12px calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s .24s}
body.menu-abierto #menu{transform:none;visibility:visible;transition-delay:0s}
.scrim{position:fixed;inset:0;z-index:19;background:rgba(10,14,20,.5);opacity:0;visibility:hidden;transition:opacity .24s,visibility 0s .24s}
body.menu-abierto .scrim{opacity:1;visibility:visible;transition-delay:0s}
body.menu-abierto{overflow:hidden}
.menu-marca{font-family:var(--read,Georgia,serif);font-weight:700;font-size:1.05rem;padding:0 14px 18px;color:var(--ink)}
.mi{display:flex;align-items:center;gap:14px;width:100%;padding:10px 14px;border:0;border-radius:10px;background:none;color:var(--ink);text-align:left;text-decoration:none;font:inherit;font-family:var(--ui,"Figtree",system-ui,sans-serif);line-height:1.3;cursor:pointer}
.mi:hover{background:var(--sunk,color-mix(in srgb,var(--ink) 7%,transparent))}
.mi[aria-current="page"]{background:var(--accent-soft,color-mix(in srgb,var(--accent) 16%,transparent))}
.mi svg{width:22px;height:22px;flex:none;color:var(--muted)}
.mi[aria-current="page"] svg{color:var(--accent)}
.mi span{display:flex;flex-direction:column;min-width:0}
.mi b{font-size:.98rem;font-weight:700;line-height:1.3}
.mi small{font-size:.76rem;line-height:1.35;color:var(--muted)}
#menu hr{width:100%;margin:8px 0;border:0;border-top:1px solid var(--line)}
.mi-ayuda{margin-top:auto}
@media (prefers-reduced-motion:reduce){#menu,.scrim{transition:none}}
.menu-btn+.marca{margin-right:auto}
.menu-marca{display:flex;align-items:center;gap:8px}
.menu-marca img{display:block;flex:none;border-radius:6px}
#menu .mi{margin:0;font-weight:400}
#menu .mi-ayuda{margin-top:auto}
@media (min-width:900px){
  body:has(nav.tabs[data-vista-app]) #menu{z-index:7;width:220px;max-width:none;max-height:calc(100vh - 330px);top:auto;transform:none;visibility:visible;padding:12px 12px 16px;border-top:1px solid var(--line);transition:none}
  body:has(nav.tabs[data-vista-app]) .menu-btn,body:has(nav.tabs[data-vista-app]) .scrim,body:has(nav.tabs[data-vista-app]) .menu-marca,body:has(nav.tabs[data-vista-app]) .mi-hoy{display:none!important}
  body:has(nav.tabs[data-vista-app]) #menu .mi small{display:none}
}

body.focus .menu-btn{display:none}
@media (min-width:900px){body:has(nav.tabs[data-vista-app]) #menu .mi{padding:9px 14px;font-size:.98rem}body.focus #menu{display:none!important}}