/* ==========================================================================
   base.css  |  RCEM Hub, base comum (design system v2)

   O que e: reset, tipografia Manrope, escala de texto, utilitarios, movimento global e o
   layout de aplicativo (menu lateral, topo, conteudo, grades responsivas, barra inferior no celular).
   Define: .hub-app .hub-side .hub-brand .hub-nav .hub-nav-grp .hub-nav-item .hub-side-foot
           .hub-main .hub-top .hub-top-busca .hub-content .hub-page-head .hub-faixa .hub-grid (g-2 g-3 g-4
           g-auto g-kpi g-main) .hub-stack .hub-row, utilitarios (.muted .t2 .num .right .center
           .strong .sm .xs .nowrap .grow .hide .hub-sr .mt .mb), .hub-skip, .hub-rise (cascata de entrada),
           html.tt (transicao suave de tema), regra de movimento reduzido.
   Consome: variaveis de tokens.css. A fonte Manrope e carregada pelo html de cada modulo.
   Regras: celular de 390 px sem rolagem horizontal; a rolagem lateral fica contida em
     .tbl-wrap, .tabs (.hub-abas) e .hub-side. Foco sempre visivel (3 px). Nenhum backdrop-filter.
     prefers-reduced-motion desliga toda animacao e transicao (o estado final e o mesmo).
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}}
/* troca de tema suave: o script de tema liga html.tt por 500 ms */
html.tt,html.tt *,html.tt *::before,html.tt *::after{transition:background-color var(--hx-d-theme) var(--ease),color var(--hx-d-theme) var(--ease),border-color var(--hx-d-theme) var(--ease),fill var(--hx-d-theme) var(--ease),stroke var(--hx-d-theme) var(--ease),box-shadow var(--hx-d-theme) var(--ease)!important}
body{font-family:var(--font);background:var(--paper);color:var(--text);font-size:var(--fs-md);line-height:1.5;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh}
body.noscroll{overflow:hidden}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;border:0;background:none}
button:disabled,[aria-disabled="true"]{cursor:not-allowed}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%}
table{border-collapse:collapse}
ul,ol{list-style:none}
hr{border:0;height:1px;background:var(--line);margin:var(--sp-4) 0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
::selection{background:var(--lime);color:var(--ink)}
.tbl-wrap,.hub-nav,.hub-modal-b,.hub-drawer-b,.hub-abas{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
svg.i.g{width:22px;height:22px}svg.i.p{width:15px;height:15px}svg.i.xl{width:32px;height:32px}

/* tipografia: escala e tracking negativo nos titulos; numeros sempre tabulares */
h1,h2,h3,h4{letter-spacing:var(--tr-title);line-height:var(--lh-tight);font-weight:800;color:var(--text)}
h1{font-size:var(--fs-2xl);letter-spacing:-.04em}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}
p{line-height:1.55}
small,.sm{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.lead{font-size:var(--fs-lg);color:var(--text-2)}
.eyebrow{font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
code,.mono{font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;font-size:.92em}
.num{font-variant-numeric:tabular-nums lining-nums}

/* utilitarios */
.muted{color:var(--muted)}.t2{color:var(--text-2)}.strong{font-weight:700}.right{text-align:right}.center{text-align:center}
.nowrap{white-space:nowrap}.grow{flex:1;min-width:0}.hide{display:none!important}
.pos{color:var(--pos)}.neg{color:var(--neg)}.warn{color:var(--warn)}.info{color:var(--info)}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.quebra-palavra{overflow-wrap:anywhere}
.mb-l{margin-bottom:var(--sp-6)}.mt{margin-top:var(--sp-4)}.mt-s{margin-top:var(--sp-2)}.mt-l{margin-top:var(--sp-6)}.mb{margin-bottom:var(--sp-4)}.mb-s{margin-bottom:var(--sp-2)}
.hub-row{display:flex;align-items:center;gap:var(--sp-3)}
.hub-row.wrap{flex-wrap:wrap}.hub-row.between{justify-content:space-between}.hub-row.end{justify-content:flex-end}.hub-row.top{align-items:flex-start}
.hub-row.gap-s{gap:var(--sp-2)}.hub-row.gap-l{gap:var(--sp-5)}
.hub-stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.hub-stack.gap-s{gap:var(--sp-2)}.hub-stack.gap-l{gap:var(--sp-5)}
.hub-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
table.hub-sr{left:-10000px;top:auto}
.hub-skip{position:absolute;left:12px;top:-60px;z-index:var(--z-toast);background:var(--lime);color:var(--ink);padding:10px 16px;border-radius:var(--radius-pill);font-weight:800;box-shadow:var(--elev-2)}
.hub-skip:focus{top:12px}
.hub-sep{height:1px;background:var(--line);margin:var(--sp-4) 0;border:0}

/* ===== movimento: cascata de entrada (indice --i de 0 a 11, definido pelo html ou por :nth-child) ===== */
@keyframes hub-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hub-rise{animation:hub-rise var(--dur-slow) var(--ease-out) backwards;animation-delay:calc(min(var(--i,0),11) * var(--hx-stagger))}

/* ===== layout de aplicativo ===== */
.hub-app{display:flex;min-height:100vh}
.hub-side{width:var(--side-w);background:var(--side);background-image:var(--side-grad);color:var(--side-text);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:var(--z-side);border-right:1px solid var(--side-line)}
.hub-brand{position:relative;display:flex;align-items:center;gap:10px;padding:22px 22px 18px;color:var(--lime)}
.hub-brand::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;background:var(--side-line)}
.hub-brand svg,.hub-brand img{height:26px;width:auto;flex:none}
.hub-brand small{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--side-text);line-height:1.15;border-left:1px solid var(--side-line);padding-left:10px}
.hub-nav{flex:1;overflow:auto;padding:6px 12px 14px}
.hub-nav-grp{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--side-grp);padding:20px 10px 8px}
.hub-nav-grp::after{content:"";flex:1;height:1px;background:var(--side-line)}
.hub-nav-item{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:var(--ctl-touch);padding:0 14px;margin-bottom:2px;border-radius:var(--radius-ctl);font-weight:600;font-size:14px;color:var(--side-text);cursor:pointer;text-align:left;transition:background var(--dur),color var(--dur),box-shadow var(--dur-base) var(--ease-out)}
.hub-nav-item svg.i{width:20px;height:20px}
@media (min-width:821px) and (max-height:900px){.hub-nav-item{min-height:40px;margin-bottom:1px}.hub-nav-grp{padding:14px 10px 6px}}
.hub-nav-item:hover{background:var(--side-hover);color:#fff}
.hub-nav-item.on{background:var(--lime);color:var(--ink);font-weight:800;box-shadow:0 10px 24px -12px rgba(200,248,110,.6)}
.hub-nav-item .bd{margin-left:auto;font-size:11px;font-weight:800;line-height:1.6;background:var(--neg);color:var(--surface);border-radius:var(--radius-pill);padding:0 7px;min-width:22px;text-align:center;font-variant-numeric:tabular-nums}

.hub-nav-item.on .bd{background:var(--ink);color:var(--lime)}
.hub-nav-item:focus-visible{outline-color:var(--lime);border-radius:var(--radius-ctl)}
.hub-side-foot{padding:14px 18px;border-top:1px solid var(--side-line);font-size:12px;color:var(--side-grp)}
.hub-main{margin-left:var(--side-w);flex:1;min-width:0;display:flex;flex-direction:column}
.hub-app.sem-menu .hub-main{margin-left:0}
.hub-top{position:sticky;top:0;z-index:var(--z-top);display:flex;align-items:center;gap:var(--sp-3);min-height:var(--top-h);padding:10px 28px;background:var(--paper);border-bottom:1px solid var(--line)}
.hub-top-busca{position:relative;flex:1;max-width:460px;min-width:0}
.hub-top-busca>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.hub-top-busca input{width:100%;min-height:var(--ctl-touch);padding:9px 16px 9px 42px;border:1.5px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);outline:none}
.hub-top-busca input:focus{border-color:var(--focus);box-shadow:var(--ring)}
.hub-content{width:100%;max-width:var(--content-max);margin:0 auto;padding:var(--sp-6) 28px 64px;flex:1;min-width:0}
.hub-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.hub-page-head h1{font-size:clamp(26px,3vw,36px);line-height:1.05}
.hub-page-head p{color:var(--muted);margin-top:6px;font-size:var(--fs-md);max-width:70ch}
.hub-page-head .acoes{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.hub-faixa{display:flex;align-items:center;gap:10px;padding:10px 28px;font-size:var(--fs-sm);font-weight:700;background:var(--warn-bg);color:var(--warn);border-bottom:1px solid color-mix(in srgb,var(--warn) 22%,var(--line))}

/* ===== grades ===== */
.hub-grid{display:grid;gap:var(--sp-4);min-width:0}
.hub-grid>*{min-width:0}
.hub-grid.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hub-grid.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hub-grid.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hub-grid.g-auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.hub-grid.g-kpi{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.hub-grid.g-main{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.hub-grid .span-2{grid-column:span 2}
/* cascata de entrada nos KPIs do topo da tela (ate 8 itens, 45 ms por item) */
.hub-grid.g-kpi>.hub-kpi,.hub-grid.g-4>.hub-kpi{animation:hub-rise var(--dur-slow) var(--ease-out) backwards}
.hub-grid.g-kpi>:nth-child(2),.hub-grid.g-4>:nth-child(2){animation-delay:var(--hx-stagger)}
.hub-grid.g-kpi>:nth-child(3),.hub-grid.g-4>:nth-child(3){animation-delay:calc(var(--hx-stagger) * 2)}
.hub-grid.g-kpi>:nth-child(4),.hub-grid.g-4>:nth-child(4){animation-delay:calc(var(--hx-stagger) * 3)}
.hub-grid.g-kpi>:nth-child(n+5){animation-delay:calc(var(--hx-stagger) * 4)}
@media (max-width:1100px){.hub-grid.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-grid.g-main{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.hub-grid.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hub-grid.g-2,.hub-grid.g-3,.hub-grid.g-4{grid-template-columns:minmax(0,1fr)}.hub-grid .span-2{grid-column:auto}}

/* ===== celular e tablet: o menu vira barra inferior ===== */
@media (max-width:820px){
  .hub-side{inset:auto 0 0 0;width:auto;height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);flex-direction:row;border-top:1px solid var(--side-line);border-right:0;box-shadow:0 -8px 24px -12px rgba(0,0,0,.35)}
  .hub-brand,.hub-nav-grp,.hub-side-foot{display:none}
  .hub-nav{display:flex;flex-direction:row;align-items:stretch;gap:2px;padding:6px 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hub-nav::-webkit-scrollbar{display:none}
  .hub-nav-item{flex:0 0 auto;flex-direction:column;justify-content:center;gap:3px;width:auto;min-width:66px;min-height:0;margin:0;padding:6px 8px;font-size:10.5px;text-align:center;white-space:nowrap;border-radius:12px}
  .hub-nav-item svg.i{width:20px;height:20px}
  .hub-nav-item .bd{position:absolute;margin:-4px 0 0 18px;padding:0 5px;font-size:10px;min-width:16px;line-height:1.5}
  .hub-main{margin-left:0;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px))}
  .hub-top{padding:8px 16px;min-height:var(--top-h-m)}
  .hub-content{padding:var(--sp-4) 16px 40px}
  .hub-faixa{padding:10px 16px}
  .hub-page-head{align-items:flex-start;margin-bottom:var(--sp-5)}
  .hub-page-head .acoes{width:100%}
}
@media (max-width:480px){h1{font-size:23px}.hub-page-head h1{font-size:25px}.hub-page-head .acoes .hub-btn{flex:1 1 auto}}

/* ===== KPIs balanceados: 5 e 6 cartoes nao deixam orfao (3 + 2 e 3 + 3); no celular sempre 2 colunas compactas ===== */
@media (min-width:641px){
  .hub-grid:is(.g-kpi,.g-4):has(>.hub-kpi:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .hub-grid:is(.g-kpi,.g-4):has(>.hub-kpi:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .hub-grid:is(.g-kpi,.g-4):has(>.hub-kpi:nth-child(5):last-child)>.hub-kpi{grid-column:span 2}
  .hub-grid:is(.g-kpi,.g-4):has(>.hub-kpi:nth-child(5):last-child)>.hub-kpi:nth-child(n+4){grid-column:span 3}
}
@media (max-width:640px){
  .hub-grid.g-kpi,.hub-grid:is(.g-3,.g-4):has(>.hub-kpi){grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  .hub-grid:is(.g-kpi,.g-3,.g-4)>.hub-kpi:last-child:nth-child(odd){grid-column:1/-1}
}