/* ============================================================
   SejaV+ — Design Tokens v2 (Linear refinado)
   Mais denso · tipografia mais sutil · hairlines no lugar de sombras
   · hovers discretos · topbar enxuta · layout em painéis (app, não "página").
   Mesmo :root do briefing — só os componentes ficaram mais apertados/silenciosos.
   ============================================================ */

:root{
  --bg:#fbfbfc; --side:#f8f8f9; --panel:#ffffff;
  --line:rgba(17,18,22,.08); --line-2:rgba(17,18,22,.13);
  --ink:#16181d; --ink-2:#3c3f46; --mut:#62656e; --mut-2:#8a8d96;
  --brand:#006938; --brand-dark:#0a4f2d;
  --ok:#15803d; --ok-bg:#e7f4ec; --warn:#92600e; --warn-bg:#fdf0d5;
  --danger:#b3261e; --danger-bg:#fbe7e7; --info:#1d4ed8; --info-bg:#e7eefb;
  --tier-green:#0a6b3a; --tier-orange:#e8730f; --tier-black:#23242a;
  --r:9px; --r-sm:6px; --r-lg:12px; --pill:999px;
  --focus:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent);
  --shadow-float:0 12px 40px -8px rgba(17,18,22,.16), 0 1px 4px rgba(17,18,22,.05);
  --font:"Inter",system-ui,-apple-system,sans-serif;
}
[data-theme="dark"]{
  --bg:#0d0e11; --side:#111216; --panel:#16181d;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --ink:#f2f3f5; --ink-2:#c7c9d0; --mut:#9295a0; --mut-2:#6c6f79;
  --brand:#17a35c; --brand-dark:#0f7a44;
  --ok:#34d07f; --ok-bg:rgba(52,208,127,.12);
  --warn:#e0a83a; --warn-bg:rgba(224,168,58,.12);
  --danger:#ef6a62; --danger-bg:rgba(239,106,98,.12);
  --info:#5b8def; --info-bg:rgba(91,141,239,.12);
  --shadow-float:0 16px 48px -8px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{ background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased; margin:0; font-size:13px; line-height:1.45 }
a{color:inherit; text-decoration:none}
button{font-family:inherit}
::selection{background:color-mix(in srgb,var(--brand) 24%,transparent)}

/* ====================== TIPOGRAFIA (mais sutil) ====================== */
.h-title{ font-size:13.5px; font-weight:600; letter-spacing:-.012em; color:var(--ink); margin:0 }
.h-sub{ font-size:12px; color:var(--mut); margin:0; font-weight:400 }
.label-caps{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut-2); font-weight:600 }
.kpi{ font-size:22px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); line-height:1.1 }
.kpi-sm{ font-size:16px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink) }
.muted{ color:var(--mut) } .muted-2{ color:var(--mut-2) } .ink-2{ color:var(--ink-2) }
.tnum{ font-variant-numeric:tabular-nums }

/* ====================== CARD / PAINEL (flat, hairline) ====================== */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:none; padding:15px }
.card--pad-sm{ padding:12px }
.card--clickable{ cursor:pointer; transition:border-color .12s ease, background .12s ease, box-shadow .12s ease }
.card--clickable:hover{ border-color:color-mix(in srgb,var(--brand) 24%,var(--line-2));
  background:color-mix(in srgb,var(--ink) 3%,var(--panel)); box-shadow:0 3px 14px -8px rgba(17,18,22,.22) }
.card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px }

