/* Shell de la aplicación: barra lateral fija (256px, plegable a 72px) en escritorio; barra superior y cajón
   (<dialog>) en celular y tablet. Requiere tokens.css y components.css. El catálogo de rutas vive en navigation-catalog.js. */
body.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);grid-template-areas:"sidebar main";min-height:100dvh;background:var(--bg);transition:grid-template-columns var(--motion-base) var(--ease-in-out)}
html.sidebar-collapsed body.shell{grid-template-columns:var(--sidebar-collapsed) minmax(0,1fr)}
.shell-skip{position:absolute;left:var(--space-4);top:var(--space-2);z-index:60;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--surface);color:var(--primary);box-shadow:var(--shadow-md)}
.shell-skip:focus-visible{position:absolute;width:auto;height:auto;margin:0;clip:auto;overflow:visible;white-space:normal}
.shell-topbar{display:none}
.shell-sidebar{grid-area:sidebar;position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-2);background:var(--surface);border-right:var(--stroke) solid var(--border);overflow:hidden auto;min-width:0}
.shell-brand{display:flex;align-items:center;gap:var(--space-2);min-height:var(--topbar);padding:0 var(--space-2);text-decoration:none;color:var(--text)}
.shell-brand img{width:28px;height:28px;flex:none;border-radius:var(--radius-xs);background:var(--logo-surface);padding:2px}
.shell-brand strong{font:var(--text-subtitle);font-weight:600;white-space:nowrap}
.shell-brand small{display:block;font:var(--text-caption);color:var(--text-subtle);white-space:nowrap}
.shell-nav{display:grid;gap:2px;align-content:start;flex:1;min-width:0}
.shell-nav a{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-2);border-radius:var(--radius-sm);color:var(--text-muted);font:var(--text-body-small);font-weight:500;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell-nav a:hover{background:var(--hover-lift);color:var(--text)}
.shell-nav a[aria-current=page]{background:var(--primary-soft);color:var(--text)}
.shell-nav a[aria-current=page] .g-icon{color:var(--primary)}
.shell-nav a .g-icon{color:var(--text-subtle)}
.shell-nav a span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.shell-nav .g-skeleton{height:var(--control-md);border-radius:var(--radius-sm);margin:0 var(--space-2)}
.shell-footer{display:grid;gap:var(--space-2);padding:var(--space-2) var(--space-2) 0;border-top:var(--stroke) solid var(--border)}
.shell-user{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-1);color:var(--text-muted);font:var(--text-caption);text-decoration:none;min-width:0}
.shell-user strong{font:var(--text-body-small);font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell-user .shell-avatar{width:24px;height:24px;flex:none;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font:var(--text-label);font-weight:600}
.shell-footer .g-segmented{justify-content:stretch}
.shell-footer .g-segmented button{flex:1}
.shell-collapse{justify-content:flex-start;color:var(--text-subtle)}
/* Plegado: sólo iconos, con title como tooltip nativo */
html.sidebar-collapsed .shell-sidebar{padding-inline:var(--space-2)}
html.sidebar-collapsed .shell-brand strong,html.sidebar-collapsed .shell-brand small,html.sidebar-collapsed .shell-nav a span,html.sidebar-collapsed .shell-user strong,html.sidebar-collapsed .shell-user small,html.sidebar-collapsed .shell-footer .g-segmented,html.sidebar-collapsed .shell-collapse span{display:none}
html.sidebar-collapsed .shell-brand,html.sidebar-collapsed .shell-nav a,html.sidebar-collapsed .shell-user,html.sidebar-collapsed .shell-collapse{justify-content:center;padding:0}
html.sidebar-collapsed .shell-nav a .g-icon{width:var(--icon-md);height:var(--icon-md)}
.shell-main{grid-area:main;min-width:0}
/* Celular y tablet: una columna, barra superior fija y cajón de navegación */
/* Cajón de navegación: se usa bajo 1024px en las páginas del shell y a cualquier ancho en Chat y Monitor (sin barra lateral).
   Sólo se muestra abierto: un display:flex sin [open] lo dejaría visible al cerrarlo. */
dialog.shell-drawer[open]{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-2)}
.shell-drawer .shell-brand{padding-right:var(--space-10)}
.shell-drawer .g-dialog-heading{position:absolute;right:var(--space-2);top:var(--space-2);margin:0;padding:0;min-height:0;background:transparent}
@media(max-width:1023px){
  body.shell,html.sidebar-collapsed body.shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"topbar" "main";grid-template-rows:auto 1fr}
  .shell-sidebar{display:none}
  .shell-topbar{grid-area:topbar;position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-2);min-height:var(--topbar);padding:0 var(--page-margin);background:var(--surface);border-bottom:var(--stroke) solid var(--border)}
  .shell-topbar img{width:28px;height:28px;border-radius:var(--radius-xs);background:var(--logo-surface);padding:2px}
  .shell-topbar strong{font:var(--text-subtitle);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(min-width:600px){
  html body dialog.shell-drawer[open]{position:fixed;inset:0 auto 0 0;margin:0;width:min(320px,85vw);height:100dvh;max-height:100dvh;border-radius:0;border-right:var(--stroke) solid var(--border);border-top:0;border-bottom:0;border-left:0;padding:var(--space-3) var(--space-2)}
}
@media(prefers-reduced-motion:reduce){body.shell{transition:none}}

/* Avisos de versión (release-banner.js): fijos arriba, sobre el contenido y bajo los diálogos modales. */
.release-banner{position:fixed;top:var(--space-4);left:50%;transform:translateX(-50%);z-index:40;width:min(560px,calc(100vw - 2 * var(--page-margin)));box-shadow:var(--shadow-3,0 8px 24px rgb(0 0 0 / .25));background:var(--surface-raised,var(--surface))}
.release-banner ul{margin:var(--space-2) 0 0;padding-left:var(--space-5)}
.release-banner-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.release-banner .g-btn{margin-top:0}