/* ==========================================================================
   home-lajes.css  |  RCEM Hub, tela inicial: lajes de módulo (Gastos e Pessoas) e seus gráficos

   O que é: a seção "01 Módulos". Laje de Gastos em teal (nos dois temas) e laje de Pessoas em lime no claro e
   em verde-oliva aceso no escuro (--hx-p-*). Cada laje define suas próprias variáveis (--fg2, --ln, --acc, --lj-*)
   e tudo dentro delas as consome, então o mesmo marcado serve às duas cores e aos dois temas.
   Define: .hh-laje .hh-lj-* .hh-big .hh-lbl .hh-trend .hh-spark .hh-stack .hh-kp .hh-abrir .hh-q .hh-bars .hh-pp-top
     .hh-empty .hh-oculto .hh-lj-sk.
   Consome: tokens.css (--hx-g-*, --hx-p-*, --hx-r-slab, --hx-d-*, --hx-amber*, --hx-coral*, --hx-ivory, --lime, --ink), home.css (.hh-chip, .hh-btn, .hh-sk).
   Regras: sem backdrop-filter; sombras grandes só nas duas lajes; o brilho que segue o ponteiro usa --mx e --my.
   ========================================================================== */

.hh-laje{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--hx-r-slab);padding:clamp(22px,2.6vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(18px,2vw,28px);min-width:0;transition:transform var(--hx-d-lift) var(--ease-out),box-shadow var(--hx-d-lift) var(--ease-out)}
.hh-laje:hover{transform:translateY(-6px)}
.hh-laje::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity var(--hx-d-base);background:radial-gradient(460px circle at var(--mx,70%) var(--my,0%),var(--hl),transparent 62%);pointer-events:none}
.hh-laje:hover::before{opacity:1}
.hh-laje::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;border:1px solid var(--ln);box-shadow:0 0 0 44px color-mix(in srgb,var(--acc) 3%,transparent),0 0 0 45px color-mix(in srgb,var(--acc) 12%,transparent),0 0 0 92px color-mix(in srgb,var(--acc) 2%,transparent),0 0 0 93px color-mix(in srgb,var(--acc) 8%,transparent)}
.hh-laje.g::after{right:-110px;top:-110px;width:340px;height:340px}
.hh-laje.p::after{right:-150px;bottom:-150px;width:240px;height:240px}
.hh-laje:has(.hh-abrir:focus-visible){box-shadow:0 0 0 3px var(--acc)}
.hh-laje .hh-abrir:focus-visible{outline:0}

.hh-laje.g{background:var(--hx-g-bg);color:var(--hx-g-fg);box-shadow:var(--hx-g-sh);--hl:color-mix(in srgb,var(--lime) 20%,transparent);--fg2:var(--hx-g-fg2);--ln:var(--hx-g-ln);--acc:var(--hx-g-acc);
  --lj-btn-bg:var(--lime);--lj-btn-fg:var(--ink);--lj-n-bg:color-mix(in srgb,var(--hx-ivory) 12%,transparent);--lj-n-fg:var(--hx-ivory);--lj-n-bd:color-mix(in srgb,var(--hx-ivory) 35%,transparent);
  --lj-ok-bg:var(--lime);--lj-ok-fg:var(--ink);--lj-wn-bg:var(--hx-amber);--lj-wn-fg:var(--hx-amber-on);--lj-ng-bg:var(--hx-coral);--lj-ng-fg:var(--hx-coral-on);--sk1:color-mix(in srgb,var(--hx-ivory) 10%,transparent);--sk2:color-mix(in srgb,var(--hx-ivory) 22%,transparent)}
.hh-laje.g:hover{box-shadow:var(--hx-g-sh-hover)}
.hh-laje.p{background:var(--hx-p-bg);color:var(--hx-p-fg);box-shadow:var(--hx-p-sh);--hl:var(--hx-p-hl);--fg2:var(--hx-p-fg2);--ln:var(--hx-p-ln);--acc:var(--hx-p-acc);--bar:var(--hx-p-bar);
  --lj-btn-bg:var(--ink);--lj-btn-fg:var(--lime);--lj-n-bg:color-mix(in srgb,var(--ink) 10%,transparent);--lj-n-fg:var(--ink);--lj-n-bd:color-mix(in srgb,var(--ink) 40%,transparent);
  --lj-ok-bg:var(--ink);--lj-ok-fg:var(--lime);--lj-wn-bg:var(--hx-amber-on);--lj-wn-fg:var(--hx-amber);--lj-ng-bg:var(--hx-coral-on);--lj-ng-fg:var(--hx-coral);--sk1:color-mix(in srgb,var(--ink) 10%,transparent);--sk2:color-mix(in srgb,var(--ink) 20%,transparent)}
