/* ui2 — menu lateral recolhível (trilho de ícones), cabeçalho padrão de página, densidade. Só CSS de layout; carrega depois dos temas. */
:root{--sbw:248px;--sbr:64px;--pad:clamp(12px,.85vw,20px);--gap:clamp(10px,.8vw,20px)}
body{font-size:13px}
.bmark{display:none}
#sbpin{display:none}
.sfic{display:none}
/* ---------- cabeçalho padrão de página (todas as páginas) ---------- */
main>header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:60px;padding:10px 0!important;box-sizing:border-box}
main>header h1{flex:1 1 260px;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;font-size:19px!important;line-height:1.2;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;margin:0}
main>header h1 .pgic{grid-row:1 / span 2;margin:0!important;width:34px;height:34px}
main>header h1 .sub{grid-column:2;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.35;margin-top:1px}
main>header #alertpill{flex:0 1 auto;margin-left:auto;max-width:100%;justify-content:flex-end;align-items:center;gap:6px}
main>header #alertpill>*{max-width:none!important}
main>header>button{flex:none}
@media(max-width:860px){main>header{min-height:52px;padding:8px 0!important}main>header h1{font-size:17px!important;flex-basis:180px}main>header h1 .pgic{width:30px;height:30px}main>header h1 .sub{display:none!important}}
@media(max-width:420px){main>header #alertpill{order:5;flex-basis:100%;justify-content:flex-start}}
/* ---------- trilho lateral (desktop) ---------- */
@media(min-width:861px){
 #app{padding-left:var(--sbw)}
 body.sb-col #app{padding-left:var(--sbr)}
 aside#side{position:fixed!important;left:0;top:0;bottom:0;height:100vh;width:var(--sbw)!important;overflow:hidden;z-index:60;transition:width .18s ease .08s,box-shadow .18s}
 aside#side #nav{overflow-x:hidden;overflow-y:auto}
 #nav a{white-space:nowrap}#nav a .ic{flex:none}#nav .nl{overflow:hidden;text-overflow:ellipsis}
 #side .brand{position:relative;min-height:72px!important;padding:12px 14px!important}
 #sbpin{display:inline-flex;position:absolute;right:6px;top:6px;width:28px;height:28px;padding:0;align-items:center;justify-content:center;border-radius:8px;opacity:.75}
 #sbpin:hover,#sbpin:focus-visible{opacity:1;background:rgba(30,167,255,.12)}
 #sbpin .ic{transition:transform .18s}
 body:not(.sb-col) #sbpin .ic{transform:rotate(180deg)}
 body.sb-col aside#side{width:var(--sbr)!important}
 body.sb-col aside#side:hover,body.sb-col aside#side:focus-within{width:var(--sbw)!important;box-shadow:16px 0 40px rgba(0,0,0,.55)}
 body.sb-col #side:not(:hover):not(:focus-within) .blogo,body.sb-col #side:not(:hover):not(:focus-within) #sbpin{display:none}
 body.sb-col #side:not(:hover):not(:focus-within) .bmark{display:block;margin:0 auto}
 body.sb-col #side:not(:hover):not(:focus-within) .brand{padding:14px 0!important;justify-content:center!important}
 body.sb-col #side:not(:hover):not(:focus-within) #nav{padding-left:0;padding-right:0}
 body.sb-col #side:not(:hover):not(:focus-within) #nav a{justify-content:center;padding:9px 0!important;margin:1px 8px!important;gap:0}
 body.sb-col #side:not(:hover):not(:focus-within) #nav .nl{display:none}
 body.sb-col #side:not(:hover):not(:focus-within) .nsec{padding:0!important;margin:9px 14px;height:1px;background:rgba(30,167,255,.16)}
 body.sb-col #side:not(:hover):not(:focus-within) .nsec span{display:none}
 body.sb-col #side:not(:hover):not(:focus-within) .sidefoot{flex-direction:column;padding:10px 0;gap:6px}
 body.sb-col #side:not(:hover):not(:focus-within) #clock,body.sb-col #side:not(:hover):not(:focus-within) #logout .nl{display:none}
 body.sb-col #side:not(:hover):not(:focus-within) .sfic{display:inline-flex}
 body.sb-col #side:not(:hover):not(:focus-within) #logout{padding:6px 10px}
 #scrim{display:none!important}
}
.sfic{width:32px;height:32px;align-items:center;justify-content:center;border-radius:8px;color:var(--side-tx,#9fb3cc);cursor:default}
.sfic:focus-visible,#nav a:focus-visible,#sbpin:focus-visible,#logout:focus-visible{outline:2px solid #1ea7ff;outline-offset:2px}
/* ---------- densidade ---------- */
@media(min-width:861px) and (max-width:2199px){.kpi{font-size:clamp(22px,1.1vw + 7px,30px)}}