/* ====================== BOTÕES (compactos) ====================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:34px; padding:0 13px; border-radius:var(--r-sm);
  font-size:13px; font-weight:550; cursor:pointer; border:1px solid transparent;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
  background:transparent; color:var(--ink-2); white-space:nowrap }
.btn svg{ width:15px; height:15px }
.btn--primary{ background:var(--brand); color:#fff; border-color:var(--brand) }
.btn--primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark) }
.btn--ghost{ background:var(--panel); border-color:var(--line-2); color:var(--ink-2) }
.btn--ghost:hover{ background:color-mix(in srgb,var(--ink) 3.5%,var(--panel)); border-color:var(--line-2) }
.btn--quiet{ color:var(--mut) } .btn--quiet:hover{ background:color-mix(in srgb,var(--ink) 4%,transparent) }
.btn--danger{ background:var(--danger); color:#fff; border-color:var(--danger) }
.btn--sm{ min-height:28px; padding:0 9px; font-size:12px } .btn--sm svg{ width:13px; height:13px }
.btn--block{ width:100% }
.btn--icon{ width:34px; min-height:34px; padding:0 } .btn--icon.btn--sm{ width:28px }
.btn:focus-visible{ outline:none; box-shadow:var(--focus) }

/* ====================== CHIP / FILTRO ====================== */
.chip{ display:inline-flex; align-items:center; gap:6px; height:27px; padding:0 11px;
  border-radius:var(--pill); border:1px solid var(--line-2); background:var(--panel);
  font-size:12px; font-weight:500; color:var(--mut); cursor:pointer; white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s }
.chip:hover{ border-color:var(--mut-2); color:var(--ink-2) }
.chip[aria-selected="true"],.chip.is-active{
  background:color-mix(in srgb,var(--brand) 11%,var(--panel));
  border-color:color-mix(in srgb,var(--brand) 28%,transparent); color:var(--brand) }
.chip .ct{ font-variant-numeric:tabular-nums; color:var(--mut-2) }

/* ====================== INPUT / SELECT ====================== */
.input,.select,textarea.input{ width:100%; min-height:34px; padding:6px 10px; font-size:13px; font-family:inherit;
  color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-sm);
  outline:none; transition:border-color .12s,box-shadow .12s }
textarea.input{ min-height:76px; resize:vertical; line-height:1.5 }
.input::placeholder{ color:var(--mut-2) }
.input:focus,.select:focus,textarea.input:focus{ border-color:var(--brand); box-shadow:var(--focus) }
.field{ display:flex; flex-direction:column; gap:5px }
.field > label{ font-size:11.5px; font-weight:550; color:var(--ink-2) }
.field .hint{ font-size:11px; color:var(--mut-2) }
.input-icon{ position:relative } .input-icon svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--mut-2) }
.input-icon .input{ padding-left:32px }

/* ====================== PÍLULA DE STATUS ====================== */
.pill{ display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 7px;
  border-radius:var(--r-sm); font-size:10px; font-weight:600; letter-spacing:.01em; white-space:nowrap; flex:none }
.pill .dot{ width:5px; height:5px; border-radius:50% }
.pill--ok{ background:var(--ok-bg); color:var(--ok) } .pill--ok .dot{ background:var(--ok) }
.pill--warn{ background:var(--warn-bg); color:var(--warn) } .pill--warn .dot{ background:var(--warn) }
.pill--danger{ background:var(--danger-bg); color:var(--danger) } .pill--danger .dot{ background:var(--danger) }
.pill--info{ background:var(--info-bg); color:var(--info) } .pill--info .dot{ background:var(--info) }
.pill--neutral{ background:color-mix(in srgb,var(--ink) 6%,transparent); color:var(--mut) }
.pill--brand{ background:color-mix(in srgb,var(--brand) 11%,var(--panel)); color:var(--brand) }
.pill--tier{ color:#fff; height:21px; padding:0 8px }
.pill--green{ background:var(--tier-green) } .pill--orange{ background:var(--tier-orange) } .pill--black{ background:var(--tier-black) }

/* ====================== TABELA (densa) ====================== */
.table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--panel) }
.table{ width:100%; border-collapse:collapse; font-size:12.5px }
.table th{ text-align:left; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut-2);
  font-weight:600; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; background:var(--panel) }
