/* ==========================================================================
   home-carteiras.css  |  RCEM Hub, tela inicial: o módulo Carteiras (laje, gráficos e elos do mapa de integrações)

   O que é: a terceira laje da seção "01 Módulos" (faixa inteira abaixo de Gastos e Pessoas), com a cor própria do módulo
   (gelo azulado no claro, petróleo azulado no escuro), e os acréscimos do mapa "Integrações": o nó Carteiras, o elo
   Carteiras para Hub e o cotovelo Pessoas para Carteiras (feed de cobradores).
   Define: tokens --hx-c-* (claro, escuro e preferência do sistema), .hh-laje.c .hh-ct* (principal, barra da meta, inadimplentes,
     régua de nível), .hh-bento>.s12, .hh-nd.n4 .hh-lk.l3 .hh-elb e a variante de celular do mapa.
   Consome: tokens.css (--hx-ivory, --hx-amber*, --hx-coral*, --lime, --ink, --hx-r-slab, --hx-d-*, --ctl-*), home-lajes.css (.hh-laje,
     .hh-lj-*, .hh-kp, .hh-abrir, .hh-q, .hh-empty), home-hoje.css (.hh-map, .hh-nd, .hh-lk, .hh-arc-m, .st-*).
   Regras: os tokens --hx-c-* ficam aqui porque tokens.css é do design system (pedido de mover registrado em docs/INTEGRACAO-CARTEIRAS.md);
     as quatro cores de nível (Meta vermelho, Super âmbar, Mega lime, Hyper turquesa) valem nos dois temas e nunca sozinhas: cada
     segmento traz o número do nível; celular de 390 px sem rolagem horizontal; movimento desliga em prefers-reduced-motion.
   ========================================================================== */

:root{
  --hx-c-bg:#D4E9F1;--hx-c-fg:#06201D;--hx-c-fg2:rgba(6,32,29,.78);--hx-c-acc:#06201D;--hx-c-ln:rgba(6,32,29,.22);--hx-c-bar:#0A4A33;--hx-c-hl:rgba(255,255,255,.6);
  --hx-c-sh:0 30px 60px -38px rgba(24,96,128,.55);--hx-c-sh-hover:0 46px 80px -34px rgba(24,96,128,.72);
  --hx-c-btn-bg:#06201D;--hx-c-btn-fg:#C8F86E;--hx-c-pos:#0A5A3C;--hx-c-neg:#B42E2E;--hx-c-trk:rgba(6,32,29,.14);--hx-c-seg-ln:rgba(6,32,29,.5);
  --hx-c-wn-bg:#2B1D00;--hx-c-wn-fg:#E7B544;--hx-c-ng-bg:#3A0F0A;--hx-c-ng-fg:#FFB4A6;
  --hx-c-l1:#F0666A;--hx-c-l2:#F5B83D;--hx-c-l3:#C8F86E;--hx-c-l4:#2DD4BF;
}
[data-theme="dark"]{
  --hx-c-bg:linear-gradient(160deg,#12303B,#0A1D25);--hx-c-fg:#F6F3E8;--hx-c-fg2:rgba(246,243,232,.78);--hx-c-acc:#C8F86E;--hx-c-ln:rgba(94,234,212,.24);--hx-c-bar:#C8F86E;--hx-c-hl:rgba(94,234,212,.14);
  --hx-c-sh:0 30px 60px -38px rgba(0,0,0,.85),inset 0 0 0 1px rgba(94,234,212,.2);--hx-c-sh-hover:0 46px 80px -34px rgba(0,0,0,.9),inset 0 0 0 1px rgba(94,234,212,.45);
  --hx-c-btn-bg:#C8F86E;--hx-c-btn-fg:#06201D;--hx-c-pos:#C8F86E;--hx-c-neg:#FFB4A6;--hx-c-trk:rgba(246,243,232,.16);--hx-c-seg-ln:rgba(246,243,232,.0);
  --hx-c-wn-bg:#E7B544;--hx-c-wn-fg:#2B1D00;--hx-c-ng-bg:#FFB4A6;--hx-c-ng-fg:#3A0F0A;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --hx-c-bg:linear-gradient(160deg,#12303B,#0A1D25);--hx-c-fg:#F6F3E8;--hx-c-fg2:rgba(246,243,232,.78);--hx-c-acc:#C8F86E;--hx-c-ln:rgba(94,234,212,.24);--hx-c-bar:#C8F86E;--hx-c-hl:rgba(94,234,212,.14);
    --hx-c-sh:0 30px 60px -38px rgba(0,0,0,.85),inset 0 0 0 1px rgba(94,234,212,.2);--hx-c-sh-hover:0 46px 80px -34px rgba(0,0,0,.9),inset 0 0 0 1px rgba(94,234,212,.45);
    --hx-c-btn-bg:#C8F86E;--hx-c-btn-fg:#06201D;--hx-c-pos:#C8F86E;--hx-c-neg:#FFB4A6;--hx-c-trk:rgba(246,243,232,.16);--hx-c-seg-ln:rgba(246,243,232,.0);
    --hx-c-wn-bg:#E7B544;--hx-c-wn-fg:#2B1D00;--hx-c-ng-bg:#FFB4A6;--hx-c-ng-fg:#3A0F0A;
  }
}

