/* 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:64px;padding:14px 18px!important;margin:16px 0 16px;box-sizing:border-box;top:12px!important;background:var(--card)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--sh),0 -12px 0 6px var(--bg)!important}
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;align-self:center;margin:0!important;width:36px;height:36px}main>header>*{align-self:center}
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:10px 12px!important;margin:12px 0}main>header h1{font-size:17px!important;flex-basis:180px}main>header h1 .pgic{width:30px;height:30px;grid-row:auto}main>header h1 .sub{display:none!important}}
@media(max-width:860px){main>header{height:auto!important;max-height:none!important}main>header #alertpill{height:auto!important;min-height:0}main>header #alertpill>*{position:static!important}}@media(max-width:420px){main>header #alertpill{order:5;flex-basis:100%;justify-content:flex-start}main>header #alertpill:empty{display:none}}
/* ---------- 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)}}

#clock{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.3}#clock *{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
/* ---------- barra inferior mobile (rel30) ---------- */
@media(max-width:860px){
 :root{--bnh:60px}
 #bnav{left:0!important;right:0!important;bottom:0!important;border-radius:0!important;border:0!important;border-top:1px solid var(--line)!important;padding:4px 6px calc(4px + env(safe-area-inset-bottom))!important;background:var(--card)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 -6px 20px rgba(0,0,0,.25)!important;min-height:var(--bnh);box-sizing:border-box;gap:2px;z-index:45}
 html:not([data-theme=light]) #bnav{background:rgba(5,10,20,.97)!important}
 [data-theme=light] #bnav{background:rgba(255,255,255,.97)!important;border-top-color:rgba(10,60,120,.14)!important;box-shadow:0 -4px 16px rgba(10,40,80,.08)!important}
 #bnav a{gap:3px!important;font-size:10.5px!important;line-height:1.1;padding:6px 0!important;border-radius:12px;min-width:0}
 #bnav a .ic{width:20px!important;height:20px!important}
 #bnav a.on{background:rgba(30,167,255,.16)!important;color:#7cc8ff!important}
 #bnav a.on .ic{color:#1ea7ff!important}
 [data-theme=light] #bnav a{color:#4a5a70!important}
 [data-theme=light] #bnav a.on{background:rgba(30,110,220,.12)!important;color:#0b4fa8!important}
 [data-theme=light] #bnav a.on .ic{color:#0b63d1!important}
 main{padding-bottom:calc(var(--bnh) + 24px + env(safe-area-inset-bottom))!important}
}
/* ---------- busca global + filtros mobile (rel31) ---------- */
#gsbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
#gsbtn kbd{font:600 10.5px/1 inherit;padding:3px 5px;border:1px solid var(--line);border-radius:5px;opacity:.7}
#gso{position:fixed;inset:0;z-index:200;display:none;background:rgba(2,6,14,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#gso.on{display:block}
#gso .gsbox{margin:8vh auto 0;width:min(640px,94vw);max-height:76vh;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r,14px);box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
html:not([data-theme=light]) #gso .gsbox{background:#0a1222}
[data-theme=light] #gso .gsbox{background:#fff}
#gso .gsin{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
#gso .gsin input{flex:1;min-width:0;font-size:16px;border:0!important;background:transparent!important;box-shadow:none!important;outline:none;padding:8px 4px;color:inherit}
#gso .gsin button{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center}
#gsres{overflow-y:auto;padding:6px 6px 10px;-webkit-overflow-scrolling:touch}
#gsres .gsh{font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.6;padding:10px 10px 4px}
#gsres a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;color:inherit;text-decoration:none;min-height:44px;box-sizing:border-box}
#gsres a small{margin-left:auto;opacity:.6;white-space:nowrap}
#gsres a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gsres a.sel,#gsres a:hover{background:rgba(30,167,255,.14)}
#gsres .gse{padding:16px 10px;opacity:.65}
@media(max-width:860px){
 #gsbtn,main>header #themebtn,main>header #menu{width:44px;height:44px;padding:0}
 #gsbtn kbd{display:none}
 #gso .gsbox{margin:0;width:100%;max-height:none;height:100%;border-radius:0;border:0;padding-top:env(safe-area-inset-top)}
 main>header{position:relative!important;top:auto!important;box-shadow:var(--sh)!important}
 main>header h1{flex-basis:120px}
 /* filtros: busca em linha inteira, selects abaixo */
 #view :is(div,form):has(> input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])):has(> select){flex-wrap:wrap!important}
 #view :is(div,form):has(> select):has(> input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])) > input:not([type=checkbox]):not([type=radio]):not([type=range]){flex:1 1 100%!important;width:100%!important;max-width:none!important;min-width:0!important}
 #view :is(div,form):has(> input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])) > select{flex:1 1 100%!important;width:100%!important;max-width:none!important;min-width:0!important}
 #view input[placeholder^="Busc"],#view input[placeholder^="busc"],#view input[type=search]{min-width:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237d8ca3' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:12px center!important;padding-left:36px!important;font-size:16px}
}
@media(max-width:380px){main>header{gap:8px}#gsbtn,main>header #themebtn,main>header #menu{width:40px;height:40px}}
@media(max-width:420px){main>header h1{font-size:16px!important;column-gap:0}main>header h1 .pgic{display:none!important}main>header #title{letter-spacing:-.01em}}
@media(max-width:860px){main>header #title{white-space:normal!important;text-overflow:clip!important;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15}}
@media(max-width:480px){main>header h1{font-size:16px!important}main>header h1 .pgic{display:none!important}}
@media(max-width:860px){#gsres a{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:1px}#gsres a>svg{grid-row:span 2}#gsres a small{margin-left:0;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}}