.table td{ padding:9px 12px; color:var(--ink-2); border-bottom:1px solid var(--line); vertical-align:middle }
.table tbody tr{ transition:background .1s }
.table tbody tr:hover{ background:color-mix(in srgb,var(--ink) 2%,transparent) }
.table tbody tr:last-child td{ border-bottom:none }
.table .num{ text-align:right; font-variant-numeric:tabular-nums }
.table .strong{ color:var(--ink); font-weight:550 }

/* ====================== SIDEBAR ====================== */
.shell{ display:grid; grid-template-columns:224px 1fr; min-height:100vh }
.shell > *{ min-width:0 }
.kpi-card{ min-width:0 }
.kpi-card__ic{ width:30px; height:30px; border-radius:7px; display:grid; place-items:center; flex:none;
  background:color-mix(in srgb,var(--brand) 9%,var(--panel)); color:var(--brand) }
.kpi-card__ic svg{ width:15px; height:15px }
.sidebar{ background:var(--side); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:12px 10px; gap:1px; position:relative; overflow:hidden }
.sidebar::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg,#6fd68a,var(--tier-orange) 62%,var(--tier-black)) }
.sidebar::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:180px; z-index:0; pointer-events:none; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.3'%3E%3Cpath d='M-10 44 Q60 16 130 40 T260 30'/%3E%3Cpath d='M-10 72 Q60 44 130 68 T260 58'/%3E%3Cpath d='M-10 100 Q60 72 130 96 T260 86'/%3E%3Cpath d='M-10 128 Q60 100 130 124 T260 114'/%3E%3Cpath d='M-10 156 Q60 128 130 152 T260 142'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom right }
.sidebar > *{ position:relative; z-index:1 }
.sidebar .brand{ display:flex; align-items:center; gap:8px; padding:5px 7px 12px }
.nav-group{ margin-top:12px } .nav-group > .label-caps{ padding:5px 9px 4px; display:block }
.nav-item{ display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:var(--r-sm);
  width:100%; border:0; background:transparent; text-align:left; font-family:inherit;
  font-size:13px; font-weight:500; color:var(--mut); cursor:pointer; transition:background .1s,color .1s }
.nav-item svg{ width:16px; height:16px; flex:none; opacity:.8 }
.nav-item:hover{ background:color-mix(in srgb,var(--ink) 3.5%,transparent); color:var(--ink-2) }
.nav-item.is-active{ background:color-mix(in srgb,var(--brand) 11%,transparent); color:var(--brand) }
.nav-item.is-active svg{ opacity:1 }
.nav-item .badge{ margin-left:auto; font-size:10.5px; font-variant-numeric:tabular-nums; color:var(--mut-2) }

/* ====================== TOPBAR (enxuta) ====================== */
.topbar{ height:48px; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:11px; padding:0 16px }
.topbar .ttl, .appbar .ttl{ font-size:13.5px; font-weight:600; letter-spacing:-.01em }
.topbar .spacer, .appbar .spacer{ flex:1 }

/* ====================== LOGO ====================== */
.logo{ display:inline-flex; align-items:center; gap:8px; font-weight:600; letter-spacing:-.02em; font-size:14px; color:var(--ink) }
.logo .mono{ width:23px; height:23px; border-radius:6px; display:grid; place-items:center;
  background:var(--brand); color:#fff; font-weight:700; font-size:12px; flex:none }
.logo .mono.lg{ width:30px; height:30px; border-radius:8px; font-size:14px }

/* ====================== BARRA DE PROGRESSO ====================== */
.bar{ height:6px; border-radius:var(--pill); background:color-mix(in srgb,var(--ink) 7%,transparent); overflow:hidden }
.bar > span{ display:block; height:100%; border-radius:var(--pill); background:var(--brand); transition:width .55s cubic-bezier(.2,.7,.2,1) }
.bar--thin{ height:4px }

/* ====================== AVATAR ====================== */
.avatar{ width:27px; height:27px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:600;
  background:color-mix(in srgb,var(--brand) 13%,var(--panel)); color:var(--brand); flex:none }
.avatar.sq{ border-radius:6px }

/* ====================== ABAS ====================== */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line) }
.tab{ padding:8px 12px; font-size:13px; font-weight:500; color:var(--mut); cursor:pointer;
  border-bottom:1.5px solid transparent; margin-bottom:-1px; transition:color .1s }