/* faixa inteira na grade de módulos */
.hh-bento>.s12{grid-column:1/-1}

/* a laje */
.hh-laje.c{container:hc/inline-size;background:var(--hx-c-bg);color:var(--hx-c-fg);box-shadow:var(--hx-c-sh);--hl:var(--hx-c-hl);--fg2:var(--hx-c-fg2);--ln:var(--hx-c-ln);--acc:var(--hx-c-acc);--bar:var(--hx-c-bar);
  --lj-btn-bg:var(--hx-c-btn-bg);--lj-btn-fg:var(--hx-c-btn-fg);--lj-n-bg:color-mix(in srgb,var(--hx-c-fg) 9%,transparent);--lj-n-fg:var(--hx-c-fg);--lj-n-bd:color-mix(in srgb,var(--hx-c-fg) 38%,transparent);
  --lj-ok-bg:var(--hx-c-btn-bg);--lj-ok-fg:var(--hx-c-btn-fg);--lj-wn-bg:var(--hx-c-wn-bg);--lj-wn-fg:var(--hx-c-wn-fg);--lj-ng-bg:var(--hx-c-ng-bg);--lj-ng-fg:var(--hx-c-ng-fg);
  --sk1:color-mix(in srgb,var(--hx-c-fg) 9%,transparent);--sk2:color-mix(in srgb,var(--hx-c-fg) 20%,transparent)}
.hh-laje.c:hover{box-shadow:var(--hx-c-sh-hover)}
.hh-laje.c::after{right:-130px;bottom:-190px;width:340px;height:340px}
.hh-laje.c .hh-lj-h>div{flex:1 1 0;order:0;min-width:0}
.hh-laje.c .hh-lj-h h3{white-space:normal}

/* corpo: principal, inadimplentes e nível */
.hh-ct{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3.2vw,52px);align-items:start}
.hh-ct-main{min-width:0}
.hh-ct-main .hh-big{font-size:clamp(40px,5.4cqi,68px)}
.hh-unit{font-size:.5em;font-weight:700;margin-left:.12em;opacity:.8}
.hh-ct-main .hh-trend{display:flex;align-items:flex-start;line-height:1.4;max-width:62ch}
.hh-ct-main .hh-trend .hh-ic{margin-top:1px;flex:none}
.hh-ct-fig{min-width:0;border-left:1px solid var(--ln);padding-left:clamp(18px,2.4vw,40px)}
.hh-ct-fig .hh-n2{white-space:normal;line-height:1.15}
.hh-ct-fig .hh-n2 small{display:inline-block;margin-left:8px;font-size:12.5px;font-weight:700;letter-spacing:0;color:var(--fg2)}
.hh-ct-fig .hh-lbl{display:block}

/* barra recolhido contra a meta */
.hh-ct-pg{margin-top:22px}
.hh-ct-pg .trk{position:relative;height:18px;border-radius:9px;background:var(--hx-c-trk)}
.hh-ct-pg .fl{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:9px;background:var(--bar);transform-origin:left;animation:hh-grow .8s var(--ease-out) .25s backwards}
.hh-ct-pg .ex{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);border:1.5px solid var(--bar);border-left:0;border-radius:0 9px 9px 0;background:repeating-linear-gradient(135deg,var(--bar) 0 3px,transparent 3px 7px);transform-origin:left;animation:hh-grow .8s var(--ease-out) .45s backwards}
.hh-ct-pg .tk{position:absolute;left:var(--x);top:-6px;bottom:-6px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--hx-c-fg)}
.hh-ct-pg .lg{position:relative;height:20px;margin-top:12px;font-size:12px;font-weight:700;color:var(--fg2)}
.hh-ct-pg .lg>span{position:absolute;top:0;white-space:nowrap}
.hh-ct-pg .tkl{left:max(var(--x),15em);transform:translateX(-100%);color:var(--hx-c-fg)}

