/* Barra lateral expandible: nombres visibles o solo iconos. */
.app-shell { grid-template-columns:248px minmax(0,1fr); }
.app-shell.nav-collapsed { grid-template-columns:72px minmax(0,1fr); }
.workspace { grid-column:2; }
.sidebar { z-index:40; gap:0; padding:16px 10px 12px; overflow-x:hidden; overflow-y:auto; }
.brand { min-height:56px; padding:0 4px 14px; }
.brand>div { min-width:0; overflow:hidden; white-space:nowrap; }
.brand-mark { flex:0 0 42px; width:42px; height:42px; }
.sidebar-menu-toggle { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; margin-top:12px; padding:9px 13px; border:1px solid rgba(255,255,255,.22); border-radius:6px; background:transparent; color:#edf4f9; cursor:pointer; font-size:.82rem; font-weight:700; text-align:left; }
.sidebar-menu-toggle:hover { border-color:#7fb2cd; background:var(--nav-2); }
.sidebar-menu-toggle:focus-visible { outline:3px solid #8fc9e7; outline-offset:2px; }
.menu-icon { display:block; flex:0 0 auto; width:11px; height:11px; margin-left:5px; border-bottom:2px solid currentColor; border-left:2px solid currentColor; transform:rotate(45deg); }
.menu-toggle-label { white-space:nowrap; }
.side-nav { gap:3px; margin-top:13px; }
.side-nav button { gap:8px; min-height:46px; padding:9px 10px; font-size:.85rem; }
.side-nav button[aria-current="page"] { background:#e9f3f8; color:#133c56; }
.nav-item { display:flex; align-items:center; gap:10px; min-width:0; }
.nav-icon { display:block; flex:0 0 auto; width:20px; height:20px; }
.nav-item>span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-count { flex:0 0 auto; }
.sidebar-footer { margin-top:auto; padding:12px 4px 2px; }
#localDataNotice { margin-bottom:12px; }
.sidebar.is-collapsed { align-items:center; padding-right:8px; padding-left:8px; }
.sidebar.is-collapsed .brand { justify-content:center; width:100%; padding:0 0 14px; }
.sidebar.is-collapsed .brand>div,
.sidebar.is-collapsed .menu-toggle-label,
.sidebar.is-collapsed .nav-item>span:last-child,
.sidebar.is-collapsed .nav-count,
.sidebar.is-collapsed .sidebar-footer { display:none; }
.sidebar.is-collapsed .sidebar-menu-toggle { justify-content:center; width:48px; padding:9px; }
.sidebar.is-collapsed .menu-icon { margin:0 4px 0 0; transform:rotate(225deg); }
.sidebar.is-collapsed .side-nav { width:100%; }
.sidebar.is-collapsed .side-nav button { justify-content:center; min-height:48px; padding:10px; }
.sidebar.is-collapsed .nav-item { justify-content:center; width:100%; gap:0; }
.mobile-view-picker { display:none!important; }
@media (max-width:900px) {
  .app-shell,.app-shell.nav-collapsed { display:grid; grid-template-columns:56px minmax(0,1fr); }
  .sidebar { position:sticky; top:0; display:flex; width:56px; height:100dvh; padding:12px 4px; }
  .sidebar:not(.is-expanded) { align-items:center; }
  .sidebar:not(.is-expanded) .brand { justify-content:center; width:100%; padding:0 0 12px; }
  .sidebar:not(.is-expanded) .brand>div,
  .sidebar:not(.is-expanded) .menu-toggle-label,
  .sidebar:not(.is-expanded) .nav-item>span:last-child,
  .sidebar:not(.is-expanded) .nav-count,
  .sidebar:not(.is-expanded) .sidebar-footer { display:none; }
  .sidebar:not(.is-expanded) .sidebar-menu-toggle { justify-content:center; width:48px; padding:9px; }
  .sidebar:not(.is-expanded) .menu-icon { margin:0 4px 0 0; transform:rotate(225deg); }
  .sidebar:not(.is-expanded) .side-nav { width:100%; }
  .sidebar:not(.is-expanded) .side-nav button { justify-content:center; min-height:48px; padding:10px; }
  .sidebar:not(.is-expanded) .nav-item { justify-content:center; width:100%; gap:0; }
  .sidebar.is-expanded { position:fixed; top:0; left:0; width:min(264px,calc(100vw - 24px)); padding:16px 10px 12px; box-shadow:12px 0 28px rgba(10,20,33,.22); }
  body.nav-mobile-open::before { position:fixed; inset:0; z-index:30; background:rgba(11,24,40,.36); content:""; }
  body.nav-mobile-open { overflow:hidden; }
  .topbar { grid-template-columns:minmax(0,1fr); }
  .topbar-title,.topbar-actions { grid-column:1; }
}
@media (max-width:720px) {
  .topbar { padding:12px; }
  main { padding:12px 10px 28px; }
}