.tab:hover{ color:var(--ink-2) }
.tab.is-active{ color:var(--brand); border-bottom-color:var(--brand); font-weight:600 }

/* ====================== CARTEIRINHA V+ (arte de marca — segue vistosa) ====================== */
.vcard{ position:relative; border-radius:14px; padding:18px; color:#fff; overflow:hidden;
  aspect-ratio:1.586/1; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 10px 28px -14px rgba(10,79,45,.45) }
.vcard--green{ background:linear-gradient(135deg,#0a6b3a 0%,#03351d 100%) }
.vcard--orange{ background:linear-gradient(135deg,#f08a2c 0%,#b8480a 100%) }
.vcard--black{ background:linear-gradient(135deg,#3a3c44 0%,#16171b 100%) }
.vcard .sheen{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 80% at 85% -10%,rgba(255,255,255,.2),transparent 55%), radial-gradient(80% 70% at 8% 120%,rgba(255,255,255,.08),transparent 60%) }
.vcard::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='1.1'%3E%3Cpath d='M-10 86 Q50 64 100 84 T200 74'/%3E%3Cpath d='M-10 104 Q50 82 100 102 T200 92'/%3E%3Cpath d='M-10 122 Q50 100 100 120 T200 110'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom right }
.vcard .vc-top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1 }
.vcard .vc-brand{ font-weight:700; font-size:17px; letter-spacing:-.02em }
.vcard .vc-tier{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.85; font-weight:600 }
.vcard .vc-name{ font-size:14px; font-weight:600; letter-spacing:.01em }
.vcard .vc-meta{ font-size:10.5px; opacity:.8; font-variant-numeric:tabular-nums; margin-top:2px }
.vcard .vc-bottom{ display:flex; align-items:flex-end; justify-content:space-between; position:relative; z-index:1 }
.qr{ background:#fff; border-radius:7px; padding:5px; width:50px; height:50px; flex:none }
.qr svg{ width:100%; height:100% }

/* ====================== UTILIDADES ====================== */
.row{ display:flex; align-items:center; gap:9px }
.col{ display:flex; flex-direction:column }
.grid{ display:grid; gap:14px }
.divider{ height:1px; background:var(--line); border:0; margin:0 }
.icon-btn{ width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center; cursor:pointer;
  color:var(--mut); border:1px solid transparent; background:transparent; position:relative }
.icon-btn:hover{ background:color-mix(in srgb,var(--ink) 4%,transparent); color:var(--ink-2) }
.icon-btn svg{ width:17px; height:17px }
.dot-badge{ position:absolute; top:5px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--brand); border:2px solid var(--panel) }

/* ====================== MODAL ====================== */
.overlay{ position:fixed; inset:0; background:rgba(17,18,22,.42); display:grid; place-items:center; padding:24px; z-index:50; backdrop-filter:blur(2px) }
.modal{ background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--shadow-float); width:100%; max-width:420px; overflow:hidden }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line) }
.modal-body{ padding:18px } .modal-foot{ padding:14px 18px; border-top:1px solid var(--line); display:flex; gap:9px; justify-content:flex-end }

/* ====================== EMPTY STATE (padrão-ouro: círculo com tint de marca + h3/p) ====================== */
.empty{ text-align:center; padding:44px 24px; max-width:360px; margin:0 auto }
.empty .ic{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px;
  background:color-mix(in srgb,var(--brand) 10%,var(--panel)); color:var(--brand) }
.empty .ic svg{ width:21px; height:21px }
.empty h3{ font-size:15px; font-weight:650; letter-spacing:-.012em; color:var(--ink); margin:0 0 6px }
.empty p{ font-size:12.5px; color:var(--mut); line-height:1.5; margin:0 auto }

