/* ------------------------------------------------------------------
   RQTTE Knowledge Base — base styles
   Colors are injected as CSS variables per KB in base.html.
   ------------------------------------------------------------------ */

/* ─── Motion tokens (Impeccable animate · jul/2026) ────────────────
   Regra 100/300/500 aplicada como variáveis. Curvas ease-out (nunca
   bounce/elastic). Todos os componentes reutilizam esses tokens pra
   manter a coreografia consistente. */
:root {
  --dur-instant:  120ms;
  --dur-quick:    200ms;
  --dur-normal:   300ms;
  --dur-slow:     450ms;
  --dur-entrance: 500ms;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Light theme overrides (Impeccable harden · jul/2026) ─────────
   Ativado por [data-theme="light"] no <html>. As mesmas variáveis
   semânticas (--bg-grad-a, --surface, --text…) ganham valores claros;
   as cores de brand (--primary, --secondary) permanecem.

   NOTA CRITICA: muitos componentes usam `var(--card-bg, #0f172a)` e
   `rgba(255,255,255, x)` como surface/border. Sem redefinir --card-bg
   (e sem override desses padroes) o dashboard vira "chrome claro,
   corpo preto". Redefinimos aqui as variaveis + overrides pontuais
   pros paineis principais (PMBOK board, project strip, mini-cards
   financeiros, nav-arrows, barras de progresso).
   Fix jul/2026 apos regressao reportada no Obi-Wan. */
html[data-theme="light"] {
  --bg-grad-a:   #eef1f7;
  --bg-grad-b:   #f8f9fc;
  --surface:     #ffffff;
  --surface-alt: #f3f5f9;
  --surface-hover: #eef2f8;
  --text:        #1a2338;
  --text-muted:  #5b6478;
  --border:      #d8dde5;
  /* Superficies "elevadas" usadas em cards (.pmbok-col, .portal-proj-strip,
     module-card variations). Antes caia no fallback #0f172a → azul-escuro
     em cima do fundo claro. Agora branco puro (contraste com surface-alt
     do body). */
  --card-bg:     #ffffff;
  --card-bg-alt: #f7f9fc;
}
/* Overlays sutis que dependiam do preto ficam com preto/branco leve. */
html[data-theme="light"] body {
  color: var(--text);
}
html[data-theme="light"] .pmbok-tile {
  background: #ffffff;
  border-color: rgba(20,30,55,0.10);
  color: var(--text);
}
html[data-theme="light"] .pmbok-tile:hover {
  background: #f5f7fb;
  border-color: rgba(20,30,55,0.22);
  box-shadow: 0 6px 16px rgba(20,30,55,0.08);
}
html[data-theme="light"] .pmbok-tile-meta { color: var(--text-muted); }
html[data-theme="light"] .pmbok-col { border-color: rgba(20,30,55,0.10); }
html[data-theme="light"] .pmbok-col:hover { border-color: rgba(20,30,55,0.20); }
html[data-theme="light"] .pmbok-col-head h2 { color: var(--text); }
html[data-theme="light"] .pmbok-tile-badge {
  background: rgba(99,102,241,0.14);
  color: #4338ca;
  border-color: rgba(99,102,241,0.28);
}
html[data-theme="light"] .portal-proj-strip {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="light"] .proj-cards-nav {
  background: rgba(20,30,55,0.04);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="light"] .proj-cards-nav:hover {
  background: rgba(20,30,55,0.10);
}
html[data-theme="light"] .proj-cards-track .proj-card {
  border-right-color: var(--border);
}
/* Mini-cards financeiros no card "Alocacoes & Impacto Fin.". */
html[data-theme="light"] .module-card .rh-fin-mini-card {
  background: #ffffff;
  border-color: rgba(20,30,55,0.10);
}
html[data-theme="light"] .module-card:hover .rh-fin-mini-card {
  background: #f5f7fb;
  border-color: rgba(20,30,55,0.18);
  box-shadow: 0 4px 14px rgba(20,30,55,0.08);
}
html[data-theme="light"] .module-card .rh-fin-mini-pa {
  background: rgba(20,30,55,0.05);
  color: var(--text-muted);
}
html[data-theme="light"] .module-card .rh-fin-mini-pct {
  background: rgba(20,30,55,0.04);
  border-color: rgba(20,30,55,0.10);
  color: var(--text-muted);
}
html[data-theme="light"] .module-card .rh-fin-mini--margin {
  background: rgba(93,211,158,0.08);
  border-color: rgba(93,211,158,0.28);
}
/* Barra de progresso do card "Avaliacao do Contrato". */
html[data-theme="light"] .module-card .cs-bar {
  background: rgba(20,30,55,0.05);
}
html[data-theme="light"] .contract-tab {
  background: rgba(20,30,55,0.03);
}
/* Input em modo edicao de contrato. */
html[data-theme="light"] .ce-input {
  background: #ffffff;
  color: var(--text);
}
html[data-theme="light"] .header {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0));
}
/* Cores de radial-gradient do body invertidas via variáveis já cobre.
   Sombras dark ficam suaves no light. */
html[data-theme="light"] .modal,
html[data-theme="light"] .nav-user-pop {
  box-shadow: 0 12px 32px rgba(20,30,55,0.12);
}
/* PMs no card do projeto: role pill, DM link hover, slack badge. */
html[data-theme="light"] .pm-role {
  background: rgba(20,30,55,0.03);
}
html[data-theme="light"] .pm-dm-link:hover {
  background: rgba(20,30,55,0.05);
}
html[data-theme="light"] .pm-dm-link:hover .pm-name {
  color: var(--text);
}
html[data-theme="light"] .pm-slack-badge {
  background: rgba(20,30,55,0.05);
}
/* Portal PMBOK head (layout legado — cobrimos por seguranca): stat
   badges indigo, area cards e counters. */
html[data-theme="light"] .pmbok-portal-stat {
  background: rgba(99,102,241,0.10);
  border-color: rgba(99,102,241,0.28);
  color: #4338ca;
}
html[data-theme="light"] .pmbok-portal-stat .sf-open { color: #4338ca; }
html[data-theme="light"] .pmbok-area:hover {
  border-color: rgba(20,30,55,0.18);
}
html[data-theme="light"] .pmbok-area-count {
  background: rgba(20,30,55,0.06);
  color: var(--text-muted);
}
html[data-theme="light"] .pmbok-empty {
  border-color: rgba(20,30,55,0.12);
  color: var(--text-muted);
}
/* Contract tabs (page Avaliacao do Contrato). */
html[data-theme="light"] .contract-tab {
  color: var(--text-muted);
  border-color: var(--border);
}

/* ─── Chrome toggles: tema + idioma (Impeccable harden) ────────────
   Vivem na .nav-links. Persist via localStorage, auto-detect via
   prefers-color-scheme / navigator.language, respect keyboard.
   Focus-visible ring para screen readers + tab-nav. */
.nav-chrome-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 6px;
}
.chrome-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  transition:
    background   var(--dur-quick, 200ms) var(--ease-out-quart, ease-out),
    border-color var(--dur-quick, 200ms) var(--ease-out-quart, ease-out),
    color        var(--dur-quick, 200ms) var(--ease-out-quart, ease-out),
    transform    var(--dur-quick, 200ms) var(--ease-out-quart, ease-out);
  user-select: none;
}
.chrome-toggle:hover {
  color: var(--text);
  border-color: var(--primary);
  background: var(--surface);
}
.chrome-toggle:focus-visible {
  outline: none;
  border-color: var(--primary);
  /* Halo derivado do próprio primary do KB — antes hardcoded em azul
     (`rgba(0,156,222,0.30)`), o que ficava incongruente no Solar (rosa)
     e Yoda (verde). Achado A5 do review global, jul/2026. */
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 32%, transparent);
}
.chrome-toggle:active {
  transform: scale(0.96);
  transition-duration: var(--dur-instant, 120ms);
}
.chrome-toggle .ico {
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Theme toggle mostra icone conforme estado atual. */
.chrome-toggle--theme .theme-sun { display: none; }
.chrome-toggle--theme .theme-moon { display: inline-flex; }
html[data-theme="light"] .chrome-toggle--theme .theme-sun { display: inline-flex; }
html[data-theme="light"] .chrome-toggle--theme .theme-moon { display: none; }

/* Language flags: pill de 3 botões com "on" no idioma ativo. */
.chrome-lang {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  height: 32px;
}
.chrome-lang-btn {
  padding: 0 8px;
  background: transparent;
  /* WCAG AA (4.5:1) no PT/EN/ES: `--text-muted` sobre `--surface` do dark
     ficava em ~3.8:1. `color-mix` traz o alpha do text principal — 78%
     mede em 5.1:1 no dark, 6.2:1 no light. */
  color: color-mix(in oklab, var(--text) 78%, transparent);
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition:
    background var(--dur-quick, 200ms) var(--ease-out-quart, ease-out),
    color      var(--dur-quick, 200ms) var(--ease-out-quart, ease-out),
    transform  var(--dur-quick, 200ms) var(--ease-out-quart, ease-out);
}
.chrome-lang-btn:last-child { border-right: none; }
.chrome-lang-btn:hover:not(.on) {
  background: var(--surface);
  color: var(--text);
}
.chrome-lang-btn:focus-visible {
  outline: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--primary);
}
.chrome-lang-btn.on {
  /* --primary-soft é pastel em todos os KBs. `var(--text)` só passa no
     light theme; no dark theme (default do Lighthouse) --text é near-
     white e falha (1.5:1). Hardcoded near-black passa 11:1+ em qualquer
     tema. */
  background: var(--primary-soft);
  color: #0a0e1a;
}
.chrome-lang-btn:active {
  transform: scale(0.94);
  transition-duration: var(--dur-instant, 120ms);
}
/* Bandeira em SVG inline — renderiza em qualquer SO/navegador (emoji de
   bandeira não funciona no Windows). Sempre visível, inclusive no mobile. */
.chrome-lang-btn .flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 22%, transparent);
  flex: 0 0 auto;
}
/* Text label junto da bandeirinha — só em desktop. */
.chrome-lang-btn .lbl {
  margin-left: 4px;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  font-weight: 700;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .chrome-lang-btn .lbl { display: none; }
  .chrome-toggle { padding: 0 8px; font-size: 0; }
  .chrome-toggle .ico { font-size: 16px; }
}

/* Accessibility: cancela toda motion pra usuários que preferem menos. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Onboarding coach-mark (Impeccable /onboard · jul/2026) ──────────
   Balão contextual que aparece 1x na primeira visita explicando
   Cmd/Ctrl+K (o launcher global). Some ao interagir ou após 8s. */
.coach-mark {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 30;
  max-width: 320px;
  padding: 14px 16px 12px 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.32);
  font-size: 14px;
  line-height: 1.45;
  animation: coach-in 380ms var(--ease-out-quart, ease-out) both;
}
html[data-theme="light"] .coach-mark {
  box-shadow: 0 12px 28px rgba(20,30,55,0.14);
}
.coach-mark__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--primary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 4px 0;
}
.coach-mark__body {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 10px 0;
}
.coach-mark__body kbd {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  color: var(--text);
}
.coach-mark__dismiss {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.coach-mark__dismiss:hover { color: var(--text); border-color: var(--primary); }
.coach-mark--exit { animation: coach-out 240ms var(--ease-out-quart, ease-out) both; }
@keyframes coach-in  { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes coach-out { from { opacity: 1; transform: translateY(0);    } to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  .coach-mark, .coach-mark--exit { animation: none !important; }
}

/* ─── Empty states + Celebration (Impeccable /delight + /onboard) ─────
   Sistema unificado para "não tem nada aqui ainda" e "acabou de rolar
   algo bom". Respeita The Flat-By-Default Rule (zero sombra colorida
   em repouso) e prefers-reduced-motion. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  color: var(--text-muted);
  max-width: 480px;
  margin: 24px auto;
}
.empty-state__illustration {
  font-size: 40px;
  line-height: 1;
  opacity: 0.42;
  user-select: none;
  filter: grayscale(0.4);
}
.empty-state__title {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.empty-state__body {
  font-size: 14px;
  line-height: 1.55;
  max-inline-size: 42ch;
  margin: 0;
}
.empty-state__actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Celebration micro-moment. Aplicado a um elemento momentâneo (banner,
   badge, tile). Faz um pulse único e depois desliga. Respeita reduced. */
@keyframes celebrate-pulse {
  0%   { transform: scale(1);    filter: brightness(1); }
  40%  { transform: scale(1.04); filter: brightness(1.10); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.celebrate {
  animation: celebrate-pulse 620ms var(--ease-out-quart, ease-out) both;
  transform-origin: center;
  will-change: transform, filter;
}
@media (prefers-reduced-motion: reduce) {
  .celebrate { animation: none !important; }
}

/* Spark: sublinhado sutil e brevemente visível pra chamar atenção
   a um item novo (badge, tile recém-adicionado). Sem cores berrantes. */
.spark {
  position: relative;
}
.spark::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  animation: spark-in 700ms var(--ease-out-quart, ease-out) 200ms both;
}
@keyframes spark-in {
  from { transform: scaleX(0);   opacity: 0; }
  60%  { transform: scaleX(1);   opacity: 1; }
  to   { transform: scaleX(0.6); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .spark::after { animation: none !important; transform: none; opacity: 0.5; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at top, var(--bg-grad-b) 0%, var(--bg-grad-a) 70%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-soft); text-decoration: underline; }

.container {
  /* Fluid: usa toda a largura da tela ate 1920px. Assim adapta a
     notebooks (1366-1440), monitores full-HD (1920) e ultra-wide
     (>1920 fica centralizado com max=1920 pra evitar linhas
     kilometricas em telas gigantes). Antes: max-width fixo 1200px
     — deixava barras pretas laterais nas telas modernas. */
  max-width: min(100%, 1920px);
  margin: 0 auto;
  padding: 24px 28px 64px 28px;
}
/* Variant used on data-heavy pages (e.g. /rh/rrs) — uses the entire
   window width with a comfortable side padding. Stops short of edge-to-
   edge on huge displays so eye-tracking stays manageable. */
.container.container--wide {
  max-width: min(100%, 1920px);
  padding-left: 20px;
  padding-right: 20px;
}

/* ------------------------------------------------------------------
   Header / nav
   ------------------------------------------------------------------ */
.header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0));
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(6px);
}

.logo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), rgba(255,255,255,0) 35%),
    linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0c0c0c;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1px;
  box-shadow: 0 0 24px 0 var(--primary-soft);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.logo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  pointer-events: none;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}

/* Logo do cliente final entre .brand e .nav-links. Marca branca discreta
   no header dark, centralizada no espaco que sobra. So aparece quando
   kb.client_logo_path esta setado (Solar=Coca-Cola, Obi-Wan/Anakin=
   DATAPREV). `:has()` libera o brand do flex:1 pra abrir espaco pro
   logo respirar; navegadores sem :has (raros em jun/2026) caem no
   layout antigo sem logo (sem regressao). */
.header:has(.header-client-logo) .brand { flex: 0 1 auto; }
.header-client-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
/* IMPORTANTE: usa :not(--cube) pra escopar o cartao branco SO ao
   render estatico. No cube, o "card" branco vive na face (.logo-cube__face)
   — se aplicassemos tambem na <img>, virava cartao-dentro-de-cartao
   (especialmente com PNGs que tem fundo branco embutido, ex.: dataprev). */
.header-client-logo:not(.header-client-logo--cube) img {
  display: block;
  height: 46px;
  max-width: 220px;
  width: auto;
  object-fit: contain;
  background: #FFFFFF;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}
@media (max-width: 900px) {
  /* Em viewport apertada, esconde o logo do cliente — header ja fica
     denso e o brand+nav tem prioridade. Volta a aparecer >900px. */
  .header-client-logo { display: none; }
  .header:has(.header-client-logo) .brand { flex: 1; }
}

/* ── Cube-flip do logo do cliente ────────────────────────────────────
   Quando o KB tem client_logo_secondary_path definido, o template
   renderiza um cubo 3D em vez da <img> estatica. Duas faces opostas
   (frente=cliente, fundo=Salesforce) alternam a cada 3s com transicao
   de ~0.6s pra parecer um cubo girando em torno do eixo Y.

   O fundo branco, o padding e o border-radius vivem nas faces (nao no
   container) pra cada uma ser uma "placa" 3D independente. As alturas/
   max-width espelham .header-client-logo img pra preservar o layout. */
.header-client-logo--cube {
  /* sobrescreve flex: o cubo tem largura fixa (~220px), nao precisa
     esticar pra preencher o slot — fica centralizado pelo justify
     herdado do .header-client-logo. */
  flex: 0 1 auto;
  min-width: 220px;
}
.logo-cube {
  display: block;
  perspective: 800px;
  height: 46px;
  width: 220px;
  max-width: 100%;
}
.logo-cube__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: logo-cube-flip 6s infinite ease-in-out;
  will-change: transform;
}
.logo-cube__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  padding: 6px 14px;
  box-sizing: border-box;
}
.logo-cube__face img {
  display: block;
  max-height: 34px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
/* translateZ cria a profundidade do "cubo" — 23px = metade da altura,
   da um cubo achatado mas com volume perceptivel. */
.logo-cube__face--front { transform: rotateY(0deg)   translateZ(23px); }
.logo-cube__face--back  { transform: rotateY(180deg) translateZ(23px); }

/* Keyframes: pausa em cada face por ~2.7s, vira em ~0.3s, repete.
   Total = 6s (3s por face). */
@keyframes logo-cube-flip {
  0%,   45%  { transform: rotateY(0deg); }
  55%,  95%  { transform: rotateY(180deg); }
  100%       { transform: rotateY(360deg); }
}

/* Acessibilidade: respeita prefers-reduced-motion — para a animacao e
   mostra so a face frontal (sem motion sickness). */
@media (prefers-reduced-motion: reduce) {
  .logo-cube__inner { animation: none; }
}
.brand-name-row {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  min-width: 0;
}
.brand-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}
.brand-version {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  opacity: 0.75;
  flex-shrink: 0;
  line-height: 1;
}
.brand-tag {
  color: var(--text-muted);
  font-size: 13px;
}

.nav-links {
  display: flex;
  gap: 12px;
  align-items: center;
}
.nav-item {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  text-decoration: none;
}
.nav-item:hover {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--text);
  text-decoration: none;
}
.nav-item.active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(255,255,255,0.02);
}
.nav-item.primary-btn {
  background: var(--primary);
  color: #0a0a0a;
  border-color: transparent;
}
.nav-item.primary-btn:hover {
  background: var(--primary-soft);
  color: #0a0a0a;
  border-color: transparent;
}
.nav-logout {
  color: var(--text-muted);
}
.nav-logout:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ------------------------------------------------------------------
   Dashboard layout (sidebar with categories)
   ------------------------------------------------------------------ */
.dash-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } }

/* Bloco sticky no topo da coluna da direita do dashboard:
   stats + toolbar + tag-cloud ficam fixos enquanto a lista de
   artigos rola por baixo. Offset 110px = altura do topbar global
   (mesmo valor usado por .cat-sidebar). Background OPACO sobre
   page-bg pra cobrir as linhas de artigos no scroll, com gradiente
   de fade na base pra suavizar a transicao visual. */
.dash-head-sticky {
  position: sticky;
  top: 110px;
  z-index: 12;
  background-color: var(--page-bg, #0a0f1d);
  background-image: linear-gradient(
    var(--page-bg, #0a0f1d) 0%,
    var(--page-bg, #0a0f1d) 88%,
    rgba(10,15,29,0.0) 100%
  );
  padding-top: 4px;
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.dash-head-sticky .stats { margin-bottom: 14px; }
.dash-head-sticky .toolbar { margin-bottom: 10px; }
.dash-head-sticky .tag-cloud { margin-bottom: 0; }

.cat-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 12px;
  position: sticky;
  top: 110px;
}
.cat-sidebar h3 {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 6px 8px 10px 8px;
}
.cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.12s ease;
}
.cat-item:hover {
  background: var(--surface-alt);
  text-decoration: none;
  color: var(--text);
  border-color: var(--border);
}
.cat-item.active {
  background: var(--surface-alt);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.cat-item .count {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--text-muted);
}
.cat-item.active .count {
  background: var(--primary);
  color: #0a0a0a;
  border-color: transparent;
  font-weight: 700;
}

/* ------------------------------------------------------------------
   Stat cards (dashboard)
   ------------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.stat-value {
  font-size: 38px;
  font-weight: 800;
  margin-top: 6px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------
   Toolbar (search + actions)
   ------------------------------------------------------------------ */
.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
/* "+ Nova proposição" é uma ação primária da KB mas distinta dos
   controles de busca/filtro — empurro pro canto direito da toolbar
   pra deixar visualmente separada. */
.toolbar .kb-propor-btn { margin-left: auto; }
/* Botao de export logo apos o propor — mantem agrupados no fim da toolbar. */
.toolbar .kb-export-btn {
  font-size: 12.5px;
  padding: 7px 12px;
  white-space: nowrap;
}
.search-box {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  transition: border-color 0.15s ease;
}
.search-box:focus-within {
  border-color: var(--primary);
}
.search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  flex: 1;
  font-size: 15px;
}
.search-box svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.sort-select, .tag-select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn:hover { background: var(--surface-alt); text-decoration: none; }
.btn-primary {
  background: var(--primary);
  color: #0a0a0a;
  border-color: transparent;
  font-weight: 600;
}
.btn-primary:hover { background: var(--primary-soft); color: #0a0a0a; }
/* Foco visível no CTA. Usa cor de texto (não `--primary`) porque o
   fundo do botão JÁ é primary — outline primary sobre primary sumia.
   Achado B4 do review global, jul/2026. */
.btn-primary:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: #0a0a0a; }
.btn-ghost { background: transparent; }

/* ------------------------------------------------------------------
   Botoes de export (PDF, PPTX, XLSX, DOCX). Definidos no macro
   `_export_button.html`. Visual: icone-so (SVG do formato), tamanho
   fixo, hover sutil. Usados em eap, contract_eval, timecards,
   dashboard, alocacao_diaria. Mesma forma em todas as telas pra
   reconhecimento visual rapido. Acoes (download/POST) via href ou JS.
   ------------------------------------------------------------------ */
.btn-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 80ms;
  line-height: 0;            /* evita altura extra do font do botao */
  text-decoration: none;     /* <a> nao deve sublinhar */
  min-width: 36px;
  min-height: 36px;
}
.btn-export:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}
.btn-export:active { transform: scale(0.97); }
.btn-export[disabled],
.btn-export.is-loading { opacity: 0.55; pointer-events: none; }
.btn-export .export-ico { display: block; }
/* Spinner quando o export esta gerando o arquivo (botao XLSX da
   tela de timecards/alocacao chama fetch). Substitui visualmente
   o icone sem alterar o conteudo do botao — assim a label
   (aria/title) continua valida. */
.btn-export.is-loading .export-ico { animation: btnExportSpin 800ms linear infinite; }
@keyframes btnExportSpin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------
   Botao padrao "Atualizar com Salesforce" — IDENTICO em todas as
   telas que disparam sync (rh_list, timecards, alocacao, contract_eval).
   Mantemos cor oficial #00A1E0 + logo da cloud da SF a esquerda pra
   o usuario reconhecer rapido qual e o botao que fala com SF.
   ------------------------------------------------------------------ */
.btn-sf-sync {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #00A1E0;
  color: #ffffff;
  border: 1px solid #0089be;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, transform 120ms ease,
              box-shadow 120ms ease;
}
.btn-sf-sync:hover {
  background: #0089be;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,161,224,0.32);
}
.btn-sf-sync:active { transform: translateY(1px); }
.btn-sf-sync:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.btn-sf-sync .sf-cloud {
  width: 22px;
  height: auto;
  flex: 0 0 auto;
}
.btn-sf-sync .sf-cloud path { fill: #ffffff; }
/* Badge de pedidos pendentes (rh_list usa) — mantem visual SF. */
.btn-sf-sync .sync-badge {
  background: rgba(255,255,255,0.22);
  color: #ffffff;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  margin-left: 2px;
  font-weight: 700;
}

/* ------------------------------------------------------------------
   Tags
   ------------------------------------------------------------------ */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}
.tag-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
}
.tag-chip:hover { color: var(--text); border-color: var(--primary); text-decoration: none; }
.tag-chip.active {
  color: #0a0a0a;
  background: var(--primary);
  border-color: var(--primary);
}
.tag-chip .count {
  margin-left: 6px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Article list
   ------------------------------------------------------------------ */
.article-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.article-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.15s ease;
  text-decoration: none;
}
.article-row:hover {
  border-color: var(--primary);
  background: var(--surface-alt);
  text-decoration: none;
  transform: translateY(-1px);
}
.article-number {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 17px;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.article-body { min-width: 0; }
.article-name {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.article-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.article-meta .meta-tag {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 11px;
}
.article-arrow { color: var(--text-muted); }

.article-row.shared {
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, var(--surface) 80%);
  border-left: 1px solid var(--secondary);
}
.shared-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--secondary);
  color: #0a0a0a;
  vertical-align: middle;
}

/* ------------------------------------------------------------------
   Article detail
   ------------------------------------------------------------------ */
.article-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 32px;
}
.article-card h1 {
  font-size: 26px;
  margin: 0 0 6px 0;
  color: var(--text);
}
.article-card .article-content {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.crumb {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.crumb a { color: var(--text-muted); }
.crumb a:hover { color: var(--primary); }

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.meta-cell {
  padding: 10px 14px;
  background: var(--surface-alt);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.meta-cell-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.meta-cell-value {
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
  word-break: break-word;
}

/* ------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label,
.field .field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.field input,
.field textarea {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}
.field input:focus,
.field textarea:focus { border-color: var(--primary); }

/* WCAG 2.4.11 / 2.4.13 Focus Appearance — ring de 2px com offset pra
   garantir 3:1 contra qualquer surface. `border-color` sozinho não passa
   no critério de área/contraste. jul/2026, achado B3 do review global. */
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}
.field textarea { min-height: 280px; resize: vertical; font-family: inherit; }

.row-2 {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
}
@media (max-width: 600px) { .row-2 { grid-template-columns: 1fr; } }

.file-input {
  display: inline-block;
  padding: 10px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.file-input:hover { border-color: var(--primary); color: var(--text); }
/* Visualmente esconde o input nativo mas mantem ele acessivel (foco
   por teclado, submit do form). NAO usar display:none — alguns
   browsers nao dispatcham o change event quando o elemento esta
   totalmente removido do layout. */
.file-input input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Estado "tem arquivo" — verde solido pra deixar claro que a selecao
   foi capturada (antes o usuario nao tinha feedback nenhum). */
.file-input--has-file {
  border-style: solid;
  border-color: var(--success);
  background: rgba(60, 200, 120, 0.10);
  color: var(--text);
}
.file-input--has-file:hover { border-color: var(--success); }

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 22px 0;
}

.help {
  font-size: 12.5px;
  color: var(--text-muted);
  /* Linha mais aberta pra acomodar pills/badges inline (action-pill,
     cat-pill etc.) sem que eles se sobreponham ao texto vizinho. */
  line-height: 1.65;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ------------------------------------------------------------------
   Flash messages
   ------------------------------------------------------------------ */
.flashes { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.flash {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  background: var(--surface);
  font-size: 14px;
}
.flash.success {
  border-color: var(--success);
  color: var(--success);
  background: rgba(34,197,94,0.10);
}
.flash.error,
.flash.danger {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(220,38,38,0.10);
}
.flash.info {
  border-color: rgba(56,189,248,0.5);
  color: #7dd3fc;
  background: rgba(14,165,233,0.10);
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.footer {
  text-align: center;
  padding: 26px 12px;
  color: var(--text-muted);
  font-size: 12px;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.footer .force {
  display: inline-block;
  margin-top: 4px;
  opacity: 0.6;
  font-style: italic;
}

/* Empty state */
.empty {
  text-align: center;
  padding: 48px 22px;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 14px;
}

/* Preview box used on /novo */
.preview-box {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 13px;
}
.preview-box .preview-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

/* ------------------------------------------------------------------
   Proposition review (/propor/<id>)
   ------------------------------------------------------------------ */
.review-header { margin-bottom: 18px; }

/* Polish banner — feedback live de "LLM ainda polindo N propostas".
   Aparece só quando há proposta com polished=false. Auto-hide via
   reload da página quando o pending zera. jul/2026 · Impeccable distill. */
.polish-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--primary);
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
}
.polish-banner-spinner {
  width: 22px; height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: polishSpin 0.9s linear infinite;
  flex: 0 0 auto;
}
.polish-banner-body {
  flex: 1;
  line-height: 1.4;
}
.polish-banner-title {
  font-weight: 600;
  color: var(--text);
}
.polish-banner-title strong {
  color: var(--primary);
}
.polish-banner-hint {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted);
}
@keyframes polishSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .polish-banner-spinner { animation-duration: 3s; }
}
.review-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(20, 29, 56, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 18px;
  position: sticky;
  top: 78px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 5;
  backdrop-filter: blur(6px);
}
.review-toolbar .btn-primary { margin-left: auto; }

.prop-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  border-left: 1px solid var(--border);
}
.prop-card.prop-criar { border-left-color: var(--success); }
.prop-card.prop-atualizar { border-left-color: var(--primary); }

/* Variante com logo no canto esquerdo — usada nos headers das páginas
   de fluxo (ex.: Nova ata). O ícone ocupa 44x44, à esquerda, com o
   conteúdo principal alinhado à direita. */
.prop-card--with-icon {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.prop-card--with-icon .prop-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prop-card--with-icon .prop-card-icon .icon {
  width: 100%;
  height: 100%;
}
.prop-card--with-icon > div { min-width: 0; }

/* Hero de "ata pronta" no topo do detail — pega a ação principal
   (abrir Canvas no Slack ou copiar Markdown) e bota num botão grande
   à direita, sem o usuário precisar caçar. */
.ata-hero {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 1px solid var(--success);
}
.ata-hero-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}
.ata-hero-icon .icon {
  width: 100%;
  height: 100%;
  background-color: var(--success);
}
.ata-hero-body { flex: 1 1 auto; min-width: 0; }
.ata-hero-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--success);
  margin-bottom: 2px;
}
.ata-hero-title {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--text);
}
.ata-hero-meta {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.ata-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.btn-lg {
  font-size: 14px;
  padding: 10px 18px;
  font-weight: 600;
}
@media (max-width: 760px) {
  .ata-hero { flex-direction: column; align-items: flex-start; }
  .ata-hero-actions { width: 100%; justify-content: flex-end; }
}

.prop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.prop-include {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}
.prop-include input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.prop-meta { display: inline-flex; gap: 8px; flex-wrap: wrap; }

.action-pill {
  /* inline-block + vertical-align middle pra que o padding vertical
     empurre a line-height do paragrafo e o pill nao "vaze" pra cima
     da linha anterior quando aparece dentro de texto corrido. */
  display: inline-block;
  vertical-align: middle;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 9px;
  line-height: 1.4;
  border-radius: 999px;
  text-transform: uppercase;
}
.action-pill.criar {
  background: rgba(60, 200, 120, 0.15);
  color: var(--success);
  border: 1px solid rgba(60, 200, 120, 0.4);
}
.action-pill.atualizar {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--primary);
}

.cat-pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.sim-pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border: 1px dashed var(--border);
}

.prop-body .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .prop-body .row-2 { grid-template-columns: 1fr; }
}
.prop-body .field { margin-bottom: 12px; }

.prop-content-details {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
}
.prop-content-details > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
}
.prop-tags { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.prop-tags .tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.alert-warning {
  background: rgba(240, 180, 40, 0.12);
  border: 1px solid rgba(240, 180, 40, 0.4);
  color: #f0b428;
  padding: 10px 14px;
  border-radius: 10px;
  margin: 12px 0;
}

/* ------------------------------------------------------------------
   Chat (/conversar)
   ------------------------------------------------------------------ */
.chat-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  height: calc(100vh - 152px);
  min-height: 540px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}
@media (max-width: 880px) {
  .chat-shell { grid-template-columns: 1fr; height: calc(100vh - 120px); }
  .chat-side { display: none; }
}

.chat-side {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 12px;
  background: var(--surface-alt);
}
.chat-new { width: 100%; }
.chat-side-status { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.chip.ok { border-color: var(--success); color: var(--success); }
.chip.off { border-color: var(--danger); color: var(--danger); }

.chat-side-list {
  flex: 1;
  overflow-y: auto;
  margin: 0 -6px;
  padding: 0 6px;
}
.conv-row {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 4px;
  border: 1px solid transparent;
}
.conv-row:hover { background: rgba(255,255,255,0.03); }
.conv-row.active {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.conv-row-title { font-size: 13px; color: var(--text); }
.conv-row.active .conv-row-title { color: var(--primary); font-weight: 600; }
.conv-row-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.chat-side-foot { font-size: 11px; color: var(--text-muted); }
.chat-side-foot code {
  background: rgba(0,0,0,0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
}

.chat-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.chat-head-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.chat-head-title .dim { font-size: 12px; color: var(--text-muted); }
.chat-head-title input {
  background: transparent;
  border: 1px dashed transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  flex: 1;
  min-width: 0;
}
.chat-head-title input:hover, .chat-head-title input:focus {
  border-color: var(--border);
  outline: none;
}
.chat-head-actions { display: flex; gap: 4px; }
.btn-sm { padding: 6px 10px !important; font-size: 12px !important; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chat-empty {
  margin: auto;
  text-align: center;
  max-width: 520px;
  color: var(--text-muted);
}
.chat-empty h2 { color: var(--text); margin-bottom: 8px; }
.chat-suggestions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.chip-btn {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.chip-btn:hover { border-color: var(--primary); color: var(--primary); }

.msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 14px;
  position: relative;
  line-height: 1.55;
  font-size: 14.5px;
  word-wrap: break-word;
}
.msg-user {
  align-self: flex-end;
  background: var(--primary-soft);
  color: var(--text);
  border: 1px solid var(--primary);
  border-bottom-right-radius: 4px;
}
.msg-assistant {
  align-self: flex-start;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.msg-attachment {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 8px;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  display: inline-block;
  align-self: flex-start;
}
.msg-body p:first-child { margin-top: 0; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body pre {
  background: rgba(0,0,0,0.35);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.msg-body code {
  background: rgba(0,0,0,0.25);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
}
.msg-body pre code { background: transparent; padding: 0; }
.msg-body table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13px;
}
.msg-body th, .msg-body td {
  border: 1px solid var(--border);
  padding: 6px 10px;
}
.msg-body th { background: rgba(255,255,255,0.04); }
.msg-body ul, .msg-body ol { padding-left: 22px; }
.msg-body blockquote {
  border-left: 1px solid var(--primary);
  padding-left: 12px;
  color: var(--text-muted);
  margin: 8px 0;
}

.cit-token {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--primary);
}
.cit-token:hover { background: var(--primary); color: white; text-decoration: none; }
.cit-token.unmatched {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}

.citations {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.citation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  text-decoration: none;
}
.citation:hover { border-color: var(--primary); color: var(--primary); }
.citation .cit-num { font-weight: 700; color: var(--primary); }
.citation .cit-score { color: var(--text-muted); font-size: 10px; }

/* Site source citation — aponta pra um card do portal (Cronograma, EAP,
   Stakeholders, Projetos), nao pra um artigo. Visualmente distinta pra
   o usuario reconhecer que eh um dado estrutural do portal, nao um
   artigo da KB. */
.citation--site { background: rgba(63, 169, 245, 0.10); border-color: rgba(63, 169, 245, 0.45); }
.citation--site:hover { background: rgba(63, 169, 245, 0.18); border-color: var(--primary); }
.citation--site .cit-num {
  font-size: 9px;
  letter-spacing: 0.5px;
  background: var(--primary);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
}

.msg-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.msg-act {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.msg-act:hover { color: var(--primary); border-color: var(--primary); }

.thinking { color: var(--text-muted); font-style: italic; }
.thinking .dots {
  display: inline-block;
  animation: dots 1.4s steps(3, end) infinite;
  width: 1.2em;
}
@keyframes dots {
  0% { content: "."; }
  33% { content: ".."; }
  66%, 100% { content: "..."; }
}

.chat-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-form textarea {
  flex: 1;
  resize: none;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  min-height: 44px;
  max-height: 240px;
  line-height: 1.4;
}
.chat-form textarea:focus { outline: none; border-color: var(--primary); }
.chat-file {
  padding: 10px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-muted);
}
.chat-file:hover { border-color: var(--primary); }
.chat-file input { display: none; }
.chat-send { white-space: nowrap; }

/* ------------------------------------------------------------------
   Markdown body (article detail, etc.)
   ------------------------------------------------------------------ */
.markdown-body {
  font-size: 16px;
  line-height: 1.70;
  color: var(--text);
  margin-top: 22px;
  /* Constrain reading length para melhorar legibilidade (Impeccable
     harden — leitura confortavel entre 50-75ch). Cai gracefully em
     containers menores; nao afeta code/pre que ficam full-width. */
  max-inline-size: 72ch;
}
/* Code, pre e tabelas podem quebrar o max-inline-size — mais util
   ver o codigo/tabela inteira do que respeitar largura de leitura. */
.markdown-body pre,
.markdown-body table,
.markdown-body .code-embed { max-inline-size: none; width: 100%; }
/* Anchor links nas headings (Impeccable craft — deep linking).
   Aparecem no hover ao lado do heading. Injetados via JS. */
.markdown-body :is(h1, h2, h3, h4) {
  position: relative;
}
.markdown-body .heading-anchor {
  position: absolute;
  left: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85em;
  padding: 4px 6px;
  border-radius: 4px;
  transition: opacity var(--dur-quick) var(--ease-out-quart),
              color var(--dur-quick) var(--ease-out-quart),
              background var(--dur-quick) var(--ease-out-quart);
}
.markdown-body :is(h1, h2, h3, h4):hover .heading-anchor,
.markdown-body .heading-anchor:focus-visible {
  opacity: 0.7;
}
.markdown-body .heading-anchor:hover { color: var(--primary); opacity: 1; }
.markdown-body .heading-anchor:focus-visible {
  outline: none;
  background: var(--surface-alt);
  box-shadow: 0 0 0 2px var(--primary);
}
.markdown-body .heading-anchor.copied {
  color: var(--success, var(--primary));
  opacity: 1;
}

/* ─── TOC lateral (article page) ────────────────────────────────
   Aparece só quando o artigo tem 3+ h2. Sticky no desktop, colapsavel
   no mobile. Injetado via JS a partir dos headings da .markdown-body. */
.article-toc {
  position: sticky; top: 76px; align-self: start;
  max-width: 240px;
  padding: 12px 14px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.article-toc-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.article-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.article-toc a {
  display: block;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--dur-quick) var(--ease-out-quart),
              color      var(--dur-quick) var(--ease-out-quart),
              border-color var(--dur-quick) var(--ease-out-quart);
}
.article-toc a:hover { color: var(--text); background: var(--surface); }
.article-toc a.active {
  color: var(--primary);
  background: var(--surface);
  border-left-color: var(--primary);
  font-weight: 600;
}
.article-toc li.lvl-3 a { padding-left: 18px; font-size: 12px; }
.article-toc li.lvl-4 a { padding-left: 30px; font-size: 11.5px; }

/* Layout: cria 2 colunas quando o TOC existe (só desktop). */
.article-with-toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 1024px) {
  .article-with-toc { grid-template-columns: 1fr; }
  .article-toc { position: static; max-width: 100%; margin-bottom: 18px; }
}
.markdown-body h1 {
  font-size: 26px;
  margin: 18px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.markdown-body h2 {
  font-size: 20px;
  margin: 26px 0 12px;
  color: var(--primary);
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.markdown-body h3 {
  font-size: 16.5px;
  margin: 20px 0 8px;
  color: var(--secondary);
  font-weight: 700;
}
.markdown-body h4 {
  font-size: 14.5px;
  margin: 16px 0 6px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.markdown-body p { margin: 0 0 12px; }
.markdown-body ul, .markdown-body ol { padding-left: 22px; margin: 8px 0 14px; }
.markdown-body li { margin: 4px 0; }
.markdown-body li > strong:first-child {
  color: var(--primary);
}
.markdown-body strong { color: var(--text); }
.markdown-body code {
  background: rgba(0,0,0,0.25);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
}
.markdown-body pre {
  background: rgba(0,0,0,0.35);
  padding: 14px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  margin: 12px 0;
}
.markdown-body pre code { background: transparent; padding: 0; }
.markdown-body table {
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13.5px;
}
.markdown-body th, .markdown-body td {
  border: 1px solid var(--border);
  padding: 6px 12px;
}
.markdown-body th { background: var(--surface-alt); }
.markdown-body blockquote {
  border-left: 1px solid var(--primary);
  padding: 4px 14px;
  color: var(--text-muted);
  margin: 10px 0;
  background: var(--surface-alt);
  border-radius: 0 6px 6px 0;
}
.markdown-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 22px 0;
}
.markdown-body a { color: var(--primary); }

/* ------------------------------------------------------------------
   Portal home (landing)
   ------------------------------------------------------------------ */
.portal-hero {
  padding: 30px 8px 18px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 24px;
}
.portal-hero h1 { margin: 0 0 6px; font-size: 36px; letter-spacing: -0.5px; }
.portal-hero-tag { color: var(--text-muted); font-size: 16px; margin: 0 0 16px; }
/* Bloco do projeto + PMs no portal home — usa o mesmo partial do RH. */
.portal-hero-project { margin: 0 0 4px; }
.portal-hero-project .proj-line { font-size: 14.5px; }
.portal-hero-project .proj-pms { margin-bottom: 0; }
.portal-hero-meta { display: none; } /* legado — não usar mais */

/* ===================== Portal Home v2 — top strip + projetos =====================
   Layout reformulado:
   1) .portal-top — brand (esquerda) + modulos genericos compactos (direita).
   2) .project-section — uma por projeto SF do KB. Header + 2 cards (Alocacoes
      + Avaliacao do Contrato).
   --------------------------------------------------------------------------- */
.portal-top {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 24px 8px 16px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 22px;
  flex-wrap: wrap;
}

/* Variante --strip: organiza grupos rotulados (Plataforma | Slack Skills)
   numa unica linha horizontal — usado no portal_home. O brand vive no
   navbar global, entao aqui eh so a barra de atalhos. */
.portal-top--strip {
  padding: 16px 8px;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.portal-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 320px;
}
.portal-group-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.portal-group-label .icon {
  width: 13px;
  height: 13px;
  background-color: var(--text-muted);
}
.portal-group-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
/* Divisor vertical entre grupos — vira horizontal em telas estreitas. */
.portal-group-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 22px 4px 0;
}
@media (max-width: 720px) {
  .portal-group-sep {
    width: 100%;
    height: 1px;
    margin: 4px 0;
  }
}

/* Legacy: usado por outras paginas. Mantido por compat. */
.portal-generic-mods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-end;
  flex: 0 1 auto;
  min-width: 0;
}
.gen-mod {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  min-width: 200px;
  max-width: 260px;
  transition: border-color 0.15s, background-color 0.15s, transform 0.1s;
  min-height: 60px;
}
.gen-mod:hover {
  border-color: var(--primary);
  background: var(--surface-alt);
  transform: translateY(-1px);
}
.gen-mod-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(63,169,245,0.10);
  flex-shrink: 0;
}
.gen-mod-icon .icon {
  width: 22px;
  height: 22px;
  background-color: var(--primary);
}

/* (Bloco .portal-skills / .skill-card removido — Slack Skills agora vivem
   no .portal-top--strip como gen-mod--slack, mesmo padrao dos outros.) */
.gen-mod-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.gen-mod-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gen-mod-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gen-mod .ext-arrow {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 2px;
}

/* Seção por projeto SF. Espacamento vertical generoso pra criar a sensacao
   de "areas focadas" como o usuario pediu ("uma area focada para o SECOM"). */
.project-section {
  margin: 0 0 32px;
  padding: 0;
}
.project-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(63,169,245,0.10) 0%, rgba(63,169,245,0.02) 100%);
  border: 1px solid rgba(63,169,245,0.25);
  border-left: 1px solid var(--primary);
  border-radius: 10px;
  margin-bottom: 14px;
}
.psh-title {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.psh-title h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.1px;
  color: var(--primary);
}
.psh-official {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1px;
}
.psh-pms {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.psh-pm {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.psh-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.psh-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
}
.psh-pm-name {
  color: var(--text);
  font-weight: 600;
}

/* Grid de 2 cards por projeto (Alocacoes + Contrato). Em telas estreitas
   quebra pra 1 coluna. */
.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
}
/* Cards de projeto usam o mesmo .module-card de base mas com altura
   minima alinhada pra ficarem do mesmo tamanho lado a lado. */
.project-card { min-height: 320px; }

.modules-grid {
  display: grid;
  /* Legado — mantido caso outras paginas usem (a pagina foi refatorada
     mas alguns lugares ainda renderizam este grid). */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* Filter chip "ativo" (já existe filter-chip; só faltou o destaque). */
.filter-chip--active {
  background: rgba(63,169,245,0.30);
  border-color: var(--primary);
  color: var(--text);
}

/* Variante de sucesso pro botao copiar (feedback temporario). */
.btn.btn-success {
  background: var(--success);
  color: #082018;
  border-color: var(--success);
}
.module-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease;
  /* Grid items default to min-width:auto e crescem com o maior filho.
     Travamos em 0 pra deixar o grid (.modules-grid) respeitar a column
     track e o conteúdo (titulos longos, métricas) truncar/quebrar. */
  min-width: 0;
  overflow: hidden;
}
.module-card .module-body {
  /* Mesma lógica: filho do flex parent precisa de min-width:0 pra que
     overflow:hidden e text-overflow:ellipsis funcionem nos descendentes. */
  min-width: 0;
  flex: 1 1 auto;
}
.module-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  text-decoration: none;
}
/* Ícones monocromáticos line-art. Usamos mask-image pra pintar o SVG
   com a cor do tema (--primary). O elemento .icon fica com bg na cor
   do tema e a máscara recorta o desenho — assim trocar de Obi-Wan
   pra Anakin (ou mudar primary) atualiza todos os ícones de uma vez,
   sem precisar tocar SVG. SVG fonte mora em app/static/img/icons/*.svg
   com stroke=currentColor (não usado quando aplicado como máscara).
   `.icon` é genérico: serve nos cards do portal (48x48) e na nav
   (18x18 — herdam tamanho do contexto via width/height 100%). */
.icon {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
/* `?v=2` força o browser a re-fetchar os SVGs após o fix de encoding
   (home/news estavam em Latin-1 e foram silenciosamente cacheados
   como mascaras invalidas). Bump quando trocar o arquivo. */
.icon-home  { -webkit-mask-image: url('img/icons/home.svg?v=2');  mask-image: url('img/icons/home.svg?v=2');  }
.icon-admin { -webkit-mask-image: url('img/icons/admin.svg?v=1'); mask-image: url('img/icons/admin.svg?v=1'); }
.icon-agents { -webkit-mask-image: url('img/icons/agents.svg?v=1'); mask-image: url('img/icons/agents.svg?v=1'); }
.icon-consumo { -webkit-mask-image: url('img/icons/consumo.svg?v=1'); mask-image: url('img/icons/consumo.svg?v=1'); }
.icon-kb    { -webkit-mask-image: url('img/icons/kb.svg?v=2');    mask-image: url('img/icons/kb.svg?v=2');    }
.icon-rh    { -webkit-mask-image: url('img/icons/rh.svg?v=2');    mask-image: url('img/icons/rh.svg?v=2');    }
.icon-news  { -webkit-mask-image: url('img/icons/news.svg?v=2');  mask-image: url('img/icons/news.svg?v=2');  }
.icon-gantt { -webkit-mask-image: url('img/icons/gantt.svg?v=1'); mask-image: url('img/icons/gantt.svg?v=1'); }
.icon-slack  { -webkit-mask-image: url('img/icons/slack.svg?v=1');  mask-image: url('img/icons/slack.svg?v=1');  }
.icon-gemini { -webkit-mask-image: url('img/icons/gemini.svg?v=2'); mask-image: url('img/icons/gemini.svg?v=2'); }
.icon-eap    { -webkit-mask-image: url('img/icons/eap.svg?v=3');    mask-image: url('img/icons/eap.svg?v=3');    }
.icon-alloc  { -webkit-mask-image: url('img/icons/alloc.svg?v=2');  mask-image: url('img/icons/alloc.svg?v=2');  }
.icon-lideres{ -webkit-mask-image: url('img/icons/lideres.svg?v=3');mask-image: url('img/icons/lideres.svg?v=3');}
.icon-drive  { -webkit-mask-image: url('img/icons/drive.svg?v=1');  mask-image: url('img/icons/drive.svg?v=1');  }
.icon-stakeholders { -webkit-mask-image: url('img/icons/stakeholders.svg?v=1'); mask-image: url('img/icons/stakeholders.svg?v=1'); }
.icon-wbs    { -webkit-mask-image: url('img/icons/wbs.svg?v=2');    mask-image: url('img/icons/wbs.svg?v=2');    }
.icon-contract  { -webkit-mask-image: url('img/icons/contract.svg?v=1');  mask-image: url('img/icons/contract.svg?v=1');  }
.icon-expenses   { -webkit-mask-image: url('img/icons/expenses.svg?v=1');   mask-image: url('img/icons/expenses.svg?v=1');   }
.icon-timecards { -webkit-mask-image: url('img/icons/timecards.svg?v=1'); mask-image: url('img/icons/timecards.svg?v=1'); }
.icon-planner   { -webkit-mask-image: url('img/icons/planner.svg?v=1');   mask-image: url('img/icons/planner.svg?v=1');   }
.icon-domain_mapper { -webkit-mask-image: url('img/icons/domain_mapper.svg?v=2'); mask-image: url('img/icons/domain_mapper.svg?v=2'); }
.icon-knowledge_graph { -webkit-mask-image: url('img/icons/knowledge_graph.svg?v=1'); mask-image: url('img/icons/knowledge_graph.svg?v=1'); }
.icon-lessons        { -webkit-mask-image: url('img/icons/lessons.svg?v=1');        mask-image: url('img/icons/lessons.svg?v=1');        }
.icon-atas_generator { -webkit-mask-image: url('img/icons/atas_generator.svg?v=1'); mask-image: url('img/icons/atas_generator.svg?v=1'); }
.icon-calendar_off   { -webkit-mask-image: url('img/icons/calendar_off.svg?v=1');   mask-image: url('img/icons/calendar_off.svg?v=1');   }
.icon-schedule        { -webkit-mask-image: url('img/icons/schedule.svg?v=2');        mask-image: url('img/icons/schedule.svg?v=2');        }
.icon-library        { -webkit-mask-image: url('img/icons/library.svg?v=1');        mask-image: url('img/icons/library.svg?v=1');        }
.icon-wa_ping_monitor { -webkit-mask-image: url('img/icons/wa_ping_monitor.svg?v=1'); mask-image: url('img/icons/wa_ping_monitor.svg?v=1'); }
.icon-environments    { -webkit-mask-image: url('img/icons/environments.svg?v=2');    mask-image: url('img/icons/environments.svg?v=2');    }
.icon-risks           { -webkit-mask-image: url('img/icons/risks.svg?v=1');           mask-image: url('img/icons/risks.svg?v=1');           }
.icon-todo            { -webkit-mask-image: url('img/icons/todo.svg?v=1');            mask-image: url('img/icons/todo.svg?v=1');            }
.icon-error_backlog   { -webkit-mask-image: url('img/icons/error_backlog.svg?v=1');   mask-image: url('img/icons/error_backlog.svg?v=1');   }
.icon-pulse_summary   { -webkit-mask-image: url('img/icons/pulse_summary.svg?v=1');   mask-image: url('img/icons/pulse_summary.svg?v=1');   }

/* ─── Icones PMBOK (10 areas de conhecimento) ─────────────────────── */
.icon-pmbok-integracao          { -webkit-mask-image: url('img/icons/pmbok-integracao.svg?v=1');          mask-image: url('img/icons/pmbok-integracao.svg?v=1');          }
.icon-pmbok-escopo              { -webkit-mask-image: url('img/icons/pmbok-escopo.svg?v=1');              mask-image: url('img/icons/pmbok-escopo.svg?v=1');              }
.icon-pmbok-cronograma          { -webkit-mask-image: url('img/icons/pmbok-cronograma.svg?v=1');          mask-image: url('img/icons/pmbok-cronograma.svg?v=1');          }
.icon-pmbok-custos              { -webkit-mask-image: url('img/icons/pmbok-custos.svg?v=1');              mask-image: url('img/icons/pmbok-custos.svg?v=1');              }
.icon-pmbok-qualidade           { -webkit-mask-image: url('img/icons/pmbok-qualidade.svg?v=1');           mask-image: url('img/icons/pmbok-qualidade.svg?v=1');           }
.icon-pmbok-recursos            { -webkit-mask-image: url('img/icons/pmbok-recursos.svg?v=1');            mask-image: url('img/icons/pmbok-recursos.svg?v=1');            }
.icon-pmbok-comunicacoes        { -webkit-mask-image: url('img/icons/pmbok-comunicacoes.svg?v=1');        mask-image: url('img/icons/pmbok-comunicacoes.svg?v=1');        }
.icon-pmbok-riscos              { -webkit-mask-image: url('img/icons/pmbok-riscos.svg?v=1');              mask-image: url('img/icons/pmbok-riscos.svg?v=1');              }
.icon-pmbok-aquisicoes          { -webkit-mask-image: url('img/icons/pmbok-aquisicoes.svg?v=1');          mask-image: url('img/icons/pmbok-aquisicoes.svg?v=1');          }
.icon-pmbok-partes_interessadas { -webkit-mask-image: url('img/icons/pmbok-partes-interessadas.svg?v=1'); mask-image: url('img/icons/pmbok-partes-interessadas.svg?v=1'); }

/* =================== EAP (Estrutura Analitica do Projeto) ====================
   Visual = ORGANOGRAMA top-down (mesmo padrao do PDF base do cliente),
   renderizado direto na pagina /rh/eap. Cores 1:1 com a legenda do PDF:
     nao-iniciado  -> verde   #5B9B4B
     em-andamento  -> amarelo #E8B932
     atrasado      -> vermelho #C92E2E
     concluido     -> azul    #4A90C8
     cancelado     -> preto   #101010
     suspenso      -> roxo    #A23BBD
   Texto branco em todos exceto amarelo (precisa de texto preto pra contraste). */

:root {
  --eap-nao-iniciado: #5B9B4B;
  --eap-em-andamento: #E8B932;
  --eap-atrasado:     #C92E2E;
  --eap-concluido:    #4A90C8;
  --eap-cancelado:    #101010;
  --eap-suspenso:     #A23BBD;
}

/* Resumo de progresso (mantem). */
.eap-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-wrap: wrap;
}
.eap-summary-pct {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 280px;
  min-width: 0;
}
.eap-summary-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.eap-summary-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--eap-concluido);
  transition: transform 0.3s ease;
  will-change: transform;
}
.eap-summary-label { font-size: 13px; }

/* ============================ ORGANOGRAMA ================================
   Replica exatamente o layout do PDF base / do .pptx exportado:
   - Fundo branco (mesmo no tema escuro do app — esse modulo eh visual de
     apresentacao e precisa contrastar com o resto).
   - Caixa-raiz centralizada no topo.
   - N colunas de larguras IGUAIS (CSS Grid repeat).
   - Frente colorida no topo de cada coluna; sub-frentes empilhadas embaixo.
   - SVG overlay (.org-lines) com linhas conectando tudo, desenhadas por JS
     apos o layout finalizar. Como o SVG tem pointer-events:none, ele nao
     atrapalha o drag-and-drop nas caixas embaixo.
*/

.org-chart {
  /* Viewport com altura fixa e overflow hidden. Conteudo interno
     (.org-canvas) eh transformado com translate+scale via JS (zoom
     com wheel no cursor, pan com drag de fundo, auto-fit-to-screen). */
  position: relative;
  background: #FFFFFF;
  color: #102A4E;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 0 0 16px;
  /* Altura: ocupa o maximo possivel da viewport — header + legenda
     + margens externas. Use min-height pra projetos minusculos. */
  height: calc(100vh - 280px);
  min-height: 420px;
  overflow: hidden;
  cursor: grab;
}
.org-chart.org-chart--panning { cursor: grabbing; }
.org-chart.org-chart--dragging { cursor: grabbing; }

/* Canvas transformavel — origem 0,0 (top-left) pra que zoomAt() faca
   contas simples. JS aplica `transform: translate(tx,ty) scale(s)`. */
.org-canvas {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  padding: 24px 18px 30px;
  /* Largura "natural" do conteudo: deixa o grid de columns
     dimensionar livremente, e o JS calcula bounding box via
     scrollWidth/Height pro fit-to-screen. */
  display: block;
  width: max-content;
  min-width: 100%;
}

/* Barra de controles do viewport — flutua no canto sup. direito,
   sobre o canvas. Pequena, discreta, com hit-area generosa. */
.org-chart-controls {
  position: absolute;
  top: 10px; right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(16, 42, 78, 0.12);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(16, 42, 78, 0.10);
  font-size: 12px;
  color: #102A4E;
  user-select: none;
}
.org-ctrl-btn {
  background: transparent;
  border: 0;
  padding: 4px 9px;
  border-radius: 5px;
  color: #102A4E;
  font-size: 14px; font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 100ms ease;
}
.org-ctrl-btn:hover { background: rgba(16, 42, 78, 0.08); }
.org-ctrl-btn:active { background: rgba(16, 42, 78, 0.14); }
.org-ctrl-btn--fit { font-size: 11.5px; padding: 4px 8px; }
.org-ctrl-zoom {
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 600;
  color: #4a5e7e;
  cursor: pointer;
  padding: 4px 4px;
  border-radius: 4px;
}
.org-ctrl-zoom:hover { background: rgba(16, 42, 78, 0.06); color: #102A4E; }
.org-ctrl-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(16, 42, 78, 0.18);
  margin: 0 2px;
}

.org-root-row {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;          /* espaco pra raiz -> tronco -> Frentes */
  position: relative;
  z-index: 2;
}

.org-columns {
  /* SEMPRE 1 fileira horizontal de Frentes — nunca quebra.
     `grid-auto-flow: column` cria uma coluna implicita por filho
     (`.org-col`), e Frentes flanqueadas (que tem `grid-column: span 2`
     via `:has(.org-subs--flanked)`) ganham 2 tracks adjacentes. O grid
     cresce horizontalmente conforme necessario; o canvas tem
     `width: max-content` e o `fitToScreen()` do JS aplica zoom out
     pra encaixar tudo na viewport. Antes usavamos
     `repeat(auto-fit, minmax(150px, 1fr))`, que forcava wrap pra
     linha de baixo assim que a soma das larguras minimas excedia o
     container — bug classico com >6-7 Frentes ou com Frentes
     flanqueadas no obiwan (Frentes 7/8 caiam pra baixo). */
  display: grid;
  grid-auto-flow: column;
  /* Largura FIXA por Frente — todas as colunas do mesmo tamanho,
     independentemente de quantas estao visiveis. Antes usavamos
     `minmax(150px, 1fr)`: com o filtro "So ativas" escondendo colunas
     inteiras, as poucas restantes esticavam via `1fr` pra preencher o
     canvas (min-width:100%) e ficavam largas + espalhadas. Frentes
     flanqueadas ocupam 2 desses tracks (grid-column: span 2). */
  grid-auto-columns: 172px;
  /* Centraliza o bloco de Frentes quando sobra espaco (poucas colunas
     apos o filtro) — sem isso ficavam encostadas a esquerda. */
  justify-content: center;
  gap: 6px 10px;
  align-items: start;
  position: relative;
  z-index: 2;
}

.org-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.org-subs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 24px;              /* gap entre pai e 1o filho */
  /* Espaco a esquerda das subs pro tronco lateral SVG caber (estilo
     WBS bracket: vertical lateral + horizontais conectando cada sub).
     Em todas as profundidades o bracket se repete, entao a indentacao
     se acumula naturalmente conforme nivel cresce. */
  padding-left: 20px;
  min-height: 8px;
}
/* Niveis 2+ ficam um pouco mais "compactos": menos margin-top entre
   pai e filhos (24->14px) pra evitar arvores enormes verticalmente. */
.org-subs--depth-2 { margin-top: 16px; padding-left: 18px; }
.org-subs--depth-3 { margin-top: 14px; padding-left: 16px; }
.org-subs--depth-4 { margin-top: 12px; padding-left: 14px; }
.org-subs--depth-5,
.org-subs[class*="--depth-"]:where(.org-subs--depth-6, .org-subs--depth-7, .org-subs--depth-8, .org-subs--depth-9, .org-subs--depth-10) {
  margin-top: 10px;
  padding-left: 12px;
}
/* Layout "flanqueado" (obiwan-only, Frentes com >12 sub-frentes):
   sub-frentes ficam em 2 colunas ao lado do ret. da Frente,
   conectadas por SVG. A distribuicao concreta (grid-column/row)
   eh feita via inline style pelo JS `applyFlankPositions`, que
   roda no init e apos cada mutacao no DOM (drag/add/delete).
   Aqui so definimos a "moldura" (grid + gaps + padding lateral
   simetrico pra abrir espaco pros dois troncos verticais). */
.org-subs--flanked {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Padding + col-gap calibrados pra que 2 folhas de `--eap-leaf-w`
     (148px) caibam EXATAMENTE no col `span 2` (2x172px track + 10px
     gap = 354px): 2*148 + 26 (col-gap) + 2*16 (padding) = 354. Assim
     a folha flanqueada tem a MESMA largura da folha de uma Frente
     normal (nao ha mais o antigo ~140px vs ~152px). O col-gap tambem
     abre espaco pro tronco vertical do conector de cada coluna. */
  gap: 6px 26px;
  padding-left: 16px;
  padding-right: 16px;
}
.org-subs--flanked > .org-box {
  min-width: 0;
}
/* Frente que tem sub-frentes flanqueadas precisa de 2x a largura de
   uma col normal (uma coluna do grid pra col-esq das subs + outra
   pra col-dir). Usamos `:has()` (baseline moderno) pra que a col
   inteira dessa Frente ocupe `span 2` tracks do `.org-columns`.
   E alinhamos os itens ao centro pra Frente ficar sobre o meio das
   duas colunas de subs. */
.org-col:has(.org-subs--flanked) {
  grid-column: span 2;
  align-items: center;
}
.org-col:has(.org-subs--flanked) > .org-box--frente {
  /* Frente flanqueada fica centrada sobre as 2 colunas de subs, mas com
     a MESMA largura (172px = 1 track) de uma Frente normal — antes usava
     max-width:240px, o que deixava as Frentes flanqueadas visivelmente
     mais largas que as demais ("cards diferentes entre frentes"). */
  align-self: center;
  width: 172px;
  max-width: 172px;
}
/* No modo edicao, container vazio fica discreto por padrao (so
   uma marca leve). Cresce VISIVELMENTE durante o drag pra virar
   dropzone clara. */
.org-chart--edit .org-subs:empty {
  min-height: 10px;
  margin-top: 6px;
}
/* Drag em curso: TODAS as .org-subs viram dropzones visiveis (borda
   azul + leve fundo), e as vazias crescem pra facilitar drop. */
.org-chart--dragging .org-subs {
  outline: 1px dashed rgba(63, 169, 245, 0.55);
  outline-offset: -1px;
  background: rgba(63, 169, 245, 0.05);
  border-radius: 4px;
  min-height: 28px;
}
.org-chart--dragging .org-subs:empty {
  min-height: 42px;
  background: rgba(63, 169, 245, 0.12);
  outline-color: rgba(63, 169, 245, 0.85);
  position: relative;
}
.org-chart--dragging .org-subs:empty::before {
  content: "Solte aqui pra adicionar como filho";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  color: rgba(16, 42, 78, 0.55);
  font-style: italic;
  pointer-events: none;
}

/* Caixinhas — fundo opaco com cor solida do status. */
.org-box {
  position: relative;
  background: var(--eap-nao-iniciado);
  color: #FFFFFF;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 10.5px;
  line-height: 1.25;
  text-align: center;
  min-height: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  user-select: none;
}
.org-box--root {
  min-width: 180px;
  max-width: 220px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  min-height: 40px;
}
.org-box--frente {
  font-weight: 700;
  font-size: 11px;
  min-height: 46px;
  padding: 7px 8px;
}
.org-box--sub {
  font-size: 10px;
  min-height: 38px;
  padding: 6px 8px;
}
/* Niveis profundos: micro-ajustes pra hierarquia visual ficar legivel
   em arvores N+ niveis sem visual ficar caotico. */
.org-box--depth-2 { font-size: 9.5px; min-height: 34px; padding: 5px 7px; }
.org-box--depth-3 { font-size: 9px;   min-height: 32px; padding: 5px 7px; }
.org-box--depth-4 { font-size: 8.8px; min-height: 30px; padding: 4px 6px; }
.org-box--depth-5,
.org-box[class*="--depth-"]:where(.org-box--depth-6, .org-box--depth-7, .org-box--depth-8, .org-box--depth-9, .org-box--depth-10) {
  font-size: 8.5px;
  min-height: 28px;
  padding: 4px 6px;
}
/* Entregaveis (folhas): LARGURA e altura FIXAS e uniformes pra todas as
   caixas ficarem do mesmo tamanho, independente do tamanho do nome, da
   profundidade (depth), de estar numa Frente flanqueada ou nao, ou da
   presenca da linha de avatares (Matriz de Lideres).

   ATENCAO (bug historico "cards nao ficam iguais"): a largura das folhas
   NAO pode ser derivada do container. Antes, sem `width` fixo, a folha
   herdava a largura do `.org-subs`/track do grid — que variava:
     - Frente NORMAL  -> track 172px - padding 20px  ≈ 152px
     - Frente FLANQUEADA (obiwan, >12 subs) -> 2 cols 1fr num col
       `span 2` (354px) - padding - gap ≈ 140px
     - por profundidade -> padding-left decrescente (20/18/16...)
   Resultado: folhas de larguras diferentes entre Frentes e por nivel.
   Agora fixamos `--eap-leaf-w` e a folha ignora o container (o texto faz
   wrap/clamp de 3 linhas — ver `.org-box-name` abaixo). O grid flanqueado
   (`.org-subs--flanked`) teve padding/gap ajustados pra 2x essa largura
   caber exatamente no `span 2` (ver regra correspondente). So no modo
   leitura; no modo edicao a caixa cresce livre pros inputs. */
.org-chart:not(.org-chart--edit) .org-box[data-has-children="0"] {
  box-sizing: border-box;
  --eap-leaf-w: 148px;
  width: var(--eap-leaf-w);
  min-width: var(--eap-leaf-w);
  max-width: var(--eap-leaf-w);
  flex: 0 0 auto;         /* nao estica/encolhe no flex container das subs */
  height: 122px;
  min-height: 122px;
  justify-content: flex-start;
}
.org-chart:not(.org-chart--edit) .org-box[data-has-children="0"] .org-box-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.org-chart:not(.org-chart--edit) .org-box[data-has-children="0"] .org-box-roles {
  margin-top: auto;   /* empurra os avatares pro rodape, alinhando todas */
}
.org-box--nao-iniciado { background: var(--eap-nao-iniciado); color: #FFFFFF; }
.org-box--em-andamento { background: var(--eap-em-andamento); color: #2A1F00; }
.org-box--atrasado     { background: var(--eap-atrasado);     color: #FFFFFF; }
.org-box--concluido    { background: var(--eap-concluido);    color: #FFFFFF; }
.org-box--cancelado    { background: var(--eap-cancelado);    color: #FFFFFF; }
.org-box--suspenso     { background: var(--eap-suspenso);     color: #FFFFFF; }
.org-box .org-box-code { font-weight: 700; font-size: 10.5px; opacity: 0.95; }
.org-box .org-box-name { font-weight: 500; word-break: break-word; }

/* ── Estrutura: avatares TA/SA/TC1/TC2 (Matriz de Lideres, Obi-Wan) ──
   Linha de fotos lado a lado no rodape da caixa do entregavel ativo,
   na ordem fixa TA -> SA -> TC1 -> TC2 (so os papeis preenchidos).
   Cada foto leva a sigla do papel embaixo. Apenas leitura (edita-se
   na Matriz de Líderes); o tooltip nativo (title) expoe "SIGLA — Nome". */
.org-box .org-box-roles {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: 5px;
}
.org-box .org-box-role {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  pointer-events: auto;   /* deixa o tooltip nativo aparecer */
}
.org-box .org-box-role-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  background: #1a2547;
  object-fit: cover;
  display: block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.org-box .org-box-role-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #ffffff;
  background: linear-gradient(135deg, #6e7a93, #3e4862);
}
.org-box .org-box-role-tag {
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
}

/* Quick-status (visualizacao): badge editavel via <select> sobreposto.
   A label visual eh uma <span> centralizada (.org-box-quickstatus-label)
   com mesmo visual do badge --auto dos nos-pai; o <select> nativo fica
   sobreposto com opacity:0 pra preservar a UX de dropdown sem brigar
   com largura intrinseca e text-align do controle nativo. */
.org-box-quickstatus {
  position: relative;
  margin: 4px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.org-box-status {
  /* Compartilhado pelos <div>/<span> de status (label visual). Para o
     <select> editavel usamos .org-box-quickstatus-select (overlay). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  padding: 1px 8px;
  font-size: 9.5px;
  font-weight: 600;
  max-width: 100%;
  text-align: center;
  line-height: 1.4;
}
.org-box--em-andamento .org-box-status {
  color: #2A1F00; background: rgba(0, 0, 0, 0.10); border-color: rgba(0,0,0,0.25);
}
/* Modo "automatico": status derivado dos filhos — exibe label sem dropdown,
   com um cadeado pequeno indicando que nao eh editavel. */
.org-box-status--auto {
  cursor: help;
  border-style: dashed;
}
.org-box-status--auto::before { content: "🔒 "; font-size: 8px; opacity: 0.7; }

/* Overlay <select>: invisivel mas clicavel, cobre toda a area do wrapper
   pra que o usuario possa clicar em qualquer parte da row do status. */
.org-box-quickstatus-label {
  pointer-events: none;
  cursor: pointer;
}
.org-box-quickstatus-select {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  background: transparent;
  color: transparent;
}
.org-box-quickstatus-select::-ms-expand { display: none; }
.org-box-quickstatus-select option {
  color: #102A4E;
  background: #FFFFFF;
}
.org-box-quickstatus-select[disabled] { cursor: not-allowed; }
.org-box-quickstatus-select[disabled] + .org-box-quickstatus-label,
.org-box-quickstatus:has(.org-box-quickstatus-select[disabled]) .org-box-quickstatus-label {
  opacity: 0.75;
  border-style: dashed;
}

/* Estilos antigos do <select> direto (modo edit usa .org-box-status no
   <select>). Mantemos o appearance reset pra eles tambem. */
.org-chart--edit .org-box-status {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
}
.org-chart--edit .org-box-status option {
  text-align: left;
  text-align-last: left;
}
.org-chart--edit .org-box-status[disabled] {
  cursor: not-allowed;
  opacity: 0.75;
  border-style: dashed;
}

/* ====== Edit mode ====== */
.org-chart--edit .org-box { cursor: default; }
.org-chart--edit .org-box-edit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 4px;
}
.org-chart--edit .org-box-edit input {
  background: rgba(255, 255, 255, 0.85);
  color: #102A4E;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 10px;
  font-family: inherit;
  width: 100%;
  text-align: center;
}
.org-chart--edit .org-box-edit input.org-box-code {
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  max-width: 100%;
}
.org-chart--edit .org-box-edit input:focus {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 0;
}
.org-chart--edit .org-box--em-andamento .org-box-edit input {
  border-color: rgba(0, 0, 0, 0.35);
}

.org-box-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.org-box-btn {
  appearance: none;
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.org-box-btn:hover { background: rgba(255, 255, 255, 0.35); }
.org-box-btn--del:hover {
  background: rgba(255, 100, 100, 0.6); border-color: #FFAAAA;
}
.org-box--em-andamento .org-box-btn {
  color: #2A1F00; background: rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.3);
}

/* Drag grip — faixa horizontal no topo da caixa, ocupando largura inteira
   pra ser ALVO grande e obvio. Em modo edit, isso vira o handle do
   Sortable.js (configurado em JS com handle: '.org-box-drag'). */
.org-box-drag {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 4px;
  font-size: 8px;
  line-height: 1;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.18);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 1px dashed rgba(255,255,255,0.18);
  cursor: grab;
  user-select: none;
  transition: background 120ms ease, color 120ms ease, height 120ms ease;
  z-index: 2;
}
.org-box-drag::before {
  content: "⠿⠿⠿⠿";
  font-family: monospace;
  letter-spacing: -1px;
}
.org-box-drag:hover {
  background: rgba(0,0,0,0.35);
  color: #fff;
  height: 14px;
  font-size: 9px;
}
.org-box-drag:active { cursor: grabbing; background: rgba(0,0,0,0.45); }
/* Status amarelo (em-andamento) tem fundo claro — escurece a faixa pra
   o grip continuar visivel. */
.org-box--em-andamento .org-box-drag {
  color: rgba(42,31,0,0.65);
  background: rgba(0,0,0,0.10);
}
.org-box--em-andamento .org-box-drag:hover {
  background: rgba(0,0,0,0.22);
  color: #2a1f00;
}
/* Em modo edit, garante que a faixa nao colide com inputs/selects:
   adiciona padding-top no .org-box-edit pra empurrar o conteudo abaixo
   do grip. */
.org-chart--edit .org-box { padding-top: 14px; }

/* Banner instrutivo do modo edit — fica logo antes do organograma. */
.eap-edit-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
  background: rgba(63, 169, 245, 0.10);
  border: 1px dashed rgba(63, 169, 245, 0.45);
  border-radius: 8px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
}
.eap-edit-hint-grip {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0,0,0,0.35);
  border-radius: 4px;
  color: #fff;
  font-family: monospace;
  letter-spacing: -1px;
  font-size: 12px;
}
.eap-edit-hint strong { color: var(--primary); }
.eap-edit-hint em { font-style: normal; font-weight: 600; color: #fff; }

/* "+ Adicionar Frente" no fim das colunas. */
.org-col--add {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
}
.org-add-root-btn {
  appearance: none;
  background: transparent;
  border: 2px dashed #5B9B4B;
  color: #5B9B4B;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 4px;
  width: 100%;
  transition: background 0.15s;
}
.org-add-root-btn:hover { background: rgba(91, 155, 75, 0.10); }

/* SVG overlay com as linhas — fica por cima dos boxes mas ignora click. */
.org-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Drag ghost (Sortable.js). */
.org-box--ghost { opacity: 0.35; }
.org-col--ghost { opacity: 0.4; }

/* Filtro "Só ativas" — oculta entregas concluídas/canceladas/suspensas
   nos níveis 2 e 3 (Frentes e sub-frentes). O JS marca as caixas, os
   containers de filhos e as colunas totalmente ocultas. */
.org-box--filtered,
.org-subs--filtered,
.org-col--filtered { display: none !important; }

.eap-filter-toggle { display: inline-flex; align-items: center; gap: 7px; }
.eap-filter-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: 0.4;
  transition: opacity .15s ease, background .15s ease, box-shadow .15s ease;
}
.eap-filter-toggle.is-active {
  border-color: var(--success, #4ade80);
  color: var(--success, #4ade80);
}
.eap-filter-toggle.is-active .eap-filter-dot {
  opacity: 1; background: var(--success, #4ade80);
  box-shadow: 0 0 6px var(--success, #4ade80);
}

/* Legenda igual ao PDF — chips coloridos no rodape. */
.org-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 26px;
  margin: 4px 0 16px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}
.org-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
}
.org-legend-sq {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}

.org-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}


/* Ícones grandes dos cards do portal (48x48). */
.module-card .module-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.module-card:hover .module-icon { transform: scale(1.08); }
.module-card:hover .module-icon .icon { background-color: var(--primary-soft); }

/* Ícones pequenos da navbar — 16x16 inline com o label. */
.nav-item--icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-item--icon .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  /* Cor default monocromática branca-acinzentada — fica suave em itens
     inativos. O .active e :hover sobrescrevem pra --primary / --text. */
  background-color: var(--text-muted);
}
.nav-item--icon:hover .icon,
.nav-item--icon.active .icon {
  background-color: var(--primary);
}
/* Glifo de "abrir em nova aba" pra deixar claro que o link externo (news)
   sai do portal. Pequena seta ↗ após o label. */
.nav-item--external::after {
  content: " ↗";
  margin-left: 4px;
  opacity: 0.6;
  font-size: 0.85em;
}
.module-card h2 { margin: 0 0 6px; font-size: 18px; color: var(--text); }
.module-card p { margin: 0 0 10px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.module-card .module-cta {
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
}

/* Card "Alocações & Impacto Financeiro" — três métricas lado a lado:
   #RRs, #Assignments, Receita Potencial. Layout responsivo (wrap)
   pra não estourar no portrait ou em containers estreitos. */
.module-card .module-subtitle {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.module-card .module-metrics {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}
.module-card .module-metrics li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.module-card .metric-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.module-card .metric-label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}

/* ====== Mini-cards financeiros no card "Alocacoes & Impacto Fin." ======
   Replicam visualmente o resumo do header do modulo RH (Receita / Custo /
   Margem) pra que o numero do portal sempre bata com o do detalhe. Layout
   vertical (1 coluna) porque o card de modulo eh estreito.

   Filosofia visual:
   - Numeros respiram (tipografia maior + linha alta + padding generoso)
   - Chip lateral colorido segue a hierarquia (Receita azul, Custo amarelo,
     Margem verde) e fica mais grosso pra dar peso visual ao card
   - Entrada com animacao em cascata (50ms de stagger) — chama atencao
     pros numeros sem distrair
   - Hover sutil (translateY -2px + sombra acentuada) deixa o card "vivo"
*/
.module-card .rh-fin-mini {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
.module-card .rh-fin-mini-card {
  --fin-accent: var(--primary);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  overflow: hidden;
  min-width: 0;
  transition: transform 180ms cubic-bezier(.2,.7,.3,1),
              box-shadow 180ms ease,
              border-color 180ms ease,
              background 180ms ease;
  /* Animacao de entrada — fade-in + slide leve. Os 3 cards aparecem
     em cascata via nth-child abaixo. */
  animation: fin-mini-in 380ms cubic-bezier(.2,.7,.3,1) backwards;
}
.module-card .rh-fin-mini-card:nth-child(1) { animation-delay: 60ms; }
.module-card .rh-fin-mini-card:nth-child(2) { animation-delay: 130ms; }
.module-card .rh-fin-mini-card:nth-child(3) { animation-delay: 210ms; }
@keyframes fin-mini-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .module-card .rh-fin-mini-card { animation: none; transition: none; }
}
/* Hover do card-pai joga uma "elevacao" coordenada pros mini-cards
   (acompanha o transform do .module-card e da uma sensacao de profundidade) */
.module-card:hover .rh-fin-mini-card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.module-card .rh-fin-mini--rev    { --fin-accent: #3fa9f5; }
.module-card .rh-fin-mini--cost   { --fin-accent: #f59e0b; }
.module-card .rh-fin-mini--margin { --fin-accent: #5dd39e; }

/* Chip lateral colorido — texto vertical. Mais grosso (10px de padding
   horizontal) pra dar peso visual e min-height generoso pra acomodar 2
   linhas de valor com folga. */
.module-card .rh-fin-mini-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--fin-accent);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  min-height: 78px;
  /* Brilho discreto pra dar profundidade no chip */
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.18);
}

/* Container das 2 linhas (P / A) — agora com padding e gap maiores
   pra distribuir bem os numeros pelo espaco disponivel. */
.module-card .rh-fin-mini-rows {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  gap: 6px;
  min-width: 0;
}
.module-card .rh-fin-mini-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.2;
  white-space: nowrap;
}
/* Linha "A" (Atual) — um pouco mais discreta. A linha "P" eh a principal. */
.module-card .rh-fin-mini-row--sub .rh-fin-mini-val { color: var(--text-muted); font-weight: 600; }

/* "P" / "A" — pill discreta pra ficar elegante e identificavel */
.module-card .rh-fin-mini-pa {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  min-width: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  text-align: center;
  line-height: 1.2;
}

/* Valor em $ — tipografia GRANDE, monospace, com tabular-nums pra
   alinhar digitos verticalmente entre P e A. */
.module-card .rh-fin-mini-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.module-card .rh-fin-mini-val--neg { color: #ff6b6b; }

/* Margem tem destaque: chip vertical mais grosso, valor um pouco maior
   e cor de fundo levemente tingida pra puxar atencao. */
.module-card .rh-fin-mini--margin {
  background: rgba(93,211,158,0.05);
  border-color: rgba(93,211,158,0.22);
}
.module-card .rh-fin-mini--margin .rh-fin-mini-tag { padding: 14px 10px; min-height: 92px; }
.module-card .rh-fin-mini--margin .rh-fin-mini-val { font-size: 19px; }

/* Badge de % — maior, com peso visual e cores semaforicas claras. */
.module-card .rh-fin-mini-pct {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  justify-self: end;
  line-height: 1.2;
}
.module-card .rh-fin-mini-pct--over { color: #ff8585; border-color: rgba(255,107,107,0.45); background: rgba(255,107,107,0.14); }
.module-card .rh-fin-mini-pct--neg  { color: #ff8585; border-color: rgba(255,107,107,0.45); background: rgba(255,107,107,0.14); }
.module-card .rh-fin-mini-pct--low  { color: #ffba5d; border-color: rgba(245,158,11,0.45);  background: rgba(245,158,11,0.14); }
.module-card .rh-fin-mini-pct--ok   { color: #7ee0b3; border-color: rgba(93,211,158,0.45);  background: rgba(93,211,158,0.14); }
.module-card .rh-fin-mini-note {
  margin: 0 0 12px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  font-style: italic;
  opacity: 0.85;
}
.module-card .rh-fin-mini-note strong {
  font-style: normal;
  color: var(--text);
}

/* ====== Card "Avaliacao do Contrato" — snapshot OS vs projecao ======
   Mostra OS contratada x Projecao Total + diff (verde = sob, vermelho =
   estouro) e uma barra de progresso visualizando atual vs planejado. */
.module-card.module-contract .contract-snapshot {
  margin: 6px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.module-card .cs-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
  line-height: 1.3;
}
.module-card .cs-label {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.module-card .cs-val {
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}
.module-card .cs-row--diff { margin-top: 2px; }
.module-card .cs-diff {
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 12px;
}
.module-card .cs-diff--good {
  color: #5dd39e;
  background: rgba(93,211,158,0.10);
  border: 1px solid rgba(93,211,158,0.30);
}
.module-card .cs-diff--bad {
  color: #ff6b6b;
  background: rgba(255,107,107,0.10);
  border: 1px solid rgba(255,107,107,0.30);
}
.module-card .cs-bar {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
  border: 1px solid var(--border);
}
.module-card .cs-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #3fa9f5 0%, #5dd39e 100%);
  border-radius: 3px;
  transition: transform 0.3s ease;
  will-change: transform;
}
.module-card .cs-bar-legend {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0.2px;
}

/* ===================== Pagina Avaliacao do Contrato =====================
   Tabela densa com header de 2 niveis (super-cabecalho dos grupos OS /
   ATUAL / PLANEJADO / TOTAL). Modo EDIT trocada por toggle JS via classe
   `body.contract-editing` que oculta os .ce-val e mostra os .ce-input. */
.contract-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}
.contract-head h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}
.contract-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  max-width: 760px;
  line-height: 1.5;
}
/* Bloco "Projeto + PMs" abaixo do subtitle — usa o mesmo partial do
   RH/portal, entao herda o styling de .proj-line/.proj-pms/.pm-block.
   Aqui so adicionamos respiro vertical. */
.contract-project {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(63,169,245,0.06);
  border: 1px solid rgba(63,169,245,0.20);
  border-left: 1px solid var(--primary);
  border-radius: 8px;
  max-width: 820px;
}
.contract-project .proj-line { font-size: 14px; }
.contract-project .proj-pms  { margin-top: 6px; }

/* Diagnostico de roles nao casadas. Aparece logo abaixo do header
   quando houver RRs sem OS correspondente — orientacao visual pra
   o usuario saber EXATAMENTE qual string copiar pro campo "Role SF". */
.contract-unmatched {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.30);
  border-left: 1px solid #f59e0b;
  border-radius: 8px;
}

/* === Conciliacao financeira (contract_eval) ============================
   <details> colapsavel que decompoe o gap entre o card RH e o contrato.
   Visual sobrio (cinza-azulado) — nao queremos competir com o badge
   amarelo de unmatched logo abaixo. Aberto por padrao quando o gap > 0. */
.contract-reconcile {
  margin: 0 0 16px;
  padding: 10px 14px 12px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-left: 1px solid #6366f1;
  border-radius: 8px;
}
.contract-reconcile > summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  padding: 2px 0 6px;
  user-select: none;
}
.contract-reconcile > summary::-webkit-details-marker { display: none; }
.contract-reconcile > summary::before {
  content: "▸ ";
  color: var(--text-muted);
  font-size: 11px;
  margin-right: 2px;
}
.contract-reconcile[open] > summary::before { content: "▾ "; }
.contract-reconcile .cr-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px 14px;
  align-items: center;
  margin: 10px 0 8px;
}
.contract-reconcile .cr-grid--secondary {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.contract-reconcile .cr-block {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}
.contract-reconcile .cr-block-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.contract-reconcile .cr-block-num {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.contract-reconcile .cr-block-sub { font-size: 11px; margin-top: 1px; }
.contract-reconcile .cr-arrow { font-size: 12px; text-align: center; }
.contract-reconcile .cr-gap {
  font-size: 13px;
  margin: 6px 0 4px;
  padding: 6px 10px;
  background: rgba(99, 102, 241, 0.10);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.contract-reconcile .cr-breakdown {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.contract-reconcile .cr-breakdown li {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  padding: 5px 4px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
  align-items: baseline;
}
.contract-reconcile .cr-breakdown li:last-child { border-bottom: none; }
.contract-reconcile .cr-bd-label { color: var(--text); }
.contract-reconcile .cr-bd-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 80px;
}
.contract-reconcile .cr-bd-fix { font-size: 11.5px; }
.contract-reconcile .cr-bd-warn { color: #f87171; }
.contract-reconcile .cr-footer { margin-top: 8px; font-size: 11.5px; }
@media (max-width: 720px) {
  .contract-reconcile .cr-grid,
  .contract-reconcile .cr-breakdown li {
    grid-template-columns: 1fr;
  }
  .contract-reconcile .cr-arrow { display: none; }
  .contract-reconcile .cr-bd-val { text-align: left; }
}
.cu-header { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.cu-header strong { color: #f59e0b; }
.cu-list {
  list-style: none;
  margin: 6px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cu-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.20);
  border-radius: 6px;
  font-size: 12px;
}
.cu-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  user-select: all;
  transition: background-color 0.12s, border-color 0.12s;
}
.cu-role:hover { background: rgba(63,169,245,0.15); border-color: var(--primary); }
.cu-role--copied { background: rgba(93,211,158,0.20); border-color: #5dd39e; color: #5dd39e; }
.cu-bucket {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cu-bucket--full { color: #3fa9f5; background: rgba(63,169,245,0.15); border: 1px solid rgba(63,169,245,0.35); }
.cu-bucket--zero { color: #f59e0b; background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.35); }
.cu-stat {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.cu-stat--money { color: #f59e0b; font-weight: 700; }
.cu-hint {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
}

/* Badge "✓ N" / "⚠ 0" na celula Funcao indicando quantas RRs casaram. */
.ct-match-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  vertical-align: middle;
}
.ct-match-badge--ok   { color: #5dd39e; background: rgba(93,211,158,0.12); border: 1px solid rgba(93,211,158,0.35); }
.ct-match-badge--miss { color: #ff6b6b; background: rgba(255,107,107,0.12); border: 1px solid rgba(255,107,107,0.35); }

/* Expander (caret) na celula Funcao + label. Click expande sub-row. */
.ct-expander {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background-color 0.12s, border-color 0.12s, transform 0.15s;
  font-size: 9px;
  vertical-align: middle;
  flex-shrink: 0;
}
.ct-expander:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.ct-expander.is-open { background: var(--primary); border-color: var(--primary); color: #fff; }
.ct-expander.is-open .ct-caret { transform: rotate(90deg); }
.ct-caret { display: inline-block; transition: transform 0.15s; line-height: 1; }
.ct-expander--disabled {
  cursor: not-allowed;
  opacity: 0.30;
  background: transparent;
}
.ct-role-label { vertical-align: middle; }
.ce-val { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* Sub-row de detalhes — uma <tr> que abriga uma sub-table de pessoas. */
.ct-detail {
  background: rgba(63,169,245,0.04);
}
.ct-detail-cell {
  padding: 0 !important;
  border-top: 1px solid rgba(63,169,245,0.35) !important;
}
.ct-detail-head {
  padding: 10px 16px 6px;
  font-size: 12.5px;
  background: rgba(63,169,245,0.06);
  border-bottom: 1px solid rgba(63,169,245,0.15);
}
.ct-detail-head strong { color: var(--primary); }
.ct-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 11.5px;
  font-family: 'Inter', sans-serif;
}
.ct-detail-table thead th {
  background: rgba(63,169,245,0.10);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(63,169,245,0.20);
  white-space: nowrap;
}
.ct-detail-table thead th.num { text-align: right; }
.ct-detail-table tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
}
.ct-detail-table tbody td.num { text-align: right; }
.ct-detail-table tbody tr:last-child td { border-bottom: none; }
.ct-detail-table tbody tr:hover { background: rgba(63,169,245,0.06); }

.ct-detail-resource {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif !important;
}
.ct-detail-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.ct-detail-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
}
.ct-detail-name { font-weight: 600; color: var(--text); }

.ct-pill {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 4px;
  background: rgba(63,169,245,0.10);
  color: var(--primary);
  border: 1px solid rgba(63,169,245,0.30);
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}
.ct-pct-pill {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid;
}
.ct-pct-pill--ok   { color: #5dd39e; background: rgba(93,211,158,0.10); border-color: rgba(93,211,158,0.35); }
.ct-pct-pill--high { color: #f59e0b; background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35); }
.ct-pct-pill--over { color: #ff6b6b; background: rgba(255,107,107,0.10); border-color: rgba(255,107,107,0.35); }
.ct-marg-neg { color: #ff6b6b; }

/* Stack de inputs em modo edit: label PT + role SF + checkbox zero-rate. */
.ce-input-stack {
  display: none;
  flex-direction: column;
  gap: 6px;
}
body.contract-editing .ce-input-stack { display: flex; }
.ce-sub-label {
  display: flex;
  flex-direction: column;
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  gap: 3px;
}
.ce-input--role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  background: rgba(63,169,245,0.05);
  border-color: rgba(63,169,245,0.30);
}
.ce-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}
.contract-head-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.contract-foot-note {
  margin: 14px 0 24px;
  font-size: 11.5px;
  line-height: 1.6;
}
.contract-foot-note code {
  background: rgba(255,255,255,0.05);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* Wrap com scroll horizontal pra acomodar 13 colunas em viewport
   estreita. Scrollbar fina, mesma cor azul do resto do projeto. */
.contract-wrap {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  margin: 0 0 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(63,169,245,0.45) transparent;
}
.contract-wrap::-webkit-scrollbar { height: 10px; }
.contract-wrap::-webkit-scrollbar-thumb { background: rgba(63,169,245,0.45); border-radius: 5px; }

.contract-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-family: 'Inter', sans-serif;
}
.contract-table thead {
  background: rgba(0,0,0,0.25);
}
.contract-table thead th {
  text-align: center;
  padding: 6px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.35px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  vertical-align: middle;
  white-space: nowrap;
}
.contract-table thead th .dim {
  font-size: 9.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}
.contract-table thead .ct-grp {
  letter-spacing: 1px;
  font-size: 10.5px;
  font-weight: 800;
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,0.12);
}
.contract-table thead .ct-grp--os    { background: rgba(63,169,245,0.18); }
.contract-table thead .ct-grp--atual { background: rgba(245,158,11,0.16); }
.contract-table thead .ct-grp--plan  { background: rgba(63,169,245,0.10); }
.contract-table thead .ct-grp--total { background: rgba(93,211,158,0.18); }

.contract-table tbody td {
  padding: 4px 6px;
  border: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.25;
}
.contract-table tbody tr.ct-row:nth-child(odd) td {
  background: rgba(255,255,255,0.012);
}
.contract-table tbody tr.ct-row:hover td {
  background: rgba(63,169,245,0.06);
}
.contract-table .num {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.contract-table .ct-project {
  vertical-align: middle;
  text-align: center;
  background: rgba(63,169,245,0.06);
  border-right: 1px solid var(--border);
  font-weight: 700;
}
.contract-table .ct-project-label {
  display: inline-block;
  padding: 6px 10px;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  color: var(--primary);
}
.contract-table .ct-role {
  white-space: nowrap;
  min-width: 220px;
  max-width: 320px;
  font-weight: 600;
  overflow: hidden;
}
/* Linha unica: expander + label + badge sempre na mesma linha,
   com ellipsis no label quando o texto for muito longo. O ":title"
   nativo do navegador mostra o nome completo no hover. */
.contract-table .ct-role .ce-val {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.contract-table .ct-role-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: -0.1px;
}
.contract-table .ct-role .ct-expander,
.contract-table .ct-role .ct-match-badge {
  flex: 0 0 auto;
}
.contract-table .ct-os-valor {
  background: rgba(63,169,245,0.06);
}

/* Cores da coluna Diferenca (BRL e %): verde se diff <= 0 (sob orcam),
   vermelho se > 0 (estouro).
   Hierarquia visual: linhas do corpo (top rows) usam tons MAIS CLAROS,
   pra deixar a faixa do TOTAL ("ct-total-row") mais saturada e dar
   enfase visual ao agregado final. Total mantem o tom forte original
   (overrides logo abaixo, em .ct-total-row .ct-diff--*). */
.contract-table .ct-diff--good {
  color: #ffffff;
  background: #8de1bb !important; /* verde mais claro */
  font-weight: 700;
}
.contract-table .ct-diff--bad {
  color: #ffffff;
  background: #ff9d9d !important; /* vermelho mais claro */
  font-weight: 700;
}
/* Total: tons saturados (chamando atencao pro fechamento). */
.contract-table .ct-total-row .ct-diff--good {
  background: #5dd39e !important;
}
.contract-table .ct-total-row .ct-diff--bad {
  background: #ff6b6b !important;
}
.contract-table .ct-diff--na {
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
}

.contract-table tfoot td {
  padding: 8px;
  border: 1px solid var(--border);
  font-weight: 700;
}
.contract-table .ct-total-row td {
  background: rgba(63,169,245,0.10);
  font-size: 12.5px;
}
.contract-table .ct-total-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 800;
  color: var(--primary);
}
.contract-table .ct-pct-row td {
  background: rgba(0,0,0,0.15);
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

/* --- Modo edit: troca <span class="ce-val"> por <input class="ce-input"> --- */
.ce-input { display: none; }
body.contract-editing .ce-val { display: none; }
body.contract-editing .ce-input { display: inline-block; }
.ce-input {
  width: 100%;
  max-width: 130px;
  padding: 3px 6px;
  background: rgba(0,0,0,0.35);
  color: var(--text);
  border: 1px solid var(--primary);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  text-align: right;
  outline: none;
}
.ce-input:focus { border-color: var(--primary-soft); box-shadow: 0 0 0 2px rgba(63,169,245,0.30); }
.ce-input[type="text"] {
  text-align: left;
  max-width: 320px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}
body.contract-editing .ct-role { background: rgba(63,169,245,0.04); }
body.contract-editing td:has(> .ce-input) {
  background: rgba(63,169,245,0.06);
}

/* Tabs de projetos (so aparece quando o KB tem 2+ projetos). */
.contract-tabs {
  display: inline-flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.contract-tab {
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.12s, background-color 0.12s, border-color 0.12s;
}
.contract-tab:hover { color: var(--text); border-color: var(--primary); }
.contract-tab.is-active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(63,169,245,0.30);
}

/* Coluna "Remover" — so visivel em modo edit. */
.ct-edit-only { display: none; }
body.contract-editing .ct-edit-only { display: table-cell; }
.ct-delete-col {
  text-align: center;
  width: 80px;
  vertical-align: middle;
}
.ct-delete-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.ct-delete-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ct-delete-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,107,107,0.10);
  border: 1px solid rgba(255,107,107,0.35);
  color: #ff6b6b;
  font-weight: 700;
  transition: background-color 0.12s, transform 0.10s;
}
.ct-delete-toggle:hover .ct-delete-x { background: rgba(255,107,107,0.20); transform: scale(1.08); }
.ct-delete-toggle input[type="checkbox"]:checked ~ .ct-delete-x {
  background: #ff6b6b;
  color: #ffffff;
}
.ct-row--new td {
  background: rgba(93,211,158,0.06) !important;
  border-color: rgba(93,211,158,0.40) !important;
}
.ct-zero-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--text-muted);
  cursor: pointer;
}

/* Card Dataprev News — usa o SVG news.svg (mesma family dos outros
   ícones do portal: badge gradient + glyph monocromático). */
.module-card.module-news .module-metrics .metric-num {
  /* O segundo e terceiro itens trazem nomes longos de tópico — fonte
     menor pra acomodar e mantém família Inter (não monospace). */
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.module-card.module-news .module-metrics li:first-child .metric-num {
  /* O primeiro item é o "Total" — número grande, monospace, destacado. */
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  color: #6ec6ff;
}
/* Limita largura de cada item de metrica do card de news pra que
   nomes longos de tópicos quebrem em vez de empurrar o card. */
.module-card.module-news .module-metrics li {
  flex: 1 1 0;
  min-width: 0;
  max-width: 180px;
}
.module-card.module-news .module-metrics li:first-child {
  /* O "Total" é curto — não precisa de max-width grande. */
  flex: 0 0 auto;
  max-width: none;
}
.module-news-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Constrain the list to the card's content box. min-width:0 lets the
     flex/grid parent (.module-card / .modules-grid) shrink this child
     instead of forcing the card to grow with the longest headline. */
  min-width: 0;
  max-width: 100%;
}
.module-news-list li {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
  display: flex;
  gap: 6px;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
}
.module-news-list .news-bullet {
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}
/* Ellipsis precisa ficar no span do título (não no <li> flex), senão
   o nó de texto anônimo dentro do flex container nao trunca. */
.module-news-list .news-title {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   RH — Resource Requests
   ------------------------------------------------------------------ */
/* Sticky top block: keeps header + stat cards + toolbar pinned to the
   viewport top while only the table scrolls. Edge-to-edge background so
   nothing peeks through when scrolled. */
.rh-sticky-top {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Cancel out .container--wide horizontal padding (20px) so the bg
     stretches the full window. Re-add as inner padding to keep content
     aligned with the table below. */
  margin: 0 -20px 14px;
  padding: 8px 20px 6px;
  background: rgba(20, 29, 56, 0.92);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
/* Trim inner blocks' bottom margins so the sticky region stays compact
   and doesn't eat too much vertical real estate. */
.rh-sticky-top .rh-head    { margin: 0 0 8px; }
.rh-sticky-top .rh-stats-line { margin: 0 0 6px; }
.rh-sticky-top .rh-stats-line--compact:last-child { margin-bottom: 0; }
.rh-sticky-top .rh-toolbar { margin-bottom: 6px; }
.rh-sticky-top .rh-toolbar:last-child { margin-bottom: 0; }
.rh-sticky-top .rh-active-filters--inline:last-child { margin-bottom: 0; }

/* === Abas de projeto SF =====================================================
   Visual de "abas-pasta": cada aba parece uma aba de fichario, com a ativa
   "puxada" pra frente (sem borda inferior, conectada ao conteudo). Cliques
   navegam pra ?sf_project=<nome>; o backend re-renderiza tudo filtrado.

   Esta strip fica no topo do sticky-top — visivel mesmo ao rolar a tabela
   pra deixar claro qual projeto esta sendo visualizado. */
.rh-project-tabs {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  margin: 0 0 10px;
  padding: 0 0 0 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
}
.rh-project-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 10px;
  margin-bottom: -1px; /* sobre a borda inferior do container */
  border: 1px solid var(--border);
  border-bottom: 1px solid transparent; /* a aba ativa "fura" o container */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.rh-project-tab:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}
.rh-project-tab.is-active {
  background: rgba(20, 29, 56, 0.92); /* mesmo bg do sticky-top */
  color: var(--text);
  border-color: var(--border);
  border-bottom-color: rgba(20, 29, 56, 0.92);
  position: relative;
  z-index: 1;
  box-shadow: 0 -2px 0 0 var(--primary) inset;
}
.rh-project-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rh-project-tab.is-active .rh-project-tab-count {
  background: var(--primary);
  color: #0b1224;
}

.rh-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 18px;
}
.rh-head h1 { margin: 0 0 6px; font-size: 26px; }
.rh-head .dim { font-size: 13.5px; }
.rh-head-info { min-width: 0; flex: 1 1 320px; align-self: center; }
.rh-head-actions { margin-left: auto; align-self: center; }

/* ===================== Resumo financeiro no header =====================
   3 cards compactos (Receita / Custo / Margem) que vivem entre os alertas
   e o botao de sync. Cada card eh um grid de 2 colunas:
   - Coluna 1: tag vertical com o nome ("RECEITA")
   - Coluna 2: duas linhas (P em cima, A embaixo) com numero + %
   Ocupa pouco espaco horizontal e segue o padrao visual dos demais chips
   do header. Quebra naturalmente em telas estreitas via flex-wrap herdado
   de .rh-head. */
/* Barra central do header: contem 4 cards iguais (Alertas, Receita,
   Custo, Margem). Mesmo flex parent + align-items:stretch garante que
   todos terminem com a MESMA altura final, sem importar conteudo
   interno. */
.rh-head-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: stretch;
  align-items: stretch;
  flex: 1 1 auto;
  max-width: 70%;
  min-width: 0;
  /* Empurra .rh-head-actions pro extremo direito sem precisar de
     margin-left:auto la — fica mais previsivel em telas estreitas. */
  margin-right: auto;
}

/* Card base — usado por TODOS os 4 (Alertas + 3 financeiros). */
.rh-fin-card {
  --fin-accent: var(--primary);
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: help;
  /* Altura unica garantida (2 rows × 18px + paddings = ~52px). */
  min-height: 52px;
}
.rh-fin-card--alerts { --fin-accent: #e63946; }
.rh-fin-card--rev    { --fin-accent: #3fa9f5; }
.rh-fin-card--cost   { --fin-accent: #f59e0b; }
.rh-fin-card--margin { --fin-accent: #5dd39e; }

/* Compat: mantem .rh-fin-summary como alias caso outro lugar use. */
.rh-fin-summary { display: contents; }

.rh-fin-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--fin-accent);
  /* Texto vertical pra economizar largura. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.rh-fin-rows {
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
  gap: 2px;
  min-width: 0;
  /* Centraliza vertical pra cards alinharem visualmente mesmo quando
     uma linha esticou (badge presente). */
  justify-content: center;
}
/* Variante usada pelo card "Alertas": chips lado-a-lado em vez de
   rows verticais P/A. Mantem o padding pra borda alinhar com os
   demais cards. */
.rh-fin-rows--chips {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.rh-fin-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.15;
  white-space: nowrap;
  /* Min-height fixo pras 2 linhas ficarem identicas — sem isso, a row
     com badge (que tem padding+border) eh mais alta que a sem badge,
     resultando em cards de alturas diferentes. */
  min-height: 18px;
}
.rh-fin-row--sub { opacity: 0.95; }
.rh-fin-pa {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  min-width: 9px;
  font-family: 'Inter', sans-serif;
}
.rh-fin-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.rh-fin-val--neg { color: #ff6b6b; }
.rh-fin-pct {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  margin-left: auto;
}
.rh-fin-pct--over { color: #ff6b6b; border-color: rgba(255,107,107,0.35); background: rgba(255,107,107,0.10); }
.rh-fin-pct--neg  { color: #ff6b6b; border-color: rgba(255,107,107,0.35); background: rgba(255,107,107,0.10); }
.rh-fin-pct--low  { color: #f59e0b; border-color: rgba(245,158,11,0.35);  background: rgba(245,158,11,0.10); }
.rh-fin-pct--ok   { color: #5dd39e; border-color: rgba(93,211,158,0.35);  background: rgba(93,211,158,0.10); }

/* Em telas medias/pequenas, libera os cards a ocuparem 100% da largura
   (todos quebram pra baixo do brand). */
@media (max-width: 1280px) {
  .rh-head-bar { max-width: 100%; }
}

/* ===================== Alertas operacionais (chips dentro do card "Alertas") =====================
   Chips agora vivem dentro do mesmo .rh-fin-card que os cards financeiros
   — herdam o mesmo border/bg/altura. O .rh-fin-rows--chips abaixo arruma
   o layout horizontal. */
.rh-alert {
  --alert-bg: rgba(255,255,255,0.04);
  --alert-bd: var(--border);
  --alert-fg: var(--text-muted);
  --alert-num: var(--text);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--alert-bg);
  border: 1px solid var(--alert-bd);
  color: var(--alert-fg);
  cursor: pointer;
  transition: transform 0.10s ease, border-color 0.15s, background-color 0.15s;
  font-family: 'Inter', sans-serif;
  line-height: 1.05;
  height: 36px;
}
.rh-alert:hover { transform: translateY(-1px); border-color: var(--primary); }
.rh-alert:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rh-alert-sigla {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.rh-alert-count {
  font-size: 13px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--alert-num);
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  min-width: 22px;
  text-align: center;
}

/* Severidade (binaria): ok = verde "tudo certo", critical = vermelho
   pulsante. O `warn` ambar fica disponivel pra alertas futuros mas hoje
   nenhum backend retorna esse estado. */
.rh-alert--ok       { --alert-bg: rgba(93,211,158,0.10); --alert-bd: rgba(93,211,158,0.40); --alert-fg: var(--success); --alert-num: var(--success); }
.rh-alert--warn     { --alert-bg: rgba(245,158,11,0.10); --alert-bd: rgba(245,158,11,0.45); --alert-fg: #f59e0b;        --alert-num: #f59e0b; }
.rh-alert--critical { --alert-bg: rgba(255,91,91,0.14);  --alert-bd: rgba(255,91,91,0.55);  --alert-fg: #ff6b6b;        --alert-num: #ff6b6b; animation: alert-blink 1.2s infinite; }
@keyframes alert-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,91,91,0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(255,91,91,0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .rh-alert--critical { animation: none; box-shadow: 0 0 0 1px rgba(255,91,91,0.55); }
}

/* ===================== PiP (picture-in-picture) =====================
   Posicionamento: o JS (bindAlerts) calcula `top` e `right` dinamicos
   a partir do bounding-rect do chip clicado, fazendo o painel CAIR
   abaixo do chip (dropdown). Os defaults abaixo (top: 90px, right: 18px)
   sao fallback caso o JS nao rode. max-height impede que o painel saia
   pelo bottom — se nao couber, o usuario rola dentro dele. */
.alert-pip {
  position: fixed;
  top: 90px;
  right: 18px;
  /* Largura responde ao conteudo: minimo 360px, cresce ate 460px em
     telas grandes, e em telas pequenas respeita o viewport. Necessario
     pq alertas como DTRA tem detalhes longos (duas datas + diff). */
  width: clamp(360px, 32vw, 460px);
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 120px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  z-index: 90;
  overflow: hidden;
}
.alert-pip[hidden] { display: none; }
.alert-pip-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.alert-pip-header strong { font-size: 13px; display: block; }
.alert-pip-header p {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.alert-pip-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  align-self: flex-start;
  margin-left: auto;
}
.alert-pip-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.alert-pip-list {
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
}
.alert-pip-list li { margin: 0; padding: 0; }
/* Layout STACK (3 linhas) em vez de grid 2 colunas. Necessario pq o
   detail de alguns alertas (DTRA tem 2 datas + diff) eh longo demais
   pra caber na coluna fixa do grid antigo — overflow quebrava o card
   inteiro e cortava texto. Aqui cada linha quebra naturalmente. */
.alert-pip-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s;
  min-width: 0;
}
.alert-pip-item:hover {
  background: rgba(63,169,245,0.10);
  text-decoration: none;
}
.alert-pip-rr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  /* RR e Assignment cabem na mesma linha — se nao couber, quebra. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}
.alert-pip-resource {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
  /* Resource + Role podem ser longos (ex.: "Marketing Cloud - Technical
     Architect"). Quebra livre. */
  overflow-wrap: anywhere;
}
.alert-pip-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #ff8c8c;
  line-height: 1.4;
  /* SEM nowrap — o detalhe de DTRA tem ~50 caracteres e precisa
     quebrar em 2 linhas pra caber. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.alert-pip-empty {
  margin: 0;
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Flash visual quando a row é "saltada" via PiP. Brilha 2s e some. */
.rh-table tr.rh-row-flash {
  animation: rh-row-flash-anim 2.2s ease-out;
}
@keyframes rh-row-flash-anim {
  0%   { background: rgba(63,169,245,0.45); }
  25%  { background: rgba(63,169,245,0.30); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-table tr.rh-row-flash { background: rgba(63,169,245,0.20); }
}

/* Linha 'Projeto: <Project ID> ↗ · <nome> ↗'. ID e nome são texto puro;
   só a setinha .sf-open (padrão de todo o app) abre no Salesforce. */
.proj-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 6px;
}
.proj-line .proj-label {
  color: var(--text-muted);
  font-size: 13px;
}
.proj-number {
  /* Texto puro, mesma cor do nome do projeto — quem leva pro Salesforce
     é a setinha ↗ ao lado. Se um dia virar clicável, troca por <a>. */
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.3px;
}
.proj-name {
  color: var(--text);
  font-weight: 600;
}
.proj-sep { color: var(--text-muted); opacity: 0.6; }

/* PMs do projeto — chip com avatar + nome + ↗ pra abrir no SF. */
.proj-pms {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.pm-block {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.pm-role {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
}
.pm-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pm-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.pm-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: 'JetBrains Mono', monospace;
}
.pm-name { color: var(--text); font-weight: 600; }

/* Link de DM no Slack envolvendo avatar + nome do PM. Visual identico
   ao .pm-cell normal, mas com o badge colorido do Slack no canto. */
.pm-dm-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  padding: 1px 3px 1px 0;
  border-radius: 4px;
  transition: background 120ms;
  position: relative;
}
.pm-dm-link:hover {
  background: rgba(255,255,255,0.05);
}
.pm-dm-link .pm-name { transition: color 120ms; }
.pm-dm-link:hover .pm-name { color: #fff; }
.pm-slack-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  margin-left: 2px;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 120ms;
}
.pm-dm-link:hover .pm-slack-badge { opacity: 1; }

/* ── Strip compacta de info do projeto no portal home (acima das areas
   PMBOK). Linha unica com nome + numero do projeto e os PMs alinhados.
   ============================================================ */
/* ─── Portal hero row (5 tiles) ─────────────────────────────────────
   Fase 5 · Impeccable · portfolio pulse: quantidade de projetos,
   RRs, alocações, artigos KB, receita em movimento. Estilo
   consistente com o resto do portal (surface + border, sem gradiente).
   jul/2026.                                                            */
.portal-hero {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 0 0 18px;
}
.portal-hero-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface, #10233b);
  border: 1px solid var(--border, #1e3a5f);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--dur-quick) var(--ease-out-quart),
    background   var(--dur-quick) var(--ease-out-quart),
    transform    var(--dur-quick) var(--ease-out-quart);
  min-height: 78px;
  /* Entrada com stagger: cada tile ganha --i via inline style
     (0..4) e desloca a animação por 60ms. Cap: 5 tiles × 60ms
     = 300ms de stagger — dentro do budget do animate.md. */
  opacity: 0;
  transform: translateY(6px);
  animation: portalHeroIn var(--dur-entrance) var(--ease-out-quart) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.portal-hero-tile:hover {
  border-color: var(--primary, #009CDE);
  background: var(--surface-hover, #143054);
  transform: translateY(-2px);
}
.portal-hero-tile:active {
  transform: translateY(0);
  transition-duration: var(--dur-instant);
}
@keyframes portalHeroIn {
  to { opacity: 1; transform: translateY(0); }
}
.portal-hero-tile--wide { grid-column: span 2; }
.portal-hero-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--primary, #009CDE);
  letter-spacing: -0.4px;
}
.portal-hero-label {
  font-size: 11.5px;
  color: var(--text-muted, #97a8bd);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  line-height: 1.35;
}
.portal-hero-sub {
  display: block;
  margin-top: 2px;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.1px;
  font-weight: 400;
  font-size: 10.5px;
  color: var(--text-muted, #97a8bd);
  opacity: 0.85;
}
@media (max-width: 1100px) {
  .portal-hero { grid-template-columns: repeat(3, 1fr); }
  .portal-hero-tile--wide { grid-column: span 3; }
}
@media (max-width: 640px) {
  .portal-hero { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .portal-hero-tile--wide { grid-column: span 2; }
  .portal-hero-value { font-size: 22px; }
}

.portal-proj-strip {
  margin: 4px 0 10px;
  padding: 6px 10px;
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.portal-proj-strip .proj-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12.5px;
  margin-bottom: 2px;
}
.portal-proj-strip .proj-label {
  color: var(--text-muted, #94a3b8);
  font-size: 9.5px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.6px;
}
.portal-proj-strip .proj-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}
.portal-proj-strip .proj-sep { color: var(--text-muted, #94a3b8); opacity: 0.6; }
.portal-proj-strip .proj-name { color: var(--text, #e5e7eb); font-weight: 600; font-size: 12.5px; }
.portal-proj-strip .proj-pms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 0;
}
/* Tighter PM block dentro do carrossel (strip do portal) — fonte e
   avatar menores pra densificar a vertical. */
.portal-proj-strip .pm-block { font-size: 11.5px; gap: 4px; }
.portal-proj-strip .pm-role  { font-size: 9.5px; padding: 1px 5px; }
.portal-proj-strip .pm-avatar { width: 18px; height: 18px; }
.portal-proj-strip .pm-name { font-size: 11.5px; }
.portal-proj-strip .pm-dm-link { padding: 0 2px 0 0; }

/* Pill do apelido (short_label) do projeto — inline, ao lado do
   project number, sem ocupar linha propria. Visual de chip discreto.
   `span.proj-alias` (specificity 0,1,1) pra ganhar de
   `[data-editable-project]` (0,1,0) do base.html que injeta
   padding: 0 2px globalmente em editaveis. */
span.proj-alias {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(99,102,241,0.18);
  color: #c7d2fe;
  border: 1px solid rgba(99,102,241,0.35);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
/* Quando a pill eh editavel via duplo-clique, o lapis injetado
   (.editable-project-btn) fica DENTRO do span — espacamento minimo
   pra nao quebrar o pill em duas linhas. */
span.proj-alias .editable-project-btn {
  width: 14px; height: 14px;
  margin-left: 4px;
  font-size: 9px;
}
/* Espacamento entre projetos (multi-proj) no MODO LEGADO (sem
   carrossel). Hoje so afeta contract_eval/rh_list/eap se vierem com
   2+ projects_meta numa mesma instancia do partial. No portal_home,
   o carrossel substitui isso. */
.portal-proj-strip > .proj-card + .proj-card {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border, rgba(255,255,255,0.06));
}

/* ── Carrossel horizontal de cards de projeto (multi-projeto, portal home).
   Cada .proj-card vira uma coluna fixa-largura num track horizontal.
   Setas (‹ ›) aparecem so quando ha overflow. JS controla
   hidden/visible das setas conforme posicao do scroll. */
.proj-strip--carousel {
  padding: 8px 4px;        /* compacta um pouco — as setas precisam respirar */
}
.proj-cards-viewport {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.proj-cards-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 6px;        /* respiro pras laterais do track */
  /* Esconde scrollbar nativa — navegacao via setas/swipe. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.proj-cards-track::-webkit-scrollbar { display: none; }
.proj-cards-track .proj-card {
  flex: 0 0 auto;
  min-width: 340px;
  max-width: 560px;
  scroll-snap-align: start;
  /* Separador visual sutil entre cards lado-a-lado. */
  padding: 2px 10px 2px 0;
  border-right: 1px dashed var(--border, rgba(255,255,255,0.06));
}
.proj-cards-track .proj-card:last-child { border-right: none; }
/* No carrossel, o "+ .proj-card" do modo legado nao se aplica
   (queremos lado-a-lado, nao stacked). Override defensivo: */
.proj-cards-track .proj-card + .proj-card {
  margin-top: 0;
  padding-top: 4px;
  border-top: none;
}

.proj-cards-nav {
  flex: 0 0 auto;
  align-self: stretch;
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  color: var(--text, #e5e7eb);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms, opacity 120ms;
  padding: 0;
}
.proj-cards-nav:hover { background: rgba(255,255,255,0.10); }
.proj-cards-nav:focus-visible {
  outline: 2px solid var(--accent, #60a5fa);
  outline-offset: 2px;
}
.proj-cards-nav[hidden] { display: none; }

/* Linha ÚNICA com os dois grupos (RR Stages + Assignment Statuses) lado
   a lado — desenho ultra-compacto: cada card é um pill horizontal com
   número + label inline. Ocupa pouco espaço vertical (~32px) e se
   espalha pela largura toda. Quebra naturalmente em telas muito
   estreitas via flex-wrap. */
.rh-stats-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
}
.rh-stats-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;            /* override do espaço vertical antigo */
  min-width: 0;
}
/* Tag identificadora do grupo (RR ou A). Pílula sólida azul,
   bem evidente, mesma cor pros dois (RR e Assignment) — só muda
   a sigla. Antes RR era azul e A era verde, ficava poluído. */
.rh-stats-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  min-width: 28px;
  border-radius: 6px;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: 0 0 0 1px rgba(63,169,245,0.25);
}
.rh-stats-tag--rr,
.rh-stats-tag--assn {
  color: #ffffff;
  background: var(--primary);
  border-color: var(--primary);
}
.rh-stats-divider {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 4px;
  align-self: center;
}
.rh-stats-meta {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.rh-stats-meta .dim { font-size: 10.5px; opacity: 0.85; }

.rh-stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

/* Cada pill é horizontal: NÚMERO  ·  LABEL (inline). Sem stack vertical
   interno — line-height baixa pro card ter ~24-26px de altura total. */
.rh-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px 9px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.rh-stat-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
  font-family: 'JetBrains Mono', monospace;
}
.rh-stat-label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.35px;
  line-height: 1.1;
  font-weight: 600;
}

/* Pill "Total" — global, antes do grupo RR. Destaque maior: borda azul,
   fundo levemente tingido. Número e label em branco pra contrastar. */
.rh-stat.rh-stat-total {
  border-color: var(--primary);
  background: rgba(63,169,245,0.08);
  padding: 4px 12px;
}
.rh-stat.rh-stat-total .rh-stat-num {
  color: var(--primary);
  font-size: 15px;
}
.rh-stat.rh-stat-total .rh-stat-label {
  color: var(--text);
  font-weight: 700;
}

/* Cards de stage — número na cor da pílula correspondente da tabela.
   Dois conjuntos de classes (rrbd-* para RR Stages, assnbd-* para
   Assignment Statuses) pra não dar conflito mesmo quando o mesmo nome
   aparece nos dois picklists (ex.: "Tentative"). */
.rh-stat-stage.rrbd-draft           .rh-stat-num { color: var(--text-muted); }  /* cinza  */
.rh-stat-stage.rrbd-ready-to-staff  .rh-stat-num { color: #f4c151; }            /* amarelo */
.rh-stat-stage.rrbd-ready-to-assign .rh-stat-num { color: #3FA9F5; }            /* azul   */
.rh-stat-stage.rrbd-tentative       .rh-stat-num { color: #f0b428; }            /* âmbar  */
.rh-stat-stage.rrbd-assigned        .rh-stat-num { color: var(--success); }     /* verde  */
.rh-stat-stage.rrbd-hold            .rh-stat-num { color: #d97742; }            /* laranja*/
.rh-stat-stage.rrbd-cancelled       .rh-stat-num { color: #b96a6a; }            /* vermelho-muted */

.rh-stat-stage.assnbd-tentative     .rh-stat-num { color: #f0b428; }            /* âmbar  */
.rh-stat-stage.assnbd-scheduled     .rh-stat-num { color: var(--success); }     /* verde  */
.rh-stat-stage.assnbd-closed        .rh-stat-num { color: var(--text-muted); }  /* cinza  */
.rh-stat-stage.assnbd-not-accepted  .rh-stat-num { color: #ff6b6b; }            /* vermelho */
.rh-stat-stage.assnbd-auto-closed   .rh-stat-num { color: var(--text-muted); }  /* cinza  */

/* Card-filtro: estado clicável, hover sutil e is-active marcante.
   Usamos transitions curtas pra dar feedback imediato mas sem chamar
   demais a atenção (a tabela embaixo precisa continuar sendo o foco). */
.rh-stat-clickable {
  /* Pill horizontal — herda display:inline-flex de .rh-stat. */
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.10s ease,
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}
.rh-stat-clickable:hover {
  border-color: var(--primary);
  background: rgba(63,169,245,0.07);
  text-decoration: none;
  transform: translateY(-1px);
}
.rh-stat-clickable.is-active {
  border-color: var(--primary);
  background: rgba(63,169,245,0.18);
  box-shadow: 0 0 0 1px var(--primary);
}
.rh-stat-clickable.is-active .rh-stat-label {
  color: var(--text);
  font-weight: 700;
}

/* Chips de filtro ativos na toolbar — fica logo abaixo do search,
   mostra o que está aplicado e dá um clique-fácil pra remover. */
.rh-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 12px;
}
.rh-active-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(63,169,245,0.40);
  background: rgba(63,169,245,0.10);
  color: var(--text);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.filter-chip:hover {
  background: rgba(63,169,245,0.22);
  text-decoration: none;
}
.filter-chip strong { color: var(--primary); font-weight: 700; }
.filter-chip--assn {
  background: rgba(93,211,158,0.10);
  border-color: rgba(93,211,158,0.40);
}
.filter-chip--assn:hover {
  background: rgba(93,211,158,0.22);
}
.filter-chip--assn strong { color: var(--success); }
.filter-chip--clear {
  background: transparent;
  border-color: rgba(255,107,107,0.40);
  color: #ff6b6b;
  font-weight: 600;
}
.filter-chip--clear:hover { background: rgba(255,107,107,0.15); }

/* Quando o stage zera, deixa o card menos chamativo. */
.rh-stat-stage[data-zero="1"] .rh-stat-num { color: var(--text-muted); opacity: 0.55; }
.rh-stat-stage[data-zero="1"] .rh-stat-label { opacity: 0.7; }

/* Variante compacta (mai/2026): uma so linha unindo stats + busca +
   toggles. Esconde por padrao chips com count=0 — o botao .rh-stats-toggle-zero
   permite expandir quando o user clica. Ganha ~28px verticais que
   passam diretamente pra tabela. */
.rh-stats-line--compact {
  margin: 0 0 6px;
  gap: 6px 8px;
  flex-wrap: wrap;
  align-items: center;
}
.rh-stats-line--compact .rh-stats-group {
  gap: 4px;
}
.rh-stats-line--compact .rh-stat {
  padding: 2px 8px;
  border-radius: 6px;
}
.rh-stats-line--compact .rh-stat-num   { font-size: 13px; }
.rh-stats-line--compact .rh-stat-label { font-size: 9.5px; letter-spacing: 0.3px; }
.rh-stats-line--compact .rh-stat.rh-stat-total { padding: 3px 10px; }
.rh-stats-line--compact .rh-stat.rh-stat-total .rh-stat-num { font-size: 14px; }
.rh-stats-line--compact .rh-stats-tag {
  font-size: 10px; padding: 3px 8px; min-width: 22px; border-radius: 5px;
}
/* Esconde chips zerados por padrao. .show-zero (toggled via JS) revela. */
.rh-stats-line--compact .rh-stats-group .rh-stat-stage[data-zero="1"] {
  display: none;
}
.rh-stats-line--compact .rh-stats-group.show-zero .rh-stat-stage[data-zero="1"] {
  display: inline-flex;
}
/* Botaozinho "+N" — pill discreto. Some quando show-zero ativa. */
.rh-stats-toggle-zero {
  background: rgba(148, 163, 184, 0.12);
  border: 1px dashed rgba(148, 163, 184, 0.35);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.rh-stats-toggle-zero:hover {
  background: rgba(63, 169, 245, 0.12);
  border-color: rgba(63, 169, 245, 0.40);
  color: var(--primary);
}
.rh-stats-group.show-zero .rh-stats-toggle-zero { display: none; }

/* Busca inline (sem section dedicada). Encolhe e cresce conforme sobra. */
.rh-search--inline {
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 360px;
  margin: 0;
}
.rh-search--inline input[type="search"] {
  padding: 4px 30px 4px 10px;
  font-size: 12.5px;
  border-radius: 6px;
}
.rh-search--inline .rh-search-clear {
  padding: 2px 6px;
  font-size: 11px;
}

/* Chips de filtros ativos: variante inline (linha propria curta, so quando ha filtro). */
.rh-active-filters--inline {
  margin: 0 0 6px;
}

/* O Gantt toggle e o segmented Mes/Semana ficam mais compactos na nova linha. */
.rh-stats-line--compact .gantt-toggle {
  padding: 4px 9px;
  font-size: 12px;
  border-radius: 6px;
}
.rh-stats-line--compact .gantt-view-toggle .seg-btn {
  padding: 4px 9px;
  font-size: 11.5px;
}
.rh-stats-line--compact .rh-stats-meta {
  font-size: 11px;
}

/* Em telas estreitas reduz padding e label pra economizar mais espaço
   horizontal — a linha continua única (sem aumentar a vertical), só os
   pills ficam mais magros. */
@media (max-width: 1100px) {
  .rh-stat { padding: 2px 7px; gap: 5px; }
  .rh-stat-num   { font-size: 13px; }
  .rh-stat-label { font-size: 9.5px; letter-spacing: 0.25px; }
  .rh-stats-meta { font-size: 11px; }
}

.rh-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.rh-search { display: flex; gap: 6px; flex: 1; min-width: 220px; position: relative; }
.rh-search input[type="search"] {
  flex: 1;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 38px 9px 13px;
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rh-search input[type="search"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(63, 169, 245, 0.18);
}
/* WebKit já dá um botão de clear nativo dentro do input[type=search] —
   escondemos pra usar o nosso (que também zera totais via JS). */
.rh-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.rh-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  color: var(--text-muted);
}
.rh-search-clear:hover { color: var(--text); }
.rh-empty-row td { font-style: italic; }
.rh-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rh-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  /* Wrap eh o SCROLL CONTAINER da tabela — rola pra dentro de si
     mesma em ambos os eixos. O tamanho dele eh definido pelo
     flex layout abaixo (body.rh-page em column flex), entao o
     wrap se ESTICA ate o rodape da viewport e a scrollbar
     horizontal fica SEMPRE visivel no final da tela. */
  overflow: auto;
  /* Scrollbars discretas combinando com o tema escuro. */
  scrollbar-width: thin;
  scrollbar-color: rgba(63, 169, 245, 0.45) transparent;
}
.rh-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.rh-table-wrap::-webkit-scrollbar-track { background: transparent; }
.rh-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(63, 169, 245, 0.45);
  border-radius: 5px;
}
.rh-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(63, 169, 245, 0.75);
}
.rh-table-wrap::-webkit-scrollbar-corner { background: transparent; }

/* ----- Layout vertical da pagina RH (flex column) -----------------
   Body fica como flex column ocupando 100vh exatos. Header eh
   shrink, .container--wide cresce (flex: 1) e dentro dela a
   .rh-sticky-top eh shrink e a .rh-table-wrap cresce (flex: 1).
   Resultado: wrap ESTICA ate o rodape da viewport — a scrollbar
   horizontal mora la, sempre visivel, e se reposiciona
   automaticamente em resize ou quando filtros/stats expandem/
   recolhem (a sticky-top muda de altura e o wrap se ajusta).
   overflow: hidden no body garante que a pagina nunca rola — so
   a tabela rola, internamente. */
body.rh-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.rh-page > header.header { flex-shrink: 0; }
body.rh-page > main.container.container--wide {
  flex: 1;
  min-height: 0;                 /* permite o filho flex encolher */
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  padding-bottom: 6px;
}
/* Tudo que NAO eh a tabela fica como flex-shrink: 0 (mantem altura
   natural). So o wrap cresce. */
body.rh-page .flashes,
body.rh-page .crumb,
body.rh-page .rh-sticky-top { flex-shrink: 0; }
body.rh-page .rh-table-wrap {
  flex: 1;
  min-height: 0;
  max-height: none;              /* anula calc anterior, flex assume */
}

/* Esconde o footer decorativo global ("Que a Força esteja com você.")
   nesta pagina — o template ja avisa que ele nao deveria aparecer aqui.
   Sem isso ele consome ~90px do flex column, espremendo a tabela e
   deixando visivel apenas 1 ou 2 linhas mesmo num laptop grande. */
body.rh-page > footer.footer { display: none !important; }

/* Compactacao agressiva do sticky-top NA rh-page: reduz padding,
   margens entre blocos e font-size do H1. Cada economia abaixo libera
   alguns pixels pra tabela — somados sao ~50px a mais de linhas
   visiveis. As regras genericas em .rh-sticky-top continuam intactas
   pra outras paginas que reusam o componente. */
body.rh-page .rh-sticky-top {
  padding: 4px 20px 4px;
  margin-bottom: 8px;
}
body.rh-page .rh-sticky-top .rh-head        { margin: 0 0 6px; }
body.rh-page .rh-sticky-top .rh-stats-line  { margin: 0 0 4px; }
body.rh-page .rh-sticky-top .rh-toolbar     { margin-bottom: 4px; }
body.rh-page .rh-sticky-top .rh-head h1     { font-size: 20px; margin: 0 0 2px; }
body.rh-page .rh-sticky-top .rh-project-tabs { margin: 0 0 6px; }
/* Crumb "← Portal" virou apenas ruido aqui (mesmo destino do botao
   "Inicio" no header global). Esconde pra economizar mais uma linha. */
body.rh-page > main > .crumb { display: none; }
.rh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
/* Higher-density variant: smaller padding + a touch smaller text so the
   wider grid (now with avatar + revenue) stays scannable on a laptop. */
.rh-table.rh-table-compact { font-size: 11.5px; }
.rh-table.rh-table-compact th { padding: 9px 10px; font-size: 10px; }
.rh-table.rh-table-compact td { padding: 7px 10px; }
.rh-table thead { background: var(--surface-alt); }
/* Cabecalho da tabela TRAVADO no topo enquanto a tabela rola. Como o
   .rh-table-wrap virou o scroll container, o sticky agora eh relativo
   ao topo do PROPRIO wrap (top: 0) — o que coincide visualmente com
   o limite inferior do .rh-sticky-top (que ocupa o resto da viewport
   acima). `position: sticky` precisa estar nas celulas <th> diretas
   — nao funciona no <thead> ou <tr> na maioria dos navegadores. */
.rh-table thead th {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface-alt);
  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.6);
}
.rh-table th {
  text-align: left;
  padding: 12px 14px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  border-bottom: 1px solid var(--border);
}
.rh-table th a { color: var(--text-muted); text-decoration: none; }
.rh-table th a:hover { color: var(--primary); }
.rh-table th.num, .rh-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* All cells single-line by default — values like 'BRL 884,68' must not
   wrap. Cells that should breathe (role) override with white-space:normal. */
.rh-table th, .rh-table td { white-space: nowrap; }
.rh-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.rh-table tbody tr:last-child td { border-bottom: 0; }
.rh-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.rh-row-closed { opacity: 0.6; }

.rr-cell,
.assignment-cell {
  white-space: nowrap;
}
/* Coluna 1 — RR/Assignment empilhados (RR em cima, Assignment embaixo).
   Cada linha alinhada à esquerda; sub-linha do Assignment levemente menor
   e mais clara, mas mantendo o mesmo grid monospace pra alinhar bonitinho. */
.rr-stack {
  white-space: nowrap;
  line-height: 1.25;
}
/* Cada linha (RR e Assignment) ocupa a célula toda — número à esquerda,
   ↗ pro Salesforce sempre no canto direito. Mesma fonte/peso, sub-linha
   só mais clarinha pra diferenciar visualmente. */
.rr-stack-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.rr-stack-line--sub {
  margin-top: 2px;
  opacity: 0.9;
}
/* RR e Assignment como texto puro (nao clicaveis). Numeros em branco,
   monospace, mesmo peso. A versao --assn sub-linha fica um tom mais
   suave pra hierarquia visual sem competir com o RR principal. */
.rr-number {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
  cursor: default;
}
.rr-number--assn {
  font-weight: 600;
  color: var(--text);
  opacity: 0.85;
}

/* Coluna Horas R/A — duas linhas, label à esquerda, números alinhados.
   Em mismatch, todo o conteúdo fica vermelho e mostramos um ⚠ amarelo
   centralizado verticalmente entre as linhas R: e A:.
   IMPORTANTE: NÃO usar display:flex no <td> direto — quebra a layout
   da tabela (browser ignora vertical-align:middle nos vizinhos e os
   campos de uma linha só caem pro topo). Flex vai em .hours-wrap. */
.hours-cell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.25;
}
.hours-wrap {
  display: flex;
  align-items: center;       /* ⚠ fica centralizado entre as duas linhas */
  justify-content: space-between;
  gap: 10px;
}
.hours-stack { min-width: 0; }
.hours-line {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hours-line--sub { margin-top: 1px; opacity: 0.92; }
.hours-label {
  display: inline-block;
  width: 16px;          /* alinha R: e A: pela esquerda */
  text-align: left;
  font-weight: 700;
  color: var(--text-muted);
}
.hours-num { font-weight: 600; }
.hours-warn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #f4c151;       /* amarelo do warning */
  cursor: help;
}

/* Tooltip custom (CSS-only). Aparece NA HORA ao passar o mouse — não
   tem aquele delay de ~1s do title nativo. Funciona em qualquer
   elemento com classes .tooltip-wrap + filho .tooltip-text. */
.tooltip-wrap {
  position: relative;
}
.tooltip-wrap .tooltip-text {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 100;
  width: max-content;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0a1024;
  border: 1px solid #f4c151;
  color: #f5f5f5;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.tooltip-wrap .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 12px;
  border: 6px solid transparent;
  border-top-color: #f4c151;
}
.tooltip-wrap:hover .tooltip-text,
.tooltip-wrap:focus .tooltip-text,
.tooltip-wrap:focus-within .tooltip-text {
  opacity: 1;
}
.hours-cell.hours-mismatch .hours-label,
.hours-cell.hours-mismatch .hours-num {
  color: #ff6b6b;       /* vermelho de alerta */
}

/* Coluna "Horas Lancadas" — actual em cima, % consumido embaixo.
   Cores progressivas no %: verde-padrao (<80%) -> amarelo (>=80%)
   -> vermelho pulsante (>100%, estouro). */
.actual-pct {
  font-variant-numeric: tabular-nums;
}
.actual-pct--high {
  color: #f4c151;       /* amarelo: chegando perto do planejado */
}
.actual-pct--over {
  color: #ff6b6b;       /* vermelho: ultrapassou o planejado */
  font-weight: 700;
}

/* ----- Coluna financeira stacked (Receita / Custo / Margem)
   Mesmo padrao visual da hours-cell: PLANEJADA em cima (forte),
   ATUAL embaixo (sub, mais discreta). Cores:
     margin-negative -> vermelho (margem negativa, prejuizo)
     margin-low      -> amarelo  (margem positiva mas < 30%)
     margin-healthy  -> verde    (margem >= 30%) */
.money-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.money-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
.money-line {
  font-weight: 600;
}
.money-line--sub {
  color: var(--text-muted);
  font-size: 0.92em;
}
.margin-negative { color: #ff6b6b !important; font-weight: 700; }
.margin-low      { color: #f4c151 !important; }
.margin-healthy  { color: var(--success); }
/* Recurso: wrap pra acomodar a célula clicável + o ↗ do SF lado a lado. */
.resource-wrap {
  /* Ocupa a célula toda e empurra a setinha do SF (↗) pro canto direito,
     independente do tamanho do nome — fica todas as setinhas alinhadas
     verticalmente coluna abaixo, mesmo com nomes de larguras diferentes. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.sf-open {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  /* font-family explicita pra evitar heranca de monospace em celulas como
     .tc-num-cell — a setinha ↗ renderiza diferente em monospace, ficando
     visualmente inconsistente entre colunas. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  transition: all 0.12s ease;
}
.sf-open:hover {
  color: var(--primary);
  border-color: var(--primary);
  text-decoration: none;
}
.resource-name { color: var(--text); white-space: nowrap; }
.resource-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Clicável quando temos URL de DM no Slack. Hover sutil + glyph que
   aparece à direita pra deixar claro que é interativo. */
.resource-cell--dm {
  text-decoration: none;
  color: inherit;
  padding: 2px 6px 2px 2px;
  margin: -2px -6px -2px -2px;
  border-radius: 8px;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.resource-cell--dm:hover,
.resource-cell--dm:focus-visible {
  background: rgba(63, 169, 245, 0.12);
  text-decoration: none;
  color: var(--text);
  outline: none;
}
.resource-cell--dm:hover .resource-name,
.resource-cell--dm:focus-visible .resource-name { color: var(--primary); }
.resource-cell--dm:hover .resource-avatar { border-color: var(--primary); }
.resource-dm-glyph {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease, color 0.12s ease;
}
.resource-cell--dm:hover .resource-dm-glyph,
.resource-cell--dm:focus-visible .resource-dm-glyph {
  opacity: 1;
  transform: translateX(0);
  color: var(--primary);
}
/* Resource "suggested" — RR em Ready to Staff: o nome veio do campo
   pse__Resource__c (Suggested Resource), não do Staffer oficial. Nome
   em itálico + badge "sug." discreto à direita pra deixar claro que
   ainda não é assignment confirmado. */
.resource-cell--suggested .resource-name {
  font-style: italic;
  color: var(--text-muted);
}
.resource-suggested-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 193, 7, 0.14);
  border: 1px solid rgba(255, 193, 7, 0.45);
  color: #d4a017;
  font-size: 10px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  line-height: 1.4;
  cursor: help;
}
.resource-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.resource-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: 'JetBrains Mono', monospace;
}
/* Role can be long ("Senior Business Strategy Consultant"). Allow a
   single-line ellipsis with a generous max so it doesn't push the Gantt
   off-screen on mid-size laptops. */
.role-cell {
  color: var(--text-muted);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* (Removida) Sticky bottom totals bar — RRs no filtro / Total de
   horas ja vivem nos cards do .rh-stats no topo da pagina, entao a
   barra duplicada embaixo virou ruido visual. Sem padding-bottom
   extra; o .footer global volta a aparecer normalmente. */

/* -----------------------------------------------------------------------
   Gantt column — single horizontal bar per RR across a shared timeline.
   Layout uses absolute positioning inside a relative .gantt-track. The
   timeline span (start→end of all active RRs) is computed server-side
   in rh._gantt_window so left/width can be plain CSS percentages.
   ----------------------------------------------------------------------- */
/* Coluna do Gantt agora tem largura FIXA — o conteudo (axis + barras)
   tem largura em px > coluna e rola horizontalmente dentro do proprio
   container. O scrollbar visivel mora no <th> (axis) e o JS sincroniza
   o scrollLeft com todas as celulas abaixo. */
.rh-table th.gantt-col {
  width: 640px;
  min-width: 640px;
  max-width: 640px;
  padding: 0 12px 4px;
  vertical-align: bottom;
}
.rh-table td.gantt-cell {
  width: 640px;
  min-width: 640px;
  max-width: 640px;
  /* Padding vertical = 0 pra que .gantt-canvas (height:100%) preencha
     a celula toda — assim .gantt-today-line (top:0 bottom:0) emenda
     entre rows consecutivas e forma a linha vertical continua. */
  padding: 0 12px;
  vertical-align: middle;
}

/* Container scrollavel do axis (MASTER). Scroll horizontal e
   controlado por wheel/trackpad swipe — a scrollbar visivel foi
   removida pra deixar o cabecalho mais limpo (combinando com as
   cells, que ja escondem a propria scrollbar). overflow-x precisa
   permanecer scrollavel via JS (axis.scrollLeft = ...). */
.gantt-axis-scroll {
  width: 100%;
  height: 40px;             /* so a altura do axis — sem gap pra scrollbar */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;    /* Firefox */
}
.gantt-axis-scroll::-webkit-scrollbar { display: none; }

/* Container scrollavel das celulas (SLAVE) — scrollbar escondida.
   A largura da canvas eh setada inline (style="width:Npx"). overflow
   precisa ser auto pra que scrollLeft seja settable via JS.
   height:100% pra preencher a altura da row inteira (com vertical-align
   middle no <td>), permitindo que a today-line seja continua. */
.gantt-cell-scroll {
  width: 100%;
  height: 100%;
  min-height: 34px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.gantt-cell-scroll::-webkit-scrollbar { display: none; }

/* Scrollbar dedicado do Gantt — fica sticky no rodape da tabela e move
   APENAS o sub-scroll do Gantt (axis + todas as cells), independente do
   scroll horizontal externo de .rh-table-wrap. Assim o usuario consegue:
   1) rolar .rh-table-wrap pra ver colunas de financeiro / recurso etc. e
   2) rolar este scrollbar pra panorar o cronograma sem mexer no resto.
   `position: sticky; bottom: 0` no <td> mantem o handle visivel mesmo
   quando ha muitas RRs e a tabela rolou verticalmente. */
.rh-gantt-scroll-row td {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 0;
  /* z-index acima do tbody e do today-overlay, mas abaixo da thead
     sticky-top (que e' 30 em outras regras). */
  z-index: 26;
}
.rh-gantt-scroll-placeholder {
  /* So existe pra ocupar o espaco das colunas que vem antes do Gantt
     (e dar o background pra esconder o conteudo da tabela debaixo). */
  height: 14px;
}
.rh-gantt-scroll-cell {
  width: 640px;
  min-width: 640px;
  max-width: 640px;
  padding: 0;
}
.gantt-bottom-scroll {
  width: 100%;
  height: 14px;
  overflow-x: scroll;
  overflow-y: hidden;
  /* Scrollbar discreta em azul, no padrao do resto da pagina. */
  scrollbar-width: thin;
  scrollbar-color: rgba(63, 169, 245, 0.55) transparent;
}
.gantt-bottom-scroll::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.gantt-bottom-scroll::-webkit-scrollbar-thumb {
  background: rgba(63, 169, 245, 0.55);
  border-radius: 5px;
}
.gantt-bottom-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.gantt-bottom-scroll-inner {
  height: 1px;
  /* width vem inline (= gantt.timeline_px) — esse spacer larga forca a
     scrollbar a aparecer com o tamanho proporcional certo. */
}
/* Quando usuario esconde a coluna do Gantt, esconde a linha tb. */
body.gantt-hidden .rh-gantt-scroll-row { display: none !important; }

/* Canvas interna: container relative onde absolute-positioned bars /
   today-line / month-grid vivem. Sua largura em px (inline) define o
   "mundo" do Gantt e a altura preenche o container scrollavel. */
.gantt-canvas {
  position: relative;
  height: 100%;
  min-height: 34px;
}

.gantt-axis {
  position: relative;
  /* Três faixas verticais empilhadas — sem sobreposição com o badge HOJE:
     [ 0–18px] → "HOJE · 18/mai" (gantt-today-marker, badge + setinha)
     [22–34px] → label do mês (gantt-month-label)
     [34–40px] → tick + borda da coluna
     Total = 40px. */
  height: 40px;
  /* Largura aqui eh definida inline via style="width:Npx" — igual a
     canvas das celulas, pra alinhar bonitinho coluna abaixo. */
}
.gantt-tick {
  position: absolute;
  top: 34px;
  width: 1px;
  height: 6px;
  background: var(--border);
}
.gantt-month-label {
  position: absolute;
  top: 22px;
  transform: translateX(-50%);
  font-size: 9.5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.gantt-track {
  position: absolute;
  /* Faixa centralizada verticalmente dentro da canvas (que ocupa toda
     a altura da row). Mantem visual de "barrinha" sem encostar nas
     bordas da celula. */
  top: 50%;
  left: 0; right: 0;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
}
.gantt-grid {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* "Hoje" — linha vertical vermelha fina.
   ANTES: ficava DENTRO de cada .gantt-canvas (uma por row), o que
   gerava gaps visuais entre rows por causa do border-bottom de cada
   <td> + heuristica do height:100% em celula de tabela.
   AGORA: usamos um UNICO overlay .gantt-today-overlay posicionado
   absoluto em cima da .rh-table-wrap inteira, e o JS atualiza seu
   `left` em funcao do scrollLeft do axis (master). Assim a linha eh
   continua de ponta a ponta, sem depender da altura de cada cell.

   Mantemos .gantt-today-line como display:none por compatibilidade
   caso algum template ainda renderize (sem efeito visual). */
.gantt-today-line { display: none; }

.gantt-today-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ff5b5b;
  box-shadow: 0 0 3px rgba(255, 91, 91, 0.35);
  /* z-index: acima das barras (2) e da gantt-track, abaixo do thead
     sticky (30) — quando o usuario rolar verticalmente, a thead cobre
     o topo da linha, deixando-a "saindo" debaixo do cabecalho. */
  z-index: 5;
  pointer-events: none;
  /* display:none ate o JS calcular a primeira posicao — evita flash
     em x=0 antes do rAF inicial. */
  display: none;
}
/* Quando o usuario esconde a coluna do Gantt, esconde a linha tb. */
body.gantt-hidden .gantt-today-overlay { display: none !important; }
.gantt-today-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.15;
  color: #ffffff;
  background: #ff5b5b;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(255, 91, 91, 0.45);
  cursor: default;
  z-index: 3;
  white-space: nowrap;
}
.gantt-today-marker .gantt-today-tag { text-transform: uppercase; }
.gantt-today-marker .gantt-today-date {
  font-weight: 500;
  letter-spacing: 0.2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  opacity: 0.92;
  text-transform: lowercase;
}
.gantt-today-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0; height: 0;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-top: 3px solid #ff5b5b;
  transform: translateX(-50%);
}
.gantt-bar {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 4px;
  background: var(--primary);
  opacity: 0.85;
  min-width: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.gantt-bar:hover { opacity: 1; transform: scaleY(1.1); }

/* Datas instantâneas nos lados da barra ao passar o mouse — sem o
   delay do `title` nativo. data-start na esquerda (cola pela direita
   do label, do lado esquerdo da barra), data-end na direita (cola
   pela esquerda do label, do lado direito da barra). Aparecem só
   no :hover. */
.gantt-bar::before,
.gantt-bar::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  background: rgba(15, 18, 26, 0.92);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.08s ease-out;
}
.gantt-bar::before {
  content: attr(data-start);
  right: 100%;
  margin-right: 6px;
}
.gantt-bar::after {
  content: attr(data-end);
  left: 100%;
  margin-left: 6px;
}
.gantt-bar:hover::before,
.gantt-bar:hover::after,
.gantt-bar:focus::before,
.gantt-bar:focus::after {
  opacity: 1;
}
/* Status-coloured variants — fall back to primary when status is unknown. */
.status-bar-assigned        { background: var(--primary); }
.status-bar-ready-to-staff  { background: #f0b428; }
.status-bar-in-progress     { background: var(--primary); }
.status-bar-completed,
.status-bar-closed          { background: var(--success); }
.status-bar-on-hold         { background: #f0b428; opacity: 0.55; }
.gantt-empty {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 18px;
}

/* ---- Toggle de mostrar/ocultar a coluna do Gantt -----------------------
   O botao vive na .rh-toolbar (ao lado do search). Quando o usuario
   clica, o JS toggla `body.gantt-hidden` e persiste em localStorage.
   As regras abaixo escondem cabecalho e celulas — a tabela se reorganiza
   pra ocupar o espaco liberado, sem precisar re-render. */
.gantt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
}
.gantt-toggle .icon {
  width: 16px;
  height: 16px;
  background-color: var(--primary);
}
.gantt-toggle[aria-pressed="false"] .icon {
  background-color: var(--text-muted);
  opacity: 0.6;
}
.gantt-toggle[aria-pressed="false"] .gantt-toggle-label {
  opacity: 0.6;
  text-decoration: line-through;
}
body.gantt-hidden .rh-table th.gantt-col,
body.gantt-hidden .rh-table td.gantt-cell {
  display: none;
}

/* Segmented control "Mes / Semana" — fica colado no .gantt-toggle,
   visualmente um "tab group". Cada opcao eh um <a> com href que
   troca o ?view= e recarrega a pagina (a granularidade muda a
   timeline_px e os ticks, calculados server-side). */
.gantt-view-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.gantt-view-toggle .seg-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: background .15s ease, color .15s ease;
}
.gantt-view-toggle .seg-btn + .seg-btn {
  border-left: 1px solid var(--border);
}
.gantt-view-toggle .seg-btn:hover {
  background: rgba(63,169,245,0.08);
  color: var(--text);
}
.gantt-view-toggle .seg-btn.is-active {
  background: var(--primary);
  color: #0a1227;
}

/* Em modo SEMANA o axis tem ~4x mais labels que em modo MES. Reduzo
   um pouco a fonte do label e adiciono rotacao leve quando precisar
   couber. Aqui mantenho horizontal mas menor — se ficar apertado
   visualmente, evoluo pra rotacionado. */
.gantt-axis--week .gantt-month-label {
  font-size: 8.5px;
  letter-spacing: 0.2px;
}

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-muted);
}
.status-filled { background: rgba(93,211,158,0.15); color: var(--success); border-color: var(--success); }
.status-approved { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.status-pending { background: rgba(240,180,40,0.15); color: #f0b428; border-color: rgba(240,180,40,0.6); }
.status-closed { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.status-in-progress { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.status-cancelled,
.status-canceled { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.status-completed { background: rgba(93,211,158,0.15); color: var(--success); border-color: var(--success); }
.status-on-hold { background: rgba(240,180,40,0.15); color: #f0b428; border-color: rgba(240,180,40,0.6); }
.status-not-started { background: var(--surface-alt); color: var(--text-muted); }
/* RR stages que faltavam — Assigned (verde) e os "Ready to ..." pra
   manter coerência com o color-coding dos cards de cima. */
.status-assigned { background: rgba(93,211,158,0.15); color: var(--success); border-color: var(--success); }
.status-ready-to-staff { background: rgba(240,180,40,0.15); color: #f0b428; border-color: rgba(240,180,40,0.6); }
.status-ready-to-assign { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
/* Draft: cinza-muted — RR rascunho, ainda nao bom pra staffing. */
.status-draft { background: rgba(255,255,255,0.06); color: var(--text-muted); border-color: rgba(255,255,255,0.18); }

/* Variante MICRO da status-pill — espaço apertado (ex: coluna
   Assignment de 90px na Alocacao Diaria, quando o RR nao tem
   assignment e mostramos o status do RR no lugar do numero). */
.status-pill--micro {
  padding: 1px 6px;
  font-size: 9.5px;
  letter-spacing: 0.3px;
  line-height: 1.5;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* Assignment statuses (Scheduled = verde; Tentative = amarelo;
   Not Accepted = vermelho; Auto Closed = muted). */
.status-scheduled { background: rgba(93,211,158,0.15); color: var(--success); border-color: var(--success); }
.status-tentative { background: rgba(240,180,40,0.15); color: #f0b428; border-color: rgba(240,180,40,0.6); }
.status-not-accepted { background: rgba(255,107,107,0.15); color: #ff6b6b; border-color: rgba(255,107,107,0.6); }
.status-auto-closed { background: rgba(255,255,255,0.06); color: var(--text-muted); }
/* AEDS: End Date Status em branco em RR com Assignment — pill vermelha
   pra casar visualmente com o chip do alerta AEDS no header. */
.status-aeds-missing {
  background: rgba(255,107,107,0.15);
  color: #ff6b6b;
  border-color: rgba(255,107,107,0.6);
  text-transform: none;       /* "— faltando —" fica mais legivel sem caps */
  letter-spacing: 0.2px;
}

/* Coluna Stage/Status: stack de duas pílulas com prefixo R:/A: igual à
   coluna Horas R/A, pra leitura coerente. */
.stage-cell {
  white-space: nowrap;
  line-height: 1.25;
}
.stage-line {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stage-line--sub { margin-top: 3px; }
/* Prefixo "R:" / "A:" — compartilhado entre stage-cell e hours-cell.
   Largura fixa pra alinhar perfeitamente em ambas as colunas. */
.ra-label {
  display: inline-block;
  width: 16px;
  text-align: left;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}

.auto-sync-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: right;
}
.auto-sync-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(93, 211, 158, 0.15);
  color: var(--success);
  border: 1px solid var(--success);
}

/* Indicador "watcher local sincronizando agora" — aparece ao clicar
   no botão de sync, some na hora que o sync chega (a página recarrega). */
.watcher-indicator {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(63, 169, 245, 0.10);
  border: 1px solid rgba(63, 169, 245, 0.30);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text);
  font-weight: 500;
}
.watcher-indicator.timeout {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.35);
  color: #f4c151;
}
.watcher-indicator.timeout code {
  background: rgba(0,0,0,0.25);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10.5px;
  margin-left: 4px;
}
.watcher-indicator .spinner {
  width: 11px; height: 11px;
  border: 2px solid rgba(63, 169, 245, 0.3);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: wspin 0.8s linear infinite;
}
.watcher-indicator.timeout .spinner { display: none; }
.watcher-indicator .watcher-text { line-height: 1.2; }
/* Botão "X" para dispensar o indicador manualmente — útil quando o
   polling fica preso (sessão expirada, rede ruim) e o usuário só quer
   tirar isso da frente. */
.watcher-indicator .watcher-close {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 2px;
  border-radius: 999px;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.watcher-indicator .watcher-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}
@keyframes wspin { to { transform: rotate(360deg); } }

/* Pending-sync badge on the "Atualizar com Salesforce" button. */
.sync-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}

.sf-proj-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--surface-alt);
  color: var(--secondary);
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
}

/* =========================================================================
   TIMECARDS — pagina /rh/timecards (lista detalhada de lancamentos)
   Mesmo padrao visual da tabela de contrato: thead sticky, monospace na
   coluna numerica, status com cores semanticas, hover suave. Tudo
   "trazer tudo": colunas estreitas, scroll horizontal quando precisa.
   ======================================================================== */
.timecards-page .tc-head {
  margin-bottom: 14px;
}
.timecards-page .tc-head-top {
  display: flex;
  /* Era 'baseline': o botao do back-link tem padding 10px e fica mais
     alto que o h1, entao colava no tc-summary abaixo. Centralizar (e
     dar margin-bottom) elimina o overlap. */
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.timecards-page .tc-head-top h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.2px;
}
.timecards-page .tc-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  flex-wrap: wrap;
}

/* ─── Picker de Faturamento + KPIs (header) ─────────────────────────── */
.timecards-page .tc-cycle-picker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(168,85,247,0.08);
  border: 1px solid rgba(168,85,247,0.32);
  border-radius: 10px;
  font-size: 12px;
  flex-wrap: wrap;
}
.timecards-page .tc-cycle-lbl {
  color: #d8b4fe;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 10.5px;
}
.timecards-page .tc-cycle-sel {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(168,85,247,0.45);
  border-radius: 6px;
  color: #f1f5f9;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  padding: 4px 8px;
  outline: none;
  min-width: 220px;
}
.timecards-page .tc-cycle-sel:focus {
  border-color: rgba(168,85,247,0.85);
  box-shadow: 0 0 0 2px rgba(168,85,247,0.25);
}
.timecards-page .tc-cycle-kpis {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid rgba(168,85,247,0.35);
}
.timecards-page .tc-cycle-kpi {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.1;
}
.timecards-page .tc-cycle-kpi-lbl {
  font-size: 9.5px;
  color: #c4b5fd;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.timecards-page .tc-cycle-kpi-val {
  font-size: 14px;
  font-weight: 700;
  color: #f5f3ff;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.2px;
}
.timecards-page .tc-tabs {
  display: inline-flex;
  gap: 6px;
  margin: 8px 0 14px;
  flex-wrap: wrap;
}
.timecards-page .tc-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  text-decoration: none;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.timecards-page .tc-tab:hover {
  color: var(--text);
  border-color: var(--primary);
}
.timecards-page .tc-tab.is-active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.timecards-page .tc-tab-count {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.18);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
}
.timecards-page .tc-tab:not(.is-active) .tc-tab-count {
  background: var(--surface-alt);
  color: var(--text);
}

/* Cards de agregados */
.timecards-page .tc-summary {
  /* 9 cards numa linha (5 operacionais + 4 financeiros). minmax 0 deixa
     o grid encolher caso a viewport seja apertada (telas <1400). */
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 1400px) {
  .timecards-page .tc-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.timecards-page .tc-sum-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 62px;
  min-width: 0;          /* fundamental pra grid auto encolher */
  overflow: hidden;
}
.timecards-page .tc-sum-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timecards-page .tc-sum-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Cards financeiros — fonte ligeiramente menor pra caber 'R$ 1.234.567,89' */
.timecards-page .tc-sum-card--fin .tc-sum-val { font-size: 15px; }
.timecards-page .tc-sum-card--rev    { border-color: rgba(63,169,245,0.45); }
.timecards-page .tc-sum-card--cost   { border-color: rgba(255,180,90,0.45); }
.timecards-page .tc-sum-card--margin,
.timecards-page .tc-sum-card--margin-pct {
  border-color: rgba(120, 200, 140, 0.35);
}
.timecards-page .tc-sum-money.is-pos,
.timecards-page .tc-sum-val.is-pos { color: #5DD39E; }
.timecards-page .tc-sum-money.is-neg,
.timecards-page .tc-sum-val.is-neg { color: #FF6B6B; }

/* Celulas financeiras na tabela. Mantemos cor sutil pra nao competir com
   o status pill — vermelho/verde so quando faz sentido (margem). */
.timecards-page .tc-fin-th {
  background: rgba(63,169,245,0.05);
}
.timecards-page .tc-fin-cell {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  white-space: nowrap;
}
.timecards-page .tc-fin-cell.is-pos { color: #5DD39E; }
.timecards-page .tc-fin-cell.is-neg { color: #FF6B6B; }
.timecards-page .tc-sum-card--statuses { grid-column: span 2; }
.timecards-page .tc-sum-statuses {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}

/* Filtros */
.timecards-page .tc-filters {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.timecards-page .tc-search {
  flex: 1 1 280px; min-width: 220px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.timecards-page .tc-search:focus { border-color: var(--primary); }
.timecards-page .tc-status-select {
  padding: 6px 10px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
}

/* ─── Toolbar (busca live + limpar + export Excel) ────────────────────
   Substitui o antigo `.tc-filters` (form submit). Tudo aqui e client-side. */
.timecards-page .tc-toolbar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin: 6px 0 14px;
}
.timecards-page .tc-toolbar .tc-search { flex: 1 1 360px; min-width: 240px; }
.timecards-page .tc-toolbar-spacer { flex: 1 1 0; min-width: 0; }
/* Relatorio do cliente: so vira link de verdade depois que um ciclo de
   faturamento e' escolhido — sem ciclo nao ha periodo pra recortar. */
.timecards-page .tc-client-report.is-disabled {
  opacity: .45; pointer-events: none; cursor: default;
}
.timecards-page .tc-active-count {
  font-size: 12px; color: var(--muted, #8c95a8);
  font-variant-numeric: tabular-nums;
}
.timecards-page .tc-active-count.is-active { color: var(--primary, #3fa9f5); font-weight: 600; }

/* Botao de export Excel — fundo branco como o usuario pediu, com identidade
   visual planilha (verde-Excel sutil no hover pra dar dica do destino). */
.timecards-page #tcExportXlsx {
  background: #ffffff !important;
  color: #1a1f2e !important;
  border: 1px solid #d0d7de !important;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.timecards-page #tcExportXlsx:hover:not(:disabled) {
  background: #f6f8fa !important;
  border-color: #1a7f37 !important;
  color: #1a7f37 !important;
  transform: translateY(-1px);
}
.timecards-page #tcExportXlsx:disabled {
  opacity: 0.7; cursor: not-allowed;
}

/* ─── Filter button no header da coluna ───────────────────────────────
   Bem discreto: pequeno triangulo "▼" alinhado a direita do label. */
.timecards-page .tc-th-filter { position: relative; white-space: nowrap; }
.timecards-page .tc-fbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-left: 4px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: inherit;
  opacity: 0.5;
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease;
}
.timecards-page .tc-fbtn:hover { opacity: 1; background: rgba(63,169,245,0.16); border-color: rgba(63,169,245,0.35); }
.timecards-page .tc-fbtn.is-active {
  opacity: 1;
  background: rgba(63,169,245,0.28);
  border-color: rgba(63,169,245,0.6);
  color: #fff;
}
.timecards-page .tc-fbtn.is-active::after { content: " "; }

/* ─── Popup multi-select reutilizavel (1 unico DOM, reposicionado) ──── */
.tc-filter-popup {
  position: fixed;
  z-index: 9999;
  width: 280px;
  background: #1a1f2e;
  color: #e7ecf2;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
}
.tc-filter-popup[hidden] { display: none !important; }
.tc-filter-popup .tc-fp-head { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.tc-filter-popup .tc-fp-search {
  width: 100%;
  padding: 6px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  color: #e7ecf2;
  font-size: 12.5px;
  outline: none;
}
.tc-filter-popup .tc-fp-search:focus { border-color: #3fa9f5; }
.tc-filter-popup .tc-fp-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  font-size: 11.5px;
}
.tc-filter-popup .tc-fp-link {
  background: transparent;
  border: 0;
  color: #3fa9f5;
  padding: 2px 4px;
  font-weight: 600;
  cursor: pointer;
  font-size: 11.5px;
}
.tc-filter-popup .tc-fp-link:hover { text-decoration: underline; }
.tc-filter-popup .tc-fp-list {
  list-style: none; margin: 0; padding: 4px 0;
  max-height: 280px; overflow-y: auto;
}
.tc-filter-popup .tc-fp-list::-webkit-scrollbar { width: 8px; }
.tc-filter-popup .tc-fp-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 4px;
}
.tc-filter-popup .tc-fp-item { padding: 0; }
.tc-filter-popup .tc-fp-item label {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; cursor: pointer;
  font-size: 12.5px;
}
.tc-filter-popup .tc-fp-item label:hover { background: rgba(63,169,245,0.10); }
.tc-filter-popup .tc-fp-item input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: #3fa9f5; cursor: pointer; margin: 0;
}
.tc-filter-popup .tc-fp-item label span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.tc-filter-popup .tc-fp-foot {
  display: flex; gap: 6px; justify-content: flex-end;
  padding: 8px; border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}

/* ─── Faturamento (1a coluna): pill identificador + X vermelho ────────
   Clicavel pra editar override manual (mai/2026). */
.timecards-page .tc-billing-cell {
  text-align: center;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 120ms ease;
}
.timecards-page .tc-billing-cell:hover {
  background: rgba(99,102,241,0.12);
}
.timecards-page .tc-billing-cell:focus {
  outline: 2px solid rgba(99,102,241,0.55);
  outline-offset: -2px;
}
.timecards-page .tc-billing-cell.is-saving {
  background: rgba(99,102,241,0.30);
  animation: tcActivityPulse 900ms ease-in-out infinite;
}
.timecards-page .tc-billing-cell.is-saved {
  background: rgba(34,197,94,0.30);
}
.timecards-page .tc-billing-cell.is-error {
  background: rgba(239,68,68,0.30);
  animation: tcActivityPulse 600ms ease-in-out 2;
}
.timecards-page .tc-billing-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(63,169,245,0.18);
  border: 1px solid rgba(63,169,245,0.45);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  font-family: 'JetBrains Mono', monospace;
}
/* Override manual = roxo + pino — diferencia visualmente do auto. */
.timecards-page .tc-billing-pill.is-override {
  background: rgba(168,85,247,0.20);
  border-color: rgba(168,85,247,0.55);
  color: #d8b4fe;
}
.timecards-page .tc-billing-ov {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.95;
}
.timecards-page .tc-billing-none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,107,107,0.18);
  border: 1px solid rgba(255,107,107,0.5);
  color: #ff6b6b;
}
.timecards-page .tc-billing-editor {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(168,85,247,0.6);
  border-radius: 4px;
  color: #f1f5f9;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 3px 6px;
  min-width: 180px;
  outline: none;
}

/* ─── Modal "Cadastrar Faturamento" (PiP-style) ──────────────────────── */
.tc-billing-modal[hidden] { display: none !important; }
.tc-billing-modal {
  position: fixed; inset: 0;
  z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.tc-billing-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
}
.tc-billing-modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #0e1424;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 6px 16px rgba(0,0,0,0.35);
  color: var(--text);
}
.tc-billing-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  position: sticky; top: 0; z-index: 2;
}
.tc-billing-modal-head h2 {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--text);
}
.tc-billing-close {
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
  border-radius: 6px;
}
.tc-billing-close:hover { background: rgba(255,255,255,0.08); color: #fff; }

.tc-billing-section { padding: 14px 20px; }
.tc-billing-section h3 {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted); letter-spacing: 0.6px;
}
.tc-billing-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.tc-billing-table th, .tc-billing-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tc-billing-table th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); font-weight: 700;
}
.tc-billing-table td:last-child { text-align: right; }
.tc-billing-del {
  background: transparent; border: 1px solid rgba(255,107,107,0.45);
  color: #ff6b6b; padding: 2px 8px; border-radius: 4px;
  cursor: pointer; font-size: 12px;
}
.tc-billing-del:hover { background: rgba(255,107,107,0.18); }

/* ─── Linhas editaveis (cada celula vira input) ──────────────────────── */
.tc-billing-table--editable td {
  padding: 4px 6px;
}
.tc-billing-edit-code,
.tc-billing-edit-date {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  color: var(--text, #e5e7eb);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12.5px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tc-billing-edit-code {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: #93c5fd;
  letter-spacing: 0.3px;
}
.tc-billing-edit-code:focus,
.tc-billing-edit-date:focus {
  outline: none;
  border-color: var(--primary, #6366f1);
  background: rgba(99,102,241,0.10);
}
/* Date inputs em dark: pinta o picker */
.tc-billing-edit-date::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

.tc-billing-edit-actions {
  display: flex; gap: 6px; justify-content: flex-end;
  white-space: nowrap;
}
.tc-billing-save {
  background: transparent; border: 1px solid rgba(34,197,94,0.45);
  color: #22c55e; padding: 2px 8px; border-radius: 4px;
  cursor: pointer; font-size: 13px; font-weight: 700;
  line-height: 1;
}
.tc-billing-save:hover {
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.70);
}

.tc-billing-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
.tc-billing-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.tc-billing-form input {
  padding: 7px 10px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.tc-billing-form input:focus { border-color: var(--primary); }

/* Status pills (mesmas cores semanticas usadas em outras tabelas). */
.timecards-page .tc-status-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.25px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
}
.timecards-page .tc-status-pill[data-status="Approved"]   { background: rgba(93,211,158,0.18); border-color: rgba(93,211,158,0.45); color: #5dd39e; }
.timecards-page .tc-status-pill[data-status="Submitted"]  { background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.45); color: #f59e0b; }
.timecards-page .tc-status-pill[data-status="Saved"]      { background: rgba(63,169,245,0.14); border-color: rgba(63,169,245,0.35); color: var(--primary); }
.timecards-page .tc-status-pill[data-status="Rejected"]   { background: rgba(255,107,107,0.18); border-color: rgba(255,107,107,0.45); color: #ff6b6b; }

/* Tabela — viewport-bound: scroll horizontal E vertical ficam SEMPRE
   visiveis dentro do .tc-wrap, sem precisar rolar a pagina inteira pra
   chegar no scrollbar. max-height = viewport - tudo que aparece acima
   (navbar + tc-head completo + margens) com piso de 380px pra telas
   muito baixas (laptops 13"). */
.timecards-page .tc-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
  max-height: calc(100vh - 340px);
  min-height: 380px;
  background: rgba(0,0,0,0.10);
  /* Scroll suave por wheel/touch */
  scrollbar-gutter: stable both-edges;
}
/* Webkit (Chrome/Edge/Safari): scrollbars sempre visiveis e estilizados. */
.timecards-page .tc-wrap::-webkit-scrollbar { width: 12px; height: 12px; }
.timecards-page .tc-wrap::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
}
.timecards-page .tc-wrap::-webkit-scrollbar-thumb {
  background: rgba(63,169,245,0.55);
  border-radius: 6px;
  border: 2px solid rgba(0,0,0,0.20);
}
.timecards-page .tc-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(63,169,245,0.85);
}
.timecards-page .tc-wrap::-webkit-scrollbar-corner {
  background: rgba(0,0,0,0.25);
}
/* Firefox */
.timecards-page .tc-wrap {
  scrollbar-color: rgba(63,169,245,0.55) rgba(0,0,0,0.25);
  scrollbar-width: thin;
}
.timecards-page .tc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-family: 'Inter', sans-serif;
}
/* ── Colunas de classificacao manual (mai/2026) — Atuação / Consultoria /
   Descricao. Editaveis com clique. is-pending = amarelo dim, is-na =
   cinza dim, hover = highlight, is-saving = pulse, is-saved = flash
   verde momentaneo, is-error = pulse vermelho. ───────────────────── */
.timecards-page .tc-activity-cell {
  font-size: 11px;
  max-width: 220px;
  min-width: 90px;
  padding: 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  border-radius: 3px;
  transition: background-color 120ms ease, color 120ms ease;
}
.timecards-page .tc-activity-cell.tc-activity-desc {
  max-width: 340px;
  white-space: nowrap;
}
.timecards-page .tc-activity-cell.is-pending {
  color: #fcd34d;
  font-style: italic;
}
.timecards-page .tc-activity-cell.is-na {
  color: rgba(255,255,255,0.40);
  font-style: italic;
}
.timecards-page .tc-activity-cell:hover {
  background: rgba(99,102,241,0.18);
  color: #e5e7eb;
}
.timecards-page .tc-activity-cell:focus {
  outline: 2px solid rgba(99,102,241,0.55);
  outline-offset: -2px;
}
.timecards-page .tc-activity-cell.is-saving {
  background: rgba(99,102,241,0.30);
  animation: tcActivityPulse 900ms ease-in-out infinite;
}
.timecards-page .tc-activity-cell.is-saved {
  background: rgba(34,197,94,0.30);
}
.timecards-page .tc-activity-cell.is-error {
  background: rgba(239,68,68,0.30);
  animation: tcActivityPulse 600ms ease-in-out 2;
}
@keyframes tcActivityPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.timecards-page .tc-activity-editor {
  width: 100%;
  min-width: 120px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(99,102,241,0.55);
  border-radius: 3px;
  color: #f1f5f9;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  padding: 3px 5px;
  box-sizing: border-box;
  outline: none;
}
.timecards-page textarea.tc-activity-editor {
  min-height: 60px;
  resize: vertical;
  white-space: pre-wrap;
}
.timecards-page .tc-th-activity {
  background: rgba(99,102,241,0.08);
}
.timecards-page .tc-table thead {
  /* O sticky de verdade vai NO TH (alguns browsers nao pintam o bg
     do <thead> sticky, deixando linhas de baixo "vazarem"). */
  background: rgba(0,0,0,0.55);
}
.timecards-page .tc-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  /* Background opaco — quando o usuario rolar verticalmente, as rows
     passam POR TRAS do header sem "vazar" cor. */
  background: #0e1424;
  backdrop-filter: blur(4px);
}
.timecards-page .tc-table thead th.num { text-align: right; }
.timecards-page .tc-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.3;
}
.timecards-page .tc-table tbody tr.tc-row:nth-child(odd) td { background: rgba(255,255,255,0.012); }
.timecards-page .tc-table tbody tr.tc-row:hover td { background: rgba(63,169,245,0.06); }
.timecards-page .tc-table tbody tr.tc-row--approved td { border-left: 2px solid rgba(93,211,158,0.55); }
.timecards-page .tc-table tbody tr.tc-row--submitted td { border-left: 2px solid rgba(245,158,11,0.55); }

.timecards-page .tc-table .num {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.timecards-page .tc-num-cell {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}
/* TCH number / Assignment + setinha-SF agrupados; setinha herda o estilo
   global .sf-open. Usado tanto na celula '#' quanto na 'Assignment'. */
.timecards-page .tc-num-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.timecards-page .tc-num-wrap .tc-num { color: #fff; font-weight: 600; }
.timecards-page .tc-asg-num {
  color: #fff;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

/* Card 'Timecards' — valor + 'de N' inline (ao inves de quebrar 2 linhas)
   pra ficar compacto e elegante: '82 / 82' em vez de '82\nde 82'. */
.timecards-page .tc-sum-val-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
}
.timecards-page .tc-sum-val-row .tc-sum-val { line-height: 1; }
.timecards-page .tc-sum-val-row .tc-sum-of {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
/* Avatar do recurso vem na mesma celula que o nome — encolhe um pouco
   pra nao engordar a linha da tabela. */
.timecards-page .resource-avatar { width: 22px; height: 22px; }
.timecards-page .resource-cell { gap: 6px; }
.timecards-page .resource-name { font-size: 12.5px; }
.timecards-page .tc-week { font-size: 11px; color: var(--text-muted); }
.timecards-page .tc-bool {
  text-align: center;
  color: var(--text-muted);
  font-weight: 700;
}
.timecards-page .tc-bool--yes { color: #5dd39e; }
.timecards-page .tc-bool--no  { color: #ff6b6b; }
.timecards-page .tc-bool-date {
  display: block;
  font-size: 10px;
  font-weight: 400;
  margin-top: 2px;
  color: var(--text-muted);
}
/* Travessao "nao submetido" — discreto, so um dash em cinza. */
.timecards-page .tc-bool-dash {
  display: inline-block;
  color: var(--text-muted);
  opacity: 0.5;
  font-size: 14px;
}
/* Icones coloridos (check verde / dash vermelho) — pintados em pill
   leve pra dar contraste com o fundo escuro da row. */
.timecards-page .tc-bool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  vertical-align: middle;
}
.timecards-page .tc-bool-icon--yes {
  background: rgba(93,211,158,0.18);
  color: #5dd39e;
  border: 1px solid rgba(93,211,158,0.45);
}
.timecards-page .tc-bool-icon--no {
  background: rgba(255,107,107,0.18);
  color: #ff6b6b;
  border: 1px solid rgba(255,107,107,0.45);
}
.timecards-page .tc-notes {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  color: var(--text-muted);
}
.timecards-page .tc-sf a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
}
.timecards-page .tc-sf a:hover { text-decoration: underline; }

.timecards-page .tc-empty {
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
}
.timecards-page .tc-empty h2 { margin: 0 0 8px; font-size: 18px; color: var(--text); }
.timecards-page .tc-empty code {
  display: inline-block;
  padding: 1px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* ======================================================================
   Alocação Diária — tabela com colunas fixas a esquerda + grade de dias.
   Inspirado no Excel: scroll horizontal, sticky thead + sticky-left cols.
   ====================================================================== */

.alloc-page .alloc-head {
  margin: 12px 0 6px;
}
.alloc-page .alloc-head-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.alloc-page .alloc-head h1 { margin: 0; }
.alloc-page .alloc-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Toolbar uniforme: todos os botoes com a MESMA altura e sem quebrar o
   rotulo em varias linhas (o "Enviar ao Planner" quebrava em 3 linhas e
   ficava desproporcional). Quando falta largura, o botao INTEIRO vai pra
   proxima linha — nunca o texto dentro dele. min-height casa com o botao
   de export (XLS, 36px), deixando a fileira simetrica. */
.alloc-page .alloc-head-actions .btn {
  white-space: nowrap;
  flex: 0 0 auto;
  min-height: 36px;
}
.alloc-page .alloc-sub {
  margin: 6px 0 14px;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
}

/* ──────────────────────────────────────────────────────────────────
   KPIs financeiros do header da Alocacao Diaria. 2 grupos (Planejado
   vs Projetado), cada um com 2 cards (BRL + %). Cor segue a regra
   do card de Avaliacao do Contrato: diff<=0 verde, else vermelho.
   ────────────────────────────────────────────────────────────────── */
.alloc-page .alloc-kpis {
  display: flex;
  gap: 14px;
  align-items: stretch;
  flex-wrap: wrap;
}
.alloc-page .alloc-kpi-group {
  /* Label em cima ocupa toda a largura; 2 KPI cards embaixo lado a lado. */
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 4px 6px;
  align-items: stretch;
}
.alloc-page .alloc-kpi-grp-label {
  grid-column: 1 / span 2;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  padding: 0 2px;
}
.alloc-page .alloc-kpi-grp-label .dim { opacity: 0.7; font-weight: 400; }
.alloc-page .alloc-kpi {
  min-width: 108px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  background: rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
  transition: background 120ms, border-color 120ms;
}
.alloc-page .alloc-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.85);
  opacity: 0.85;
}
.alloc-page .alloc-kpi-value {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: #ffffff;
}
/* Cores: paralelas as .ct-diff-- do contrato (tons saturados, ja que
   estes sao "tipo o total" — sao o agregado de todas as linhas). */
.alloc-page .alloc-kpi--good {
  background: #5dd39e;
  border-color: #4ec38b;
}
.alloc-page .alloc-kpi--bad {
  background: #ff6b6b;
  border-color: #f25656;
}
.alloc-page .alloc-kpi--na {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: var(--text-muted, #94a3b8);
}
.alloc-page .alloc-kpi--na .alloc-kpi-value { color: var(--text-muted, #94a3b8); }

.alloc-flash {
  display: flex; flex-direction: column; gap: 6px;
  margin: 6px 0 12px;
}
.alloc-flash-item {
  padding: 8px 12px; border-radius: 6px; font-size: 13px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.alloc-flash-success { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.35); }
.alloc-flash-error   { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.40); }

.alloc-empty {
  padding: 36px;
  text-align: center;
  border: 1px dashed var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  color: var(--text-muted, #94a3b8);
  margin: 16px 0;
}

/* ----- Wrap com scroll horizontal + scrollbars sempre visiveis ------- */
.alloc-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 240px);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  background: var(--card-bg, #0f172a);
  scrollbar-gutter: stable both-edges;
}
.alloc-wrap::-webkit-scrollbar { height: 12px; width: 12px; }
.alloc-wrap::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.25);
}
.alloc-wrap::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.4);
  border-radius: 6px;
}
.alloc-wrap::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.6); }

/* ----- Tabela base --------------------------------------------------- */
.alloc-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  width: max-content;          /* deixa scroll horizontal fluir */
  min-width: 100%;
  color: var(--text, #e5e7eb);
}
.alloc-table th, .alloc-table td {
  border-right: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 4px 6px;
  vertical-align: middle;
  background: var(--card-bg, #0f172a);
}

/* ----- Sticky headers (thead) ---------------------------------------
   Hierarquia de z-index pra tabela 2D-sticky (sticky-top + sticky-left).
   A ordem importa porque tem 4 "modos" de overlap simultaneos:

     - TD do tbody (dia normal):            z =  0  (default, nao sticky)
     - TH thead .alloc-day/month-row:       z = 20  (sticky-top APENAS;
                                                    cobre tbody normal quando
                                                    user faz scroll vertical)
     - TD .alloc-fix (col fixa esquerda):   z = 30  (sticky-left APENAS;
                                                    cobre tbody normal E
                                                    THs de dia que deslizam
                                                    horizontalmente pra
                                                    "debaixo" da area esquerda)
     - TH thead .alloc-fix (canto sup-esq): z = 40  (sticky-top + sticky-left;
                                                    cobre TODO MUNDO)

   Bug que isso resolve: antes thead day-row tinha z=32 > tbody fix z=30,
   entao quando o user fazia scroll horizontal, os numeros das datas
   passavam POR CIMA das colunas RR/Asg/Resource/Role/Squad/Phase/Atual/
   Planej/etc. Agora as colunas esquerdas tem z maior — datas passam
   por TRAS delas, invisiveis na faixa esquerda. */
.alloc-table thead .alloc-month-row th {
  position: sticky; top: 0; z-index: 20;
  background: var(--card-bg, #0f172a);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted, #94a3b8);
  padding: 4px 6px;
  height: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.alloc-table thead .alloc-day-row th {
  position: sticky; top: 28px; z-index: 20;
  background: var(--card-bg, #0f172a);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 4px 6px;
  height: 32px;
  border-bottom: 2px solid rgba(255,255,255,0.10);
}
/* Canto superior esquerdo: THs que sao SIMULTANEAMENTE sticky-top
   (por estar no thead) E sticky-left (.alloc-fix). Tem que ficar
   acima de TUDO — cobre tbody-fix (z=30) quando scroll vertical, e
   cobre THs de dia (z=20) quando scroll horizontal.

   ATENCAO especificidade: a regra antiga `.alloc-table thead
   .alloc-fix` (specificity 0,2,1) PERDIA pra `.alloc-table thead
   .alloc-day-row th` (0,2,2) e `.alloc-table thead .alloc-month-row
   th` (0,2,2), entao o z-index:40 nunca ganhava — as celulas-canto
   do thead acabavam com z=20, mesmo nivel das THs de dia, e estas
   (DOM-later) pintavam por cima quando o user fazia scroll horizontal.
   Numeros como "22 D, 23 S, 24 T..." entravam por cima de "RR,
   Assignment, Recurso, Cargo, Inicio, Fim, Squad, Atual, Planejado,
   Projetado, Total". Pra fixar de vez, escrevemos o seletor com
   `th.alloc-fix` no mesmo nivel das regras de row (0,3,2 > 0,2,2). */
.alloc-table thead .alloc-month-row th.alloc-fix,
.alloc-table thead .alloc-day-row th.alloc-fix {
  z-index: 40;
  background: var(--card-bg, #0f172a);
}
.alloc-day-th {
  min-width: 30px; width: 30px;
}
.alloc-day-th .alloc-day-num { font-size: 11px; font-weight: 700; }
.alloc-day-th .alloc-day-dow { font-size: 10px; opacity: 0.7; }
.alloc-day-th.is-today {
  background: rgba(245,158,11,0.18) !important;
  color: #fbbf24;
}
.alloc-day-th.is-weekend {
  background: rgba(0,0,0,0.25);
  color: rgba(229,231,235,0.55);
}

/* ----- Colunas fixas a esquerda (sticky-left) ----------------------- */
/* Pra evitar fragilidade de `:nth-of-type`/`:nth-child`, o template
   injeta `style="left:Npx"` em cada celula sticky. CSS define so width
   + sticky base. Posicao = soma das larguras anteriores. */
.alloc-table .alloc-fix {
  position: sticky;
  z-index: 30;
  background: var(--card-bg, #0f172a);
  white-space: nowrap;
}
/* Larguras compactadas pra liberar espaco horizontal pro grid de
   dias (UX request). Anterior era 1110px (sem fase) / 1220px (com).
   Agora ~856 / 936 — ganho de ~270px (cabe ~9 dias a mais). */
/* Coluna "Status" (slim 32px): icone de bolinha colorida indicando
   se a linha esta ativa (RR+Assignment vigentes), em pre-staffing
   ou inativa (Assignment encerrado / ghost). Linhas ordenadas por
   este criterio antes de squad/fase. */
.alloc-fix-status { width: 32px;  min-width: 32px;  text-align: center; }
.alloc-status-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.28) inset;
}
.alloc-status-dot.is-active   { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.22), 0 0 0 1px rgba(0,0,0,0.28) inset; }
.alloc-status-dot.is-pre      { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.22), 0 0 0 1px rgba(0,0,0,0.28) inset; }
.alloc-status-dot.is-inactive { background: #6b7280; opacity: 0.85; }
/* Acessibilidade: texto so pra leitor de tela (esconde visualmente). */
.alloc-fix-status .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Fade sutil das linhas inativas pra reforcar a hierarquia. */
.alloc-row.alloc-row--inactive .alloc-fix:not(.alloc-fix-status) {
  opacity: 0.78;
}

.alloc-fix-rr    { width: 68px;  min-width: 68px; }
.alloc-fix-asg   { width: 68px;  min-width: 68px; }
.alloc-fix-res   { width: 175px; min-width: 175px; }
.alloc-fix-role  { width: 115px; min-width: 115px; }
.alloc-fix-date  { width: 54px;  min-width: 54px; }
.alloc-fix-squad { width: 98px;  min-width: 98px;  text-align: center; }
.alloc-fix-phase { width: 80px;  min-width: 80px;  text-align: center; }
.alloc-fix-num   { width: 56px;  min-width: 56px;
                   text-align: right;
                   font-variant-numeric: tabular-nums; }

/* Fonte e padding mais compactos APENAS na faixa esquerda (sticky),
   pra reforcar a densificacao sem mexer no resto da tabela. */
.alloc-table .alloc-fix {
  font-size: 11.5px;
  padding: 3px 5px;
}
.alloc-table .alloc-fix .resource-name {
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Numeros mais legiveis com tabular-nums em todas as celulas .alloc-fix-num. */
.alloc-table .alloc-fix.alloc-fix-num {
  font-size: 11.5px;
}

/* Borda direita destacada na ultima coluna fixa (separa do grid de dias). */
.alloc-fix-last,
.alloc-group-cell {
  border-right: 2px solid rgba(255,255,255,0.16);
}

/* Linha de agrupamento Fase>Squad — destaque visual, nao bate scroll. */
.alloc-group-row td.alloc-group-cell {
  position: sticky; left: 0;
  background: linear-gradient(90deg, rgba(99,102,241,0.18) 0%, rgba(99,102,241,0.04) 100%);
  border-top: 1px solid rgba(99,102,241,0.35);
  padding: 6px 12px;
  z-index: 28;
}
.alloc-group-phase {
  display: inline-block; font-weight: 700; font-size: 12px;
  margin-right: 12px; color: #c4b5fd;
}
.alloc-group-phase--none { color: rgba(229,231,235,0.45); font-style: italic; }
.alloc-group-squad {
  display: inline-block; padding: 2px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 600; color: #fff;
}
.alloc-group-squad--none {
  background: rgba(0,0,0,0.30); color: rgba(229,231,235,0.55); font-style: italic;
}

/* Linhas de dados — hover suave.
   IMPORTANTE: usamos background-image (nao background-color) pra preservar
   a cor opaca de fundo das colunas sticky. Quando a sticky perde opacidade,
   as celulas de dia que estao "atras" dela passam a aparecer visualmente —
   foi o bug "dias vazando" reportado. */
.alloc-row:hover td {
  background-image: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04));
}

/* Flash visual quando a linha foi reordenada apos classificar squad/fase.
   Pulsa um background indigo por ~1.2s e some — ajuda o user a localizar
   o recurso que acabou de pular pro grupo certo. Usamos background-image
   (gradient) em vez de background-color pra nao quebrar a opacidade
   das colunas sticky-left. */
@keyframes allocRowMovedFlash {
  0%   { background-image: linear-gradient(rgba(99,102,241,0.45), rgba(99,102,241,0.45)); }
  60%  { background-image: linear-gradient(rgba(99,102,241,0.20), rgba(99,102,241,0.20)); }
  100% { background-image: linear-gradient(rgba(99,102,241,0.00), rgba(99,102,241,0.00)); }
}
.alloc-row.alloc-row--moved td {
  animation: allocRowMovedFlash 1200ms ease-out;
}
.alloc-row .alloc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #fff;
}
.alloc-row .sf-open {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin-left: 4px;
  opacity: 0.6;
  text-decoration: none;
  font-size: 12px;
}
.alloc-row .sf-open:hover { opacity: 1; }

/* Selects de Squad / Fase em cada linha. */
.alloc-squad-select, .alloc-phase-select {
  width: 100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  color: var(--text, #e5e7eb);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  text-align-last: center;
}
/* Centraliza o texto do <option> tambem (Firefox respeita; em
   webkit o painel nativo do select sempre alinha a esquerda — sem
   workaround viavel sem custom dropdown). */
.alloc-squad-select option,
.alloc-phase-select option {
  text-align: center;
}
.alloc-squad-select:hover, .alloc-phase-select:hover {
  border-color: rgba(255,255,255,0.30);
}

/* Totais — divergencia colorida.
   Usamos background-color OPACO (=card-bg) + background-image como tint
   pra que a celula sticky NUNCA vire semi-transparente. Sem isso, as
   celulas dos dias aparecem por baixo da coluna Total ao scrollar (bug
   "dias vazando" do print do user). */
.alloc-total-grand.is-over,
.alloc-total-future.is-over,
.alloc-total-sched.is-over {
  background-color: var(--card-bg, #0f172a);
  background-image: linear-gradient(rgba(239,68,68,0.20), rgba(239,68,68,0.20));
  color: #fca5a5;
}
.alloc-total-grand.is-under,
.alloc-total-future.is-under,
.alloc-total-sched.is-under {
  background-color: var(--card-bg, #0f172a);
  background-image: linear-gradient(rgba(245,158,11,0.20), rgba(245,158,11,0.20));
  color: #fcd34d;
}
.alloc-total-grand.is-ok,
.alloc-total-future.is-ok,
.alloc-total-sched.is-ok {
  background-color: var(--card-bg, #0f172a);
  background-image: linear-gradient(rgba(34,197,94,0.18), rgba(34,197,94,0.18));
  color: #86efac;
}
/* Scheduled = '—' (campo vazio no PSA) — fica em cinza dim, sem alarme. */
.alloc-total-sched.is-na {
  background-color: var(--card-bg, #0f172a);
  color: rgba(255,255,255,0.45);
}

/* ---------- Cabecalho clicavel das colunas numericas ---------------
   Convertemos o texto do <th> em um <button> com underline pontilhado
   pra sinalizar que e clicavel ("info button" style). Mantemos a
   tipografia/peso do header pra nao destoar visualmente. */
.alloc-table th.alloc-fix-num.is-explainable {
  cursor: help;
}
.alloc-table th.alloc-fix-num .alloc-th-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: help;
  border-bottom: 1px dotted rgba(255,255,255,0.35);
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color 120ms ease, border-color 120ms ease;
}
.alloc-table th.alloc-fix-num .alloc-th-btn:hover,
.alloc-table th.alloc-fix-num .alloc-th-btn:focus-visible {
  color: #fff;
  border-bottom-color: #93c5fd;
  outline: none;
}

/* ---------- Modal de explicacao (PiP) ------------------------------
   Reaproveita estrutura do .alloc-modal-panel mas com layout mais
   denso pra texto longo (blocos verticais com titulos de secao). */
.alloc-explain-panel {
  width: min(620px, 100%);
}
.alloc-explain-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 20px;
}
.alloc-explain-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.alloc-explain-block > h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
}
.alloc-explain-p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text, #e2e8f0);
}
/* Codigo inline dentro das explicacoes — pinta nomes de campos /
   formulas com background sutil pra destacar. */
.alloc-explain-p code {
  font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  background: rgba(96,165,250,0.12);
  color: #bfdbfe;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}
/* Calc — fundo levemente azulado pra evidenciar a formula. */
.alloc-explain-calc {
  background: rgba(59,130,246,0.06);
  border-left: 2px solid rgba(96,165,250,0.5);
  padding-left: 10px;
  margin-top: 2px;
}
/* Source — fundo levemente verde, sinaliza "fonte de verdade". */
.alloc-explain-source {
  background: rgba(34,197,94,0.05);
  border-left: 2px solid rgba(74,222,128,0.5);
  padding-left: 10px;
  margin-top: 2px;
}
/* Block de "Observacao" extra — diferenciado em ambar. */
.alloc-explain-extra {
  background: rgba(245,158,11,0.06);
  border-color: rgba(245,158,11,0.20);
}
/* Preserva o tint do Total no hover (combina os 2 background-images
   numa unica regra mais especifica que vence o `.alloc-row:hover td`). */
.alloc-row:hover td.alloc-total-grand.is-over,
.alloc-row:hover td.alloc-total-future.is-over,
.alloc-row:hover td.alloc-total-sched.is-over {
  background-image:
    linear-gradient(rgba(239,68,68,0.20), rgba(239,68,68,0.20)),
    linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04));
}
.alloc-row:hover td.alloc-total-grand.is-under,
.alloc-row:hover td.alloc-total-future.is-under,
.alloc-row:hover td.alloc-total-sched.is-under {
  background-image:
    linear-gradient(rgba(245,158,11,0.20), rgba(245,158,11,0.20)),
    linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04));
}
.alloc-row:hover td.alloc-total-grand.is-ok,
.alloc-row:hover td.alloc-total-future.is-ok,
.alloc-row:hover td.alloc-total-sched.is-ok {
  background-image:
    linear-gradient(rgba(34,197,94,0.18), rgba(34,197,94,0.18)),
    linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04));
}

/* ----- Celulas da grade de dias ------------------------------------ */
.alloc-day-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  padding: 2px;
  width: 30px; min-width: 30px;
  height: 28px;
}
.alloc-day-cell.is-today { background: rgba(245,158,11,0.06); }
.alloc-day-cell.is-weekend { background: rgba(0,0,0,0.20); }
.alloc-day-cell.is-outside { background: rgba(0,0,0,0.35); }

/* Passado (TC aprovado): azul, locked. */
.alloc-day-cell.is-past {
  background: rgba(59,130,246,0.20);
  color: #93c5fd;
  font-weight: 600;
}
.alloc-day-cell.is-past .alloc-day-val {
  display: inline-block; padding: 2px 4px;
}

/* TC lancado FORA da janela do Assignment — mesmo azul, mas com
   borda tracejada laranja como aviso visual. O tooltip explica o
   significado. UX: nao bloqueia leitura, so sinaliza divergencia
   entre o periodo do RR e o que o recurso efetivamente lancou. */
.alloc-day-cell.is-past-outside {
  background: rgba(59,130,246,0.18);
  outline: 1.5px dashed rgba(245,158,11,0.85);
  outline-offset: -2px;
}
.alloc-day-cell.is-past-outside .alloc-day-val {
  color: #fbbf24;
}
/* Indicador no total Atual quando a linha tem horas fora da janela */
.alloc-fix-num.alloc-total-past.has-outside::after {
  content: " ⚠";
  color: #f59e0b;
  font-size: 10px;
  margin-left: 2px;
}

/* Futuro manual E auto: ambos verde clarinho — UX request, o usuario
   nao quer cor diferente entre auto-distribuido e editado a mao. Tudo
   que esta no futuro com horas previstas fica verde, independente da
   origem. (is-manual ainda existe como classe pra outras logicas, mas
   visualmente identico a is-auto.) */
.alloc-day-cell.is-manual,
.alloc-day-cell.is-auto {
  background: rgba(34,197,94,0.12);
}

/* Inputs nas celulas editaveis. */
.alloc-day-input {
  width: 28px;
  max-width: 28px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text, #e5e7eb);
  text-align: center;
  font-size: 11px;
  padding: 1px;
  border-radius: 2px;
  -moz-appearance: textfield;
}
.alloc-day-input::-webkit-outer-spin-button,
.alloc-day-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.alloc-day-input:focus {
  outline: none;
  border-color: var(--primary, #6366f1);
  background: rgba(99,102,241,0.10);
}
.alloc-day-input.is-saving { opacity: 0.5; }

/* ----- Modal PiP (squads + fases) — copia do tc-billing-modal ------ */
.alloc-modal[hidden] { display: none !important; }
.alloc-modal {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
}
.alloc-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.alloc-modal-panel {
  position: relative;
  width: min(720px, 100%); max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.alloc-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; top: 0;
  background: var(--card-bg, #0f172a);
  z-index: 1;
}
.alloc-modal-head h2 { margin: 0; font-size: 16px; }
.alloc-modal-close {
  background: none; border: none; color: var(--text-muted, #94a3b8);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
}
.alloc-modal-close:hover { color: #fff; }
.alloc-modal-section { padding: 14px 18px; }
.alloc-modal-section h3 { margin: 0 0 10px; font-size: 13px; color: var(--text-muted, #94a3b8); font-weight: 600; }
.alloc-modal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.alloc-modal-table th, .alloc-modal-table td {
  padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
}
.alloc-modal-del {
  background: none; border: none; color: rgba(239,68,68,0.7); font-size: 14px;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.alloc-modal-del:hover { color: #fca5a5; background: rgba(239,68,68,0.10); }

/* ─── Modal "Pingar Naide" ─────────────────────────────────────────
   Lista de RRs Ready-to-Staff com checkbox por linha. (jun/2026) */
.alloc-ping-hint {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.5;
}
.alloc-ping-hint strong { color: var(--text, #e6edf7); }
.alloc-ping-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.alloc-ping-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted, #94a3b8);
  cursor: pointer; user-select: none;
}
.alloc-ping-toggle input { cursor: pointer; }
.alloc-ping-count { font-size: 11.5px; color: var(--text-muted, #94a3b8); }
.alloc-ping-list {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
}
.alloc-ping-row {
  display: grid;
  grid-template-columns: 22px 1.5fr 1.3fr 1fr 70px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 100ms ease;
  font-size: 12.5px;
}
.alloc-ping-row:last-child { border-bottom: none; }
.alloc-ping-row:hover { background: rgba(255,255,255,0.03); }
.alloc-ping-row input[type="checkbox"] { cursor: pointer; margin: 0; }
.alloc-ping-row-main {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.alloc-ping-row-rr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--primary-soft, #7FC4FF);
  font-weight: 600;
}
.alloc-ping-row-name {
  color: var(--text, #e6edf7);
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alloc-ping-sugg {
  color: #fbbf24;
  font-style: italic;
  font-size: 10.5px;
  font-weight: 400;
}
.alloc-ping-row-role {
  color: var(--text-muted, #94a3b8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alloc-ping-row-dates {
  color: var(--text-muted, #94a3b8);
  font-size: 11.5px;
  white-space: nowrap;
}
.alloc-ping-row-hours {
  text-align: right;
  font-weight: 700;
  color: var(--text, #e6edf7);
  font-variant-numeric: tabular-nums;
}
.alloc-ping-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted, #94a3b8);
  font-size: 13px;
  margin: 0;
}
.alloc-ping-err { color: #fca5a5; }
.alloc-ping-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: sticky; bottom: 0;
  background: var(--card-bg, #0f172a);
}

/* Botao salvar (verde) — usado em squads/fases editaveis inline. */
.alloc-modal-save {
  background: none; border: none; color: rgba(74,222,128,0.85); font-size: 14px;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.alloc-modal-save:hover { color: #86efac; background: rgba(74,222,128,0.12); }
.alloc-edit-actions {
  text-align: right; white-space: nowrap;
}
.alloc-edit-actions button { margin-left: 2px; }

/* Tabela editavel inline — celulas mais compactas pra abrir espaco
   pros inputs. */
.alloc-modal-table--editable td {
  padding: 4px 8px;
}

/* Input de texto inline (nome de squad / fase). */
.alloc-name-edit {
  width: 100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  color: var(--text, #e5e7eb);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  font-family: inherit;
}
.alloc-name-edit:focus {
  outline: none;
  border-color: rgba(99,102,241,0.55);
  background: rgba(0,0,0,0.35);
}

/* Input[type=color] estilizado como bolinha circular — sem chrome do
   navegador, mostra so a cor selecionada. Clique abre o picker nativo
   do SO (Mac/Windows/Linux), entao user pode escolher QUALQUER cor
   alem das 20 da paleta default. */
.alloc-color-edit {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  cursor: pointer;
  padding: 0;
  background: transparent;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.12s, border-color 0.12s;
}
.alloc-color-edit:hover {
  transform: scale(1.10);
  border-color: rgba(255,255,255,0.55);
}
.alloc-color-edit:focus {
  outline: none;
  border-color: rgba(99,102,241,0.7);
}
/* Webkit (Safari/Chrome): tira margem interna do swatch pra ele
   preencher a bolinha inteira. */
.alloc-color-edit::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 50%;
}
.alloc-color-edit::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}
/* Firefox */
.alloc-color-edit::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

.alloc-modal-form-row {
  display: flex; gap: 10px; align-items: end; flex-wrap: wrap;
}
.alloc-modal-form-row label {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px;
}
.alloc-modal-form-row label span {
  font-size: 11px; color: var(--text-muted, #94a3b8);
}
.alloc-modal-form-row input[type="text"],
.alloc-modal-form-row input[type="number"] {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  color: var(--text, #e5e7eb);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}

.alloc-squad-pill {
  display: inline-block; padding: 3px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 600; color: #fff;
}

/* Paleta de cores (radio visual). */
.alloc-color-swatches {
  display: grid; grid-template-columns: repeat(10, 24px); gap: 6px;
  margin-top: 12px;
}
.alloc-color-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.alloc-color-swatch:hover {
  transform: scale(1.1);
}
.alloc-color-swatch.is-selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.6);
}

/* ---- Module card variant pro portal-home (icone roxo-azulado) ---- */
.module-alloc .module-icon {
  background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
}

/* ======================================================================
   Portal Home — layout PMBOK (10 areas de conhecimento)
   Cada area vira uma section colapsavel com tiles compactos dentro.
   Cards ficaram menores e mais densos pra caber bem no portal home.
   ====================================================================== */

.pmbok-portal-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 16px 0 18px;
}
.pmbok-portal-head h1 { margin: 0; font-size: 26px; }
.pmbok-portal-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  max-width: 720px;
}
.pmbok-portal-sub strong { color: var(--text, #e5e7eb); }
.pmbok-portal-stats {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.pmbok-portal-stat {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(99,102,241,0.18);
  border: 1px solid rgba(99,102,241,0.30);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #c7d2fe;
  text-transform: uppercase;
}
.pmbok-portal-stat .sf-open {
  color: #c7d2fe; opacity: 0.7; text-decoration: none;
}
.pmbok-portal-stat .sf-open:hover { opacity: 1; }
.pmbok-portal-stat-label { line-height: 1; }

.pmbok-area {
  margin: 14px 0;
  padding: 14px 18px;
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 12px;
  transition: border-color 0.15s;
}
.pmbok-area:hover {
  border-color: rgba(255,255,255,0.12);
}
.pmbok-area-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.pmbok-area-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(99,102,241,0.15);
  color: #a5b4fc;
  flex-shrink: 0;
}
.pmbok-area-icon .icon { width: 20px; height: 20px; }
.pmbok-area-head h2 {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text, #e5e7eb);
  font-weight: 700;
}
.pmbok-area-count {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Areas vazias — visual mais discreto pra indicar lacuna sem distrair */
.pmbok-area--empty {
  opacity: 0.55;
  background: transparent;
  border-style: dashed;
}
.pmbok-area--empty .pmbok-area-icon {
  background: rgba(100,116,139,0.18);
  color: var(--text-muted, #94a3b8);
}
.pmbok-area--empty .pmbok-area-count {
  background: rgba(100,116,139,0.20);
}
.pmbok-empty {
  padding: 14px 18px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 8px;
}

/* Tile grid — responsivo (auto-fill por largura minima) */
.pmbok-tile-grid {
  display: grid;
  /* Largura fixa pra todos os tiles — sem stretch quando a linha tem
     menos itens. Usa auto-fill + tamanho fixo (sem 1fr) pra manter
     largura uniforme independente de quantos tiles caibam na linha. */
  grid-template-columns: repeat(auto-fill, 280px);
  gap: 10px;
  justify-content: start;
}

/* ============================================================
   Portal home compacto: areas viram colunas (grid masonry-like).
   Sem o pmbok-portal-head; sem areas vazias; tudo em uma tela.
   ============================================================ */
/* Layout MASONRY nativo via CSS multi-column. Antes era grid com
   align-items:start, o que deixava buracos verticais quando colunas
   tinham alturas diferentes (ex: ESCOPO com 4 tiles + PARTES
   INTERESSADAS so com 1 tile criava gap enorme). Multi-column
   distribui as areas em fluxo top-to-bottom -> left-to-right e
   preenche todo o espaco util. O numero de colunas se auto-ajusta:
   browser cria quantas colunas de 320px+ caberem na tela. Mais
   cards => mais altura por coluna; tela mais larga => mais colunas. */
.pmbok-board {
  column-width: 300px;
  column-gap: 10px;
  margin-top: 4px;
}
/* ── Masonry real (progressive enhancement via JS) ───────────────────
   O multicolumn acima balanceia mal quando as areas tem alturas muito
   diferentes: sobra "bloco vazio" no pe da coluna mais curta. Quando o
   JS de masonry roda, ele adiciona `.is-masonry` no board, desliga o
   multicolumn e distribui cada area na coluna MAIS CURTA (shortest-first)
   dentro de colunas flex que esticam pra ocupar toda a largura. Resultado:
   colunas equilibradas, sem buracos, e nº de colunas responsivo a tela.
   Sem JS, cai no multicolumn (fallback) — nada quebra. */
.pmbok-board.is-masonry {
  columns: auto;
  column-width: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pmbok-masonry-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pmbok-board.is-masonry .pmbok-col {
  display: flex;
  flex-direction: column;
  width: auto;
  margin-bottom: 0;
  break-inside: auto;
}
.pmbok-col {
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 10px 12px 12px;
  transition: border-color 0.15s;
  /* Em multi-column, cada area precisa de inline-block + width 100%
     pra ocupar a coluna inteira; break-inside: avoid impede o
     browser de partir uma area no meio entre 2 colunas. */
  display: inline-block;
  width: 100%;
  margin-bottom: 12px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.pmbok-col:hover {
  border-color: rgba(255,255,255,0.12);
}
.pmbok-col-head {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 2px 8px;
}
.pmbok-col-icon {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(99,102,241,0.18);
  color: #a5b4fc;
  flex-shrink: 0;
}
.pmbok-col-icon .icon { width: 14px; height: 14px; }
.pmbok-col-head h2 {
  margin: 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1.0px;
  color: var(--text, #e5e7eb);
  font-weight: 700;
}
.pmbok-col-tiles {
  display: flex; flex-direction: column;
  gap: 6px;
}
/* Tiles dentro de coluna sao mais compactos que no layout antigo
   (full-width na coluna, altura menor) pra densificar. */
.pmbok-col-tiles .pmbok-tile {
  width: 100%;
  height: 60px;
  padding: 8px 10px;
  gap: 10px;
}
.pmbok-col-tiles .pmbok-tile-icon { width: 32px; height: 32px; }
.pmbok-col-tiles .pmbok-tile-icon .icon { width: 18px; height: 18px; }
.pmbok-col-tiles .pmbok-tile-label { font-size: 12.5px; }
.pmbok-col-tiles .pmbok-tile-meta  { font-size: 10.8px; }
/* Reserva espaco a direita pra o badge do projeto nao colidir com a
   label/meta truncadas. 44px = badge ~30px + 8px gap + folga. */
.pmbok-col-tiles .pmbok-tile-body {
  padding-right: 44px;
}
.pmbok-col-tiles .pmbok-tile-badge {
  top: 6px; right: 8px;
  font-size: 8.5px;
  padding: 1px 6px;
  /* z-index garante que fica POR CIMA, mas com o padding acima nao
     deveria nem encostar. */
  z-index: 1;
}
/* Tile sem badge ocupa toda a largura disponivel, sem reserva — MAS
   se tiver lapis de edicao no canto (drive), preserva o padding pra
   meta nao ficar embaixo do icone do lapis. */
.pmbok-col-tiles .pmbok-tile:not(:has(.pmbok-tile-badge)):not(:has(.pmbok-tile-edit)) .pmbok-tile-body {
  padding-right: 0;
}
.pmbok-col-tiles .pmbok-tile:has(.pmbok-tile-edit) .pmbok-tile-body {
  padding-right: 32px;
}
/* Reusa o mapeamento de cores de area do layout antigo
   (.pmbok-area--<key>) pra .pmbok-col--<key>. */
/* (cores das areas PMBOK foram movidas pra CSS vars `--area-color`/
   `--area-bg` mais abaixo — uma unica fonte de verdade pra header e
   tiles. Veja `.pmbok-col--<key>` mais embaixo.) */

.pmbok-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text, #e5e7eb);
  text-decoration: none;
  /* Altura uniforme: meta pode ter 1 ou 2 linhas; reservamos espaco pra
     2 linhas pra ninguem ficar mais alto/baixo que o outro. */
  height: 76px;
  box-sizing: border-box;
  transition:
    background   var(--dur-quick) var(--ease-out-quart),
    border-color var(--dur-quick) var(--ease-out-quart),
    transform    var(--dur-quick) var(--ease-out-quart),
    box-shadow   var(--dur-quick) var(--ease-out-quart);
}
.pmbok-tile:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.20);
}
.pmbok-tile:active {
  transform: translateY(0);
  transition-duration: var(--dur-instant);
}
.pmbok-tile-icon {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(99,102,241,0.18);
  color: #a5b4fc;
  flex-shrink: 0;
}
.pmbok-tile-icon .icon { width: 20px; height: 20px; }
.pmbok-tile-body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1;
}
.pmbok-tile-label {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmbok-tile-label .ext-arrow {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 4px;
}
.pmbok-tile-meta {
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmbok-tile-badge {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(99,102,241,0.25);
  color: #c7d2fe;
  text-transform: uppercase;
  border: 1px solid rgba(99,102,241,0.30);
}

/* Cores por flavor (icone do tile) — paleta consistente com os modulos */
/* Cor dos icones dos tiles AMARRADA a area PMBOK da coluna (e nao mais
   ao flavor individual do tile) — cria padrao visual: "tudo em Recursos
   eh teal, tudo em Escopo eh verde, etc". Mai/2026. */
/* PMBOK grupos semânticos (3 tiers alinhados ao DESIGN.md Command Bridge):
   - Planning  → lightsaber-blue (ion-trail) — integração, escopo, cronograma, custos, qualidade
   - Resources → tatooine-sand — recursos, comunicações, riscos
   - Delivery  → system-ok — aquisições, partes interessadas
   Reduz 10 hues distintos (que competiam com The One Voice Rule) para 3 grupos
   de fase PMBOK. Diferenciação fina por área continua vindo do ícone. */
.pmbok-col--integracao,
.pmbok-col--escopo,
.pmbok-col--cronograma,
.pmbok-col--custos,
.pmbok-col--qualidade           { --area-color: #7FC4FF; --area-bg: rgba(63,169,245,0.18); }
.pmbok-col--recursos,
.pmbok-col--comunicacoes,
.pmbok-col--riscos              { --area-color: #E0B97A; --area-bg: rgba(224,185,122,0.18); }
.pmbok-col--aquisicoes,
.pmbok-col--partes_interessadas { --area-color: #5DD39E; --area-bg: rgba(93,211,158,0.18); }

/* Aplica a cor da area a TODOS os icones dentro da coluna — header,
   tile, e o destaque (.icon dentro de .pmbok-tile-icon). Vence as
   regras antigas por especificidade (.pmbok-col--X .pmbok-tile-icon
   tem mesma specificity que .pmbok-tile--Y .pmbok-tile-icon, e este
   bloco vem depois — last wins). */
.pmbok-col[class*="pmbok-col--"] .pmbok-col-icon,
.pmbok-col[class*="pmbok-col--"] .pmbok-tile-icon {
  background: var(--area-bg);
  color: var(--area-color);
}

/* Tiles que vivem FORA do board PMBOK (ex.: strip do topo, se houver)
   ainda usam as cores por flavor abaixo como fallback. */
.pmbok-tile--kb           .pmbok-tile-icon { background: rgba(99,102,241,0.20);  color: #a5b4fc; }
.pmbok-tile--gem          .pmbok-tile-icon { background: rgba(168,85,247,0.22);  color: #d8b4fe; }
.pmbok-tile--news         .pmbok-tile-icon { background: rgba(245,158,11,0.22);  color: #fbbf24; }
.pmbok-tile--slack        .pmbok-tile-icon { background: rgba(225,29,72,0.20);   color: #fb7185; }
.pmbok-tile--stakeholders .pmbok-tile-icon { background: rgba(10,102,194,0.25);  color: #93c5fd; }
.pmbok-tile--eap          .pmbok-tile-icon { background: rgba(34,197,94,0.20);   color: #86efac; }
.pmbok-tile--wbs          .pmbok-tile-icon { background: rgba(139,92,246,0.22);  color: #c4b5fd; }
.pmbok-tile--rh           .pmbok-tile-icon { background: rgba(20,184,166,0.22);  color: #5eead4; }
.pmbok-tile--contract     .pmbok-tile-icon { background: rgba(245,158,11,0.22);  color: #fbbf24; }
.pmbok-tile--expenses     .pmbok-tile-icon { background: rgba(244,63,94,0.20);   color: #fb7185; }
.pmbok-tile--timecards    .pmbok-tile-icon { background: rgba(99,102,241,0.20);  color: #a5b4fc; }
.pmbok-tile--alloc        .pmbok-tile-icon { background: rgba(14,165,233,0.22);  color: #7dd3fc; }
.pmbok-tile--lideres      .pmbok-tile-icon { background: rgba(217,119,6,0.22);   color: #fcd34d; }
.pmbok-tile--drive        .pmbok-tile-icon { background: rgba(34,197,94,0.22);   color: #86efac; }
.pmbok-tile--planner      .pmbok-tile-icon { background: rgba(236,72,153,0.20);  color: #f9a8d4; }
.pmbok-tile--wa_ping_monitor .pmbok-tile-icon { background: rgba(37,211,102,0.22); color: #86efac; }
.pmbok-tile--environments    .pmbok-tile-icon { background: rgba(126,87,194,0.22);  color: #c4b5fd; }
/* flavor "agents" — usado por Cronograma do Projeto (Solar), Cronograma
   dos Agentes (Obi-Wan) e Calendario de Dias Nao Uteis. Sem regra
   especifica o tile-icon ficava transparente → SVG mask invisivel.
   Tom esmeralda pra evocar "linha do tempo / progresso". (jun/2026) */
.pmbok-tile--agents          .pmbok-tile-icon { background: rgba(52,211,153,0.22);  color: #6ee7b7; }

/* ── Enviar ao Project Planner ─────────────────────────────────────── */
/* Botao ⤴ discreto por linha, ao lado do numero do Assignment. */
.alloc-push-row {
  background: none; border: none; cursor: pointer;
  color: rgba(148,163,184,0.75); font-size: 12px;
  padding: 0 3px; margin-left: 2px; border-radius: 4px; line-height: 1;
}
.alloc-push-row:hover { color: #38bdf8; background: rgba(56,189,248,0.12); }

.btn-push-planner .icon-planner { margin-right: 2px; }

.alloc-push-hint { color: var(--muted, #94a3b8); font-size: 13px; margin: 0 0 10px; }

.alloc-push-status {
  font-size: 13px; padding: 8px 10px; border-radius: 6px; margin: 6px 0;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
}
.alloc-push-status.is-wait  { color: #93c5fd; border-color: rgba(59,130,246,0.35); }
.alloc-push-status.is-ok    { color: #86efac; border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.08); }
.alloc-push-status.is-error { color: #fca5a5; border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.08); }

.alloc-push-totals { font-size: 13px; margin: 8px 0 6px; color: var(--fg, #e2e8f0); }
.alloc-push-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.alloc-push-table th, .alloc-push-table td {
  padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: left;
}
.alloc-push-table th { color: var(--muted, #94a3b8); font-weight: 600; }
.alloc-push-table td.num, .alloc-push-table th:nth-child(n+2) { text-align: right; }
.alloc-push-warn { color: #fbbf24; cursor: help; }

/* (O antigo ".planner-toast" foi removido — o acompanhamento do envio ao
   Planner agora vive no widget global ".pq" definido em base.html.) */

/* Botao "Project Planner" inline em headers de pagina (ex.: Alocacao
   Diaria). Mesmo .btn-ghost padrao + iconezinho de Gantt no inicio. */
.btn-planner-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.btn-planner-link .icon-planner {
  width: 14px;
  height: 14px;
  background-color: #f9a8d4;   /* rosa pra bater com o tile do portal */
  display: inline-block;
}
.btn-planner-link:hover .icon-planner {
  background-color: #ffffff;
}

/* ── Tile "Drive": estado quando o link ainda nao foi configurado.
   Fica um pouco mais "tracejado" visualmente pra sinalizar a acao. */
.pmbok-tile.pmbok-tile--unset {
  border-style: dashed;
  opacity: 0.85;
}
.pmbok-tile.pmbok-tile--unset:hover {
  opacity: 1;
}

/* Botao de editar dentro do tile (lapis no canto inferior direito).
   Discreto, aparece com cor mais forte no hover do tile. */
.pmbok-tile-edit {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 22px; height: 22px;
  padding: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-muted, #94a3b8);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.pmbok-tile:hover .pmbok-tile-edit {
  background: rgba(255,255,255,0.08);
  color: var(--text, #e5e7eb);
  border-color: rgba(255,255,255,0.25);
}
.pmbok-tile-edit:hover {
  background: rgba(34,197,94,0.22) !important;
  color: #86efac !important;
  border-color: rgba(34,197,94,0.45) !important;
}

/* ── Densidade adaptativa — caber tudo numa viewport sem scroll ────
   Em telas com altura menor (notebooks 13"/14", janelas reduzidas),
   reduzimos paddings e altura dos tiles pro portal_home fechar
   inteiro acima da dobra. Aplicado por media query de ALTURA pra
   nao afetar telas grandes. */
@media (max-height: 900px) {
  .pmbok-board { column-gap: 8px; margin-top: 2px; }
  .pmbok-board.is-masonry, .pmbok-board.is-masonry .pmbok-masonry-col { gap: 8px; }
  .pmbok-col {
    padding: 8px 10px 10px;
    margin-bottom: 8px;
  }
  .pmbok-col-head { margin: 0 2px 6px; }
  .pmbok-col-tiles { gap: 4px; }
  .pmbok-col-tiles .pmbok-tile {
    height: 52px;
    padding: 6px 9px;
    gap: 9px;
  }
  .pmbok-col-tiles .pmbok-tile-icon { width: 28px; height: 28px; }
  .pmbok-col-tiles .pmbok-tile-icon .icon { width: 16px; height: 16px; }
  .pmbok-col-tiles .pmbok-tile-label { font-size: 12px; }
  .pmbok-col-tiles .pmbok-tile-meta  { font-size: 10.4px; }
  .pmbok-tile-edit { width: 20px; height: 20px; bottom: 4px; right: 4px; }
}
@media (max-height: 760px) {
  .pmbok-board { column-width: 280px; column-gap: 6px; }
  .pmbok-board.is-masonry, .pmbok-board.is-masonry .pmbok-masonry-col { gap: 6px; }
  .pmbok-col { padding: 6px 9px 8px; margin-bottom: 6px; }
  .pmbok-col-head { margin: 0 2px 4px; }
  .pmbok-col-head h2 { font-size: 11px; letter-spacing: 0.8px; }
  .pmbok-col-icon { width: 22px; height: 22px; }
  .pmbok-col-icon .icon { width: 12px; height: 12px; }
  .pmbok-col-tiles { gap: 3px; }
  .pmbok-col-tiles .pmbok-tile {
    height: 46px;
    padding: 5px 8px;
    gap: 8px;
  }
  .pmbok-col-tiles .pmbok-tile-icon { width: 26px; height: 26px; }
  .pmbok-col-tiles .pmbok-tile-icon .icon { width: 14px; height: 14px; }
  .pmbok-col-tiles .pmbok-tile-label { font-size: 11.5px; }
  .pmbok-col-tiles .pmbok-tile-meta  { font-size: 10px; }
  /* Lapis encolhe ainda mais e o body reduz reserva pra ganhar texto */
  .pmbok-tile-edit { width: 18px; height: 18px; font-size: 10.5px; }
  .pmbok-col-tiles .pmbok-tile:has(.pmbok-tile-edit) .pmbok-tile-body {
    padding-right: 26px;
  }
}

/* ── Modal de editar URL do Drive ─────────────────────────────── */
.pmbok-drive-modal[hidden] { display: none !important; }
.pmbok-drive-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.pmbok-drive-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.pmbok-drive-modal-card {
  position: relative;
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  width: 100%; max-width: 540px;
  display: flex; flex-direction: column;
}
.pmbok-drive-modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.pmbok-drive-modal-head h3 {
  margin: 0; font-size: 15px; flex: 1; line-height: 1.2;
}
.pmbok-drive-modal-close {
  background: transparent; border: 0;
  color: var(--text-muted, #94a3b8);
  font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0 6px;
}
.pmbok-drive-modal-close:hover { color: var(--text, #e5e7eb); }
.pmbok-drive-modal-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.pmbok-drive-modal-label {
  font-size: 12.5px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.45;
}
.pmbok-drive-modal-input {
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  color: var(--text, #e5e7eb);
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
}
.pmbok-drive-modal-input:focus {
  outline: none;
  border-color: rgba(34,197,94,0.55);
  box-shadow: 0 0 0 2px rgba(34,197,94,0.20);
}
.pmbok-drive-modal-help {
  margin: 0; font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
}
.pmbok-drive-modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 4px;
}

/* Cores no header da area — combina com flavor predominante */
.pmbok-area--integracao         .pmbok-area-icon { background: rgba(99,102,241,0.20);  color: #a5b4fc; }
.pmbok-area--escopo             .pmbok-area-icon { background: rgba(34,197,94,0.20);   color: #86efac; }
.pmbok-area--cronograma         .pmbok-area-icon { background: rgba(14,165,233,0.22);  color: #7dd3fc; }
.pmbok-area--custos             .pmbok-area-icon { background: rgba(245,158,11,0.22);  color: #fbbf24; }
.pmbok-area--qualidade          .pmbok-area-icon { background: rgba(34,197,94,0.20);   color: #86efac; }
.pmbok-area--recursos           .pmbok-area-icon { background: rgba(20,184,166,0.22);  color: #5eead4; }
.pmbok-area--comunicacoes       .pmbok-area-icon { background: rgba(225,29,72,0.20);   color: #fb7185; }
.pmbok-area--riscos             .pmbok-area-icon { background: rgba(239,68,68,0.22);   color: #fca5a5; }
.pmbok-area--aquisicoes         .pmbok-area-icon { background: rgba(168,85,247,0.22);  color: #d8b4fe; }
.pmbok-area--partes_interessadas .pmbok-area-icon{ background: rgba(10,102,194,0.25);  color: #93c5fd; }

/* ======================================================================
   Registro de Partes Interessadas — Stakeholders page
   ====================================================================== */

.stk-page .stk-head {
  margin: 12px 0 12px;
}
.stk-head-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.stk-head-top h1 { margin: 0; }
.stk-head-actions { display: flex; gap: 8px; }
.stk-sub {
  margin: 6px 0 14px;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  max-width: 820px;
}

.stk-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}
.stk-sum-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(99,102,241,0.10);
  border: 1px solid rgba(99,102,241,0.25);
}
.stk-sum-card--warn {
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.30);
}
.stk-sum-card--ok {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.30);
}
.stk-sum-card--muted {
  background: rgba(148,163,184,0.08);
  border-color: rgba(148,163,184,0.25);
}
.stk-sum-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8); font-weight: 600;
}
.stk-sum-val {
  font-size: 22px; font-weight: 700; color: var(--text, #e5e7eb);
  font-variant-numeric: tabular-nums;
}

.stk-toolbar {
  display: flex; gap: 8px; align-items: center; margin: 8px 0 14px;
}
.stk-search-input {
  flex: 1; max-width: 380px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  color: var(--text, #e5e7eb);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}
.stk-search-input:focus { outline:none; border-color: var(--primary, #6366f1); }

/* Contador "X de Y" — ao lado do input quando filtrando. Discreto
   pra nao competir com o conteudo da tabela. */
.stk-search-count {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
  user-select: none;
}
.stk-search-count[hidden] { display: none; }

.stk-flash {
  display: flex; flex-direction: column; gap: 6px;
  margin: 6px 0 12px;
}
.stk-flash-item {
  padding: 8px 12px; border-radius: 6px; font-size: 13px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.stk-flash-success { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.35); }
.stk-flash-error   { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.40); }

.stk-empty {
  padding: 36px;
  text-align: center;
  border: 1px dashed var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  color: var(--text-muted, #94a3b8);
  margin: 16px 0;
}

/* ─── Grupo por organizacao ────────────────────────────────────────── */
.stk-group {
  margin: 18px 0;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  background: var(--card-bg, #0f172a);
  /* overflow: visible — sticky position de filhos requer parent
     SEM overflow:hidden/auto/scroll. Cantos arredondados sao
     mantidos pelo .stk-group-head com top-radius e pelo last
     <tr> via border-radius nas tds. */
}
.stk-group .stk-group-head {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.stk-group .stk-table tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}
.stk-group .stk-table tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}
.stk-group-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  /* Fundo OPACO (nao gradiente translucido) — necessario pro sticky
     nao deixar conteudo aparecer por baixo no scroll. */
  background-color: var(--card-bg, #0f172a);
  background-image: linear-gradient(180deg,
    rgba(99,102,241,0.10) 0%,
    rgba(99,102,241,0.02) 100%);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  /* Sticky: o header da org gruda no topo do <section> enquanto
     scrolla pelas linhas daquele grupo. Sai naturalmente quando a
     proxima section toma o lugar. Offset = 0 (topo da viewport),
     mas como a topbar global tambem eh sticky (top:0, z:10), aqui
     usamos z:11 pra ficar logo abaixo dela. */
  position: sticky;
  top: 0;
  z-index: 11;
}
.stk-table thead th {
  /* Cabecalho da tabela: gruda LOGO ABAIXO do header da org. Como
     a altura de .stk-group-head varia pouco (~60px com padding e
     borda), usamos top: 60px. Background opaco pra cobrir as linhas
     que passarem por baixo no scroll. */
  position: sticky;
  top: 60px;
  z-index: 10;
  background-color: var(--card-bg, #0f172a);
  background-image: linear-gradient(rgba(0,0,0,0.20), rgba(0,0,0,0.20));
}
.stk-org-logo {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 3px;
  flex-shrink: 0;
}
.stk-org-logo--sm { width: 24px; height: 24px; padding: 2px; }
.stk-org-logo--none {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.30); color: var(--text-muted, #94a3b8);
  font-weight: 700;
}
.stk-org-name {
  margin: 0; font-size: 16px;
}
.stk-org-count {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: var(--text-muted, #94a3b8);
}
.stk-org-edit {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-muted, #94a3b8);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.stk-org-edit:hover { color: #fff; border-color: rgba(255,255,255,0.30); }

/* ─── Variante flat (1 tabela, sem grupos) — usada apos UX request
   "Quero que a organizacao seja uma das colunas". Organizacao virou
   coluna com <select> inline em vez de header de grupo. ────────────── */
.stk-flat {
  margin: 18px 0;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  background: var(--card-bg, #0f172a);
  /* A tabela tem ~10 colunas com min-widths que somam mais que a largura
     util → precisa rolar. Este card VIRA o container de rolagem (H + V):
     assim as colunas da direita (Observacoes / Acoes) ficam SEMPRE por
     dentro da grade, sem vazar pra fora da borda. O max-height deixa a
     rolagem vertical acontecer aqui dentro, entao o thead sticky (top:0)
     gruda no topo do proprio card. Mesmo padrao de .tc-wrap / .alloc-wrap. */
  overflow: auto;
  max-height: calc(100vh - 290px);
  min-height: 340px;
  scrollbar-width: thin;
  scrollbar-color: rgba(63, 169, 245, 0.45) transparent;
}
.stk-flat::-webkit-scrollbar { width: 10px; height: 10px; }
.stk-flat::-webkit-scrollbar-thumb {
  background: rgba(63, 169, 245, 0.45);
  border-radius: 6px;
}
.stk-flat::-webkit-scrollbar-track { background: transparent; }
.stk-flat .stk-table--flat thead th {
  /* Cabecalho da unica tabela: sticky no topo direto (sem header de
     org acima). Offset top=0 pra grudar logo abaixo da topbar global
     que ocupa top:0 com z:10 — usamos z:11 aqui pra ficar logo
     atras dela mas a frente das linhas. */
  position: sticky;
  top: 0;
  z-index: 11;
  background-color: var(--card-bg, #0f172a);
  background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25));
}
.stk-flat .stk-table--flat tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}
.stk-flat .stk-table--flat tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

/* Celula da coluna Organizacao: logo + select inline */
.stk-col-org { min-width: 200px; }
.stk-org-cell {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%;
}
.stk-org-cell-logo {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.stk-org-logo--xs {
  width: 24px; height: 24px;
  padding: 2px;
  border-radius: 5px;
}
.stk-org-select {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text, #e5e7eb);
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 200ms;
}
.stk-org-select:hover {
  border-color: rgba(255,255,255,0.20);
}
.stk-org-select:focus {
  outline: none;
  border-color: var(--primary, #3fa9f5);
}
.stk-org-select:disabled {
  opacity: 0.6; cursor: progress;
}
/* Pulso verde curto pra confirmar save (a la "toast" inline). */
.stk-org-select--saved {
  border-color: rgba(93,211,158,0.70) !important;
  box-shadow: 0 0 0 2px rgba(93,211,158,0.20);
}

/* Coluna Gestor Direto: <select> inline com o mesmo look do org select. */
.stk-col-mgr { min-width: 180px; }
.stk-mgr-select {
  width: 100%;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text, #e5e7eb);
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 200ms;
}
.stk-mgr-select:hover { border-color: rgba(255,255,255,0.20); }
.stk-mgr-select:focus {
  outline: none;
  border-color: var(--primary, #3fa9f5);
}
.stk-mgr-select:disabled { opacity: 0.6; cursor: not-allowed; }
.stk-mgr-select--saved {
  border-color: rgba(93,211,158,0.70) !important;
  box-shadow: 0 0 0 2px rgba(93,211,158,0.20);
}

/* ─── Tabela ──────────────────────────────────────────────────────── */
.stk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.stk-table th, .stk-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stk-table th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
  background: rgba(0,0,0,0.20);
}
.stk-table tr:last-child td { border-bottom: none; }
.stk-row:hover td { background: rgba(255,255,255,0.025); }

.stk-col-name {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.stk-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* ─── Flag ativo/inativo (linha propria, sob o nome) ────────────────
   Pílula clicável: bolinha colorida + rótulo. Verde = ativo,
   cinza = inativo. A linha inteira escurece quando inativo. Fica
   sempre abaixo do nome, alinhada com o texto (avatar 22px + gap 8px). */
.stk-active-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 30px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.40);
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 120ms ease, border-color 120ms ease,
              color 120ms ease, opacity 120ms ease;
}
.stk-active-flag:hover { background: rgba(34, 197, 94, 0.20); }
.stk-active-flag:disabled { opacity: 0.5; cursor: progress; }
.stk-active-flag .stk-active-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22);
  flex-shrink: 0;
}
.stk-active-flag.is-off {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.10);
  color: #94a3b8;
}
.stk-active-flag.is-off:hover { background: rgba(148, 163, 184, 0.18); }
.stk-active-flag.is-off .stk-active-dot {
  background: #64748b;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.18);
}
/* Linha inteira esmaece quando a pessoa esta inativa (mantem legivel). */
.stk-row--off td { opacity: 0.5; }
.stk-row--off td.stk-col-name { opacity: 1; }
.stk-row--off .resource-name,
.stk-row--off .resource-avatar { opacity: 0.6; }

/* ─── Flag alocado no projeto (coluna ao lado de Cargo no Projeto) ──
   Pílula clicável: azul = alocado, cinza = não alocado. */
.stk-col-alloc { min-width: 120px; }
/* Poder / Interesse (Matriz de engajamento) — colunas so-admin com
   <select> compacto MA/A/B/MB. Reaproveita o visual do select de gestor. */
.stk-col-pi { width: 88px; min-width: 78px; text-align: center; }
.stk-pi-select {
  width: 100%;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text, #e5e7eb);
  border-radius: 5px;
  padding: 3px 4px;
  font-size: 0.82rem;
}
.stk-pi-select:hover { border-color: rgba(255,255,255,0.20); }
.stk-pi-select:focus { outline: none; border-color: var(--primary, #3fa9f5); }
.stk-pi-select:disabled { opacity: 0.6; cursor: progress; }
.stk-alloc-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.42);
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease,
              color 120ms ease, opacity 120ms ease;
}
.stk-alloc-flag:hover { background: rgba(59, 130, 246, 0.22); }
.stk-alloc-flag:disabled { opacity: 0.5; cursor: progress; }
.stk-alloc-flag .stk-alloc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22);
  flex-shrink: 0;
}
.stk-alloc-flag.is-off {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.10);
  color: #94a3b8;
}
.stk-alloc-flag.is-off:hover { background: rgba(148, 163, 184, 0.18); }
.stk-alloc-flag.is-off .stk-alloc-dot {
  background: #64748b;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.18);
}
/* Foto: coluna estreita com thumbnail circular + controle de upload. */
.stk-col-photo { width: 128px; }
.stk-photo-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.stk-photo-thumb {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.15s;
}
.stk-photo-thumb:hover { transform: scale(1.06); }
.stk-photo-thumb:focus-visible {
  outline: 2px solid rgba(96,165,250,0.9);
  outline-offset: 2px;
}
.stk-photo-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.stk-photo-thumb:hover .stk-photo-thumb-overlay,
.stk-photo-thumb:focus-visible .stk-photo-thumb-overlay {
  opacity: 1;
}
.stk-photo-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}
.stk-photo-img--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
}
.stk-photo-upload {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.stk-photo-upload:hover {
  color: var(--text, #e2e8f0);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.20);
}
.stk-photo-upload-btn { font-size: 12px; line-height: 1; }
.stk-photo-del {
  border: none;
  background: none;
  color: var(--danger, #ef4444);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.7;
}
.stk-photo-del:hover { opacity: 1; background: rgba(239,68,68,0.12); }
.stk-photo-status {
  font-size: 11px;
  color: var(--success, #22c55e);
  flex-basis: 100%;
}
.stk-photo-status--err { color: var(--danger, #ef4444); }
.stk-col-li { width: 80px; text-align: center; }
.stk-col-role { min-width: 140px; max-width: 200px; vertical-align: middle; }
/* Cargo (Projeto/Funcional): clampa em 2 linhas com reticências pra não
   esticar a altura da linha quando o texto é longo (ex.: "Coordenador-
   Geral de Estruturação de Dados para Inteligência Artificial"). O texto
   completo fica no tooltip (title). Mantém todas as linhas na altura padrão. */
.stk-role-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  max-height: 2.5em;
  word-break: break-word;
}
.stk-col-email { min-width: 180px; }
.stk-col-phone { min-width: 140px; }
/* Observações: coluna com truncamento em 1 linha + tooltip nativo
   (title=) que mostra o conteudo completo no hover. Border-left
   discreto separa visualmente do toggle "SR Semanal" pra evitar a
   sensacao de "linha cruzando" que o line-clamp:2 anterior dava
   quando o texto quebrava em 2 linhas curtas misturando-se com
   linhas vizinhas. Padding-left maior da respiro pro texto. */
.stk-col-obs {
  min-width: 220px;
  max-width: 340px;
  padding-left: 16px !important;
  border-left: 1px dashed rgba(255,255,255,0.08);
}
.stk-table thead th.stk-col-obs {
  border-left: 1px dashed rgba(255,255,255,0.10);
}
.stk-col-obs .stk-obs-val {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
  font-style: italic;
  cursor: help;
}
.stk-col-actions { width: 80px; text-align: right; }

.stk-li-link, .stk-li-none {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; vertical-align: middle;
}
.stk-li-link { color: #0A66C2; }
.stk-li-link:hover { color: #1d8be3; }
.stk-li-none { color: rgba(229,231,235,0.30); }
.stk-li-edit {
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-muted, #94a3b8);
  padding: 1px 6px; border-radius: 4px;
  cursor: pointer; font-size: 11px; margin-left: 4px;
  vertical-align: middle;
}
.stk-li-edit:hover { color: #fff; border-color: rgba(255,255,255,0.30); }

.stk-email-link { color: #93c5fd; text-decoration: none; }
.stk-email-link:hover { text-decoration: underline; }
.stk-phone-val { font-variant-numeric: tabular-nums; }

/* Campo faltante — caixa vermelha pra puxar atencao. */
.stk-missing {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(239,68,68,0.18);
  border: 1px solid rgba(239,68,68,0.40);
  color: #fca5a5;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}

.stk-row-edit, .stk-row-del {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-muted, #94a3b8);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.stk-row-edit:hover { color: #fff; border-color: rgba(255,255,255,0.30); }
.stk-row-del {
  border-color: rgba(255,107,107,0.45); color: #ff6b6b;
}
.stk-row-del:hover { background: rgba(255,107,107,0.18); }

/* ─── Modais — reaproveita estilo de tc-billing-modal ──────────────── */
.stk-modal[hidden] { display: none !important; }
.stk-modal {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
}
.stk-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.stk-modal-panel {
  position: relative;
  width: min(820px, 100%); max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.stk-modal-panel--narrow { width: min(520px, 100%); }
.stk-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; top: 0;
  background: var(--card-bg, #0f172a);
  z-index: 1;
}
.stk-modal-head h2 { margin: 0; font-size: 16px; }
.stk-modal-close {
  background: none; border: none; color: var(--text-muted, #94a3b8);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
}
.stk-modal-close:hover { color: #fff; }
.stk-modal-section { padding: 14px 18px; }
.stk-modal-section h3 { margin: 0 0 10px; font-size: 13px;
  color: var(--text-muted, #94a3b8); font-weight: 600; }
.stk-modal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stk-modal-table th, .stk-modal-table td {
  padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
}
.stk-modal-del {
  background: transparent; border: 1px solid rgba(255,107,107,0.45);
  color: #ff6b6b; padding: 2px 8px; border-radius: 4px;
  cursor: pointer; font-size: 12px;
}
.stk-modal-del:hover { background: rgba(255,107,107,0.18); }

.stk-modal-form-row {
  display: flex; gap: 10px; align-items: end; flex-wrap: wrap;
  margin-bottom: 10px;
}
.stk-modal-form-row label {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px;
}
.stk-modal-form-row label span {
  font-size: 11px; color: var(--text-muted, #94a3b8);
}
.stk-modal-form-row input[type="text"],
.stk-modal-form-row input[type="email"],
.stk-modal-form-row input[type="url"],
.stk-modal-form-row select {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  color: var(--text, #e5e7eb);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}
.stk-modal-form-row input[type="color"] {
  width: 60px; height: 32px;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 6px;
  cursor: pointer;
}
.stk-modal-form-row input[type="file"] {
  background: rgba(0,0,0,0.25);
  border: 1px dashed var(--border, rgba(255,255,255,0.20));
  color: var(--text-muted, #94a3b8);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
}

/* Card no portal home — variant azul-cobalto */
.module-stakeholders .module-icon {
  background: linear-gradient(135deg, #0A66C2 0%, #1e40af 100%);
}

/* ======================================================================
   Dicionário da EAP (WBS Dictionary)
   ====================================================================== */

.wbsdict-page .wbs-head { margin: 12px 0 12px; }
.wbs-head-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.wbs-head-top h1 { margin: 0; }
.wbs-head-actions { display: flex; gap: 8px; }

.wbs-sub {
  margin: 6px 0 14px;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  max-width: 920px;
}

.wbs-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}
.wbs-sum-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(99,102,241,0.10);
  border: 1px solid rgba(99,102,241,0.25);
}
.wbs-sum-card--ok {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.30);
}
.wbs-sum-card--warn {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.30);
}
.wbs-sum-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8); font-weight: 600;
}
.wbs-sum-val {
  font-size: 22px; font-weight: 700; color: var(--text, #e5e7eb);
  font-variant-numeric: tabular-nums;
}

.wbs-flash {
  display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px;
}
.wbs-flash-item {
  padding: 8px 12px; border-radius: 6px; font-size: 13px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.wbs-flash-success { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.35); }
.wbs-flash-error   { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.40); }

.wbs-empty {
  padding: 36px; text-align: center;
  border: 1px dashed var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  color: var(--text-muted, #94a3b8);
  margin: 16px 0;
}
.wbs-empty a { color: #6366f1; }

/* ─── Tabela ──────────────────────────────────────────────────────── */
.wbs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  overflow: hidden;
  font-size: 13px;
}
.wbs-table th, .wbs-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: top;
}
.wbs-table th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
  background: rgba(0,0,0,0.20);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.wbs-table tr:last-child td { border-bottom: none; }

.wbs-col-code   { width: 90px;  white-space: nowrap; font-variant-numeric: tabular-nums; }
.wbs-col-name   { min-width: 220px; }
.wbs-col-status { width: 140px; }
.wbs-col-desc   { min-width: 320px; }
.wbs-col-actions { width: 110px; text-align: right; }

.wbs-code {
  display: inline-block;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
}
.wbs-row--root .wbs-code,
.wbs-row--root .wbs-name {
  color: var(--text, #e5e7eb);
  font-size: 14px;
}
.wbs-row--root td {
  background: linear-gradient(180deg, rgba(99,102,241,0.10) 0%, rgba(99,102,241,0.02) 100%);
  border-bottom: 1px solid rgba(99,102,241,0.25);
}
.wbs-name { font-weight: 500; }
.wbs-row--lvl-1 .wbs-name { font-weight: 600; }

.wbs-tree-line {
  display: inline-block;
  margin-right: 6px;
  color: rgba(255,255,255,0.20);
  font-family: monospace;
}

/* Status chips — mesmo padrao de cor da EAP */
.wbs-status-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.wbs-status--nao-iniciado { background: var(--eap-nao-iniciado); color: #fff; }
.wbs-status--em-andamento { background: var(--eap-em-andamento); color: #2A1F00; }
.wbs-status--atrasado     { background: var(--eap-atrasado);     color: #fff; }
.wbs-status--concluido    { background: var(--eap-concluido);    color: #fff; }
.wbs-status--cancelado    { background: var(--eap-cancelado);    color: #fff; }
.wbs-status--suspenso     { background: var(--eap-suspenso);     color: #fff; }

/* Descricao */
.wbs-desc {
  margin: 0;
  color: var(--text, #e5e7eb);
  line-height: 1.5;
}
.wbs-desc-empty {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(239,68,68,0.18);
  border: 1px solid rgba(239,68,68,0.40);
  color: #fca5a5;
  font-size: 12px;
  font-weight: 600;
  cursor: help;
}
.wbs-desc-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(99,102,241,0.20);
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,0.40);
}

.wbs-row-edit {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-muted, #94a3b8);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11.5px;
  white-space: nowrap;
}
.wbs-row-edit:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.04);
}

/* ─── Modal PiP ───────────────────────────────────────────────────── */
.wbs-modal[hidden] { display: none !important; }
.wbs-modal {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
}
.wbs-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.wbs-modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.wbs-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wbs-modal-head h2 { margin: 0; font-size: 16px; }
.wbs-modal-sub { margin: 4px 0 0; font-size: 11.5px; color: var(--text-muted, #94a3b8); }
.wbs-modal-close {
  background: none; border: none; color: var(--text-muted, #94a3b8);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
}
.wbs-modal-close:hover { color: #fff; }
.wbs-modal-section { padding: 14px 18px; }
.wbs-modal-label {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wbs-edit-textarea {
  width: 100%;
  margin-top: 6px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  color: var(--text, #e5e7eb);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}
.wbs-modal-hint { margin: 6px 0 12px; font-size: 11.5px; }
.wbs-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* Card no portal home */
.module-wbs .module-icon {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
}


/* ───────────────────────────────────────────────────────────────────
   Indicador inline "Atualizar com Salesforce" (countdown 30s)
   Substitui o flash antigo + modal (mai/2026). Aviso discreto
   ABAIXO do botao, com barra fina decrescente + contador + cancelar.
   Auto-loop apos reload se ainda houver pendencia.
   ─────────────────────────────────────────────────────────────────── */
.sf-sync-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.sf-sync-inline[hidden] { display: none !important; }
.sf-sync-inline {
  width: 100%;
  min-width: 220px;
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  animation: sf-sync-inline-fade 220ms ease-out;
}
@keyframes sf-sync-inline-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.sf-sync-inline-bar {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.sf-sync-inline-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #38bdf8 0%, #0ea5e9 60%, #2563eb 100%);
  border-radius: 999px;
  transition: transform 120ms linear;
  will-change: transform;
}
.sf-sync-inline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
}
.sf-sync-inline-text {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1px;
}
.sf-sync-inline-text .sf-sync-inline-count {
  color: var(--text, #e2e8f0);
  font-weight: 600;
}
.sf-sync-inline-cancel {
  background: transparent;
  border: 0;
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: 4px;
  transition: color 120ms ease, background-color 120ms ease;
}
.sf-sync-inline-cancel:hover {
  color: var(--text, #f1f5f9);
  background: rgba(255,255,255,0.06);
}
.btn-sf-sync[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* Estado de aviso: `sf` CLI no Mac do PM expirou / watcher offline.
   Pinta o botao de vermelho-laranja e mostra hint discreto embaixo
   com instrucao do comando pra reauth. O usuario AINDA pode clicar
   (cria SyncRequest), mas e' claro que vai falhar ate o PM reauth. */
.btn-sf-sync.btn-sf-sync--warn {
  background: #b91c1c;
  border-color: #991b1b;
  box-shadow: 0 0 0 1px rgba(248,113,113,0.18),
              0 2px 8px rgba(185,28,28,0.32);
}
.btn-sf-sync.btn-sf-sync--warn:hover {
  background: #991b1b;
  box-shadow: 0 0 0 1px rgba(248,113,113,0.32),
              0 2px 12px rgba(185,28,28,0.5);
}
.btn-sf-sync .sf-cli-warn {
  background: rgba(255,255,255,0.95);
  color: #b91c1c;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-left: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  animation: sf-cli-warn-pulse 1.6s ease-in-out infinite;
}
@keyframes sf-cli-warn-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.04); opacity: 0.9; }
}
.sf-cli-warn-hint {
  font-size: 11px;
  line-height: 1.4;
  color: #fca5a5;
  background: rgba(185,28,28,0.10);
  border: 1px solid rgba(185,28,28,0.32);
  border-radius: 6px;
  padding: 5px 8px;
  max-width: 360px;
}
.sf-cli-warn-hint code {
  background: rgba(0,0,0,0.32);
  color: #fee2e2;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}

/* ═════════════════════════════════════════════════════════════════════
   Heartbeat ECG — observabilidade da conexao com Salesforce
   ─────────────────────────────────────────────────────────────────────
   Strip visual com formato de eletrocardiograma. Estados:
   - .is-healthy: onda verde rolando da direita pra esquerda em loop
                  ritmico (parece monitor cardiaco real). Bolinha verde
                  pulsando sincronizada com cada batida.
   - .is-offline: linha reta vermelha (flatline) + label "OFFLINE"
                  piscando lentamente. Sem movimento — sinal de "piiii".
   O polling JS (em base.html) atualiza a classe a cada ~15s consultando
   /rh/api/admin/sf-cli-health, sem precisar reload da pagina.
   ════════════════════════════════════════════════════════════════════ */
.sf-heartbeat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px 0 6px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  user-select: none;
  min-width: 110px;
}
.sf-heartbeat-svg {
  height: 18px;
  width: 70px;
  flex: 0 0 auto;
  overflow: hidden;
}
.sf-heartbeat .sf-hb-flatline {
  /* Linha de baseline — visivel sempre, mas no estado healthy
     fica atras da onda animada. */
  stroke: rgba(148, 163, 184, 0.35);
}
.sf-heartbeat .sf-hb-wave path {
  stroke: #22c55e;
  filter: drop-shadow(0 0 2px rgba(34, 197, 94, 0.6));
}
.sf-heartbeat .sf-hb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #6b7280; /* default cinza pre-classe */
}
.sf-heartbeat .sf-hb-label {
  color: #94a3b8;
}

/* ── Estado SAUDAVEL: onda verde rolando + dot pulsando ──────────── */
.sf-heartbeat.is-healthy {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(20, 83, 45, 0.18);
}
.sf-heartbeat.is-healthy .sf-hb-label {
  color: #4ade80;
}
.sf-heartbeat.is-healthy .sf-hb-dot {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: sf-hb-dot-pulse 1.1s ease-out infinite;
}
.sf-heartbeat.is-healthy .sf-hb-wave {
  animation: sf-hb-wave-scroll 1.1s linear infinite;
}
@keyframes sf-hb-wave-scroll {
  /* Move o grupo da onda de 0 ate -60 unidades do viewBox (1 ciclo
     ECG por 1.1s, sincronizado com o pulse do dot). O path tem 4
     ciclos de 60 unidades cada — quando completa um ciclo, salta de
     volta sem visual jump (loop perfeito). */
  from { transform: translateX(0);     }
  to   { transform: translateX(-60px); }
}
@keyframes sf-hb-dot-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(34,197,94,0.7); }
  60%  { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(34,197,94,0);   }
  100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(34,197,94,0);   }
}

/* ── Estado OFFLINE: flatline vermelha + label piscando ──────────── */
.sf-heartbeat.is-offline {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(127, 29, 29, 0.20);
}
.sf-heartbeat.is-offline .sf-hb-flatline {
  stroke: #ef4444;
  stroke-width: 2;
  filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.55));
}
.sf-heartbeat.is-offline .sf-hb-wave {
  /* Esconde a onda — so a flatline vermelha aparece. */
  opacity: 0;
}
.sf-heartbeat.is-offline .sf-hb-dot {
  background: #ef4444;
  animation: sf-hb-dot-flat 1.8s ease-in-out infinite;
}
.sf-heartbeat.is-offline .sf-hb-label {
  color: #fca5a5;
  animation: sf-hb-label-blink 1.8s ease-in-out infinite;
}
@keyframes sf-hb-dot-flat {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1;    }
}
@keyframes sf-hb-label-blink {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1;    }
}

/* Tooltip mais legivel pro heartbeat. */
.sf-heartbeat[title]:hover {
  cursor: help;
}

/* Respeita usuarios que preferem reduzir movimento (acessibilidade). */
@media (prefers-reduced-motion: reduce) {
  .sf-heartbeat .sf-hb-wave,
  .sf-heartbeat .sf-hb-dot,
  .sf-heartbeat .sf-hb-label {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Matriz de Lideres por Entregavel (Obi-Wan only — /rh/lideres)
   Lista agrupada por Frente raiz, com status (estilo EAP) + pickers
   de Lider e Apoio. Pop-up customizado pra dropdown com avatares.
   ════════════════════════════════════════════════════════════════════ */
.lideres-page .ld-head {
  margin: 6px 0 14px;
  /* Sticky no topo do <main> pra que header + indicadores fiquem
     sempre visiveis e a lista role abaixo. backdrop-filter blur
     da legibilidade quando a lista passa por baixo. */
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg,
              rgba(10,16,36,0.92) 0%,
              rgba(10,16,36,0.82) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 10px 4px 10px;
  margin-left: -4px;
  margin-right: -4px;
  border-bottom: 1px solid var(--border, #243160);
}
.ld-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ld-head-top h1 {
  margin: 0;
  font-size: 18px;
  color: var(--text, #f1f5f9);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ld-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(217,119,6,0.22);
  /* `color` define o background-color do .icon (currentColor mask). */
  color: #fcd34d;
  flex-shrink: 0;
}
/* O .icon base usa width/height: 100% -> precisa de container fixo.
   Forcamos cor amarela via background-color pra sobrescrever o
   var(--primary) default (azul) que vinha da regra .icon. */
.ld-title-icon .icon {
  width: 20px;
  height: 20px;
  background-color: currentColor;
}
.ld-head-actions { display: flex; gap: 8px; }
.ld-sub {
  margin: 6px 0 10px;
  color: var(--text-muted, #8fa0c8);
  font-size: 12px;
  max-width: 920px;
  line-height: 1.45;
}
.ld-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ld-sum-card {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  padding: 5px 12px;
  border-radius: 7px;
  min-width: 0;
}
.ld-sum-card--ok { border-color: rgba(34,197,94,.45); }
.ld-sum-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #8fa0c8);
  white-space: nowrap;
}
.ld-sum-val {
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #f1f5f9);
}
.ld-empty {
  background: var(--surface, #141d38);
  border: 1px dashed var(--border, #243160);
  padding: 24px;
  text-align: center;
  border-radius: 10px;
  color: var(--text-muted, #8fa0c8);
}
.ld-empty a { color: var(--primary, #3fa9f5); text-decoration: underline; }

/* ── Grupos por Frente ── */
.ld-board { display: flex; flex-direction: column; gap: 14px; }
.ld-group {
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 10px;
  padding: 8px 10px 10px;
}
.ld-group-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text, #f1f5f9);
  padding: 4px 4px 6px;
  border-bottom: 1px solid var(--border, #243160);
}
/* Grid auto-fit de CARDS — 1/2/3 colunas conforme largura do <main>.
   Cada card eh uma entrega; mantemos `repeat(auto-fill, minmax(...))`
   pra que cards nao "estiquem" feio em telas largas. */
.ld-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
}
.ld-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface-alt, #1a2547);
  border: 1px solid var(--border, #243160);
  border-radius: 8px;
  min-height: 92px;
  min-width: 0;
}
.ld-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ld-card-top .ld-status-form { flex: 0 0 auto; }
.ld-card-top .ld-status-select { width: auto; min-width: 110px; }
.ld-card-name {
  font-size: 13px;
  color: var(--text, #f1f5f9);
  line-height: 1.3;
  /* clamp a 2 linhas pra evitar cards muito altos quando o nome
     for longo; tooltip nativo (title) tem o texto completo. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.ld-card-leader {
  /* herda layout de .ld-person-row + alinhamento no rodape do card. */
  align-self: end;
}
/* ── Estrutura do entregavel: 4 papeis TA/SA/TC1/TC2 empilhados ── */
.ld-card-roles {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ld-role-row { align-items: center; }
.ld-role-tag {
  flex: 0 0 auto;
  width: 34px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 4px;
  border-radius: 5px;
  color: var(--text, #f1f5f9);
  background: rgba(63,169,245,0.16);
  border: 1px solid rgba(63,169,245,0.35);
  text-transform: uppercase;
}
/* Slot vazio (NA) — tag mais apagada pra dar peso visual a quem esta preenchido. */
.ld-role-tag--na {
  color: var(--text-muted, #8fa0c8);
  background: rgba(148,163,184,0.10);
  border-color: var(--border, #243160);
}
.ld-picker-placeholder--na {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted, #8fa0c8);
}
.ld-code {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted, #8fa0c8);
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}
.ld-person-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* ── Status select (mesma paleta da EAP) ── */
.ld-status-form { margin: 0; }
.ld-status-select {
  width: 100%;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border, #243160);
  color: #fff;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23ffffffaa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 8px;
  padding-right: 18px;
  line-height: 1.2;
}
.ld-status-select option {
  background: var(--surface, #141d38);
  color: #fff;
}
.ld-status--nao-iniciado  { background-color: #5b9b4b; border-color: #4a8a3c; }
.ld-status--em-andamento  { background-color: #e8b932; border-color: #d5a82e; color: #1a1a1a; }
.ld-status--em-andamento  { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ld-status--atrasado      { background-color: #c92e2e; border-color: #b32626; }
.ld-status--concluido     { background-color: #4a90c8; border-color: #3a7eb4; }
.ld-status--cancelado     { background-color: #101010; border-color: #2a2a2a; }
.ld-status--suspenso      { background-color: #a23bbd; border-color: #8e30a8; }

/* ── Picker de pessoa (trigger button) ── */
.ld-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,0.18);
  border: 1px dashed var(--border, #243160);
  color: var(--text, #f1f5f9);
  padding: 2px 8px 2px 4px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  min-height: 28px;
  transition: border-color .15s ease, background .15s ease;
}
.ld-picker-trigger:hover {
  border-color: var(--primary, #3fa9f5);
  background: rgba(63,169,245,0.08);
}
.ld-picker-name {
  flex: 1;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ld-picker-placeholder {
  flex: 1;
  font-size: 11.5px;
  color: var(--text-muted, #8fa0c8);
  font-style: italic;
}
.ld-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-alt, #1a2547);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text, #f1f5f9);
  border: 1px solid rgba(255,255,255,0.08);
}
.ld-avatar--ph {
  background: linear-gradient(135deg, #3b4870, #1f2a4d);
}
.ld-avatar--add {
  background: transparent;
  border: 1px dashed var(--border, #243160);
  color: var(--text-muted, #8fa0c8);
  font-weight: 400;
  font-size: 14px;
}

/* Mini-links Slack/SF — ficam a direita do trigger, fora dele,
   pra (a) garantir hit-target previsivel e (b) nao precisar
   stopPropagation pra impedir abertura do picker. */
.ld-mini-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
  color: var(--text-muted, #8fa0c8);
  font-size: 13px;
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.ld-mini-link:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text, #f1f5f9);
}
.ld-mini-link--slack:hover { color: #4A154B; background: rgba(74,21,75,0.18); }
.ld-mini-link--slack:hover .ld-mini-icon { background-color: #d6a3da; }

/* Mini-icon: usa o mesmo padrao de mascara SVG da .icon, mas
   tamanho pequeno embutido. Cor cinza por default; hover muda. */
.ld-mini-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.ld-mini-icon--slack {
  -webkit-mask-image: url('img/icons/slack.svg?v=1');
          mask-image: url('img/icons/slack.svg?v=1');
}

/* ── Pop-up de selecao de pessoa ── */
.ld-pop {
  position: absolute;
  z-index: 9999;
  width: 320px;
  max-height: 360px;
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ld-pop[hidden] { display: none; }
.ld-pop-head {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--border, #243160);
}
.ld-pop-search {
  flex: 1;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border, #243160);
  color: var(--text, #f1f5f9);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
}
.ld-pop-search:focus { border-color: var(--primary, #3fa9f5); }
.ld-pop-clear {
  background: transparent;
  border: 1px solid var(--border, #243160);
  color: var(--text-muted, #8fa0c8);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.ld-pop-clear:hover {
  color: #fca5a5;
  border-color: rgba(252,165,165,0.4);
}
.ld-pop-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
}
.ld-pop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  cursor: pointer;
}
.ld-pop-item:hover { background: rgba(63,169,245,0.12); }
.ld-pop-name {
  font-size: 13px;
  color: var(--text, #f1f5f9);
}
.ld-pop-empty {
  padding: 14px;
  text-align: center;
  color: var(--text-muted, #8fa0c8);
  font-size: 12px;
  font-style: italic;
}

/* Toast leve pra feedback (compartilhado com outros modulos seria ok) */
.ld-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f4d2c;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  font: 600 13px/1.3 system-ui, -apple-system, sans-serif;
  max-width: min(560px, 90vw);
  text-align: center;
  z-index: 99999;
  opacity: 0;
  transition: opacity .18s;
}
.ld-toast--err { background: #7a1f1f; }
.ld-toast--on { opacity: 1; }


/* ════════════════════════════════════════════════════════════════════
   Auth & Admin (User table-backed, mai/2026)
   - Nav: avatar do user logado + dropdown (perfil/sair).
   - Nav: presence strip (avatares dos users vistos < 5min) — so admin.
   - Pages: /profile, /admin/users, /admin/users/new+edit.
   ════════════════════════════════════════════════════════════════════ */

/* ── Nav user menu ─────────────────────────────────────────────── */
.nav-user {
  position: relative;
  margin-left: 8px;
}
.nav-user-trigger {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.20);
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.nav-user-trigger:hover { border-color: var(--primary); transform: scale(1.04); }
.nav-user-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.nav-user-avatar--ph {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, #6e7a93, #3e4862);
}
.nav-user-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 10px;
  box-shadow: 0 18px 40px -10px rgba(0,0,0,0.55);
  padding: 6px;
  z-index: 50;
}
.nav-user-pop-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border, #243160);
  margin-bottom: 4px;
}
.nav-user-pop-name { font-weight: 700; font-size: 14px; color: var(--text, #f1f5f9); }
.nav-user-pop-meta { font-size: 11.5px; color: var(--text-muted, #8fa0c8); margin-top: 2px; }
.nav-user-pop-item {
  display: block; width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text, #f1f5f9);
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.nav-user-pop-item:hover {
  background: rgba(63,169,245,0.10);
  color: var(--primary, #3fa9f5);
}
.nav-user-pop-item--danger:hover {
  background: rgba(220,38,38,0.10);
  color: #fca5a5;
}

/* ── Presence strip (admin only) ───────────────────────────────── */
.nav-presence {
  display: flex; align-items: center; gap: 4px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.10);
  min-height: 28px;
}
.nav-presence:empty { display: none; }
.nav-presence-label {
  font-size: 11px;
  color: var(--text-muted, #8fa0c8);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nav-presence-dot {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--surface, #141d38);
  margin-left: -6px;     /* sobrepoe ligeiramente o anterior */
  background: #1a2547;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.nav-presence-dot:first-of-type { margin-left: 0; }
.nav-presence-dot:hover { z-index: 5; transform: scale(1.15); }
.nav-presence-dot img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.nav-presence-initials {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 10px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6e7a93, #3e4862);
}
.nav-presence-more {
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-muted, #8fa0c8);
  font-weight: 600;
}

/* ── Badges (perfil / status) ──────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
  text-transform: uppercase;
}
.badge--admin         { background: rgba(245,158,11,0.18); color: #fbbf24; }
.badge--user          { background: rgba(99,102,241,0.18); color: #a5b4fc; }
.badge--primary-admin { background: rgba(220,38,38,0.18); color: #fca5a5; }
.badge--ok            { background: rgba(34,197,94,0.18); color: #86efac; }
.badge--off           { background: rgba(148,163,184,0.18); color: #cbd5e1; }

/* ── Profile page ──────────────────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.profile-card {
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 12px;
  padding: 20px;
}
.profile-card-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border, #243160);
}
.profile-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border, #243160);
}
.profile-avatar--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6e7a93, #3e4862);
}
.profile-name { font-weight: 700; font-size: 18px; color: var(--text, #f1f5f9); }
.profile-meta { font-size: 12.5px; color: var(--text-muted, #8fa0c8); margin-top: 4px; }
.profile-form { display: flex; flex-direction: column; gap: 12px; }
.profile-form .btn { align-self: flex-start; }
.profile-warn {
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.40);
  color: #fbbf24;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

/* ── Admin pages ───────────────────────────────────────────────── */
/* Filter + counter row (Impeccable harden — FASE 4). */
.admin-users-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 6px;
}
.admin-users-search {
  flex: 0 1 320px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  transition:
    border-color var(--dur-quick, 200ms) var(--ease-out-quart, ease-out),
    box-shadow   var(--dur-quick, 200ms) var(--ease-out-quart, ease-out);
}
.admin-users-search:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(63,169,245,0.25);
}
.admin-users-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
/* Sortable header hint. */
.admin-users-tbl th[data-sort] {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 20px !important;
  transition: color var(--dur-quick) var(--ease-out-quart);
}
.admin-users-tbl th[data-sort]:hover { color: var(--text); }
.admin-users-tbl th[data-sort]:focus-visible {
  outline: none;
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}
.admin-users-tbl th[data-sort]::after {
  content: '↕';
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  opacity: 0.3;
  font-size: 10px;
  transition: opacity var(--dur-quick) var(--ease-out-quart);
}
.admin-users-tbl th[aria-sort="ascending"]::after { content: '↑'; opacity: 1; color: var(--primary); }
.admin-users-tbl th[aria-sort="descending"]::after { content: '↓'; opacity: 1; color: var(--primary); }

/* a11y helper (nao renderiza visualmente mas fica no accessibility tree). */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.admin-users-wrap {
  overflow-x: auto;
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 12px;
  margin-top: 8px;
}
.admin-users-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-users-tbl thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #8fa0c8);
  font-weight: 700;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border, #243160);
  background: var(--surface-alt, #1a2547);
}
.admin-users-tbl tbody td {
  padding: 10px;
  border-bottom: 1px solid rgba(36,49,96,0.5);
  vertical-align: middle;
  color: var(--text, #f1f5f9);
}
.admin-users-tbl tbody tr:hover { background: rgba(63,169,245,0.04); }
.admin-users-tbl tr.is-inactive { opacity: 0.55; }
.admin-users-tbl td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.admin-users-tbl td.dim { color: var(--text-muted, #8fa0c8); font-size: 12px; }
.admin-actions { white-space: nowrap; }
.admin-actions .btn-sm { margin-left: 4px; }

.admin-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.admin-avatar--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6e7a93, #3e4862);
}

.admin-user-form {
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 12px;
  padding: 22px;
  margin-top: 8px;
}
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.admin-fieldset {
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--border, #243160);
  border-radius: 8px;
}
.admin-fieldset legend {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #8fa0c8);
  padding: 0 8px;
}
.admin-form-actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #243160);
  display: flex; gap: 10px;
}

/* ── Upload de avatar (profile + admin user form) ──────────────── */
.avatar-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.avatar-upload-preview {
  flex: 0 0 auto;
  width: 80px; height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border, #243160);
  background: var(--surface-alt, #1a2547);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-upload-preview img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.avatar-upload-ph {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6e7a93, #3e4862);
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.avatar-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.avatar-upload-btn { cursor: pointer; }
.avatar-upload-filename {
  font-size: 11.5px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar-upload-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  cursor: pointer;
}
.avatar-upload-remove input { margin: 0; }

/* ── Perfis de Acesso (list + form) ────────────────────────────── */
.admin-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.admin-profile-card {
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-profile-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.admin-profile-card-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text, #f1f5f9);
}
.admin-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 28px;
  margin: 4px 0;
}
.admin-profile-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(99,102,241,0.14);
  color: #c4b5fd;
  font-size: 11px;
  border: 1px solid rgba(99,102,241,0.25);
}
.admin-profile-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #243160);
}

/* Checklist de cards (form de perfil) — agrupado por area PMBOK */
.cards-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.cards-area {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border, #243160);
  border-radius: 8px;
  padding: 12px;
}
.cards-area-title {
  margin: 0 0 10px 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #8fa0c8);
  font-weight: 700;
  border-bottom: 1px solid var(--border, #243160);
  padding-bottom: 6px;
}
.cards-area-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.card-check:hover {
  background: rgba(63,169,245,0.06);
}
.card-check input {
  margin: 3px 0 0 0;
  width: 16px; height: 16px;
  accent-color: var(--primary, #3fa9f5);
  cursor: pointer;
  flex: 0 0 auto;
}
.card-check-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.card-check-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #f1f5f9);
}
.card-check-desc {
  font-size: 11.5px;
  color: var(--text-muted, #8fa0c8);
  line-height: 1.35;
}
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--primary, #3fa9f5);
  cursor: pointer;
  text-decoration: underline;
}
.btn-link:hover { color: #93c5fd; }
.card-check.is-locked {
  cursor: not-allowed;
  opacity: 0.7;
}
.card-check.is-locked input { cursor: not-allowed; }
.admin-profile-card.is-system {
  border-color: rgba(245,158,11,0.40);
}
.admin-profile-card.is-system .admin-profile-card-head h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}


/* ════════════════════════════════════════════════════════════════════
   Cronograma dos Agentes (Obi-Wan only)
   - Tabela + Gantt horizontal estilo Alocação Diária
   - PiP modal pra editar fases de cada agente
   - Go-Live (fim do Cutover) bem destacado como pin
   ════════════════════════════════════════════════════════════════════ */
.agents-tl-page main { padding-bottom: 80px; }
.agents-tl-title-icon {
  width: 28px; height: 28px;
  background-color: var(--primary);
  vertical-align: -6px;
  margin-right: 6px;
}

.agents-tl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}
.agents-tl-stat {
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agents-tl-stat--highlight {
  border-color: rgba(239,68,68,0.5);
  background: rgba(239,68,68,0.05);
}
.agents-tl-stat-num {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text, #f1f5f9);
}
.agents-tl-stat-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #8fa0c8);
}

.agents-tl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 8px 0 14px;
  font-size: 12px;
  color: var(--text-muted, #8fa0c8);
}
.agents-tl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.agents-tl-legend-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.agents-tl-legend-pin {
  width: 14px; height: 14px;
  display: inline-block;
  background: #ef4444;
  transform: rotate(45deg);
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.25);
}
.agents-tl-legend-baseline {
  display: inline-block;
  width: 22px; height: 8px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.22) 0,
      rgba(255,255,255,0.22) 2px,
      transparent 2px, transparent 5px),
    linear-gradient(90deg, #a78bfa, #93c5fd);
  opacity: 0.7;
  filter: saturate(0.55);
  vertical-align: middle;
}
.agents-tl-legend-pin--inline {
  width: 10px; height: 10px;
  border-width: 1px;
  box-shadow: 0 0 0 1px rgba(239,68,68,0.25);
  vertical-align: -1px;
}

/* ── Gantt principal ─────────────────────────────────────────── */
.agents-tl-gantt-wrap {
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 12px;
  /* Scroll horizontal e vertical sticky:
     - horizontal: largura grande em modo "weeks"/"days" forca scroll-x.
     - vertical: max-height + overflow-y permite sticky-x do header e
       sticky-y da coluna de nomes ao mesmo tempo.
     Sticky-header de pagina inteira nao funciona quando o container tem
     overflow != visible, entao SACRIFICAMOS sticky de pagina aqui em
     prol do sticky local (cabecalho de meses + coluna de nome). */
  overflow: auto;
  max-height: calc(100vh - 240px);
  min-height: 360px;
  position: relative;
}
.agents-tl-gantt {
  font-size: 12.5px;
  /* Em modo "months" cabe na largura disponivel. Os modos "weeks" e
     "days" expandem via `min-width` aplicado no `.view-weeks` /
     `.view-days` no wrap. */
  min-width: 100%;
  width: max-content;
}
/* Modo padrao (meses): tabela cabe na tela inteira sem scroll-x.    */
.agents-tl-gantt-wrap.view-months .agents-tl-gantt { width: 100%; }
.agents-tl-gantt-wrap.view-weeks  .agents-tl-gantt { min-width: 1700px; }
.agents-tl-gantt-wrap.view-days   .agents-tl-gantt { min-width: 3200px; }

.agents-tl-row {
  display: grid;
  /* Coluna de nome ficou um pouco mais estreita pra dar espaco ao Gantt
     com sticky horizontal. */
  grid-template-columns: 260px 1fr;
  border-bottom: 1px solid rgba(36,49,96,0.5);
  cursor: pointer;
  transition: background 0.12s;
}
.agents-tl-row:not(.agents-tl-row--header):hover {
  background: rgba(63,169,245,0.05);
}
.agents-tl-row--header {
  /* Background OPACO obrigatorio — sticky se sobrepoe as rows que rolam
     por baixo, entao nao pode ter transparencia. */
  background: var(--surface-alt, #1a2547);
  cursor: default;
  position: sticky;
  /* Agora sticky relativo ao CONTAINER do gantt (que tem overflow:auto),
     nao a pagina inteira. Cola no topo do scroll-area. */
  top: 0;
  z-index: 25;
  border-bottom: 1px solid rgba(36,49,96,0.95);
  box-shadow: 0 4px 10px -6px rgba(0,0,0,0.55);
}
.agents-tl-cell-name {
  /* Padding mais compacto pra "apertar" verticalmente as linhas. */
  padding: 8px 12px;
  border-right: 1px solid var(--border, #243160);
  display: flex;
  flex-direction: column;
  /* `justify-content: center` alinha verticalmente o titulo+status
     com a BARRA principal da Gantt (que fica em y:10-38px dentro de
     uma cell de 76px). Sem isso, o titulo ficava ancorado no topo e
     a barra "boiava" no meio, parecendo desalinhada. */
  justify-content: center;
  gap: 3px;
  /* Sticky horizontal: a coluna de nome fica fixa quando o usuario
     rola pra direita no Gantt. */
  position: sticky;
  left: 0;
  z-index: 12;
  /* Background opaco pra cobrir o que passa por tras. */
  background: var(--surface, #141d38);
}
.agents-tl-row--header .agents-tl-cell-name {
  /* No header, a coluna de nome precisa ficar ACIMA dos outros stickys
     (intersecao header+left-col). */
  z-index: 30;
  background: var(--surface-alt, #1a2547);
}
.agents-tl-row:not(.agents-tl-row--header):hover .agents-tl-cell-name {
  background: #19224a;
}
.agents-tl-row--header .agents-tl-cell-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #8fa0c8);
  font-weight: 700;
}
.agents-tl-name-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 600;
  color: var(--text, #f1f5f9);
}
.agents-tl-eap {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: var(--text-muted, #8fa0c8);
  background: rgba(255,255,255,0.05);
  padding: 1px 5px;
  border-radius: 3px;
}
.agents-tl-name {
  font-size: 13px;
}
.agents-tl-name-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.agents-tl-status {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Paleta de status do Cronograma de Agentes — definida pelo PM (mai/2026):
   concluido=azul, em-andamento=amarelo, futuro/nao-iniciado=verde,
   atrasado=vermelho, suspenso=lilas, cancelado=preto.
   Fundo translucido + texto vivo pro pill ficar legivel sobre o tema
   escuro sem chamar mais atencao que o nome do agente. */
.agents-tl-status--concluido    { background: rgba(59,130,246,0.22); color: #93c5fd; }
.agents-tl-status--em-andamento { background: rgba(234,179,8,0.22);  color: #fde047; }
.agents-tl-status--nao-iniciado,
.agents-tl-status--futuro       { background: rgba(34,197,94,0.20);  color: #86efac; }
.agents-tl-status--atrasado     { background: rgba(220,38,38,0.22);  color: #fca5a5; }
.agents-tl-status--suspenso     { background: rgba(168,85,247,0.22); color: #d8b4fe; }
.agents-tl-status--cancelado    { background: rgba(15,15,15,0.85);   color: #d1d5db;
                                  border: 1px solid rgba(255,255,255,0.18); }
.agents-tl-golive {
  color: #fb7185;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Barra Gantt — column da direita */
.agents-tl-cell-bar {
  position: relative;
  /* Altura compactada (era 108px) — pedido do PM mai/2026 pra reduzir
     o "espaco morto" vertical do Gantt. Acomoda barra principal + bar
     fina de baseline + datas dmm sem cortar. Distribuicao:
       0-10px   reserva visual topo (date pill no hover)
       10-38px  barra principal (h:28)
       42-52px  baseline (h:10)
       54-74px  GL pin-bub (h:20, rotated)
     Total <=76px, alinhado verticalmente com o titulo do agente. */
  height: 76px;
  background:
    linear-gradient(to right,
      rgba(255,255,255,0.02) 0%,
      rgba(255,255,255,0.02) 100%);
}
.agents-tl-row--header .agents-tl-cell-bar {
  height: 36px;
}
/* Layer de sombreamento — pintado via JS. Fica abaixo de tudo (z:0)
   mas acima do background gradient. */
.agents-tl-shade-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.agents-tl-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: auto;
  cursor: help;
}
.agents-tl-tick-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.agents-tl-tick--week {
  /* Tick de semana — apenas marca de 1px no header, baixa intensidade */
  border-left: 1px solid rgba(148,163,184,0.18);
}
.agents-tl-tick--day {
  border-left: 1px solid rgba(148,163,184,0.08);
}
.agents-tl-tick-lbl--week,
.agents-tl-tick-lbl--day {
  position: absolute;
  top: 18px;
  left: 3px;
  font-size: 9.5px;
  color: var(--text-muted, #8fa0c8);
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
}
.agents-tl-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.06);
}
.agents-tl-tick-lbl {
  position: absolute;
  top: 8px;
  left: 4px;
  font-size: 10px;
  color: var(--text-muted, #8fa0c8);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.agents-tl-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: #ef4444;
  z-index: 4;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 0 12px rgba(239,68,68,0.85),
    0 0 22px rgba(239,68,68,0.45);
  border-radius: 2px;
}
.agents-tl-today-line--row {
  background: rgba(239,68,68,0.45);
  width: 3px;
  margin-left: -1.5px;
  box-shadow: 0 0 6px rgba(239,68,68,0.45);
  z-index: 1;
  border-radius: 1.5px;
}
.agents-tl-today-lbl {
  position: absolute;
  top: 2px;
  left: 6px;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  background: #ef4444;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  white-space: nowrap;
}
.agents-tl-today-date {
  position: absolute;
  top: 19px;
  left: 6px;
  font-size: 10px;
  font-weight: 800;
  color: #fecaca;
  background: rgba(239,68,68,0.18);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.agents-tl-bar {
  position: absolute;
  /* Cell-bar tem 76px (compactada em mai/2026). Distribuicao vertical:
     - 10px topo (espaco pra date pill aparecer no hover)
     - 28px barra principal -> fim em 38px
     - 4px gap visual
     - 10px baseline -> fim em 52px
     - 24px restante pra GL pin-bub (rotated) nao cortar
     Tudo dentro dos 76px, alinhado com o titulo do agente a esquerda. */
  top: 10px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: rgba(0,0,0,0.85);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.18);
  /* IMPORTANTE: nao usar overflow:hidden aqui — isso cortaria as
     pilulas de data que sao filhas e ficam ACIMA da barra no hover.
     O recorte do label longo eh feito no proprio .agents-tl-bar-lbl
     (flex: 1 + min-width: 0 + overflow: hidden no proprio span). */
  overflow: visible;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: filter 0.12s, transform 0.12s;
}
.agents-tl-bar:hover {
  filter: brightness(1.15);
  z-index: 10;
}

/* ── Linha de base (baseline) por fase ─────────────────────────────
   Renderizada como uma barra FINA abaixo da principal, na mesma cor
   da fase mas com tons "nude" (saturacao baixa + opacidade media)
   pra contrastar visualmente com o realizado/replanejado. */
.agents-tl-baseline {
  position: absolute;
  top: 42px;                 /* logo abaixo da barra principal (top:10, h:28) */
  height: 10px;
  border-radius: 3px;
  opacity: 0.55;
  filter: saturate(0.45) brightness(0.95);
  /* Padraozinho hash diagonal sutil pra reforcar que eh "planejado" */
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.10) 0,
    rgba(255,255,255,0.10) 2px,
    transparent 2px,
    transparent 5px
  );
  /* O background-color vem inline (da phase_color()), e o gradient
     fica sobreposto via background-image. */
  background-blend-mode: overlay;
  z-index: 1;                /* atras das barras principais */
  box-shadow: 0 1px 1px rgba(0,0,0,0.18);
  transition: opacity 0.12s, filter 0.12s, height 0.12s;
}
.agents-tl-baseline:hover {
  opacity: 0.78;
  filter: saturate(0.65) brightness(1.05);
  z-index: 9;
  height: 10px;
}
.agents-tl-bar-lbl {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Datas DD/MMM que aparecem em cima da barra no hover, conectadas
   ao inicio/fim por uma linha vertical na cor da fase. As duas
   pilulas sao escalonadas verticalmente (start mais baixo, end mais
   alto) pra nunca se sobreporem mesmo em barras curtas. */
.agents-tl-bar-date {
  position: absolute;
  font-size: 10px;
  font-weight: 800;
  color: #0b1224;
  background: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  border: 1.5px solid var(--phase-color, #94a3b8);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.45),
    0 0 0 1px rgba(0,0,0,0.25);
  letter-spacing: 0.04em;
  z-index: 11;
}
/* Conector vertical fininho da pilula descendo ate a borda da barra */
.agents-tl-bar-date::after {
  content: "";
  position: absolute;
  width: 2px;
  background: var(--phase-color, #94a3b8);
  top: 100%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.agents-tl-bar-date::before {
  content: "";
  position: absolute;
  top: 100%;
  width: 7px;
  height: 7px;
  background: var(--phase-color, #94a3b8);
  border: 1px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
  transform: translateY(-1px);
}
/* Stagger vertical: o canto inferior das duas pilulas sao distantes
   o suficiente pra que mesmo em barras curtas elas nao se sobreponham
   uma na outra (start fica mais baixa, end mais alta). */
.agents-tl-bar-date--start {
  bottom: calc(100% + 2px);
  left: 0;
}
.agents-tl-bar-date--start::after {
  left: 0;
  height: 2px;
}
.agents-tl-bar-date--start::before {
  left: -3px;
  margin-top: 0;
}
/* Fim: pilula mais alta com conector mais comprido caindo ate
   o canto direito da barra. */
.agents-tl-bar-date--end {
  bottom: calc(100% + 24px);
  right: 0;
}
.agents-tl-bar-date--end::after {
  right: 0;
  height: 24px;
}
.agents-tl-bar-date--end::before {
  right: -3px;
  margin-top: 22px;
}
.agents-tl-bar:hover .agents-tl-bar-date,
.agents-tl-bar:focus .agents-tl-bar-date {
  opacity: 1;
  transform: translateY(0);
}

/* ── Datas DD/MMM da linha de base ──────────────────────────────────
   Mesma logica das datas da barra principal, mas com 2 diferencas:
   1) Apontam pra BAIXO (top em vez de bottom) pra nao colidirem com
      as datas da barra principal logo acima.
   2) Visual ligeiramente mais discreto (font 9.5px, opacity hover 0.95)
      ja que baseline eh secundaria — nao deve roubar atencao da
      barra realizada acima.
   Como a .agents-tl-baseline tem altura pequena (8px) e overflow nao
   eh hidden no parent (.agents-tl-cell-bar), as pilulas escapam pra
   fora sem clipping. */
.agents-tl-baseline-date {
  position: absolute;
  font-size: 9.5px;
  font-weight: 700;
  color: #0b1224;
  background: #e7e5e4;          /* tom nude pra casar com a baseline */
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  border: 1.5px solid var(--phase-color, #94a3b8);
  filter: saturate(0.6);        /* deixa a borda nude tambem */
  box-shadow:
    0 4px 10px rgba(0,0,0,0.35),
    0 0 0 1px rgba(0,0,0,0.20);
  letter-spacing: 0.04em;
  z-index: 11;
}
/* Conector vertical SUBINDO da pilula ate a borda inferior da baseline */
.agents-tl-baseline-date::after {
  content: "";
  position: absolute;
  width: 2px;
  background: var(--phase-color, #94a3b8);
  bottom: 100%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.20);
  filter: saturate(0.6);
}
.agents-tl-baseline-date::before {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 7px;
  height: 7px;
  background: var(--phase-color, #94a3b8);
  border: 1px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.20);
  transform: translateY(1px);
  filter: saturate(0.6);
}
/* Stagger: start mais proxima da baseline, end mais distante,
   pra nao se sobreporem em baselines curtas. */
.agents-tl-baseline-date--start {
  top: calc(100% + 2px);
  left: 0;
}
.agents-tl-baseline-date--start::after {
  left: 0;
  height: 2px;
}
.agents-tl-baseline-date--start::before {
  left: -3px;
  margin-bottom: 0;
}
.agents-tl-baseline-date--end {
  top: calc(100% + 16px);
  right: 0;
}
.agents-tl-baseline-date--end::after {
  right: 0;
  height: 16px;
}
.agents-tl-baseline-date--end::before {
  right: -3px;
  margin-bottom: 14px;
}
.agents-tl-baseline:hover .agents-tl-baseline-date,
.agents-tl-baseline:focus .agents-tl-baseline-date {
  opacity: 0.95;
  transform: translateY(0);
}
/* Cutover usa hachura sutil pra realcar o salto pro Go-Live */
.agents-tl-bar--cutover {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.18) 0,
    rgba(255,255,255,0.18) 3px,
    transparent 3px, transparent 6px
  );
}

/* Pin do Go-Live — pulsante e bem visivel */
.agents-tl-golive-pin {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ef4444;
  z-index: 5;
}
/* Data do Go-Live — sempre visivel logo acima do losango */
.agents-tl-golive-pin-date {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: #ef4444;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(239,68,68,0.55);
  z-index: 13;
  pointer-events: none;
}
.agents-tl-golive-pin-bub {
  position: absolute;
  top: 54px;
  left: -10px;
  width: 20px;
  height: 20px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1.5px solid #fff;
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px rgba(239,68,68,0.30);
  animation: agentsGoLivePulse 2s ease-in-out infinite;
}
.agents-tl-golive-pin-bub > * {
  transform: rotate(-45deg);
}
@keyframes agentsGoLivePulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(239,68,68,0.30); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0.10); }
}

/* ── PiP Modal pra editar fases ─────────────────────────────── */
/* =================================================================
   Cronograma dos Agentes — header tools (toggle de view + link de
   calendario de dias nao uteis + botao PPT no lado direito).
   ================================================================= */
.agents-tl-head .contract-head-left { flex: 1; }
.agents-tl-head-right {
  /* Forca alinhamento a direita absoluto + alinhamento vertical com o
     titulo (pedido: "PPT do lado direito e nao esquerdo"). */
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}
.agents-tl-view-toggle {
  display: inline-flex;
  background: rgba(15,23,42,0.45);
  border: 1px solid var(--border, #243160);
  border-radius: 8px;
  overflow: hidden;
}
.agents-tl-view-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted, #8fa0c8);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  transition: background .12s, color .12s;
  border-right: 1px solid rgba(36,49,96,0.6);
}
.agents-tl-view-btn:last-child { border-right: 0; }
.agents-tl-view-btn:hover {
  background: rgba(96,165,250,0.06);
  color: var(--text, #f1f5f9);
}
.agents-tl-view-btn.is-active {
  background: rgba(96,165,250,0.18);
  color: #93c5fd;
}

/* Link "card-style" no topo apontando pro Calendario de Dias Nao Uteis */
.agents-tl-calendar-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 14px;
  background: rgba(96,165,250,0.07);
  border: 1px solid rgba(96,165,250,0.25);
  border-radius: 10px;
  color: var(--text, #f1f5f9);
  text-decoration: none;
  font-size: 12.5px;
  transition: background .12s, transform .12s;
}
.agents-tl-calendar-link:hover {
  background: rgba(96,165,250,0.14);
  transform: translateY(-1px);
}
.agents-tl-calendar-link .icon {
  width: 22px; height: 22px;
  flex: 0 0 auto;
}
.agents-tl-calendar-link-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.agents-tl-calendar-link-text strong { color: var(--text, #f1f5f9); }
.agents-tl-calendar-link-text small {
  color: var(--text-muted, #8fa0c8);
  font-size: 10.5px;
}

.agent-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agent-modal[hidden] { display: none; }
.agent-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}
.agent-modal-card {
  position: relative;
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 14px;
  width: min(720px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
/* Modal HORIZONTALIZADO (variante usada no Cronograma dos Agentes):
   - Largo o suficiente pra 6 colunas de fase lado a lado COM datas
     DD/MM/AAAA inteiras visiveis (~170px por coluna minimo)
   - Em telas estreitas, vira scroll horizontal interno da grid (o
     usuario aprovou o scroll, entao a fallback ja eh aceitavel) */
.agent-modal--horiz .agent-modal-card {
  width: min(1480px, 98vw);
}
.agent-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #243160);
  background: var(--surface-alt, #1a2547);
  position: sticky;
  top: 0;
  z-index: 2;
}
.agent-modal-head h2 {
  margin: 0;
  font-size: 18px;
  color: var(--text, #f1f5f9);
}
.agent-modal-close {
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--text-muted, #8fa0c8);
  cursor: pointer;
  padding: 0 6px;
}
.agent-modal-close:hover { color: var(--text, #f1f5f9); }
.agent-modal-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.agent-modal-row--meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.agent-modal-row--meta .field { flex: 0 0 auto; min-width: 180px; }

.agent-modal-phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

/* ── Grid horizontal: 1 coluna de labels + 6 colunas de fase ─────
   Larguras escolhidas pra caber DD/MM/AAAA inteiro nos inputs
   (~170px) sem cortar como "24/02/20". Em telas estreitas mantem
   scroll horizontal interno (forcamos via min-width). */
.agent-modal-phases-grid {
  display: grid;
  grid-template-columns: 130px repeat(6, minmax(180px, 1fr));
  gap: 8px;
  align-items: stretch;
  overflow-x: auto;
  min-width: 100%;
  /* Forca largura minima pra todas as 7 colunas caberem com folga;
     dispara scroll horizontal interno em laptops menores. */
  scrollbar-color: rgba(96,165,250,0.45) transparent;
  scrollbar-width: thin;
}
.agent-modal-phases-grid > * { min-width: 0; }
.agent-modal-phases-grid::-webkit-scrollbar { height: 8px; }
.agent-modal-phases-grid::-webkit-scrollbar-thumb {
  background: rgba(96,165,250,0.4);
  border-radius: 4px;
}
.agent-modal-phase-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(36,49,96,0.55);
  position: relative;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
/* Mostrar a cor da fase no fundo SO quando o usuario preenche datas
   (cumpre pedido "conforme eu vou colocando as datas as cores aparecem
   corretamente"). */
.agent-modal-phase-col.has-dates {
  background: color-mix(in srgb, var(--phase-color, #64748b) 12%, transparent);
  border-color: color-mix(in srgb, var(--phase-color, #64748b) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--phase-color, #64748b) 35%, transparent);
}
.agent-modal-phase-col.has-baseline:not(.has-dates) {
  background: color-mix(in srgb, var(--phase-color, #64748b) 6%, transparent);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--phase-color, #64748b) 40%, transparent);
}
.agent-modal-phase-col.is-golive {
  border-width: 1px;
  outline: 1px solid rgba(239,68,68,0.45);
}
.agent-modal-phase-col--head {
  background: transparent;
  border: 0;
}
.agent-modal-phase-col-spacer { height: 38px; }  /* alinha com head das colunas */
.agent-modal-phase-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #f1f5f9);
  height: 38px;
  padding: 0 2px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.agent-modal-phase-col-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
}
.agent-modal-phase-col-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px 2px;
  border-radius: 6px;
}
.agent-modal-phase-col-pair--baseline {
  background: rgba(255,255,255,0.03);
  border-top: 1px dashed rgba(148,163,184,0.18);
}
.agent-modal-phase-col-pair label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
  color: var(--text-muted, #8fa0c8);
  min-width: 0;
}
.agent-modal-phase-col-pair input[type="date"] {
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  color: var(--text, #f1f5f9);
  border-radius: 5px;
  /* Padding suficiente pra spinner do date picker nao engolir o
     ultimo digito do ano (DD/MM/AAAA tem 10 chars). */
  padding: 6px 6px;
  font-family: inherit;
  font-size: 12.5px;
  width: 100%;
  /* min-width 0 dentro do grid, mas as colunas pai garantem >=84px
     livres pra cada input (180px/2 - gap). */
  min-width: 0;
  box-sizing: border-box;
}
/* No Chrome/Safari, o ::-webkit-calendar-picker-indicator sobreescreve
   parte do texto se nao deixarmos espaco. Diminuimos um pouco a
   opacidade do icone pra ele "sumir" visualmente mas continuar
   clicavel — assim a data inteira aparece. */
.agent-modal-phase-col-pair input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  filter: invert(0.75);
}
.agent-modal-row-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #93c5fd;
  text-align: right;
}
.agent-modal-row-label--baseline {
  color: #c4b5fd;
  border-top: 1px dashed rgba(148,163,184,0.18);
}
.agent-modal-phase {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border, #243160);
  border-radius: 8px;
  padding: 12px;
}
.agent-modal-phase.is-golive {
  border-color: rgba(239,68,68,0.55);
  background: rgba(239,68,68,0.05);
  grid-column: span 2;
}
@media (max-width: 720px) {
  .agent-modal-phase.is-golive { grid-column: span 1; }
}
.agent-modal-phase-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text, #f1f5f9);
}
.agent-modal-phase-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.agent-modal-golive-pill {
  margin-left: auto;
  font-size: 11px;
  background: #ef4444;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.agent-modal-phase-dates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agent-modal-phase-dates-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 6px 8px;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 8px;
  background: rgba(15,23,42,.35);
}
.agent-modal-phase-dates-group--baseline {
  background: rgba(15,23,42,.22);
  border-style: dashed;
  opacity: 0.92;
}
.agent-modal-phase-dates-tag {
  flex: 0 0 100%;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #93c5fd;
  margin-bottom: -2px;
}
.agent-modal-phase-dates-tag--baseline {
  color: #c4b5fd;
}
.agent-modal-phase-dates label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted, #8fa0c8);
  flex: 1;
  min-width: 110px;
}
.agent-modal-phase-dates input[type="date"] {
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  color: var(--text, #f1f5f9);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
}

.agent-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--border, #243160);
}

/* =================================================================
   Calendario de Dias Nao Uteis — tela CRUD
   ================================================================= */
.calendar-off-page .contract-head { align-items: flex-start; }
.cal-off-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 14px 0 18px;
}
.cal-off-kpi {
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 110px;
  text-align: center;
}
.cal-off-kpi-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #8fa0c8);
  font-weight: 600;
}
.cal-off-kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text, #f1f5f9);
  line-height: 1.1;
  margin-top: 2px;
}
.cal-off-kpi--feriado     .cal-off-kpi-value { color: #fca5a5; }
.cal-off-kpi--emenda      .cal-off-kpi-value { color: #fde047; }
.cal-off-kpi--facultativo .cal-off-kpi-value { color: #d8b4fe; }
.cal-off-kpi--recesso     .cal-off-kpi-value { color: #fdba74; }
.cal-off-year-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted, #8fa0c8);
  margin-left: auto;
}
.cal-off-year-form input[type="number"] {
  width: 80px;
  background: rgba(15,23,42,0.5);
  border: 1px solid var(--border, #243160);
  color: var(--text, #f1f5f9);
  border-radius: 6px;
  padding: 4px 6px;
  font: inherit;
}
.cal-off-add-form {
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 12px;
  padding: 4px 14px;
  margin-bottom: 16px;
}
.cal-off-add-form summary {
  padding: 10px 0;
  cursor: pointer;
  font-weight: 700;
  color: var(--text, #f1f5f9);
}
.cal-off-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-bottom: 12px;
}
.cal-off-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted, #8fa0c8);
}
.cal-off-field--wide { grid-column: span 2; }
.cal-off-field input,
.cal-off-field select {
  background: rgba(15,23,42,0.55);
  border: 1px solid var(--border, #243160);
  color: var(--text, #f1f5f9);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
}
.cal-off-table-wrap {
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 12px;
  overflow: hidden;
}
.cal-off-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cal-off-table thead th {
  background: var(--surface-alt, #1a2547);
  color: var(--text-muted, #8fa0c8);
  text-align: left;
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #243160);
}
.cal-off-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(36,49,96,0.5);
  color: var(--text, #f1f5f9);
  vertical-align: top;
}
.cal-off-row:hover {
  background: rgba(63,169,245,0.05);
}
.cal-off-row--feriado     { border-left: 1px solid rgba(239,68,68,0.55); }
.cal-off-row--emenda      { border-left: 1px solid rgba(251,191,36,0.55); }
.cal-off-row--facultativo { border-left: 1px solid rgba(168,85,247,0.55); }
.cal-off-row--recesso     { border-left: 1px solid rgba(253,186,116,0.55); }
.cal-off-date strong { font-size: 13px; }
.cal-off-date small { color: var(--text-muted, #8fa0c8); }
.cal-off-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cal-off-tag--feriado     { background: rgba(239,68,68,0.18); color: #fca5a5; }
.cal-off-tag--emenda      { background: rgba(251,191,36,0.18); color: #fde047; }
.cal-off-tag--facultativo { background: rgba(168,85,247,0.18); color: #d8b4fe; }
.cal-off-tag--recesso     { background: rgba(253,186,116,0.18); color: #fdba74; }
.cal-off-scope {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  background: rgba(96,165,250,0.08);
  color: #93c5fd;
}
.cal-off-notes { color: var(--text-muted, #8fa0c8); font-size: 12px; }
.cal-off-actions { white-space: nowrap; }
.cal-off-edit-row td {
  background: rgba(15,23,42,0.6);
  border-top: 1px dashed rgba(96,165,250,0.25);
  border-bottom: 2px solid rgba(96,165,250,0.25);
}
.cal-off-edit-form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: flex-end;
}
.cal-off-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-muted, #8fa0c8);
}

/* =================================================================
   Widget flutuante do assistente IA (Obi-Wan / Anakin)
   - .kb-assist-fab    : botao redondo do robozinho (bottom-right)
   - .kb-assist-bubble : balao "Posso te ajudar?" no hover
   - .kb-assist-panel  : painel PiP de chat (bottom-LEFT)
   ================================================================= */
.kb-assist {
  position: fixed;
  inset: auto;
  z-index: 99998;
  pointer-events: none;  /* filhos reativam ponteiro individualmente */
}

/* Robozinho fixo no canto inferior-direito */
.kb-assist-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg,
    var(--primary, #3FA9F5) 0%,
    var(--primary-soft, #7FC4FF) 100%);
  color: #0b1224;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 12px 28px rgba(63, 169, 245, 0.45),
    0 0 0 2px rgba(255, 255, 255, 0.10) inset;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  pointer-events: auto;
  z-index: 99999;
}
.kb-assist-fab:hover { transform: translateY(-3px) scale(1.05); }
.kb-assist-fab:active { transform: translateY(-1px) scale(1.02); }
/* Cursor de "agarrar" pra sinalizar que o FAB eh arrastavel.
   touch-action:none evita que o navegador interprete o toque como
   pan/zoom no mobile durante o drag. */
.kb-assist-fab { cursor: grab; touch-action: none; }
.kb-assist-fab--dragging {
  cursor: grabbing !important;
  /* Desliga transitions/transforms durante o drag pra o movimento
     acompanhar o cursor 1:1 sem easing visual. */
  transition: none !important;
  transform: none !important;
}
.kb-assist-fab--dragging:hover,
.kb-assist-fab--dragging:active { transform: none !important; }
.kb-assist-fab--dragging .kb-assist-fab-pulse {
  /* Pulso some durante o drag pra a animacao nao 'puxar' o widget. */
  animation: none !important;
  opacity: 0 !important;
}
/* Quando o painel abre, o FAB some COMPLETAMENTE (display:none com
   !important pra blindar de qualquer override). O painel toma o lugar
   dele visualmente — o close fica no X do header / ESC / clique fora. */
.kb-assist-fab.is-open {
  display: none !important;
}
.kb-assist-fab.is-open .kb-assist-fab-pulse { display: none !important; }
.kb-assist-fab-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--primary, #3FA9F5);
  opacity: 0.35;
  z-index: -1;
  animation: kbAssistPulse 2.4s ease-in-out infinite;
}
@keyframes kbAssistPulse {
  0%   { transform: scale(0.92); opacity: 0.35; }
  50%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(0.92); opacity: 0; }
}

/* Balão "Posso te ajudar?" — flutua à esquerda do robô no hover */
.kb-assist-bubble {
  position: fixed;
  right: 96px;
  bottom: 36px;
  background: #fff;
  color: #0b1224;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 14px 10px;
  border-radius: 14px;
  border: 1.5px solid var(--primary, #3FA9F5);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  animation: kbAssistBubbleIn 0.22s ease-out;
  z-index: 99998;
  white-space: nowrap;
  cursor: pointer;
}
.kb-assist-bubble::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid #fff;
  filter: drop-shadow(1.5px 0 0 var(--primary, #3FA9F5));
}
@keyframes kbAssistBubbleIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Painel PiP de chat — bottom-RIGHT (substitui visualmente o FAB). */
.kb-assist-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 380px;
  max-width: calc(100vw - 44px);
  height: 560px;
  max-height: calc(100vh - 80px);
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 16px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  animation: kbAssistPanelIn 0.22s ease-out;
  z-index: 99998;
}
@keyframes kbAssistPanelIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.kb-assist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg,
    var(--surface-alt, #1a2547) 0%,
    rgba(63, 169, 245, 0.12) 100%);
  border-bottom: 1px solid var(--border, #243160);
}
.kb-assist-head-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.kb-assist-head-id strong {
  display: block;
  color: var(--text, #f1f5f9);
  font-size: 14px;
  line-height: 1.15;
}
.kb-assist-sub {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted, #8fa0c8);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.kb-assist-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    var(--primary, #3FA9F5) 0%,
    var(--primary-soft, #7FC4FF) 100%);
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10) inset;
}
.kb-assist-avatar::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 35% 45%, #fff 0 2.5px, transparent 3px),
    radial-gradient(circle at 65% 45%, #fff 0 2.5px, transparent 3px),
    rgba(0, 0, 0, 0.35);
}
.kb-assist-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.kb-assist-iconbtn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text, #f1f5f9);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.kb-assist-iconbtn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.20);
}
.kb-assist-iconbtn:active { transform: scale(0.93); }
.kb-assist-iconbtn:focus-visible {
  outline: 2px solid var(--primary, #3FA9F5);
  outline-offset: 1px;
}
.kb-assist-close:hover {
  background: rgba(248, 113, 113, 0.22);
  border-color: rgba(248, 113, 113, 0.55);
  color: #fecaca;
}

.kb-assist-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}
.kb-assist-msgs::-webkit-scrollbar { width: 10px; }
.kb-assist-msgs::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}
.kb-assist-msgs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.kb-assist-msgs::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
  background-clip: content-box;
}

.kb-assist-msg {
  max-width: 86%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  word-wrap: break-word;
}
.kb-assist-msg--user {
  align-self: flex-end;
  background: var(--primary, #3FA9F5);
  color: #0b1224;
  border-bottom-right-radius: 4px;
  font-weight: 600;
}
.kb-assist-msg--assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #f1f5f9);
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.kb-assist-msg--welcome {
  background: linear-gradient(135deg,
    rgba(63, 169, 245, 0.16) 0%,
    rgba(63, 169, 245, 0.06) 100%);
  border-color: rgba(63, 169, 245, 0.35);
}
.kb-assist-msg--toast {
  align-self: center;
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: #86efac;
  font-size: 11.5px;
  padding: 4px 10px;
  font-weight: 600;
  animation: kbAssistToastIn 0.18s ease-out;
}
@keyframes kbAssistToastIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kb-assist-msg ul {
  margin: 6px 0;
  padding-left: 18px;
}
.kb-assist-msg li { margin: 2px 0; }
.kb-assist-msg strong { color: var(--primary-soft, #7FC4FF); }

.kb-assist-cite {
  display: inline-block;
  font-size: 11px;
  color: var(--primary-soft, #7FC4FF);
  background: rgba(63, 169, 245, 0.10);
  padding: 0 5px;
  border-radius: 3px;
  margin: 0 2px;
  text-decoration: none;
  font-weight: 700;
}
.kb-assist-cite:hover {
  background: rgba(63, 169, 245, 0.22);
  text-decoration: none;
}
/* Fonte do PORTAL (cards, dados estruturais) — verde pra distinguir
   visualmente das fontes de artigos da KB (azul). */
.kb-assist-cite--site {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
}
.kb-assist-cite--site:hover {
  background: rgba(34, 197, 94, 0.26);
  color: #bbf7d0;
}

/* Fontes: colapsadas por default em <details>. O summary vira um
   chip-botao discreto; ao clicar, expande a lista. (jun/2026) */
.kb-assist-citations {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.10);
  font-size: 10.5px;
  color: var(--text-muted, #8fa0c8);
  line-height: 1.6;
}
.kb-assist-citations-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #8fa0c8);
  user-select: none;
  list-style: none;            /* tira o triangulo nativo (Firefox) */
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.kb-assist-citations-summary::-webkit-details-marker { display: none; }
.kb-assist-citations-summary::marker { content: ''; }
.kb-assist-citations-summary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text, #e6edf7);
}
.kb-assist-citations-icon {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transition: transform 150ms ease;
}
.kb-assist-citations[open] .kb-assist-citations-icon {
  transform: rotate(90deg);
}
.kb-assist-citations-label { letter-spacing: 0.02em; }
.kb-assist-citations-count {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: inherit;
  font-weight: 700;
}
.kb-assist-citations-list {
  margin-top: 8px;
  display: block;
}
.kb-assist-citations-list .kb-assist-cite { font-size: 10.5px; }

/* "Pensando…" - 3 bolinhas pulsantes */
.kb-assist-msg--thinking {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
}
.kb-assist-dot {
  width: 6px;
  height: 6px;
  background: var(--primary-soft, #7FC4FF);
  border-radius: 50%;
  animation: kbAssistDot 1.2s ease-in-out infinite;
}
.kb-assist-dot:nth-child(2) { animation-delay: 0.15s; }
.kb-assist-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes kbAssistDot {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40%           { opacity: 1;    transform: scale(1.15); }
}

.kb-assist-form {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border, #243160);
  background: rgba(0, 0, 0, 0.18);
}
.kb-assist-form input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border, #243160);
  color: var(--text, #f1f5f9);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.kb-assist-form input:focus {
  border-color: var(--primary, #3FA9F5);
  background: rgba(255, 255, 255, 0.10);
}
.kb-assist-form input:disabled {
  opacity: 0.55;
}
.kb-assist-send {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: var(--primary, #3FA9F5);
  color: #0b1224;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, background 0.12s;
}
.kb-assist-send:hover {
  background: var(--primary-soft, #7FC4FF);
  transform: translateY(-1px);
}

/* Botao de microfone — mesmo formato do send, mas com borda e estado
   "ouvindo" (vermelho pulsando). Hidden por padrao; o JS revela se o
   browser suportar SpeechRecognition. */
.kb-assist-mic {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border, #243160);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #f1f5f9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
  flex-shrink: 0;
}
.kb-assist-mic[hidden] { display: none !important; }
.kb-assist-mic:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--primary, #3FA9F5);
  color: var(--primary-soft, #7FC4FF);
}
.kb-assist-mic.is-listening {
  background: #ef4444;
  border-color: #f87171;
  color: #fff;
  animation: kbAssistMicPulse 1.0s ease-in-out infinite;
}
.kb-assist-mic.is-listening .kb-assist-mic-icon-idle { display: none; }
.kb-assist-mic.is-listening .kb-assist-mic-icon-rec { display: inline-block !important; }
@keyframes kbAssistMicPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65); }
  50%     { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* Mensagem do usuario quando veio por voz: tamanho compacto, com icone
   na frente e label "(mensagem por voz)". O texto real fica oculto. */
.kb-assist-msg--voice {
  font-style: italic;
  opacity: 0.92;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kb-assist-msg--voice::before {
  content: "🎤";
  font-style: normal;
  font-size: 14px;
}

.kb-assist-footnote {
  padding: 6px 14px 10px;
  font-size: 10.5px;
  color: var(--text-muted, #8fa0c8);
  background: rgba(0, 0, 0, 0.15);
  text-align: center;
  line-height: 1.35;
}

/* Mobile: painel ocupa quase toda a tela */
@media (max-width: 520px) {
  .kb-assist-panel {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    height: min(80vh, 600px);
  }
  .kb-assist-bubble { display: none; }
  .kb-assist-fab {
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Admin · Sessões & Acessos (/admin/sessions)
   ═══════════════════════════════════════════════════════════════════════ */
.adm-sess-select, .adm-sess-input {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  font-family: inherit;
}
.adm-sess-input { min-width: 220px; }
.adm-sess-select:focus, .adm-sess-input:focus {
  outline: 2px solid rgba(96,165,250,.5);
  border-color: rgba(96,165,250,.5);
}

/* KPIs */
.adm-sess-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 22px;
}
.adm-sess-kpi {
  background: linear-gradient(180deg, rgba(30,41,59,.6), rgba(15,23,42,.4));
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
}
.adm-sess-kpi--green { border-left: 1px solid #34d399; }
.adm-sess-kpi--purple { border-left: 1px solid #a78bfa; }
.adm-sess-kpi-label {
  color: #94a3b8;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.adm-sess-kpi-value {
  color: #f8fafc;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.adm-sess-kpi-foot {
  color: #64748b;
  font-size: 12px;
}

/* Charts grid */
.adm-sess-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 22px;
}
.adm-sess-chart-card {
  background: linear-gradient(180deg, rgba(30,41,59,.55), rgba(15,23,42,.35));
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  padding: 14px 16px 18px;
}
.adm-sess-chart-card--wide { grid-column: 1 / -1; }
.adm-sess-chart-card h3 {
  margin: 0 0 10px;
  color: #e2e8f0;
  font-size: 14.5px;
  font-weight: 600;
}
.adm-sess-chart-wrap {
  position: relative;
  height: 260px;
  width: 100%;
}
.adm-sess-chart-card--wide .adm-sess-chart-wrap { height: 320px; }

/* Overlay "Sem dados" — sobreposto ao canvas pra deixar claro quando o
   grafico esta vazio. Nao bloqueia tooltip do Chart.js (pointer-events
   none) e some assim que aparece o primeiro datapoint. */
.adm-sess-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg,
    rgba(15,23,42,.55), rgba(15,23,42,.35));
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.45;
  pointer-events: none;
  letter-spacing: .01em;
}
.adm-sess-empty[hidden] { display: none; }

/* Tabela */
.adm-sess-table-wrap {
  background: linear-gradient(180deg, rgba(30,41,59,.5), rgba(15,23,42,.3));
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  padding: 14px 16px 16px;
}
.adm-sess-table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.adm-sess-tbl-scroll {
  max-height: 540px;
  overflow: auto;
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 10px;
}
.adm-sess-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.adm-sess-tbl thead th {
  position: sticky;
  top: 0;
  background: #0f172a;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11.5px;
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148,163,184,.18);
  z-index: 2;
}
.adm-sess-tbl tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(148,163,184,.08);
  color: #e2e8f0;
  vertical-align: middle;
}
.adm-sess-tbl tbody tr:hover { background: rgba(96,165,250,.04); }

.adm-sess-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.adm-sess-pill--active {
  background: rgba(34,197,94,.16);
  color: #86efac;
  border: 1px solid rgba(34,197,94,.32);
}
.adm-sess-pill--closed {
  background: rgba(148,163,184,.12);
  color: #cbd5e1;
  border: 1px solid rgba(148,163,184,.24);
}
.adm-sess-pill--abandoned {
  background: rgba(251,191,36,.12);
  color: #fcd34d;
  border: 1px solid rgba(251,191,36,.24);
}
.adm-sess-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(96,165,250,.14);
  color: #93c5fd;
  font-size: 11px;
  font-weight: 600;
}
.adm-sess-tag--legacy {
  background: rgba(251,113,133,.14);
  color: #fda4af;
}
.adm-sess-code {
  background: rgba(15,23,42,.6);
  color: #cbd5e1;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 980px) {
  .adm-sess-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-sess-charts { grid-template-columns: 1fr; }
  .adm-sess-chart-card--wide { grid-column: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Admin · KB Enhance (/admin/kb-enhance)
   ═══════════════════════════════════════════════════════════════════════ */
.kbe-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin: 18px 0 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(30,41,59,.5), rgba(15,23,42,.3));
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 12px;
}
.kbe-progress-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kbe-progress-bar {
  width: 100%;
  height: 10px;
  background: rgba(15,23,42,.6);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.12);
}
.kbe-progress-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #34d399, #60a5fa);
  transition: transform 0.3s ease-out;
  will-change: transform;
}
.kbe-progress-label {
  font-size: 12.5px;
  color: #94a3b8;
}
.kbe-control-btns {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-xs {
  font-size: 11.5px !important;
  padding: 4px 10px !important;
  height: auto !important;
  min-height: 0 !important;
}

.kbe-tbl tbody td { vertical-align: middle; }
.kbe-row-state {
  font-size: 11.5px;
  font-weight: 600;
}

/* Modal de diff */
.kbe-diff-modal[hidden] { display: none !important; }
.kbe-diff-modal {
  position: fixed; inset: 0;
  z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.kbe-diff-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.66);
  backdrop-filter: blur(3px);
}
.kbe-diff-card {
  position: relative;
  width: min(1280px, 96vw);
  max-height: 92vh;
  background: #0f172a;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.kbe-diff-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(148,163,184,.18);
  background: rgba(30,41,59,.4);
}
.kbe-diff-head h3 { margin: 0; font-size: 16px; color: #e2e8f0; }
.kbe-diff-close {
  background: transparent;
  color: #cbd5e1;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 8px;
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.kbe-diff-close:hover {
  background: rgba(239,68,68,.18);
  color: #fca5a5;
  border-color: rgba(239,68,68,.32);
}
.kbe-diff-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(148,163,184,.18);
  flex: 1;
  overflow: hidden;
}
.kbe-diff-col {
  background: #0f172a;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.kbe-diff-col--current { background: rgba(34,197,94,.04); }
.kbe-diff-col-head {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  display: flex; gap: 8px; align-items: baseline;
  background: rgba(15,23,42,.5);
}
.kbe-diff-col-head strong { color: #e2e8f0; font-size: 13px; }
.kbe-diff-content {
  padding: 14px 16px;
  overflow: auto;
  flex: 1;
}
.kbe-diff-title {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(148,163,184,.18);
}
.kbe-diff-pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: #cbd5e1;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}

@media (max-width: 960px) {
  .kbe-controls { grid-template-columns: 1fr; }
  .kbe-diff-body { grid-template-columns: 1fr; }
}

/* Toggle "Polir com IA" no formulario de propor artigo */
.propose-llm-toggle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(96,165,250,.28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(96,165,250,.06), rgba(34,197,94,.04));
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.propose-llm-toggle:hover {
  background: linear-gradient(180deg, rgba(96,165,250,.10), rgba(34,197,94,.06));
  border-color: rgba(96,165,250,.45);
}
.propose-llm-toggle input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: #34d399;
  cursor: pointer;
}
.propose-llm-toggle-body strong {
  color: #f8fafc;
  font-size: 13.5px;
}

.kbe-warn {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: rgba(251,191,36,.10);
  border: 1px solid rgba(251,191,36,.32);
  border-radius: 10px;
  color: #fcd34d;
  font-size: 13px;
  line-height: 1.55;
}
.kbe-warn strong { color: #fde68a; }
.kbe-warn code {
  background: rgba(15,23,42,.6);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #cbd5e1;
}
.kbe-warn a { color: #fde68a; text-decoration: underline; }
.kbe-warn a:hover { color: #fef3c7; }

/* ═════════════════════════════════════════════════════════════════════
   Gerador de Atas (atas-page) — modulo "especial" gated por username.
   Calendario, lista de reunioes do dia, formulario de upload manual.
   ═════════════════════════════════════════════════════════════════════ */
.atas-page code {
  background: rgba(15,23,42,.6);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #cbd5e1;
}

/* ── Calendario ────────────────────────────────────────────────────── */
.atas-cal-wrap {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px 20px;
}
.atas-cal-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.atas-cal-controls h2 {
  font-size: 18px; font-weight: 700; color: var(--text);
}
.atas-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.atas-cal-dow {
  text-align: center; padding: 6px 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.atas-cal-cell {
  display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start;
  padding: 8px 10px;
  min-height: 64px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  transition: transform .12s, border-color .12s, background .12s;
  cursor: pointer;
}
.atas-cal-cell:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  background: rgba(37,99,235,.06);
}
.atas-cal-cell--outside {
  opacity: .35; cursor: default; pointer-events: none;
}
.atas-cal-cell--today {
  border-color: var(--primary); border-width: 2px;
  background: rgba(37,99,235,.10);
}
.atas-cal-cell--active {
  background: rgba(34,197,94,.06);
  border-color: rgba(34,197,94,.45);
}
.atas-cal-num {
  font-size: 14px; font-weight: 700; color: var(--text);
}
.atas-cal-meta {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .2px;
  color: var(--text-muted);
}
.atas-cal-legend {
  margin-top: 14px;
  display: flex; gap: 18px;
  font-size: 12px; color: var(--text-muted);
}
.atas-cal-legend span {
  display: inline-flex; align-items: center; gap: 6px;
}
.atas-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.atas-dot--has   { background: #94a3b8; }
.atas-dot--gen   { background: #22c55e; }
.atas-dot--today { background: #2563eb; }

/* ── Tela do dia ──────────────────────────────────────────────────── */
.atas-day-summary {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin: 16px 0;
}
.atas-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}
.atas-kpi-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted);
}
.atas-kpi-value {
  margin-top: 4px;
  font-size: 22px; font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.atas-kpi--ok  .atas-kpi-value { color: #22c55e; }
.atas-kpi--gen .atas-kpi-value { color: #2563eb; }
.atas-kpi--pub .atas-kpi-value { color: #a855f7; }

/* ── Tabela ───────────────────────────────────────────────────────── */
.atas-day-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.atas-day-table {
  width: 100%; border-collapse: collapse;
}
.atas-day-table thead th {
  background: var(--surface-alt);
  padding: 10px 12px;
  text-align: left;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.atas-day-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 13px;
}
.atas-day-table tbody tr:last-child td { border-bottom: none; }
.atas-row--gen { background: rgba(34,197,94,.04); }

.atas-time { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.atas-title-cell strong {
  display: block; color: var(--text); font-size: 14px;
  font-weight: 600; margin-bottom: 4px;
}
.atas-meta {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
}
.atas-meta a { color: var(--primary); text-decoration: none; }
.atas-meta a:hover { text-decoration: underline; }
/* Tag genérica (legado) — substituida por .atas-src-badge--* abaixo. */
.atas-src-tag {
  display: inline-block; padding: 1px 6px;
  background: rgba(168,85,247,.15); color: #d8b4fe;
  border-radius: 4px; font-size: 10.5px; font-weight: 600;
}
/* Badges de origem da reuniao — coloridas por procedencia pra facilitar
   identificacao visual rapida na lista. Cada origem tem cor propria:
   Granola=roxo/lavanda (cor do brand), Calendar=azul Google, Manual=
   cinza neutro, Transcript=verde (sinal de "pronto pra gerar ata"). */
.atas-src-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 10px;
  font-size: 10.5px; font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.atas-src-badge--granola {
  background: rgba(168, 85, 247, .18); color: #e9d5ff;
  border-color: rgba(168, 85, 247, .45);
}
.atas-src-badge--gcal {
  background: rgba(66, 133, 244, .18); color: #c8dcfb;
  border-color: rgba(66, 133, 244, .45);
}
.atas-src-badge--manual {
  background: rgba(160, 160, 160, .14); color: #d8d8d8;
  border-color: rgba(160, 160, 160, .35);
}
.atas-src-badge--transcript {
  background: rgba(46, 204, 113, .16); color: #b8edcc;
  border-color: rgba(46, 204, 113, .42);
}
.atas-flag { text-align: center; }
.atas-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-weight: 700;
  text-decoration: none;
}
.atas-check--ok  { background: rgba(34,197,94,.18); color: #22c55e; }
.atas-check--gen { background: rgba(37,99,235,.18); color: #60a5fa; }
.atas-check--pub { background: rgba(168,85,247,.18); color: #d8b4fe; }
.atas-check--no  { color: var(--text-muted); }
.atas-toggle-btn {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-alt);
  color: var(--text-muted); cursor: pointer;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.atas-toggle-btn:hover { border-color: var(--primary); color: var(--text); }
.atas-toggle-btn.is-on {
  background: rgba(34,197,94,.18); color: #22c55e;
  border-color: rgba(34,197,94,.45);
}
.atas-actions {
  white-space: nowrap;
}
.atas-actions .btn-sm {
  padding: 4px 8px; font-size: 12px;
  margin-right: 2px;
}
/* Placeholder visual enquanto helper local cria o Google Doc */
.atas-doc-pending {
  background: rgba(234, 179, 8, .08);
  border: 1px dashed rgba(234, 179, 8, .45) !important;
  color: rgba(234, 179, 8, .9) !important;
  cursor: help;
}
/* Quando o helper local nao tem Google OAuth configurado, o spinner
   "Criando Doc..." nunca termina. Apos 5min sem URL, trocamos por esse
   badge neutro pra indicar que o markdown esta pronto e o user pode
   usar os botoes .md / PDF ao lado. */
.atas-doc-skipped {
  background: rgba(132, 204, 22, .08);
  border: 1px dashed rgba(132, 204, 22, .42) !important;
  color: rgba(180, 230, 130, .9) !important;
  cursor: help;
}

/* ── Linha de detalhe ──────────────────────────────────────────────── */
.atas-detail-row td { background: rgba(15,23,42,.4); }
.atas-detail-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 8px 0;
}
.atas-detail-col h4 {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.atas-detail-col textarea {
  width: 100%; padding: 8px 10px;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.5; resize: vertical;
}
.atas-md-preview {
  max-height: 280px; overflow: auto;
  padding: 10px 12px;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text);
  font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; word-wrap: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Batch / Empty / Form ─────────────────────────────────────────── */
.atas-batch-actions {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; font-size: 13px;
}
.atas-empty {
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: 12px; padding: 20px;
  color: var(--text-muted); text-align: center;
}
.atas-add-form {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 20px;
}
.atas-add-form summary {
  font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; padding: 6px 0;
}
.atas-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
  margin-top: 12px;
}
.atas-field { display: flex; flex-direction: column; gap: 4px; }
.atas-field--wide { grid-column: 1 / -1; }
.atas-field span {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
}
.atas-field input,
.atas-field textarea {
  padding: 8px 10px;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text);
  font-size: 13px; font-family: inherit;
}
.atas-field input:focus,
.atas-field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}

@media (max-width: 900px) {
  .atas-day-summary { grid-template-columns: repeat(2, 1fr); }
  .atas-form-grid   { grid-template-columns: 1fr; }
  .atas-detail-wrap { grid-template-columns: 1fr; }
}

/* ─── Sync status box (Gerador de Atas - "Buscar do Google") ──────── */
.atas-sync-status {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}
.atas-sync-status[data-variant="pending"]  { border-color: rgba(37,99,235,.45); background: rgba(37,99,235,.07); }
.atas-sync-status[data-variant="progress"] { border-color: rgba(234,179,8,.45);  background: rgba(234,179,8,.08); }
.atas-sync-status[data-variant="done"]     { border-color: rgba(34,197,94,.45);  background: rgba(34,197,94,.08); }
.atas-sync-status[data-variant="error"]    { border-color: rgba(220,38,38,.45);  background: rgba(220,38,38,.08); }
.atas-sync-status-spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; opacity: .6;
  animation: atas-spin 0.8s linear infinite;
}
.atas-sync-status[data-variant="done"] .atas-sync-status-spinner,
.atas-sync-status[data-variant="error"] .atas-sync-status-spinner {
  display: none;
}
.atas-sync-status-text { flex: 1; }
.atas-sync-status-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.atas-sync-status-close:hover { color: var(--text); }
@keyframes atas-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════
 * Mapa de Ambientes — Canvas interativo (PMBOK · Qualidade)
 * ────────────────────────────────────────────────────────────────
 * Whiteboard estilo Miro: arrasta cards, conecta com setas, pan +
 * zoom. SVG vanilla (sem React/D3). Cores derivam da categoria
 * (dev/build/qa/hom/prd/poc/tool) pra dar leitura visual rapida.
 * ═══════════════════════════════════════════════════════════════════ */

/* Toolbar (linha de botoes acima do canvas) */
.env-toolbar {
  display: flex; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.env-toolbar-left { flex: 1; min-width: 280px; }
.env-toolbar-left h1 {
  margin: 0 0 4px; font-size: 22px;
  display: flex; align-items: center; gap: 8px;
}
.env-toolbar-left .dim { margin: 0; font-size: 13px; color: var(--text-muted); }
.env-toolbar-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.btn-active {
  background: rgba(126, 87, 194, .25) !important;
  border-color: rgba(126, 87, 194, .7) !important;
  color: #d8b4fe !important;
}

/* Status bar (modo + zoom + hint) — fica entre toolbar e canvas */
.env-canvas-status {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 12px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
  font-size: 12px;
}
.env-mode-pill {
  padding: 3px 10px; border-radius: 999px; font-weight: 600;
  background: rgba(126, 87, 194, .18); color: #c4b5fd;
  border: 1px solid rgba(126, 87, 194, .35);
}
.env-mode-pill[data-mode="connect"] {
  background: rgba(245, 158, 11, .22); color: #fbbf24;
  border-color: rgba(245, 158, 11, .5);
  animation: env-pulse 1.4s infinite;
}
@keyframes env-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .35); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}
.env-zoom-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted); padding: 3px 8px; border-radius: 4px;
  background: rgba(255,255,255,.04);
  min-width: 50px; text-align: center;
}
.env-hint {
  color: var(--text-muted); font-size: 11.5px; flex: 1;
}

/* Canvas wrapper — area de desenho. WHITEBOARD MODE: fundo branco com
   grid de pontos discretos (estilo PDF DevOps original / Miro / Figma).
   Como o resto do app eh tema escuro, o canvas vira um "papel" branco
   destacado dentro da pagina escura — leitura de tipografia escura sobre
   branco eh muito superior pra arquitetura. */
.env-canvas-wrap {
  position: relative; width: 100%;
  height: calc(100vh - 220px); min-height: 520px;
  border: 1px solid var(--border); border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  cursor: grab;
}
.env-canvas-wrap--panning { cursor: grabbing; }
.env-canvas-wrap--connecting { cursor: crosshair; }

.env-canvas {
  display: block; width: 100%; height: 100%;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.env-canvas-bg { pointer-events: none; }

/* ── SVG Nodes ─────────────────────────────────────────────────────── */
/* Cards brancos com borda sutil + stripe colorida por categoria.
   Tudo otimizado pra leitura sobre fundo branco. */
.env-svg-node {
  cursor: grab;
  --env-node-color: #90A4AE;
}
.env-svg-node:active { cursor: grabbing; }
.env-svg-node-bg {
  fill: #ffffff;
  stroke: color-mix(in srgb, var(--env-node-color) 65%, #475569);
  stroke-width: 1.5;
  filter: drop-shadow(0 1px 3px rgba(15,23,42,.18));
  transition: stroke-width .15s, fill .15s;
}
.env-svg-node:hover .env-svg-node-bg {
  fill: color-mix(in srgb, var(--env-node-color) 8%, #ffffff);
  stroke-width: 2.5;
}
.env-svg-node--connect-from .env-svg-node-bg {
  stroke: #f59e0b; stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, .55));
}
.env-svg-node--target .env-svg-node-bg {
  stroke: #16a34a; stroke-width: 2.5;
}
.env-svg-node-stripe {
  fill: var(--env-node-color);
}
.env-svg-node-badge rect {
  fill: color-mix(in srgb, var(--env-node-color) 22%, #ffffff);
  stroke: color-mix(in srgb, var(--env-node-color) 55%, #334155);
  stroke-width: 1;
}
.env-svg-node-badge text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; font-weight: 700;
  fill: color-mix(in srgb, var(--env-node-color) 35%, #1e293b);
  letter-spacing: .04em;
}
.env-svg-node-name {
  font-size: 13px; font-weight: 600;
  fill: #0f172a;
}
.env-svg-node-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  fill: #475569; opacity: 1;
}
.env-svg-node-mono--dim { fill: #64748b; opacity: .85; }

/* Cores por categoria (mantidas — funcionam bem em fundo branco) */
.env-svg-node--dev    { --env-node-color: #0288D1; } /* azul mais saturado */
.env-svg-node--build  { --env-node-color: #F57C00; } /* laranja escuro */
.env-svg-node--qa     { --env-node-color: #7B1FA2; } /* roxo escuro */
.env-svg-node--hom    { --env-node-color: #388E3C; } /* verde escuro */
.env-svg-node--prd    { --env-node-color: #C62828; } /* vermelho escuro */
.env-svg-node--poc    { --env-node-color: #616161; } /* cinza */
.env-svg-node--tool   { --env-node-color: #F9A825; } /* amber */
.env-svg-node--other  { --env-node-color: #546E7A; } /* blue-grey */

/* ── SVG Edges ─────────────────────────────────────────────────────── */
/* Linhas escuras sobre fundo branco. `currentColor` controla a cor do
   stroke E do arrowhead (marker usa context-stroke / currentColor). */
.env-svg-edge {
  cursor: pointer;
  color: #475569;  /* slate-600 — contraste forte mas nao gritante */
}
.env-svg-edge-hit {
  fill: none; stroke: transparent; stroke-width: 14;
  pointer-events: stroke;
}
.env-svg-edge-line {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  transition: stroke-width .15s, opacity .15s;
}
.env-svg-edge:hover .env-svg-edge-line {
  stroke-width: 3.2; opacity: 1;
}
.env-svg-edge--thick .env-svg-edge-line { stroke-width: 3.5; color: #6d28d9; }
.env-svg-edge--thick:hover .env-svg-edge-line { stroke-width: 5; }
.env-svg-edge--dashed .env-svg-edge-line {
  stroke-dasharray: 6 4; stroke-width: 1.5; opacity: .8;
  color: #64748b;
}
.env-svg-edge--line .env-svg-edge-line { stroke-width: 1.3; opacity: .8; }
.env-svg-edge-label-bg {
  fill: #ffffff;
  stroke: rgba(15,23,42,.18); stroke-width: 1;
}
.env-svg-edge-label {
  font-size: 10.5px; font-weight: 600;
  fill: #1e293b;
  pointer-events: none;
}

/* Preview da seta durante "modo conectar" */
.env-connect-preview {
  stroke: #fbbf24; stroke-width: 2; stroke-dasharray: 5 4;
  pointer-events: none; opacity: .8;
}

/* Toast flash (canto inferior direito) */
.env-flash {
  position: fixed; bottom: 24px; right: 24px;
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; z-index: 1100;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  animation: env-flash-in .25s;
}
.env-flash--info {
  border-color: rgba(99, 102, 241, .45);
  background: rgba(99, 102, 241, .12);
}
@keyframes env-flash-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Modal genérico do módulo ────────────────────────────────────── */
.env-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.env-modal[hidden] { display: none; }
.env-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px);
}
.env-modal-panel {
  position: relative; z-index: 1;
  width: 92%; max-width: 540px; max-height: 90vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 14px 48px rgba(0,0,0,.45);
  display: flex; flex-direction: column;
}
.env-modal-panel--wide { max-width: 720px; }
.env-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.env-modal-head h3 {
  margin: 0; font-size: 16px; flex: 1;
}
.env-modal-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.env-modal-close:hover { color: var(--text); }

.env-form {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.env-field {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0;
}
.env-field > span {
  font-size: 11.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.env-field input[type="text"],
.env-field input[type="url"],
.env-field select,
.env-field textarea {
  background: var(--surface-elev, #14171c); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font: inherit;
}
.env-field input:focus, .env-field select:focus, .env-field textarea:focus {
  outline: none; border-color: color-mix(in srgb, var(--accent, #7E57C2) 70%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #7E57C2) 22%, transparent);
}
.env-field input[type="color"] {
  width: 56px; height: 36px; padding: 0; border: 1px solid var(--border);
  border-radius: 8px; background: transparent; cursor: pointer;
}
.env-field--checkbox {
  flex-direction: row; align-items: center; gap: 8px;
}
.env-field--checkbox > span {
  text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text);
}
.env-field-row {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.env-fieldset {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px;
}
.env-fieldset legend {
  font-size: 11px; color: var(--text-muted);
  padding: 0 6px; text-transform: uppercase; letter-spacing: .05em;
}
.env-form-actions {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.env-btn-danger {
  color: #ff8b8b; border-color: rgba(255,139,139,.4);
}
.env-btn-danger:hover {
  background: rgba(255,139,139,.12); border-color: rgba(255,139,139,.7);
}

.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }

@media (max-width: 720px) {
  .env-group-head { grid-template-columns: 1fr; }
  .env-group-actions { justify-content: flex-start; }
  .env-nodes { grid-template-columns: 1fr; }
}

/* ===========================================================================
   MATRIZ DE RASTREABILIDADE DE RISCOS (/riscos) — jun/2026
   --------------------------------------------------------------------------
   Tabela compacta tipo planilha. Criticidade colorida em 3 faixas:
     baixa  (1..7)   - verde nude
     media  (8..14)  - amarelo nude
     alta   (15..25) - vermelho nude (vira "critico" no header KPI)
   Pill de status clicavel pra alternar Ativo<->Inativo direto da linha
   sem abrir modal. Linhas inativas ficam dim (opacity .55).
   =========================================================================== */

/* KPIs no header — 3 mini-cards alinhados. */
.risks-kpis {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}
.risks-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.risks-kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.risks-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.risks-kpi--alert {
  border-color: rgba(220, 80, 80, 0.45);
  background: linear-gradient(135deg,
    rgba(220, 80, 80, 0.12), rgba(220, 80, 80, 0.04));
}
.risks-kpi--alert .risks-kpi-value { color: #fda4a4; }

.risks-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 36px 24px;
  text-align: center;
  color: var(--text-muted);
}

.risks-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
  margin-bottom: 24px;
}
.risks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--text);
}
.risks-table thead th {
  background: var(--surface-alt);
  color: var(--text-muted);
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
.risks-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}
.risks-table tbody tr.rk-row { transition: background .12s ease; }
.risks-table tbody tr.rk-row:hover { background: rgba(255,255,255,0.03); }
.risks-table tbody tr.rk-row:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: rgba(60, 130, 230, 0.08);
}
.rk-row--inactive { opacity: 0.55; }
.rk-row--inactive td { font-style: italic; }

.rk-col-id   { width: 88px; white-space: nowrap; }
.rk-col-id code {
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--primary);
}
.rk-col-name { font-weight: 600; min-width: 180px; }
.rk-col-desc {
  color: var(--text-muted);
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rk-col-date { width: 100px; white-space: nowrap; color: var(--text-muted); font-size: 12.5px; }
.rk-col-status  { width: 110px; }
.rk-col-num {
  text-align: center;
  width: 96px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.rk-col-actions { width: 92px; text-align: right; white-space: nowrap; }

/* Pill de status — clicavel; verde pra Ativo, cinza pra Inativo. */
.rk-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .12s ease, transform .06s ease;
}
.rk-status-pill:hover { filter: brightness(1.1); }
.rk-status-pill:active { transform: scale(0.96); }
.rk-status--active {
  background: rgba(91, 155, 75, 0.18);
  border-color: rgba(91, 155, 75, 0.48);
  color: #b6e0a3;
}
.rk-status--inactive {
  background: rgba(140, 140, 150, 0.18);
  border-color: rgba(140, 140, 150, 0.4);
  color: #c8c8d0;
}

/* Badge de criticidade — vai colorida diretamente na celula. */
.rk-crit {
  border-radius: 6px;
  padding: 4px 10px;
  display: inline-block;
  min-width: 36px;
  text-align: center;
}
.rk-crit--low  { background: rgba(91, 155, 75, 0.22);  color: #b6e0a3; }
.rk-crit--med  { background: rgba(232, 185, 50, 0.22); color: #f0d076; }
.rk-crit--high { background: rgba(220, 80, 80, 0.22);  color: #fda4a4; }

.rk-icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 14px;
  margin-left: 2px;
  transition: all .12s ease;
}
.rk-icon-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border);
  color: var(--text);
}
.rk-del-btn:hover { color: #fda4a4; border-color: rgba(220,80,80,0.4); }

/* Modal — segue padrao .modal-overlay/.modal genericos do app, mas
   garante exibicao mesmo se o tema base nao definir .modal-overlay. */
.risks-page .modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
/* Bug fix jun/2026: 'display:flex' explicito sobrescrevia o
   default UA pro atributo HTML5 `hidden` (display:none) — o
   modal.hidden=true do JS nao fechava o modal. !important
   garante que o atributo `hidden` continue surtindo efeito.
   Sintoma: Cancelar e X 'nao funcionavam'. */
.risks-page .modal-overlay[hidden] { display: none !important; }
.risks-page .modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(620px, 94vw);
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 16px 60px rgba(0,0,0,0.45);
}
.risks-page .modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.risks-page .modal-head h2 { margin: 0; font-size: 17px; }
.risks-page .modal-close {
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 5px;
}
.risks-page .modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.risks-page .modal-body {
  padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
}
.risks-page .modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border);
}
.risks-page .form-row { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.risks-page .form-row > span { color: var(--text-muted); font-size: 12px; }
.risks-page .form-row .req { color: #fda4a4; }
.risks-page .form-row input,
.risks-page .form-row select,
.risks-page .form-row textarea {
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13.5px;
  font-family: inherit;
}
.risks-page .form-row textarea { resize: vertical; min-height: 90px; }
.risks-page .form-row input:focus,
.risks-page .form-row select:focus,
.risks-page .form-row textarea:focus {
  border-color: var(--primary);
  outline: 2px solid rgba(60,130,230,0.25);
  outline-offset: 0;
}
.risks-page .form-row--inline { display: flex; flex-direction: row; gap: 12px; align-items: flex-end; }
.risks-page .modal-err {
  background: rgba(220,80,80,0.12);
  border: 1px solid rgba(220,80,80,0.4);
  color: #fda4a4;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}

/* Tile do portal home — cor do tema "riscos" (alerta avermelhado). */
.pmbok-tile--risks .pmbok-tile-icon { background: rgba(220, 80, 80, 0.22); color: #fda4a4; }

   TO-DO LIST (jun/2026 — feature exclusiva do admin primário)
   Planilha branca tipo Excel embutida no tema dark do portal. Header
   escuro (segue o tema), body branco pra editar confortavel.
   ════════════════════════════════════════════════════════════════════ */
.todo-page .icon-todo { background-color: #c4d3f5; }
.pmbok-tile--todo .pmbok-tile-icon { background: rgba(96, 130, 220, 0.22); color: #c4d3f5; }

/* ── Toolbar ────────────────────────────────────────────────────────── */
.todo-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  margin: 16px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.todo-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.todo-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 18px;
  text-decoration: none;
  transition: background 0.15s;
}
.todo-nav-btn:hover { background: rgba(63, 169, 245, 0.12); color: #3fa9f5; }
.todo-nav-label {
  min-width: 220px;
  text-align: center;
  color: var(--text);
}
.todo-nav-label strong {
  color: #3fa9f5;
  letter-spacing: 0.3px;
}
.todo-today-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 4px;
  background: #3fa9f5;
  color: #0b1220;
  vertical-align: middle;
}
.todo-nav-today {
  margin-left: 8px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 5px;
  background: rgba(63, 169, 245, 0.15);
  color: #3fa9f5;
  text-decoration: none;
  font-weight: 600;
}
.todo-nav-today:hover { background: rgba(63, 169, 245, 0.28); }

.todo-mode-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.todo-mode-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.todo-mode-btn + .todo-mode-btn { border-left: 1px solid var(--border); }
.todo-mode-btn:hover { color: var(--text); }
.todo-mode-btn.is-active {
  background: #3fa9f5;
  color: #0b1220;
}

.todo-kpis {
  display: flex;
  gap: 12px;
  margin-left: auto;
}
.todo-kpi {
  text-align: center;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  min-width: 70px;
}
.todo-kpi-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.todo-kpi-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.todo-kpi--done .todo-kpi-val { color: #6ab9ff; }
.todo-kpi--late .todo-kpi-val { color: #f5827d; }

.todo-toolbar-actions {
  display: flex;
  gap: 8px;
}

/* ── Tabela (planilha branca) ──────────────────────────────────────── */
.todo-grid-wrap {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}
.todo-grid-wrap--done .todo-table { background: #fafbfc; }

.todo-section-title {
  margin: 0;
  padding: 12px 16px;
  background: #1a2540;
  color: #e6eefb;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.todo-section-sub {
  font-size: 11px;
  font-weight: 500;
  color: rgba(230, 238, 251, 0.65);
}

.todo-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  color: #1a2540;
  font-size: 13px;
}
.todo-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1d2230;
  color: #e8eef9;
  font-weight: 700;
  font-size: 11.5px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 9px 8px;
  border-bottom: 2px solid #2d3548;
  white-space: nowrap;
}
.todo-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid #e8e8ec;
  vertical-align: middle;
}
.todo-table tbody tr:last-child td { border-bottom: none; }

/* Larguras de coluna — fixadas pra layout estavel */
.todo-col-id      { width: 70px;  text-align: center; }
.todo-col-name    { min-width: 280px; }
.todo-col-prio    { width: 110px; text-align: center; }
.todo-col-orig    { width: 160px; text-align: center; }
.todo-col-plan    { width: 160px; text-align: center; }
.todo-col-status  { width: 110px; text-align: center; }
.todo-col-stamp   { width: 130px; text-align: center; }
.todo-col-actions { width: 80px;  text-align: center; white-space: nowrap; }

.todo-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: #4b6ea8;
  letter-spacing: 0.3px;
}

/* Inputs editaveis — visualmente leves (parecem texto, vira input no
   focus). Mesma logica do schedule. */
.todo-input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  color: #1a2540;
  transition: border-color 0.12s, background 0.12s;
}
.todo-input:hover {
  border-color: #cfd6e4;
  background: rgba(63, 169, 245, 0.04);
}
.todo-input:focus {
  outline: none;
  border-color: #3fa9f5;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(63, 169, 245, 0.18);
}
.todo-input--saved {
  border-color: #4caf50 !important;
  background: rgba(76, 175, 80, 0.08) !important;
  transition: none;
}

.todo-input--name { font-size: 13px; }

/* Prioridade — select com dot colorido + cor de fundo do dot */
.todo-input--prio {
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
}
.todo-prio--high   { color: #c92626; }
.todo-prio--medium { color: #b07b14; }
.todo-prio--low    { color: #1f7a35; }

/* Inputs de data — esconde o icone do calendario nativo (overlapping
   com texto) mas mantem o click pra abrir o picker. */
.todo-date-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.todo-input--date {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  width: 105px;
  text-align: center;
}
.todo-input--date::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 14px;
  margin-left: -14px;
  cursor: pointer;
}
/* Esconde "dd/mm/aaaa" quando vazio (mesmo truque do schedule) */
.todo-date--empty::-webkit-datetime-edit { color: transparent; }
.todo-date--empty:focus::-webkit-datetime-edit { color: #1a2540; }
.todo-dow {
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.4px;
  min-width: 28px;
  text-align: left;
}

/* Status pills (mesma paleta do schedule) */
.todo-status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.todo-status-pill--future    { background: #B9E6A3; color: #2D5A1F; }
.todo-status-pill--doing     { background: #FFE97A; color: #5F4D12; }
.todo-status-pill--late      { background: #F0A0A0; color: #6A1818; }
.todo-status-pill--done      { background: #A9D3EF; color: #0F3D63; }

/* Botoes Inicio/Fim — pill que vira "checked" depois do click */
.todo-stamp-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  color: #4b5563;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.todo-stamp-btn:hover {
  background: rgba(63, 169, 245, 0.12);
  border-color: #3fa9f5;
  color: #1e6cb3;
}
.todo-stamp-btn.is-on {
  background: #ddebf7;
  border-color: #5b8bcc;
  color: #1e3a5f;
}
.todo-stamp-btn.is-on:hover { background: #cee0f1; }
.todo-stamp-icon {
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.todo-stamp-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.2px;
}

.todo-row-del,
.todo-row-edit {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
  vertical-align: middle;
}
.todo-row-del { font-size: 18px; color: #d1d5db; }
.todo-row-del:hover { color: #c92626; background: #fef2f2; }
.todo-row-edit:hover { color: #1e40af; background: #eff6ff; }

/* Empty state */
.todo-empty-row td {
  text-align: center;
  padding: 28px 16px !important;
  color: #6b7280;
  font-style: italic;
  background: #fafbfc;
}

/* Linha concluida — visualmente apagada */
.todo-row--status-done .todo-input--name {
  text-decoration: line-through;
  color: #6b7280;
}
.todo-row--status-done {
  opacity: 0.85;
}

/* ── Modal: nova tarefa ──────────────────────────────────────────────── */
.todo-modal[hidden] { display: none; }
.todo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.todo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.todo-modal__panel {
  position: relative;
  background: #ffffff;
  color: #1a2540;
  border-radius: 12px;
  width: min(480px, 92vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: todoModalFade 0.15s ease-out;
}
@keyframes todoModalFade {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.todo-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}
.todo-modal__head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f1c3a;
}
.todo-modal__close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.todo-modal__close:hover { color: #1a2540; background: #f3f4f6; }
.todo-modal__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}
.todo-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: #1a2540;
}
.todo-field > span {
  font-weight: 600;
  color: #1a2540;
}
.todo-field > span em.dim {
  font-style: italic;
  color: #6b7280;
  font-weight: 400;
  margin-left: 4px;
}
.todo-field input[type="text"],
.todo-field input[type="date"],
.todo-field select {
  padding: 8px 10px;
  border: 1px solid #cfd6e4;
  border-radius: 6px;
  font: inherit;
  background: #ffffff;
  color: #1a2540;
}
.todo-field input:focus, .todo-field select:focus {
  outline: none;
  border-color: #3fa9f5;
  box-shadow: 0 0 0 2px rgba(63, 169, 245, 0.18);
}
.todo-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid #e5e7eb;
  margin-top: 4px;
  padding: 12px 0 0;
}
/* Override do .btn-ghost dentro do modal — o estilo global eh feito
   pro fundo dark do tema (texto claro, borda clara) e ficava
   ilegivel no card branco do modal. Pintamos com contraste real. */
.todo-modal__actions .btn-ghost {
  background: #ffffff;
  color: #1a2540;
  border: 1px solid #c8ccd6;
  font-weight: 600;
}
.todo-modal__actions .btn-ghost:hover {
  background: #eef1f6;
  border-color: #94a3b8;
  color: #0f1c3a;
}
.todo-modal__actions .btn-ghost:focus-visible {
  outline: 2px solid rgba(63, 169, 245, 0.45);
  outline-offset: 1px;
}

/* ─── Recorrência ───────────────────────────────────────────────────
   - badge ↻ na coluna ID quando a tarefa pertence a uma série.
   - toggle "Repetir esta tarefa" no modal + painel revelado abaixo. */
.todo-recur-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 8px;
  background: #e6f0ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.todo-recur-toggle {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px dashed #cfd6e4;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.todo-recur-toggle input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: #1d4ed8;
  cursor: pointer;
}
.todo-recur-toggle > span {
  font-weight: 600;
  color: #1a2540;
}
.todo-recur-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fafbfd;
}
.todo-recur-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.todo-recur-days label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #ffffff;
  border: 1px solid #cfd6e4;
  border-radius: 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1a2540;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.todo-recur-days label:has(input:checked) {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
}
.todo-recur-days input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: #1d4ed8;
  cursor: pointer;
}

/* ── To-Do · ID clicável + badge de subitens ──────────────────────── */
.todo-code--link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: #4b6ea8;
  letter-spacing: 0.3px;
}
.todo-code--link:hover { text-decoration: underline; }
.todo-code--link:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
  border-radius: 3px;
}
.todo-sub-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #eef2f7;
  color: #475569;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
  cursor: pointer;
}
.todo-sub-badge.is-complete { background: #dcfce7; color: #166534; }
.todo-sub-badge-note { color: #7c5b16; }

/* ── Modal de detalhe (subtarefas + observações) ──────────────────── */
.todo-detail__panel { width: min(620px, 94vw); }
.todo-detail__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 20px 20px;
}
.todo-detail__summary { display: flex; flex-direction: column; gap: 8px; }
.todo-detail__name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1a2540;
}
.todo-detail__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.todo-detail__deadline { font-size: 12px; color: #64748b; }
.todo-detail__progress { display: flex; align-items: center; gap: 10px; }
.todo-detail__progress-track {
  flex: 1;
  height: 8px;
  border-radius: 6px;
  background: #e5e9f0;
  overflow: hidden;
}
.todo-detail__progress-fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: #22c55e;
  transition: width 0.2s ease;
}
.todo-detail__progress-lbl {
  font-size: 11.5px;
  font-weight: 700;
  color: #166534;
  white-space: nowrap;
}
.todo-detail__section { display: flex; flex-direction: column; gap: 8px; }
.todo-detail__section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #64748b;
}
.todo-detail__empty {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}
.todo-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.todo-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}
.todo-sub-item--note { background: #fffdf5; border-color: #f0e6c8; }
.todo-sub-check { display: inline-flex; }
.todo-sub-done {
  width: 16px; height: 16px;
  accent-color: #22c55e;
  cursor: pointer;
}
.todo-sub-text {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: #1a2540;
  padding: 2px 0;
}
.todo-sub-text:focus { outline: none; border-bottom: 1px solid #1d4ed8; }
.todo-sub-item.is-done .todo-sub-text {
  text-decoration: line-through;
  color: #94a3b8;
}
.todo-sub-del {
  border: 0;
  background: none;
  color: #cbd5e1;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.todo-sub-del:hover { color: #ef4444; }
.todo-detail__add {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
}
.todo-detail__add-kind {
  padding: 7px 8px;
  border: 1px solid #cfd6e4;
  border-radius: 8px;
  font-size: 12.5px;
  background: #fff;
  color: #1a2540;
}
.todo-detail__add-text {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #cfd6e4;
  border-radius: 8px;
  font-size: 13px;
  color: #1a2540;
}
.todo-detail__hint { margin: 0; font-size: 11px; color: #94a3b8; }


/* ═════════════════════════════════════════════════════════════════════
   Impeccable /craft · Article Reading Experience
   ═════════════════════════════════════════════════════════════════════
   Reading progress bar (fixed top), reading time badge no header do
   artigo, e related-articles no footer. Sistema é ativado apenas na
   página do artigo — zero peso em outras rotas. */

.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 90;
  pointer-events: none;
}
.reading-progress__fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--primary), var(--primary-soft, var(--primary)));
  transition: transform 60ms linear;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress__fill { transition: none; }
}

.reading-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.reading-time-badge strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.related-articles {
  margin-top: 32px;
  padding: 22px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.related-articles-head { margin-bottom: 14px; }
.related-articles-title {
  font-size: 16px; font-weight: 700;
  color: var(--text); margin: 0 0 3px 0;
  letter-spacing: -0.01em;
}
.related-articles-hint {
  font-size: 12px; color: var(--text-muted); margin: 0;
}
.related-articles-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.related-articles-item { margin: 0; }
.related-articles-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color 160ms var(--ease-out-quart, ease-out),
    transform 160ms var(--ease-out-quart, ease-out),
    background 160ms var(--ease-out-quart, ease-out);
}
.related-articles-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-alt));
}
.related-articles-num {
  font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--primary);
  padding: 3px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  white-space: nowrap;
}
.related-articles-body { min-width: 0; }
.related-articles-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.related-articles-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--text-muted);
  align-items: center;
}
.related-articles-tag {
  padding: 1px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
  color: var(--text-muted);
}
.related-articles-arrow {
  color: var(--text-muted);
  font-size: 15px;
  transition: transform 160ms, color 160ms;
}
.related-articles-card:hover .related-articles-arrow {
  color: var(--primary);
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  .related-articles-card:hover { transform: none; }
  .related-articles-card:hover .related-articles-arrow { transform: none; }
}

/* ─── Gerador de Project Progress Summary pro Pulse (Obi-Wan) ────────
   Multi-projeto: primeira linha tem 3 colunas (Projeto | Idioma |
   Botão), segunda linha tem a Observação em span-3. Compartilha
   design system (--surface, --border, --text, --primary) com o resto
   do Obi-Wan pra herdar dark/light theme automaticamente.          */
.pulse-gen {
  max-width: 900px;
  margin: 16px auto 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pulse-gen-head { display: flex; flex-direction: column; gap: 6px; }
.pulse-gen-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pulse-gen-title .icon {
  width: 24px;
  height: 24px;
  background-color: var(--primary);
}
.pulse-gen-lede {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.pulse-gen-lede em { font-style: italic; color: var(--text); }
.pulse-gen-lede strong { color: var(--text); }

.pulse-gen-panel {
  background: var(--surface, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
html[data-theme="light"] .pulse-gen-panel {
  border-color: rgba(20,30,55,0.10);
}

.pulse-gen-controls {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 12px 14px;
  align-items: end;
}
.pulse-gen-controls--4col {
  grid-template-columns: minmax(240px, 1.4fr) 180px auto;
}
@media (max-width: 720px) {
  .pulse-gen-controls,
  .pulse-gen-controls--4col { grid-template-columns: 1fr; }
}
.pulse-gen-project, .pulse-gen-lang, .pulse-gen-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pulse-gen-note--span2 {
  grid-column: 1 / -1;
}
.pulse-gen-lang-label, .pulse-gen-note-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pulse-gen-note-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.8;
}
.pulse-gen-select {
  background: var(--surface-alt, rgba(255,255,255,0.03));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
}
.pulse-gen-textarea {
  background: var(--surface-alt, rgba(255,255,255,0.03));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.55;
  font-family: inherit;
  resize: vertical;
  width: 100%;
  min-height: 60px;
}
.pulse-gen-textarea:focus {
  outline: 2px solid var(--primary-soft);
  outline-offset: 0;
  border-color: var(--primary);
}
.pulse-gen-textarea--note { min-height: 52px; }
.pulse-gen-textarea--output {
  min-height: 180px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
               monospace;
  font-size: 13.5px;
  line-height: 1.6;
}

.pulse-gen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease,
              transform 0.06s ease;
}
.pulse-gen-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pulse-gen-btn:active:not(:disabled) { transform: translateY(1px); }
.pulse-gen-btn--primary {
  background: var(--primary);
  color: #0A1024;
  border-color: var(--primary);
  padding: 12px 22px;
  font-size: 15px;
  align-self: end;
  white-space: nowrap;
}
.pulse-gen-btn--primary:hover:not(:disabled) {
  background: var(--primary-soft, var(--primary));
  border-color: var(--primary-soft, var(--primary));
}
.pulse-gen-btn--ghost {
  background: var(--surface-alt, rgba(255,255,255,0.03));
  border-color: var(--border);
  color: var(--text);
}
.pulse-gen-btn--ghost:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.pulse-gen-output {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.pulse-gen-output[hidden] { display: none; }
.pulse-gen-output-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.pulse-gen-output-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pulse-gen-output-title strong {
  font-size: 14px;
  color: var(--text);
}
.pulse-gen-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.pulse-gen-output-actions { display: flex; gap: 8px; }

.pulse-gen-bluf {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0 2px;
}
.pulse-gen-bluf-bar {
  position: relative;
  height: 8px;
  background: var(--surface-alt, rgba(255,255,255,0.05));
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.pulse-gen-bluf-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--success, #5DD39E);
  border-radius: 999px 0 0 999px;
  transition: width 0.18s ease;
}
.pulse-gen-bluf-fill.is-full {
  border-radius: 999px;
  background: linear-gradient(90deg,
              var(--success, #5DD39E) 0 96%,
              var(--danger, #FF6B6B) 100%);
}
.pulse-gen-bluf-tick {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: var(--text-muted);
  opacity: 0.6;
  transform: translateX(-1px);
  display: none;
}
.pulse-gen-bluf-fill.is-full ~ .pulse-gen-bluf-tick { display: block; }
.pulse-gen-bluf-label {
  font-size: 12px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.pulse-gen-error {
  background: rgba(255,107,107,0.10);
  color: var(--danger, #FF6B6B);
  border: 1px solid rgba(255,107,107,0.35);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
}
.pulse-gen-error[hidden] { display: none; }

.pulse-gen-help {
  background: var(--surface, #0f172a);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}
.pulse-gen-help > summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  padding: 2px 0;
  list-style: none;
}
.pulse-gen-help > summary::-webkit-details-marker { display: none; }
.pulse-gen-help > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--text-muted);
  transition: transform 0.14s ease;
}
.pulse-gen-help[open] > summary::before { transform: rotate(90deg); }
.pulse-gen-help-list {
  margin: 10px 0 4px 24px;
  padding: 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pulse-gen-help-list strong { color: var(--text); }
.pulse-gen-help-list em { color: var(--text); font-style: italic; }
.pulse-gen-help-src {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.85;
}


/* ==================================================================
   Dashboard do Projeto (Obi-Wan) — portado do Solar (jul/2026)
   Cards Contrato — SOW vs. Consumo + Assignments Ativos, exibidos
   com um passador (switcher) por projeto. Classes .proj-dash-* sao
   compartilhadas 1:1 com o Solar; regras de cronograma vem juntas
   (inofensivas — o crono nao renderiza no Obi-Wan).
   ================================================================== */
.proj-dash {
  margin: 6px 0 12px;
}
/* Colunas dos indicadores = nº REAL de cards do topo (via --dash-cols, setado
   por painel no template). Antes usávamos `auto-fit`, mas o card de
   Assignments (grid-column: 1 / -1) ocupava a 4ª trilha que o auto-fit criava
   em telas largas e IMPEDIA o colapso dela — sobrava uma coluna vazia à
   direita. Fixando o nº de colunas ao total de cards (2 na aba Programa, 3 nas
   demais), os indicadores esticam e cobrem a página inteira. */
.proj-dash-grid {
  display: grid;
  grid-template-columns: repeat(var(--dash-cols, 3), minmax(0, 1fr));
  gap: 10px;
}
/* Responsivo: em telas estreitas, empilha (o nº fixo de colunas apertaria os
   cards). Estas regras sobrepõem o `--dash-cols` porque redefinem a
   propriedade `grid-template-columns` por inteiro. */
@media (max-width: 1040px) {
  .proj-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .proj-dash-grid { grid-template-columns: 1fr; }
}
.proj-dash-card {
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 10px;
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
html[data-theme="light"] .proj-dash-card {
  border-color: rgba(20,30,55,0.10);
}
/* Card de Assignments ocupa a linha inteira do grid (full width). */
.proj-dash-card--assignments {
  grid-column: 1 / -1;
}
/* Slot do Cronograma vazio (Obi-Wan não tem cronograma liberado): mantém
   a 3ª coluna do grid ocupada — assim Contrato e Margem ficam com a mesma
   largura (1/3) do Solar, em vez de esticarem pra 1/2 — mas sem nenhuma
   moldura/fundo visível. É literalmente espaço em branco. */
.proj-dash-card--empty {
  background: transparent;
  border: none;
  padding: 0;
  min-height: 0;
}
html[data-theme="light"] .proj-dash-card--empty {
  border-color: transparent;
}
.proj-dash-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.proj-dash-card-head h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
}
.proj-dash-card-sub {
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
  opacity: 0.75;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* --- Card financeiro: relógio meia-lua ---------------------------------
   Duas variantes compartilham as sub-classes .proj-dash-gauge-*:
   1) .proj-dash-fin-gauge (base + --sched) — layout 2-colunas com gauge
      de arcos concêntricos à esquerda e legenda à direita. Hoje usado
      apenas pelo card de Cronograma (2 arcos: Realizado + Baseline).
   2) .proj-dash-fin-gauge--markers — usado pelo card financeiro (SOW).
      Arco ÚNICO com 3 marcadores rotulados na mesma escala.
      Ocupa a largura toda do card e não tem legenda separada — as
      labels ficam radiais no próprio gráfico.                        */
.proj-dash-fin-gauge {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 14px 20px;
  align-items: center;
}
.proj-dash-fin-gauge--markers {
  display: block;
  grid-template-columns: none;
  gap: 0;
}
.proj-dash-gauge-visual {
  position: relative;
  min-width: 0;
}
.proj-dash-gauge-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 220px;
  margin: 0 auto;
}
.proj-dash-gauge-track {
  fill: none;
  stroke: var(--surface-alt, rgba(255,255,255,0.06));
  stroke-width: 8;
  stroke-linecap: round;
}
html[data-theme="light"] .proj-dash-gauge-track {
  stroke: rgba(20,30,55,0.08);
}
.proj-dash-gauge-value {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 320ms ease-out, stroke 200ms ease;
}
.proj-dash-gauge-value--actual   { stroke: #86efac; }
.proj-dash-gauge-value--planned  { stroke: #fbbf24; }
.proj-dash-gauge-value--planner  { stroke: #93c5fd; }
.proj-dash-gauge-value--current  { stroke: #86efac; }
.proj-dash-gauge-value--baseline { stroke: #c9b88a; }
html[data-theme="light"] .proj-dash-gauge-value--actual   { stroke: #16a34a; }
html[data-theme="light"] .proj-dash-gauge-value--planned  { stroke: #b45309; }
html[data-theme="light"] .proj-dash-gauge-value--planner  { stroke: #1d4ed8; }
html[data-theme="light"] .proj-dash-gauge-value--current  { stroke: #16a34a; }
html[data-theme="light"] .proj-dash-gauge-value--baseline { stroke: #6b5a2d; }
/* Estados de alerta:
   • .is-over  → estourou o teto (SOW) no card financeiro
   • .is-behind → atrasado em relação à baseline no cronograma
   Ambos viram vermelho e ganham +1px de espessura pra chamar atenção
   sem quebrar o layout (mantém stroke-linecap round). */
.proj-dash-gauge-value.is-over,
.proj-dash-gauge-value.is-behind {
  stroke: #ef4444;
  stroke-width: 9;
}
html[data-theme="light"] .proj-dash-gauge-value.is-over,
html[data-theme="light"] .proj-dash-gauge-value.is-behind { stroke: #dc2626; }

/* Label central: "Total SOW" + valor grande, ancorado no vazio da
   meia-lua. Position absolute pra flutuar sem alterar o box do SVG. */
.proj-dash-gauge-center {
  position: absolute;
  left: 0; right: 0;
  bottom: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
}
.proj-dash-gauge-center-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  line-height: 1;
}
.proj-dash-gauge-center-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text, #f1f5f9);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
  line-height: 1.05;
}

/* Legenda: 3 linhas compactas alinhadas em grid (swatch · corpo).
   Cada linha tem título + subtítulo (contexto) na esquerda e valor +
   percentual na direita. Números tabulares pra colunas de %. */
.proj-dash-gauge-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.proj-dash-gauge-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 4px 8px 4px 6px;
  border-radius: 6px;
  transition: background-color 120ms ease;
}
.proj-dash-gauge-item:hover {
  background-color: rgba(255,255,255,0.03);
}
html[data-theme="light"] .proj-dash-gauge-item:hover {
  background-color: rgba(20,30,55,0.03);
}
.proj-dash-gauge-item .proj-dash-swatch {
  margin-top: 4px;
}
.proj-dash-gauge-item-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
  min-width: 0;
}
.proj-dash-gauge-item-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text, #e5e7eb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="light"] .proj-dash-gauge-item-title { color: #141e37; }
.proj-dash-gauge-item-sub {
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted, #94a3b8);
  opacity: 0.85;
  margin-left: 4px;
}
.proj-dash-gauge-item-nums {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  justify-self: end;
  white-space: nowrap;
}
.proj-dash-gauge-item-value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  line-height: 1.1;
}
/* Cores do valor batem com o arco correspondente pra amarrar visualmente
   número ↔ arco no gauge. Vale pros dois gauges (financeiro e cronograma). */
.proj-dash-gauge-item[data-metric="actual"]   .proj-dash-gauge-item-value { color: #86efac; }
.proj-dash-gauge-item[data-metric="planned"]  .proj-dash-gauge-item-value { color: #fbbf24; }
.proj-dash-gauge-item[data-metric="planner"]  .proj-dash-gauge-item-value { color: #93c5fd; }
.proj-dash-gauge-item[data-metric="current"]  .proj-dash-gauge-item-value { color: #86efac; }
.proj-dash-gauge-item[data-metric="baseline"] .proj-dash-gauge-item-value { color: #c9b88a; }
html[data-theme="light"] .proj-dash-gauge-item[data-metric="actual"]   .proj-dash-gauge-item-value { color: #16a34a; }
html[data-theme="light"] .proj-dash-gauge-item[data-metric="planned"]  .proj-dash-gauge-item-value { color: #b45309; }
html[data-theme="light"] .proj-dash-gauge-item[data-metric="planner"]  .proj-dash-gauge-item-value { color: #1d4ed8; }
html[data-theme="light"] .proj-dash-gauge-item[data-metric="current"]  .proj-dash-gauge-item-value { color: #16a34a; }
html[data-theme="light"] .proj-dash-gauge-item[data-metric="baseline"] .proj-dash-gauge-item-value { color: #6b5a2d; }
/* "Atrasado" no cronograma: o item Realizado da legenda vira vermelho
   pra fechar o loop visual com o arco em vermelho. */
.proj-dash-gauge-item.is-behind .proj-dash-gauge-item-value {
  color: #ef4444;
}
html[data-theme="light"] .proj-dash-gauge-item.is-behind .proj-dash-gauge-item-value {
  color: #dc2626;
}
.proj-dash-gauge-item-pct {
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}
/* Item que estourou o SOW: valor + % em vermelho + badge "+X pp". */
.proj-dash-gauge-item.is-over .proj-dash-gauge-item-value,
.proj-dash-gauge-item.is-over .proj-dash-gauge-item-pct {
  color: #ef4444;
  opacity: 1;
}
html[data-theme="light"] .proj-dash-gauge-item.is-over .proj-dash-gauge-item-value,
html[data-theme="light"] .proj-dash-gauge-item.is-over .proj-dash-gauge-item-pct { color: #dc2626; }
.proj-dash-gauge-over {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  vertical-align: 1px;
}
html[data-theme="light"] .proj-dash-gauge-over {
  background: rgba(220,38,38,0.12);
  color: #b91c1c;
}

.proj-dash-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.proj-dash-swatch--total   { background: #e5e7eb; }
.proj-dash-swatch--actual  { background: #86efac; }
.proj-dash-swatch--planned { background: #fbbf24; }
.proj-dash-swatch--planner { background: #93c5fd; }
html[data-theme="light"] .proj-dash-swatch--total   { background: #64748b; }
html[data-theme="light"] .proj-dash-swatch--actual  { background: #16a34a; }
html[data-theme="light"] .proj-dash-swatch--planned { background: #b45309; }
html[data-theme="light"] .proj-dash-swatch--planner { background: #1d4ed8; }

/* Empilha o gauge acima da legenda quando o card fica estreito
   (mobile / cards lado-a-lado apertados). Não aplica à variante
   `--markers` que já não tem legenda separada. */
@media (max-width: 560px) {
  .proj-dash-fin-gauge:not(.proj-dash-fin-gauge--markers) {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .proj-dash-gauge-svg:not(.proj-dash-gauge-svg--markers) { max-width: 200px; }
}

/* --- Variante --markers: arco único + marcadores rotulados ------------
   Usada pelo card financeiro (SOW). Todas as métricas ficam na MESMA
   escala (mesmo raio) e os valores são lidos direto no gráfico via
   etiquetas radiais.                                                 */
.proj-dash-gauge-svg--markers {
  display: block;
  width: 100%;
  height: auto;
  max-width: 480px;
  max-height: 200px;
  margin: 0 auto;
}
/* Arco de fundo mais grosso pra ancorar visualmente os marcadores. */
.proj-dash-gauge-svg--markers .proj-dash-gauge-track {
  stroke-width: 10;
}
/* ─── Escala 0/25/50/75/100% do arco ───
   Ticks radiais fininhos + rótulos por fora do arco. Serve como
   referência visual — sem eles, quando um marcador cai em 8%, o
   usuário nao consegue "sentir" o quanto isso é do total. Ficam
   discretos (cinza, semi-transparentes) pra nao competir com os
   marcadores coloridos. */
.proj-dash-gauge-scale-tick {
  stroke: var(--text-muted, #94a3b8);
  stroke-width: 1.5;
  opacity: 0.55;
}
.proj-dash-gauge-scale-label {
  fill: var(--text-muted, #94a3b8);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .proj-dash-gauge-scale-tick,
html[data-theme="light"] .proj-dash-gauge-scale-label {
  opacity: 0.65;
}
/* Marcador = leader (linha guia) + dot (bolinha no arco) + label. */
.proj-dash-gauge-marker-leader {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.35;
  stroke-dasharray: 2 2;
}
.proj-dash-gauge-marker-dot {
  stroke: var(--bg, #0b1220);
  stroke-width: 2;
}
html[data-theme="light"] .proj-dash-gauge-marker-dot { stroke: #ffffff; }
.proj-dash-gauge-marker-label {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  paint-order: stroke;
}
.proj-dash-gauge-marker-title {
  fill: var(--text-muted, #94a3b8);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.proj-dash-gauge-marker-nums {
  fill: currentColor;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.1px;
}
/* Cor por métrica — aplicada no grupo, herdada via currentColor pelas
   subpartes que precisam (dot fill, leader stroke, nums fill). */
.proj-dash-gauge-marker[data-metric="actual"]   { color: #86efac; }
.proj-dash-gauge-marker[data-metric="planned"]  { color: #fbbf24; }
.proj-dash-gauge-marker[data-metric="planner"]  { color: #93c5fd; }
.proj-dash-gauge-marker[data-metric="current"]  { color: #86efac; } /* Realizado (cronograma) */
.proj-dash-gauge-marker[data-metric="baseline"] { color: #c9b88a; } /* Linha de Base (cronograma) */
html[data-theme="light"] .proj-dash-gauge-marker[data-metric="actual"]   { color: #16a34a; }
html[data-theme="light"] .proj-dash-gauge-marker[data-metric="planned"]  { color: #b45309; }
html[data-theme="light"] .proj-dash-gauge-marker[data-metric="planner"]  { color: #1d4ed8; }
html[data-theme="light"] .proj-dash-gauge-marker[data-metric="current"]  { color: #16a34a; }
html[data-theme="light"] .proj-dash-gauge-marker[data-metric="baseline"] { color: #6b5a2d; }
.proj-dash-gauge-marker-dot { fill: currentColor; }
/* Marcador em estado "estourou o SOW" ou "atrasado no cronograma":
   tudo vermelho, dot maior, título fica com fill em currentColor pra
   herdar o vermelho. Reuso da mesma regra pros dois estados. */
.proj-dash-gauge-marker.is-over,
.proj-dash-gauge-marker.is-behind { color: #ef4444; }
html[data-theme="light"] .proj-dash-gauge-marker.is-over,
html[data-theme="light"] .proj-dash-gauge-marker.is-behind { color: #dc2626; }
.proj-dash-gauge-marker.is-over .proj-dash-gauge-marker-dot,
.proj-dash-gauge-marker.is-behind .proj-dash-gauge-marker-dot { r: 7; }
.proj-dash-gauge-marker.is-over .proj-dash-gauge-marker-title,
.proj-dash-gauge-marker.is-behind .proj-dash-gauge-marker-title { fill: currentColor; }
/* Badge "+X pp" que aparece no label quando estourou. */
.proj-dash-gauge-marker-over {
  fill: currentColor;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
/* Miolo: TOTAL SOW + valor grande — via <text> pra ficar sempre
   centralizado no arco independente do container. */
.proj-dash-gauge-center-svg-label {
  fill: var(--text-muted, #94a3b8);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.proj-dash-gauge-center-svg-value {
  fill: var(--text, #f1f5f9);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .proj-dash-gauge-center-svg-value { fill: #141e37; }

/* Link do header do card (ex.: "Abrir →" pra cronograma / RH). */
.proj-dash-card-link {
  text-decoration: none;
  transition: color 120ms ease;
}
.proj-dash-card-link:hover { color: var(--primary, #a5b4fc); opacity: 1; }

/* ---- Card: Cronograma (Realizado × Baseline) ----
   Layout via .proj-dash-fin-gauge (compartilhado com o financeiro).
   Aqui só as especificidades: swatches, cores do delta central e
   ajuste fino do miolo pro pill BLUF do delta.                     */
.proj-dash-swatch--current  { background: #86efac; }
.proj-dash-swatch--baseline { background: #c9b88a; }
html[data-theme="light"] .proj-dash-swatch--current  { background: #16a34a; }
html[data-theme="light"] .proj-dash-swatch--baseline { background: #6b5a2d; }

/* Miolo do gauge do cronograma: ganha 1px extra de bottom pro delta
   (mais alto que "R$ XX K") não colar no arco. */
.proj-dash-gauge-center--sched { bottom: 4px; }

/* Unidade "pp" pequenininha ao lado do número do delta. */
.proj-dash-gauge-center-unit {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-left: 2px;
  opacity: 0.85;
  vertical-align: 1px;
}

/* Cores do delta funcionam pros dois formatos: <span> avulso (legado) e
   .proj-dash-gauge-center-value (novo miolo). Herdo font-* do container
   pra manter a hierarquia visual do miolo (20px bold). */
.proj-dash-delta--ahead   { color: #86efac; }
.proj-dash-delta--behind  { color: #ef4444; }
.proj-dash-delta--ontime  {
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
}
/* Estado "no ritmo": em vez de texto, um check com brilho estilo
   sabre-de-luz (cor de sucesso do tema) — leitura instantanea de "OK". */
.proj-dash-delta-ok {
  display: inline-flex;
  align-items: center;
  color: var(--success, #5DD39E);
  filter: drop-shadow(0 0 6px rgba(93, 211, 158, 0.55));
}
html[data-theme="light"] .proj-dash-delta-ok {
  color: #16a34a;
  filter: drop-shadow(0 0 5px rgba(22, 163, 74, 0.35));
}
.proj-dash-delta--none    { color: var(--text-muted, #94a3b8); }
html[data-theme="light"] .proj-dash-delta--ahead  { color: #16a34a; }
html[data-theme="light"] .proj-dash-delta--behind { color: #dc2626; }

/* Variante SVG-text: quando o miolo do gauge do cronograma passou a
   ser um <text> SVG (no lugar de <span> HTML) pra ficar centralizado
   no arco independente do container, `color` deixa de valer — SVG
   pinta texto via `fill`. Duplicamos as regras de cor pra ambas as
   propriedades. Font-size do "no ritmo" também precisa vir menor
   porque a fonte padrao do miolo é 20px (grande demais pra frase). */
text.proj-dash-delta--ahead  { fill: #86efac; }
text.proj-dash-delta--behind { fill: #ef4444; }
text.proj-dash-delta--none   { fill: var(--text-muted, #94a3b8); }
text.proj-dash-delta--ontime {
  fill: var(--text-muted, #94a3b8);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: lowercase;
}
html[data-theme="light"] text.proj-dash-delta--ahead  { fill: #16a34a; }
html[data-theme="light"] text.proj-dash-delta--behind { fill: #dc2626; }

/* ---- Card: Assignments Ativos ---- */
.proj-dash-assn-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.proj-dash-assn-count-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--text, #e5e7eb);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.5px;
}
.proj-dash-assn-count-label {
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
}
.proj-dash-assn-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.proj-dash-assn-item {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  background: transparent;
  border: 1.5px solid transparent;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.proj-dash-assn-item:hover,
.proj-dash-assn-item:focus-visible {
  transform: translateY(-1px) scale(1.08);
  border-color: rgba(147, 197, 253, 0.7);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
  z-index: 2;
}
.proj-dash-assn-avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  background: rgba(148,163,184,0.16);
}
.proj-dash-assn-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, rgba(147, 197, 253, 0.22), rgba(147, 197, 253, 0.08));
}
html[data-theme="light"] .proj-dash-assn-avatar--initials {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.10), rgba(29, 78, 216, 0.02));
  color: #1d4ed8;
}

/* --- Light mode: contraste dos avatares (imagens) ---
   No dark mode a borda dos avatares fica transparente (1.5px solid
   transparent). No fundo CLARO do card as imagens se perdiam sem uma
   linha que as separasse. Damos um anel ESCURO a cada avatar — mas só
   aos que NÃO têm o anel de alerta vermelho (`--alert`), pra não
   sobrescrevê-lo. Também reforçamos o contorno do avatar grande do
   popover e escurecemos o fundo do placeholder. */
html[data-theme="light"] .proj-dash-assn-item:not(.proj-dash-assn-item--alert) {
  border-color: rgba(20, 30, 55, 0.55);
}
html[data-theme="light"] .proj-dash-assn-item:not(.proj-dash-assn-item--alert):hover,
html[data-theme="light"] .proj-dash-assn-item:not(.proj-dash-assn-item--alert):focus-visible {
  border-color: rgba(20, 30, 55, 0.8);
}
html[data-theme="light"] .proj-dash-assn-avatar {
  background: rgba(20, 30, 55, 0.12);
}
html[data-theme="light"] .proj-dash-assn-popover-avatar {
  box-shadow: 0 0 0 1.5px rgba(20, 30, 55, 0.55);
}

/* --- Light mode: ícones de marca ---
   `--primary` do Obi-Wan é #3FA9F5 (azul-lightsaber, claro). Sobre o
   fundo branco do tema claro os ícones dos cards/nav ficavam lavados.
   Escurecemos SÓ o preenchimento desses ícones no light mode (sem tocar
   no dark, na cor de marca de bordas/botões, nem em ícones que já têm
   cor própria, ex.: ata-hero verde). Escopo restrito aos ícones de
   módulo e da nav ativa/hover. */
html[data-theme="light"] {
  --icon-brand:        #1668ab;  /* #3FA9F5 escurecido p/ fundo claro */
  --icon-brand-strong: #0f4f86;  /* hover/ativo ainda mais escuro */
}
html[data-theme="light"] .module-card .module-icon .icon {
  background-color: var(--icon-brand);
}
html[data-theme="light"] .module-card:hover .module-icon .icon {
  background-color: var(--icon-brand-strong);
}
html[data-theme="light"] .nav-item--icon:hover .icon,
html[data-theme="light"] .nav-item--icon.active .icon {
  background-color: var(--icon-brand-strong);
}
html[data-theme="light"] .prop-card--with-icon .prop-card-icon .icon {
  background-color: var(--icon-brand);
}

/* --- Alerta de divergência Assignment × Planejado (alocação diária) ---
   Quando o Planned Hours do PSA não bate com o Planejado do Project
   Planner, o avatar ganha um anel vermelho e o título recebe um badge
   contador. */
.proj-dash-assn-item--alert {
  border-color: #ef4444;
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.30);
}
.proj-dash-assn-item--alert:hover,
.proj-dash-assn-item--alert:focus-visible {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.45), 0 4px 12px rgba(15, 23, 42, 0.35);
}
.proj-dash-assn-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.16);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.5;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---- Popover "pic-in-pic" — clicando no avatar ---- */
/* Um único popover no card, posicionado absolutamente na página
   (top/left via JS) e ancorado próximo ao avatar clicado. Fica
   aberto até fechar (X, clique fora ou Escape) — comportamento
   diferente do tooltip por hover que existia antes. */
.proj-dash-assn-popover {
  position: absolute;
  z-index: 200;
  min-width: 280px;
  max-width: 340px;
  padding: 14px 14px 12px;
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 12px;
  color: var(--text, #e5e7eb);
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.proj-dash-assn-popover.is-open {
  opacity: 1;
  transform: translateY(0);
}
html[data-theme="light"] .proj-dash-assn-popover {
  background: #ffffff;
  border-color: rgba(20,30,55,0.12);
  box-shadow: 0 12px 32px rgba(20,30,55,0.18), 0 2px 6px rgba(20,30,55,0.08);
}
.proj-dash-assn-popover-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  color: var(--text-muted, #94a3b8);
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.proj-dash-assn-popover-close:hover {
  background: rgba(148,163,184,0.14);
  color: var(--text, #e5e7eb);
}
html[data-theme="light"] .proj-dash-assn-popover-close:hover {
  background: rgba(20,30,55,0.06);
  color: #141e37;
}
.proj-dash-assn-popover-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-right: 20px;
}
.proj-dash-assn-popover-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(148,163,184,0.16) center/cover no-repeat;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  flex-shrink: 0;
}
.proj-dash-assn-popover-titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.proj-dash-assn-popover-name {
  font-size: 13px;
  color: var(--text, #e5e7eb);
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-dash-assn-popover-role {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-dash-assn-popover-metrics {
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html[data-theme="light"] .proj-dash-assn-popover-metrics {
  border-top-color: rgba(20,30,55,0.08);
}
.proj-dash-assn-popover-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.proj-dash-assn-popover-metric dt {
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  letter-spacing: 0.2px;
}
.proj-dash-assn-popover-metric dd {
  margin: 0;
  font-size: 14px;
  color: var(--text, #e5e7eb);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.proj-dash-assn-popover-hint {
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
  letter-spacing: 0;
}

/* ---- Passador (switcher) por projeto — Obi-Wan --------------------
   Tira de abas por cima dos cards; alterna entre os projetos do
   programa (Agentes 1, Agentes 2, …). Rola horizontal quando não
   cabe. O painel ativo aparece; os demais ficam com [hidden]. */
.proj-dash--switch { margin: 6px 0 12px; }
/* Barra de ação: botão "Atualizar com Salesforce (Org62)" + heartbeat,
   no topo do painel do projeto. */
.proj-dash-sync {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 12px;
}
.proj-dash-sync-hint {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted, #94a3b8);
  max-width: 460px;
}
.proj-dash-sync-hint strong { color: var(--text, #e2e8f0); font-weight: 600; }

.proj-dash-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 2px;
}
.proj-dash-switch-btn {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  background: var(--card-bg, #0f172a);
  color: var(--text-muted, #94a3b8);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease,
              background-color 120ms ease, box-shadow 120ms ease;
}
.proj-dash-switch-btn:hover {
  color: var(--text, #e5e7eb);
  border-color: var(--primary, #3FA9F5);
}
.proj-dash-switch-btn:focus-visible {
  outline: 2px solid var(--primary, #3FA9F5);
  outline-offset: 2px;
}
.proj-dash-switch-btn.is-active {
  color: #fff;
  border-color: var(--primary, #3FA9F5);
  background: var(--primary, #3FA9F5);
  box-shadow: 0 2px 10px rgba(63, 169, 245, 0.28);
}
html[data-theme="light"] .proj-dash-switch-btn.is-active {
  color: #fff;
}

/* Painéis: só o ativo é exibido (o [hidden] do HTML já esconde os
   demais; a classe reforça e serve de hook pra transições futuras). */
.proj-dash-panel { display: none; }
.proj-dash-panel.is-active { display: block; }

/* Estado vazio do card de assignments (projeto sem alocados ativos). */
.proj-dash-assn-empty {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  opacity: 0.85;
}

/* ---- Card SOW: barras horizontais (substituem o relógio) ----------
   Cada métrica é uma barra 0→SOW. Robusto e legível: nenhuma cor some,
   nada se sobrepõe. Barra estourada (>100%) enche 100% e a linha ganha
   estado .is-over (vermelho + badge "+X pp"). */
.proj-dash-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.proj-dash-bars-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
html[data-theme="light"] .proj-dash-bars-total {
  border-bottom-color: rgba(20,30,55,0.08);
}
.proj-dash-bars-total-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
}
.proj-dash-bars-total-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text, #f1f5f9);
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .proj-dash-bars-total-value { color: #141e37; }

.proj-dash-bar-row { display: flex; flex-direction: column; gap: 4px; }
.proj-dash-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  /* Card estreito (1/3, igual ao Solar) + valor cheio "R$ 2.339.651,60"
     não cabe na mesma linha do título → deixa o bloco de números quebrar
     pra baixo em vez de sobrepor o rótulo (fim do "trepa-trepa"). */
  flex-wrap: wrap;
}
.proj-dash-bar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text, #e5e7eb);
  min-width: 0;
  flex: 1 1 auto;
}
html[data-theme="light"] .proj-dash-bar-title { color: #141e37; }
.proj-dash-bar-sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted, #94a3b8);
  opacity: 0.85;
  margin-left: 6px;
}
.proj-dash-bar-nums {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.proj-dash-bar-value {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.proj-dash-bar-pct {
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
}
/* Cor do valor casa com a barra (amarra número ↔ barra). */
.proj-dash-bar-row[data-metric="actual"]  .proj-dash-bar-value { color: #86efac; }
.proj-dash-bar-row[data-metric="planned"] .proj-dash-bar-value { color: #fbbf24; }
.proj-dash-bar-row[data-metric="planner"] .proj-dash-bar-value { color: #93c5fd; }
.proj-dash-bar-row[data-metric="faturado"] .proj-dash-bar-value { color: #38bdf8; }
html[data-theme="light"] .proj-dash-bar-row[data-metric="actual"]  .proj-dash-bar-value { color: #16a34a; }
html[data-theme="light"] .proj-dash-bar-row[data-metric="planned"] .proj-dash-bar-value { color: #b45309; }
html[data-theme="light"] .proj-dash-bar-row[data-metric="planner"] .proj-dash-bar-value { color: #1d4ed8; }
html[data-theme="light"] .proj-dash-bar-row[data-metric="faturado"] .proj-dash-bar-value { color: #0369a1; }

.proj-dash-bar-track {
  position: relative;
  height: 9px;
  border-radius: 6px;
  background: var(--surface-alt, rgba(255,255,255,0.06));
  overflow: hidden;
}
html[data-theme="light"] .proj-dash-bar-track { background: rgba(20,30,55,0.08); }
.proj-dash-bar-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  transition: width 320ms ease-out;
}
.proj-dash-bar-row[data-metric="actual"]  .proj-dash-bar-fill { background: #86efac; }
.proj-dash-bar-row[data-metric="planned"] .proj-dash-bar-fill { background: #fbbf24; }
.proj-dash-bar-row[data-metric="planner"] .proj-dash-bar-fill { background: #93c5fd; }
.proj-dash-bar-row[data-metric="faturado"] .proj-dash-bar-fill { background: #38bdf8; }
html[data-theme="light"] .proj-dash-bar-row[data-metric="actual"]  .proj-dash-bar-fill { background: #16a34a; }
html[data-theme="light"] .proj-dash-bar-row[data-metric="planned"] .proj-dash-bar-fill { background: #b45309; }
html[data-theme="light"] .proj-dash-bar-row[data-metric="planner"] .proj-dash-bar-fill { background: #1d4ed8; }
html[data-theme="light"] .proj-dash-bar-row[data-metric="faturado"] .proj-dash-bar-fill { background: #0369a1; }

/* Estouro do teto (>100%): barra cheia vermelha + números vermelhos. */
.proj-dash-bar-row.is-over .proj-dash-bar-fill { background: #ef4444 !important; }
.proj-dash-bar-row.is-over .proj-dash-bar-value,
.proj-dash-bar-row.is-over .proj-dash-bar-pct { color: #ef4444; }
html[data-theme="light"] .proj-dash-bar-row.is-over .proj-dash-bar-fill { background: #dc2626 !important; }
html[data-theme="light"] .proj-dash-bar-row.is-over .proj-dash-bar-value,
html[data-theme="light"] .proj-dash-bar-row.is-over .proj-dash-bar-pct { color: #dc2626; }

/* ── Card Cronograma (Realizado × Linha de Base) ─────────────
   A barra Realizado herda a cor do status do delta (verde adiantado,
   azul no ritmo/indefinido, vermelho atrasado). A Linha de Base fica
   neutra e tracejada, lida como "alvo/referência". Espelha o Solar. */
.proj-dash-bar-row--sched.proj-dash-bar-row--ahead   .proj-dash-bar-fill { background: #86efac; }
.proj-dash-bar-row--sched.proj-dash-bar-row--ontime  .proj-dash-bar-fill,
.proj-dash-bar-row--sched.proj-dash-bar-row--unknown .proj-dash-bar-fill { background: #38bdf8; }
.proj-dash-bar-row--sched.proj-dash-bar-row--behind  .proj-dash-bar-fill { background: #ef4444; }
.proj-dash-bar-row--sched.proj-dash-bar-row--ahead   .proj-dash-bar-pct { color: #86efac; }
.proj-dash-bar-row--sched.proj-dash-bar-row--behind  .proj-dash-bar-pct { color: #ef4444; }
html[data-theme="light"] .proj-dash-bar-row--sched.proj-dash-bar-row--ahead   .proj-dash-bar-fill { background: #16a34a; }
html[data-theme="light"] .proj-dash-bar-row--sched.proj-dash-bar-row--ontime  .proj-dash-bar-fill,
html[data-theme="light"] .proj-dash-bar-row--sched.proj-dash-bar-row--unknown .proj-dash-bar-fill { background: #0369a1; }
html[data-theme="light"] .proj-dash-bar-row--sched.proj-dash-bar-row--behind  .proj-dash-bar-fill { background: #dc2626; }
html[data-theme="light"] .proj-dash-bar-row--sched.proj-dash-bar-row--ahead   .proj-dash-bar-pct { color: #16a34a; }
html[data-theme="light"] .proj-dash-bar-row--sched.proj-dash-bar-row--behind  .proj-dash-bar-pct { color: #dc2626; }
/* Linha de Base: preenchimento tracejado neutro (referência). */
.proj-dash-bar-row--baseline .proj-dash-bar-fill {
  background: repeating-linear-gradient(
    90deg,
    var(--text-muted, #94a3b8) 0, var(--text-muted, #94a3b8) 6px,
    transparent 6px, transparent 11px);
  opacity: 0.8;
}

/* ── Card Margem (esperada × atual × projetada) ─────────────── */
.proj-dash-margins { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.proj-dash-margin-row { display: flex; flex-direction: column; gap: 2px; }
.proj-dash-margin-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.proj-dash-margin-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--text, #e5e7eb); min-width: 0;
}
html[data-theme="light"] .proj-dash-margin-title { color: #141e37; }
.proj-dash-margin-sub {
  font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text-muted, #94a3b8); opacity: 0.85; margin-left: 6px;
}
.proj-dash-margin-pct {
  font-size: 21px; font-weight: 800; letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.proj-dash-margin-value {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-muted, #94a3b8);
}
.proj-dash-margin-row[data-metric="esperada"]  .proj-dash-margin-pct { color: #93c5fd; }
.proj-dash-margin-row[data-metric="atual"]     .proj-dash-margin-pct { color: #86efac; }
.proj-dash-margin-row[data-metric="projetada"] .proj-dash-margin-pct { color: #fbbf24; }
html[data-theme="light"] .proj-dash-margin-row[data-metric="esperada"]  .proj-dash-margin-pct { color: #1d4ed8; }
html[data-theme="light"] .proj-dash-margin-row[data-metric="atual"]     .proj-dash-margin-pct { color: #16a34a; }
html[data-theme="light"] .proj-dash-margin-row[data-metric="projetada"] .proj-dash-margin-pct { color: #b45309; }
.proj-dash-margin-row.is-neg .proj-dash-margin-pct,
.proj-dash-margin-row.is-neg .proj-dash-margin-value { color: #ef4444 !important; }
html[data-theme="light"] .proj-dash-margin-row.is-neg .proj-dash-margin-pct,
html[data-theme="light"] .proj-dash-margin-row.is-neg .proj-dash-margin-value { color: #dc2626 !important; }

/* ─── Sumário Executivo (Obi-Wan) — portado do Solar ───────────────── */
.exec-summary {
  margin: 6px 0 10px;
  padding: 14px 16px 12px;
  background: var(--card-bg, #0f172a);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  position: relative;
}
html[data-theme="light"] .exec-summary {
  background: #ffffff;
  border-color: rgba(20,30,55,0.10);
}
.exec-summary-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.exec-summary-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted, #94a3b8);
}
.exec-summary-meta {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  flex-grow: 1;
  min-width: 0;
}
.exec-summary-meta time { font-variant-numeric: tabular-nums; }
.exec-summary-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-left: 2px;
  vertical-align: baseline;
}
.exec-summary-badge--auto {
  background: rgba(147,197,253,0.16);
  color: #93c5fd;
  border: 1px solid rgba(147,197,253,0.30);
}
.exec-summary-badge--manual {
  background: rgba(134,239,172,0.14);
  color: #86efac;
  border: 1px solid rgba(134,239,172,0.32);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
html[data-theme="light"] .exec-summary-badge--auto {
  background: rgba(29,78,216,0.10);
  color: #1d4ed8;
  border-color: rgba(29,78,216,0.24);
}
html[data-theme="light"] .exec-summary-badge--manual {
  background: rgba(22,163,74,0.10);
  color: #16a34a;
  border-color: rgba(22,163,74,0.28);
}
.exec-summary-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.exec-summary-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.14));
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.exec-summary-btn:hover {
  background: rgba(148,163,184,0.10);
  color: var(--text, #e5e7eb);
  border-color: rgba(255,255,255,0.20);
}
html[data-theme="light"] .exec-summary-btn {
  color: #475569;
  border-color: rgba(20,30,55,0.14);
}
html[data-theme="light"] .exec-summary-btn:hover {
  background: rgba(20,30,55,0.05);
  color: #141e37;
  border-color: rgba(20,30,55,0.24);
}
.exec-summary-btn--save {
  color: #86efac;
  border-color: rgba(134,239,172,0.35);
}
.exec-summary-btn--save:hover {
  background: rgba(134,239,172,0.10);
  color: #86efac;
  border-color: rgba(134,239,172,0.55);
}
html[data-theme="light"] .exec-summary-btn--save {
  color: #16a34a;
  border-color: rgba(22,163,74,0.30);
}
html[data-theme="light"] .exec-summary-btn--save:hover {
  background: rgba(22,163,74,0.06);
  color: #16a34a;
}
.exec-summary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.exec-summary-alert {
  margin: 6px 0 4px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(252,165,165,0.10);
  border: 1px solid rgba(252,165,165,0.30);
  color: #fca5a5;
  font-size: 11px;
  cursor: help;
}
html[data-theme="light"] .exec-summary-alert {
  background: rgba(220,38,38,0.06);
  border-color: rgba(220,38,38,0.20);
  color: #dc2626;
}
.exec-summary-body { min-height: 0; }
.exec-summary-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text, #e5e7eb);
}
html[data-theme="light"] .exec-summary-text { color: #141e37; }
/* O sumário são 6 bullets curtos. Em duas colunas a partir de 900px:
   com uma coluna só, cada frase ocupa metade da linha e sobra um rio
   de espaço branco à direita. */
.exec-summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px 28px;
}
@media (min-width: 900px) {
  .exec-summary-list { grid-template-columns: 1fr 1fr; }
}
.exec-summary-bullet {
  position: relative;
  padding-left: 14px;
}
.exec-summary-bullet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary, #93c5fd);
}
.exec-summary-para { margin: 0; }
.exec-summary-para + .exec-summary-para { margin-top: 10px; }
.exec-summary-placeholder {
  color: var(--text-muted, #94a3b8);
  font-style: italic;
  font-size: 13px;
}
.exec-summary-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.exec-summary-edit-form[hidden],
.exec-summary-text[hidden] { display: none !important; }
.exec-summary-editor {
  width: 100%;
  min-height: 90px;
  padding: 8px 10px;
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.14));
  background: rgba(148,163,184,0.06);
  color: var(--text, #e5e7eb);
  resize: vertical;
  font-family: inherit;
}
.exec-summary-editor:focus {
  outline: none;
  border-color: rgba(147,197,253,0.55);
  background: rgba(148,163,184,0.10);
}
html[data-theme="light"] .exec-summary-editor {
  background: #f8fafc;
  border-color: rgba(20,30,55,0.14);
  color: #141e37;
}
html[data-theme="light"] .exec-summary-editor:focus {
  border-color: #1d4ed8;
  background: #ffffff;
}
.exec-summary-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.exec-summary-counter {
  margin-right: auto;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
}
.exec-summary-edit-hint {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.4;
  padding-top: 2px;
}
.exec-summary-edit-hint em {
  font-style: normal;
  font-weight: 600;
  color: var(--text, #e5e7eb);
}
html[data-theme="light"] .exec-summary-edit-hint em { color: #141e37; }

/* Fallback: escritório sozinho (sem dashboard) — raro no Obi-Wan. */
.portal-office-row {
  margin: 14px 0 18px;
  display: flex;
  justify-content: flex-start;
}


/* ===== Cronograma do Projeto (portado do Solar p/ Obi-Wan, ago/2026) ===== */
/* ═══════════════════════════════════════════════════════════════════════
   Cronograma do Projeto (Solar-only) — lista hierarquica EAP + atividades

   Iteracao 2 (jun/2026): tema 'whiteboard' (fundo branco, grid estilo
   Excel, zebra, hover) ativado via .schedule-page--whiteboard. O bloco
   antigo (.schedule-page sem o modifier) ficou pra eventual fallback
   futuro, mas hoje sempre rodamos com o whiteboard.
   ═══════════════════════════════════════════════════════════════════════ */

.schedule-page .sched-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 18px 0 22px;
}
.schedule-page .sched-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.schedule-page .sched-kpi-label {
  color: var(--text-muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.schedule-page .sched-kpi-value {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
}
.schedule-page .sched-kpi--act .sched-kpi-value {
  color: #5DD39E;
}

/* ────────────────────────────────────────────────────────────────
   CRONOGRAMA DE MARCOS — visao executiva plana, so marcos do
   projeto em ordem cronologica. Layout limpo focado em status e
   datas. Compartilha tokens do schedule (radius, paleta), mas
   independente do `.schedule-page` pra evitar bleed-over.
   ──────────────────────────────────────────────────────────────── */
.schedule-milestones-page .sched-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 28px 22px;
  color: var(--text-muted);
  text-align: center;
  margin: 22px 0;
}
.schedule-milestones-page .sched-ms-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 22px;
}
.schedule-milestones-page .sched-ms-kpi {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
}
.schedule-milestones-page .sched-ms-kpi__num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.schedule-milestones-page .sched-ms-kpi__lbl {
  font-size: 11.5px;
  margin-top: 6px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.schedule-milestones-page .sched-ms-kpi--done {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.35);
}
.schedule-milestones-page .sched-ms-kpi--done .sched-ms-kpi__num { color: #60A5FA; }
.schedule-milestones-page .sched-ms-kpi--late {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.40);
}
.schedule-milestones-page .sched-ms-kpi--late .sched-ms-kpi__num { color: #F87171; }
.schedule-milestones-page .sched-ms-kpi--next {
  background: rgba(110, 231, 183, 0.10);
  border-color: rgba(110, 231, 183, 0.35);
}
.schedule-milestones-page .sched-ms-kpi--next .sched-ms-kpi__num { color: #6EE7B7; }

.schedule-milestones-page .sched-ms-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.schedule-milestones-page .sched-ms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.schedule-milestones-page .sched-ms-table thead th {
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
}
.schedule-milestones-page .sched-ms-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.schedule-milestones-page .sched-ms-table tbody tr:last-child td {
  border-bottom: none;
}
.schedule-milestones-page .sched-ms-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}
.schedule-milestones-page .sched-ms-col-id {
  width: 110px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 12.5px;
}
.schedule-milestones-page .sched-ms-col-name {
  text-align: left;
  font-weight: 500;
  color: var(--text);
}
.schedule-milestones-page .sched-ms-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: #F0B429;
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-right: 10px;
  vertical-align: middle;
}
.schedule-milestones-page .sched-ms-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 7px;
  background: rgba(240, 180, 41, 0.18);
  color: #F0B429;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(240, 180, 41, 0.40);
  vertical-align: middle;
}
.schedule-milestones-page .sched-ms-col-date {
  width: 140px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.schedule-milestones-page .sched-ms-empty {
  color: var(--text-muted);
  opacity: 0.45;
}
.schedule-milestones-page .sched-ms-col-status {
  width: 150px;
  text-align: center;
}
.schedule-milestones-page .sched-ms-status {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border: 1px solid transparent;
  min-width: 110px;
}
.schedule-milestones-page .sched-ms-status--future {
  background: rgba(110, 231, 183, 0.18);
  color: #6EE7B7;
  border-color: rgba(110, 231, 183, 0.45);
}
.schedule-milestones-page .sched-ms-status--progress {
  background: rgba(252, 211, 77, 0.18);
  color: #FCD34D;
  border-color: rgba(252, 211, 77, 0.45);
}
.schedule-milestones-page .sched-ms-status--late {
  background: rgba(239, 68, 68, 0.18);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.45);
}
.schedule-milestones-page .sched-ms-status--done {
  background: rgba(96, 165, 250, 0.18);
  color: #93C5FD;
  border-color: rgba(96, 165, 250, 0.45);
}
.schedule-milestones-page .sched-ms-row--fixed td {
  background: rgba(240, 180, 41, 0.05);
}

/* ────────────────────────────────────────────────────────────────
   DIAGRAMA DE REDE (PDM) — visualizacao left-to-right com SVG
   inline. Fundo branco (whiteboard), nodes azuis-bebe pra
   atividades / amarelo-mostarda pra marcos / VERMELHO pra
   criticos (cor mais saturada nos dois lados — caixa e seta).
   ──────────────────────────────────────────────────────────────── */
.schedule-network-page .sched-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 28px 22px;
  color: var(--text-muted);
  text-align: center;
  margin: 22px 0;
}
.schedule-network-page .net-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 18px 0 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.schedule-network-page .net-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}
.schedule-network-page .net-summary__big {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.schedule-network-page .net-summary__big--crit { color: #c11e1e; }
.schedule-network-page .net-summary__lbl {
  font-size: 12px;
  letter-spacing: 0.4px;
}
.schedule-network-page .net-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}
.schedule-network-page .net-legend__hint {
  font-style: italic;
  opacity: 0.75;
  margin-left: 4px;
}
.schedule-network-page .net-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.schedule-network-page .net-legend__sw {
  display: inline-block;
  width: 16px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid currentColor;
}
.schedule-network-page .net-legend__sw--node {
  background: #DCEEFB;
  border-color: #5B8BCC;
  color: #5B8BCC;
}
.schedule-network-page .net-legend__sw--ms {
  background: #FCE9A0;
  border-color: #8C6B17;
  color: #8C6B17;
  transform: rotate(45deg);
  width: 12px;
  height: 12px;
}
.schedule-network-page .net-legend__sw--crit {
  background: #FBD8D8;
  border-color: #c11e1e;
  color: #c11e1e;
}

.schedule-network-page .net-canvas-wrap {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  overflow: auto;
  max-height: 80vh;
}
.schedule-network-page .net-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 320px;
}

/* ── Nodes ───────────────────────────────────────────────────── */
.schedule-network-page .net-node {
  cursor: pointer;
  outline: none;
}
.schedule-network-page .net-node-shape {
  fill: #DCEEFB;
  stroke: #5B8BCC;
  stroke-width: 1.5;
  transition: filter 0.15s, stroke-width 0.15s;
}
.schedule-network-page .net-node:hover .net-node-shape {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
  stroke-width: 2.5;
}
.schedule-network-page .net-node:focus-visible .net-node-shape,
.schedule-network-page .net-node--selected .net-node-shape {
  filter: drop-shadow(0 0 0 3px rgba(63, 169, 245, 0.45));
  stroke-width: 3;
}
.schedule-network-page .net-node--milestone .net-node-shape {
  fill: #FCE9A0;
  stroke: #8C6B17;
}
.schedule-network-page .net-node--critical .net-node-shape {
  fill: #FBD8D8;
  stroke: #c11e1e;
  stroke-width: 2;
}
.schedule-network-page .net-node-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  fill: #2C5282;
  text-anchor: start;
  alignment-baseline: middle;
  dominant-baseline: middle;
}
.schedule-network-page .net-node-id--big {
  font-size: 16px;
  fill: #2C5282;
  text-anchor: middle;
}
.schedule-network-page .net-node--milestone .net-node-id,
.schedule-network-page .net-node--milestone .net-node-id--big {
  fill: #8C6B17;
}
.schedule-network-page .net-node--critical .net-node-id,
.schedule-network-page .net-node--critical .net-node-id--big {
  fill: #c11e1e;
}
.schedule-network-page .net-node-name {
  font-size: 11.5px;
  font-weight: 500;
  fill: #1f2937;
  text-anchor: middle;
  alignment-baseline: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.schedule-network-page .net-node-name--small {
  font-size: 10.5px;
  fill: #4B5563;
}
.schedule-network-page .net-node-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  fill: #4B5563;
  alignment-baseline: middle;
  dominant-baseline: middle;
}
.schedule-network-page .net-node-meta--tl,
.schedule-network-page .net-node-meta--bl { text-anchor: start; }
.schedule-network-page .net-node-meta--tc,
.schedule-network-page .net-node-meta--bc {
  text-anchor: middle;
  font-weight: 700;
  fill: #1f2937;
}
.schedule-network-page .net-node-meta--tr,
.schedule-network-page .net-node-meta--br { text-anchor: end; }
.schedule-network-page .net-node--critical .net-node-meta--bc {
  fill: #c11e1e;
}
.schedule-network-page .net-node-sep {
  stroke: rgba(0, 0, 0, 0.15);
  stroke-width: 0.6;
}
.schedule-network-page .net-node--critical .net-node-sep {
  stroke: rgba(193, 30, 30, 0.30);
}

/* ── Edges ───────────────────────────────────────────────────── */
.schedule-network-page .net-edge {
  stroke: #5b6473;
  stroke-width: 1.4;
  opacity: 0.85;
  transition: stroke-width 0.15s, opacity 0.15s;
}
.schedule-network-page .net-edge:hover {
  stroke-width: 2.4;
  opacity: 1;
}
.schedule-network-page .net-edge--critical {
  stroke: #c11e1e;
  stroke-width: 2.4;
  opacity: 1;
}
.schedule-network-page .net-edge-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  fill: #6b7280;
  text-anchor: middle;
}

.schedule-network-page .net-foot {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Popover de detalhes (clique no nó) ──────────────────────── */
.net-popover {
  position: absolute;
  z-index: 9999;
  min-width: 280px;
  max-width: 340px;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 12px 14px;
  font-size: 13px;
  animation: netPopFade 0.12s ease-out;
}
.net-popover--critical {
  border-color: #c11e1e;
  box-shadow: 0 10px 30px rgba(193, 30, 30, 0.22), 0 0 0 1px #c11e1e inset;
}
@keyframes netPopFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.net-popover__close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.net-popover__close:hover { color: #1f2937; background: #f3f4f6; }
.net-popover__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 22px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 8px;
}
.net-popover__seq {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: #3b82f6;
  font-size: 14px;
}
.net-popover__name {
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.net-popover__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #DCEEFB;
  color: #1e40af;
}
.net-popover__tag--ms { background: #fef3c7; color: #92400e; }
.net-popover__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px 4px;
}
.net-popover__cell {
  text-align: center;
  padding: 6px 4px;
  background: #f9fafb;
  border-radius: 6px;
}
.net-popover__lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 3px;
}
.net-popover__val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}
.net-popover__val--mid {
  font-size: 14px;
  color: #3b82f6;
}
.net-popover--critical .net-popover__val--mid { color: #c11e1e; }
.net-popover__crit {
  margin-top: 10px;
  padding: 7px 9px;
  background: #fef2f2;
  border-left: 3px solid #c11e1e;
  border-radius: 4px;
  font-size: 11.5px;
  color: #7f1d1d;
  display: flex;
  align-items: center;
  gap: 6px;
}
.net-popover__crit-dot { color: #c11e1e; font-size: 14px; }

/* Original schedule-page kept below: */
.schedule-page .sched-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 22px;
  color: var(--text-muted);
  text-align: center;
  margin: 22px 0;
}

.schedule-page .sched-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  /* Scroll horizontal quando o total das colunas (~1640px com a
     coluna Estrutura em 360px) ultrapassar a viewport — preserva o
     layout fixo e a leitura sem reflow.
     Scroll vertical com max-height pra que o thead fique fixo (via
     position:sticky nas <th>) enquanto o user rola a lista de linhas
     longa. 240px reservados pro header da pagina + toolbar + paddings. */
  overflow: auto;
  max-height: calc(100vh - 240px);
  /* Respiro no fim do scroll pra que a barra de rolagem horizontal
     (overlay no macOS) nao fique POR CIMA da ultima linha (ex.: "Fim
     do Projeto"). O padding vive dentro da area rolavel, entao so
     aparece quando o user chega ao fim — sem gap visivel a mais. */
  padding-bottom: 16px;
}
.schedule-page .sched-table {
  width: 100%;
  /* border-collapse: separate (em vez de collapse) eh REQUISITO pra
     `position: sticky` em <th> funcionar corretamente em Chrome e
     Safari. Com collapse, o thead some quando o user rola o tbody
     pra baixo. As bordas individuais ficam declaradas em UM SO lado
     de cada cell (border-bottom no thead, border-right/bottom no
     tbody) pra nao virarem duplas. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  /* Fixed layout pra que widths das <col>s sejam respeitadas: assim
     a coluna Estrutura tem largura controlada (com truncate via
     ellipsis no nome) e nao 'estoura' quando o nome eh longo. */
  table-layout: fixed;
}
.schedule-page .sched-table thead th {
  text-align: center;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  /* Sticky pra travar o cabecalho enquanto o user rola verticalmente
     dentro do .sched-table-wrap. Background opaco (definido acima)
     eh necessario pra cobrir as linhas que passam por baixo. */
  position: sticky;
  top: 0;
  z-index: 5;
}
/* Segunda linha do cabecalho (Início/Fim/Duração dentro de cada
   grupo) precisa de offset = altura da 1a linha pra ficar abaixo
   dela. As celulas rowspan=2 (ID/Estrutura/Tipo/Predecessoras/
   Actions) ficam todas na 1a tr e ja seguem o top:0 padrao. */
.schedule-page .sched-table thead .sched-thead-fields th {
  top: 36px;
  z-index: 4;
}
/* Cabecalho 'Descricao' centralizado igual aos demais (consistencia
   visual). Os dados (td.sched-col-name) seguem left-aligned via
   regra propria — sao textos longos com hierarquia/indent, leem
   melhor a esquerda. */
.schedule-page .sched-table thead th.sched-col-name {
  text-align: center;
}
/* Coluna ID — sequencial 1..N. Estreita, centrada, com numeros
   tabulares pra alinhar 1/10/100 perfeitamente.
   Width/padding aplicam em th e td (afetam a coluna inteira), MAS
   color/font-weight ficam restritos a td pra que o cabecalho
   (th.sched-col-id 'ID') herde a estetica padrao do thead (cor +
   peso iguais a 'DESCRICAO', 'TIPO', etc.). Sem essa separacao, o
   ID no header ficava cinza-marrom mais leve e quebrava o padrao. */
.schedule-page .sched-col-id {
  width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.schedule-page td.sched-col-id {
  color: var(--text-muted);
  font-weight: 500;
}
/* Coluna Estrutura — largura controlada via CSS var (default 360px)
   pra permitir truncate com ellipsis. Resizable: o user arrasta a
   borda direita do header (resizer span) pra esticar e ler nomes
   longos. Largura persistida em localStorage entre sessoes. */
.schedule-page .sched-col-name    { width: var(--sched-col-name-width, 360px); }
.schedule-page .sched-col-resp    { width: 180px; }
.schedule-page .sched-col-type    { width: 130px; text-align: center; }
.schedule-page .sched-col-actions { width: 220px; text-align: right; }

/* ── Coluna Responsável (após Descrição) ─────────────────────────────
   Só ATIVIDADE é editável (célula clicável abre type-ahead). Marcos,
   entregas e projeto mostram "N/A" fixo. ago/2026. */
.schedule-page .sched-table thead th.sched-col-resp { text-align: center; }
.schedule-page .sched-resp-cell { text-align: left; vertical-align: middle; }
.schedule-page .sched-resp-cell--na { text-align: center; }
/* "N/A" (marcos/entregas/projeto): discreto mas LEGÍVEL sobre o fundo
   champagne/branco do whiteboard (o cinza-claro anterior — via
   var(--text-dim) que nem existe fora do dark theme — sumia). */
.schedule-page .sched-resp-na {
  color: #6b758c;
  font-size: 12px;
}
.schedule-page .sched-resp-cell--act { cursor: pointer; }
.schedule-page .sched-resp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  /* Nome real do responsável: cor de texto escura padrão do crono
     (mesma do .sched-name no whiteboard) — bom contraste (WCAG AA). */
  color: #1a2540;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.schedule-page .sched-resp-cell--act:hover .sched-resp-btn,
.schedule-page .sched-resp-btn:hover,
.schedule-page .sched-resp-btn:focus-visible {
  background: rgba(63, 169, 245, 0.12);
  border-color: rgba(63, 169, 245, 0.4);
  outline: none;
}
.schedule-page .sched-resp-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schedule-page .sched-resp-btn--empty .sched-resp-label {
  color: #6b758c;
  font-style: italic;
}
/* Mini-avatar (círculo) do responsável na célula. */
.schedule-page .sched-resp-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.schedule-page .sched-resp-avatar-img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  background: #e6e9f0;
}
.schedule-page .sched-resp-avatar-fallback {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #c7d2e6;
  color: #2a3550;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Popover do type-ahead (anexado ao <body>, position: fixed via JS). */
.sched-resp-pop {
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  max-width: 340px;
  background: var(--surface, #141d38);
  border: 1px solid var(--border, #243160);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  padding: 8px;
  color: var(--text, #e6e9f5);
}
.sched-resp-pop[hidden] { display: none; }
.sched-resp-pop-search { margin-bottom: 6px; }
.sched-resp-pop-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--border, #243160);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text, #e6e9f5);
  font: inherit;
  font-size: 13px;
}
.sched-resp-pop-input:focus {
  outline: none;
  border-color: rgba(63, 169, 245, 0.6);
}
.sched-resp-pop-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sched-resp-pop-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text, #e6e9f5);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sched-resp-pop-item:hover,
.sched-resp-pop-item:focus-visible {
  background: rgba(63, 169, 245, 0.16);
  outline: none;
}
.sched-resp-pop-item.is-current {
  background: rgba(63, 169, 245, 0.22);
}
.sched-resp-pop-item-av {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.sched-resp-pop-item-av .sched-resp-avatar-img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
}
.sched-resp-pop-item-av .sched-resp-avatar-fallback {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(63, 169, 245, 0.28);
  color: #e6e9f5;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.sched-resp-pop-item-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.sched-resp-pop-item-name { font-size: 13px; }
.sched-resp-pop-item-sub {
  font-size: 11px;
  color: var(--text-dim, #8a93b2);
}
.sched-resp-pop-empty {
  padding: 10px 9px;
  font-size: 12px;
  color: var(--text-dim, #8a93b2);
}
.sched-resp-pop-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border, #243160);
}
.sched-resp-pop-clear {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--border, #243160);
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim, #8a93b2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sched-resp-pop-clear:hover {
  background: rgba(247, 118, 118, 0.14);
  border-color: rgba(247, 118, 118, 0.4);
  color: #f88;
}

/* Truncate com ellipsis no nome (entrega/atividade/marco/projeto).
   Wrapper flex permite que o sched-name encolha (min-width:0) abaixo
   do tamanho do conteudo — sem isso, flex children nao truncam.
   Hover mostra o texto completo via `title` attribute (tooltip
   nativo do browser). */
.schedule-page .sched-name-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.schedule-page .sched-name-wrap .sched-toggle,
.schedule-page .sched-name-wrap .sched-code {
  flex: 0 0 auto;
}
.schedule-page .sched-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* sched-item-label nao precisa de truncate extra — o pai (.sched-name)
   ja trunca o overflow inteiro. Mas garante que nao "vaze" via display
   inline. */
.schedule-page .sched-item-label {
  white-space: nowrap;
}

/* Resizer pra arrastar a largura da coluna Estrutura. Fica na
   borda direita do header, invisivel ate hover. Cursor col-resize
   indica que eh arrastavel. JS atualiza --sched-col-name-width e
   persiste em localStorage.
   IMPORTANTE: aqui usamos 'sticky' (nao 'relative') pra preservar o
   cabecalho fixo. Sticky tambem cria contexto pra absolute children,
   entao o .sched-col-name-resizer (position:absolute) continua
   ancorado a esta th. Usar 'relative' aqui derrubava o sticky global
   so dessa coluna, fazendo o cabecalho da Estrutura 'subir' enquanto
   os outros ficavam fixos (bug visivel em scroll vertical). */
.schedule-page .sched-table thead th.sched-col-name {
  position: sticky;
  top: 0;
  z-index: 5;
}
.schedule-page .sched-col-name-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  user-select: none;
  z-index: 2;
}
.schedule-page .sched-col-name-resizer:hover,
.schedule-page .sched-col-name-resizer.is-dragging {
  background: rgba(63, 169, 245, 0.45);  /* primary tinted */
}
/* Durante drag: cursor global col-resize + previne selecao de texto. */
body.sched-resizing-col {
  cursor: col-resize !important;
  user-select: none;
}
body.sched-resizing-col * {
  cursor: col-resize !important;
}

/* ── Coluna Status ────────────────────────────────────────────────
   Entre Tipo e Predecessoras. Cores semanticas no fundo da celula
   inteira (pra ser legivel mesmo sem foco) + pill/select dentro.
   - Futuro:        verde (planejado, ainda nao comecou)
   - Em andamento:  amarelo ovo (execucao)
   - Atrasado:      vermelho (passou da data e nao concluiu)
   - Concluído:     azul bebe (encerrado)
   Variantes Atividade/Marco usam <select>; Entrega/Projeto usam
   <span class=pill>. Cores aplicadas no <td> por classe modificadora. */
.schedule-page .sched-col-status {
  width: 150px;
  text-align: center;
  padding: 4px 6px !important;
  vertical-align: middle;
}
/* Cores de fundo do TD (pra cobrir o background da linha inteira na
   coluna — destaca status mesmo quando o select esta colapsado). */
.schedule-page .sched-col-status--futuro     { background: #d6f5cc !important; }
.schedule-page .sched-col-status--andamento  { background: #fff3a8 !important; }
.schedule-page .sched-col-status--atrasado   { background: #f7c7c7 !important; }
.schedule-page .sched-col-status--concluido  { background: #cce3f5 !important; }

/* Pill estatica (entregas, projeto, marcos fixos). Mesmas dimensoes
   do <select> abaixo pra ficar visualmente IGUAL em qualquer linha
   (sem diferenca de tamanho entre "Atividade Futuro" e "Entrega
   Futuro" no print do user). A unica diferenca eh a setinha do
   dropdown — pill nao tem por nao ser editavel. */
.schedule-page .sched-status-pill {
  display: block;
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
  /* Padding right=20px espelha o reservado pro arrow do <select> nas
     linhas editaveis — assim o texto fica visualmente centralizado
     na mesma posicao das duas variantes (pill vs select). */
  padding: 2px 20px 2px 6px;
  box-sizing: border-box;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15px;
  white-space: nowrap;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.schedule-page .sched-status-pill--futuro {
  background: #b9e6a3; color: #2d5a1f; border-color: #87c46c;
}
.schedule-page .sched-status-pill--andamento {
  background: #ffe97a; color: #5f4d12; border-color: #c9a83a;
}
.schedule-page .sched-status-pill--atrasado {
  background: #f0a0a0; color: #6a1818; border-color: #c45050;
}
.schedule-page .sched-status-pill--concluido {
  background: #a9d3ef; color: #0f3d63; border-color: #5a9bc7;
}

/* Select editavel (atividades / marcos-item). Tamanho ocupa quase a
   celula inteira pra ficar fácil de clicar; aparencia segue o esquema
   de cores da variante atual. */
.schedule-page .sched-status-select {
  width: 100%;
  max-width: 120px;
  padding: 2px 6px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  background-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3e%3cpath d='M1 1l4 4 4-4' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 22px;
  transition: filter 0.12s, box-shadow 0.12s;
}
.schedule-page .sched-status-select:hover {
  filter: brightness(0.95);
}
.schedule-page .sched-status-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(63, 169, 245, 0.45);
}
.schedule-page .sched-status-select--futuro {
  background-color: #b9e6a3; color: #2d5a1f; border-color: #87c46c;
}
.schedule-page .sched-status-select--andamento {
  background-color: #ffe97a; color: #5f4d12; border-color: #c9a83a;
}
.schedule-page .sched-status-select--atrasado {
  background-color: #f0a0a0; color: #6a1818; border-color: #c45050;
}
.schedule-page .sched-status-select--concluido {
  background-color: #a9d3ef; color: #0f3d63; border-color: #5a9bc7;
}

/* ──────────────────────────────────────────────────────────────────
   Coluna % Conclusao — entre Status e Predecessoras. Numero estatico
   pra entregas/projeto/marcos; <select> 25/50/75 so pra atividades
   no estado 'Atrasada por nao encerrar' (override manual). Demais
   atividades exibem o valor derivado em readonly.
   ────────────────────────────────────────────────────────────────── */
.schedule-page .sched-col-progress {
  width: 92px;
  text-align: center;
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-variant-numeric: tabular-nums;
}
.schedule-page .sched-progress-num {
  display: inline-block;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  color: inherit;
}
.schedule-page .sched-progress-select {
  display: block;
  width: 100%;
  max-width: 78px;
  margin: 0 auto;
  padding: 3px 22px 3px 8px;
  box-sizing: border-box;
  border: 1px dashed rgba(0, 0, 0, 0.22);
  border-radius: 12px;
  background-color: #fff7d6;
  color: #6b4d00;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path d='M0 0l4 5 4-5z' fill='%236b4d00'/></svg>");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 8px 5px;
  transition: border-color 0.12s, background-color 0.12s;
}
.schedule-page .sched-progress-select:hover {
  border-color: rgba(0, 0, 0, 0.45);
  background-color: #ffefb5;
}
.schedule-page .sched-progress-select:focus {
  outline: none;
  border-color: var(--primary, #3FA9F5);
  background-color: #fff7d6;
}

/* ──────────────────────────────────────────────────────────────────
   Hide/Show de colunas via clique direito no cabecalho. Aplica-se a
   <col>, <th> e <td> que tem a class correspondente — o JS so adiciona
   .sched-col-is-hidden em cima dessas classes. !important pra vencer
   a regra base de `.sched-row > td` que define padding/background.
   ────────────────────────────────────────────────────────────────── */
.schedule-page .sched-table .sched-col-is-hidden {
  display: none !important;
}
/* Marker visual ">" no <th> imediatamente anterior a uma coluna
   escondida. Sinaliza "tem coluna a direita escondida" sem ocupar
   espaco util na celula. Usa pseudo-element pra ficar absoluto na
   borda direita do header. */
.schedule-page .sched-table thead th.sched-has-hidden-next {
  position: relative;
}
.schedule-page .sched-table thead th.sched-has-hidden-next::after {
  content: "▸";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--primary, #3FA9F5);
  opacity: 0.75;
  pointer-events: none;
  line-height: 1;
}
.schedule-page .sched-table thead th.sched-has-hidden-next:hover::after {
  opacity: 1;
}

/* Botao "Mostrar todas as colunas" — contador entre parenteses ao lado. */
.schedule-page .sched-unhide-count {
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
  font-size: 11px;
}

/* Context menu (clique direito no cabecalho). Posicionado absoluto
   em coordenadas absolutas (window.scrollX/Y + clientX/Y). */
.sched-context-menu {
  position: absolute;
  z-index: 9999;
  min-width: 200px;
  background: #1d2230;
  color: #e8eef9;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 4px 0;
  font-size: 13px;
  font-family: inherit;
}
.sched-context-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 14px;
  background: transparent;
  color: inherit;
  border: none;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  transition: background 0.1s;
}
.sched-context-menu-item:hover,
.sched-context-menu-item:focus {
  background: rgba(63, 169, 245, 0.18);
  outline: none;
}
.sched-context-menu-item--danger {
  color: #ff8a8a;
}
.sched-context-menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.18);
}

/* ────────────────────────────────────────────────────────────────
   HEADER MENU (popover Excel-style) — abre ao clicar no <th>.
   Contem (1) acoes de coluna (esconder), (2) filtro (texto OU
   lista de checkboxes), (3) reset global. Posicionado em coords
   absolutas via JS (window.scrollX/Y + getBoundingClientRect).
   ──────────────────────────────────────────────────────────────── */
.sched-header-menu {
  position: absolute;
  z-index: 10000;
  min-width: 240px;
  max-width: 320px;
  background: #1d2230;
  color: #e8eef9;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(0, 0, 0, 0.2) inset;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
  overflow: hidden;
}
.sched-header-menu__title {
  padding: 10px 14px 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #9aa8c0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.sched-header-menu__section {
  padding: 6px 0;
}
.sched-header-menu__sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0;
}
.sched-header-menu__action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  background: transparent;
  color: inherit;
  border: none;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  transition: background 0.1s;
}
.sched-header-menu__action:hover,
.sched-header-menu__action:focus {
  background: rgba(63, 169, 245, 0.18);
  outline: none;
}
.sched-header-menu__action--danger {
  color: #ff8a8a;
}
.sched-header-menu__action--danger:hover,
.sched-header-menu__action--danger:focus {
  background: rgba(239, 68, 68, 0.18);
}
.sched-header-menu__ico {
  display: inline-block;
  width: 16px;
  text-align: center;
  font-size: 13px;
  opacity: 0.8;
}
.sched-header-menu__filter {
  padding: 8px 12px 4px;
}
.sched-header-menu__subtitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9aa8c0;
  margin-bottom: 6px;
}
.sched-header-menu__search,
.sched-header-menu__text-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
  color: #e8eef9;
  font: inherit;
  font-size: 12.5px;
  outline: none;
  box-sizing: border-box;
}
.sched-header-menu__search:focus,
.sched-header-menu__text-input:focus {
  border-color: rgba(63, 169, 245, 0.6);
  box-shadow: 0 0 0 2px rgba(63, 169, 245, 0.2);
}
.sched-header-menu__list-toggles {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  margin: 6px 0 4px;
  color: #9aa8c0;
}
.sched-header-menu__link {
  background: none;
  border: none;
  color: #5cb1ff;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  padding: 0;
  text-decoration: underline;
}
.sched-header-menu__link:hover {
  color: #8acaff;
}
.sched-header-menu__list {
  max-height: 220px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 2px 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
}
.sched-header-menu__check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12.5px;
  user-select: none;
}
.sched-header-menu__check:hover {
  background: rgba(63, 169, 245, 0.10);
}
.sched-header-menu__check input[type="checkbox"] {
  accent-color: #3fa9f5;
  cursor: pointer;
  margin: 0;
}
.sched-header-menu__check span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched-header-menu__empty {
  padding: 12px 6px;
  text-align: center;
  font-size: 12px;
  color: #6c7a93;
  font-style: italic;
}
.sched-header-menu__footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
}
.sched-header-menu__btn {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #e8eef9;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.1s;
}
.sched-header-menu__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
}
.sched-header-menu__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sched-header-menu__btn--primary {
  background: #3fa9f5;
  border-color: #3fa9f5;
  color: #0b1220;
  font-weight: 600;
}
.sched-header-menu__btn--primary:hover:not(:disabled) {
  background: #5cb8ff;
  border-color: #5cb8ff;
}

/* Whiteboard theme — popover claro */
.schedule-page.whiteboard-theme ~ .sched-header-menu,
body:has(.schedule-page.whiteboard-theme) .sched-header-menu {
  background: #ffffff;
  color: #1f2937;
  border-color: #d1d5db;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16),
              0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__title {
  color: #6b7280;
  background: #f9fafb;
  border-bottom-color: #e5e7eb;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__action:hover,
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__action:focus {
  background: #eff6ff;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__action--danger {
  color: #b91c1c;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__action--danger:hover {
  background: #fee2e2;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__sep {
  background: #e5e7eb;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__subtitle,
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__list-toggles {
  color: #6b7280;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__search,
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__text-input {
  background: #ffffff;
  color: #1f2937;
  border-color: #d1d5db;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__search:focus,
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__text-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__list {
  background: #f9fafb;
  border-color: #e5e7eb;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__check:hover {
  background: #eff6ff;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__btn {
  border-color: #d1d5db;
  color: #1f2937;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__btn:hover:not(:disabled) {
  background: #f3f4f6;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__btn--primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
body:has(.schedule-page.whiteboard-theme) .sched-header-menu__btn--primary:hover:not(:disabled) {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

/* Indicador caret no <th> clicavel + estado "tem filtro ativo".
   IMPORTANTE: o caret eh um pseudo-element absoluto, NAO um <span>
   inline. Razao: <span> inline dentro de <th rowspan=2> aumenta a
   altura natural da 1a <tr> (groups), criando gap branco visual
   entre os group headers (LINHA DE BASE/PLANEJADO/REAL) e os sub-
   headers (Início/Fim/Duração). Com pseudo-element absoluto a
   altura do th nao muda. */
.schedule-page .sched-table thead th.sched-th-clickable {
  cursor: pointer;
  user-select: none;
  /* deixa espaco a direita pra o caret nao colar no proximo th.
     NAO redeclarar `position: sticky` ou `top` aqui — a regra
     `.sched-table thead th` ja seta `position: sticky; top: 0` e
     `sched-thead-fields th` ajusta `top: 36px` na 2a linha. Como
     `.sched-th-clickable` tem MESMA especificidade que `.sched-thead-fields th`,
     se redeclararmos `position`/`top` aqui podemos resetar o offset
     da 2a linha (subheaders Início/Fim/Duração) e o sticky para de
     funcionar visualmente quando o user rola. */
  padding-right: 18px !important;
}
.schedule-page .sched-table thead th.sched-th-clickable:hover {
  background: rgba(63, 169, 245, 0.08);
}
.schedule-page .sched-table thead th.sched-th-clickable::after {
  content: "▾";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  line-height: 1;
  opacity: 0.45;
  color: inherit;
  pointer-events: none;
  transition: opacity 0.1s, color 0.1s;
}
.schedule-page .sched-table thead th.sched-th-clickable:hover::after {
  opacity: 0.9;
}
.schedule-page .sched-table thead th.sched-th-has-filter {
  /* fundo levemente azulado pra marcar que tem filtro ativo */
  background: rgba(63, 169, 245, 0.16) !important;
}
.schedule-page .sched-table thead th.sched-th-has-filter::after {
  color: #5cb8ff;
  opacity: 1;
  font-weight: 900;
}
.schedule-page.whiteboard-theme .sched-table thead th.sched-th-has-filter {
  background: rgba(37, 99, 235, 0.12) !important;
}
.schedule-page.whiteboard-theme .sched-table thead th.sched-th-has-filter::after {
  color: #1d4ed8;
}
/* Quando o th tambem tem coluna escondida a direita (.sched-has-hidden-next),
   o "▸" ja usa ::after — escondemos nosso caret ▾ pra evitar duplicacao
   visual. O marker de coluna oculta tem prioridade informacional. */
.schedule-page .sched-table thead th.sched-has-hidden-next::after {
  /* a regra existente desse seletor define "▸" — ela vence pq vem depois
     no arquivo. Aqui so garantimos que nao tente desenhar 2 carets. */
}
/* Compat: se algum span legado .sched-th-caret ainda existir (ex.: cache
   antigo de JS), esconde pra nao desenhar duplicado em cima do ::after. */
.schedule-page .sched-th-caret {
  display: none !important;
}

/* Linha filtrada — esconde sem afetar layout das demais. Coexiste
   com `sched-collapsed` (toggle): qualquer uma das duas oculta. */
.schedule-page .sched-table tbody tr.sched-row-filtered-out {
  display: none !important;
}

/* Coluna Sucessoras — read-only, calculada como o inverso das
   predecessoras das demais linhas. Mesma largura/alinhamento que
   Predecessoras pra simetria visual. */
.schedule-page .sched-col-suc {
  width: 130px;
  text-align: center;
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-variant-numeric: tabular-nums;
}
.schedule-page .sched-suc-text {
  display: inline-block;
  max-width: 100%;
  font-size: 12.5px;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.schedule-page .sched-suc-empty {
  color: var(--text-muted);
  opacity: 0.55;
}

/* Coluna Crítico (CPM/Caminho Crítico) — read-only em todas as
   linhas. Folhas (atividade/marco-item/marcos fixos) com slack=0
   recebem pílula vermelha "Sim". Demais folhas mostram "—".
   Entregas e projeto mostram contagem informativa de descendentes
   críticos (ex.: "3 críticos"). Cor vermelha proposital: marca
   atividades onde qualquer atraso impacta o projeto inteiro. */
.schedule-page .sched-col-critical {
  width: 90px;
  text-align: center;
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-variant-numeric: tabular-nums;
}
.schedule-page .sched-critical-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.18);
  color: #FCA5A5;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid rgba(239, 68, 68, 0.45);
}
.schedule-page .sched-critical-pill::before {
  content: "●";
  font-size: 10px;
  line-height: 1;
  color: #FCA5A5;
}
.schedule-page .sched-critical-count {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.85;
  white-space: nowrap;
}
.schedule-page .sched-critical-none {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 13px;
}

/* Whiteboard: ajustes de cor pra leitura em fundo claro. */
.schedule-page.whiteboard-theme .sched-critical-pill {
  background: rgba(220, 38, 38, 0.12);
  color: #B91C1C;
  border-color: rgba(220, 38, 38, 0.45);
}
.schedule-page.whiteboard-theme .sched-critical-pill::before {
  color: #B91C1C;
}
.schedule-page.whiteboard-theme .sched-critical-count {
  color: #4B5563;
  opacity: 1;
}
.schedule-page.whiteboard-theme .sched-critical-none {
  color: #9CA3AF;
}
/* Placeholder 'N/A' usado em celulas read-only de Predecessoras /
   Sucessoras pra deixar explicito que nao ha valor (ao inves de
   ficar em branco). Compartilhada entre as duas colunas. */
.schedule-page .sched-na {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  opacity: 0.6;
  font-variant-numeric: normal;
}

/* Coluna Predecessoras — input livre tipo "7TT+5d". Largura
   confortavel pra 1-2 codigos sem quebrar; multiplas predecessoras
   ficam scrollavel internamente. Centralizado no header. */
.schedule-page .sched-col-pred {
  width: 130px;
  text-align: center;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.schedule-page .sched-col-pred--empty {
  color: var(--text-muted);
}
.schedule-page .sched-pred-input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.schedule-page .sched-pred-input::placeholder {
  color: var(--text-muted);
  opacity: 0.55;
}
.schedule-page .sched-pred-input:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.schedule-page .sched-pred-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary, #3FA9F5);
}
.schedule-page .sched-pred-input--err {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

/* Input de Duracao Planejada — number, narrow. Mesma estetica de
   "input inline" do Predecessoras pra UX consistente.
   Wrapper inline-flex pra colar o sufixo "d" do lado direito (o "d"
   so aparece quando ha valor — placeholder vazio mostra so o "—"). */
.schedule-page .sched-dur-input-wrap {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0;
  width: 100%;
}
.schedule-page .sched-dur-input {
  width: 22px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 0;  /* zero padding lateral pro digito ficar
                     flush com a borda direita e colar no 'd' */
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-align: right;
  transition: background 0.15s, border-color 0.15s;
}
.schedule-page .sched-dur-input::placeholder {
  color: var(--text-muted);
  opacity: 0.55;
}
.schedule-page .sched-dur-input:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.schedule-page .sched-dur-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary, #3FA9F5);
}
/* Sufixo "d" — so aparece quando o input tem valor. Detecta vazio
   via :placeholder-shown (input em branco mostra o "—" do placeholder,
   entao escondemos o "d" pra nao virar "d" solto). */
.schedule-page .sched-dur-suffix {
  color: var(--text-muted, #94a3b8);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
.schedule-page .sched-dur-input:placeholder-shown + .sched-dur-suffix {
  visibility: hidden;
}

/* Input de Data Início do Projeto (no marco "Início do Projeto").
   IMPORTANTE: <input type="date"> nativo tem largura intrinseca
   ~120px (texto DD/MM/AAAA + icone do picker), enquanto a coluna
   tem 92px e a td tem padding 8/14. Sem width:100% + box-sizing,
   o input transborda em cima da coluna Fim e fica "trepado" com a
   data do fim. Encolhemos tambem o icone do picker pra caber. */
.schedule-page .sched-date-input {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 4px;
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.schedule-page .sched-date-input:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.schedule-page .sched-date-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary, #3FA9F5);
}
/* Picker do calendario (WebKit) — escondido visualmente. O input
   inteiro vira clicavel (cursor:pointer) e o JS chama showPicker()
   no click pra abrir o calendario. Removemos o icone porque, com a
   coluna estreita (92px), ele sobrepunha o texto da data e ficava
   ilegivel. Pra Firefox o picker abre nativo no focus mesmo sem
   indicator. */
.schedule-page .sched-date-input {
  cursor: pointer;
}
.schedule-page .sched-date-input::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}
/* Em alguns WebKits o picker tb expoe ::-webkit-inner-spin-button
   ou ::-webkit-clear-button — escondemos preventivamente pra
   garantir que so o texto fique visivel na celula. */
.schedule-page .sched-date-input::-webkit-inner-spin-button,
.schedule-page .sched-date-input::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}
/* Quando o input de data esta vazio (sem `value`), o browser desenha
   o placeholder "dd/mm/aaaa" dentro de ::-webkit-datetime-edit. Pra
   nao poluir visualmente as colunas reais (varias dezenas de campos
   ficam vazios nos rollups e nos itens nao iniciados), escondemos
   esse pseudo-elemento e mostramos so o "—" via ::before do td.
   A classe `sched-date-input--empty` eh aplicada por JS (toggle
   sincronizado no load + input + change + blur). No focus revelamos
   pra dar feedback enquanto o user digita. */
.schedule-page .sched-date-input.sched-date-input--empty:not(:focus)::-webkit-datetime-edit {
  color: transparent;
}
.schedule-page .sched-date-input.sched-date-input--empty:not(:focus)::-webkit-datetime-edit-fields-wrapper {
  color: transparent;
}
/* Firefox/Edge: o "dd/mm/aaaa" fica no proprio input. Como nao
   tem um pseudo-element dedicado, usamos truque com color: transparent
   no input vazio e nao-focado. O texto real (quando preenchido) tem
   a classe removida, voltando a cor herdada. */
@-moz-document url-prefix() {
  .schedule-page .sched-date-input.sched-date-input--empty:not(:focus) {
    color: transparent;
  }
}
/* Quando a celula contem o input de data, encolhe o padding pra
   sobrar mais espaco util — as outras celulas (so texto) continuam
   com 8px/14px do .sched-row > td. */
.schedule-page .sched-row > td.sched-col-pl-start:has(> .sched-date-input),
.schedule-page .sched-row > td.sched-col-rl-start:has(> .sched-date-input),
.schedule-page .sched-row > td.sched-col-rl-end:has(> .sched-date-input) {
  padding-left: 4px;
  padding-right: 4px;
}

/* Inputs date Real (atividades / marcos-item) — sutil mas distinto
   do data inicio do projeto (que eh azul). Estado "vazio" fica meio
   apagado pra sinalizar "preencher quando comecar/concluir". */
.schedule-page .sched-real-date-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  background: transparent;
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 4px;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.schedule-page .sched-real-date-input:hover {
  border-color: rgba(0, 0, 0, 0.4);
  background: rgba(255, 255, 255, 0.6);
}
.schedule-page .sched-real-date-input:focus {
  outline: none;
  border-color: var(--primary, #3FA9F5);
  border-style: solid;
  background: #fff;
}
/* Quando preenchido, deixa o input mais "solido" (border solida) pra
   sinalizar visualmente que tem valor. Usa :not(:placeholder-shown)
   nao funciona em type=date — fallback via valor via JS opcional;
   por ora, distincao visual no foco eh suficiente. */

/* Feedback visual de erro generico pra inputs inline. */
.schedule-page .sched-input--err {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

/* ─── Botao "x" discreto pra APAGAR uma data real ──────────────────
   Fica sobreposto ao canto direito da celula da data (start/end). So
   aparece quando: (a) a celula esta sob hover e (b) o input TEM valor
   (nao-vazio). Assim nao polui as dezenas de celulas vazias e da uma
   forma obvia de zerar a data — antes o unico jeito era o clear nativo
   do <input type=date>, que escondemos por CSS. */
.schedule-page td.sched-col-rl-start,
.schedule-page td.sched-col-rl-end {
  position: relative;
}
.schedule-page .sched-date-clear {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  display: none;                 /* revelado no hover da celula (regra abaixo) */
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #b91c1c;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.12s, background 0.12s;
}
.schedule-page .sched-date-clear:hover {
  opacity: 1;
  background: rgba(185, 28, 28, 0.14);
}
/* Mostra o "x" so quando a celula esta sob hover (aparece de leve). */
.schedule-page td.sched-col-rl-start:hover .sched-date-clear,
.schedule-page td.sched-col-rl-end:hover .sched-date-clear {
  display: inline-flex;
}
/* ...mas nunca quando o input esta VAZIO (nada pra apagar). O JS mantem
   a classe .sched-date-input--empty sincronizada com o value. */
.schedule-page td.sched-col-rl-start:has(.sched-date-input--empty) .sched-date-clear,
.schedule-page td.sched-col-rl-end:has(.sched-date-input--empty) .sched-date-clear {
  display: none !important;
}
/* No hover, abre um respiro a direita pra data nao ficar embaixo do "x". */
.schedule-page td.sched-col-rl-start:hover .sched-real-date-input,
.schedule-page td.sched-col-rl-end:hover .sched-real-date-input {
  padding-right: 15px;
}

/* ─── Colunas de datas/duracoes (Linha de Base | Planejado | Real)
   ────────────────────────────────────────────────────────────────
   9 colunas agrupadas em 3 blocos visuais. Cada bloco tem header de
   grupo (colspan=3) com cor de fundo SUTIL pra demarcar o conjunto;
   os labels individuais (Início/Fim/Duração) ficam na 2a linha do
   thead em fonte ligeiramente menor. Border-left tracejado entre os
   grupos reforça a separação. As celulas de dados sao centralizadas
   (datas) ou alinhadas a direita (duracoes) com numeros tabulares
   pra alinhamento perfeito.

   Por enquanto o conteudo eh "—" (placeholder) ja que o user
   ainda nao definiu regras de calculo nem populou os campos. */
.schedule-page .sched-col-date {
  width: 118px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Dia da semana (SEG/TER/.../DOM) ao lado das datas somente-leitura —
   rotulo auxiliar discreto: menor e cinza, sem competir com a data. */
.schedule-page .sched-dow {
  margin-left: 5px;
  font-size: 0.82em;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.02em;
}
.schedule-page .sched-col-dur {
  width: 70px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 14px !important;
}
/* Cabecalhos das colunas de Duracao sao centralizados (a regra de
   coluna acima alinha a direita pras celulas de dados — datas/
   duracoes alinhadas a direita pra leitura tabular). */
.schedule-page .sched-table thead th.sched-col-dur {
  text-align: center;
  padding-right: 14px !important;
}
/* Headers das colunas de datas/duracao na 2a linha do thead —
   compactos e sem caps duplos (ja sao uppercase pelo regra global
   do thead th). */
.schedule-page .sched-table thead .sched-thead-fields th {
  font-size: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
/* Headers dos GRUPOS (Linha de Base/Planejado/Real) — centralizados,
   com tom de fundo diferenciado pra cada bloco. Usa paleta sutil
   pra nao competir com o conteudo. */
.schedule-page .sched-table thead .sched-grp {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 12px 6px;
}
/* Paleta dos grupos BL/PL/RL — escolhida pra NAO competir com as
   cores dos status (verde/amarelo/vermelho/azul-bebe). Conceito:
     - LINHA DE BASE = lavanda/lilas (passado, snapshot "congelado")
     - PLANEJADO    = slate/cinza-azulado (neutro tecnico)
     - REAL         = canela/terracota (presente, "tatil") */
.schedule-page .sched-table thead .sched-grp--bl {
  background: rgba(177, 156, 217, 0.12);
  color: #C4B1E5;
}
.schedule-page .sched-table thead .sched-grp--pl {
  background: rgba(148, 163, 184, 0.14);
  color: #B0BACA;
}
.schedule-page .sched-table thead .sched-grp--rl {
  background: rgba(218, 165, 116, 0.14);
  color: #D9B68F;
}
/* Separador vertical discreto entre os 3 grupos — vai tanto no
   header quanto no corpo (primeira celula de cada grupo). Tracejado
   pra ser leve e nao virar uma "régua" pesada. */
.schedule-page .sched-table .sched-col-bl-start,
.schedule-page .sched-table .sched-col-pl-start,
.schedule-page .sched-table .sched-col-rl-start,
.schedule-page .sched-table thead .sched-grp--bl,
.schedule-page .sched-table thead .sched-grp--pl,
.schedule-page .sched-table thead .sched-grp--rl,
.schedule-page .sched-table thead .sched-thead-fields th.sched-col-bl:first-of-type,
.schedule-page .sched-table thead .sched-thead-fields th.sched-col-pl:first-of-type,
.schedule-page .sched-table thead .sched-thead-fields th.sched-col-rl:first-of-type {
  border-left: 1px dashed rgba(255,255,255,0.08);
}
/* Placeholder vazio "—" — cinza discreto pra indicar "sem dado". */
.schedule-page .sched-table .sched-col-date,
.schedule-page .sched-table .sched-col-dur {
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
}

.schedule-page .sched-row > td {
  padding: 3px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text);
  vertical-align: middle;
}
.schedule-page .sched-row:last-child > td { border-bottom: none; }
.schedule-page .sched-row.sched-collapsed { display: none; }
.schedule-page .sched-row:hover > td {
  background: rgba(255,255,255,0.02);
}

.schedule-page .sched-toggle {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  width: 18px;
  padding: 0;
  margin-right: 4px;
}
.schedule-page .sched-toggle:hover { color: var(--text); }

.schedule-page .sched-name { font-weight: 500; }
.schedule-page .sched-row--project .sched-name--project {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
}
.schedule-page .sched-row--deliv .sched-name {
  font-weight: 600;
}
.schedule-page .sched-name--act {
  color: var(--text);
  font-weight: 400;
}
.schedule-page .sched-code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  margin-right: 4px;
}
.schedule-page .sched-bullet {
  display: inline-block;
  width: 16px;
  text-align: center;
  color: var(--text-muted);
}

.schedule-page .sched-pill {
  display: inline-block;
  padding: 1px 8px;
  font-size: 10.5px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.schedule-page .sched-pill--project {
  background: rgba(0, 161, 224, 0.18);
  color: #66CFF5;
  border: 1px solid rgba(0, 161, 224, 0.4);
}
.schedule-page .sched-pill--deliv {
  background: rgba(255, 181, 184, 0.14);
  color: #FFB5B8;
  border: 1px solid rgba(255, 181, 184, 0.35);
}
.schedule-page .sched-pill--act {
  background: rgba(93, 211, 158, 0.14);
  color: #5DD39E;
  border: 1px solid rgba(93, 211, 158, 0.35);
}
.schedule-page .sched-pill--milestone {
  background: rgba(245, 158, 11, 0.16);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.schedule-page .sched-kind-toggle {
  border: none;
  padding: 0;
  margin: 0 0 14px 0;
}
.schedule-page .sched-kind-toggle > span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.schedule-page .sched-kind-toggle-options {
  display: flex;
  gap: 8px;
}
.schedule-page .sched-kind-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: border-color 120ms ease, background 120ms ease;
}
.schedule-page .sched-kind-opt:has(input:checked) {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}
.schedule-page .sched-kind-opt input[type="radio"] {
  margin: 0;
}
body.schedule-page--whiteboard .sched-kind-opt:has(input:checked) {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

.schedule-page .sched-icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  margin-left: 2px;
  transition: all 0.12s ease;
}
.schedule-page .sched-icon-btn:hover {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,0.04);
}
.schedule-page .sched-del-btn:hover {
  color: var(--danger);
  border-color: rgba(255, 107, 107, 0.5);
}
.schedule-page .sched-add-act-btn {
  font-size: 11.5px;
  padding: 3px 9px;
}

/* ── Modal de atividade ──────────────────────────────────────────────── */
.schedule-page .sched-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.schedule-page .sched-modal[hidden] { display: none; }
.schedule-page .sched-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 9, 22, 0.65);
  backdrop-filter: blur(2px);
}
.schedule-page .sched-modal-panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(540px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.schedule-page .sched-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.schedule-page .sched-modal-head h2 {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}
.schedule-page .sched-modal-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}
.schedule-page .sched-modal-close:hover { color: var(--text); }
.schedule-page .sched-modal-form {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.schedule-page .sched-field { display: flex; flex-direction: column; gap: 4px; }
.schedule-page .sched-field > span {
  font-size: 12px;
  color: var(--text-muted);
}
.schedule-page .sched-field input,
.schedule-page .sched-field select,
.schedule-page .sched-field textarea {
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-family: inherit;
}
.schedule-page .sched-field textarea { resize: vertical; min-height: 60px; }
.schedule-page .sched-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.schedule-page .sched-modal-error {
  color: var(--danger);
  font-size: 12.5px;
  margin: 0;
}

/* ── Tema 'whiteboard' (Excel-like) ───────────────────────────────────
   Ativado por .schedule-page--whiteboard no <body>. Aplicado APENAS
   na tabela do cronograma (header, KPIs, toolbar e modal seguem o
   tema dark padrao da app — pediu-se por consistencia com o resto
   do Solar). O fundo branco vive dentro do .sched-table-wrap e nas
   linhas; nada fora dele eh tocado.

   Isso significa: o body NAO recebe background; o <main>, .contract-head,
   .sched-kpi, .sched-empty e .sched-toolbar herdam o tema escuro padrao
   ja definido em outras regras. */

/* Toolbar: mantemos so o layout flex (eh comportamento, nao tema) */
body.schedule-page--whiteboard .sched-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 12px;
  flex-wrap: wrap;
}
/* Grupo "expandir tudo / colapsar" — pareado, separa visualmente
   do "+ Item" (acao destrutiva potencial) e do hint à direita. */
.schedule-page .sched-tree-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
}
body.schedule-page--whiteboard .sched-tree-actions {
  background: #eef1f6;
  border: 1px solid #d4d8e0;
}
/* Botoes "Expandir tudo" / "Colapsar" no tema whiteboard: o btn-ghost
   global usa color:var(--text) que eh branco — fica ilegivel sobre
   o fundo claro do wrapper. Forca texto/fundo proprios pra ter
   contraste no estado normal (nao so no hover). */
body.schedule-page--whiteboard .sched-tree-actions .btn-ghost {
  background: #ffffff;
  color: #2a2418;
  border: 1px solid #c8ccd6;
  font-weight: 500;
}
body.schedule-page--whiteboard .sched-tree-actions .btn-ghost:hover {
  background: #f7e9c8;
  color: #1a160d;
  border-color: #8a6b3a;
}
body.schedule-page--whiteboard .sched-tree-actions .btn-ghost:focus-visible {
  outline: 2px solid rgba(138, 107, 58, 0.45);
  outline-offset: 1px;
}

/* "Salvar Linha de Base" — botao destacado mas nao primario.
   Tema dark: cinza-amarelado discreto pra nao competir com "+ Item". */
.schedule-page #schedSaveBaselineBtn {
  background: linear-gradient(180deg,#3a3326,#2c2719);
  color: #f1d893;
  border: 1px solid rgba(241, 216, 147, 0.35);
  font-weight: 600;
}
.schedule-page #schedSaveBaselineBtn:hover:not(:disabled) {
  background: linear-gradient(180deg,#4a4030,#372f1f);
  border-color: rgba(241, 216, 147, 0.6);
}
.schedule-page #schedSaveBaselineBtn:disabled {
  opacity: 0.6;
  cursor: progress;
}
body.schedule-page--whiteboard #schedSaveBaselineBtn {
  background: #fff;
  color: #4a3a16;
  border: 1px solid #c8a96a;
}
body.schedule-page--whiteboard #schedSaveBaselineBtn:hover:not(:disabled) {
  background: #faecc6;
  border-color: #8a6b3a;
}
/* Hint "Linha de base salva em DD/MM/AAAA HH:MM" — texto pequeno,
   apenas informativo. Variante --none (sem baseline ainda) eh mais
   apagada pra nao "puxar" atencao. */
/* Atalho sempre-visivel pra ancora do cronograma (data de inicio do
   projeto). Fica na toolbar pq a coluna Planejado Início vive à direita
   da Linha de Base e pode ficar fora da viewport / oculta. */
.schedule-page .sched-startdate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(59, 130, 246, 0.45);
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.10);
}
.schedule-page .sched-startdate__label {
  font-size: 12px;
  font-weight: 600;
  color: #93c5fd;
  white-space: nowrap;
}
.schedule-page .sched-startdate .sched-date-input {
  min-width: 138px;
}
body.schedule-page--whiteboard .sched-startdate {
  border-color: rgba(37, 99, 235, 0.5);
  background: rgba(37, 99, 235, 0.08);
}
body.schedule-page--whiteboard .sched-startdate__label {
  color: #1d4ed8;
}

.schedule-page .sched-baseline-saved {
  font-size: 11px;
  color: #c9b88a;
  font-style: italic;
  padding: 0 4px;
}
.schedule-page .sched-baseline-saved--none {
  color: #8a8068;
}
body.schedule-page--whiteboard .sched-baseline-saved {
  color: #6b5a2d;
}
body.schedule-page--whiteboard .sched-baseline-saved--none {
  color: #8a8068;
}

/* Grupo "Visão Geral do Cronograma" — label não-clicável (só título) +
   dois botõezinhos compactos (PPT / PDF) coladinhos à direita. Deixa
   claro visualmente que os 2 formatos exportam o MESMO artefato. */
.schedule-page .sched-export-group {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 6px;
  overflow: hidden;
}
.schedule-page .sched-export-group .btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid rgba(148, 163, 184, 0.35);
}
.schedule-page .sched-export-group .btn:last-child {
  border-right: none;
}
.schedule-page .sched-export-group__label {
  cursor: default;
  opacity: 0.95;
  font-weight: 600;
  pointer-events: none;
}
.schedule-page .sched-export-group__fmt {
  font-weight: 700;
  letter-spacing: 0.3px;
  min-width: 44px;
  justify-content: center;
}
body.schedule-page--whiteboard .sched-export-group {
  border-color: rgba(100, 116, 139, 0.35);
}
body.schedule-page--whiteboard .sched-export-group .btn {
  border-right-color: rgba(100, 116, 139, 0.35);
}

/* Menu suspenso do recorte da Visão Geral (Geral / frente / sub-entrega).
   Fica embutido no grupo de export, entre o rótulo e os botões PPT/PDF. */
.schedule-page .sched-overview-scope {
  border: none;
  border-right: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 0 6px;
  max-width: 220px;
  cursor: pointer;
}
.schedule-page .sched-overview-scope:focus-visible {
  outline: 2px solid rgba(148, 163, 184, 0.5);
  outline-offset: -2px;
}
body.schedule-page--whiteboard .sched-overview-scope {
  background: #ffffff;
  color: #2a2418;
  border-right-color: rgba(100, 116, 139, 0.35);
}
.schedule-page .sched-overview-scope option {
  color: #1a160d;
  background: #ffffff;
}

/* Utilitário: esconde visualmente mantendo acessível a leitores de tela. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Coluna "% (Baseline)" — última do grupo LINHA DE BASE. Herda a
   tipografia da coluna % Realizado (via .sched-col-progress), só
   ganha ambientação âmbar do grupo bl pra que o olho relacione as
   duas colunas de percentual como pertencentes ao "mundo baseline". */
.schedule-page .sched-col-bl-pct {
  text-align: right;
  cursor: help;
}
.schedule-page .sched-col-bl-pct .sched-progress-num {
  color: #c9b88a;
  font-variant-numeric: tabular-nums;
}
body.schedule-page--whiteboard .sched-col-bl-pct .sched-progress-num {
  color: #6b5a2d;
}

/* Tabela (estilo planilha) */
body.schedule-page--whiteboard .sched-table-wrap {
  background: #fff;
  border: 1px solid #c8ccd6;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  /* overflow:auto + max-height herdados de .schedule-page
     .sched-table-wrap (acima) — nao re-declarar aqui ou perde o
     scroll vertical + sticky header. */
}
body.schedule-page--whiteboard .sched-table { font-size: 12px; }
body.schedule-page--whiteboard .sched-table thead th {
  background: #eef1f6;
  color: #4a5878;
  border-bottom: 1px solid #c8ccd6;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 7px 12px;
}
/* Whiteboard tem padding menor no thead — segunda linha precisa de
   offset mais curto. ~27px (padding 7/7 + font 10 + line-height). */
body.schedule-page--whiteboard .sched-table thead .sched-thead-fields th {
  top: 27px;
}
body.schedule-page--whiteboard .sched-row > td {
  border-bottom: 1px solid #e6e9ee;
  border-right: 1px solid #eef0f3;
  color: #2a2418;
  padding: 3px 10px;
}
body.schedule-page--whiteboard .sched-row > td:last-child {
  border-right: none;
}

/* Headers de grupo (Linha de Base | Planejado | Real) no whiteboard.
   Paleta neutra que NAO se confunde com as cores dos status:
     - LINHA DE BASE: lavanda (passado/snapshot)
     - PLANEJADO   : slate (cinza-azulado tecnico, neutro)
     - REAL        : canela/terracota (presente, distinto de vermelho)
   Cores sao saturadas o suficiente pra serem identificaveis mas em
   famílias diferentes das do status (verde/amarelo/vermelho/azul-bebe). */
body.schedule-page--whiteboard .sched-table thead .sched-grp--bl {
  background: #EAE6F4;
  color: #5A4B8E;
}
body.schedule-page--whiteboard .sched-table thead .sched-grp--pl {
  background: #E1E7EE;
  color: #2C3E5C;
}
body.schedule-page--whiteboard .sched-table thead .sched-grp--rl {
  background: #F0DECD;
  color: #7A4E2A;
}
/* Separador entre os grupos no whiteboard — linha solida bem leve
   (mais visivel que tracejado branco contra fundo claro). */
body.schedule-page--whiteboard .sched-table .sched-col-bl-start,
body.schedule-page--whiteboard .sched-table .sched-col-pl-start,
body.schedule-page--whiteboard .sched-table .sched-col-rl-start,
body.schedule-page--whiteboard .sched-table thead .sched-grp--pl,
body.schedule-page--whiteboard .sched-table thead .sched-grp--rl,
body.schedule-page--whiteboard .sched-table thead .sched-thead-fields th.sched-col-pl:first-of-type,
body.schedule-page--whiteboard .sched-table thead .sched-thead-fields th.sched-col-rl:first-of-type {
  border-left: 1px solid rgba(15, 23, 42, 0.10);
}
/* Placeholder "—" das celulas de data/duracao no whiteboard: cinza
   medio em vez de muito claro (legivel sobre fundos nude). */
body.schedule-page--whiteboard .sched-table .sched-col-date,
body.schedule-page--whiteboard .sched-table .sched-col-dur {
  color: #6b6657;
}
/* Dia da semana no whiteboard: tom nude mais claro que a data, pra
   ler como rotulo auxiliar sem sumir sobre o fundo creme. */
body.schedule-page--whiteboard .sched-table .sched-dow {
  color: #a89f8c;
}
/* Coluna ID no whiteboard: mesma logica — cinza-marrom medio pra
   bater com a paleta nude (text-muted do tema escuro fica claro
   demais sobre fundos creme). So nas td (dados); a th 'ID' herda a
   cor #4a5878 do regra geral do thead pra alinhar com 'DESCRICAO',
   'TIPO' etc. */
body.schedule-page--whiteboard .sched-table td.sched-col-id {
  color: #6b6657;
}

/* ── Cores nude por tipo de linha — degrade jun/2026 ──────────────────
   Hierarquia visual estilo "swimlane": quanto mais alto na arvore
   (Projeto > Entrega > Marco > Atividade), MAIS escuro o fundo da
   linha. Todos os tons saem da mesma familia nude/champagne pra
   manter o ar de planilha leve. */
body.schedule-page--whiteboard .sched-row--project > td {
  background: #C2A05E;          /* dourado-taupe escuro — raiz (Projeto) */
  color: #2A1F08;
}
body.schedule-page--whiteboard .sched-row--deliv > td {
  background: #E8D29A;          /* areia média — entregas (todos os niveis) */
}
body.schedule-page--whiteboard .sched-row--milestone > td,
body.schedule-page--whiteboard .sched-row--milestone-item > td {
  background: #FAF0D5;          /* champagne quase branco — marcos */
}
/* Atividade: branco puro (papel da planilha) */
body.schedule-page--whiteboard .sched-row--act > td {
  background: #FFFFFF;
}

/* Hover: escurece levemente sem trocar o tom (overlay via gradient
   transparente sobre o background-color de cada linha). */
body.schedule-page--whiteboard .sched-row:hover > td {
  background-image: linear-gradient(rgba(72, 50, 18, 0.06),
                                    rgba(72, 50, 18, 0.06));
}
/* Selecao: barra lateral esquerda em tom nude escuro — sem trocar o
   fundo da linha (preserva a categoria por cor). */
body.schedule-page--whiteboard .sched-row { outline: none; }
body.schedule-page--whiteboard .sched-row:focus { outline: none; }
body.schedule-page--whiteboard .sched-row--active > td:first-child,
body.schedule-page--whiteboard .sched-row:focus > td:first-child {
  box-shadow: inset 3px 0 0 #8A6B3A;
}

/* Toggle expand/collapse */
body.schedule-page--whiteboard .sched-toggle { color: #6b758c; }
body.schedule-page--whiteboard .sched-toggle:hover { color: #1a2540; }

/* Nome / code */
body.schedule-page--whiteboard .sched-name { color: #1a2540; }
body.schedule-page--whiteboard .sched-row--project .sched-name--project {
  /* Texto branco-cremoso pra contrastar com o dourado escuro do
     fundo da linha do Projeto (efeito "placa de identificacao"). */
  color: #FFF8E7;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
/* Toggle ▼ do projeto vira marrom escuro pra ficar visivel no
   dourado (o cinza-azulado default sumia). */
body.schedule-page--whiteboard .sched-row--project .sched-toggle {
  color: #3A2A0A;
}
body.schedule-page--whiteboard .sched-row--project .sched-toggle:hover {
  color: #000;
}
body.schedule-page--whiteboard .sched-row--deliv .sched-name { font-weight: 600; }
body.schedule-page--whiteboard .sched-name--act { font-weight: 400; color: #1a2540; }
body.schedule-page--whiteboard .sched-code {
  background: #eef1f6;
  color: #6b758c;
}
body.schedule-page--whiteboard .sched-bullet { color: #6b758c; }

/* Pills — paleta nude (combinando com o fundo nude da linha).
   Cada pill eh ~2 tons mais escura que o fundo da sua row pra
   sobressair sem virar "etiqueta de neon". */
body.schedule-page--whiteboard .sched-pill--project {
  background: #D9C4A3; color: #4D3819; border-color: #B89B71;
}
body.schedule-page--whiteboard .sched-pill--deliv {
  background: #E0CCAD; color: #5C401E; border-color: #C1A076;
}
body.schedule-page--whiteboard .sched-pill--act {
  background: #D9D2BF; color: #4F4530; border-color: #B0A582;
}
body.schedule-page--whiteboard .sched-pill--milestone {
  background: #E5CF9D; color: #5E4416; border-color: #C9A965;
}
body.schedule-page--whiteboard .sched-row--milestone .sched-name {
  font-weight: 600; color: #5E4416;
}
body.schedule-page--whiteboard .sched-milestone-icon {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 6px;
  background: #A88848;  /* dourado-nude pra combinar com a linha champagne */
  transform: rotate(45deg);
  vertical-align: middle;
  position: relative;
  top: -1px;
}
/* No tema whiteboard a engrenagem vira verde-oliva escuro pra ler
   bem em fundo branco. */
body.schedule-page--whiteboard .sched-act-icon { color: #4F8A5C; opacity: 0.9; }
.schedule-page .sched-row--milestone .sched-name { font-weight: 600; }
.schedule-page .sched-milestone-icon {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 6px;
  background: #FBBF24;
  transform: rotate(45deg);
  vertical-align: middle;
  position: relative;
  top: -1px;
}
/* Engrenagem inline pra atividades. SVG inline (currentColor) deixa
   o ícone seguir o tema (escuro/whiteboard). 6px de margem direita
   pra ficar colado no nome — mesma metrica do losango do marco. */
.schedule-page .sched-act-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  color: #5DD39E;            /* mesmo verde do pill --act */
  vertical-align: middle;
  position: relative;
  top: -1px;
  opacity: 0.85;
}
.schedule-page .sched-act-icon svg { display: block; }

/* Shake sutil quando tenta mover alem do limite (primeiro/ultimo) */
@keyframes schedShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
.schedule-page tr.sched-shake { animation: schedShake 0.4s ease-in-out; }
body.schedule-page--whiteboard .sched-dim-hint {
  color: #94a3b8;
  font-size: 11.5px;
  font-style: italic;
}

/* Icon buttons (edit / move / delete) — visiveis nas rows --act */
body.schedule-page--whiteboard .sched-icon-btn {
  color: #6b758c;
  border-color: transparent;
}
body.schedule-page--whiteboard .sched-icon-btn:hover {
  color: #1a2540;
  background: #eef1f6;
  border-color: #c8ccd6;
}
body.schedule-page--whiteboard .sched-del-btn:hover {
  color: #dc2626;
  border-color: #fca5a5;
  background: #fee2e2;
}

/* Botao "+ atividade" inline (rows --leaf) */
body.schedule-page--whiteboard .sched-add-act-btn {
  background: #fff;
  border: 1px solid #c8ccd6;
  color: #0b3d91;
  font-weight: 500;
}
body.schedule-page--whiteboard .sched-add-act-btn:hover {
  background: #eef1f6;
}

/* Modal — mesmas cores claras */
body.schedule-page--whiteboard .sched-modal-backdrop {
  background: rgba(15, 23, 42, 0.45);
}
body.schedule-page--whiteboard .sched-modal-panel {
  background: #fff;
  border: 1px solid #c8ccd6;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}
body.schedule-page--whiteboard .sched-modal-head { border-bottom-color: #e6e9ee; }
body.schedule-page--whiteboard .sched-modal-head h2 { color: #1a2540; }
body.schedule-page--whiteboard .sched-modal-close { color: #6b758c; }
body.schedule-page--whiteboard .sched-modal-close:hover { color: #1a2540; }
body.schedule-page--whiteboard .sched-field > span { color: #6b758c; }
body.schedule-page--whiteboard .sched-field input,
body.schedule-page--whiteboard .sched-field select,
body.schedule-page--whiteboard .sched-field textarea {
  background: #fff;
  color: #1a2540;
  border-color: #c8ccd6;
}
body.schedule-page--whiteboard .sched-field input:focus,
body.schedule-page--whiteboard .sched-field select:focus,
body.schedule-page--whiteboard .sched-field textarea:focus {
  outline: 2px solid #93c5fd;
  outline-offset: -1px;
  border-color: #2563eb;
}
body.schedule-page--whiteboard .sched-modal-actions .btn-ghost {
  background: #fff;
  color: #1a2540;
  border-color: #c8ccd6;
}
body.schedule-page--whiteboard .sched-modal-actions .btn-ghost:hover {
  background: #eef1f6;
}
body.schedule-page--whiteboard .sched-modal-actions .btn-primary {
  background: #0b3d91;
  border-color: #0b3d91;
  color: #fff;
}
body.schedule-page--whiteboard .sched-modal-actions .btn-primary:hover {
  background: #08306f;
}

/* ===========================================================================
   MATRIZ DE RASTREABILIDADE DE RISCOS (/riscos) — jun/2026
   --------------------------------------------------------------------------
   Tabela compacta tipo planilha. Criticidade colorida em 3 faixas:
     baixa  (1..7)   - verde nude
     media  (8..14)  - amarelo nude
     alta   (15..25) - vermelho nude (vira "critico" no header KPI)
   Pill de status clicavel pra alternar Ativo<->Inativo direto da linha
   sem abrir modal. Linhas inativas ficam dim (opacity .55).
   =========================================================================== */

/* KPIs no header — 3 mini-cards alinhados. */
.risks-kpis {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}
.risks-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.risks-kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.risks-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.risks-kpi--alert {
  border-color: rgba(220, 80, 80, 0.45);
  background: linear-gradient(135deg,
    rgba(220, 80, 80, 0.12), rgba(220, 80, 80, 0.04));
}
.risks-kpi--alert .risks-kpi-value { color: #fda4a4; }

.risks-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 36px 24px;
  text-align: center;
  color: var(--text-muted);
}

.risks-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
  margin-bottom: 24px;
}
.risks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--text);
}
.risks-table thead th {
  background: var(--surface-alt);
  color: var(--text-muted);
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
.risks-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}
.risks-table tbody tr.rk-row { transition: background .12s ease; }
.risks-table tbody tr.rk-row:hover { background: rgba(255,255,255,0.03); }
.risks-table tbody tr.rk-row:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: rgba(60, 130, 230, 0.08);
}
.rk-row--inactive { opacity: 0.55; }
.rk-row--inactive td { font-style: italic; }
/* Questoes concluidas — mesmo tratamento visual das linhas inativas
   do Risks (esmaecido + italico). Ambas moram na mesma tabela / mesmo
   CSS pra manter consistencia entre os dois modulos irmaos. */
.rk-row--closed { opacity: 0.60; }
.rk-row--closed td { font-style: italic; }

/* ── Matriz de Decisoes ────────────────────────────────────────────
   Reusa a estrutura .risks-table + .rk-* pra herdar tudo (borda,
   hover, colunas). Aqui so as diferencas: coluna Responsavel e o
   destaque vermelho de tópicos vencidos. */
.rk-col-owner { width: 160px; }
.decisions-table .dec-owner {
  font-weight: 500;
  color: var(--text, #e5e7eb);
}
/* Cell da coluna Prazo quando vencido — moldura sutil pra chamar
   atencao sem gritar (o pill de status ja diz "Vencida"). */
.decisions-table .dec-cell--overdue {
  color: #fca5a5;
  font-weight: 600;
}
/* Row vencida — moldura vermelha discreta na borda esquerda. Nao
   substitui o fundo (a linha continua legivel) mas sinaliza urgencia
   quando o PM abre a tela. */
.decisions-table .dec-row--overdue td:first-child {
  box-shadow: inset 3px 0 0 0 #ef4444;
}
/* Pill de status especifico "Vencida" — reusa a base .rk-status-pill
   mas com paleta de erro. Ativo, mas alertando. */
.rk-status-pill.dec-status--overdue {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.55);
  color: #fca5a5;
}
.rk-status-pill.dec-status--overdue:hover {
  background: rgba(239,68,68,0.28);
}

.rk-col-id   { width: 88px; white-space: nowrap; }
.rk-col-id code {
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--primary);
}
.rk-col-name { font-weight: 600; min-width: 180px; }
.rk-col-cat { width: 128px; white-space: nowrap; }
.rk-col-desc {
  color: var(--text-muted);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rk-col-plan {
  color: var(--text-muted);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rk-plan-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
/* Placeholder "a preencher" — italico e cinza suave pra sinalizar
   estado "vazio esperado", nao um erro. */
.rk-plan-empty {
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.5;
  font-size: 12.5px;
  letter-spacing: 0.15px;
}

/* Pill de categoria — badge visual pra classificar o risco. Cores por
   tipo conhecido (Cronograma, Escopo, Técnico, ...) com fallback cinza
   pros valores que o PM criar fora da lista. */
.rk-cat-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15px;
  border: 1px solid transparent;
  background: rgba(140, 140, 150, 0.16);
  border-color: rgba(140, 140, 150, 0.32);
  color: #d0d0d8;
  white-space: nowrap;
}
html[data-theme="light"] .rk-cat-pill {
  background: rgba(31, 41, 55, 0.06);
  border-color: rgba(31, 41, 55, 0.16);
  color: #334155;
}
.rk-cat--cronograma {
  background: rgba(232, 185, 50, 0.18);
  border-color: rgba(232, 185, 50, 0.45);
  color: #f0d076;
}
.rk-cat--escopo {
  background: rgba(93, 133, 200, 0.18);
  border-color: rgba(93, 133, 200, 0.45);
  color: #a5b8de;
}
.rk-cat--tecnico {
  background: rgba(147, 112, 219, 0.18);
  border-color: rgba(147, 112, 219, 0.48);
  color: #c9b3ec;
}
.rk-cat--financeiro {
  background: rgba(91, 155, 75, 0.18);
  border-color: rgba(91, 155, 75, 0.45);
  color: #b6e0a3;
}
.rk-cat--recursos {
  background: rgba(220, 130, 90, 0.18);
  border-color: rgba(220, 130, 90, 0.45);
  color: #f5b199;
}
.rk-cat--fornecedor {
  background: rgba(90, 180, 190, 0.18);
  border-color: rgba(90, 180, 190, 0.45);
  color: #9dd5db;
}
.rk-cat--seguranca {
  background: rgba(220, 80, 80, 0.16);
  border-color: rgba(220, 80, 80, 0.4);
  color: #fda4a4;
}
.rk-cat--compliance {
  background: rgba(120, 140, 200, 0.18);
  border-color: rgba(120, 140, 200, 0.45);
  color: #b3bfe0;
}
html[data-theme="light"] .rk-cat--cronograma { color: #92710a; background: rgba(232, 185, 50, 0.14); }
html[data-theme="light"] .rk-cat--escopo     { color: #1e40af; background: rgba(93, 133, 200, 0.13); }
html[data-theme="light"] .rk-cat--tecnico    { color: #6d28d9; background: rgba(147, 112, 219, 0.13); }
html[data-theme="light"] .rk-cat--financeiro { color: #166534; background: rgba(91, 155, 75, 0.14); }
html[data-theme="light"] .rk-cat--recursos   { color: #9a3412; background: rgba(220, 130, 90, 0.13); }
html[data-theme="light"] .rk-cat--fornecedor { color: #0f766e; background: rgba(90, 180, 190, 0.13); }
html[data-theme="light"] .rk-cat--seguranca  { color: #b91c1c; background: rgba(220, 80, 80, 0.12); }
html[data-theme="light"] .rk-cat--compliance { color: #3730a3; background: rgba(120, 140, 200, 0.13); }

.rk-cat-empty {
  color: var(--text-muted);
  opacity: 0.35;
  font-size: 12px;
}

/* Hint em cinza embaixo do <span> do form-row (usado no modal p/ dar
   contexto discreto do que colocar). */
.form-row .form-hint {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 11.5px;
  opacity: 0.75;
  margin-left: 4px;
}
.rk-col-date { width: 100px; white-space: nowrap; color: var(--text-muted); font-size: 12.5px; }
.rk-col-status  { width: 110px; }
.rk-col-num {
  text-align: center;
  width: 96px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.rk-col-actions { width: 92px; text-align: right; white-space: nowrap; }

/* Pill de status — clicavel; verde pra Ativo, cinza pra Inativo. */
.rk-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .12s ease, transform .06s ease;
}
.rk-status-pill:hover { filter: brightness(1.1); }
.rk-status-pill:active { transform: scale(0.96); }
.rk-status--active {
  background: rgba(91, 155, 75, 0.18);
  border-color: rgba(91, 155, 75, 0.48);
  color: #b6e0a3;
}
.rk-status--inactive {
  background: rgba(140, 140, 150, 0.18);
  border-color: rgba(140, 140, 150, 0.4);
  color: #c8c8d0;
}

/* Badge de criticidade — vai colorida diretamente na celula.
   Largura FIXA (52px) pra o pill ter o mesmo tamanho independente do
   valor (1..9 = 1 digito, 10..25 = 2 digitos). Sem min-width solto:
   antes, "12" ficava visivelmente mais largo que "9" na mesma coluna. */
.rk-crit {
  border-radius: 6px;
  padding: 4px 0;
  display: inline-block;
  box-sizing: border-box;
  width: 52px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  /* inline-block por default alinha pela baseline (a linha do texto do
     td vizinho), o que empurra o pill pra CIMA visualmente porque a
     baseline dele fica no bottom do numero interno, nao no seu centro.
     vertical-align:middle centraliza o pill no eixo vertical da row,
     alinhando com os numeros de Impacto/Probab. da mesma linha. */
  vertical-align: middle;
}
.rk-crit--low  { background: rgba(91, 155, 75, 0.22);  color: #b6e0a3; }
.rk-crit--med  { background: rgba(232, 185, 50, 0.22); color: #f0d076; }
.rk-crit--high { background: rgba(220, 80, 80, 0.22);  color: #fda4a4; }

.rk-icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 14px;
  margin-left: 2px;
  transition: all .12s ease;
}
.rk-icon-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border);
  color: var(--text);
}
.rk-del-btn:hover { color: #fda4a4; border-color: rgba(220,80,80,0.4); }

/* ==================================================================
   Plano de Gerenciamento do Projeto (PMP) — /plano-gerenciamento/
   ------------------------------------------------------------------
   Estilo "documento oficial": container centralizado com largura de
   leitura confortável, tipografia serifada no corpo do texto. Cada
   seção tem número visível no gutter, sumário navegável no topo com
   âncoras. Portado do PMP do Solar. (Serviço na Ponta / Obi-Wan)
   ================================================================== */
body.pmp-page main.container--wide {
  max-width: 960px;
}
.pmp-doc {
  background: var(--surface, #0f172a);
  color: var(--text, #e6ebf5);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 40px clamp(24px, 4vw, 56px) 32px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  line-height: 1.65;
  font-size: 16.5px;
}
.pmp-doc p,
.pmp-doc .pmp-section-purpose {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype",
               "Book Antiqua", serif;
}
.pmp-doc-head {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  margin-bottom: 32px;
}
.pmp-doc-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary, #6366f1) 18%, transparent);
  color: color-mix(in oklab, var(--primary, #6366f1) 88%, var(--text));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-family: inherit;
}
.pmp-doc-crumb .icon {
  width: 14px;
  height: 14px;
}
.pmp-doc h1 {
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1.15;
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
}
.pmp-doc-sub {
  font-family: inherit;
  font-size: 15px;
  color: var(--text-muted, #94a3b8);
  margin: 0 0 18px 0;
}
.pmp-doc-lead {
  font-size: 17px;
  color: var(--text, #e6ebf5);
  margin: 0;
}
.pmp-toc {
  background: var(--surface-alt, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 40px;
}
.pmp-toc-title {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #94a3b8);
  margin: 0 0 12px 0;
  font-weight: 700;
}
.pmp-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
}
.pmp-toc-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  color: var(--text, #e6ebf5);
  text-decoration: none;
  border-radius: 6px;
  transition: background 200ms ease;
  font-size: 15px;
  font-family: inherit;
}
.pmp-toc-list li a:hover {
  background: color-mix(in oklab, var(--primary, #6366f1) 12%, transparent);
  text-decoration: none;
}
.pmp-toc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--primary, #6366f1) 22%, transparent);
  color: var(--primary, #6366f1);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.pmp-section {
  padding-top: 24px;
  padding-bottom: 8px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  scroll-margin-top: 96px;
}
.pmp-section:first-of-type {
  border-top: none;
  padding-top: 8px;
}
.pmp-section-title {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 14px;
  letter-spacing: -0.005em;
}
.pmp-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary, #6366f1);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px color-mix(in oklab,
                                  var(--primary, #6366f1) 40%, transparent);
}
.pmp-section-purpose {
  background: color-mix(in oklab, var(--primary, #6366f1) 8%, transparent);
  border-left: 3px solid color-mix(in oklab,
                                   var(--primary, #6366f1) 60%,
                                   transparent);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 10px 0 18px 0;
  font-size: 15px;
  color: var(--text, #e6ebf5);
}
.pmp-section-purpose strong {
  color: color-mix(in oklab, var(--primary, #6366f1) 90%, var(--text));
  font-family: inherit;
}
.pmp-h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
  margin: 20px 0 10px 0;
}
.pmp-section p {
  margin: 0 0 12px 0;
}
.pmp-section p strong,
.pmp-section p em {
  font-family: inherit;
}
.pmp-refs {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border, rgba(255,255,255,0.10));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.pmp-refs-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
  margin-right: 4px;
}
.pmp-ref-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-alt, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  color: var(--text, #e6ebf5);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: transform 200ms ease, background 200ms ease,
              border-color 200ms ease;
}
.pmp-ref-tag:hover {
  background: color-mix(in oklab, var(--primary, #6366f1) 18%,
                        var(--surface-alt, rgba(255,255,255,0.05)));
  border-color: color-mix(in oklab, var(--primary, #6366f1) 50%,
                          var(--border, rgba(255,255,255,0.10)));
  transform: translateY(-1px);
  text-decoration: none;
}
.pmp-doc-foot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  color: var(--text-muted, #94a3b8);
  font-size: 13.5px;
}
.pmp-doc-foot p {
  font-family: inherit;
  margin: 0;
}
.pmp-foot-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text, #e6ebf5);
  margin-bottom: 8px;
}
.pmp-foot-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.pmp-foot-stats li strong {
  color: var(--text, #e6ebf5);
  font-weight: 600;
  min-width: 32px;
  display: inline-block;
}
.pmp-doc-foot code {
  background: var(--surface-alt, rgba(255,255,255,0.05));
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--text, #e6ebf5);
}
@media (max-width: 640px) {
  .pmp-doc {
    padding: 24px 18px 24px;
    font-size: 15.5px;
  }
  .pmp-toc-list {
    grid-template-columns: 1fr;
  }
  .pmp-section-title {
    font-size: 20px;
  }
  .pmp-section-num {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
}
/* Ícone do tile Plano de Gerenciamento no portal */
.icon-pmp {
  -webkit-mask-image: url('img/icons/pmp.svg?v=1');
          mask-image: url('img/icons/pmp.svg?v=1');
}

/* ── Dashboard: Expenses (lista Org62 por projeto) ─────────────────── */
.proj-dash-card--expenses {
  grid-column: 1 / -1;
}
.proj-dash-exp-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.35;
}
.proj-dash-exp-note strong {
  color: var(--text, #e6ebf5);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.proj-dash-exp-totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 4px;
}
.proj-dash-exp-total-label {
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
}
.proj-dash-exp-total-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text, #e6ebf5);
}
.proj-dash-exp-scroll {
  max-height: 340px;
  overflow: auto;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
}
.proj-dash-exp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.proj-dash-exp-table th,
.proj-dash-exp-table td {
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
}
.proj-dash-exp-table th {
  position: sticky;
  top: 0;
  background: var(--card-bg, #0f172a);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  z-index: 1;
}
.proj-dash-exp-table td.is-num {
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-align: right;
}
.proj-dash-exp-table td.is-check {
  text-align: center;
  color: var(--text-muted, #94a3b8);
}
.proj-dash-exp-table a {
  color: var(--primary, #60a5fa);
  text-decoration: none;
}
.proj-dash-exp-table a:hover {
  text-decoration: underline;
}
.proj-dash-exp-table tr.is-excluded {
  opacity: 0.55;
}
.expenses-page .tc-table tr.is-excluded {
  opacity: 0.55;
}
html[data-theme="light"] .proj-dash-exp-table th {
  background: var(--card-bg, #fff);
}

/* ── Integração (MCP / chaves pessoais) ─────────────────────────── */
.consumo-page .dim { color: var(--text-muted); }
.consumo-page .consumo-h2 {
  font-size: 15px;
  font-weight: 650;
  margin: 0 0 8px;
}
.consumo-grid,
.consumo-connect {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0 28px;
}
.consumo-connect { margin-top: 0; }
@media (max-width: 820px) {
  .consumo-grid, .consumo-connect { grid-template-columns: 1fr; }
}
.consumo-reveal {
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.40);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 8px 0 20px;
}
.consumo-reveal h2 { font-size: 16px; margin: 0 0 4px; }
.consumo-reveal-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.consumo-token {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12.5px;
  word-break: break-all;
}
.consumo-kit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.consumo-snippet {
  font-size: 11.5px;
  line-height: 1.45;
  padding: 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  overflow-x: auto;
  margin: 0;
  max-height: 280px;
}
html[data-theme="light"] .consumo-snippet { background: var(--surface-alt); }
.consumo-snippet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.consumo-keys, .consumo-docs { margin: 8px 0 28px; }
.consumo-doc-list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
}
.consumo-doc-list code { font-size: 12px; }
.consumo-steps {
  list-style: none;
  margin: 14px 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  max-width: 760px;
}
@media (max-width: 720px) {
  .consumo-steps { grid-template-columns: 1fr; }
}
.consumo-steps li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] .consumo-steps li { background: var(--surface-alt); }
.consumo-step-n {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #0a1024;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.consumo-steps strong {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
}
.consumo-steps p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}