/* Eixo Design System (eds-*) — base do ERP de serviços.
   IDENTIDADE VISUAL OFICIAL conforme Manual da Marca Eixo Produtora v1.0:
   paleta Azul Eixo (#0F2742) · Amanhecer (#FFC846) · Pôr do Sol (#FF6A2A)
   + neutros Chumbo (#1C1E22) · Cinza Médio (#8A9299) · Branco.
   Tipografia UI: Inter (Google Fonts) — Regular, Medium, Bold.

   Tokens próprios `eds-*` para que os componentes não dependam dos vars
   antigos do index.html (que usa paleta tailwind-y). Carrega no sandbox e,
   na onda de migração da chrome, no index.html. */

/* ========================= Tokens da marca Eixo ========================= */
:root {
  /* Paleta oficial Eixo */
  --eixo-azul: #0F2742;
  --eixo-amanhecer: #FFC846;
  --eixo-por-do-sol: #FF6A2A;
  --eixo-branco: #FFFFFF;
  --eixo-chumbo: #1C1E22;
  --eixo-cinza: #8A9299;
  /* Verde sóbrio para "ok" (paleta Eixo não cobre semáforo, usamos verde
     harmônico com Azul Eixo). Único token fora do manual, justificado por
     convenção universal de semáforo. */
  --eixo-verde: #2D9A6B;

  /* Soft variants (fundo de pills/badges) */
  --eixo-azul-soft: rgba(15, 39, 66, .10);
  --eixo-amanhecer-soft: rgba(255, 200, 70, .18);
  --eixo-por-do-sol-soft: rgba(255, 106, 42, .14);
  --eixo-verde-soft: rgba(45, 154, 107, .14);
  --eixo-cinza-soft: rgba(138, 146, 153, .14);

  /* Tipografia */
  --eds-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --eds-radius: 8px;
  --eds-radius-sm: 4px;
  --eds-gap: 12px;
  --eds-gap-sm: 8px;
  --eds-pad-card: 16px;
  --eds-fs-label: 11px;
  --eds-fs-body: 13px;
  --eds-fs-value: 22px;
  --eds-fs-value-hero: 28px;

  /* Escala tipográfica unificada (Onda N.UI-2). Usar `--fs-*` em vez de
     px hardcoded. Antes: 18 tamanhos coexistindo (incl. 10.5, 11.67, 12.5,
     13.33 vindos de em/0.83x). Agora: 8 degraus consistentes. */
  --fs-2xs: 10px;     /* metadados muito pequenos, contagens, rodapé */
  --fs-xs: 11px;      /* labels de KPI, eyebrows, breadcrumbs */
  --fs-sm: 12px;      /* meta, captions, chips */
  --fs-md: 13px;      /* corpo denso (tabelas, formulários) */
  --fs-base: 14px;    /* corpo padrão */
  --fs-lg: 16px;      /* títulos de seção (h1/h2 visíveis) */
  --fs-xl: 18px;      /* sub-headings de painel */
  --fs-2xl: 22px;     /* KPI value */
  --fs-display: 32px; /* hero "SALDO TOTAL" */

  /* Mapeamento semâforos → cores Eixo */
  --eds-ok: var(--eixo-verde);
  --eds-warn: var(--eixo-amanhecer);
  --eds-crit: var(--eixo-por-do-sol);
  --eds-info: var(--eixo-azul);
  --eds-muted: var(--eixo-cinza);

  /* Aliases nomeados das cores oficiais — usados pelo helper getEdsColor()
     em static/js/_tokens.js (P.4.Polish, bug #44). Mantêm a paleta toda
     legível a partir do nome em vez de função semafórica. */
  --eds-amanhecer: var(--eixo-amanhecer);
  --eds-por-do-sol: var(--eixo-por-do-sol);
  --eds-azul: var(--eixo-azul);

  --eds-ok-soft: var(--eixo-verde-soft);
  --eds-warn-soft: var(--eixo-amanhecer-soft);
  --eds-crit-soft: var(--eixo-por-do-sol-soft);
  --eds-info-soft: var(--eixo-azul-soft);
  --eds-muted-soft: var(--eixo-cinza-soft);

  /* Override dos tokens "antigos" do index.html quando o components.css é
     carregado por uma página que NÃO os define (sandbox, futuras pages
     migradas). Páginas que já têm `--accent` etc. continuam usando os seus
     locais — as próprias regras eds-* só consomem `--eds-*`. */
  --accent-eixo: var(--eixo-azul);
  --accent-soft-eixo: var(--eixo-azul-soft);

  /* Onda N.2.5 — Escala de espaçamento canônica (4-8-12-16-24-32-48).
     Banidos: 7px, 9px, 11px, 13px (em padding/margin/gap), 15px, 17px.
     Use --sp-* em vez de px hardcoded. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Onda UX.A11Y-TOUCH (2026-05-27) — altura mínima de alvo clicável.
     --tap-min  = piso WCAG 2.5.5 / Apple HIG (44px), aplicado em toque/mobile.
     --control-h = altura confortável no desktop denso (38px).
     --tap = token consumido pelos controles; vale --control-h por padrão e
     sobe pra --tap-min sob ponteiro grosso ou viewport estreito (override
     logo abaixo do :root). Use min-height: var(--tap) em vez de px solto. */
  --tap-min: 44px;
  --control-h: 38px;
  --tap: var(--control-h);

  /* Onda N.2.5 — Escala de elevação (5 níveis). Substitui box-shadow ad-hoc.
     Padrão Material 3 ajustado para a paleta Eixo (Azul como tom). */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(15, 39, 66, .04);
  --elev-2: 0 2px 8px rgba(15, 39, 66, .08);
  --elev-3: 0 6px 18px rgba(15, 39, 66, .12);
  --elev-modal: 0 16px 60px rgba(15, 39, 66, .22);

  /* Onda N.2.5 — Z-index normalizados. */
  --z-base: 1;
  --z-sticky: 5;
  --z-dropdown: 50;
  --z-popover: 100;
  --z-modal: 1000;
  --z-toast: 9000;
  --z-skip: 10000;

  /* Onda UI-Dark-Fix (2026-05-23) — tokens de superfície que eram
     referenciados como var(--token, #fallbackClaro) por todo o index.html e
     JS mas NUNCA definidos. Sem definição o fallback claro vencia em TODO
     tema, deixando fundos brancos com texto claro (ilegível) no dark mode
     (ex.: "Soma dos splits", empty states, dropdowns, tabelas). Agora têm
     valor light aqui + override dark nos blocos abaixo, então invertem. */
  --surface: #ffffff;
  --surface-2: #f4f6f8;
  --surface-border: #e3e6ea;
  --surface-border-subtle: #eef0f3;
  --bg-soft: #f4f6f8;
  --bg-card: #ffffff;
  --bg-canvas: #f7f8fa;
  --card: #ffffff;
  --eds-bg-soft: #f4f6f8;
  --eds-bg-elev1: rgba(15, 39, 66, .05);
  --eds-border: #e3e6ea;
  --eds-accent: var(--eixo-azul);
  /* accent SÓLIDO p/ fundos/gradientes com texto branco por cima — sempre
     navy (≠ --eds-accent, que clareia no dark p/ servir como cor de TEXTO). */
  --eds-accent-strong: var(--eixo-azul);
  --eds-amanhecer-soft: var(--eixo-amanhecer-soft);
  --eds-text: #111827;
  --eds-text-muted: #6b7280;
  --text-soft: #6b7280;
  --muted: #6b7280;
  --accent-text: #8a5a00;
  --accent-border: #f0c060;
  --link: #0F2742;
  --err: #dc2626;
}

/* Onda UX.A11Y-TOUCH — toque/mobile: alvos sobem pro piso de 44px. Cobre
   tanto telas estreitas quanto dispositivos de ponteiro grosso (tablet com
   viewport largo). */
@media (pointer: coarse), (max-width: 720px) {
  :root { --tap: var(--tap-min); }
}

:root[data-theme="dark"] {
  /* Em dark, fundos navy escuro (variação do Azul Eixo) e elementos
     mantêm hue. Contraste WCAG AA. */
  --eds-ok-soft: rgba(45, 154, 107, .22);
  --eds-warn-soft: rgba(255, 200, 70, .18);
  --eds-crit-soft: rgba(255, 106, 42, .22);
  --eds-info-soft: rgba(96, 165, 250, .18);
  --eds-muted-soft: rgba(138, 146, 153, .22);

  /* Onda UI-Dark-Fix — superfícies invertidas no dark (navy escuro). */
  --surface: #1e293b;
  --surface-2: #14233c;
  --surface-border: #334155;
  --surface-border-subtle: #2a3a52;
  --bg-soft: #172033;
  --bg-card: #1e293b;
  --bg-canvas: #0f172a;
  --card: #1e293b;
  --eds-bg-soft: #172033;
  --eds-bg-elev1: rgba(255, 255, 255, .06);
  --eds-border: #334155;
  --eds-accent: #7FA9D6;
  --eds-accent-strong: #1a3a5c;
  --eds-amanhecer-soft: rgba(255, 200, 70, .18);
  --eds-text: #f1f5f9;
  --eds-text-muted: #94a3b8;
  --text-soft: #94a3b8;
  --muted: #94a3b8;
  --accent-text: #ffd98a;
  --accent-border: rgba(255, 200, 70, .45);
  --link: #7FA9D6;
  --err: #f87171;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --eds-ok-soft: rgba(45, 154, 107, .22);
    --eds-warn-soft: rgba(255, 200, 70, .18);
    --eds-crit-soft: rgba(255, 106, 42, .22);
    --eds-info-soft: rgba(96, 165, 250, .18);
    --eds-muted-soft: rgba(138, 146, 153, .22);

    /* Onda UI-Dark-Fix — superfícies invertidas no dark (navy escuro). */
    --surface: #1e293b;
    --surface-2: #14233c;
    --surface-border: #334155;
    --surface-border-subtle: #2a3a52;
    --bg-soft: #172033;
    --bg-card: #1e293b;
    --bg-canvas: #0f172a;
    --card: #1e293b;
    --eds-bg-soft: #172033;
    --eds-bg-elev1: rgba(255, 255, 255, .06);
    --eds-border: #334155;
    --eds-accent: #7FA9D6;
    --eds-accent-strong: #1a3a5c;
    --eds-amanhecer-soft: rgba(255, 200, 70, .18);
    --eds-text: #f1f5f9;
    --eds-text-muted: #94a3b8;
    --text-soft: #94a3b8;
    --muted: #94a3b8;
    --accent-text: #ffd98a;
    --accent-border: rgba(255, 200, 70, .45);
    --link: #7FA9D6;
    --err: #f87171;
  }
}

/* Aplica Inter em qualquer descendente que use eds-* (sem forçar no body
   inteiro — páginas que ainda não migraram não são tocadas). */
.eds-pill,
.eds-kpi,
.eds-action-banner,
.eds-action-card,
.eds-progress,
.eds-insight-badge,
.eds-insight-popover,
.eds-drawer,
.eds-lente,
.eds-lente-menu {
  font-family: var(--eds-font-ui);
}

/* ========================= Skeleton (estado de loading) =========================
   Marque o elemento com `data-skeleton` (geralmente conteúdo `—`) para sinalizar
   que o valor ainda não chegou. Quando o JS popular o valor real, deve remover
   o atributo (ou usar o helper clearSkeleton). Pulse sutil + cor muted distingue
   loading de R$ 0,00 real. */
[data-skeleton] {
  color: var(--eds-muted, #8A9299);
  opacity: 0.7;
  animation: eds-skel-pulse 1.4s ease-in-out infinite;
  letter-spacing: 0.04em;
}
@keyframes eds-skel-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  [data-skeleton] { animation: none; opacity: 0.65; }
}

/* Shimmer gradient — variant gráfico para placeholders de chart/card/lista.
   Cravado em P.3.Polish (sub-onda UX-2). Substitui textos "Carregando…"
   por blocos animados com gradient Azul Eixo suave. */
.eds-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--border, #eef0f3) 0%,
    var(--panel-2, #f6f7f9) 45%,
    var(--border, #eef0f3) 90%
  );
  background-size: 200% 100%;
  animation: eds-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes eds-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}
.eds-skeleton--text  { height: 14px; margin: 6px 0; }
.eds-skeleton--card  { height: 80px; margin: 8px 0; }
.eds-skeleton--chart { height: 240px; }
.eds-skeleton--row   { height: 28px; margin: 4px 0; }
.eds-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .eds-skeleton { animation: none; opacity: 0.6; }
}

/* ========================= StatusPill ========================= */
.eds-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--eds-fs-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.6;
  border: 1px solid transparent;
}
.eds-pill--ok    { color: var(--eds-ok);    background: var(--eds-ok-soft); }
.eds-pill--warn  { color: var(--eds-warn);  background: var(--eds-warn-soft); }
.eds-pill--crit  { color: var(--eds-crit);  background: var(--eds-crit-soft); }
.eds-pill--info  { color: var(--eds-info);  background: var(--eds-info-soft); }
.eds-pill--muted { color: var(--eds-muted); background: var(--eds-muted-soft); }
.eds-pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* v112 — chips de contrato (enviado/assinado) na cabeça do card de convite.
   Toggle clicável (NÃO é pill decorativo): borda sempre visível pra se distinguir
   do badge de status ao lado. Apagado = muted; aceso = warn (📨 enviado, etapa
   intermediária) → ok (✍️ assinado, etapa final). Enviado em warn (não info) evita
   colidir com o badge "Confirmado" (info/azul) adjacente. Sem hex — só tokens. */
.cv-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  min-height: 28px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font-family: inherit;
  font-size: var(--eds-fs-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.4;
  cursor: pointer;
  color: var(--eds-muted);
  background: var(--eds-muted-soft);
  border: 1px solid var(--border);
}
.cv-flag:hover { border-color: var(--eds-muted); }
.cv-flag:focus-visible { outline: 2px solid var(--eds-info); outline-offset: 1px; }
.cv-flag--enviado.is-on  { color: var(--eds-warn); background: var(--eds-warn-soft); border-color: var(--eds-warn); }
.cv-flag--assinado.is-on { color: var(--eds-ok);   background: var(--eds-ok-soft);   border-color: var(--eds-ok); }

/* v113 (EVT.LOCAL) — campo de local do evento (linha do link + prévia OSM). */
.em-local-row { display: flex; gap: 6px; align-items: stretch; margin-top: 6px; }
.em-local-row input[type="url"] { flex: 1; }
.em-local-preview {
  width: 100%;
  height: 220px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 8px;
}

/* RiskPill = StatusPill com paleta específica e prefixo */
.eds-risk { font-variant: small-caps; }
.eds-risk--seguro    { color: var(--eds-ok);    background: var(--eds-ok-soft); }
.eds-risk--sensivel  { color: var(--eds-warn);  background: var(--eds-warn-soft); }
.eds-risk--bloqueado { color: var(--eds-muted); background: var(--eds-muted-soft); }

/* ========================= KPICard ========================= */
.eds-kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  /* UX.HERO-VIVO: trilho de semáforo — base neutra; ok/warn/crit pintam */
  border-left: 3px solid var(--border);
  border-radius: var(--eds-radius);
  padding: var(--eds-pad-card);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
  position: relative;
  cursor: default;
  transition: border-color .12s, box-shadow .12s;
}
/* UX.HERO-VIVO: semáforo visível no próprio card (a classe sempre existiu,
   mas nada a pintava — o status só aparecia em spark/delta, sempre null).
   DASH.PREMIUM: rail 4px + tint suave de status na superfície (~5%) — dá
   profundidade e leitura de cor sem virar alarme; vale light e dark. */
.eds-kpi--ok, .eds-kpi--warn, .eds-kpi--crit { border-left-width: 4px; }
.eds-kpi--ok   { border-left-color: var(--eds-ok);   background: color-mix(in srgb, var(--eds-ok) 5%, var(--panel)); }
.eds-kpi--warn { border-left-color: var(--eds-warn); background: color-mix(in srgb, var(--eds-warn) 6%, var(--panel)); }
.eds-kpi--crit { border-left-color: var(--eds-crit); background: color-mix(in srgb, var(--eds-crit) 6%, var(--panel)); }
.eds-kpi--clickable { cursor: pointer; }
/* DASH.PREMIUM: card clicável ganha affordance — hover sobe a borda e a sombra. */
.eds-kpi--clickable:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 23, 42, .12); }
.eds-kpi--clickable:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.eds-kpi--clickable:hover {
  border-color: var(--baseline);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
.eds-kpi__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  /* DASH.PREMIUM: head com altura reservada (2 linhas de label) pra o valor
     começar na mesma linha de base em todos os cards da faixa. */
  min-height: calc(2 * var(--eds-fs-label) * 1.3);
}
.eds-kpi__label {
  font-size: var(--eds-fs-label);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  /* DASH.PREMIUM: trava em 2 linhas — 'Shares Fred' e afins não empurram o
     valor pra baixo desalinhando a faixa. */
  line-height: 1.3;
  max-height: calc(2 * var(--eds-fs-label) * 1.3);
  overflow: hidden;
}
.eds-kpi__periodo {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  margin-top: calc(-1 * var(--sp-1));
  letter-spacing: 0.01em;
}
/* UX.HERO-VIVO: meta da régua viva do PE vigente sob o valor */
.eds-kpi__meta {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: calc(-1 * var(--sp-1));
}
/* Onda 213 — badge de staleness (dado de integração defasado, ex.: snapshot Reportei) */
.eds-kpi__stale {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--eds-warn);
  white-space: nowrap;
  cursor: help;
}
/* Onda 214 — campo marcado pela validação client-side (removido no 1º input/change) */
.input-invalido {
  border-color: var(--eds-crit) !important;
  box-shadow: 0 0 0 2px var(--eds-crit-soft);
}
.eds-kpi__value {
  font-size: var(--eds-fs-value);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.eds-kpi--hero .eds-kpi__value { font-size: var(--eds-fs-value-hero); }
.eds-kpi__delta {
  font-size: var(--eds-fs-label);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.eds-kpi__delta--up   { color: var(--eds-ok); }
.eds-kpi__delta--down { color: var(--eds-crit); }
.eds-kpi__delta--flat { color: var(--text-muted); }
.eds-kpi__delta-label { font-weight: 400; color: var(--text-muted); margin-left: 2px; }
.eds-kpi__spark {
  margin-top: auto;
  height: 24px;
  width: 100%;
  color: var(--baseline);
}
/* UX.HERO-VIVO: o svg .kpi-spark só tinha tamanho dentro de .kpi-card (Painel
   legado) — sem isto ele estoura o slot de 24px e desenha por cima do card. */
.eds-kpi__spark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.eds-kpi--ok   .eds-kpi__spark { color: var(--eds-ok); }
.eds-kpi--warn .eds-kpi__spark { color: var(--eds-warn); }
.eds-kpi--crit .eds-kpi__spark { color: var(--eds-crit); }
.eds-kpi__formula {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  display: none;
}
.eds-kpi:hover .eds-kpi__formula { display: block; }
.eds-kpi__stub {
  font-size: var(--eds-fs-label);
  color: var(--text-muted);
  font-style: italic;
}

/* ========================= HeroStrip ========================= */
.eds-hero-strip {
  display: grid;
  gap: var(--eds-gap);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 16px;
}
@media (max-width: 720px) {
  .eds-hero-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .eds-hero-strip { grid-template-columns: 1fr; }
}

/* ========================= ActionBanner ========================= */
.eds-action-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.eds-action-banner__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--eds-radius);
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: var(--eds-fs-body);
}
.eds-action-banner__item--warn { border-left: 4px solid var(--eds-warn); }
.eds-action-banner__item--crit { border-left: 4px solid var(--eds-crit); }
.eds-action-banner__item--info { border-left: 4px solid var(--eds-info); }
.eds-action-banner__icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}
.eds-action-banner__body { flex: 1; min-width: 0; }
.eds-action-banner__title { font-weight: 600; }
.eds-action-banner__sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.eds-action-banner__cta {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: var(--eds-radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.eds-action-banner__cta:hover { background: var(--accent-soft); }
.eds-action-banner__dismiss {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  flex-shrink: 0;
  border-radius: var(--eds-radius-sm);
}
.eds-action-banner__dismiss:hover { color: var(--text); background: var(--baseline-soft); }

/* Dropdown de opções de dismiss (v65) — popover inline ao lado do ✕ */
.eds-action-banner__dismiss-wrap {
  position: relative;
  flex-shrink: 0;
}
.eds-action-banner__menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 220px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  box-shadow: 0 4px 16px rgba(15, 39, 66, .14);
  padding: 4px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eds-action-banner__menu[hidden] { display: none; }
.eds-action-banner__menu-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--eds-radius-sm);
  cursor: pointer;
  font-size: var(--fs-sm, 13px);
  color: var(--text);
  white-space: nowrap;
}
.eds-action-banner__menu-item:hover {
  background: var(--accent-soft, rgba(15, 39, 66, .08));
}

/* ========================= ActionCard ========================= */
.eds-action-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: var(--eds-radius);
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: var(--eds-fs-body);
}
.eds-action-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.eds-action-card__title { font-weight: 600; }
.eds-action-card__body { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.eds-action-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.eds-action-card__due {
  font-size: 11px;
  color: var(--text-muted);
}

/* ========================= ProgressList ========================= */
.eds-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eds-progress__item { display: flex; flex-direction: column; gap: 4px; }
.eds-progress__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--eds-fs-body);
}
.eds-progress__label { font-weight: 500; }
.eds-progress__nums {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.eds-progress__bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--baseline-soft);
  overflow: hidden;
}
.eds-progress__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--eds-info);
  transition: width .25s;
}
.eds-progress__fill--ok   { background: var(--eds-ok); }
.eds-progress__fill--warn { background: var(--eds-warn); }
.eds-progress__fill--crit { background: var(--eds-crit); }

/* ========================= InsightBadge ========================= */
.eds-insight-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--eds-info-soft);
  color: var(--eds-info);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  line-height: 1.4;
}
.eds-insight-badge:hover { background: var(--accent-soft); }
.eds-insight-badge--warn { background: var(--eds-warn-soft); color: var(--eds-warn); }
.eds-insight-badge--crit { background: var(--eds-crit-soft); color: var(--eds-crit); }

.eds-insight-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  width: 280px;
  padding: 12px;
  border-radius: var(--eds-radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
  font-size: 12px;
  display: none;
}
.eds-insight-popover--open { display: block; }
.eds-insight-popover__title { font-weight: 600; margin-bottom: 4px; }
.eds-insight-popover__body { color: var(--text-muted); line-height: 1.5; }
.eds-insight-popover__foot {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.eds-insight-popover__foot button {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--eds-radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.eds-insight-popover__foot button:hover { background: var(--baseline-soft); }

/* ========================= InfoTooltip (Onda CFO sub-onda 1) =========================
   Diferente do InsightBadge: HTML+CSS estático, sem fetch, sem state global.
   Texto perene (label + fórmula + faixa saudável + link docs). Click pra abrir/fechar,
   Esc fecha, click-fora fecha. Tokens canônicos eds-* — zero hex literal. */
.eds-info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  margin-left: var(--sp-1);
  line-height: 1;
}
.eds-info-tooltip__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--eds-muted);
  cursor: pointer;
  border-radius: 999px;
  font-family: inherit;
  transition: color .15s, background .15s;
}
.eds-info-tooltip__trigger:hover {
  color: var(--eds-info);
  background: var(--eds-info-soft);
}
.eds-info-tooltip__trigger:focus-visible {
  color: var(--eds-info);
  background: var(--eds-info-soft);
  outline: 2px solid var(--eds-info);
  outline-offset: 2px;
}
.eds-info-tooltip__trigger[aria-expanded="true"] {
  color: var(--eds-info);
  background: var(--eds-info-soft);
}

.eds-info-tooltip__popover {
  position: absolute;
  top: calc(100% + var(--sp-1));
  left: 0;
  z-index: var(--z-popover);
  width: 260px;
  padding: var(--sp-3);
  border-radius: var(--eds-radius);
  border: 1px solid var(--border, var(--eds-muted-soft));
  background: var(--panel, var(--eixo-branco));
  box-shadow: var(--elev-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text, var(--eixo-chumbo));
  display: none;
  text-align: left;
  white-space: normal;
  /* Reset de heranças (popover pode estar dentro de label uppercase, eyebrow, etc.) */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.eds-info-tooltip__popover--right { left: auto; right: 0; }
.eds-info-tooltip__popover--open { display: block; }

.eds-info-tooltip__titulo {
  font-weight: 600;
  font-size: var(--fs-md);
  margin-bottom: var(--sp-1);
  color: var(--eds-info);
}
.eds-info-tooltip__formula {
  color: var(--text, var(--eixo-chumbo));
  margin-bottom: var(--sp-2);
}
.eds-info-tooltip__faixa {
  color: var(--text-muted, var(--eds-muted));
  font-size: var(--fs-xs);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--eds-muted-soft);
}
.eds-info-tooltip__link {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--eds-info);
  text-decoration: none;
}
.eds-info-tooltip__link:hover { text-decoration: underline; }

/* ========================= CopilotoDrawer ========================= */
.eds-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 12px rgba(15, 23, 42, .08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .2s ease-out;
  z-index: 1000;
}
.eds-drawer--open { transform: translateX(0); }
.eds-drawer__head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.eds-drawer__title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.eds-drawer__ctx {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.eds-drawer__close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: var(--eds-radius-sm);
}
.eds-drawer__close:hover { color: var(--text); background: var(--baseline-soft); }
.eds-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eds-drawer__placeholder {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  text-align: center;
  padding: 24px 8px;
  border: 1px dashed var(--border);
  border-radius: var(--eds-radius);
}
.eds-drawer__msg {
  padding: 10px 12px;
  border-radius: var(--eds-radius);
  font-size: 13px;
  line-height: 1.5;
}
.eds-drawer__msg--user { background: var(--accent-soft); align-self: flex-end; max-width: 80%; }
.eds-drawer__msg--ai { background: var(--baseline-soft); max-width: 90%; }
.eds-drawer__foot {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}
.eds-drawer__input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  min-height: 36px;
  max-height: 120px;
}
.eds-drawer__input:focus { outline: none; border-color: var(--accent); }
.eds-drawer__send {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--eds-radius);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.eds-drawer__send[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 480px) {
  .eds-drawer { width: 100vw; }
}