.hh-laje.p:hover{box-shadow:var(--hx-p-sh-hover)}
[data-theme="dark"] .hh-laje.p{--lj-btn-bg:var(--lime);--lj-btn-fg:var(--ink);--lj-n-bg:color-mix(in srgb,var(--hx-ivory) 12%,transparent);--lj-n-fg:var(--hx-ivory);--lj-n-bd:color-mix(in srgb,var(--hx-ivory) 35%,transparent);
  --lj-ok-bg:var(--lime);--lj-ok-fg:var(--ink);--lj-wn-bg:var(--hx-amber);--lj-wn-fg:var(--hx-amber-on);--lj-ng-bg:var(--hx-coral);--lj-ng-fg:var(--hx-coral-on);--sk1:color-mix(in srgb,var(--hx-ivory) 10%,transparent);--sk2:color-mix(in srgb,var(--hx-ivory) 22%,transparent)}
.hh-laje :focus-visible{outline-color:var(--acc)}

/* cabeçalho da laje */
.hh-lj-h{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}
.hh-lj-h>div{flex-basis:100%;order:3}
.hh-lj-ic{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;flex:none;background:var(--lj-btn-bg);color:var(--lj-btn-fg)}
.hh-laje.g .hh-lj-ic{background:var(--lime);color:var(--ink)}
.hh-lj-ic .hh-ic{width:28px;height:28px}
.hh-lj-h h3{font-size:var(--hx-fs-mod);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:inherit}
.hh-lj-h p{margin-top:5px;font-size:13.5px;color:var(--fg2);max-width:46ch;line-height:1.45}
.hh-lj-h .hh-chip{margin-left:auto;flex:none}
.hh-lj-h h3{white-space:nowrap}
.hh-laje .hh-chip{background:var(--lj-n-bg);color:var(--lj-n-fg);border-color:var(--lj-n-bd)}
.hh-laje .hh-chip.ok{background:var(--lj-ok-bg);color:var(--lj-ok-fg);border-color:transparent}
.hh-laje .hh-chip.warn{background:var(--lj-wn-bg);color:var(--lj-wn-fg);border-color:transparent}
.hh-laje .hh-chip.neg{background:var(--lj-ng-bg);color:var(--lj-ng-fg);border-color:transparent}
.hh-laje .hh-sk{background:linear-gradient(90deg,var(--sk1),var(--sk2),var(--sk1));background-size:220% 100%}