/* ====================== DELTA ====================== */
.delta{ display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums }
.delta--up{ color:var(--ok) } .delta--down{ color:var(--danger) }
.delta svg{ width:12px; height:12px }

/* ====================== PAINEL / APP SHELL (não "página") ====================== */
.appbar{ height:48px; background:var(--panel); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:11px; padding:0 16px; position:sticky; top:0; z-index:30 }
.workarea{ padding:16px 20px 64px; max-width:1240px; margin:0 auto }
.panel-grid{ display:grid; gap:14px }
.section-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 0 }
.section-bar .label-caps{ display:block }

/* ====================== ANIMAÇÕES ====================== */
@keyframes growBar{ from{ width:0 } }
@keyframes fadeUp{ from{ opacity:1; transform:translateY(6px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } }

/* ====================== DASHBOARD: menu mobile + animações de entrada ====================== */
.menu-btn{ display:none }
.scrim{ position:fixed; inset:0; background:rgba(17,18,22,.4); z-index:44; opacity:0; pointer-events:none; transition:opacity .2s }
.scrim.show{ opacity:1; pointer-events:auto }
.spark polyline{ stroke-dashoffset:0 }
.bar > span{ transform-origin:left }
@keyframes drawSpark{ to{ stroke-dashoffset:0 } }
@keyframes growW{ from{ transform:scaleX(0) } }
@media (prefers-reduced-motion:reduce){ .spark polyline{ animation:none; stroke-dashoffset:0 } .bar > span{ animation:none } }

/* ====================== RESPONSIVO GLOBAL (chrome compartilhado) ======================
   A topbar/appbar é definida só aqui (as páginas não a sobrescrevem), então tratá-la
   neste arquivo deixa TODAS as telas seguras em telas estreitas. */
@media(max-width:680px){
  .topbar, .appbar{ flex-wrap:wrap; height:auto; min-height:48px; padding-top:8px; padding-bottom:8px; row-gap:8px }
  /* campos de busca de largura fixa na topbar passam a ocupar a própria linha */
  .topbar .input-icon{ width:100%!important; order:10 }
  .topbar .spacer{ flex-basis:100%; height:0 }
  .workarea{ padding:14px 14px 56px }
}
@media(max-width:440px){
  body{ font-size:13px }
  .topbar{ gap:8px }
  .topbar .ttl{ font-size:13px }
  .btn{ padding:0 10px } .btn--sm{ padding:0 9px }
  .overlay{ padding:14px }
  .modal{ border-radius:var(--r-lg) }
  /* tabelas continuam roláveis na horizontal dentro de .table-wrap */
  .table th, .table td{ padding:9px 10px }
}

/* ===== LARGURA CHEIA — app usa toda a largura, sem folga centralizada em telas largas ===== */
.body, .workarea, .wrap{ max-width:none !important }
@media(min-width:1440px){
  .body, .workarea{ padding-left:max(28px,1.8vw) !important; padding-right:max(28px,1.8vw) !important }
}
/* contêineres de dashboard/portal que o swarm manteve com nome próprio */
.mc-shell, .pt-content, .cl-wrap{ max-width:none !important }
@media(min-width:1440px){ .mc-shell, .pt-content, .cl-wrap{ padding-left:max(26px,1.6vw) !important; padding-right:max(26px,1.6vw) !important } }
/* backdrop sólido: evita body/html transparente (fundo preto em telas largas/curtas) */
html{ background:var(--bg); min-height:100vh }

/* ===== SIDEBAR ESCURO (premium, on-brand) — chrome escuro × conteúdo claro ===== */
.sidebar{ background:#0e201a; border-right:1px solid rgba(255,255,255,.06); color:rgba(255,255,255,.82) }
.sidebar .logo, .sidebar .brand .logo{ color:#fff }
.sidebar .logo .mono{ background:var(--brand); color:#fff }
.sidebar .label-caps{ color:rgba(255,255,255,.40) }
.sidebar .nav-item{ color:rgba(255,255,255,.66) }
.sidebar .nav-item svg{ color:rgba(255,255,255,.50); opacity:1 }
.sidebar .nav-item:hover{ background:rgba(255,255,255,.07); color:#fff }
.sidebar .nav-item:hover svg{ color:#fff }
.sidebar .nav-item.is-active{ background:color-mix(in srgb,var(--brand) 26%,transparent); color:#eafff2; box-shadow:inset 3px 0 0 #2fbf71 }
.sidebar .nav-item.is-active svg{ color:#cdebd9 }
.sidebar .h-sub{ color:rgba(255,255,255,.46) }
.sidebar .avatar{ background:rgba(255,255,255,.12); color:#bff0d2 }
.sidebar .divider{ background:rgba(255,255,255,.08) }

/* ===== ajuste: sidebar VERDE FLORESTA (combina mais com a marca) ===== */
.sidebar{ background:#0c3a22 }
.sidebar .logo .mono{ background:#16a34a; color:#fff }
.sidebar .nav-item:hover{ background:rgba(255,255,255,.08) }
.sidebar .nav-item.is-active{ background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 3px 0 0 #6fd68a }
.sidebar .nav-item.is-active svg{ color:#cdebd9 }
.sidebar .avatar{ background:rgba(255,255,255,.13); color:#cdebd9 }

/* ===== IDENTIDADE: fonte de marca nos números de destaque + entrada com vida ===== */
@font-face{font-family:"BloggerSans";src:url("assets/fonts/BloggerSans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"BloggerSans";src:url("assets/fonts/BloggerSans-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"BloggerSans";src:url("assets/fonts/BloggerSans-600.woff2") format("woff2");font-weight:600;font-display:swap}
.kpi,.kpi-sm,.mc-econ__big,.big,.pt-kpi .n,.db-kpi .kv,.kpi-card .kv,.flash__pos,#mcGreet,.mc-greet h1{
  font-family:"BloggerSans","Inter",system-ui,sans-serif; letter-spacing:-.02em }
.h-title,.pt-h,.db-card__h h3,.pt-card h3{ font-family:"BloggerSans","Inter",system-ui,sans-serif }
@keyframes idUp{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.card,.mc-card{ animation:idUp .5s cubic-bezier(.2,.7,.2,1) both }
@media (prefers-reduced-motion:reduce){ .card,.mc-card{ animation:none } }

/* ===== sidebar VERDE FLORESTA também nos PORTAIS (.pt-side / .pt-shell) ===== */
.pt-shell{ --pt-side-bg:#0c3a22 !important }
.pt-side{ background:#0c3a22 !important; border-right:1px solid rgba(255,255,255,.06) !important; color:rgba(255,255,255,.82) }
.pt-brand{ border-bottom-color:rgba(255,255,255,.08) !important }
.pt-brand .bn b{ color:#fff !important }
.pt-brand .bn span{ color:rgba(255,255,255,.5) !important }
.pt-mono{ background:#16a34a !important; color:#fff !important }
.pt-navgroup{ color:rgba(255,255,255,.40) !important }
.pt-nav button{ color:rgba(255,255,255,.66) !important }
.pt-nav button svg{ color:rgba(255,255,255,.50) !important; opacity:1 }
.pt-nav button:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important }
.pt-nav button:hover svg{ color:#fff !important }
.pt-nav button.on{ background:rgba(255,255,255,.12) !important; color:#fff !important; box-shadow:inset 3px 0 0 #6fd68a !important }
.pt-nav button.on svg{ color:#cdebd9 !important }
.pt-side .pt-foot{ border-top-color:rgba(255,255,255,.08) !important }
.pt-logout{ color:rgba(255,255,255,.6) !important }
.pt-logout:hover{ background:rgba(255,80,70,.16) !important; color:#ffb4ad !important }