/* ===== PADRÃO VISUAL ZIONGROUP — igual ao Financeiro, em todas as abas =====
   Tokens --z-* (escuro e claro) + componentes comuns + filtro de período. */
html:root{
  --z-bg:#10151D; --z-surface:#19212D; --z-surface-2:#1E2733; --z-surface-3:#253040;
  --z-line:#2A3441; --z-line-2:#222B36; --z-line-strong:#3A4654;
  --z-ink:#E7ECF3; --z-ink-2:#B4BFCD; --z-muted:#8B97A8; --z-faint:#5B6676;
  --z-brand:#7C87F5; --z-brand-soft:rgba(124,135,245,.17); --z-brand-ink:#FFFFFF; --z-brand-txt:#AEB5FA;
  --z-in:#2FD3A0; --z-in-soft:rgba(47,211,160,.13); --z-out:#FB7167; --z-out-soft:rgba(251,113,103,.13);
  --z-amber:#E6A94D; --z-amber-soft:rgba(230,169,77,.15); --z-info:#6CA8F0; --z-info-soft:rgba(108,168,240,.15);
  --z-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.32);
  --z-radius:14px;
  --z-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --z-display:'Sora','Inter',system-ui,sans-serif;
  color-scheme:dark;
}
html:root[data-theme="light"]{
  --z-bg:#F4F6FA; --z-surface:#FFFFFF; --z-surface-2:#F1F3F8; --z-surface-3:#E7EBF2;
  --z-line:#DDE2EA; --z-line-2:#EDF0F5; --z-line-strong:#C9D0DB;
  --z-ink:#18202B; --z-ink-2:#3C4757; --z-muted:#5D6878; --z-faint:#A3ACB9;
  --z-brand:#5B66E0; --z-brand-soft:rgba(91,102,224,.12); --z-brand-ink:#FFFFFF; --z-brand-txt:#4E58C9;
  --z-in:#0E9F72; --z-in-soft:rgba(14,159,114,.12); --z-out:#D6453B; --z-out-soft:rgba(214,69,59,.10);
  --z-amber:#B97B12; --z-amber-soft:rgba(185,123,18,.13); --z-info:#2A6FC4; --z-info-soft:rgba(42,111,196,.11);
  --z-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 18px rgba(16,24,40,.07);
  color-scheme:light;
}
html:root body{background:var(--z-bg);color:var(--z-ink);font-family:var(--z-font);font-feature-settings:"tnum" 1,"cv05" 1}

/* ----- filtro de período (Hoje / 7 dias / 30 dias / Este mês / Mês anterior / Tudo / Personalizado) ----- */
.pz-per{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:100%}
.pz-per .pz-seg{display:inline-flex;flex-wrap:wrap;background:var(--z-surface);border:1px solid var(--z-line);border-radius:11px;padding:4px;box-shadow:var(--z-shadow);max-width:100%}
.pz-per .pz-seg button{border:0;background:transparent;font:500 13px var(--z-font);color:var(--z-muted);padding:8px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;min-height:0;transition:.15s}
.pz-per .pz-seg button:hover{color:var(--z-ink)}
.pz-per .pz-seg button[aria-pressed="true"]{background:var(--z-brand);color:var(--z-brand-ink)}
.pz-per .pz-datas{display:inline-flex;gap:8px;align-items:center;color:var(--z-muted);font-size:13px}
.pz-per .pz-datas[hidden]{display:none}
.pz-per .pz-datas input{font:400 13px var(--z-font);color:var(--z-ink);background:var(--z-surface);border:1px solid var(--z-line);border-radius:9px;padding:8px 10px;min-height:0;width:auto;box-shadow:none}
@media (max-width:640px){
  .pz-per,.pz-per .pz-seg{width:100%}
  .pz-per .pz-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .pz-per .pz-seg button{padding:8px 4px;font-size:12.5px}
  .pz-per .pz-datas{width:100%}
  .pz-per .pz-datas input{flex:1;min-width:0}
}

