/* Menú del rector y de la Secretaría.
   Va arriba, debajo de la barra azul, en UNA FILA de botones con ícono. Los
   botones que agrupan varias pestañas se despliegan al pulsarlos: baja una
   lista con el ícono y el nombre de cada pestaña. En el celular se abre con el
   botón «Menú» y los grupos se despliegan uno debajo del otro.
   (El archivo conserva el nombre «menu-lateral» de la primera versión.) */
.ml-cuerpo{display:block}
.ml-lado{background:var(--surface);border-bottom:1px solid var(--line);padding:6px 12px;position:sticky;top:0;z-index:6}
.ml-boton{display:none}
nav.tabs#tabs{position:static;border:0;padding:0;background:transparent;overflow:visible}
.ml-lado .ml-n{background:var(--red,#C93C36);color:#fff;border-radius:999px;font-size:11px;font-weight:800;line-height:1.4;padding:1px 7px;flex:none;margin-left:8px}
nav.tabs#tabs .ml-t{min-width:0}
nav.tabs#tabs .ml-g{position:relative}
nav.tabs#tabs .ml-fl{width:16px;height:16px;flex:none;margin-left:8px;color:var(--ink-2);pointer-events:none;transition:transform .15s}
nav.tabs#tabs .ml-g.abierto>.ml-gb .ml-fl{transform:rotate(180deg);color:inherit}
nav.tabs#tabs .ml-p{display:none}
nav.tabs#tabs button:focus-visible,.ml-boton:focus-visible{outline:3px solid #F2B705;outline-offset:2px}
@media (prefers-reduced-motion:reduce){nav.tabs#tabs .ml-fl{transition:none}}

@media (min-width:901px){
  nav.tabs#tabs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
  nav.tabs#tabs>button,nav.tabs#tabs .ml-gb{display:flex;align-items:center;white-space:nowrap;font-size:14px;font-weight:700;line-height:1.15;color:var(--ink);padding:9px 13px;min-height:44px;border:1px solid transparent;border-radius:10px}
  nav.tabs#tabs>button:hover,nav.tabs#tabs .ml-gb:hover{border-color:var(--line);background:var(--bg)}
  nav.tabs#tabs>button.on{background:var(--brand-2);color:var(--brand)}
  nav.tabs#tabs .ml-g.actual>.ml-gb{color:var(--brand);box-shadow:inset 0 -3px 0 var(--acento,#4CB511)}
  nav.tabs#tabs .ml-g.actual>.ml-gb svg.ico{color:var(--brand)}
  nav.tabs#tabs .ml-g.abierto>.ml-gb{background:var(--brand-2);color:var(--brand);border-color:#9DBDE8}
  nav.tabs#tabs .ml-g.abierto>.ml-gb svg.ico{color:var(--brand)}
  /* La lista que baja */
  nav.tabs#tabs .ml-g.abierto>.ml-p{display:grid}
  nav.tabs#tabs .ml-p{position:absolute;top:calc(100% + 6px);left:0;z-index:20;grid-template-columns:minmax(0,1fr);gap:2px;width:264px;max-width:calc(100vw - 24px);max-height:calc(100vh - 150px);overflow-y:auto;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(16,40,43,.16)}
  nav.tabs#tabs .ml-p.ml-dos{grid-template-columns:repeat(2,minmax(0,1fr));width:476px}
  nav.tabs#tabs .ml-p.ml-der{left:auto;right:0}
  nav.tabs#tabs .ml-p button{display:flex;align-items:center;justify-content:flex-start;width:100%;text-align:left;white-space:normal;font-size:14px;font-weight:600;line-height:1.2;color:var(--ink);padding:10px 12px;min-height:42px;border-radius:9px}
  nav.tabs#tabs .ml-p button:hover{background:var(--bg)}
  nav.tabs#tabs .ml-p button.on{background:var(--brand);color:#fff;box-shadow:none}
  nav.tabs#tabs .ml-p button.on svg.ico{color:#fff}
  nav.tabs#tabs .ml-p button .ml-n{margin-left:auto}
  nav.tabs#tabs .ml-ruta{display:none}
}
/* Pantallas anchas: a la derecha se lee dónde se está («Año escolar › Permanencia») */
@media (min-width:1240px){
  nav.tabs#tabs .ml-ruta{display:block;margin-left:auto;padding:0 6px;font-size:13px;color:var(--ink-2);white-space:nowrap}
  nav.tabs#tabs .ml-ruta b{color:var(--ink)}
}
/* Pantallas medianas: botones más ajustados para que sigan en una fila */
@media (min-width:901px) and (max-width:1040px){
  .ml-lado{padding:6px 8px}
  nav.tabs#tabs{gap:4px 2px}
  nav.tabs#tabs>button,nav.tabs#tabs .ml-gb{font-size:13px;padding:9px 8px}
  nav.tabs#tabs>button svg.ico,nav.tabs#tabs .ml-gb svg.ico{margin-right:5px}
  nav.tabs#tabs .ml-fl{margin-left:4px}
  .ml-lado .ml-n{margin-left:5px}
}

@media (max-width:900px){
  .ml-lado{position:static;padding:8px 12px}
  .ml-boton{display:flex;align-items:center;gap:8px;width:100%;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-height:44px;font-weight:700;text-align:left}
  .ml-boton::before{content:"";width:16px;height:12px;flex:none;background:linear-gradient(var(--brand),var(--brand)) top/100% 2px no-repeat,linear-gradient(var(--brand),var(--brand)) center/100% 2px no-repeat,linear-gradient(var(--brand),var(--brand)) bottom/100% 2px no-repeat}
  .ml-boton span{color:var(--ink-2);font-weight:600}
  .ml-boton .ml-n{color:#fff;font-weight:800;margin-left:auto}
  .ml-lado.abierto .ml-boton .ml-n{display:none}
  .ml-lado nav.tabs#tabs{display:none;margin-top:8px;flex-direction:column;gap:6px}
  .ml-lado.abierto nav.tabs#tabs{display:flex}
  nav.tabs#tabs .ml-ruta{display:none}
  nav.tabs#tabs>button,nav.tabs#tabs .ml-gb{display:flex;align-items:center;width:100%;text-align:left;white-space:normal;font-size:15px;font-weight:700;line-height:1.2;color:var(--ink);background:var(--surface);padding:7px 12px;min-height:52px;border:1px solid var(--line);border-radius:12px}
  nav.tabs#tabs>button svg.ico,nav.tabs#tabs .ml-gb svg.ico{width:36px;height:36px;padding:8px;box-sizing:border-box;border-radius:999px;background:#EEF6E8;margin-right:10px}
  nav.tabs#tabs>button .ml-t,nav.tabs#tabs .ml-gb .ml-t{flex:1}
  nav.tabs#tabs>button.on{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:none}
  nav.tabs#tabs>button.on svg.ico{background:rgba(255,255,255,.18);color:#fff}
  nav.tabs#tabs .ml-g.actual>.ml-gb{border-color:var(--brand);box-shadow:inset 4px 0 0 var(--acento,#4CB511)}
  nav.tabs#tabs .ml-g.abierto>.ml-gb{background:var(--brand-2);color:var(--brand);border-color:#9DBDE8}
  nav.tabs#tabs .ml-g.abierto>.ml-gb svg.ico{background:var(--brand);color:#fff}
  /* Las pestañas del grupo, debajo y con sangría */
  nav.tabs#tabs .ml-g.abierto>.ml-p{display:flex;flex-direction:column;gap:2px;margin:6px 0 2px 18px;padding-left:10px;border-left:3px solid #C9DCF3}
  nav.tabs#tabs .ml-p button{display:flex;align-items:center;width:100%;text-align:left;white-space:normal;font-size:15px;font-weight:600;line-height:1.2;color:var(--ink);padding:8px 12px;min-height:46px;border-radius:10px;overflow-wrap:anywhere}
  nav.tabs#tabs .ml-p button svg.ico{width:20px;height:20px;margin-right:12px}
  nav.tabs#tabs .ml-p button .ml-t{flex:1}
  nav.tabs#tabs .ml-p button.on{background:var(--brand);color:#fff;box-shadow:none}
  nav.tabs#tabs .ml-p button.on svg.ico{color:#fff}
}