/*
 * v24 · El menú lateral se contrae en computadora, tableta y teléfono.
 */

/* El botón del menú existe en todos los tamaños. En pantalla grande contrae
   la barra a solo iconos; en pantalla chica abre y cierra el cajón. */
.menu-button{display:grid}
.menu-rayas,
.menu-rayas::before,
.menu-rayas::after{
	display:block;width:17px;height:2px;border-radius:2px;background:currentColor;
	transition:transform .22s ease,opacity .18s ease;
}
.menu-rayas{position:relative}
.menu-rayas::before,.menu-rayas::after{content:"";position:absolute;left:0}
.menu-rayas::before{top:-6px}
.menu-rayas::after{top:6px}
.menu-button[aria-expanded="false"] .menu-rayas{width:13px}
.menu-button[aria-expanded="false"] .menu-rayas::before{width:17px}
.menu-button[aria-expanded="false"] .menu-rayas::after{width:17px}

/* --- Contraída: solo los iconos --- */
.app-shell.menu-angosto .app-layout{grid-template-columns:72px minmax(0,1fr)}
.app-shell.menu-angosto .sidebar{padding:18px 9px;overflow-x:hidden}
.app-shell.menu-angosto .sidebar nav a{justify-content:center;gap:0;padding:12px 0}
.app-shell.menu-angosto .sidebar nav a>span{display:none}
.app-shell.menu-angosto .sidebar nav a.active{box-shadow:inset 3px 0 var(--nav-accent)}
/* El rótulo del grupo se vuelve una rayita: sigue separando, sin estorbar. */
.app-shell.menu-angosto .nav-divider{
	height:1px;margin:12px 10px;padding:0;overflow:hidden;
	background:var(--nav-line, rgba(255,255,255,.18));color:transparent;
}
.app-shell.menu-angosto .sync-card{flex-direction:column;gap:4px;padding:9px 6px;text-align:center}
.app-shell.menu-angosto .sync-card div,
.app-shell.menu-angosto .sync-card small,
.app-shell.menu-angosto .sync-card b{display:none}
.app-shell.menu-angosto .sync-card .icon{margin:0}
.app-layout{transition:grid-template-columns .22s ease}

/* El nombre lo muestra el navegador con el atributo «title» del enlace: un
   globo hecho con CSS quedaría recortado por el propio menú, que necesita
   poder desplazarse cuando hay muchos módulos. */

/* --- En teléfono y tableta sigue siendo un cajón que entra y sale --- */
@media(max-width:900px){
	.app-shell.menu-angosto .app-layout{grid-template-columns:1fr}
	.app-shell.menu-angosto .sidebar{padding:18px 12px;width:262px}
	.app-shell.menu-angosto .sidebar nav a{justify-content:flex-start;gap:12px;padding:11px 12px}
	.app-shell.menu-angosto .sidebar nav a>span{display:inline}
	.app-shell.menu-angosto .nav-divider{
		height:auto;margin:0;padding:18px 12px 6px;background:none;color:var(--nav-text-dim);overflow:visible;
	}
	.app-shell.menu-angosto .sync-card{flex-direction:row;gap:9px;padding:11px;text-align:left}
	.app-shell.menu-angosto .sync-card div,
	.app-shell.menu-angosto .sync-card small,
	.app-shell.menu-angosto .sync-card b{display:block}
}