/* ========================= LenteToggle ========================= */
.eds-lente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  position: relative;
}
.eds-lente:hover { border-color: var(--baseline); }
.eds-lente__dot { width: 8px; height: 8px; border-radius: 50%; }
.eds-lente__dot--admin { background: #6b7280; }
.eds-lente__dot--ceo   { background: #2563eb; }
.eds-lente__dot--cfo   { background: #16a34a; }
.eds-lente__dot--coo   { background: #ea580c; }
.eds-lente__dot--tudo  { background: linear-gradient(45deg, #2563eb 0 33%, #16a34a 33% 66%, #ea580c 66%); }
.eds-lente__caret { color: var(--text-muted); font-size: 10px; }

.eds-lente-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
  z-index: 50;
  overflow: hidden;
  display: none;
}
.eds-lente-menu--open { display: block; }
.eds-lente-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text);
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.eds-lente-menu__item:hover { background: var(--baseline-soft); }
.eds-lente-menu__item--active { background: var(--accent-soft); font-weight: 600; }
.eds-lente-menu__item-sub { color: var(--text-muted); font-size: 11px; margin-left: auto; }

/* ============================================================
   Onda N.2 — Dashboard C-level (CEO/CFO/COO)
   Escopo: tabpanels [data-tab-content="dashboard-*"] usam tokens Eixo.
   ============================================================ */

[data-tab-content^="dashboard-"] {
  /* Reseta a paleta dentro dos painéis dos 3 dashboards (chrome legacy fica fora). */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 24px;
  min-height: 100%;
}

.eds-dashboard {
  max-width: 1280px;
  margin: 0 auto;
}

.eds-dashboard__loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

.eds-dashboard__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.eds-dashboard__title {
  margin: 0 0 4px 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.eds-dashboard__subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.eds-dashboard__body {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}

/* Onda Dashboard CFO sub-onda 1 — Ribbon de período global.
   Substitui o seletor local mes|tri|ano. Mostra o gperiod vigente
   como contexto; controle de período fica no header global da app. */
.eds-dashboard__periodo-ribbon {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--eds-radius);
  background: var(--eds-info-soft);
  color: var(--eds-info);
  font-size: var(--fs-sm);
  border: 1px solid var(--eds-info-soft);
}
.eds-dashboard__periodo-label {
  font-weight: 500;
  color: var(--text-muted, var(--eds-muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
}
.eds-dashboard__periodo-ribbon strong {
  font-weight: 700;
  color: var(--eds-info);
}

/* Sub-onda Dashboard CFO refinamento (2026-05-18) — agrupamento semântico
   dos blocos em sections (Estado · Tempo · Recorrência · Auditoria) e
   eds-period-control local independente do filtro global. */
.eds-dashboard__section {
  margin-top: var(--sp-6);
}
.eds-dashboard__section:first-of-type {
  margin-top: var(--sp-5);
}
.eds-dashboard__section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.eds-dashboard__section-title {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.eds-dashboard__section-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
}
.eds-dashboard__section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--sp-4);
  /* DASH.PREMIUM: linhas de altura igual (cards lado a lado fecham no mesmo
     rodapé — look limpo de dashboard) + packing denso. Os vãos grandes que o
     Fred via NÃO vinham daqui: vinham de meio-bloco + bloco full deixando uma
     célula vazia — resolvido tornando discrepâncias/triagem/eficiência/DRE
     full-width. */
  align-items: stretch;
  grid-auto-flow: row dense;
}
/* DASH.PREMIUM: bloco full-width que carrega lista de alertas (discrepâncias)
   espalha os itens em colunas — fica largo e baixo em vez de uma coluna de
   500px com a metade direita vazia. */
.eds-bloco--full .eds-discrep-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 8px;
  margin: 0;
}

/* ========================= Period control local (CFO) =========================
   Substitui (no CFO) a ribbon read-only por um seletor real de período,
   independente do gperiod global. Persiste em localStorage `eixo-cfo-periodo`.
   Suporta escopos com cursor ← anterior · atual · próximo →. */
.eds-period-control {
  display: inline-flex;
  align-items: stretch;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.eds-period-scope {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  overflow: hidden;
  background: var(--panel);
}
.eds-period-scope__btn {
  padding: var(--sp-2) var(--sp-3);
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 600;
  border-right: 1px solid var(--border);
  white-space: nowrap;
  line-height: 1.2;
}
.eds-period-scope__btn:last-child { border-right: none; }
.eds-period-scope__btn:hover { background: var(--baseline-soft); }
.eds-period-scope__btn:focus-visible {
  outline: 2px solid var(--eds-info);
  outline-offset: -2px;
  z-index: 1;
}
.eds-period-scope__btn--active {
  background: var(--accent);
  color: var(--panel);
}
.eds-period-cursor {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  background: var(--panel);
  padding: 0 var(--sp-1);
}
.eds-period-cursor__btn {
  padding: var(--sp-1) var(--sp-2);
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: var(--fs-base);
  font-family: inherit;
  line-height: 1;
  border-radius: var(--eds-radius);
}
.eds-period-cursor__btn:hover:not(:disabled) { background: var(--baseline-soft); }
.eds-period-cursor__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.eds-period-cursor__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  padding: 0 var(--sp-2);
  min-width: 9ch;
  text-align: center;
}
.eds-period-sync {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  background: var(--panel);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-family: inherit;
}
.eds-period-sync:hover { background: var(--baseline-soft); color: var(--text); }
.eds-period-sync--active {
  background: var(--eds-info-soft);
  color: var(--eds-info);
  border-color: var(--eds-info);
}

/* Period selector (Mês/Tri/Ano) — DEPRECATED (sub-onda 1 CFO).
   Mantido apenas como fallback se algum dashboard ainda renderizar. */
.eds-period-selector {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}
.eds-period-btn {
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  border-right: 1px solid var(--border);
}
.eds-period-btn:last-child { border-right: none; }
.eds-period-btn:hover { background: var(--baseline-soft); }
.eds-period-btn--active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
:root[data-theme="dark"] .eds-period-btn--active,
@media (prefers-color-scheme: dark) {
  .eds-period-btn--active { color: var(--bg); }
}

/* Bloco secundário (stub) */
.eds-bloco {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.eds-bloco__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.eds-bloco__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.eds-bloco__title--sub {
  font-size: var(--fs-base);
  font-weight: 600;
}
.eds-bloco__badge {
  font-size: 11px;
  background: var(--baseline-soft);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 999px;
}
.eds-bloco__desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.eds-bloco--stub {
  border-style: dashed;
  background: linear-gradient(to bottom right, var(--panel), var(--baseline-soft));
}
/* Onda 218 — bloco "Em construção" colapsado (substitui a parede de stubs no COO/CEO) */
.eds-bloco--construcao {
  border-style: dashed;
  padding: var(--sp-3) var(--sp-4);
  grid-column: 1 / -1;
}
.eds-construcao__summary {
  cursor: pointer;
  font-size: var(--fs-md, 13px);
  font-weight: 600;
  color: var(--text-muted);
  list-style-position: inside;
}
.eds-construcao__summary:hover { color: var(--text); }
.eds-construcao__hint {
  font-weight: 400;
  font-size: var(--fs-xs);
  margin-left: var(--sp-2);
}
.eds-construcao__lista {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eds-construcao__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-md, 13px);
}
.eds-construcao__titulo { font-weight: 600; }
.eds-construcao__desc {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.eds-bloco__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  font-variant-numeric: tabular-nums;
}

/* ========================= Par temporal (Sub-onda 2 CFO) =========================
   Margem-no-tempo + Lucro/hora-no-tempo lado a lado em desktop, empilhados em mobile.
   Bloco "guarda-chuva" sem padding (cada coluna tem seu próprio). */
.eds-bloco--par-temporal {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  grid-column: 1 / -1; /* atravessa o grid do body inteiro */
}
.eds-par-temporal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 800px) {
  .eds-par-temporal { grid-template-columns: 1fr; }
}
.eds-par-temporal__col {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--sp-4);
  box-shadow: var(--shadow);
}
.eds-par-temporal__col .eds-bloco__header {
  margin-bottom: var(--sp-2);
}
.eds-par-temporal__graf {
  width: 100%;
  min-height: 240px;
}

/* ========================= DRE simplificada (Sub-onda 2 CFO) ========================= */
.eds-dre__totais {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--eds-radius);
  background: var(--accent-soft, var(--eds-info-soft));
  margin-bottom: var(--sp-4);
}
.eds-dre__tot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
}
.eds-dre__tot-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, var(--eds-muted));
  font-weight: 600;
}
.eds-dre__tot-val {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.eds-dre__tot--receita .eds-dre__tot-val { color: var(--positive); }
.eds-dre__tot--opex .eds-dre__tot-val { color: var(--eixo-por-do-sol); }
.eds-dre__tot--resultado .eds-dre__tot-val { color: var(--eixo-azul); }
.eds-dre__tot-margem {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  margin-top: 2px;
}
.eds-dre__op {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-muted, var(--eds-muted));
  padding: 0 var(--sp-1);
}

.eds-dre__grupos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.eds-dre__grupo {
  border: 1px solid var(--border);
  border-radius: var(--eds-radius-sm);
  overflow: hidden;
}
.eds-dre__grupo-cabecalho {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  background: var(--panel);
  font-weight: 600;
  list-style: none;
}
.eds-dre__grupo[open] .eds-dre__grupo-cabecalho {
  background: var(--baseline-soft);
  border-bottom: 1px solid var(--border);
}
.eds-dre__grupo-cabecalho::-webkit-details-marker { display: none; }
.eds-dre__grupo-cabecalho::before {
  content: '▸';
  position: absolute;
  margin-left: -16px;
  color: var(--text-muted, var(--eds-muted));
  transition: transform .15s;
}
.eds-dre__grupo[open] .eds-dre__grupo-cabecalho::before {
  transform: rotate(90deg);
}
.eds-dre__filhas {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--panel);
}
.eds-dre__linha-filha {
  display: grid;
  grid-template-columns: 56px 1fr 36px auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-5);
  font-size: var(--fs-md);
  border-top: 1px solid var(--border);
  color: var(--text);
}
.eds-dre__codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
}
.eds-dre__nome {
  color: var(--text);
}
.eds-dre__n {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  text-align: right;
}
.eds-dre__valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}
.eds-dre__valor--receita { color: var(--positive); }
.eds-dre__valor--despesa { color: var(--text); }
.eds-dre__loading {
  padding: var(--sp-4);
  color: var(--text-muted, var(--eds-muted));
  font-size: var(--fs-sm);
  text-align: center;
}

/* ========================= Chip de granularidade (Sub-onda 2 CFO) ========================= */
.eds-dashboard__gran-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-2);
}
.eds-gran-chips {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  overflow: hidden;
  background: var(--panel);
}
.eds-gran-chip {
  padding: var(--sp-1) var(--sp-3);
  border: none;
  background: transparent;
  color: var(--text-muted, var(--eds-muted));
  cursor: pointer;
  font-size: var(--fs-xs);
  font-family: inherit;
  border-right: 1px solid var(--border);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.eds-gran-chip:last-child { border-right: none; }
.eds-gran-chip:hover { background: var(--baseline-soft); }
.eds-gran-chip:focus-visible {
  outline: 2px solid var(--eds-info);
  outline-offset: 2px;
  z-index: 1;
}
.eds-gran-chip--active {
  background: var(--accent);
  color: var(--panel);
}

/* ========================= Caixinhas (Sub-onda 3 CFO) ========================= */
.eds-caixinhas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}
.eds-caixinha {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eds-caixinha__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
}
.eds-caixinha__nome {
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
  line-height: 1.3;
}
.eds-caixinha__aviso {
  font-size: var(--fs-2xs);
  color: var(--eds-warn);
  background: var(--eds-warn-soft);
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.eds-caixinha__saldo {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.eds-caixinha__saldo--positivo { color: var(--positive); }
.eds-caixinha__saldo--negativo { color: var(--negative); }
.eds-caixinha__saldo--zero { color: var(--text-muted, var(--eds-muted)); }
.eds-caixinha__movs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  font-variant-numeric: tabular-nums;
}

/* ========================= CapEx (Sub-onda 3 CFO) ========================= */
.eds-capex__vazio {
  padding: var(--sp-4);
  text-align: center;
  color: var(--text-muted, var(--eds-muted));
}
.eds-capex__vazio p { margin: var(--sp-1) 0; }
.eds-capex__hint { font-size: var(--fs-xs); font-style: italic; }
.eds-capex__totais {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-soft);
  border-radius: var(--eds-radius-sm);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.eds-capex__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eds-capex__projeto {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius-sm);
}
.eds-capex__projeto-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-1);
}
.eds-capex__projeto-nome { font-weight: 600; color: var(--text); }
.eds-capex__status {
  font-size: var(--fs-2xs);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.eds-capex__status--planejado  { background: var(--eds-info-soft);  color: var(--eds-info); }
.eds-capex__status--em_compra  { background: var(--eds-warn-soft);  color: var(--eds-warn); }
.eds-capex__status--executado  { background: var(--eds-ok-soft);    color: var(--eds-ok); }
.eds-capex__status--cancelado  { background: var(--eds-muted-soft); color: var(--eds-muted); }
.eds-capex__valores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted, var(--eds-muted));
  font-variant-numeric: tabular-nums;
}

/* Reset preventivo: `[hidden]` precisa derrotar qualquer display: grid/flex que
   alguém venha a aplicar nos containers. Gotcha #2 da memória padroes_frontend. */
#equip-view-inventario[hidden],
#equip-view-depreciacao[hidden] { display: none !important; }

/* ========================= Patrimônio operacional (v50 / Onda N.23) ========================= */
.eds-patrim__hero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  background: var(--accent-soft);
  border-radius: var(--eds-radius-sm);
  margin-bottom: var(--sp-3);
}
.eds-patrim__hero-label {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.eds-patrim__hero-valor {
  font-size: var(--fs-2xl, 1.6rem);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.eds-patrim__hero-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  font-variant-numeric: tabular-nums;
}
.eds-patrim__barras {
  list-style: none;
  margin: 0 0 var(--sp-3) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eds-patrim__barra {
  display: grid;
  grid-template-columns: 180px 1fr 130px;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-sm);
}
.eds-patrim__barra-label {
  color: var(--text-muted, var(--eds-muted));
}
.eds-patrim__barra-track {
  height: 10px;
  background: var(--eds-bg-elev1, rgba(0,0,0,0.06));
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.eds-patrim__barra-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 240ms ease-out;
}
.eds-patrim__barra--orig .eds-patrim__barra-fill {
  background: var(--eds-azul-eixo, #0F2742);
}
.eds-patrim__barra--contabil .eds-patrim__barra-fill {
  background: var(--eds-amanhecer, #FFC846);
}
.eds-patrim__barra--mercado .eds-patrim__barra-fill {
  background: var(--eds-por-do-sol, #FF6A2A);
}
.eds-patrim__barra-valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.eds-patrim__barra-valor small {
  font-weight: 400;
  color: var(--text-muted, var(--eds-muted));
  margin-left: 4px;
}
.eds-patrim__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border);
  font-size: var(--fs-sm);
}
.eds-patrim__footer-item {
  color: var(--text-muted, var(--eds-muted));
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .eds-patrim__barra {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .eds-patrim__barra-valor { text-align: left; }
}

/* ========================= Top clientes (Sub-onda 3 CFO) ========================= */
.eds-top-clientes__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eds-top-cliente {
  display: grid;
  grid-template-columns: 24px minmax(120px, 1.5fr) 80px 100px 56px;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius-sm);
}
@media (max-width: 600px) {
  .eds-top-cliente {
    grid-template-columns: 20px 1fr auto;
    grid-template-areas:
      "pos nome share"
      ".   bar  bar"
      ".   val  val";
    row-gap: var(--sp-1);
  }
  .eds-top-cliente__pos      { grid-area: pos; }
  .eds-top-cliente__nome     { grid-area: nome; }
  .eds-top-cliente__bar-wrap { grid-area: bar; }
  .eds-top-cliente__valor    { grid-area: val; text-align: left; }
  .eds-top-cliente__share    { grid-area: share; }
}
.eds-top-cliente__pos {
  font-weight: 700;
  color: var(--text-muted, var(--eds-muted));
  text-align: center;
  font-size: var(--fs-md);
}
.eds-top-cliente__nome {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eds-top-cliente__bar-wrap {
  height: 6px;
  background: var(--baseline-soft);
  border-radius: 999px;
  overflow: hidden;
}
.eds-top-cliente__bar {
  height: 100%;
  background: var(--eds-info);
  border-radius: 999px;
}
.eds-top-cliente__valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-sm);
}
.eds-top-cliente__share {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, var(--eds-muted));
  font-size: var(--fs-sm);
}

/* ========================= Atividades mais lucrativas (Sub-onda 3 CFO) ========================= */
.eds-eixo-tabs {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  overflow: hidden;
  background: var(--panel);
}
.eds-eixo-tab {
  padding: var(--sp-1) var(--sp-3);
  border: none;
  background: transparent;
  color: var(--text-muted, var(--eds-muted));
  cursor: pointer;
  font-size: var(--fs-xs);
  font-family: inherit;
  border-right: 1px solid var(--border);
  font-weight: 600;
}
.eds-eixo-tab:last-child { border-right: none; }
.eds-eixo-tab:hover { background: var(--baseline-soft); }
.eds-eixo-tab--active {
  background: var(--accent);
  color: var(--panel);
}
.eds-atividades__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eds-atividade {
  display: grid;
  grid-template-columns: 24px 2fr 1fr 110px;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius-sm);
}
.eds-atividade__pos {
  font-weight: 700;
  color: var(--text-muted, var(--eds-muted));
  text-align: center;
  font-size: var(--fs-md);
}
.eds-atividade__nome-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eds-atividade__nome {
  font-weight: 600;
  color: var(--text);
}
.eds-atividade__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
}
.eds-atividade__bar-wrap {
  height: 8px;
  background: var(--baseline-soft);
  border-radius: 999px;
  overflow: hidden;
}
.eds-atividade__bar { height: 100%; border-radius: 999px; }
.eds-atividade__bar--pos { background: var(--positive); }
.eds-atividade__bar--neg { background: var(--eixo-por-do-sol); }
.eds-atividade__valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-sm);
}
.eds-atividade__valor--pos { color: var(--positive); }
.eds-atividade__valor--neg { color: var(--eixo-por-do-sol); }
.eds-atividades__vazio {
  padding: var(--sp-4);
  text-align: center;
  color: var(--text-muted, var(--eds-muted));
  font-size: var(--fs-sm);
}

/* ========================= Discrepâncias estatísticas (Sub-onda 4 CFO) ========================= */
.eds-discrepancias {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eds-discrep-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eds-discrep-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--eds-info);
  border-radius: var(--eds-radius);
}
.eds-discrep-item--crit { border-left-color: var(--eds-crit); }
.eds-discrep-item--warn { border-left-color: var(--eds-warn); }
.eds-discrep-item--info { border-left-color: var(--eds-info); }
.eds-discrep-item__icon {
  font-size: var(--fs-lg);
  line-height: 1;
}
.eds-discrep-item__corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.eds-discrep-item__titulo {
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-sm);
}
.eds-discrep-item__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  font-variant-numeric: tabular-nums;
}
.eds-discrep-item__z {
  display: inline-block;
  padding: 0 6px;
  margin-left: var(--sp-2);
  background: var(--eds-info-soft);
  color: var(--eds-info);
  border-radius: 999px;
  font-weight: 600;
}
.eds-discrep-item__actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.eds-discrep-banner {
  padding: var(--sp-3) var(--sp-4);
  background: var(--baseline-soft);
  border: 1px dashed var(--border);
  border-radius: var(--eds-radius);
  color: var(--text-muted, var(--eds-muted));
  font-size: var(--fs-sm);
}
.eds-discrep-banner--ok {
  border-style: solid;
  border-color: var(--eds-info-soft);
}
.eds-discrep-extras {
  margin-top: var(--sp-2);
}
.eds-discrep-extras > summary {
  cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--eds-info);
  font-weight: 600;
  user-select: none;
}
.eds-discrep-extras > summary:focus-visible {
  outline: 2px solid var(--eds-info);
  outline-offset: 2px;
  border-radius: var(--eds-radius);
}
.eds-discrep-extras[open] > .eds-discrep-lista {
  margin-top: var(--sp-2);
}
/* Suporte aos modais família B de discrepâncias */
.eds-disc-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
}
.eds-disc-meta dt {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: center;
}
.eds-disc-meta dd {
  margin: 0;
  font-size: var(--fs-sm);
}
.eds-disc-radios {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}
.eds-disc-radio {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.eds-disc-livre {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
}
.eds-disc-livre textarea {
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  resize: vertical;
  min-height: 60px;
}
.eds-disc-livre textarea:focus-visible {
  outline: 2px solid var(--eds-info);
  outline-offset: 2px;
}

/* ========================= Forecast prospectivo (Sub-onda 5 CFO) ========================= */
.eds-bloco--full {
  grid-column: 1 / -1;
}
.eds-forecast__toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  overflow: hidden;
  background: var(--panel);
}
.eds-forecast__pill {
  padding: var(--sp-1) var(--sp-3);
  border: none;
  background: transparent;
  color: var(--text-muted, var(--eds-muted));
  cursor: pointer;
  font-size: var(--fs-xs);
  font-family: inherit;
  font-weight: 600;
  border-right: 1px solid var(--border);
}
.eds-forecast__pill:last-child { border-right: none; }
.eds-forecast__pill:focus-visible {
  outline: 2px solid var(--eds-info);
  outline-offset: 2px;
  z-index: 1;
}
.eds-forecast__pill--active {
  background: var(--accent);
  color: var(--panel);
}
.eds-forecast__grid {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 280px);
  gap: var(--sp-4);
}
@media (max-width: 880px) {
  .eds-forecast__grid { grid-template-columns: 1fr; }
}
.eds-forecast__chart {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  padding: var(--sp-3);
  min-height: 320px;
}
.eds-forecast__side {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  padding: var(--sp-3);
}
.eds-forecast__side-titulo {
  margin: 0 0 var(--sp-2) 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}
.eds-forecast__impostos-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eds-forecast__imposto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  background: var(--baseline-soft);
}
.eds-forecast__imposto--lancado {
  opacity: 0.6;
}
.eds-forecast__imposto-head {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.eds-forecast__imposto-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
}
.eds-forecast__imposto button {
  align-self: flex-start;
  margin-top: var(--sp-1);
}
.eds-forecast__side-vazio {
  font-size: var(--fs-sm);
  color: var(--text-muted, var(--eds-muted));
  margin: 0;
}

/* ========================= Fechamento de período (Sub-onda 6 CFO) ========================= */
.eds-fechamento__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.eds-fech-status-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--baseline-soft);
  border-radius: var(--eds-radius);
}
.eds-fech-status__label {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.eds-fech-status {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.eds-fech-status--aberto {
  background: rgba(255, 200, 70, 0.18);
  color: #b27500;
}
.eds-fech-status--fechado {
  background: rgba(45, 154, 107, 0.15);
  color: var(--positive);
}
.eds-fech-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eds-fech-item {
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
  align-items: start;
}
.eds-fech-item__head {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.eds-fech-item__versao {
  background: var(--accent);
  color: var(--panel);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.eds-fech-item__slug {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.eds-fech-badge {
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.eds-fech-badge--ok {
  background: rgba(45, 154, 107, 0.15);
  color: var(--positive);
}
.eds-fech-badge--divergente {
  background: rgba(255, 106, 42, 0.15);
  color: var(--eixo-por-do-sol);
}
.eds-fech-item__meta {
  grid-column: 1;
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.eds-fech-item__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.eds-fech-vazio {
  font-size: var(--fs-sm);
  color: var(--text-muted, var(--eds-muted));
  padding: var(--sp-3);
  background: var(--baseline-soft);
  border: 1px dashed var(--border);
  border-radius: var(--eds-radius);
}
.eds-fechamento__actions {
  display: flex;
  gap: var(--sp-2);
}
.eds-fech-diff-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  margin-right: auto;
}
.eds-fech-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}
.eds-fech-diff-table th,
.eds-fech-diff-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.eds-fech-diff-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ========================= Tracker PE — KRs financeiros (CFO complemento) ========================= */
.eds-pe-krs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.eds-pe-kr {
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--baseline);
  border-radius: var(--eds-radius);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eds-pe-kr--ok      { border-left-color: var(--positive); }
.eds-pe-kr--warn    { border-left-color: var(--eds-warn); }
.eds-pe-kr--crit    { border-left-color: var(--eds-crit); }
.eds-pe-kr--neutral { border-left-color: var(--baseline); }
.eds-pe-kr__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}
.eds-pe-kr__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eds-pe-kr__semaforo {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--baseline);
}
.eds-pe-kr--ok      .eds-pe-kr__semaforo { background: var(--positive); }
.eds-pe-kr--warn    .eds-pe-kr__semaforo { background: var(--eds-warn); }
.eds-pe-kr--crit    .eds-pe-kr__semaforo { background: var(--eds-crit); }
.eds-pe-kr__valores {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  font-variant-numeric: tabular-nums;
}
.eds-pe-kr__atual {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
}
.eds-pe-kr__sep {
  color: var(--text-muted, var(--eds-muted));
  font-weight: 400;
}
.eds-pe-kr__alvo {
  background: var(--baseline-soft);
  border: 1px dashed var(--border);
  color: var(--text-muted, var(--eds-muted));
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.eds-pe-kr__alvo:hover {
  color: var(--eds-info);
  border-color: var(--eds-info);
  border-style: solid;
}
.eds-pe-kr__alvo:focus-visible {
  outline: 2px solid var(--eds-info);
  outline-offset: 2px;
}
.eds-pe-kr__formula {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
}

/* ========================= Contratos recorrentes (CFO complemento) ========================= */
.eds-contratos__header {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr 0.7fr 0.5fr;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.eds-contratos__col--num { text-align: right; }
.eds-contratos__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.eds-contrato {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr 0.7fr 0.5fr;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  align-items: center;
}
.eds-contrato__nome {
  font-weight: 600;
  color: var(--text);
}
.eds-contrato__bar-wrap {
  height: 6px;
  background: var(--baseline-soft);
  border-radius: 999px;
  overflow: hidden;
}
.eds-contrato__bar {
  height: 100%;
  background: var(--eds-info);
  border-radius: 999px;
}
.eds-contrato__receita,
.eds-contrato__despesa,
.eds-contrato__margem {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
}
.eds-contrato__receita { color: var(--positive); font-weight: 600; }
.eds-contrato__despesa { color: var(--text-muted, var(--eds-muted)); }
.eds-contrato__margem.pos { color: var(--positive); }
.eds-contrato__margem.neg { color: var(--eixo-por-do-sol); }

/* ============================================================
   Sidebar — separador de Centros (escopo restrito à sidebar atual)
   Inserido pela N.2; refator pleno da sidebar vem em N.3.
   ============================================================ */
.sidebar-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #8A9299);
  padding: 12px 16px 4px;
  font-weight: 600;
}
.sidebar-section-divider {
  height: 1px;
  background: var(--border, #E6E8EB);
  margin: 8px 12px;
}

/* Slot do LenteToggle na topbar */
.topbar-lente-slot {
  margin-left: 16px;
  display: inline-flex;
  align-items: center;
}

/* N.2: nos dashboards C-level, ocultar filtros analíticos Banlek-only (Esporte/Organizador/Período).
   O period selector próprio do dashboard cobre essa função. */
body.eixo-dashboard-active .global-filters {
  display: none !important;
}

/* ============================================================
   Onda N.4 — Mecanismo de lançamento operacional
   Identidade visual Eixo (Manual da Marca v1.0):
     - Azul Eixo  #0F2742 (primária)
     - Amanhecer  #FFC846 (warn / CTA destaque)
     - Pôr do Sol #FF6A2A (crit)
     - Chumbo     #1C1E22 (texto)
     - Cinza      #8A9299 (muted)
   Tokens eds-* já definidos na N.1 — reusamos aqui via var().
   Escopo: aba 📒 Financeiro (#tabpanel-financeiro). Não vaza pra chrome.
   ============================================================ */

/* Sub-aba Lançamentos / Recorrências */
#tabpanel-financeiro #fin-subaba .seg {
  font-size: 13px;
  font-weight: 500;
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
}
#tabpanel-financeiro #fin-subaba .seg.active {
  background: var(--eds-accent-strong, #0F2742);
  color: white;
  border-color: var(--eds-accent, #0F2742);
}

/* Painel de atalhos — fundo soft com identidade Eixo */
#tabpanel-financeiro #fin-atalhos-bloco {
  border-left: 3px solid var(--eds-warn, #FFC846);
}
#tabpanel-financeiro #fin-atalhos-bloco strong {
  color: var(--eds-accent, #0F2742);
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
}
#tabpanel-financeiro #fin-atalhos-lista button[data-fin-atalho] {
  border-color: var(--border, #E6E8EB);
  background: var(--bg-card, white);
  color: var(--eds-text, #1C1E22);
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
  transition: all 0.15s;
}
#tabpanel-financeiro #fin-atalhos-lista button[data-fin-atalho]:hover {
  /* N.UI-3: chips de atalho usam Amanhecer no hover (calor/affordance suave),
     diferenciando-os dos botões de ação (Azul Eixo). */
  border-color: var(--eds-warn, #FFC846);
  background: rgba(255, 200, 70, 0.10);
}

/* Coluna conta na tabela — escondida em telas estreitas */
@media (max-width: 1100px) {
  #tabpanel-financeiro .fin-col-conta {
    display: none;
  }
}

/* Modal de marcar pago — header em Azul Eixo */
#fin-modal-pagar h3 {
  color: var(--eds-accent, #0F2742);
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
}

/* Modal de recorrência — header em Azul Eixo */
#fin-modal-rec h3 {
  color: var(--eds-accent, #0F2742);
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
}

/* Botão "Regenerar projeção" — destaque Amanhecer */
#fin-rec-regenerar {
  background: var(--eds-warn, #FFC846);
  border-color: var(--eds-warn, #FFC846);
  color: var(--eds-text, #1C1E22);
  font-weight: 500;
}
#fin-rec-regenerar:hover {
  background: #E6B340;
}

/* Botão desativar — destaque Pôr do Sol (ação crítica suave) */
#fin-rec-desativar {
  border-color: var(--eds-crit, #FF6A2A);
  color: var(--eds-crit, #FF6A2A);
}
#fin-rec-desativar:hover {
  background: rgba(255, 106, 42, 0.08);
}

/* Bloco de anexos — borda discreta */
#fin-form-anexos-bloco {
  background: var(--bg-soft, #F7F8FA);
}
#fin-form-anexos-bloco legend {
  color: var(--eds-accent, #0F2742);
}

/* Tabela de recorrências — mesmas tipografias */
#fin-rec-tabela {
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
}

/* Botão "✓ Pagar" — verde sóbrio (paleta Eixo não cobre, mantém eds-ok) */
button[data-fin-pagar] {
  border-color: var(--eds-ok, #2D9A6B);
  color: var(--eds-ok, #2D9A6B);
}
button[data-fin-pagar]:hover {
  background: rgba(45, 154, 107, 0.08);
}

/* ============================================================
   Onda N.5 — Redesign Financeiro inspirado no MEEventos
   Header reformado: lista contas + 4 cards + barras + saldo total
   Tabs Receitas/Despesas + seletor de mês com setas
   Configurador de parcelas + badge inline + modal de série
   ============================================================ */

/* Header — 3 colunas */
#tabpanel-financeiro #fin-header {
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
}

/* Cards grandes (lista contas + barras) — dark-aware via vars do tema */
#tabpanel-financeiro .fin-card-grande {
  background: var(--bg-card, var(--bg-soft, #f7f8fa));
  color: var(--text, #1C1E22);
  border: 1px solid var(--border, #e6e8eb);
  border-radius: 6px;
  padding: 14px;
  min-width: 0;          /* N.6: permite ellipsis dentro dele */
  overflow: hidden;       /* N.6: contém o text-overflow dos itens */
}
#tabpanel-financeiro .fin-card-titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text, #0F2742);
  margin-bottom: 10px;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Lista de contas */
#tabpanel-financeiro #fin-contas-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#tabpanel-financeiro .fin-conta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 13px;
  color: var(--text, #1C1E22);  /* N.6: texto explícito p/ dark */
  cursor: pointer;
  min-width: 0;
}
#tabpanel-financeiro .fin-conta-item:hover {
  background: var(--bg-hover, rgba(15, 39, 66, 0.05));
}
#tabpanel-financeiro .fin-conta-item-nome {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tabpanel-financeiro .fin-conta-item-saldo {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text, #1C1E22);
}
#tabpanel-financeiro .fin-contas-total {
  color: var(--text, #1C1E22);
}

/* 4 cards (atrasos / receitas-mês / despesas-mês) */
#tabpanel-financeiro .fin-card {
  background: var(--bg-card, white);
  color: var(--text, #1C1E22);
  border: 1px solid var(--border, #e6e8eb);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 92px;
  min-width: 0;
}
#tabpanel-financeiro .fin-card-success {
  background: linear-gradient(135deg, rgba(45, 154, 107, 0.08), rgba(45, 154, 107, 0.02));
  border-color: rgba(45, 154, 107, 0.3);
}
#tabpanel-financeiro .fin-card-danger {
  background: linear-gradient(135deg, rgba(255, 106, 42, 0.06), rgba(255, 106, 42, 0.02));
  border-color: rgba(255, 106, 42, 0.3);
}
#tabpanel-financeiro .fin-card-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted, #8A9299);
  text-transform: uppercase;
}
#tabpanel-financeiro .fin-card-valor {
  font-size: 20px;
  font-weight: 700;
  color: var(--eds-text, #1C1E22);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
#tabpanel-financeiro .fin-card-meta {
  font-size: 11px;
  color: var(--text-muted, #8A9299);
}
#tabpanel-financeiro .fin-card-success .fin-card-valor { color: var(--eds-ok, #2D9A6B); }
#tabpanel-financeiro .fin-card-danger .fin-card-valor { color: var(--eds-crit, #FF6A2A); }

/* N.6 — Override dark mode para os cards do header da Onda N.5.
   No light, --bg-card costuma ser white/soft; no dark precisamos de navy +5%. */
:root[data-theme="dark"] #tabpanel-financeiro .fin-card-grande,
:root[data-theme="dark"] #tabpanel-financeiro .fin-card {
  background: #122A48;       /* Azul Eixo +5% (legível com texto branco) */
  color: #E6E8EB;
  border-color: rgba(230, 232, 235, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-card-grande,
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-card {
    background: #122A48;
    color: #E6E8EB;
    border-color: rgba(230, 232, 235, 0.14);
  }
}
:root[data-theme="dark"] #tabpanel-financeiro .fin-card-titulo,
:root[data-theme="dark"] #tabpanel-financeiro .fin-conta-item,
:root[data-theme="dark"] #tabpanel-financeiro .fin-conta-item-saldo,
:root[data-theme="dark"] #tabpanel-financeiro .fin-contas-total,
:root[data-theme="dark"] #tabpanel-financeiro .fin-card-valor {
  color: #E6E8EB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-card-titulo,
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-conta-item,
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-conta-item-saldo,
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-contas-total,
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-card-valor {
    color: #E6E8EB;
  }
}
:root[data-theme="dark"] #tabpanel-financeiro .fin-conta-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-conta-item:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}
/* Cards success/danger no dark: tonalidade um pouco diferente do bg base */
:root[data-theme="dark"] #tabpanel-financeiro .fin-card-success {
  background: linear-gradient(135deg, rgba(45, 154, 107, 0.18), rgba(18, 42, 72, 1));
  border-color: rgba(45, 154, 107, 0.4);
}
:root[data-theme="dark"] #tabpanel-financeiro .fin-card-danger {
  background: linear-gradient(135deg, rgba(255, 106, 42, 0.16), rgba(18, 42, 72, 1));
  border-color: rgba(255, 106, 42, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-card-success {
    background: linear-gradient(135deg, rgba(45, 154, 107, 0.18), rgba(18, 42, 72, 1));
    border-color: rgba(45, 154, 107, 0.4);
  }
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-card-danger {
    background: linear-gradient(135deg, rgba(255, 106, 42, 0.16), rgba(18, 42, 72, 1));
    border-color: rgba(255, 106, 42, 0.4);
  }
}

/* N.6 Bug 2.5: scroll-margin do seletor de mês cobre topbar sticky 56px */
#tabpanel-financeiro #fin-seletor-mes {
  scroll-margin-top: 64px;
}

/* N.6 Bug 2.3: contém overflow horizontal do header (3 colunas com minmax 0) */
#tabpanel-financeiro #fin-header {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) !important;
  max-width: 100%;
  overflow: hidden;
}
#tabpanel-financeiro #fin-header > * {
  min-width: 0;
}
/* Mobile / telas estreitas: empilha header em 1 coluna */
@media (max-width: 1180px) {
  #tabpanel-financeiro #fin-header {
    grid-template-columns: 1fr !important;
  }
}