/* Metas (painel de OKRs + Atividades) no padrão do portal */
html:root[data-theme],html:root.dark,html:root.light{
  --bg:var(--z-bg); --surface:var(--z-surface); --surface2:var(--z-surface-2); --border:var(--z-line); --text:var(--z-ink); --muted:var(--z-muted);
  --accent:var(--z-brand); --accent-soft:var(--z-brand-soft);
  --ok:var(--z-in); --ok-soft:var(--z-in-soft); --warn:var(--z-amber); --warn-soft:var(--z-amber-soft);
  --risk:var(--z-out); --risk-soft:var(--z-out-soft); --done:var(--z-info); --done-soft:var(--z-info-soft); --shadow:var(--z-shadow);
  --kb-list:#151C27; --kb-card:var(--z-surface-2); --kb-card-h:var(--z-surface-3);
}
html:root[data-theme="light"]{ --kb-list:#EBEEF3; --kb-card:#FFFFFF; --kb-card-h:#F6F8FB; }
body{font:14px/1.45 var(--z-font)}
/* cabeçalho: título + subtítulo, abas sublinhadas embaixo (igual ao Financeiro) */
header{position:static;background:none;border:0}
.wrap{max-width:1328px;padding:0 24px}
.top,body.embed .top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px 16px;padding:28px 24px 0}
.me{grid-row:1;grid-column:2;justify-self:end}
.brand,body.embed .brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0}
.brand h1{font:700 25px/1.2 var(--z-display);letter-spacing:-.02em;margin:0;color:var(--z-ink)}
.brand span{font-size:13.5px;color:var(--z-muted);font-weight:400}
.me{font-size:12.5px;background:var(--z-surface);border:1px solid var(--z-line);border-radius:999px;padding:8px 14px;box-shadow:var(--z-shadow)}
.tabs{grid-column:1/-1;gap:4px;border-bottom:1px solid var(--z-line);overflow-x:auto}
.tab{background:none!important;border-radius:0;padding:10px 16px;font:600 14px var(--z-font);color:var(--z-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--z-ink)}
.tab.on{color:var(--z-ink);border-bottom-color:var(--z-brand)}
main.wrap{padding-top:22px;padding-bottom:60px}
/* filtros e botões */
.filters{gap:14px;padding:0 0 22px}
.filters input,.filters select,.kb-top select,.kb-top input:not([type=checkbox]){background:var(--z-surface);border:1px solid var(--z-line);border-radius:9px;padding:8px 10px;font-size:13px;color:var(--z-ink)}
.btn{border-radius:11px;padding:8px 14px;font-weight:500;box-shadow:var(--z-shadow);background:var(--z-surface);border-color:var(--z-line)}
.btn:hover{border-color:var(--z-brand);background:var(--z-surface)}
.btn.primary,html:root .btn.primary{background:var(--z-brand);border-color:var(--z-brand);color:var(--z-brand-ink)!important}
.btn.sm{border-radius:8px;box-shadow:none;padding:4px 10px}
.btn.ghost{box-shadow:none;background:none;border-color:transparent}
/* cartões no mesmo estilo dos KPIs */
.cards{gap:16px;margin:0 0 20px}
.card{border-radius:var(--z-radius);padding:18px 18px 16px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--z-brand);opacity:.55}
.card .k{font-size:12.5px;font-weight:500}
.card .v{font:700 26px/1.2 var(--z-display);letter-spacing:-.02em;margin-top:11px}
.deptbars,.obj,.mt,.act,.empty,dialog{border-radius:var(--z-radius)}
.deptbars,.obj,.mt,.act{box-shadow:var(--z-shadow)}
.deptbars{padding:16px 18px;margin-bottom:20px}
.obj-t h3,.mt h3{font:600 15px var(--z-display)}
.grp{font-size:11px;letter-spacing:.05em}
.act-per{margin-bottom:16px}
/* Atividades */
.kb-list{border-radius:12px;border-color:var(--z-line)}
.kb-card{border-radius:10px;border-color:var(--z-line)}
.kb-card:hover{border-color:var(--z-brand)}
@media (max-width:700px){.wrap{padding:0 12px}.top,body.embed .top{padding:16px 12px 0;grid-template-columns:1fr}.brand h1{font-size:21px}.me{grid-row:2;grid-column:1;justify-self:start}.card .v{font-size:21px}}