/* inadimplentes contra a meta */
.hh-ct-in{display:grid;gap:10px;margin-top:16px}
.hh-ct-in .r{display:grid;grid-template-columns:40px minmax(0,1fr) 38px;align-items:center;gap:10px;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.hh-ct-in .r span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
.hh-ct-in .r b{text-align:right}
.hh-ct-in .b{height:14px;border-radius:7px;background:var(--hx-c-trk);overflow:hidden}
.hh-ct-in .b i{display:block;height:100%;width:var(--w);border-radius:7px;transform-origin:left;animation:hh-grow .8s var(--ease-out) .3s backwards}
.hh-ct-in i.neg{background:var(--hx-c-neg)}
.hh-ct-in i.pos{background:var(--hx-c-pos)}
.hh-ct-in i.meta{background:repeating-linear-gradient(135deg,var(--hx-c-fg) 0 3px,transparent 3px 7px);box-shadow:inset 0 0 0 1.5px var(--hx-c-fg)}
.hh-ct-nota{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:700;line-height:1.35}
.hh-ct-nota .hh-ic{width:16px;height:16px;flex:none}
.hh-ct-nota.neg{color:var(--hx-c-neg)}
.hh-ct-nota.pos{color:var(--hx-c-pos)}

/* régua do nível médio */
.hh-ct-lv{margin-top:26px}
.hh-ct-lv .seg{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;height:28px}
.hh-ct-lv .seg i{display:grid;place-items:center;border-radius:9px;box-shadow:inset 0 0 0 1.5px var(--hx-c-seg-ln)}
.hh-ct-lv .seg b{font-size:12px;font-weight:800;color:#06201D}
.hh-ct-lv .l1{background:var(--hx-c-l1)}.hh-ct-lv .l2{background:var(--hx-c-l2)}.hh-ct-lv .l3{background:var(--hx-c-l3)}.hh-ct-lv .l4{background:var(--hx-c-l4)}
.hh-ct-lv .mk{position:absolute;left:var(--x);top:-14px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:11px solid var(--hx-c-fg);transform:translateX(-50%);animation:hh-fade .4s ease .8s backwards}
.hh-ct-lv ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:8px}
.hh-ct-lv li{text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}

/* aviso de valores ocultos dentro do bloco principal */
.hh-ct-lock{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;font-size:12.5px;font-weight:600;color:var(--fg2);line-height:1.4}
.hh-ct-lock .hh-ic{width:18px;height:18px;flex:none}
.hh-ct-lock .hh-btn{position:relative;z-index:2;background:var(--lj-btn-bg);color:var(--lj-btn-fg)}
.hh-laje.c .hh-kp dd{font-size:clamp(24px,2.3cqi,34px)}

/* laje estreita: o container manda, não a janela */
@container hc (max-width:1000px){
  .hh-ct{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hh-ct-main{grid-column:1/-1}
  .hh-ct-fig:nth-child(2){border-left:0;padding-left:0}
}
@container hc (max-width:820px){
  .hh-laje.c .hh-kp{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
}
@container hc (max-width:640px){
  .hh-laje.c .hh-lj-h>div{flex-basis:100%;order:3}
  .hh-ct{grid-template-columns:minmax(0,1fr);gap:26px}
  .hh-ct-fig,.hh-ct-fig:nth-child(2){border-left:0;border-top:1px solid var(--ln);padding:22px 0 0}
  .hh-ct-lv{margin-top:30px}
  .hh-laje.c .hh-kp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hh-ct-pg .tkl{left:100%}
}

/* mapa de integrações: nó Carteiras, elo para o Hub e cotovelo vindo de Pessoas */
.hh-map{grid-template-rows:auto auto 76px auto}
.hh-nd.n4{grid-column:3;grid-row:4}
.hh-lk.l3{grid-column:3;grid-row:3;margin-top:0;align-self:stretch;position:relative;display:block;padding:6px 0}
.hh-lk.l3 .hh-lk-line{position:absolute;left:50%;top:6px;bottom:6px;width:3px;height:auto;margin:0 0 0 -1.5px;background:repeating-linear-gradient(180deg,var(--c) 0 6px,transparent 6px 12px);background-size:3px 12px;animation:hh-flowy 1s linear 4}
.hh-lk.l3 .hh-lk-line::after{right:auto;left:50%;top:-3px;margin:0 0 0 -7px;border:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--c)}
.hh-lk.l3 .hh-lk-t{position:absolute;left:calc(50% + 18px);top:50%;transform:translateY(-50%);width:max-content;max-width:150px;text-align:left}
.st-late.l3 .hh-lk-line{animation-duration:3s}
.st-none.l3 .hh-lk-line{animation:none;background:repeating-linear-gradient(180deg,var(--c) 0 2px,transparent 2px 9px)}
.hh-elb{grid-column:1/4;grid-row:3/5;align-self:start;position:relative;height:calc(76px + 38px);margin-left:calc(.5 / 3.15 * 100%);margin-right:calc(.5 / 3.15 * 100% + 46px);
  border-left:2.5px dashed var(--c);border-bottom:2.5px dashed var(--c);border-bottom-left-radius:30px;pointer-events:none}
.hh-elb-head{position:absolute;right:-3px;bottom:-6px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid var(--c)}
.hh-elb .hh-chip-l{top:auto;bottom:14px;left:14px;transform:none;white-space:normal;max-width:calc(100% - 28px);border-radius:18px;line-height:1.3;pointer-events:auto}
.hh-nd.n4 .hh-nd-ic{border-color:var(--text)}

@media (max-width:760px){
  .hh-map{grid-template-rows:none}
  .hh-lk.l3,.hh-elb{display:none}
  .hh-nd.n4{margin-top:26px}
  .hh-arc-m{grid-row:auto;margin-top:12px}
  .hh-nd.n4+.hh-arc-m{margin-top:26px}
  .hh-laje.c .hh-kp dd{font-size:26px}
}
@container hc (max-width:640px){
  .hh-laje.c .hh-kp dd small{display:block;margin:3px 0 0}
}
.hh-ct-lock>span{flex:1 1 0;min-width:min(220px,100%)}