/* Barras horizontais Receitas vs Despesas */
#tabpanel-financeiro .fin-bar-track {
  width: 100%;
  height: 12px;
  background: var(--bg-soft, #f7f8fa);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border, #e6e8eb);
}
#tabpanel-financeiro .fin-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease-out;
}
#tabpanel-financeiro .fin-bar-rec {
  background: linear-gradient(90deg, var(--eds-ok, #2D9A6B), #38b27c);
}
#tabpanel-financeiro .fin-bar-desp {
  background: linear-gradient(90deg, var(--eds-crit, #FF6A2A), #ff8650);
}

/* Saldo realizado do mês */
#tabpanel-financeiro #fin-saldo-mes {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 22px;
}
#tabpanel-financeiro #fin-saldo-mes.positivo,
#tabpanel-financeiro #fin-prev-resultado.positivo { color: var(--eds-ok, #2D9A6B); }
#tabpanel-financeiro #fin-saldo-mes.negativo,
#tabpanel-financeiro #fin-prev-resultado.negativo { color: var(--eds-crit, #FF6A2A); }
#tabpanel-financeiro #fin-prev-resultado {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Seletor de mês */
#tabpanel-financeiro #fin-seletor-mes {
  background: var(--bg-soft, #f7f8fa);
  border-radius: 6px;
}
#tabpanel-financeiro #fin-mes-label {
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--eds-accent, #0F2742);
}
#tabpanel-financeiro #fin-mes-prev,
#tabpanel-financeiro #fin-mes-next {
  font-size: 18px;
  font-weight: bold;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tabs Receitas/Despesas */
#tabpanel-financeiro .fin-tipo-tab {
  background: transparent;
  border: none;
  padding: 12px 24px;
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted, #8A9299);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
}
#tabpanel-financeiro .fin-tipo-tab:hover {
  color: var(--eds-text, #1C1E22);
  background: rgba(15, 39, 66, 0.02);
}
#tabpanel-financeiro .fin-tipo-tab.active {
  color: var(--eds-accent, #0F2742);
  border-bottom-color: var(--eds-accent, #0F2742);
  font-weight: 600;
}
#tabpanel-financeiro .fin-tipo-tab[data-tipo="receita"].active {
  color: var(--eds-ok, #2D9A6B);
  border-bottom-color: var(--eds-ok, #2D9A6B);
}
#tabpanel-financeiro .fin-tipo-tab[data-tipo="despesa"].active {
  color: var(--eds-crit, #FF6A2A);
  border-bottom-color: var(--eds-crit, #FF6A2A);
}
#tabpanel-financeiro .fin-tipo-tab-icon {
  margin-right: 6px;
  font-weight: bold;
}

/* Configurador de parcelas no modal */
#fin-form-parcelas-bloco {
  background: var(--bg-soft, #f7f8fa);
}
#fin-form-parcelas-bloco fieldset {
  border-color: var(--border, #ddd);
}
#fin-parc-tabela-wrap input {
  border: 1px solid var(--border, #ddd);
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 12px;
  width: 100%;
}
#fin-parc-tabela-wrap input.fin-parc-valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Badge inline N/total */
.fin-badge-parcela {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--eds-accent-strong, #0F2742);
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
}
.fin-badge-parcela:hover {
  background: #1a3a5c;
  transform: translateY(-1px);
}
.fin-badge-recorrencia {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--eds-warn, #FFC846);
  color: var(--eds-text, #1C1E22);
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  user-select: none;
}

/* Cards no modal de exclusão de parcela: hover destacado */
#fin-exparc-form label {
  transition: all 0.12s;
}
#fin-exparc-form label:has(input:checked) {
  border-color: var(--eds-accent, #0F2742) !important;
  background: rgba(15, 39, 66, 0.04);
}
#fin-exparc-form label:hover {
  border-color: var(--eds-accent, #0F2742);
}

/* Modal de parcelas — linha hover */
#fin-parcelas-tbody tr {
  cursor: pointer;
}
#fin-parcelas-tbody tr:hover {
  background: rgba(15, 39, 66, 0.04);
}

/* ============================================================
   Onda N.6 estendida — Status pills + redundância de sinal (daltonismo)
   ============================================================ */

/* Status pills com fundos distintos */
#tabpanel-financeiro .fin-status-pill {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 12px;
  white-space: nowrap;
  border: 1px solid transparent;
}
#tabpanel-financeiro .fin-status-pago {
  background: rgba(45, 154, 107, 0.18);
  color: #1A6B47;
  border-color: rgba(45, 154, 107, 0.4);
}
#tabpanel-financeiro .fin-status-pendente {
  background: rgba(255, 200, 70, 0.22);
  color: #8B6F1A;
  border-color: rgba(255, 200, 70, 0.5);
}
#tabpanel-financeiro .fin-status-arquivado {
  background: rgba(138, 146, 153, 0.18);
  color: #6B7178;
  border-color: rgba(138, 146, 153, 0.4);
}

/* Dark mode: pills com cores invertidas (texto claro) */
:root[data-theme="dark"] #tabpanel-financeiro .fin-status-pago {
  color: #6BD4A0;
  background: rgba(45, 154, 107, 0.22);
}
:root[data-theme="dark"] #tabpanel-financeiro .fin-status-pendente {
  color: #FFD972;
  background: rgba(255, 200, 70, 0.18);
}
:root[data-theme="dark"] #tabpanel-financeiro .fin-status-arquivado {
  color: #B8BFC6;
  background: rgba(138, 146, 153, 0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-status-pago {
    color: #6BD4A0; background: rgba(45, 154, 107, 0.22);
  }
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-status-pendente {
    color: #FFD972; background: rgba(255, 200, 70, 0.18);
  }
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-status-arquivado {
    color: #B8BFC6; background: rgba(138, 146, 153, 0.22);
  }
}

/* Valores com sinal +/- */
#tabpanel-financeiro .fin-valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#tabpanel-financeiro .fin-valor-rec { color: var(--eds-ok, #2D9A6B); }
#tabpanel-financeiro .fin-valor-desp { color: var(--eds-crit, #FF6A2A); }
:root[data-theme="dark"] #tabpanel-financeiro .fin-valor-rec { color: #6BD4A0; }
:root[data-theme="dark"] #tabpanel-financeiro .fin-valor-desp { color: #FFA577; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-valor-rec { color: #6BD4A0; }
  :root:not([data-theme="light"]) #tabpanel-financeiro .fin-valor-desp { color: #FFA577; }
}

/* ============================================================
   Onda N.6 estendida — Botões com ícone + ellipsis credor
   ============================================================ */

/* Ícone SVG genérico — herda cor do contexto */
.fin-icon {
  flex-shrink: 0;
  vertical-align: -2px;
}

/* Botão de ação com ícone+label (ex: "Marcar pago") */
.fin-btn-acao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}
/* Botão somente-ícone (editar, excluir, prev/next mês) */
.fin-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.fin-btn-icon[data-fin-pagar] { color: var(--eds-ok, #2D9A6B); }
.fin-btn-icon[data-fin-desfazer] { color: var(--text-muted, #8A9299); }
.fin-btn-icon[data-fin-excluir-parcela] { color: var(--eds-crit, #FF6A2A); }
.fin-btn-acao[data-fin-pagar] {
  border-color: var(--eds-ok, #2D9A6B);
  color: var(--eds-ok, #2D9A6B);
}
.fin-btn-acao[data-fin-pagar]:hover {
  background: rgba(45, 154, 107, 0.08);
}

/* Em telas estreitas, esconde label do "Marcar pago" e mantém só o ícone */
@media (max-width: 1280px) {
  .fin-btn-acao .fin-btn-label { display: none; }
  .fin-btn-acao[data-fin-pagar] { padding: 4px 6px; width: 28px; }
}

/* Ellipsis no credor (Bug 3.3) */
#tabpanel-financeiro .fin-cell-credor {
  display: inline-block;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Tabs Receitas/Despesas — alinhamento dos ícones SVG */
#tabpanel-financeiro .fin-tipo-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#tabpanel-financeiro .fin-tipo-tab-icon {
  flex-shrink: 0;
}

/* Sub-aba Lançamentos / Recorrências — gap entre ícone e texto */
#tabpanel-financeiro #fin-subaba .seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   Onda N.6.3 — Hero saldo + TOC fixa lateral
   ============================================================ */

/* Hero saldo — destaque máximo da 1ª dobra */
#tabpanel-financeiro .fin-hero-saldo {
  background: linear-gradient(135deg, var(--eds-accent-strong, #0F2742), #1a3a5c);
  color: white;
  padding: 18px 24px;
  border-radius: 8px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-margin-top: 64px;
}
#tabpanel-financeiro .fin-hero-saldo-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.75;
}
#tabpanel-financeiro .fin-hero-saldo-valor {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: white;
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
}
#tabpanel-financeiro .fin-hero-saldo-meta {
  font-size: 12px;
  opacity: 0.7;
}

/* N.7.4 noite-12: a TOC flutuante #fin-toc foi substituída por sub-menu
   integrado ao sidebar (.sidebar-subnav). Ocultando a versão antiga. */
#tabpanel-financeiro #fin-toc {
  display: none !important;
}
/* Estilos antigos do fin-toc preservados pra compat (caso queiramos voltar)
   mas inerte com display:none acima.
   ===  Estilo antigo da TOC flutuante (preservado pra rollback):
#tabpanel-financeiro-toc-old {
  position: fixed;
  top: 90px;
  right: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--bg-card, white);
  border: 1px solid var(--border, #e6e8eb);
  border-radius: 6px;
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  max-width: 140px;
}
*/

/* === N.7.4 noite-12: sub-menu integrado ao sidebar === */
.sidebar-group {
  display: flex;
  flex-direction: column;
}
.sidebar-group .sidebar-group-toggle {
  position: relative;
}
.sidebar-group .sidebar-chev {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.55;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.sidebar-group[data-expanded="true"] .sidebar-chev {
  transform: rotate(90deg);
  opacity: 0.9;
}
.sidebar-subnav {
  display: flex;
  flex-direction: column;
  margin: 2px 0 4px 0;
  padding: 2px 0;
  border-left: 2px solid rgba(15, 39, 66, 0.12);
  margin-left: 24px;  /* alinha com label do pai (após icon de 16px + gap) */
}
.sidebar-subnav[hidden] { display: none; }
.sidebar-subitem {
  display: block;
  padding: 6px 10px 6px 14px;
  margin: 1px 4px;
  font-size: 12px;
  color: var(--text-muted, #8A9299);
  text-decoration: none;
  border-radius: 4px;
  border-left: 2px solid transparent;
  transition: all 0.12s;
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
}
.sidebar-subitem:hover {
  color: var(--text, #1C1E22);
  background: rgba(15, 39, 66, 0.05);
}
.sidebar-subitem.active {
  color: var(--eds-accent, #0F2742);
  font-weight: 600;
  background: rgba(15, 39, 66, 0.08);
  border-left-color: var(--eds-accent, #0F2742);
}
:root[data-theme="dark"] .sidebar-subnav {
  border-left-color: rgba(255, 255, 255, 0.1);
}
:root[data-theme="dark"] .sidebar-subitem {
  color: rgba(230, 232, 235, 0.55);
}
:root[data-theme="dark"] .sidebar-subitem:hover {
  color: #E6E8EB;
  background: rgba(255, 255, 255, 0.05);
}
:root[data-theme="dark"] .sidebar-subitem.active {
  color: #FFC846;
  background: rgba(255, 200, 70, 0.1);
  border-left-color: #FFC846;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar-subnav {
    border-left-color: rgba(255, 255, 255, 0.1);
  }
  :root:not([data-theme="light"]) .sidebar-subitem {
    color: rgba(230, 232, 235, 0.55);
  }
  :root:not([data-theme="light"]) .sidebar-subitem.active {
    color: #FFC846;
    background: rgba(255, 200, 70, 0.1);
    border-left-color: #FFC846;
  }
}
/* Quando sidebar colapsada, esconde sub-menu também */
body.sidebar-collapsed .sidebar-subnav { display: none; }
body.sidebar-collapsed .sidebar-chev { display: none; }
/* === fim N.7.4 noite-12 === */

/* === SCI.1 (Virada SCI): 5 seções colapsáveis no topo da sidebar ===
   Reusa .sidebar-group/.sidebar-subnav. O cabeçalho de seção (.sidebar-section-toggle)
   é um disclosure (não-tab); os itens dentro do .sidebar-subnav são as abas reais. */
.sidebar-section-toggle {
  font-weight: 700;
  color: var(--text, #1C1E22);
}
.sidebar-section-toggle .sidebar-label {
  letter-spacing: 0.01em;
}
/* Suaviza a indentação do TOC do Financeiro, que agora vive 2 níveis abaixo
   (seção Adm/Finanças → Financeiro → âncoras), pra não empurrar demais. */
.sidebar-subnav .sidebar-subnav {
  margin-left: 14px;
}
/* Modo colapsado (⌘\): vira um rail de ícones — esconde os cabeçalhos de seção
   e o TOC de texto do Financeiro, mas mantém TODAS as abas acessíveis como ícones
   (mesma reachability do rail plano anterior). Acordeão fica inerte aqui. */
body.sidebar-collapsed .sidebar-section-toggle { display: none; }
body.sidebar-collapsed [data-section-sub] {
  display: flex;
  margin-left: 0;
  border-left: none;
  padding: 0;
}
body.sidebar-collapsed [data-sidebar-sub] { display: none; }
/* === fim SCI.1 === */

/* TOC antiga preservada por compat — começa estilos antigos (inerte) */
#tabpanel-financeiro-fin-toc-DEAD {
  position: fixed;
  top: 90px;
  right: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--bg-card, white);
  border: 1px solid var(--border, #e6e8eb);
  border-radius: 6px;
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  max-width: 140px;
}
#tabpanel-financeiro #fin-toc a {
  display: block;
  padding: 4px 8px;
  border-radius: 3px;
  color: var(--text-muted, #8A9299);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.12s;
}
#tabpanel-financeiro #fin-toc a:hover {
  color: var(--text, #1C1E22);
  background: rgba(15, 39, 66, 0.04);
}
#tabpanel-financeiro #fin-toc a.active {
  color: var(--eds-accent, #0F2742);
  font-weight: 600;
  border-left-color: var(--eds-accent, #0F2742);
  background: rgba(15, 39, 66, 0.06);
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-toc {
  background: #122A48;
  border-color: rgba(230, 232, 235, 0.14);
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-toc a {
  color: rgba(230, 232, 235, 0.6);
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-toc a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #E6E8EB;
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-toc a.active {
  color: #FFC846;
  border-left-color: #FFC846;
  background: rgba(255, 200, 70, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tabpanel-financeiro #fin-toc {
    background: #122A48;
    border-color: rgba(230, 232, 235, 0.14);
  }
  :root:not([data-theme="light"]) #tabpanel-financeiro #fin-toc a {
    color: rgba(230, 232, 235, 0.6);
  }
  :root:not([data-theme="light"]) #tabpanel-financeiro #fin-toc a.active {
    color: #FFC846;
    border-left-color: #FFC846;
    background: rgba(255, 200, 70, 0.08);
  }
}
/* Em telas estreitas, esconde o TOC fixo */
@media (max-width: 1280px) {
  #tabpanel-financeiro #fin-toc { display: none; }
}

/* Scroll-margin nas seções pra não ficarem coladas no topbar ao ancorar */
#tabpanel-financeiro #fin-resumo,
#tabpanel-financeiro #fin-lancamentos-sec,
#tabpanel-financeiro #fin-contas-sec,
#tabpanel-financeiro #fin-atalhos-bloco {
  scroll-margin-top: 70px;
}

/* ============================================================
   Hotfix N.6: Dark mode dos modais financeiros (Onda N.4/N.5)
   Os modais usavam <label>+<input> sem classe — herdavam padrão do
   browser (white-on-white). Override semântico aqui.
   ============================================================ */

/* Modais do módulo financeiro: bg, texto, inputs no dark */
:root[data-theme="dark"] #fin-modal,
:root[data-theme="dark"] #fin-modal-rec,
:root[data-theme="dark"] #fin-modal-pagar,
:root[data-theme="dark"] #fin-modal-credor,
:root[data-theme="dark"] #fin-modal-credor-detail,
:root[data-theme="dark"] #fin-modal-parcelas,
:root[data-theme="dark"] #fin-modal-excluir-parcela {
  background: #122A48;
  color: #E6E8EB;
  border: 1px solid rgba(230, 232, 235, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #fin-modal,
  :root:not([data-theme="light"]) #fin-modal-rec,
  :root:not([data-theme="light"]) #fin-modal-pagar,
  :root:not([data-theme="light"]) #fin-modal-credor,
  :root:not([data-theme="light"]) #fin-modal-credor-detail,
  :root:not([data-theme="light"]) #fin-modal-parcelas,
  :root:not([data-theme="light"]) #fin-modal-excluir-parcela {
    background: #122A48;
    color: #E6E8EB;
    border: 1px solid rgba(230, 232, 235, 0.14);
  }
}

/* Headers / títulos dos modais — texto branco no dark */
:root[data-theme="dark"] #fin-modal h3,
:root[data-theme="dark"] #fin-modal-rec h3,
:root[data-theme="dark"] #fin-modal-pagar h3,
:root[data-theme="dark"] #fin-modal-credor h3,
:root[data-theme="dark"] #fin-modal-credor-detail h3,
:root[data-theme="dark"] #fin-modal-parcelas h3,
:root[data-theme="dark"] #fin-modal-excluir-parcela h3 {
  color: #E6E8EB !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #fin-modal h3,
  :root:not([data-theme="light"]) #fin-modal-rec h3,
  :root:not([data-theme="light"]) #fin-modal-pagar h3,
  :root:not([data-theme="light"]) #fin-modal-credor h3,
  :root:not([data-theme="light"]) #fin-modal-credor-detail h3,
  :root:not([data-theme="light"]) #fin-modal-parcelas h3,
  :root:not([data-theme="light"]) #fin-modal-excluir-parcela h3 {
    color: #E6E8EB !important;
  }
}

/* Labels dentro dos modais financeiros — herdam color (legível dark+light) */
#fin-modal label,
#fin-modal-rec label,
#fin-modal-pagar label,
#fin-modal-credor label,
#fin-modal-parcelas label,
#fin-modal-excluir-parcela label {
  color: inherit;
}

/* Inputs/selects/textareas dos modais financeiros */
#fin-modal input[type="text"],
#fin-modal input[type="number"],
#fin-modal input[type="date"],
#fin-modal input[type="month"],
#fin-modal input[type="search"],
#fin-modal input[type="email"],
#fin-modal select,
#fin-modal textarea,
#fin-modal-rec input[type="text"],
#fin-modal-rec input[type="number"],
#fin-modal-rec input[type="date"],
#fin-modal-rec input[type="month"],
#fin-modal-rec select,
#fin-modal-rec textarea,
#fin-modal-pagar input,
#fin-modal-pagar select,
#fin-modal-credor input,
#fin-modal-credor select,
#fin-modal-credor textarea {
  padding: 6px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-card, white);
  color: var(--text, #1C1E22);
  box-sizing: border-box;
  width: 100%;
}

/* Dark mode: inputs com fundo navy mais escuro, texto branco */
:root[data-theme="dark"] #fin-modal input[type="text"],
:root[data-theme="dark"] #fin-modal input[type="number"],
:root[data-theme="dark"] #fin-modal input[type="date"],
:root[data-theme="dark"] #fin-modal input[type="month"],
:root[data-theme="dark"] #fin-modal input[type="search"],
:root[data-theme="dark"] #fin-modal input[type="email"],
:root[data-theme="dark"] #fin-modal select,
:root[data-theme="dark"] #fin-modal textarea,
:root[data-theme="dark"] #fin-modal-rec input,
:root[data-theme="dark"] #fin-modal-rec select,
:root[data-theme="dark"] #fin-modal-rec textarea,
:root[data-theme="dark"] #fin-modal-pagar input,
:root[data-theme="dark"] #fin-modal-pagar select,
:root[data-theme="dark"] #fin-modal-credor input,
:root[data-theme="dark"] #fin-modal-credor select,
:root[data-theme="dark"] #fin-modal-credor textarea {
  background: #0A1A2E;
  color: #E6E8EB;
  border-color: rgba(230, 232, 235, 0.18);
}
:root[data-theme="dark"] #fin-modal input::placeholder,
:root[data-theme="dark"] #fin-modal textarea::placeholder,
:root[data-theme="dark"] #fin-modal-rec input::placeholder,
:root[data-theme="dark"] #fin-modal-rec textarea::placeholder,
:root[data-theme="dark"] #fin-modal-credor input::placeholder {
  color: rgba(230, 232, 235, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #fin-modal input[type="text"],
  :root:not([data-theme="light"]) #fin-modal input[type="number"],
  :root:not([data-theme="light"]) #fin-modal input[type="date"],
  :root:not([data-theme="light"]) #fin-modal input[type="month"],
  :root:not([data-theme="light"]) #fin-modal input[type="search"],
  :root:not([data-theme="light"]) #fin-modal input[type="email"],
  :root:not([data-theme="light"]) #fin-modal select,
  :root:not([data-theme="light"]) #fin-modal textarea,
  :root:not([data-theme="light"]) #fin-modal-rec input,
  :root:not([data-theme="light"]) #fin-modal-rec select,
  :root:not([data-theme="light"]) #fin-modal-rec textarea,
  :root:not([data-theme="light"]) #fin-modal-pagar input,
  :root:not([data-theme="light"]) #fin-modal-pagar select,
  :root:not([data-theme="light"]) #fin-modal-credor input,
  :root:not([data-theme="light"]) #fin-modal-credor select,
  :root:not([data-theme="light"]) #fin-modal-credor textarea {
    background: #0A1A2E;
    color: #E6E8EB;
    border-color: rgba(230, 232, 235, 0.18);
  }
  :root:not([data-theme="light"]) #fin-modal input::placeholder,
  :root:not([data-theme="light"]) #fin-modal textarea::placeholder,
  :root:not([data-theme="light"]) #fin-modal-rec input::placeholder,
  :root:not([data-theme="light"]) #fin-modal-rec textarea::placeholder,
  :root:not([data-theme="light"]) #fin-modal-credor input::placeholder {
    color: rgba(230, 232, 235, 0.4);
  }
}

/* Botões dentro dos modais financeiros: dark = border + text claros */
:root[data-theme="dark"] #fin-modal .btn:not(.primary),
:root[data-theme="dark"] #fin-modal-rec .btn:not(.primary),
:root[data-theme="dark"] #fin-modal-pagar .btn:not(.primary),
:root[data-theme="dark"] #fin-modal-credor .btn:not(.primary),
:root[data-theme="dark"] #fin-modal-parcelas .btn:not(.primary),
:root[data-theme="dark"] #fin-modal-excluir-parcela .btn:not(.primary) {
  background: transparent;
  color: #E6E8EB;
  border-color: rgba(230, 232, 235, 0.3);
}
:root[data-theme="dark"] #fin-modal .btn:not(.primary):hover,
:root[data-theme="dark"] #fin-modal-rec .btn:not(.primary):hover,
:root[data-theme="dark"] #fin-modal-pagar .btn:not(.primary):hover,
:root[data-theme="dark"] #fin-modal-credor .btn:not(.primary):hover,
:root[data-theme="dark"] #fin-modal-parcelas .btn:not(.primary):hover,
:root[data-theme="dark"] #fin-modal-excluir-parcela .btn:not(.primary):hover {
  background: rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #fin-modal .btn:not(.primary),
  :root:not([data-theme="light"]) #fin-modal-rec .btn:not(.primary),
  :root:not([data-theme="light"]) #fin-modal-pagar .btn:not(.primary),
  :root:not([data-theme="light"]) #fin-modal-credor .btn:not(.primary),
  :root:not([data-theme="light"]) #fin-modal-parcelas .btn:not(.primary),
  :root:not([data-theme="light"]) #fin-modal-excluir-parcela .btn:not(.primary) {
    background: transparent;
    color: #E6E8EB;
    border-color: rgba(230, 232, 235, 0.3);
  }
  :root:not([data-theme="light"]) #fin-modal .btn:not(.primary):hover,
  :root:not([data-theme="light"]) #fin-modal-rec .btn:not(.primary):hover {
    background: rgba(255, 255, 255, 0.06);
  }
}