/* números e gráficos */
.hh-lbl{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2)}
.hh-mod-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(18px,2.4vw,40px);align-items:end}
.hh-big{display:block;font-size:var(--hx-fs-big);font-weight:800;letter-spacing:-.045em;line-height:1;margin-top:8px;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;color:var(--acc)}
.hh-trend{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13px;font-weight:700}
.hh-trend .hh-ic{width:16px;height:16px}
.hh-reg-l{display:block;margin-top:10px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
.hh-spark{position:relative}
.hh-spark svg{display:block;width:100%;height:84px;overflow:visible}
.hh-spark-m{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
.hh-spark-m b{color:var(--acc)}
.hh-spark .dr{stroke:var(--hx-g-acc);stroke-dasharray:1;stroke-dashoffset:1;animation:hh-draw .85s var(--ease-out) .2s forwards}
.hh-spark .pt{opacity:0;animation:hh-fade .35s ease .7s forwards}
.hh-stop{stop-color:var(--hx-g-acc)}
.hh-dot{fill:var(--hx-g-bg);stroke:var(--hx-g-acc)}
.hh-halo,.hh-end{fill:var(--hx-g-acc)}
@keyframes hh-draw{to{stroke-dashoffset:0}}
@keyframes hh-fade{to{opacity:1}}
.hh-stack{display:flex;gap:4px;height:22px}
.hh-stack i{display:block;border-radius:8px;transform-origin:left;animation:hh-grow .8s var(--ease-out) .2s backwards;min-width:8px}
.sg-pago{background:var(--lime)}
.sg-apagar{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--hx-ivory) 62%,transparent) 0 4px,color-mix(in srgb,var(--hx-ivory) 20%,transparent) 4px 8px)}
.sg-venc{background:var(--hx-coral)}
.hh-stack-lg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.hh-stack-lg li{border-top:1px solid var(--ln);padding-top:10px;min-width:0}
.hh-sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px}
.hh-lg-l{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
.hh-lg-v{display:block;margin-top:4px;font-size:clamp(15px,1.5vw,19px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hh-lg-p{font-size:12px;font-weight:600;color:var(--fg2)}
.hh-kp{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:12px}
.hh-kp>div{border-top:1px solid var(--ln);padding-top:12px;min-width:0}
.hh-kp dt{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
.hh-kp dd{font-size:var(--hx-fs-kpi);font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.hh-kp dd small{font-size:12px;font-weight:700;letter-spacing:0;color:var(--fg2);margin-left:4px}

/* colunas de Pessoas */
/* lado a lado (e o bloco da direita alinhado à direita) só quando cabe; senão empilha e tudo fica na mesma borda esquerda */
.hh-laje.p{container:hp/inline-size}
.hh-pp-top{display:grid;gap:18px;align-items:end}
.hh-pp-r{text-align:left}
@container hp (min-width:500px){
  .hh-pp-top{grid-template-columns:minmax(0,1fr) auto;gap:16px}
  .hh-pp-r{text-align:right}
}
.hh-n2{display:block;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.1;margin-top:4px}
.hh-n2 .hh-cur{vertical-align:.5em}
.hh-pp-r small{font-size:12.5px;font-weight:700;color:var(--fg2)}
.hh-bars{display:flex;align-items:flex-end;gap:clamp(10px,1.6vw,20px);height:150px;padding-top:10px;border-bottom:1.5px solid var(--bar)}
.hh-bar-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;gap:6px}
.hh-bar-v{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.hh-bar-s{width:100%;max-width:58px;display:flex;flex-direction:column;justify-content:flex-end;transform-origin:bottom;animation:hh-growy .7s var(--ease-out) .2s backwards}
.hh-bar-s i{display:block;width:100%}
.hh-bar-s .b-ab{background:repeating-linear-gradient(135deg,var(--bar) 0 3px,transparent 3px 7px);border:1.5px solid var(--bar);border-bottom:0;border-radius:10px 10px 0 0}
.hh-bar-s .b-pg{background:var(--bar)}
.hh-bar-s .b-pg:first-child{border-radius:10px 10px 0 0}
.hh-bar-m{display:flex;gap:clamp(10px,1.6vw,20px);margin-top:8px}
.hh-bar-m span{flex:1;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hh-bar-m .cur-m{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.hh-bars-lg{display:flex;gap:18px;margin-top:12px;font-size:12px;font-weight:700}
.hh-bars-lg i{display:inline-block;width:14px;height:10px;border-radius:3px;margin-right:7px;border:1.5px solid var(--bar);vertical-align:-1px}
.hh-bars-lg .k-pg{background:var(--bar)}
.hh-bars-lg .k-ab{background:repeating-linear-gradient(135deg,var(--bar) 0 2px,transparent 2px 5px)}
@keyframes hh-growy{from{transform:scaleY(0)}}

/* rodapé da laje */
.hh-lj-f{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:clamp(8px,1vw,14px)}
.hh-abrir{display:inline-flex;align-items:center;gap:10px;height:var(--ctl-xl);padding:0 24px;border-radius:var(--radius-pill);font-weight:800;font-size:15px;letter-spacing:-.015em;background:var(--lj-btn-bg);color:var(--lj-btn-fg);transition:transform var(--hx-d-base) var(--ease-out),gap var(--hx-d-base) var(--ease-out)}
.hh-abrir::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.hh-abrir:hover{gap:16px}
.hh-abrir .hh-ic{width:18px;height:18px}
.hh-q{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;height:var(--ctl-md);padding:0 16px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;border:1.5px solid var(--ln);transition:background-color var(--hx-d-fast),border-color var(--hx-d-fast)}
.hh-q:hover{background:color-mix(in srgb,currentColor 9%,transparent);border-color:currentColor}
.hh-qb{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--radius-pill);font-size:11px;font-weight:800;background:var(--hx-coral);color:var(--hx-coral-on)}
.hh-when{margin-left:auto;font-size:12px;font-weight:600;color:var(--fg2);text-align:right}

/* estados */
.hh-empty,.hh-oculto{border:1.5px dashed var(--ln);border-radius:24px;padding:clamp(20px,2.6vw,36px);display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center}
.hh-empty{flex:1;max-height:340px;margin:auto 0}
.hh-empty>.hh-ic,.hh-oculto>.hh-ic{width:34px;height:34px;opacity:.9}
.hh-empty b,.hh-oculto b{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.035em;line-height:1.15}
.hh-oculto{padding:clamp(16px,2vw,24px)}
.hh-oculto b{font-size:clamp(17px,1.6vw,20px)}
.hh-empty p,.hh-oculto p{font-size:14px;color:var(--fg2);max-width:46ch}
.hh-empty .row{display:flex;gap:10px;flex-wrap:wrap}
.hh-empty .hh-btn{height:var(--ctl-md);margin-top:6px;position:relative;z-index:2;background:var(--lj-btn-bg);color:var(--lj-btn-fg)}
.hh-empty .hh-btn.gh{background:transparent;border-color:var(--ln);color:inherit}
.hh-lj-sk{display:grid;gap:18px;flex:1}
.hh-lj-sk .tri{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}