/* Configurador de parcelas — fieldset com bg suave que precisa adaptar */
:root[data-theme="dark"] #fin-form-parcelas-bloco {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(230, 232, 235, 0.18);
  color: #E6E8EB;
}
:root[data-theme="dark"] #fin-form-parcelas-bloco fieldset {
  border-color: rgba(230, 232, 235, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #fin-form-parcelas-bloco {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(230, 232, 235, 0.18);
    color: #E6E8EB;
  }
}
/* Cabeçalho do configurador no dark continua claro (fundo light explícito do HTML),
   neutralizamos pra herdar do parent */
#fin-form-parcelas-bloco { background: transparent !important; }

/* Bloco de anexos (fieldset com bg-soft) também precisa adaptar */
:root[data-theme="dark"] #fin-form-anexos-bloco {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(230, 232, 235, 0.18);
  color: #E6E8EB;
}
:root[data-theme="dark"] #fin-form-anexos-bloco legend {
  color: #FFC846;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #fin-form-anexos-bloco {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(230, 232, 235, 0.18);
    color: #E6E8EB;
  }
  :root:not([data-theme="light"]) #fin-form-anexos-bloco legend {
    color: #FFC846;
  }
}

/* Pílulas Despesa/Receita do tipo (seg-pills) no modal — visíveis no dark */
:root[data-theme="dark"] #fin-modal #fin-form-tipo .seg,
:root[data-theme="dark"] #fin-modal-rec #fin-rec-tipo .seg {
  background: transparent;
  color: #E6E8EB;
  border-color: rgba(230, 232, 235, 0.3);
}
:root[data-theme="dark"] #fin-modal #fin-form-tipo .seg.active,
:root[data-theme="dark"] #fin-modal-rec #fin-rec-tipo .seg.active {
  background: var(--eds-accent-strong, #0F2742);
  color: white;
  border-color: var(--eds-accent, #0F2742);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #fin-modal #fin-form-tipo .seg,
  :root:not([data-theme="light"]) #fin-modal-rec #fin-rec-tipo .seg {
    background: transparent;
    color: #E6E8EB;
    border-color: rgba(230, 232, 235, 0.3);
  }
  :root:not([data-theme="light"]) #fin-modal #fin-form-tipo .seg.active,
  :root:not([data-theme="light"]) #fin-modal-rec #fin-rec-tipo .seg.active {
    background: var(--eds-accent-strong, #0F2742);
    color: white;
    border-color: var(--eds-accent, #0F2742);
  }
}

/* Tabela de parcelas geradas dentro do configurador no dark */
:root[data-theme="dark"] #fin-parc-tabela-wrap {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(230, 232, 235, 0.14);
}
:root[data-theme="dark"] #fin-parc-tabela-wrap thead {
  background: rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] #fin-parc-tabela-wrap input {
  background: rgba(0, 0, 0, 0.2);
  color: #E6E8EB;
  border-color: rgba(230, 232, 235, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #fin-parc-tabela-wrap {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(230, 232, 235, 0.14);
  }
  :root:not([data-theme="light"]) #fin-parc-tabela-wrap thead {
    background: rgba(255, 255, 255, 0.04);
  }
  :root:not([data-theme="light"]) #fin-parc-tabela-wrap input {
    background: rgba(0, 0, 0, 0.2);
    color: #E6E8EB;
    border-color: rgba(230, 232, 235, 0.18);
  }
}

/* "Conta bancária *" hint texto e small.muted */
:root[data-theme="dark"] #fin-modal small,
:root[data-theme="dark"] #fin-modal-rec small {
  color: rgba(230, 232, 235, 0.55) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #fin-modal small,
  :root:not([data-theme="light"]) #fin-modal-rec small {
    color: rgba(230, 232, 235, 0.55) !important;
  }
}

/* ============================================================
   Onda N.7 — Polish UX dos modais financeiros (REMOVIDO em N.2.5 fase 4)

   As regras legacy `#fin-modal { padding: 24px 28px; box-shadow: ...; min-width: ...; }`
   sobrescreviam a estrutura `.eds-modal` (regra base com padding: 0, --modal-max-w,
   --elev-modal). Agora os modais são `.eds-modal` e herdam padding/box-shadow/largura
   do design system. Mobile responsivo é coberto pelo @media (max-width: 640px) em
   .eds-modal__head/__body/__foot. Header/footer separators idem.

   Regra `#fin-form-parcelas-bloco/anexos-bloco/vinculo-bloco` legacy continua
   abaixo (preserva fieldsets visuais dentro do modal).
   ============================================================ */

/* Fieldset (parcelas / anexos / vínculo): destaque visual com padding */
#fin-form-parcelas-bloco,
#fin-form-anexos-bloco,
#fin-form-vinculo-bloco {
  padding: 14px 16px;
  border-radius: 8px;
  margin: 4px 0;
}

/* ============================================================
   Onda N.7 — Vínculo a evento/projeto: row 2-col + autocomplete
   ============================================================ */

.fin-form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ============================================================
   N.18 (2026-05-17) — eds-form: padrão de formulário dentro
   de modal família B (.eds-modal). Usado em Equipamentos e
   adiante em qualquer modal de CRUD novo.
   ============================================================ */

.eds-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eds-form__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eds-form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Onda CONTRATO.JD: divisor de seção (eyebrow) dentro de .eds-form */
.eds-form__section-label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-top: 1px solid var(--surface-border);
  padding-top: var(--sp-2, 8px);
  margin-top: var(--sp-1, 4px);
}

/* Onda UX.JD: modal #jd-modal — hierarquia brief-herói + progressive disclosure */
.jd-hero {
  display: flex; flex-direction: column; gap: var(--sp-2, 8px);
  padding: var(--sp-4, 16px);
  background: var(--surface-2, #f6f7f9);
  border: 1px solid var(--border); border-radius: var(--eds-radius, 8px);
}
.jd-hero__ia-row { display: flex; justify-content: flex-end; }
/* botão IA ganha presença sem virar a ação primária do modal (essa é Salvar) */
#jd-analisar-ia {
  background: var(--accent-soft, var(--surface-2));
  border-color: var(--accent); color: var(--accent); font-weight: 600;
}
#jd-analisar-ia:hover:not(:disabled) { background: var(--accent); color: var(--panel); }

/* grade de 3 colunas para trios de campos curtos */
.eds-form__row--3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3, 12px); }

/* Zona 3 — progressive disclosure (<details>) */
.jd-advanced { border: 1px solid var(--border); border-radius: var(--eds-radius, 8px); overflow: hidden; }
.jd-advanced__summary {
  display: flex; align-items: baseline; gap: var(--sp-2, 8px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  list-style: none; user-select: none;
}
.jd-advanced__summary::-webkit-details-marker { display: none; }
.jd-advanced__summary::before {
  content: "▸"; color: var(--text-muted); font-size: var(--fs-2xs); transition: transform .15s ease;
}
.jd-advanced[open] .jd-advanced__summary::before { content: "▾"; }
.jd-advanced__summary:hover { background: var(--surface-2, var(--panel)); }
.jd-advanced__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.jd-advanced__hint { font-size: var(--fs-2xs); font-weight: 400; color: var(--text-muted); }
.jd-advanced__body {
  display: flex; flex-direction: column; gap: var(--sp-3, 12px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px) var(--sp-4, 16px);
  border-top: 1px solid var(--border);
}
.jd-advanced__body > .eds-form__section-label:first-child { border-top: none; padding-top: 0; margin-top: 0; }
@media (max-width: 640px) { .eds-form__row--3col { grid-template-columns: 1fr; } }

/* Lista inline de seleção de JD — modal "Adicionar descrição ao evento"
   (substitui o autocomplete flutuante que estourava o footer). */
.jd-pick-list {
  display: flex; flex-direction: column;
  max-height: 280px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--eds-radius, 8px);
  background: var(--surface-2, var(--panel));
}
.jd-pick-list .jd-pick-item {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: var(--sp-2, 8px) var(--sp-3, 12px); min-height: var(--tap, 38px);
  cursor: pointer; border-bottom: 1px solid var(--border); background: var(--panel);
  transition: background .12s ease;
}
.jd-pick-list .jd-pick-item:last-child { border-bottom: none; }
.jd-pick-list .jd-pick-item:hover { background: var(--accent-soft, var(--surface-2)); }
.jd-pick-list .jd-pick-item[aria-selected="true"] {
  background: var(--accent-soft, var(--surface-2)); box-shadow: inset 3px 0 0 var(--accent);
}
.jd-pick-list .jd-pick-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.jd-pick-item__titulo { font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; color: var(--text); }
.jd-pick-item__meta { font-size: var(--fs-2xs); color: var(--text-muted); line-height: 1.3; }
.jd-pick-empty {
  margin: 0; padding: var(--sp-4, 16px) var(--sp-3, 12px); text-align: center;
  font-size: var(--fs-sm); font-style: italic; color: var(--text-muted);
}

/* CONTRATO.EMAIL: hint discreto sob o campo + ação inline no banner + link de rodapé */
.eds-form__hint {
  font-size: var(--fs-2xs); color: var(--text-muted); line-height: 1.4; margin: 2px 0 0;
}
.eds-form__hint a { color: var(--accent); text-decoration: underline; }
.eds-modal__notice .eds-notice-action {
  margin-left: var(--sp-2, 8px); padding: 2px 10px; font-size: var(--fs-2xs);
}
.eds-modal__foot-link {
  margin-right: auto; font-size: var(--fs-2xs); color: var(--text-muted); text-decoration: underline; cursor: pointer;
}

/* Onda CONTRATO.JD: nome do freelancer clicável na linha do convite */
.em-convite-card__nome--link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.em-convite-card__nome--link:hover,
.em-convite-card__nome--link:focus {
  text-decoration: underline;
}

.eds-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text-secondary, #94a3b8);
}

.eds-form__field input,
.eds-form__field select,
.eds-form__field textarea {
  font-size: var(--fs-md);
  padding: 6px 8px;
  border: 1px solid var(--border, #334155);
  /* --eds-bg-elev1 + --text flipam no dark; --bg-elev/--text-primary eram
     indefinidos e caíam nos literais ESCUROS (#1e293b/#e2e8f0) → input navy
     com texto claro quebrava no tema CLARO (problema inverso). */
  background: var(--eds-bg-elev1, #f5f7fa);
  color: var(--text, #1C1E22);
  border-radius: 4px;
  font-family: inherit;
}
/* A11Y-TOUCH: campos de texto/seleção viram alvos ≥44px em toque (38px desktop).
   checkbox/radio ficam de fora — min-height distorceria o widget. */
.eds-form__field input:not([type="checkbox"]):not([type="radio"]),
.eds-form__field select {
  min-height: var(--tap, 38px);
}

.eds-form__field input:focus,
.eds-form__field select:focus,
.eds-form__field textarea:focus {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 1px;
}

.eds-form__error {
  font-size: var(--fs-sm);
  color: var(--eds-crit, #ef4444);
  padding: 6px 8px;
  border-left: 2px solid var(--eds-crit, #ef4444);
  background: rgba(239, 68, 68, 0.08);
  border-radius: 2px;
}

/* .fin-autocomplete-* = nomes originais (financeiro); .eds-autocomplete-* = alias
   neutro reusável (servicos.js Contratante — Onda SVC.UX-OPERAVEL). Mesmas regras. */
.fin-autocomplete-wrap,
.eds-autocomplete-wrap {
  position: relative;
}
.fin-autocomplete-list,
.eds-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin-top: 2px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--panel, white);
  color: var(--text, #111827);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  font-size: 13px;
}
.fin-autocomplete-list[hidden],
.eds-autocomplete-list[hidden] { display: none; }
.fin-autocomplete-list .item,
.eds-autocomplete-list .item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  /* A11Y-TOUCH: cada opção do dropdown vira alvo ≥44px em toque. */
  min-height: var(--tap, 38px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fin-autocomplete-list .item:last-child,
.eds-autocomplete-list .item:last-child { border-bottom: none; }
.fin-autocomplete-list .item:hover,
.fin-autocomplete-list .item.active,
.eds-autocomplete-list .item:hover,
.eds-autocomplete-list .item.active {
  background: rgba(15, 39, 66, 0.08);
}
.fin-autocomplete-list .item .meta,
.eds-autocomplete-list .item .meta {
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  margin-top: 2px;
}
/* Item não-selecionável (ex.: já convidado no evento) — visível, sem hover/click. */
.fin-autocomplete-list .item.disabled,
.eds-autocomplete-list .item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.fin-autocomplete-list .empty,
.eds-autocomplete-list .empty {
  padding: 8px 12px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

:root[data-theme="dark"] .fin-autocomplete-list,
:root[data-theme="dark"] .eds-autocomplete-list {
  background: #0A1A2E;
  border-color: rgba(230, 232, 235, 0.18);
  color: #E6E8EB;
}
:root[data-theme="dark"] .fin-autocomplete-list .item:hover,
:root[data-theme="dark"] .fin-autocomplete-list .item.active,
:root[data-theme="dark"] .eds-autocomplete-list .item:hover,
:root[data-theme="dark"] .eds-autocomplete-list .item.active {
  background: rgba(255, 200, 70, 0.12);
}
:root[data-theme="dark"] .fin-autocomplete-list .item .meta,
:root[data-theme="dark"] .fin-autocomplete-list .empty,
:root[data-theme="dark"] .eds-autocomplete-list .item .meta,
:root[data-theme="dark"] .eds-autocomplete-list .empty {
  color: rgba(230, 232, 235, 0.55);
}

/* ============================================================
   Onda N.7 — Chip "Vínculo" na tabela financeira
   ============================================================ */

.fin-chip-vinculo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border: 1px solid transparent;
}
.fin-chip-vinculo + .fin-chip-vinculo { margin-top: 2px; }
.fin-chip-evento {
  background: rgba(15, 39, 66, 0.08);
  color: var(--eds-accent, #0F2742);
}
.fin-chip-projeto {
  background: rgba(255, 200, 70, 0.18);
  color: #8a6300;
}
.fin-chip-vinculo:hover {
  border-color: currentColor;
}
/* Divisor vertical entre grupos da barra de filtros (N.UI-3). */
.fin-filters-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--border, #e6e8eb);
  align-self: center;
}

.fin-cell-vinculo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.fin-cell-vinculo .empty {
  color: var(--text-muted, #6b7280);
  font-size: 12px;
}

:root[data-theme="dark"] .fin-chip-evento {
  background: rgba(173, 200, 235, 0.14);
  color: #adc8eb;
}
:root[data-theme="dark"] .fin-chip-projeto {
  background: rgba(255, 200, 70, 0.18);
  color: #FFD972;
}

/* ============================================================
   N.7.4 noite-12: Polish da tabela Lançamentos (Financeiro)
   ============================================================
   Objetivos cravados com Fred (2026-05-06):
   - Linhas mais respirando (padding maior)
   - Hierarquia: descrição peso 500 / credor peso 400 secundário
   - Botões ação visíveis sempre (não só hover)
   - Larguras de coluna coerentes (vínculo, conta, valor não somem)
   - Status pills com mais contraste
*/

/* Wrapper com scroll horizontal só quando precisar */
#tabpanel-financeiro .data-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Tabela: largura mínima pra evitar colunas espremidas */
#tabpanel-financeiro #fin-tabela {
  min-width: 1080px;
  border-collapse: collapse;
}
/* Header: tipografia mais leve + sticky no scroll vertical interno (futuro) */
#tabpanel-financeiro #fin-tabela thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
  padding: 10px 10px;
  border-bottom: 1px solid var(--border, #e6e8eb);
  white-space: nowrap;
  text-align: left;
}
/* Linha: padding vertical mais respirado */
#tabpanel-financeiro #fin-tabela tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  vertical-align: middle;
  font-size: 13px;
}
/* Hover sutil */
#tabpanel-financeiro #fin-tabela tbody tr:hover td {
  background: rgba(15, 39, 66, 0.03);
}
/* EVT.FIN-ACIONAVEL: linhas clicáveis no Financeiro do evento. Token
   --eds-bg-elev1 é theme-aware (cobre claro + escuro numa regra só). */
#em-fin-lanc-tbody tr[data-lanc-id]:hover {
  background: var(--eds-bg-elev1, rgba(15, 39, 66, 0.05));
}
/* Hierarquia da Descrição: peso 500 + tamanho normal */
#tabpanel-financeiro #fin-tabela .fin-cell-descricao,
#tabpanel-financeiro #fin-tabela td:nth-child(3) {
  font-weight: 500;
  color: var(--text, #1C1E22);
  max-width: 280px;
}
/* Credor: peso normal, levemente menor */
#tabpanel-financeiro #fin-tabela .fin-cell-credor {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted, #4a5057);
  max-width: 180px;
}
/* Tipo: letra um pouco menor + cor secundária */
#tabpanel-financeiro #fin-tabela td:nth-child(2) {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  text-transform: lowercase;
}
/* Data prevista — fonte tabular pra alinhamento perfeito */
#tabpanel-financeiro #fin-tabela td:nth-child(1) {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-muted, #4a5057);
  white-space: nowrap;
}
/* Valor: tabular + peso 600 */
#tabpanel-financeiro #fin-tabela td:nth-child(9) {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
/* Conta: ellipsis pra não estourar */
#tabpanel-financeiro #fin-tabela .fin-col-conta,
#tabpanel-financeiro #fin-tabela td:nth-child(8) {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
/* Plano e Centro: text wrap não estourar */
#tabpanel-financeiro #fin-tabela td:nth-child(5),
#tabpanel-financeiro #fin-tabela td:nth-child(6) {
  max-width: 130px;
  font-size: 12px;
  color: var(--text-muted, #4a5057);
}
/* Status pill — herda; só garante padding */
#tabpanel-financeiro #fin-tabela .pill,
#tabpanel-financeiro #fin-tabela td:nth-child(10) {
  white-space: nowrap;
}
/* Coluna Ações: largura fixa, ações alinhadas à direita */
#tabpanel-financeiro #fin-tabela td:last-child {
  white-space: nowrap;
  text-align: right;
  width: 90px;
}
/* Botão de ação: sempre visível com bg neutro */
#tabpanel-financeiro #fin-tabela .fin-btn-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  border: 1px solid var(--border, #d1d5db);
  background: var(--bg-card, white);
  border-radius: 5px;
  color: var(--text, #1C1E22);
  cursor: pointer;
  transition: all 0.12s;
  font-size: 12px;
  overflow: hidden;
}
/* Dentro do #fin-tabela o botão é icon-only (28×28). Esconde a label textual
   que o JS emite — title/aria-label cobrem a11y. Sem isso, o texto "Marcar
   pago" vazava da célula da última coluna (Bug N.1). */
#tabpanel-financeiro #fin-tabela .fin-btn-acao .fin-btn-label {
  display: none;
}
#tabpanel-financeiro #fin-tabela .fin-btn-acao:hover {
  background: var(--eds-accent-strong, #0F2742);
  color: white;
  border-color: var(--eds-accent, #0F2742);
}
/* Botão Pagar (✓) destaca em verde — Verde Eixo (--eds-ok = #2D9A6B) */
#tabpanel-financeiro #fin-tabela .fin-btn-acao[data-fin-pagar] {
  color: var(--eds-ok, #2D9A6B);
  border-color: rgba(45, 154, 107, 0.35);
}
#tabpanel-financeiro #fin-tabela .fin-btn-acao[data-fin-pagar]:hover {
  background: var(--eds-ok, #2D9A6B);
  color: white;
  border-color: #2f8f3a;
}
/* Dark mode da tabela polida */
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela thead th {
  color: rgba(230, 232, 235, 0.55);
  border-bottom-color: rgba(230, 232, 235, 0.14);
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela tbody td {
  border-bottom-color: rgba(230, 232, 235, 0.08);
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela tbody tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela .fin-cell-descricao,
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela td:nth-child(3) {
  color: #E6E8EB;
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela .fin-cell-credor,
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela td:nth-child(1),
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela td:nth-child(5),
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela td:nth-child(6) {
  color: rgba(230, 232, 235, 0.7);
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela td:nth-child(2) {
  color: rgba(230, 232, 235, 0.55);
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela .fin-btn-acao {
  background: #122A48;
  border-color: rgba(230, 232, 235, 0.18);
  color: #E6E8EB;
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela .fin-btn-acao:hover {
  background: #FFC846;
  color: #0A1A2E;
  border-color: #FFC846;
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela .fin-btn-acao[data-fin-pagar] {
  color: #6dd07a;
  border-color: rgba(109, 208, 122, 0.3);
}
:root[data-theme="dark"] #tabpanel-financeiro #fin-tabela .fin-btn-acao[data-fin-pagar]:hover {
  background: #6dd07a;
  color: #0A1A2E;
  border-color: #6dd07a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tabpanel-financeiro #fin-tabela thead th {
    color: rgba(230, 232, 235, 0.55);
    border-bottom-color: rgba(230, 232, 235, 0.14);
  }
  :root:not([data-theme="light"]) #tabpanel-financeiro #fin-tabela tbody td {
    border-bottom-color: rgba(230, 232, 235, 0.08);
  }
  :root:not([data-theme="light"]) #tabpanel-financeiro #fin-tabela .fin-btn-acao {
    background: #122A48;
    border-color: rgba(230, 232, 235, 0.18);
    color: #E6E8EB;
  }
  :root:not([data-theme="light"]) #tabpanel-financeiro #fin-tabela .fin-btn-acao:hover {
    background: #FFC846;
    color: #0A1A2E;
    border-color: #FFC846;
  }
}
/* === fim N.7.4 noite-12: tabela polish === */

/* ============================================================
   Onda N.7.1 — Saque Solicitado Banlek
   ============================================================ */

/* Card hero "Saldo a sacar" no topo da Visão Painel */
.banlek-saque-hero {
  background: linear-gradient(135deg, var(--eds-accent-strong, #0F2742), #1a3a5c);
  color: white;
  padding: 18px 24px;
  border-radius: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(15, 39, 66, 0.2);
}
.banlek-saque-hero-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.banlek-saque-hero-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.banlek-saque-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.75;
  color: var(--eds-amanhecer, #FFC846);
}
.banlek-saque-valor {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: white;
  font-family: var(--eds-font-family, 'Inter', system-ui, sans-serif);
}
.banlek-saque-meta {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
}

/* Onda N.7.4 Should #5: pílula "última sync" — discreta, varia cor por estado.
   ok=verde · stale (>24h)=amarelo · running=azul · error=vermelho · never=cinza. */
.banlek-last-sync-pill {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #d8dde3);
}
.banlek-last-sync-pill[data-state="ok"]      { background: rgba(80, 200, 120, 0.16); border-color: rgba(80, 200, 120, 0.35); color: #6ddc94; }
.banlek-last-sync-pill[data-state="stale"]   { background: rgba(255, 200, 70, 0.16);  border-color: rgba(255, 200, 70, 0.40);  color: #ffd47a; }
.banlek-last-sync-pill[data-state="running"] { background: rgba(80, 150, 240, 0.16);  border-color: rgba(80, 150, 240, 0.40);  color: #7eb2f0; }
.banlek-last-sync-pill[data-state="error"]   { background: rgba(255, 100, 100, 0.16); border-color: rgba(255, 100, 100, 0.40); color: #ff8989; }
.banlek-last-sync-pill[data-state="never"]   { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: var(--text-muted, #8A9299); }
.banlek-saque-hero .btn.primary {
  background: var(--eds-amanhecer, #FFC846);
  color: var(--eds-accent, #0F2742);
  border: 0;
  font-weight: 600;
}
.banlek-saque-hero .btn.primary:hover { filter: brightness(1.05); }
.banlek-saque-hero .btn:not(.primary) {
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.25);
}
.banlek-saque-hero .btn:not(.primary):hover { background: rgba(255,255,255,0.18); }

/* Modal solicitar saque — totais + form */
#banlek-modal-saque .modal-body { padding: 24px 28px; }
#banlek-modal-saque #bsaq-vendas-wrap {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  margin-bottom: 14px;
}
#banlek-modal-saque #bsaq-tabela { width: 100%; border-collapse: collapse; }
#banlek-modal-saque #bsaq-tabela thead {
  position: sticky;
  top: 0;
  /* --eds-bg-elev1 flipa no dark; --bg-elev era indefinido e caía no literal
     claro #f8f8f8 → texto claro no dark ficava ilegível (white-on-white). */
  background: var(--eds-bg-elev1, #f8f8f8);
  color: var(--text, #1C1E22);
  z-index: 1;
}
#banlek-modal-saque #bsaq-tabela th,
#banlek-modal-saque #bsaq-tabela td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  font-size: 13px;
}
#banlek-modal-saque .bsaq-cell-evento {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bsaq-totais {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 14px;
  /* --eds-bg-elev1 flipa no dark; --bg-elev era indefinido e caía no literal
     claro #f5f7fa → texto claro no dark ficava ilegível (white-on-white). */
  background: var(--eds-bg-elev1, #f5f7fa);
  color: var(--text, #1C1E22);
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 14px;
}
.bsaq-totais strong {
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  color: var(--eds-accent, #0F2742);
}
.bsaq-form {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.bsaq-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 500;
}
.bsaq-form input,
.bsaq-form select {
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
  color: var(--text);
  background: var(--bg);
}

/* Status pills — Saque */
.bsaq-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bsaq-pill.pill-solicitado {
  background: rgba(255, 200, 70, 0.18);
  color: #b88500;
}
.bsaq-pill.pill-recebido {
  background: rgba(56, 161, 105, 0.18);
  color: #2c7a4a;
}
.bsaq-pill.pill-conciliado {
  background: rgba(15, 39, 66, 0.14);
  color: var(--eds-accent, #0F2742);
}
.bsaq-pill.pill-cancelado {
  background: rgba(150, 150, 150, 0.18);
  color: #666;
}

/* Sub-aba Saques — toolbar e tabela */
.saques-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.saques-toolbar select {
  padding: 6px 10px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
#saques-tabela { width: 100%; }
#saques-tabela td.num strong { font-variant-numeric: tabular-nums; }
.bsaq-cell-obs {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Drill modal — meta grid (modal migrado para .eds-modal em N.2.5; padding herda de .eds-modal__body) */
.bsdrill-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 16px;
  font-size: 13px;
  padding: 12px 14px;
  /* --eds-bg-elev1 flipa no dark (claro: tint navy .05; dark: tint branco .06);
     --bg-elev era indefinido e caía no literal claro #f5f7fa → texto claro no
     dark ficava ilegível (white-on-white). var(--text) explícito por garantia. */
  background: var(--eds-bg-elev1, #f5f7fa);
  color: var(--text, #1C1E22);
  border-radius: 8px;
}
.bsdrill-meta .full-row { grid-column: 1 / -1; }
.bsdrill-meta strong { font-variant-numeric: tabular-nums; }
#bsdrill-vendas-tabela { width: 100%; margin-top: 8px; }
#bsdrill-vendas-tabela th,
#bsdrill-vendas-tabela td {
  padding: 6px 10px;
  font-size: 13px;
  border-bottom: 1px solid var(--border, #e0e0e0);
}

/* Vínculo manual — callout (beco sem saída resolvido) + resumo da divergência */
.bsaq-callout {
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  border-radius: var(--eds-radius-sm, 4px);
  border-left: 3px solid var(--eds-info, #0F2742);
  background: var(--eds-info-soft, rgba(96,165,250,.18));
  color: var(--text, #1C1E22);
  font-size: var(--fs-md, 13px);
  line-height: 1.55;
}
.bsaq-callout strong { font-weight: 700; }
.bsaq-callout--warn { border-left-color: var(--eds-warn, #FFC846); background: var(--eds-warn-soft, rgba(255,200,70,.18)); }
.bsaq-callout--info { border-left-color: var(--eds-info, #0F2742); background: var(--eds-info-soft, rgba(96,165,250,.18)); }

.bsaq-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-2, 8px) var(--sp-4, 16px);
  margin: var(--sp-4, 16px) 0;
}
.bsaq-resumo > div { display: flex; flex-direction: column; gap: var(--sp-1, 4px); }
.bsaq-resumo dt { font-size: var(--fs-2xs, 10px); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #8A9299); font-weight: 600; }
.bsaq-resumo dd { margin: 0; font-size: var(--fs-lg, 16px); font-weight: 700; font-variant-numeric: tabular-nums; }

.bsaq-div--ok { color: var(--eds-ok, #2D9A6B); }
.bsaq-div--warn { color: var(--eds-por-do-sol, #FF6A2A); }

/* Botão danger pra cancelamento */
.banlek-saque-hero .btn.danger,
#bsdrill-actions .btn.danger {
  background: var(--eds-por-do-sol, #FF6A2A);
  color: white;
  border: 0;
}
#bsdrill-actions .btn.danger:hover { filter: brightness(1.05); }

/* Dark mode overrides */
:root[data-theme="dark"] .banlek-saque-hero {
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
:root[data-theme="dark"] .bsaq-totais,
:root[data-theme="dark"] .bsdrill-meta {
  background: rgba(255,255,255,0.04);
}
:root[data-theme="dark"] #banlek-modal-saque,
:root[data-theme="dark"] #banlek-modal-saque-drill,
:root[data-theme="dark"] #banlek-modal-receber {
  background: #122A48;
  color: #E6E8EB;
  border: 1px solid rgba(230,232,235,0.14);
}
:root[data-theme="dark"] #banlek-modal-saque h3,
:root[data-theme="dark"] #banlek-modal-saque-drill h3,
:root[data-theme="dark"] #banlek-modal-receber h3,
:root[data-theme="dark"] #banlek-modal-saque h4,
:root[data-theme="dark"] #banlek-modal-saque-drill h4 { color: #E6E8EB; }
:root[data-theme="dark"] #banlek-modal-saque input,
:root[data-theme="dark"] #banlek-modal-saque select,
:root[data-theme="dark"] #banlek-modal-receber input,
:root[data-theme="dark"] #banlek-modal-saque-drill input {
  background: #0A1A2E;
  color: #E6E8EB;
  border-color: rgba(230,232,235,0.18);
}
:root[data-theme="dark"] #bsaq-tabela thead,
:root[data-theme="dark"] #bsdrill-vendas-tabela thead {
  background: rgba(255,255,255,0.04);
}
:root[data-theme="dark"] #bsaq-vendas-wrap {
  border-color: rgba(230,232,235,0.18);
}
:root[data-theme="dark"] .bsaq-pill.pill-solicitado {
  background: rgba(255, 200, 70, 0.22);
  color: #FFD972;
}
:root[data-theme="dark"] .bsaq-pill.pill-recebido {
  background: rgba(56, 161, 105, 0.22);
  color: #5dd093;
}
:root[data-theme="dark"] .bsaq-pill.pill-conciliado {
  background: rgba(173, 200, 235, 0.18);
  color: #adc8eb;
}
:root[data-theme="dark"] .bsaq-pill.pill-cancelado {
  background: rgba(180, 180, 180, 0.18);
  color: #aaa;
}

/* Responsividade — telas estreitas */
@media (max-width: 720px) {
  .banlek-saque-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .banlek-saque-hero-right { width: 100%; }
  .bsaq-totais { flex-direction: column; gap: 6px; }
}

/* ============================================================
   N.7.3 — Progress feedback abaixo do botão Sincronizar Banlek
   ============================================================ */

.banlek-sync-progress {
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.18);
}

#banlek-sync-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
}

#banlek-sync-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  transition: background 0.2s, color 0.2s;
}

#banlek-sync-steps li.active {
  background: rgba(255, 200, 70, 0.15);
  color: var(--eds-amanhecer, #FFC846);
  font-weight: 500;
}

#banlek-sync-steps li.done {
  background: rgba(56, 161, 105, 0.18);
  color: #5dd093;
}

#banlek-sync-steps li.done::after {
  content: '✓';
  margin-left: auto;
  font-weight: 700;
}

#banlek-sync-steps li.active::after {
  content: '⏳';
  margin-left: auto;
}

#banlek-sync-steps .step-label {
  flex: 1;
}

/* ============================================================
   N.7.3 noite-3 — Topbar Eixo OS: indicadores financeiros
   ============================================================ */

#topbar-eixo-meta .meta-item {
  white-space: nowrap;
}
#topbar-eixo-meta .meta-item strong {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#topbar-eixo-meta strong.positivo { color: var(--eds-ok, #2D9A6B); }
#topbar-eixo-meta strong.negativo { color: var(--eds-crit, #FF6A2A); }

@media (max-width: 1100px) {
  #topbar-eixo-meta .meta-item:nth-child(n+5) { display: none; }
}

/* ============================================================
   Onda N.2.5 — .eds-modal: estrutura única para TODOS os modais.
   Substitui as 3 famílias coexistentes:
     A) <form> direto + padding inline (fin-modal*)
     B) m-head/m-body/m-foot                (Eventos, Vendas, Pendências)
     C) <form> direto SEM padding           (fin-modal-transf, banlek-token-modal)

   Uso correto:
     <dialog class="eds-modal" id="...">
       <header class="eds-modal__head">
         <h3 class="eds-modal__title">Título</h3>
         <button type="button" class="eds-modal__close" aria-label="Fechar">×</button>
       </header>
       <form class="eds-modal__body">...</form>
       <footer class="eds-modal__foot">
         <button class="btn">Cancelar</button>
         <button class="btn primary">Salvar</button>
       </footer>
     </dialog>

   Largura ajustada por dialog via inline style:
     <dialog class="eds-modal" style="--modal-max-w: 920px;">
   Default 720px. Sempre respeita 96vw + margem 24px top/bottom.
   ============================================================ */

dialog.eds-modal {
  border: none;
  padding: 0;
  border-radius: 12px;
  width: min(var(--modal-max-w, 720px), calc(100vw - var(--sp-6, 32px)));
  max-height: calc(100vh - var(--sp-6, 32px));
  margin: auto;
  background: var(--panel, #fff);
  box-shadow: var(--elev-modal, 0 16px 60px rgba(15, 39, 66, .22));
  color: var(--text);
  font-family: var(--eds-font-ui, 'Inter', sans-serif);
  z-index: var(--z-modal, 1000);
  overflow: hidden;
  flex-direction: column;
  /* CRÍTICO: NÃO declarar `display` aqui. O user agent aplica
     `display: none` em <dialog> fechado e `display: block` em [open].
     Sobrescrever na regra base força o modal a renderizar mesmo
     fechado (bug N.2.5 corrigido em 2026-05-07). */
}
dialog.eds-modal[open] {
  display: flex;  /* só quando aberto, sobrescreve `block` UA por flex column */
}
dialog.eds-modal::backdrop {
  background: rgba(15, 39, 66, .55);
  backdrop-filter: blur(2px);
}

/* Variant drawer — slide-in à direita, full height. Cravado em P.3.Polish (bug #41)
   pra migrar o drawer de cobertura (operacoes.js) sem perder a UX original. */
dialog.eds-modal.eds-modal--drawer {
  margin: 0 0 0 auto;
  max-height: 100vh;
  height: 100vh;
  border-radius: 12px 0 0 12px;
  width: min(var(--modal-max-w, 600px), 95vw);
}

/* Base de botão Eixo OS. Variants: .primary (azul oficial), .danger (laranja
   destrutivo). Para botões totalmente neutros use .btn-naked. Cravada em
   P.4.Polish (bug #43): preenche o gap deixado por classe órfã sem definição
   CSS (usada em ia.js / index.html sem fallback consistente). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1, 6px);
  font-family: var(--eds-font-ui, sans-serif);
  font-size: var(--fs-sm, 13px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text, #1C1E22);
  background: var(--panel, #fff);
  border: 1px solid var(--border, #eef0f3);
  border-radius: var(--eds-radius, 8px);
  padding: var(--sp-2, 8px) var(--sp-3, 14px);
  min-height: var(--tap, 38px);  /* A11Y-TOUCH: alvo ≥44px em toque, 38px desktop */
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover {
  background: var(--surface-2, #f6f7f9);
  border-color: var(--baseline, #d4d8dd);
}
.btn:focus-visible {
  outline: 2px solid var(--eds-azul, #0F2742);
  outline-offset: 2px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn.primary {
  background: var(--eds-azul, #0F2742);
  color: #fff;
  border-color: var(--eds-azul, #0F2742);
  font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.1); }

/* Botão destrutivo (apagar/baixar/limpar). Usado no confirmDialog danger=true
   e em quaisquer ações sem undo. Cravado em P.3.Polish (bug #40). */
.btn.danger {
  background: var(--eds-crit, #FF6A2A);
  color: #fff;
  border-color: var(--eds-crit, #FF6A2A);
  font-weight: 600;
}
.btn.danger:hover { filter: brightness(1.05); }

/* Mensagens dentro do confirmDialog — preserva quebras de \n da mensagem original
   sem inflar com classes ad-hoc. */
.eds-modal__body .eds-modal__msg {
  margin: 0;
  font-size: var(--fs-md, 13px);
  line-height: 1.5;
  color: var(--text, #1C1E22);
}
.eds-modal__body .eds-modal__msg + .eds-modal__msg { margin-top: 6px; }

.eds-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4, 16px) var(--sp-5, 24px);
  border-bottom: 1px solid var(--border, #eef0f3);
  background: var(--panel, #fff);
  flex-shrink: 0;
}
.eds-modal__head .eds-modal__head-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1, 4px);
  min-width: 0;
}
.eds-modal__title {
  margin: 0;
  font-size: var(--fs-lg, 16px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text, #1C1E22);
}
.eds-modal__sub {
  font-size: var(--fs-sm, 12px);
  color: var(--text-muted, #8A9299);
}
.eds-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap, 38px);   /* A11Y-TOUCH: × vira alvo clicável real */
  min-height: var(--tap, 38px);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted, #8A9299);
  padding: var(--sp-1, 4px) var(--sp-2, 8px);
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.eds-modal__close:hover {
  background: var(--border, #eef0f3);
  color: var(--text, #1C1E22);
}

.eds-modal__body {
  padding: var(--sp-5, 24px);
  overflow-y: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  min-height: 0;
}
.eds-modal__body--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3, 12px) var(--sp-4, 16px);
}
.eds-modal__body--grid .full {
  grid-column: 1 / -1;
}

.eds-modal__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: var(--sp-3, 12px) var(--sp-5, 24px);
  border-top: 1px solid var(--border, #eef0f3);
  background: var(--panel, #fff);
  flex-shrink: 0;
}
.eds-modal__foot--split {
  justify-content: space-between;
}

/* Aviso contextual dentro do modal (banner inline persistente).
   Usar para "leia antes de prosseguir" em vez de toast.info. */
.eds-modal__notice {
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  background: var(--eds-warn-soft, rgba(255, 200, 70, .18));
  border-left: 3px solid var(--eds-warn, #FFC846);
  border-radius: 4px;
  font-size: var(--fs-md, 13px);
  color: var(--text, #1C1E22);
  line-height: 1.45;
}
.eds-modal__notice--info {
  background: var(--eds-info-soft, var(--eixo-azul-soft));
  border-left-color: var(--eds-info, var(--eixo-azul));
}
.eds-modal__notice--crit {
  background: var(--eds-crit-soft, rgba(255, 106, 42, .14));
  border-left-color: var(--eds-crit, #FF6A2A);
}

/* Onda N.2.5 fase 7: campos auto-preenchidos por defaults externos
   (ex.: Banlek auto-fill no modal de evento). Outline tracejado em cor
   accent-soft pra Fred saber visualmente quais campos vieram automáticos
   e revisar antes de salvar. Some quando o user edita o campo. */
.eds-input--prefilled,
input.eds-input--prefilled,
select.eds-input--prefilled,
textarea.eds-input--prefilled {
  outline: 2px dashed var(--accent-soft, #E8EDF2);
  outline-offset: 1px;
}

/* Mobile: modal vira full-bleed com margem mínima. */
@media (max-width: 640px) {
  dialog.eds-modal {
    width: calc(100vw - var(--sp-3, 12px));
    max-height: calc(100vh - var(--sp-3, 12px));
    border-radius: 8px;
  }
  .eds-modal__head { padding: var(--sp-3, 12px) var(--sp-4, 16px); }
  .eds-modal__body { padding: var(--sp-4, 16px); }
  .eds-modal__foot { padding: var(--sp-3, 12px) var(--sp-4, 16px); }
  .eds-modal__body--grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Onda N.2.5 — Reset de <button> "naked" e utility classes.
   Botões sem classe ficam neutros (resolve sub-abas Lançamentos/
   Recorrências aparecendo com border outset estilo Win95).
   ============================================================ */
button.btn-naked,
.eds-tabs button:not([class]),
#fin-subaba button:not([class*="seg"]),
#fin-tipo-tabs button:not([class*="seg"]) {
  background: transparent;
  border: none;
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Garante que .btn[hidden] ou .fin-btn-acao[hidden] respeitem o atributo —
   bug pré-existente em que `display: inline-flex` da regra principal
   sobrescrevia o UA `[hidden] { display: none }`. */
.btn[hidden],
.fin-btn-acao[hidden],
.btn-naked[hidden],
button[hidden] {
  display: none !important;
}

/* ============================================================
   Onda N.2.5 — Regra global para `.seg-pills` (pílulas segmentadas).
   Antes: cada modal escopava por ID (#fin-subaba .seg, #fin-form-tipo .seg…)
   e novos modais como #fin-transf-tipo ficavam sem regra `.active`.
   Agora: regra base global, escopo por ID só pra customização.
   ============================================================ */
.seg-pills {
  display: inline-flex;
  gap: 0;
  background: var(--border, #eef0f3);
  padding: 3px;
  border-radius: 8px;
}
.seg-pills .seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap, 38px);  /* A11Y-TOUCH: pílula segmentada vira alvo ≥44px em toque */
  background: transparent;
  border: none;
  padding: var(--sp-1, 4px) var(--sp-3, 12px);
  font: inherit;
  font-size: var(--fs-md, 13px);
  font-weight: 500;
  color: var(--text-muted, #8A9299);
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.seg-pills .seg:hover:not(.active) {
  color: var(--text, #1C1E22);
}
.seg-pills .seg.active {
  background: var(--panel, #fff);
  color: var(--accent, #0F2742);
  font-weight: 600;
  box-shadow: var(--elev-1, 0 1px 2px rgba(15, 39, 66, .04));
}

/* ============================================================
   Onda N.2.5 — Header responsivo da aba Financeiro: o trio de botões
   (Novo lançamento + Nova transferência + Nova recorrência) estourava
   1280px de horizontal. Solução: wrap do container quando aperta.
   ============================================================ */
#tabpanel-financeiro > .section-title {
  flex-wrap: wrap;
}
#tabpanel-financeiro > .section-title > div:nth-child(2) {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ============================================================
   Onda N.17.A.2 — Dashboard de evento (estilo MEEventos)
   ----------------------------------------------------------
   Layout job-centered: coluna lateral com síntese do evento +
   grid de cards de seção. Cada card é um portal pra uma sub-aba
   (campos, equipe, vendas, cobertura, etc) mostrando badge de
   status atual ("0 freelancers", "R$ 850 vendas", "vendendo").
   Substitui a entrada por sub-abas horizontais como vista inicial.
   ============================================================ */
.ev-dashboard {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-4, 16px);
  margin-top: var(--sp-3, 12px);
}
/* `display: grid` na regra acima sobrescreve o `display: none` que o
   atributo HTML `[hidden]` aplica por padrão — sem este reset, hidden
   não esconde o elemento. */
.ev-dashboard[hidden] {
  display: none;
}
@media (max-width: 900px) {
  .ev-dashboard {
    grid-template-columns: 1fr;  /* empilha em telas estreitas */
  }
}

/* Card-síntese (coluna esquerda) — sempre visível, contexto do evento */
.ev-sidebar-evento {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #eef0f3);
  border-radius: 8px;
  padding: var(--sp-4, 16px);
  align-self: start;  /* não estica vertical com cards */
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  font-size: var(--fs-sm, 12px);
}
.ev-sidebar-evento__cabeca {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3, 12px);
  padding-bottom: var(--sp-3, 12px);
  border-bottom: 1px solid var(--border, #eef0f3);
}
.ev-sidebar-evento__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--eds-info-soft, #e8eef6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.ev-sidebar-evento__titulo {
  font-size: var(--fs-base, 14px);
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.25;
  color: var(--text, #1C1E22);
}
.ev-sidebar-evento__esporte {
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted, #8A9299);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.ev-sidebar-evento__linha {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.ev-sidebar-evento__icone {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  color: var(--text-muted, #8A9299);
}
.ev-sidebar-evento__numero {
  font-family: monospace;
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted, #8A9299);
  text-align: center;
  padding-top: var(--sp-2, 8px);
  border-top: 1px solid var(--border, #eef0f3);
}
.ev-sidebar-evento__acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ev-sidebar-evento__acoes .btn {
  flex: 1;
  font-size: var(--fs-xs, 11px);
  padding: 6px 8px;
}

/* Coluna direita — alertas + grid */
.ev-dashboard__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
}
.ev-alertas {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ev-alertas:empty {
  display: none;
}

/* Grid de cards (3 colunas em desktop, 2 em tablet, 1 em mobile) */
.ev-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3, 12px);
}
@media (max-width: 1200px) {
  .ev-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .ev-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Card de seção — ícone grande em destaque + título + badge */
.ev-card-secao {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #eef0f3);
  border-radius: 8px;
  padding: var(--sp-4, 16px) var(--sp-3, 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2, 8px);
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: var(--text, #1C1E22);
  transition: border-color .15s, box-shadow .15s, transform .12s;
  min-height: 140px;
  justify-content: center;
}
.ev-card-secao:hover {
  border-color: var(--accent, #0F2742);
  box-shadow: var(--elev-1, 0 2px 8px rgba(15, 39, 66, .08));
  transform: translateY(-1px);
}
.ev-card-secao__icon {
  font-size: 36px;
  line-height: 1;
  color: var(--accent, #0F2742);
  margin-bottom: 4px;
}
.ev-card-secao__titulo {
  font-size: var(--fs-base, 14px);
  font-weight: 600;
  margin: 0;
  color: var(--text, #1C1E22);
}
.ev-card-secao__badge {
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted, #8A9299);
  min-height: 16px;  /* reserva espaço pra evitar layout shift quando badge é vazio */
}
.ev-card-secao__badge--info  { color: var(--eds-info,  #0F2742); }
.ev-card-secao__badge--warn  { color: var(--eds-warn,  #FFC846); }
.ev-card-secao__badge--crit  { color: var(--eds-crit,  #FF6A2A); }
.ev-card-secao__badge--ok    { color: var(--eds-ok,    #2D9A6B); }

/* ============================================================
   Onda N.17.B — Catálogo de imagens da cobertura
   ----------------------------------------------------------
   Dropzone para drag-drop + grid de thumbnails 4 colunas com
   ações inline (favoritar, deletar). Identidade Eixo aplicada.
   ============================================================ */
.ef-cat-dropzone {
  border: 2px dashed var(--border, #d0d4da);
  border-radius: 8px;
  padding: var(--sp-4, 16px);
  text-align: center;
  cursor: pointer;
  background: var(--bg-canvas, #fafbfc);
  transition: border-color .15s, background .15s;
  margin-bottom: var(--sp-3, 12px);
}
.ef-cat-dropzone:hover,
.ef-cat-dropzone:focus-visible {
  border-color: var(--accent, #0F2742);
  background: var(--eds-info-soft);
  outline: none;
}
.ef-cat-dropzone.ef-cat-dropzone--active {
  border-color: var(--accent, #0F2742);
  background: var(--eds-info-soft);
  border-style: solid;
}
.ef-cat-dropzone__icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 6px;
}
.ef-cat-dropzone__label {
  font-size: var(--fs-sm, 12px);
  color: var(--text-muted, #8A9299);
  line-height: 1.4;
}

.ef-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
@media (max-width: 700px) {
  .ef-cat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ef-cat-grid:empty {
  display: none;
}
.ef-cat-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-canvas, #fafbfc);
  border: 1px solid var(--border, #eef0f3);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
.ef-cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ef-cat-thumb--favorita {
  border-color: var(--eds-warn, #B97800);
  box-shadow: 0 0 0 2px var(--eds-warn-soft, rgba(255, 200, 70, .25)) inset;
}
/* N.21: thumb com classificação IA salva */
.ef-cat-thumb--classificada {
  border-color: var(--accent, #2563eb);
}
.ef-cat-thumb__tag {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: var(--fs-xs, 11px);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  font-weight: 600;
}
.ef-cat-thumb__acoes {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .12s;
}
.ef-cat-thumb:hover .ef-cat-thumb__acoes,
.ef-cat-thumb:focus-within .ef-cat-thumb__acoes {
  opacity: 1;
}
.ef-cat-thumb__btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--border, #eef0f3);
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.ef-cat-thumb__btn:hover {
  background: var(--panel, #fff);
}
.ef-cat-thumb__btn--ativa {
  background: var(--eds-warn, #B97800);
  color: #fff;
  border-color: var(--eds-warn, #B97800);
}
.ef-cat-thumb__btn--delete:hover {
  background: var(--eds-crit, #B00020);
  color: #fff;
  border-color: var(--eds-crit, #B00020);
}
/* Lightbox / preview em tamanho grande ao clicar na thumb.
   Família B (`<dialog class="eds-modal">`) com overrides pra exibir
   só a imagem (sem head/body/foot do modal padrão). */
dialog.eds-modal.ef-cat-lightbox {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 95vw;
  max-height: 95vh;
  overflow: visible;
  cursor: zoom-out;
}
dialog.eds-modal.ef-cat-lightbox::backdrop {
  background: rgba(15, 39, 66, .85);
}
.ef-cat-lightbox img {
  max-width: 100%;
  max-height: 95vh;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  display: block;
}

/* ============================================================
   Onda N.17.C — IA embarcada (botões de sugestão no drawer)
   ----------------------------------------------------------
   Grid 2 cols de botões IA com selo de modelo (Haiku/Sonnet).
   Modal de prompt editável segue família B canônica.
   ============================================================ */
.ef-ia-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
@media (max-width: 600px) {
  .ef-ia-grid { grid-template-columns: 1fr; }
}
.ef-ia-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panel, #fff);
  border: 1px solid var(--border, #eef0f3);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text, #1C1E22);
  transition: border-color .15s, box-shadow .15s;
}
.ef-ia-btn:hover {
  border-color: var(--accent, #0F2742);
  box-shadow: var(--elev-1, 0 1px 2px rgba(15, 39, 66, .04));
}
.ef-ia-btn__icon {
  font-size: 20px;
  line-height: 1;
}
.ef-ia-btn__body {
  flex: 1;
  min-width: 0;
}
.ef-ia-btn__titulo {
  font-size: var(--fs-sm, 12px);
  font-weight: 600;
  display: block;
}
.ef-ia-btn__meta {
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted, #8A9299);
}
.ef-ia-btn__selo {
  font-size: var(--fs-xs, 11px);
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--border, #eef0f3);
  color: var(--text-muted, #8A9299);
}
.ef-ia-btn__selo--sonnet {
  color: var(--eds-info, #2563EB);
  border-color: var(--eds-info-soft);
  background: var(--eds-info-soft);
}
.ef-ia-btn__selo--haiku {
  color: var(--eds-ok, #1F7A1F);
  border-color: var(--eds-ok-soft);
  background: var(--eds-ok-soft);
}

/* Modal de IA — textarea editável + área de resultado */
.ef-ia-modal__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
}
.ef-ia-modal__prompt {
  font-family: var(--eds-font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--fs-sm, 12px);
  width: 100%;
  min-height: 220px;
  padding: 8px;
  border: 1px solid var(--border, #eef0f3);
  border-radius: 4px;
  resize: vertical;
}
.ef-ia-modal__params {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: var(--fs-sm, 12px);
}
.ef-ia-modal__resultado {
  background: var(--bg-canvas, #fafbfc);
  border: 1px solid var(--border, #eef0f3);
  border-radius: 4px;
  padding: 10px;
  max-height: 320px;
  overflow: auto;
  font-size: var(--fs-sm, 12px);
}
.ef-ia-modal__caption {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}
.ef-ia-modal__hashtags {
  color: var(--eds-info, #2563EB);
  font-size: var(--fs-sm, 12px);
  margin-top: 8px;
}
.ef-ia-modal__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted, #8A9299);
  padding: 2px 8px;
  border: 1px solid var(--border, #eef0f3);
  border-radius: 10px;
}

/* ============================================================
   Onda N.17.D — Checklist visual + flags de skip
   ============================================================ */
.ef-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ef-checklist__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: var(--fs-sm, 12px);
  background: var(--bg-canvas, #fafbfc);
  border: 1px solid var(--border, #eef0f3);
}
.ef-checklist__item--feita {
  color: var(--text-muted, #8A9299);
}
.ef-checklist__item--feita .ef-checklist__icone {
  color: var(--eds-ok, #1F7A1F);
  font-weight: bold;
}
.ef-checklist__item--proxima {
  background: var(--eds-info-soft);
  border-color: var(--eds-info);
}
.ef-checklist__item--proxima .ef-checklist__icone {
  color: var(--eds-info, #2563EB);
}
.ef-checklist__item--proxima .ef-checklist__label {
  font-weight: 600;
}
.ef-checklist__item--pendente {
  color: var(--text-muted, #8A9299);
}
.ef-checklist__icone {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.ef-checklist__label {
  flex: 1;
}
.ef-checklist__cta {
  font-size: var(--fs-xs, 11px);
  padding: 2px 8px;
}
.ef-checklist__hint {
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted, #8A9299);
  font-style: italic;
}

.ef-flags-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ef-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border, #eef0f3);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-sm, 12px);
  background: var(--panel, #fff);
  transition: background .15s;
}
.ef-flag:hover {
  background: var(--bg-canvas, #fafbfc);
}
.ef-flag input[type="checkbox"]:checked + span {
  color: var(--eds-warn, #B97800);
  font-weight: 600;
}

/* ============================================================
   Onda N.17.D — KPIs strip do dashboard de evento
   ============================================================ */
.ev-kpis-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-2, 8px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  background: var(--panel, #fff);
  border: 1px solid var(--border, #eef0f3);
  border-radius: 8px;
  margin-bottom: var(--sp-3, 12px);
}
.ev-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  border-right: 1px solid var(--border, #eef0f3);
}
.ev-kpi:last-child { border-right: none; }
@media (max-width: 700px) {
  .ev-kpi { border-right: none; }
}
.ev-kpi__valor {
  font-size: var(--fs-lg, 16px);
  font-weight: 600;
  color: var(--accent, #0F2742);
  line-height: 1.2;
}
.ev-kpi__valor--ok    { color: var(--eds-ok,    #2D9A6B); }
.ev-kpi__valor--warn  { color: var(--eds-warn,  #FFC846); }
.ev-kpi__valor--crit  { color: var(--eds-crit,  #FF6A2A); }
.ev-kpi__label {
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted, #8A9299);
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* ============================================================
   Refator Performance (2026-05-17): hero + chips compactos.
   Substitui os 8 cards iguais que estavam achatando a hierarquia.
   ============================================================ */
.perf-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-3, 12px);
}
@media (max-width: 700px) { .perf-hero { grid-template-columns: 1fr; } }
.perf-hero__saldo,
.perf-hero__margem {
  padding: var(--sp-4, 16px) var(--sp-4, 16px);
  background: var(--panel, #fff);
  border: 1px solid var(--border, #eef0f3);
  border-radius: 8px;
}
.perf-hero__label {
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted, #8A9299);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}
.perf-hero__valor {
  font-size: 28px;
  font-weight: 600;
  color: var(--accent, #0F2742);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.perf-hero__valor-md {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--accent, #0F2742);
  font-variant-numeric: tabular-nums;
}
.perf-hero__margem--ok .perf-hero__valor-md { color: var(--eds-ok, #2D9A6B); }
.perf-hero__margem--warn .perf-hero__valor-md { color: var(--eds-warn, #FFC846); }
.perf-hero__meta {
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted, #8A9299);
  margin-top: 4px;
}

.perf-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-2, 8px);
}
.perf-kpi-chip {
  padding: 8px 10px;
  background: var(--bg-canvas, #fafbfc);
  border: 1px solid var(--border, #eef0f3);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.perf-kpi-chip span {
  font-size: var(--fs-xs, 11px);
  color: var(--text-muted, #8A9299);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.perf-kpi-chip strong {
  font-size: var(--fs-base, 14px);
  color: var(--accent, #0F2742);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Curva de eficiência — layout 2 colunas (gráfico + leitura)
   2026-05-28: gráfico Plotly à esquerda, painel de leitura à
   direita com status atual, tendência D-1 vs início, próximo
   gatilho de saturação e ranking de campanhas por ROAS.
   ============================================================ */
.curva-trafego-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-4, 16px);
  align-items: start;
}
@media (max-width: 880px) {
  .curva-trafego-layout {
    grid-template-columns: 1fr;
  }
}
.curva-leitura {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  font-size: var(--fs-sm, 13px);
}
.curva-leitura-bloco {
  padding-top: var(--sp-3, 12px);
  border-top: 1px solid var(--border, #eef0f3);
}
.curva-leitura-bloco:first-child {
  padding-top: 0;
  border-top: none;
}
.curva-leitura-bloco h4 {
  margin: 0 0 var(--sp-2, 8px);
  font-size: var(--fs-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted, #8A9299);
}
.curva-leitura-bloco ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.curva-leitura-bloco li {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.curva-leitura-bloco .meta {
  color: var(--text-muted, #8A9299);
  font-size: var(--fs-xs, 11px);
}
.curva-leitura-empty {
  color: var(--text-muted, #8A9299);
  font-size: var(--fs-xs, 11px);
  font-style: italic;
}

/* ============================================================
   Aba Planejamento — meta-roadmap do Eixo OS (Onda P.1.B)
   Cards de ondas com ICE + prazo + status, filtros chip group,
   estados cravados via tokens canônicos (sem hex em JS).
   ============================================================ */
.plan-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.plan-title {
  margin: 0 0 var(--sp-1) 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.plan-subtitle {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-muted, var(--eds-muted));
  max-width: 720px;
  line-height: 1.5;
}
.plan-subtitle code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  padding: 1px 6px;
  background: var(--baseline-soft);
  border-radius: 3px;
}
.plan-actions { display: flex; gap: var(--sp-2); }

/* Filtros */
.plan-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
}
.plan-filtro-grupo { display: flex; flex-direction: column; gap: var(--sp-1); }
.plan-filtro-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted, var(--eds-muted));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.plan-chip-group { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.plan-chip {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-muted, var(--eds-muted));
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.3;
  transition: background .12s, color .12s, border-color .12s;
}
.plan-chip:hover { background: var(--baseline-soft); color: var(--text); }
.plan-chip--active {
  background: var(--accent);
  color: var(--panel);
  border-color: var(--accent);
}
.plan-chip:focus-visible {
  outline: 2px solid var(--eds-info);
  outline-offset: 2px;
}

/* Lista de cards */
.plan-lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.plan-lista-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.plan-loading, .plan-error, .plan-vazio {
  padding: var(--sp-5);
  text-align: center;
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--eds-radius);
  color: var(--text-muted, var(--eds-muted));
}
.plan-error { color: var(--eds-crit); border-color: var(--eds-crit); }
.plan-vazio { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }

/* Card de onda */
.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  border-left: 4px solid var(--baseline);
  transition: box-shadow .15s;
}
.plan-card:hover { box-shadow: 0 2px 12px rgba(15, 39, 66, .06); }
.plan-card[data-status="em_andamento"] { border-left-color: var(--eds-info); }
.plan-card[data-status="bloqueada"]   { border-left-color: var(--eixo-por-do-sol); }
.plan-card[data-status="concluida"]   { border-left-color: var(--positive); opacity: .85; }
.plan-card[data-status="cancelada"]   { border-left-color: var(--text-muted); opacity: .55; }

.plan-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.plan-card__id { display: inline-flex; align-items: center; gap: var(--sp-2); }
.plan-card__codigo {
  font-family: ui-monospace, monospace;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 2px 8px;
  background: var(--baseline-soft);
  border-radius: 4px;
  color: var(--text);
}
.plan-card__badges {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.plan-card__titulo {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.plan-card__desc {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-muted, var(--eds-muted));
  line-height: 1.5;
}
.plan-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.plan-card__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted, var(--eds-muted));
  flex-wrap: wrap;
}

/* Badges */
.plan-status, .plan-cat, .plan-ice, .plan-prazo {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
}
.plan-status--planejada    { background: var(--baseline-soft); color: var(--text-muted); }
.plan-status--em_andamento { background: var(--eds-info-soft); color: var(--eds-info); }
.plan-status--bloqueada    { background: rgba(255, 106, 42, 0.12); color: var(--eixo-por-do-sol); }
.plan-status--concluida    { background: rgba(45, 154, 107, 0.12); color: var(--positive); }
.plan-status--cancelada    { background: var(--baseline-soft); color: var(--text-muted); text-decoration: line-through; }

.plan-cat {
  background: var(--accent-soft);
  color: var(--accent);
  text-transform: lowercase;
}

.plan-ice {
  background: var(--baseline-soft);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.plan-ice--vazio { color: var(--text-muted); }

.plan-prazo { background: var(--baseline-soft); color: var(--text-muted); }
.plan-prazo--folga   { background: rgba(45, 154, 107, 0.10); color: var(--positive); }
.plan-prazo--proximo { background: rgba(255, 200, 70, 0.18); color: var(--text); }
.plan-prazo--vencido { background: rgba(220, 38, 38, 0.10); color: var(--negative); }

.plan-bloqueio {
  display: inline-block;
  font-size: var(--fs-xs);
  padding: 4px 8px;
  background: rgba(255, 106, 42, 0.08);
  color: var(--eixo-por-do-sol);
  border-radius: 4px;
  margin-top: var(--sp-1);
}

.plan-suces {
  font-family: ui-monospace, monospace;
  font-size: var(--fs-xs);
}

.plan-tarefas-info { font-variant-numeric: tabular-nums; }
.plan-tarefas-info--vazio { font-style: italic; opacity: .7; }

/* Barra de progresso */
.plan-progresso {
  position: relative;
  height: 8px;
  background: var(--baseline-soft);
  border-radius: 999px;
  overflow: hidden;
}
.plan-progresso__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--eds-info), var(--accent));
  transition: width .3s ease;
}
.plan-progresso__pct {
  position: absolute;
  right: 6px;
  top: -16px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.plan-card__actions { display: inline-flex; gap: var(--sp-1); }

/* ============================================================
   Kanban da aba Planejamento (Onda P.1.C)
   4 colunas baseadas em status semântico (planejada · em_andamento ·
   bloqueada · concluida). Drag-drop entre colunas dispara PATCH /api/.../status.
   Card compacto: header (código + ICE), título, badges, checklist inline,
   actions hover. P.1.C.2 vai trazer colunas customizáveis pelo usuário.
   ============================================================ */

.plan-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap: var(--sp-3);
  align-items: start;
  /* Permite scroll horizontal em telas menores sem quebrar a coluna */
  overflow-x: auto;
  padding-bottom: var(--sp-2);
}

.plan-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--baseline-soft);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  padding: var(--sp-2);
  min-height: 320px;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
}
.plan-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-1) var(--sp-2);
  position: sticky;
  top: 0;
  background: var(--baseline-soft);
  z-index: 1;
  border-bottom: 2px solid transparent;
}
.plan-col__titulo {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.plan-col__count {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}

/* Cores cravadas por status — borda topo + dot no header */
.plan-col[data-status="planejada"]    .plan-col__head { border-bottom-color: var(--baseline); }
.plan-col[data-status="em_andamento"] .plan-col__head { border-bottom-color: var(--eds-info); }
.plan-col[data-status="bloqueada"]    .plan-col__head { border-bottom-color: var(--eixo-por-do-sol); }
.plan-col[data-status="concluida"]    .plan-col__head { border-bottom-color: var(--positive); }

/* Drop zone highlight quando arrastando */
.plan-col--drop-target {
  background: var(--accent-soft);
  border-color: var(--accent);
  border-style: dashed;
}

/* Card compacto (Kanban) — sobrescreve as regras do card-grande
   (plan-card legado fica disponível pra views futuras, mas no kanban usamos plan-kcard) */
.plan-kcard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
  border-left: 3px solid var(--baseline);
  cursor: grab;
  transition: box-shadow .12s, transform .08s;
  user-select: none;
}
.plan-kcard:hover { box-shadow: 0 2px 10px rgba(15, 39, 66, .06); }
.plan-kcard:active { cursor: grabbing; }
.plan-kcard--dragging {
  opacity: 0.4;
  transform: rotate(1deg);
}
.plan-kcard[data-status="em_andamento"] { border-left-color: var(--eds-info); }
.plan-kcard[data-status="bloqueada"]    { border-left-color: var(--eixo-por-do-sol); }
.plan-kcard[data-status="concluida"]    { border-left-color: var(--positive); opacity: .85; }
.plan-kcard[data-status="cancelada"]    { display: none; } /* canceladas escondidas — UI ainda permite editar via filtro */

.plan-kcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
}
.plan-kcard__codigo {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  background: var(--baseline-soft);
  border-radius: 3px;
  color: var(--text);
}
.plan-kcard__cat {
  font-size: 10px;
  font-weight: 600;
  text-transform: lowercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 999px;
}
.plan-kcard__ice {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.plan-kcard__titulo {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.plan-kcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  font-size: 10px;
  color: var(--text-muted);
  align-items: center;
}
.plan-kcard__bloqueio {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255, 106, 42, 0.08);
  color: var(--eixo-por-do-sol);
  border-radius: 3px;
}

/* Checklist inline */
.plan-kcard__tarefas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
  border-top: 1px dashed var(--border);
}
.plan-tarefa {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  font-size: 11px;
  color: var(--text);
  line-height: 1.4;
  padding: 2px 0;
  cursor: pointer;
}
.plan-tarefa:hover { background: var(--baseline-soft); border-radius: 3px; }
.plan-tarefa__check {
  margin: 1px 0 0 0;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  accent-color: var(--accent);
  cursor: pointer;
}
.plan-tarefa[data-status="concluida"] .plan-tarefa__label {
  text-decoration: line-through;
  color: var(--text-muted);
}
.plan-tarefa__label {
  flex: 1;
  word-break: break-word;
}

.plan-kcard__add-tarefa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 3px;
  padding: 3px 6px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 2px;
}
.plan-kcard__add-tarefa:hover { background: var(--baseline-soft); color: var(--text); }
.plan-kcard__add-tarefa-input {
  width: 100%;
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  font-family: inherit;
}

.plan-kcard__actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: var(--sp-1);
  opacity: 0;
  transition: opacity .15s;
}
.plan-kcard:hover .plan-kcard__actions { opacity: 1; }
.plan-kcard__action {
  font-size: 10px;
  padding: 2px 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
}
.plan-kcard__action:hover { background: var(--baseline-soft); color: var(--text); }

/* ============================================================
   Kanban de tarefas operacionais (P.2.A) — escopo .tk-board
   Reusa .plan-kanban/.plan-col/.plan-kcard, mas com 4 status próprios
   (aberta · em_andamento · concluida · cancelada). Diferente do quadro de
   ondas, aqui "cancelada" é uma coluna visível (não escondida), e os cards
   são clicáveis (abrem modal de detalhe).
   ============================================================ */
.tk-board .plan-kcard { cursor: pointer; }
.tk-board .plan-kcard[data-status="aberta"]    { border-left-color: var(--baseline); }
.tk-board .plan-kcard[data-status="cancelada"] {
  display: flex;            /* desfaz o display:none herdado do quadro de ondas */
  border-left-color: var(--text-muted);
  opacity: .6;
}
.tk-board .plan-kcard[data-status="cancelada"] .plan-kcard__titulo {
  text-decoration: line-through;
}
.tk-board .plan-col[data-status="aberta"]    .plan-col__head { border-bottom-color: var(--baseline); }
.tk-board .plan-col[data-status="cancelada"] .plan-col__head { border-bottom-color: var(--text-muted); }

/* Card clicável/focável (drag-drop é só mouse; teclado abre o modal) */
.tk-board .plan-kcard:focus-visible {
  outline: 2px solid var(--eds-info);
  outline-offset: 2px;
}
/* Meta (responsável · prazo · horas) sobe pra 11px — 10px do quadro de ondas
   fica abaixo do piso de legibilidade do design system. */
.tk-board .plan-kcard__meta { font-size: var(--fs-xs); }
.tk-board .tk-meta-vazio { opacity: .6; }

/* Pílula de prioridade — cor por token, sem hex inline no JS */
.tk-board .tk-prio {
  font-size: 10px;
  font-weight: 600;
  text-transform: lowercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--text);
}
.tk-board .tk-prio--baixa   { color: var(--text-muted); }
.tk-board .tk-prio--alta    { color: var(--eds-warn); }
.tk-board .tk-prio--urgente { color: var(--eds-crit); }

/* Botão ▶/⏹ do timer no card (P.2.A). Empurrado pra direita do .plan-kcard__meta
   (que é flex). Discreto até hover; ⏹ ativo ganha cor de marca pra sinalizar
   "rodando aqui". */
.tk-board .tk-timer-btn {
  position: relative;       /* ancora a hit-area ::after */
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  padding: 0; font-size: 11px; line-height: 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
/* Expande o alvo de toque pra ~40px (piso de a11y do projeto) sem inflar o
   visual de 24px no meta compacto do card. */
.tk-board .tk-timer-btn::after { content: ''; position: absolute; inset: -8px; }
.tk-board .tk-timer-btn:hover {
  background: var(--eds-azul); color: var(--eixo-branco);
  border-color: var(--eds-azul);
}
.tk-board .tk-timer-btn:focus-visible {
  outline: 2px solid var(--eds-info); outline-offset: 2px;
}
.tk-board .tk-timer-btn--on {
  background: var(--eds-azul); color: var(--eixo-branco);
  border-color: var(--eds-azul);
}

/* ========================= Funil GA (Onda N.26) ========================= */
.funil-row {
  display: grid;
  grid-template-columns: 160px 1fr 100px;
  align-items: center;
  gap: 12px;
}
.funil-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.funil-bar-wrap {
  background: var(--baseline-soft, rgba(91, 141, 239, .12));
  border-radius: 4px;
  height: 22px;
  overflow: hidden;
}
.funil-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
}
.funil-num {
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.funil-conv {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  padding-left: 168px;  /* alinha com a barra */
}

/* DASH.PREMIUM — bloco Funil GA4 (COO): grid responsivo + tabela Top-5
   legível. Escopado em .coo-funil-* pra não tocar o .funil-* compartilhado
   (eventos.js). */
.coo-funil-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .coo-funil-grid { grid-template-columns: 1fr; gap: 24px; }
}
.coo-funil-h3 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.coo-funil-barras { display: grid; gap: 8px; }
.coo-funil-rodape {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border); font-size: 12px;
}
/* conversão entre etapas: número em destaque (não itálico apagado) */
.coo-funil-grid .funil-conv { font-style: normal; }
.coo-funil-conv-pct { font-weight: 700; color: var(--link); font-variant-numeric: tabular-nums; }

.coo-funil-tabela {
  width: 100%;
  table-layout: fixed;          /* a coluna Evento fica com todo o sobrante */
  border-collapse: collapse;
  font-size: 12px;
}
.coo-funil-tabela th,
.coo-funil-tabela td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--border);
}
.coo-funil-tabela thead th {
  font-weight: 600; color: var(--text-muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  text-align: left;
}
.coo-funil-tabela td.num, .coo-funil-tabela th.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.coo-funil-rank { color: var(--text-muted); opacity: .7; }
.coo-funil-conv strong { color: var(--text); font-weight: 700; }
.coo-funil-nome { overflow: hidden; }
.coo-funil-nome__txt {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500; color: var(--text);
}
.coo-funil-nome__ano { display: block; font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.coo-funil-tabela tr[data-evento-id] { cursor: pointer; transition: background .12s ease; }
.coo-funil-tabela tr[data-evento-id]:hover { background: var(--baseline-soft); }
.coo-funil-tabela tr[data-evento-id]:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }

/* ===== DASH.PREMIUM — Pendências operacionais (COO) ===== */
.coo-pend-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* full-width (DASH.CFO-FIX p/ COO): alertas lado a lado em vez de coluna
   esticada com vazio embaixo. */
.eds-bloco--full .coo-pend-lista {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 8px;
}
/* Agenda full-width: dias fluem em 2 colunas (multicol — desce a col 1
   cronologicamente, depois a col 2), em vez de 1 coluna com dias de 1 evento
   deixando a linha vazia à direita. display:block é obrigatório — multicol
   (columns) é ignorado em display:grid (a base de .coo-agenda-lista). */
@media (min-width: 760px) {
  .eds-bloco--full .coo-agenda-lista {
    display: block; columns: 2; column-gap: 36px;
  }
  .eds-bloco--full .coo-agenda-dia { margin-bottom: 6px; }
}
.coo-agenda-dia { break-inside: avoid; }
.coo-pend-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--eds-radius);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
}
.coo-pend-item--crit { border-left-color: var(--eds-crit); background: color-mix(in srgb, var(--eds-crit) 5%, var(--surface)); }
.coo-pend-item--warn { border-left-color: var(--eds-warn); background: color-mix(in srgb, var(--eds-warn) 6%, var(--surface)); }
.coo-pend-item--ok   { border-left-color: var(--eds-ok); }
.coo-pend-item[data-tab] { cursor: pointer; transition: transform .1s ease, box-shadow .1s ease; }
.coo-pend-item[data-tab]:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(15,23,42,.1); }
.coo-pend-item[data-tab]:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.coo-pend-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.coo-pend-txt strong { font-size: var(--fs-sm); }
.coo-pend-det { font-size: var(--fs-xs); color: var(--text-muted); }
.coo-pend-go { color: var(--text-muted); font-weight: 700; }
.coo-pend-vazio { padding: 16px; color: var(--text-muted); font-size: var(--fs-sm); }

/* ===== DASH.PREMIUM — Agenda 30d (COO) ===== */
.coo-agenda-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.coo-agenda-dia {
  display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start;
  padding: 6px 0; border-top: 1px solid var(--surface-border-subtle, var(--border));
}
.coo-agenda-dia:first-child { border-top: none; }
.coo-agenda-data { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; padding-top: 4px; }
.coo-agenda-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.coo-agenda-item {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.coo-agenda-item--confirmado { border-color: var(--eds-ok); }
.coo-agenda-item--previa { border-style: dashed; }
.coo-agenda-item[data-evento-id] { cursor: pointer; }
.coo-agenda-item[data-evento-id]:hover { background: var(--baseline-soft); }
.coo-agenda-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.coo-agenda-mais { font-size: var(--fs-xs); color: var(--text-muted); align-self: center; }

/* ===== DASH.PREMIUM — Concentração de receita (CEO) ===== */
.ceo-conc { display: grid; gap: 12px; }
.ceo-conc-resumo {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); padding: 10px 12px; border-radius: var(--eds-radius);
  background: var(--surface-2);
}
.ceo-conc-resumo--crit { background: color-mix(in srgb, var(--eds-crit) 8%, var(--surface-2)); }
.ceo-conc-resumo--warn { background: color-mix(in srgb, var(--eds-warn) 8%, var(--surface-2)); }
.ceo-conc-barras { display: grid; gap: 8px; }
.ceo-conc-linha {
  display: grid; grid-template-columns: 110px 1fr 52px 96px; align-items: center; gap: 12px;
  cursor: pointer; padding: 2px 4px; border-radius: var(--eds-radius-sm, 4px);
}
.ceo-conc-linha:hover { background: var(--baseline-soft); }
.ceo-conc-nome { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ceo-conc-track { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.ceo-conc-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.ceo-conc-pct { font-size: var(--fs-sm); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ceo-conc-val { font-size: var(--fs-xs); color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .ceo-conc-linha { grid-template-columns: 90px 1fr 48px; }
  .ceo-conc-val { display: none; }
}

/* Funil comercial (CEO) — Onda COMERCIAL.FUNIL · C.2 */
.ceo-com-cap {
  margin-top: 10px; font-size: var(--fs-sm); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ceo-com-cap__muted { color: var(--text-muted); }
.ceo-com-chart-label {
  margin-top: 12px; font-size: var(--fs-xs); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ceo-com-chart { margin-top: 4px; min-height: 220px; }


/* v53 (Onda N.24): cards da lista de freelancers (tab Freelancers). */
.frl-card { transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.frl-card:hover { border-color: var(--eds-accent); background: var(--eds-bg-elev1); }
.frl-card:focus-visible { outline: 2px solid var(--eds-accent); outline-offset: 2px; }

/* ===================================================================
   SCI.2.A — Painel operacional (command center estilo MeEventos)
   Listas de eventos/tarefas/conversão/metas/aniversários. Identidade Eixo
   (tokens eds-*/CSS vars). Mobile-first.
   =================================================================== */
.comando-kpis { margin-bottom: 16px; }

.comando-lista { display: flex; flex-direction: column; gap: 2px; }
.comando-lista .empty-compact { padding: 16px 4px; }

/* UX.PAINEL-NOVO-EVENTO: header do card com título + botão easy-access alinhados. */
.comando-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.comando-card-head h3 { margin: 0; }

/* Item de evento (Próximos eventos) */
.comando-evento {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 8px; border-radius: var(--eds-radius-sm);
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s ease;
}
.comando-evento:last-child { border-bottom: none; }
.comando-evento:hover { background: var(--bg-soft); }
.comando-evento:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.comando-evento__main { min-width: 0; }
.comando-evento__nome { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comando-evento__meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.comando-evento__right { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.comando-evento__data { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tarefas + contador de atrasadas */
.comando-tarefas__contador {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 13px; font-weight: 600; margin-bottom: 10px;
  padding: 6px 12px; border-radius: 999px;
}
.comando-tarefas__contador .num { font-size: 20px; font-variant-numeric: tabular-nums; }
.comando-tarefas__contador--crit { color: var(--eds-crit); background: var(--eds-crit-soft); }
.comando-tarefas__contador--ok { color: var(--eds-ok); background: var(--eds-ok-soft); }
.comando-tarefas__lista { display: flex; flex-direction: column; gap: 2px; }
.comando-tarefa {
  padding: 8px; border-radius: var(--eds-radius-sm);
  border-bottom: 1px solid var(--border); transition: background .12s ease;
}
.comando-tarefa:last-child { border-bottom: none; }
.comando-tarefa[role="button"] { cursor: pointer; }
.comando-tarefa[role="button"]:hover { background: var(--bg-soft); }
.comando-tarefa:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.comando-tarefa--atrasada { border-left: 3px solid var(--eds-crit); padding-left: 10px; }
.comando-tarefa__titulo { font-weight: 500; color: var(--text); }
.comando-tarefa__meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.comando-tarefa__prazo { font-variant-numeric: tabular-nums; }
.comando-tarefa--atrasada .comando-tarefa__prazo { color: var(--eds-crit); font-weight: 600; }

/* Conversão (álbuns Banlek) */
.comando-conv { padding: 8px 0; }
.comando-conv + .comando-conv { border-top: 1px solid var(--border); }
.comando-conv__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.comando-conv__nome { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comando-conv__pct { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.comando-conv__bar { height: 6px; background: var(--bg-soft); border-radius: 999px; margin: 5px 0; overflow: hidden; }
.comando-conv__fill { height: 100%; background: var(--accent); border-radius: 999px; }
.comando-conv__sub { font-size: 11px; }

/* Metas (KRs do PE) */
.comando-meta { padding: 8px 0; }
.comando-meta + .comando-meta { border-top: 1px solid var(--border); }
.comando-meta__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.comando-meta__label { font-size: 13px; font-weight: 500; color: var(--text); }
.comando-meta__alvo { font-size: 11px; margin-top: 3px; }

/* Informações (aniversários) */
.comando-aniv { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; }
.comando-aniv + .comando-aniv { border-top: 1px solid var(--border); }
.comando-aniv__nome { font-weight: 500; color: var(--text); }
.comando-aniv__quando { font-size: 12px; color: var(--text-muted); }

@media (max-width: 480px) {
  .comando-evento { flex-direction: column; align-items: flex-start; gap: 6px; }
  .comando-evento__right { flex-direction: row; align-items: center; }
}

/* ===================== Agenda (OPS.AGENDA-VIEWER) =====================
   Viewer calendário mês/semana. Cores por status via tokens EDS (sem hex). */
.agenda-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between; margin-bottom: var(--sp-4);
}
.agenda-nav { display: flex; align-items: center; gap: var(--sp-2); }
.agenda-label { font-size: var(--fs-lg); font-weight: 700; }
.agenda-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); flex-basis: 100%; }
.agenda-legend__chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.agenda-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.agenda-dot--confirmado { background: var(--eds-ok); }
.agenda-dot--pendente   { background: var(--eds-warn); }
.agenda-dot--lacuna     { background: var(--eds-crit); }
.agenda-dot--tarefa     { background: var(--eds-accent); }
.agenda-dot--previa     { background: transparent; border: 1.5px dashed var(--eds-muted); }
.agenda-dot--realizado  { background: var(--eds-muted); }

.agenda-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.agenda-weekhead {
  background: var(--bg-soft); padding: var(--sp-2); text-align: center;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}
.agenda-cell {
  background: var(--panel); min-height: 96px; min-width: 0;
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
  display: flex; flex-direction: column; gap: 2px;
}
.agenda-cell--outside { background: var(--bg-soft); }
.agenda-cell--outside .agenda-cell__num { opacity: .55; }
.agenda-cell--today { box-shadow: inset 0 0 0 2px var(--eds-accent); }
.agenda-cell__num { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.agenda-cell--today .agenda-cell__num { color: var(--eds-accent); font-weight: 700; }
.agenda-cell__items { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda-pill {
  font-size: var(--fs-xs); line-height: 1.35;
  padding: 1px var(--sp-1); border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 4px solid var(--eds-muted); background: var(--eds-muted-soft); color: var(--text);
}
.agenda-pill[role="button"] { cursor: pointer; }
.agenda-pill[role="button"]:hover { filter: brightness(1.08); }
.agenda-pill--confirmado { border-left-color: var(--eds-ok);   background: var(--eds-ok-soft); }
.agenda-pill--pendente   { border-left-color: var(--eds-warn); background: var(--eds-warn-soft); }
.agenda-pill--lacuna     { border-left-color: var(--eds-crit); background: var(--eds-crit-soft); }
.agenda-pill--cancelado  { border-left-color: var(--eds-muted); background: var(--eds-muted-soft); }
.agenda-pill--tarefa     { border-left-color: var(--eds-accent); background: var(--eds-info-soft); }
/* Prévia: evento planejado sem operação lançada — contorno tracejado, fundo
   neutro, texto rebaixado. Comunica "ainda não é definitivo". */
.agenda-pill--previa {
  border: 1px dashed var(--eds-muted); border-left: 4px dashed var(--eds-muted);
  background: transparent; color: var(--text-muted);
}
.agenda-pill--previa .agenda-pill__titulo { color: var(--text-muted); }
.agenda-pill--previa .agenda-pill__resumo { font-style: italic; color: var(--text-muted); opacity: .85; }
/* Registro: evento realizado sem operação lançada — sólido rebaixado, sem
   tracejado. Comunica "aconteceu" (consulta retroativa), não "vai acontecer". */
.agenda-pill--realizado { border-left-color: var(--eds-muted); background: var(--eds-muted-soft); color: var(--text-muted); }
.agenda-pill--realizado .agenda-pill__titulo { color: var(--text-muted); }
.agenda-pill--realizado .agenda-pill__resumo { color: var(--text-muted); opacity: .85; }
.agenda-more { font-size: var(--fs-2xs); color: var(--text-muted); padding-left: var(--sp-1); }

/* Pill de evento (modo Eventos): título + resumo da equipe em 2 linhas. */
.agenda-pill:has(.agenda-pill__resumo) { white-space: normal; line-height: 1.25; padding-bottom: 2px; }
.agenda-pill__titulo { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-pill__resumo { display: block; font-size: var(--fs-2xs); font-weight: 400; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }

/* Resumo do roster da equipe (sub-aba Equipe): contagem por status. */
.em-equipe-resumo { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 10px; }
.em-equipe-resumo__item {
  font-size: var(--fs-xs); color: var(--text-muted);
  padding: 2px var(--sp-2); border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border);
}

/* v101/UX: card do roster da aba EQUIPE — componente DS (substitui os inline
   styles antigos do renderConvitesList). Trilha esquerda única: nome + função +
   status + meta, todos com baseline esquerdo; cluster de ações encostado à
   direita via margin-left:auto. */
.em-convite-card {
  display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--eds-radius);
  padding: var(--sp-3); margin-bottom: var(--sp-2);
}
.em-convite-card__main {
  display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0;
}
.em-convite-card__head {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.em-convite-card__nome { font-weight: 600; color: var(--text); }
.em-convite-card__funcao {
  font-size: var(--fs-xs); color: var(--text-muted);
  padding: 1px var(--sp-2); border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border);
}
.em-convite-card__meta { font-size: var(--fs-sm); color: var(--text-muted); }
.em-convite-card__meta-alerta { color: var(--eds-warn); }
.em-convite-card__actions {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-left: auto;
}
.em-convite-card .btn.is-disabled { opacity: .4; pointer-events: none; }
/* Base GLOBAL do ic-btn (botão de ícone EDS) — antes só existia scopada em
   `.em-convite-card`/`.list-row`, deixando ic-btns fora desses contextos (ex.:
   dentro de modais) sem estilo. Esta base vale em qualquer lugar; os contextos
   acima só sobrepõem hover. */
.ic-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap, 38px); min-height: var(--tap, 38px);
  background: none; border: 1px solid var(--border); border-radius: var(--eds-radius-sm);
  padding: 4px var(--sp-2); cursor: pointer; font-size: var(--fs-sm);
  color: var(--text-muted); text-decoration: none;
}
.ic-btn:hover { color: var(--text); border-color: var(--baseline); }
.em-convite-card .ic-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap, 38px); min-height: var(--tap, 38px);
  background: none; border: 1px solid var(--border); border-radius: var(--eds-radius-sm);
  padding: 4px var(--sp-2); cursor: pointer; font-size: var(--fs-sm); color: var(--text-muted);
}

/* linha de documento (modal de documentos assinados) — não é item selecionável */
.doc-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2, 8px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px); border-bottom: 1px solid var(--border);
}
.doc-row:last-child { border-bottom: none; }
.doc-row__acoes { display: flex; gap: 6px; }
/* fix-linha: hover destrutivo (laranja) só no ✕ remover; demais ícones hover neutro. */
.em-convite-card .ic-btn:hover { color: var(--text); border-color: var(--baseline); }
.em-convite-card .ic-btn.cv-remover:hover { color: var(--eds-crit); border-color: var(--eds-crit); }

/* fix-linha: separador entre cluster de ciclo e cluster utilitário */
.em-convite-card__sep {
  align-self: stretch; width: 1px; background: var(--border); margin: 2px var(--sp-1);
}
/* fix-linha: wrapper posicional do kebab ⋯ */
.em-convite-card__menu-wrap { position: relative; display: inline-flex; }
/* fix-linha: menu suspenso de ações secundárias (espelha .eds-action-banner__menu) */
.em-convite-card__menu {
  position: absolute; top: 100%; right: 0; margin-top: var(--sp-1); min-width: 180px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--eds-radius);
  box-shadow: var(--elev-2, 0 4px 16px rgba(15, 39, 66, .14)); padding: var(--sp-1);
  z-index: var(--z-dropdown); display: flex; flex-direction: column; gap: 2px;
}
.em-convite-card__menu[hidden] { display: none; }
.em-convite-card__menu-item {
  background: transparent; border: none; text-align: left;
  padding: var(--sp-2) var(--sp-3); min-height: var(--tap, 38px);
  border-radius: var(--eds-radius-sm); cursor: pointer; font-size: var(--fs-sm);
  color: var(--text); white-space: nowrap;
}
.em-convite-card__menu-item:hover { background: var(--accent-soft, var(--surface-2)); }
.em-convite-card__menu-item:focus-visible { outline: 2px solid var(--eds-azul); outline-offset: -2px; }
.em-convite-card__menu-item.is-danger { color: var(--eds-crit); font-weight: 600; }
.em-convite-card__menu-item.is-danger:hover { background: var(--eds-crit-soft); }

/* Toggle Eventos|Pessoas — mesmo segmentado, separado do Mês|Semana. */
.agenda-modetoggle { margin-right: var(--sp-3); }

/* Drilldown da equipe (modal família B na visão Eventos). */
.agenda-team { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.agenda-team__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.agenda-team__nome { font-size: var(--fs-sm); color: var(--text); }
.agenda-team__lacuna { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--eds-crit); }
.agenda-status { font-size: var(--fs-xs); padding: 2px var(--sp-2); border-radius: 999px; white-space: nowrap; }
.agenda-status--confirmado { background: var(--eds-info-soft);  color: var(--eds-info); }
.agenda-status--concluido  { background: var(--eds-ok-soft);    color: var(--eds-ok); }
.agenda-status--pendente   { background: var(--eds-warn-soft);  color: var(--eds-warn); }
.agenda-status--cancelado  { background: var(--eds-crit-soft);  color: var(--eds-crit); }

/* Toggle Mês|Semana (segmentado) */
.agenda-viewtoggle { display: inline-flex; }
.agenda-viewtoggle .btn { border-radius: 0; }
.agenda-viewtoggle .btn:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.agenda-viewtoggle .btn:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.agenda-viewtoggle .btn.is-active { background: var(--eds-accent-strong); color: var(--eixo-branco); border-color: var(--eds-accent-strong); }

/* Filtro por pessoa (chips) */
.agenda-pessoas { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
/* [hidden] reset: display:flex/inline-flex vence o display:none do atributo. */
.agenda-pessoas[hidden], .agenda-legend__chip[hidden] { display: none; }
.agenda-chip {
  font-size: var(--fs-xs); padding: 2px var(--sp-3); border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-muted); cursor: pointer;
}
.agenda-chip.is-active { background: var(--eds-accent-strong); border-color: var(--eds-accent-strong); color: var(--eixo-branco); font-weight: 600; }

/* Visão semana (lista por dia) */
.agenda-week { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.agenda-weekrow { display: flex; gap: var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--border); background: var(--panel); }
.agenda-weekrow:last-child { border-bottom: none; }
.agenda-weekrow--today { box-shadow: inset 3px 0 0 var(--eds-accent); }
.agenda-weekrow__dia { min-width: 96px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.agenda-weekrow__items { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.agenda-vazio { font-size: var(--fs-xs); color: var(--text-muted); }

@media (max-width: 768px) {
  /* Mobile: mês vira lista vertical do mês corrente (esconde dias fora e vazios). */
  .agenda-grid { grid-template-columns: 1fr; }
  .agenda-weekhead { display: none; }
  .agenda-cell { min-height: 0; flex-direction: row; align-items: flex-start; gap: var(--sp-2); }
  .agenda-cell__num { min-width: 28px; }
  .agenda-cell__items { flex: 1; }
  .agenda-cell--outside, .agenda-cell--vazia { display: none; }
  .agenda-weekrow { flex-direction: column; gap: var(--sp-1); }
  .agenda-weekrow__dia { min-width: 0; }
}

/* ============================================================
   Serviços (SVC.UX-OPERAVEL) — tabela operável + autocomplete + KPIs.
   Cores via tokens dark-aware (--bg/--surface/--border/--eds-accent),
   nunca navy sólido. Sticky usa separate+spacing:0 (collapse quebra sticky).
   ============================================================ */

/* KPIs hierarquizados: faixa secundária por tipo, rebaixada do hero. */
.svc-kpis-sub { margin-top: 14px; }
.svc-kpis-sub__label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
  opacity: 0.85;
}

/* Botão limpar do autocomplete (filtro + modais). */
.svc-ac-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
}
.svc-ac-clear:hover { color: var(--eds-accent); background: var(--bg); }

/* Tabela operável: scroll interno → sticky header + 1ª coluna fixa. */
#servicos-root .data-table-wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 68vh;
  border: 1px solid var(--border);
  border-radius: 8px;
}
#svc-tabela {
  width: 100%;
  min-width: 980px;          /* dá sentido à 1ª coluna fixa em telas estreitas */
  border-collapse: separate; /* collapse quebra position:sticky em vários browsers */
  border-spacing: 0;
}
/* Header fixo no scroll vertical. */
#svc-tabela thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);     /* mesmo fundo que o global table th — opaco */
}
/* 1ª coluna (Serviço) fixa no scroll horizontal. var(--bg) = backdrop das linhas. */
#svc-tabela th:first-child,
#svc-tabela td:first-child {
  position: sticky;
  left: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
}
/* Canto: fixo nos dois eixos, acima de tudo. */
#svc-tabela thead th:first-child { z-index: 3; }
/* Hover mantém a 1ª coluna em sincronia com o resto da linha (id vence o global). */
#svc-tabela tbody tr:hover td:first-child { background: var(--bg); }

/* Cabeçalhos ordenáveis. */
#svc-tabela thead th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
#svc-tabela thead th[data-sort]:hover { color: var(--eds-accent); }
#svc-tabela thead th[data-sort]:focus-visible {
  outline: 2px solid var(--eds-accent);
  outline-offset: -2px;
}
#svc-tabela thead th .sort-arrow {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.35;
}
#svc-tabela thead th[aria-sort="ascending"] .sort-arrow,
#svc-tabela thead th[aria-sort="descending"] .sort-arrow {
  opacity: 0.95;
  color: var(--eds-accent);
}

/* Onda 196 ORG.ORGANIZADOR-LISTA-FECHADA — dialog "adicionar organizador"
   (lista fechada dedup-aware: avisa de similares antes de criar). */
.org-novo-matches { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.org-novo-aviso { margin: 4px 0 2px; font-size: 0.82rem; color: var(--text-muted); }
.org-novo-aviso--bloqueio { color: var(--eds-warn); font-weight: 600; }
.org-novo-match {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--eds-muted-soft);
}
.org-novo-match__nome { font-size: 0.9rem; }
.org-novo-match__nome em { color: var(--text-muted); font-style: italic; }

/* ============================================================
   Aba RELATÓRIOS — FIN.RELATORIOS-CONTABEIS Fase 3 (2026-06-02)
   Bloco Contábil: toolbar, KPIs, cards de relatório, tabelas, índices.
   Identidade Eixo via tokens (sem hex hardcoded). Família B / cards.
   ============================================================ */
#tabpanel-relatorios .rel-root { display: flex; flex-direction: column; gap: 16px; }

/* Toolbar (mês + base + atualizar) */
#tabpanel-relatorios .rel-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  padding: 14px 16px;
  background: var(--surface-2, #f4f6f8);
  border: 1px solid var(--surface-border, #e3e6ea);
  border-radius: var(--eds-radius, 8px);
}
#tabpanel-relatorios .rel-field { display: flex; flex-direction: column; gap: 4px; }
#tabpanel-relatorios .rel-field__label {
  font-size: var(--eds-fs-label, 11px); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted, #6b7280); font-weight: 600;
}
#tabpanel-relatorios .rel-input {
  font-family: inherit; font-size: var(--eds-fs-body, 13px);
  padding: 8px 10px; min-height: var(--tap, 38px);
  border: 1px solid var(--border, #e3e6ea); border-radius: var(--eds-radius, 8px);
  background: var(--surface, #fff); color: var(--text, #1C1E22);
}
#tabpanel-relatorios .rel-base {
  border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px;
}
/* Base toggle como pílulas segmentadas — escopo só da aba (a classe global
   .radio-pill não tem estilo base no projeto; aqui damos o nosso, sem mexer
   no dialog de credor que também usa .radio-pill). */
#tabpanel-relatorios .rel-base .rel-base__opts { display: flex; gap: 6px; flex-wrap: wrap; }
#tabpanel-relatorios .rel-base .radio-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; min-height: var(--tap, 38px);
  border: 1px solid var(--border, #e3e6ea); border-radius: var(--eds-radius, 8px);
  background: var(--surface, #fff); color: var(--text, #1C1E22);
  font-size: var(--eds-fs-body, 13px); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
#tabpanel-relatorios .rel-base .radio-pill:hover { border-color: var(--baseline, #d4d8dd); }
#tabpanel-relatorios .rel-base .radio-pill:has(input:checked) {
  border-color: var(--eds-azul, #0F2742);
  background: var(--eds-bg-elev1, rgba(15,39,66,.05));
  font-weight: 600;
}
#tabpanel-relatorios .rel-base .radio-pill:has(input:focus-visible) {
  outline: 2px solid var(--eds-azul, #0F2742); outline-offset: 2px;
}
#tabpanel-relatorios .rel-base-hint {
  margin: 0; font-size: 12px; color: var(--text-muted, #6b7280); line-height: 1.5;
}

/* KPIs strip */
#tabpanel-relatorios .rel-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}
#tabpanel-relatorios .rel-kpi {
  background: var(--surface, #fff); border: 1px solid var(--surface-border, #e3e6ea);
  border-radius: var(--eds-radius, 8px); padding: 14px 16px;
}
#tabpanel-relatorios .rel-kpi--hero { border-left: 3px solid var(--eds-azul, #0F2742); }
#tabpanel-relatorios .rel-kpi__label {
  font-size: var(--eds-fs-label, 11px); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted, #6b7280); font-weight: 600; margin-bottom: 6px;
}
#tabpanel-relatorios .rel-kpi__value {
  font-size: var(--eds-fs-value, 22px); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text, #1C1E22);
}
#tabpanel-relatorios .rel-kpi__sub { font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 2px; }

/* Cabeçalho da empresa (capa) */
#tabpanel-relatorios .rel-empresa {
  border-left: 3px solid var(--eds-amanhecer, #FFC846);
  padding: 4px 0 4px 14px;
}
#tabpanel-relatorios .rel-empresa__nome { font-size: 16px; font-weight: 700; color: var(--text, #1C1E22); }
#tabpanel-relatorios .rel-empresa__meta { font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 2px; }
#tabpanel-relatorios .rel-empresa__periodo { font-size: 12px; color: var(--text-soft, #6b7280); margin-top: 2px; font-style: italic; }

/* Card de relatório (details/summary nativo) */
#tabpanel-relatorios .rel-card {
  background: var(--surface, #fff); border: 1px solid var(--surface-border, #e3e6ea);
  border-radius: var(--eds-radius, 8px); overflow: hidden;
}
#tabpanel-relatorios .rel-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--text, #1C1E22);
}
#tabpanel-relatorios .rel-card__head::-webkit-details-marker { display: none; }
#tabpanel-relatorios .rel-card__head::before {
  content: "▸"; color: var(--text-muted, #6b7280); font-size: 11px; transition: transform .15s ease;
}
#tabpanel-relatorios .rel-card[open] .rel-card__head::before { transform: rotate(90deg); }
#tabpanel-relatorios .rel-card__titulo { flex: 1; }
#tabpanel-relatorios .rel-card__body { padding: 0 16px 16px; }
#tabpanel-relatorios .rel-csv-btn { font-size: 12px; padding: 6px 12px; min-height: var(--tap, 38px); }

/* Linha "Baixar pacote completo" (PDF/Excel/ZIP) */
#tabpanel-relatorios .rel-pacote {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px; background: var(--surface-2, #f4f6f8);
  border: 1px solid var(--surface-border, #e3e6ea); border-radius: var(--eds-radius, 8px);
}
#tabpanel-relatorios .rel-pacote__label {
  font-size: 12px; font-weight: 600; color: var(--text-muted, #6b7280); margin-right: 4px;
}

/* Tabelas */
#tabpanel-relatorios .rel-table { width: 100%; border-collapse: collapse; font-size: var(--eds-fs-body, 13px); }
#tabpanel-relatorios .rel-table thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280); font-weight: 600; text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--border, #e6e8eb); white-space: nowrap;
}
#tabpanel-relatorios .rel-table tbody td {
  padding: 8px 10px; border-bottom: 1px solid var(--eds-bg-elev1, rgba(15,39,66,.05));
  vertical-align: middle;
}
#tabpanel-relatorios .rel-table .rel-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#tabpanel-relatorios .rel-table .rel-cod { font-variant-numeric: tabular-nums; color: var(--text-muted, #6b7280); white-space: nowrap; }
#tabpanel-relatorios .rel-table .rel-tipo { text-transform: capitalize; color: var(--text-muted, #6b7280); }
#tabpanel-relatorios .rel-pos { color: var(--eds-ok, #2D9A6B); }
#tabpanel-relatorios .rel-neg { color: var(--eds-crit, #FF6A2A); }
#tabpanel-relatorios .rel-muted { color: var(--text-muted, #6b7280); font-weight: 400; }

/* Linhas semânticas da DRE / Balanço */
#tabpanel-relatorios .rel-tr-strong td { font-weight: 600; }
#tabpanel-relatorios .rel-tr-grupo td { font-weight: 500; }
#tabpanel-relatorios .rel-tr-conta td:first-child { padding-left: 28px; color: var(--text-muted, #6b7280); }
#tabpanel-relatorios .rel-tr-total td {
  font-weight: 700; border-top: 2px solid var(--border, #e6e8eb);
  border-bottom: none; background: var(--surface-2, #f4f6f8);
}
#tabpanel-relatorios .rel-tr-sec td {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 700; color: var(--eds-azul, #0F2742); padding-top: 16px;
}
#tabpanel-relatorios .rel-tr-memo td { font-style: italic; color: var(--text-muted, #6b7280); }

/* Notas / callouts */
#tabpanel-relatorios .rel-nota { font-size: 12px; color: var(--text-muted, #6b7280); margin: 0 0 10px; line-height: 1.5; }
#tabpanel-relatorios .rel-nota--warn { color: var(--eds-por-do-sol, #FF6A2A); }
/* Aviso clicável (botão estilizado como link/nota) → deep-link pro Financeiro */
#tabpanel-relatorios .rel-nota-link {
  display: inline-block; font: inherit; text-align: left;
  background: var(--eds-warn-soft, rgba(255,200,70,.18));
  border: 1px solid var(--eds-warn, #FFC846); border-radius: var(--eds-radius-sm, 4px);
  padding: 8px 12px; margin: 0 0 10px; cursor: pointer; min-height: var(--tap, 38px);
  transition: filter .15s ease;
}
#tabpanel-relatorios .rel-nota-link:hover { filter: brightness(.97); text-decoration: underline; }
#tabpanel-relatorios .rel-nota-link:focus-visible { outline: 2px solid var(--eds-azul, #0F2742); outline-offset: 2px; }
#tabpanel-relatorios .rel-callout {
  margin: 12px 0; padding: 10px 14px; font-size: 12px; line-height: 1.5;
  background: var(--eds-warn-soft, rgba(255,200,70,.18));
  border-left: 3px solid var(--eds-warn, #FFC846); border-radius: var(--eds-radius-sm, 4px);
  color: var(--text, #1C1E22);
}
#tabpanel-relatorios .rel-erro {
  padding: 14px 16px; background: var(--eds-crit-soft, rgba(255,106,42,.14));
  border-left: 3px solid var(--eds-crit, #FF6A2A); border-radius: var(--eds-radius, 8px);
  color: var(--text, #1C1E22); font-size: 13px;
}

/* Índices */
#tabpanel-relatorios .rel-subhead { margin: 18px 0 4px; font-size: 14px; font-weight: 700; }
#tabpanel-relatorios .rel-ix-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
#tabpanel-relatorios .rel-ix {
  border: 1px solid var(--surface-border, #e3e6ea); border-radius: var(--eds-radius, 8px);
  padding: 10px 12px; border-left-width: 3px;
}
#tabpanel-relatorios .rel-ix__label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #6b7280); font-weight: 600; }
#tabpanel-relatorios .rel-ix__value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
#tabpanel-relatorios .rel-ix--ok   { border-left-color: var(--eds-ok, #2D9A6B); }
#tabpanel-relatorios .rel-ix--warn { border-left-color: var(--eds-warn, #FFC846); }
#tabpanel-relatorios .rel-ix--crit { border-left-color: var(--eds-crit, #FF6A2A); }
#tabpanel-relatorios .rel-ix--info { border-left-color: var(--eds-azul, #0F2742); }

/* Razão — conta colapsável */
#tabpanel-relatorios .rel-razao-conta { border: 1px solid var(--surface-border-subtle, #eef0f3); border-radius: var(--eds-radius-sm, 4px); margin-bottom: 6px; }
#tabpanel-relatorios .rel-razao-conta > summary {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer;
  font-size: var(--eds-fs-body, 13px); list-style: none;
}
#tabpanel-relatorios .rel-razao-conta > summary::-webkit-details-marker { display: none; }
#tabpanel-relatorios .rel-razao-conta > summary span:nth-child(2) { flex: 1; font-weight: 500; }
#tabpanel-relatorios .rel-razao-saldo { font-variant-numeric: tabular-nums; font-weight: 600; }
#tabpanel-relatorios .rel-razao-conta .data-table-wrapper { padding: 0 12px 10px; }

/* Onda FIN.SPLIT-FONTE-DETECTOR (v96) — linhas de evento nos modais de
   resolução de alerta de split (atencao-acoes.js). Tokens da escala, sem px solto. */
.atencao-acoes-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--eds-border);
}
.atencao-acoes-row__info { min-width: 0; }
.atencao-acoes-row__info strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atencao-acoes-row__info .muted { font-size: var(--fs-sm); }
/* CONTRATO.FLAGS — nome clicável (.btn-link) no modal de contratos pendentes:
   block + max-width pra truncar nome longo (ellipsis do strong interno) e
   manter a meta na linha 2, como nos modais irmãos de split. */
.atencao-acoes-row__info .btn-link {
  display: block;
  max-width: 100%;
  text-align: left;
}
.atencao-acoes-row__actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ============================================================
   Onda PE.1 — Aba Planejamento Estratégico (pe.js)
   Cascata ciclo → objetivo → KR + strip OKR (reusada no dashboard CEO).
   Tokens Manual v1.0 — zero hex novo.
   ============================================================ */
.pe-aba { display: flex; flex-direction: column; gap: var(--eds-gap); max-width: 980px; }
.pe-loading { color: var(--eds-muted); padding: 24px 8px; }

.pe-ciclo { display: flex; align-items: center; justify-content: space-between; gap: var(--eds-gap); }
.pe-ciclo__titulo { margin: 0 0 4px; font-size: var(--fs-xl); }
.pe-ciclo__meta { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); }

.pe-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: var(--fs-2xs); line-height: 1.6; white-space: nowrap;
  background: var(--surface-2); color: var(--muted);
}
.pe-badge--vigente { background: var(--eds-ok-soft); color: var(--eds-ok); font-weight: 600; }
.pe-badge--proposto { background: var(--eixo-amanhecer-soft); color: var(--eds-warn); font-weight: 600; }

.pe-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--eixo-cinza); flex: none;
}
.pe-dot--ok { background: var(--eds-ok); }
.pe-dot--warn { background: var(--eds-warn); }
.pe-dot--crit { background: var(--eds-crit); }
.pe-dot--neutral { background: var(--eixo-cinza); }

.pe-okr-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--eds-gap-sm);
}
.pe-okr {
  border: 1px solid var(--surface-border); border-radius: var(--eds-radius);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
  background: var(--surface);
}
.pe-okr__head { display: flex; align-items: center; justify-content: space-between; }
.pe-okr__cod { font-weight: 700; font-size: var(--fs-sm); }
.pe-okr__titulo {
  font-size: var(--fs-xs); color: var(--eds-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-okr__bar {
  height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden;
}
.pe-okr__fill { height: 100%; border-radius: 999px; background: var(--link); transition: width .3s ease; }
/* DASH.PREMIUM: a barra (maior área do card de OKR) carrega o semáforo do
   objetivo — antes era sempre navy e contradizia o dot de status. Traz
   Amanhecer (#FFC846=warn) e Pôr do Sol (#FF6A2A=crit) ao painel. */
.pe-okr__fill--ok   { background: var(--eds-ok); }
.pe-okr__fill--warn { background: var(--eds-warn); }
.pe-okr__fill--crit { background: var(--eds-crit); }
.pe-okr__meta { font-size: var(--fs-2xs); color: var(--eds-muted); }

.pe-obj {
  border: 1px solid var(--surface-border); border-radius: var(--eds-radius);
  background: var(--surface); padding: var(--eds-pad-card);
}
.pe-obj__head { margin-bottom: 8px; }
.pe-obj__titulo { margin: 0; font-size: var(--fs-md); }
.pe-obj__desc { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--eds-muted); }
.pe-obj__vazio { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--eds-muted); font-style: italic; }

.pe-kr {
  display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center;
  gap: 4px 10px; padding: 8px 4px; border-top: 1px solid var(--surface-border-subtle);
}
.pe-kr__texto { display: flex; flex-direction: column; min-width: 0; }
.pe-kr__titulo { font-size: var(--fs-sm); font-weight: 600; }
.pe-kr__formula, .pe-kr__obs {
  font-size: var(--fs-2xs); color: var(--eds-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48ch;
}
.pe-kr__badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pe-kr__valores { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pe-kr__atual { font-weight: 700; font-variant-numeric: tabular-nums; }
.pe-kr__sep { color: var(--eds-muted); }
.pe-kr__alvo {
  font: inherit; font-variant-numeric: tabular-nums; color: var(--link);
  background: none; border: none; padding: 2px 4px; border-radius: var(--eds-radius-sm);
  cursor: pointer; text-decoration: underline dotted;
}
.pe-kr__alvo:hover { background: var(--eds-info-soft); }
.pe-kr__trilha-btn {
  font: inherit; background: none; border: none; cursor: pointer;
  padding: 2px 4px; border-radius: var(--eds-radius-sm); color: var(--eds-muted);
}
.pe-kr__trilha-btn:hover { background: var(--surface-2); }
.pe-kr__trilha { grid-column: 1 / -1; padding: 6px 4px 2px 22px; display: flex; flex-direction: column; gap: 6px; }
.pe-trilha-item { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: var(--fs-xs); }
.pe-trilha-item__data { color: var(--eds-muted); font-variant-numeric: tabular-nums; }
.pe-trilha-item__delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.pe-trilha-item__motivo { color: var(--eds-muted); flex-basis: 100%; }

.pe-ops-toggle { padding: 2px 4px; }
.pe-ops-toggle__label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--eds-muted); cursor: pointer; }

.pe-form__label { display: block; margin: 10px 0 4px; font-size: var(--fs-sm); font-weight: 600; }
.pe-form__input {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--surface-border); border-radius: var(--eds-radius-sm);
  font: inherit; background: var(--surface);
}
.pe-form__input:focus { outline: 2px solid var(--link); outline-offset: 1px; }

/* PE.1 — telas estreitas: o grid do KR empilha (título em cima, badges e
   valores embaixo) em vez de espremer 4 colunas. */
@media (max-width: 640px) {
  .pe-kr { grid-template-columns: 12px 1fr; }
  .pe-kr__badges { grid-column: 2; justify-content: flex-start; }
  .pe-kr__valores { grid-column: 2; flex-wrap: wrap; }
  .pe-kr__trilha { padding-left: 4px; }
}

/* ============================================================
   Onda PE.2 — Revisão do período (ritual D+10 / comitê D+90)
   ============================================================ */
.pe-subnav { display: flex; gap: 6px; }
.pe-subnav__btn {
  font: inherit; font-size: var(--fs-sm); padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--surface-border); border-radius: 999px;
  background: var(--surface); color: var(--muted);
}
.pe-subnav__btn--ativa { background: var(--eds-info-soft); color: var(--link); border-color: var(--link); font-weight: 600; }

.pe-rev { display: flex; flex-direction: column; gap: var(--eds-gap); }
.pe-rev__head { display: flex; align-items: center; justify-content: space-between; gap: var(--eds-gap-sm); flex-wrap: wrap; }
.pe-rev__h { margin: 0; font-size: var(--fs-md); }
.pe-rev__controles { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pe-form__input--inline { width: auto; padding: 5px 8px; font-size: var(--fs-sm); }

.pe-rev__tabela {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--surface-border); border-radius: var(--eds-radius);
  background: var(--surface); overflow: hidden;
}
.pe-rev__tabela th {
  text-align: left; font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); padding: 8px 10px;
  border-bottom: 1px solid var(--surface-border);
}
.pe-rev__tabela td { padding: 8px 10px; border-bottom: 1px solid var(--surface-border-subtle); }
.pe-rev__tabela tr:last-child td { border-bottom: none; }
.pe-rev__titulo { font-size: var(--fs-sm); font-weight: 600; margin-right: 6px; }
.pe-rev__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pe-rev__num--real { font-weight: 700; }
.pe-rev__flag { text-align: right; }
.pe-rev__nota { margin: 0; font-size: var(--fs-xs); color: var(--muted); font-style: italic; }

.pe-pauta {
  border: 1px solid var(--surface-border); border-left: 3px solid var(--link); border-radius: 0;
  background: var(--surface); padding: 12px 14px; white-space: pre-wrap;
  font-size: var(--fs-sm); line-height: 1.55;
}

.pe-acoes {
  border: 1px solid var(--surface-border); border-radius: var(--eds-radius);
  background: var(--surface); padding: var(--eds-pad-card);
  display: flex; flex-direction: column; gap: 8px;
}
.pe-acoes__h { margin: 0; font-size: var(--fs-md); }
.pe-acoes__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pe-acao { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.pe-acao__check { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 0; }
.pe-acao__titulo { font-size: var(--fs-sm); }
.pe-acao--feita .pe-acao__titulo { text-decoration: line-through; color: var(--muted); }
.pe-acao__del {
  font: inherit; background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 2px 6px; border-radius: var(--eds-radius-sm);
}
.pe-acao__del:hover { background: var(--eds-crit-soft); color: var(--eds-crit); }
.pe-acoes__form { display: flex; gap: 6px; }
.pe-acoes__form .pe-form__input { flex: 1; }
.pe-acoes__ghosts { display: flex; flex-direction: column; gap: 6px; }
.pe-ghost {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px dashed var(--surface-border); border-radius: var(--eds-radius-sm);
  background: var(--surface-2);
}
.pe-ghost__titulo { font-size: var(--fs-sm); font-weight: 600; }
.pe-ghost__just { font-size: var(--fs-2xs); color: var(--muted); flex: 1; min-width: 0; }

@media (max-width: 640px) {
  .pe-rev__tabela th:nth-child(5), .pe-rev__tabela td:nth-child(5) { display: none; }
  .pe-ghost { flex-wrap: wrap; }
}

/* ============================================================
   Onda PE.3 — Diagnóstico empresarial assistido (wizard + radar)
   ============================================================ */
.pe-diag { display: flex; flex-direction: column; gap: var(--eds-gap); }
.pe-diag__acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* wizard (modal família B em blocos por área) */
.pe-wizard__body { display: flex; flex-direction: column; gap: var(--eds-gap); max-height: min(62vh, 640px); overflow-y: auto; }
.pe-wizard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pe-wizard__passo { display: flex; gap: 6px; align-items: center; }
.pe-wizard__ponto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--surface-border);
}
.pe-wizard__ponto--feito { background: var(--eds-ok); border-color: var(--eds-ok); }
.pe-wizard__ponto--ativo { outline: 2px solid var(--link); outline-offset: 1px; }

.pe-perg {
  border: 1px solid var(--surface-border-subtle); border-radius: var(--eds-radius);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.pe-perg__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-perg__texto { font-size: var(--fs-sm); font-weight: 600; flex: 1; min-width: 200px; }
.pe-perg__sugerir { white-space: nowrap; }
.pe-perg__opcoes { display: flex; flex-direction: column; gap: 4px; }
.pe-perg__opcao {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 8px;
  border: 1px solid transparent; border-radius: var(--eds-radius-sm); cursor: pointer;
}
.pe-perg__opcao:hover { background: var(--surface-2); }
.pe-perg__opcao--ativa { background: var(--eds-info-soft); border-color: var(--link); }
.pe-perg__opcao input { margin: 0; flex: none; align-self: center; }
.pe-perg__nivel {
  flex: none; width: 18px; height: 18px; border-radius: 50%; text-align: center;
  font-size: var(--fs-2xs); font-weight: 700; line-height: 18px;
  background: var(--surface-2); color: var(--muted); align-self: center;
}
.pe-perg__opcao--ativa .pe-perg__nivel { background: var(--link); color: var(--surface); }
.pe-perg__opcao-texto { font-size: var(--fs-sm); }
.pe-perg__rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-perg__imp { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pe-perg__feedback {
  border-left: 3px solid var(--eds-warn); background: var(--surface-2);
  padding: 8px 10px; font-size: var(--fs-xs); line-height: 1.5; border-radius: 0 var(--eds-radius-sm) var(--eds-radius-sm) 0;
}
.pe-perg__sugestao { font-size: var(--fs-xs); color: var(--muted); }

/* resultado: radar + painel lateral */
.pe-diag-res__grid { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: var(--eds-gap); align-items: start; }
.pe-diag-res__maturidade { display: flex; flex-direction: column; gap: 2px; }
.pe-diag-res__nivel { font-size: var(--fs-xl); font-weight: 700; }
.pe-diag-res__score { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.pe-diag-res__delta { font-size: var(--fs-xs); color: var(--muted); }
.pe-diag-res__label { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--eds-muted); }
.pe-diag-res__defs { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.pe-diag-res__def { display: grid; grid-template-columns: minmax(140px, auto) 1fr 40px; gap: 8px; align-items: center; }
.pe-diag-res__def-label { font-size: var(--fs-xs); color: var(--muted); }
.pe-diag-res__def-pct { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: right; }
.pe-diag-res__feedback { font-size: var(--fs-xs); color: var(--eds-muted); max-width: 42ch; }

.pe-radar { width: 100%; height: auto; }
.pe-radar__anel { fill: none; stroke: var(--surface-border-subtle); }
.pe-radar__eixo { stroke: var(--surface-border-subtle); }
.pe-radar__atual { fill: var(--link); fill-opacity: .18; stroke: var(--link); stroke-width: 2; }
.pe-radar__anterior { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pe-radar__ponto { fill: var(--link); }
.pe-radar__label { font-size: 12px; fill: var(--eds-text); }
.pe-radar__pct { font-weight: 700; fill: var(--link); }

@media (max-width: 720px) {
  .pe-diag-res__grid { grid-template-columns: 1fr; }
  .pe-rev__tabela td.pe-diag-res__feedback { max-width: none; }
  .pe-perg__head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Onda PE.4 — Análises de ambiente (SWOT/GUT/Canvas/BCG/PESTAL/Porter)
   ============================================================ */
.pe-ana { display: flex; flex-direction: column; gap: var(--eds-gap); }
.pe-ana__lista .pe-acao { border-bottom: 1px solid var(--surface-border-subtle); }
.pe-ana__abrir {
  font: inherit; background: none; border: none; cursor: pointer; text-align: left;
  flex: 1; min-width: 0; padding: 6px 4px; border-radius: var(--eds-radius-sm); color: inherit;
}
.pe-ana__abrir:hover { background: var(--surface-2); }
.pe-ana__abrir--ativa { background: var(--eds-info-soft); }

.pe-ana-det { display: flex; flex-direction: column; gap: var(--eds-gap-sm); }

.pe-ana__quadrantes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--eds-gap-sm); }
.pe-ana__colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--eds-gap-sm); }
.pe-ana__quadrante {
  border: 1px solid var(--surface-border); border-radius: var(--eds-radius);
  background: var(--surface-2); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.pe-ana__dim-titulo { margin: 0; font-size: var(--fs-sm); }
.pe-ana__itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pe-ana__item {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-radius: var(--eds-radius-sm); background: var(--surface);
  border: 1px solid var(--surface-border-subtle);
}
.pe-ana__item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-sm); }
.pe-ana__item-detalhe { font-size: var(--fs-2xs); color: var(--eds-muted); }
.pe-ana__pontos {
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-sm);
  background: var(--eds-info-soft); color: var(--link);
  border-radius: 999px; padding: 1px 8px;
}
.pe-ana__escala { padding: 3px 4px; }
.pe-ana__add { display: flex; gap: 4px; margin-top: 2px; }
.pe-ana__add .pe-form__input { flex: 1; padding: 5px 8px; font-size: var(--fs-sm); }

.pe-ana__gut td { vertical-align: middle; }
.pe-ana__gut .pe-form__input--inline { width: 58px; }

/* Business Model Canvas — grade clássica 5×3 */
.pe-ana__canvas {
  display: grid; gap: var(--eds-gap-sm);
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    "parcerias atividades proposta relacionamento segmentos"
    "parcerias recursos   proposta canais         segmentos"
    "custos    custos     custos   receitas       receitas";
}
.pe-ana__canvas--parcerias { grid-area: parcerias; }
.pe-ana__canvas--atividades { grid-area: atividades; }
.pe-ana__canvas--recursos { grid-area: recursos; }
.pe-ana__canvas--proposta_valor { grid-area: proposta; }
.pe-ana__canvas--relacionamento { grid-area: relacionamento; }
.pe-ana__canvas--canais { grid-area: canais; }
.pe-ana__canvas--segmentos { grid-area: segmentos; }
.pe-ana__canvas--custos { grid-area: custos; }
.pe-ana__canvas--receitas { grid-area: receitas; }

.pe-ana__cruz { border-top: 1px dashed var(--surface-border); padding-top: var(--eds-gap-sm); }
.pe-ghost--coluna { flex-direction: column; align-items: flex-start; }
.pe-ana__kr-sug { font-size: var(--fs-xs); display: block; }

@media (max-width: 860px) {
  .pe-ana__canvas { grid-template-columns: 1fr 1fr; grid-template-areas: none; }
  .pe-ana__canvas > * { grid-area: auto; }
}
@media (max-width: 640px) {
  .pe-ana__quadrantes, .pe-ana__canvas { grid-template-columns: 1fr; }
  .pe-ana__item { flex-wrap: wrap; }
  .pe-ana__gut .pe-form__input--inline { width: 48px; }
}

/* ============================================================
   Onda PE.5 — Construtor do ciclo (wizard) + Execução (kanban)
   Tokens dark-safe (surface/muted/eds-*) — zero hex em texto.
   ============================================================ */
.pe-ctr { display: flex; flex-direction: column; gap: var(--eds-gap, 16px); }
.pe-ctr__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--eds-gap-sm, 8px); flex-wrap: wrap;
}
.pe-ctr__stepper {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--surface-border);
  padding-bottom: var(--eds-gap-sm, 8px);
}
.pe-ctr__passo {
  border: 1px solid var(--surface-border); background: var(--surface);
  color: var(--muted); border-radius: var(--eds-radius-sm, 8px);
  padding: 6px 10px; font-size: var(--fs-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
}
.pe-ctr__passo:hover { color: var(--text); border-color: var(--muted); }
.pe-ctr__passo--ativo {
  color: var(--text); background: var(--surface-2);
  border-color: var(--accent, var(--text)); font-weight: 600;
}
.pe-ctr__passo-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--surface-border);
  font-size: var(--fs-2xs); font-weight: 700;
}
.pe-ctr__passo--ativo .pe-ctr__passo-n { background: var(--eixo-amanhecer-soft, var(--surface-2)); }
.pe-ctr__novo { max-width: 560px; }
.pe-ctr__form-novo { display: flex; flex-direction: column; gap: var(--eds-gap-sm, 8px); }
.pe-ctr__form-linha { display: flex; gap: var(--eds-gap, 16px); flex-wrap: wrap; }
.pe-ctr__form-linha > span { flex: 1 1 200px; display: flex; flex-direction: column; }
.pe-ctr__historico { margin-top: var(--eds-gap, 16px); font-size: var(--fs-xs); }
.pe-ctr__sub { font-size: var(--fs-sm); color: var(--muted); margin: var(--eds-gap-sm, 8px) 0 4px; }
.pe-ctr__okrs { display: flex; flex-direction: column; gap: var(--eds-gap, 16px); }
.pe-ctr__toolbar { display: flex; gap: var(--eds-gap-sm, 8px); flex-wrap: wrap; }
.pe-ctr__obj { border: 1px solid var(--surface-border); border-radius: var(--eds-radius, 12px); padding: var(--eds-gap, 16px); background: var(--surface); }
.pe-ctr__obj-acoes { display: inline-flex; gap: 4px; align-items: center; }
.pe-ctr__btn-mini { padding: 2px 8px; font-size: var(--fs-2xs); }
.pe-ctr__kr {
  /* o .pe-kr base é grid de 4 colunas (dot/texto/valores/botões da vista
     OKRs) — no construtor a linha não tem dot, então vira flex */
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--eds-gap-sm, 8px);
}
.pe-ctr__kr .pe-kr__texto { flex: 1 1 320px; }
.pe-ctr__kr .pe-kr__valores { display: flex; align-items: center; gap: var(--eds-gap-sm, 8px); flex-wrap: wrap; }
.pe-ctr__kr .pe-kr__alvo {
  /* no construtor o alvo não é clicável (edita pelo modal) — sem affordance de link */
  cursor: default; text-decoration: none; color: var(--text);
}
.pe-ctr__kr .pe-kr__alvo:hover { background: none; }
.pe-ctr__kr .pe-kr__badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.pe-ctr__proposta {
  flex-basis: 100%; display: flex; flex-direction: column; gap: 4px;
  border-left: 3px solid var(--eds-warn); padding-left: var(--eds-gap-sm, 8px);
  margin-top: var(--eds-gap-sm, 8px);
}
.pe-ctr__val {
  border: 1px solid var(--surface-border); border-radius: var(--eds-radius, 12px);
  background: var(--surface-2); padding: var(--eds-gap-sm, 8px) var(--eds-gap, 16px);
  display: flex; flex-direction: column; gap: 4px;
}
.pe-ctr__val p { margin: 0; font-size: var(--fs-sm); }
.pe-ctr__val-ok { color: var(--eds-ok); font-weight: 600; }
.pe-ctr__val-erro { color: var(--eds-crit); }
.pe-ctr__val-aviso { color: var(--muted); }
.pe-ctr__publicar { display: flex; align-items: center; gap: var(--eds-gap, 16px); flex-wrap: wrap; margin-top: var(--eds-gap, 16px); }
.pe-ctr__cand { display: flex; gap: var(--eds-gap-sm, 8px); align-items: flex-start; cursor: pointer; }
.pe-ctr__cand input[type="checkbox"] { margin-top: 4px; }

/* diff lado a lado */
.pe-diff { display: flex; flex-direction: column; gap: var(--eds-gap-sm, 8px); }
.pe-diff__cols, .pe-diff__linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--eds-gap-sm, 8px); }
.pe-diff__col-h { font-weight: 700; font-size: var(--fs-sm); color: var(--muted); }
.pe-diff__de, .pe-diff__para {
  background: var(--surface-2); border-radius: var(--eds-radius-sm, 8px);
  padding: 6px 10px; font-size: var(--fs-sm); white-space: pre-wrap;
}
.pe-diff__para { border-left: 3px solid var(--eds-ok); }
.pe-diff__de { border-left: 3px solid var(--surface-border); color: var(--muted); }
.pe-diff__tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pe-diff__tabela th {
  text-align: left; color: var(--muted); font-size: var(--fs-xs);
  border-bottom: 1px solid var(--surface-border); padding: 4px 8px;
}
.pe-diff__tabela td { padding: 6px 8px; border-bottom: 1px solid var(--surface-border-subtle, var(--surface-border)); vertical-align: top; }
.pe-diff__tr--removido td { opacity: .6; text-decoration: line-through; }
.pe-diff__tr--novo td:first-child { border-left: 3px solid var(--eds-ok); }

/* Execução — kanban (reusa .plan-kanban/.plan-col/.plan-kcard) */
.pe-exec { display: flex; flex-direction: column; gap: var(--eds-gap, 16px); }
.pe-exec__strip { display: flex; gap: var(--eds-gap-sm, 8px); flex-wrap: wrap; }
.pe-exec__kr {
  border: 1px solid var(--surface-border); border-radius: var(--eds-radius-sm, 8px);
  background: var(--surface); padding: 6px 10px; font-size: var(--fs-sm);
  color: var(--muted);
}
.pe-exec__kr strong { color: var(--text); }
.pe-exec__card-titulo { font-size: var(--fs-sm); }
.pe-exec__card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: var(--fs-xs); margin-top: 4px; }

@media (max-width: 640px) {
  .pe-ctr__stepper { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .pe-ctr__passo { white-space: nowrap; }
  .pe-diff__cols, .pe-diff__linha { grid-template-columns: 1fr; }
}

/* ============================================================
   Contas a pagar / a receber (Reestruturação CFO) — aging
   ============================================================ */
.eds-contas { display: flex; flex-direction: column; gap: var(--sp-2); }
.eds-contas__resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-2);
}
.eds-contas__big {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
}
.eds-contas__big-label {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eds-contas__big-val {
  font-size: var(--fs-value, 20px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.eds-contas__big-val--crit { color: var(--eds-crit); }
.eds-contas__big-sub { font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); }
.eds-contas__faixas { display: flex; flex-direction: column; gap: var(--sp-1); }
.eds-contas__faixa {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-sm);
}
.eds-contas__faixa-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.eds-contas__faixa-n { text-align: right; font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); }
.eds-contas__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.eds-conta {
  display: grid;
  grid-template-columns: 1.6fr 0.6fr 0.8fr;
  gap: var(--sp-2);
  align-items: center;
  padding: 6px var(--sp-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.eds-conta__nome { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eds-conta__venc { text-align: center; font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); }
.eds-conta__venc--late { color: var(--eds-crit); font-weight: 600; }
.eds-conta__val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.eds-conta--mais { grid-template-columns: 1fr; color: var(--text-muted, var(--eds-muted)); font-size: var(--fs-xs); font-style: italic; border-bottom: none; }
.eds-contas__nota { font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); margin: 0; }

/* ============================================================
   Últimos eventos (Reestruturação CFO) — tabela cronológica
   ============================================================ */
.eds-ult-eventos { overflow-x: auto; }
.eds-ult-eventos__header,
.eds-ult-evento {
  display: grid;
  grid-template-columns: 2.2fr 0.8fr 1fr 1fr 1fr 0.7fr 1fr;
  gap: var(--sp-2);
  align-items: center;
  min-width: 640px;
}
.eds-ult-eventos__header {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--eds-muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.eds-ult-eventos__col--num { text-align: right; }
.eds-ult-eventos__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.eds-ult-evento {
  padding: var(--sp-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.eds-ult-evento__nome { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eds-ult-evento__titulo { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eds-ult-evento__sub { font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); }
.eds-ult-evento__data { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted, var(--eds-muted)); }
.eds-ult-evento__num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.eds-ult-evento__num--desp { color: var(--text-muted, var(--eds-muted)); }
.eds-ult-evento__num--lucro { font-weight: 700; }
.eds-ult-evento__num.pos, .eds-ult-evento__margem.pos { color: var(--positive); }
.eds-ult-evento__num.neg, .eds-ult-evento__margem.neg { color: var(--eixo-por-do-sol); }
.eds-ult-evento[data-evento-id] { cursor: pointer; }
.eds-ult-evento[data-evento-id]:hover { background: var(--baseline-soft, rgba(0,0,0,0.04)); }
.eds-ult-evento[data-evento-id]:focus-visible { outline: 2px solid var(--link, var(--eds-info)); outline-offset: -2px; }

/* ============================================================
   Projeção de receita 12m (forecast robusto) — lateral
   ============================================================ */
.eds-projecao__imp { margin: 0 0 4px; }
.eds-projecao__imp strong { font-size: var(--fs-value, 20px); color: var(--text); font-variant-numeric: tabular-nums; }
.eds-projecao__imp span { font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); }
.eds-projecao__nota { font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); margin: 0 0 var(--sp-2); }
.eds-projecao__sug { list-style: none; padding: 0; margin: 0 0 var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); }
.eds-projecao__sug-item {
  padding: var(--sp-1) var(--sp-2);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--eds-radius);
}
.eds-projecao__sug-nome { font-weight: 600; color: var(--text); font-size: var(--fs-sm); text-transform: capitalize; }
.eds-projecao__sug-meta { font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); margin-bottom: 4px; }
.eds-projecao__avisos { font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); margin-top: var(--sp-2); }
.eds-projecao__avisos summary { cursor: pointer; font-weight: 600; }
.eds-projecao__avisos ul { margin: var(--sp-1) 0 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 3px; }

/* ============================================================
   COO — tarefas / equipamentos / esforço (Reestruturação)
   ============================================================ */
.coo-tarefas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3, 16px); }
@media (max-width: 720px) { .coo-tarefas-grid { grid-template-columns: 1fr; } }
.coo-tarefas-lista, .coo-equip-lista, .coo-esforco-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.coo-tarefa { display: grid; grid-template-columns: 1.8fr 1fr 0.6fr; gap: var(--sp-2); align-items: center; padding: 5px var(--sp-2); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.coo-tarefa--atrasada { background: var(--eds-crit-soft, rgba(255,106,42,0.06)); border-radius: var(--eds-radius-sm); }
.coo-tarefa[data-evento-id] { cursor: pointer; }
.coo-tarefa[data-evento-id]:hover { background: var(--baseline-soft, rgba(0,0,0,0.04)); }
.coo-tarefa[data-evento-id]:focus-visible { outline: 2px solid var(--link, var(--eds-info)); outline-offset: -2px; }
.coo-tarefa__titulo { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coo-tarefa__resp { font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); }
.coo-tarefa__prazo { text-align: right; font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); font-variant-numeric: tabular-nums; }
.coo-tarefa__prazo--late { color: var(--eds-crit); font-weight: 600; }
.coo-equip-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2); }
.coo-equip-item { display: grid; grid-template-columns: 2fr 1fr 0.8fr; gap: var(--sp-2); align-items: center; padding: 5px var(--sp-2); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.coo-equip-nome { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coo-equip-tipo { font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); text-transform: capitalize; }
.coo-equip-n { text-align: right; font-size: var(--fs-xs); color: var(--text-muted, var(--eds-muted)); }
.coo-esforco-row { display: grid; grid-template-columns: 1.2fr 2fr 0.5fr; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); padding: 3px 0; }
.coo-esforco-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.coo-esforco-bar-wrap { height: 8px; background: var(--baseline-soft, rgba(0,0,0,0.06)); border-radius: 999px; overflow: hidden; }
.coo-esforco-bar { height: 100%; background: var(--eds-info); border-radius: 999px; }
.coo-esforco-h { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }

/* ============================================================
   COMERCIAL.FUNIL — C.1 (aba Comercial · Kanban de pipeline)
   Reaproveita .plan-kanban/.plan-col/.plan-kcard (components.css).
   Aqui só o que é específico do funil comercial. Tokens tema-aware,
   zero hex (diretriz feedback_eixo_os_design_system_diretrizes).
   ============================================================ */
/* borda topo por estágio ativo (espelha as cores .plan-col[data-status]) */
.plan-col[data-status="descoberta"]  .plan-col__head { border-bottom-color: var(--baseline); }
.plan-col[data-status="diagnostico"] .plan-col__head { border-bottom-color: var(--eds-info); }
.plan-col[data-status="proposta"]    .plan-col__head { border-bottom-color: var(--eds-amanhecer); }
.plan-col[data-status="negociacao"]  .plan-col__head { border-bottom-color: var(--positive); }

/* totais por coluna (qtd já vem no .plan-col__count; aqui R$ + ponderado) */
.com-col-totais {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  padding: 4px var(--sp-2) 6px;
  font-size: var(--fs-xs); color: var(--text-muted);
  background: var(--baseline-soft); border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.com-col-totais strong { color: var(--text); font-weight: 700; }
.com-col-totais .com-col-pond { color: var(--accent); }

.com-card-empresa { font-size: var(--fs-xs); color: var(--text-muted); margin: 2px 0 0; }
.com-valor { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.com-valor-rec { color: var(--text-muted); font-size: var(--fs-xs); }
.com-seg-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 7px;
}
.com-rec-badge { font-size: 10px; color: var(--accent); font-weight: 600; }

.com-card-acoes { display: flex; gap: 6px; margin-top: var(--sp-1); }
.com-card-acoes .btn { flex: 1; padding: 3px 6px; font-size: var(--fs-xs); }

/* timeline de estágios (modal de detalhe família B) */
.com-timeline { list-style: none; margin: 0; padding: 0; }
.com-timeline li {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2);
  align-items: baseline; padding: 6px 0 6px var(--sp-2);
  border-left: 2px solid var(--border); margin-left: 5px; position: relative;
}
.com-timeline li::before {
  content: ''; position: absolute; left: -5px; top: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}
.com-timeline li.com-tl-aberto::before { background: var(--positive); }
.com-tl-estagio { font-weight: 600; color: var(--text); }
.com-tl-datas { font-size: var(--fs-xs); color: var(--text-muted); }
.com-tl-dur { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.com-detail-sec { margin-top: var(--sp-3); }
.com-detail-sec h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); color: var(--text); }
.com-prop-row {
  display: flex; justify-content: space-between; gap: var(--sp-2); padding: 4px 0;
  font-size: var(--fs-sm); border-bottom: 1px solid var(--border);
}
.com-kpis { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.com-kpi {
  background: var(--baseline-soft); border: 1px solid var(--border);
  border-radius: var(--eds-radius); padding: var(--sp-1) var(--sp-2); min-width: 130px;
}
.com-kpi__label { font-size: var(--fs-xs); color: var(--text-muted); }
.com-kpi__valor { font-size: var(--fs-md); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* C.4 — modal de materialização do ganho */
.com-mat-sec { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.com-mat-sec:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.com-mat-sec h4 {
  margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--text);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.com-mat-tag {
  font-size: var(--fs-2xs); font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--accent); background: var(--baseline-soft);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
.com-mat-modo { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.com-mat-modo label {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-sm); color: var(--text); cursor: pointer;
}
.com-mat-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-2); }
.com-mat-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-2); }
@media (max-width: 560px) {
  .com-mat-grid2, .com-mat-grid3 { grid-template-columns: 1fr; }
}

/* C.4 — lista de deals fechados */
.com-fechados-lista { display: flex; flex-direction: column; gap: var(--sp-1); }
.com-fechado-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-2);
  align-items: center; width: 100%; min-height: var(--tap, 38px);
  text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none;
  font: inherit; color: var(--text);
  background: var(--baseline-soft); border: 1px solid var(--border);
  border-radius: var(--eds-radius); padding: var(--sp-2);
}
.com-fechado-row:hover { border-color: var(--accent); }
.com-fechado-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.com-fechado-nome { font-weight: 600; color: var(--text); }
.com-fechado-valor { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }