/* ==============================================================   APP Gerência CEP — Painel de Diretoria
   Tema: CEP Contabilidade Design System (grafite + amarelo institucional,
   fundos claros quentes, tipografia Inter/Barlow Condensed/JetBrains Mono,
   cantos mínimos, bordas hairline em vez de sombras).
   Regras do sistema respeitadas: sem emojis, sem borda colorida à esquerda
   em cards, sem pills, sem gradientes decorativos, animação mínima.
   ===================================================================== */

:root {
  /* --- Marca --- */
  --cep-yellow: #FCC526;
  --cep-yellow-600: #E8B31C;
  --cep-yellow-100: #FFF4D1;
  --graphite: #404048;
  --graphite-700: #484850;
  --graphite-900: #2C2C32;

  /* --- Neutros quentes --- */
  --ink: #1A1A1A;
  --fg-1: #1A1A1A;
  --fg-2: #4A4843;
  --fg-3: #7A786F;
  --fg-4: #A8A69C;
  --bg-page: #FAF6EE;
  --bg-card: #FFFFFF;
  --bg-surface-2: #EFE8DC;
  --line: #E5DFD3;
  --line-strong: #BFB9AE;

  /* --- Semânticas (sóbrias) --- */
  --success: #2F7A3F;
  --success-bg: #E7F2E9;
  --danger: #B42318;
  --danger-bg: #FBE9E7;
  --warning: #9A5B0B;
  --warning-bg: #FFF4D1;
  --info: #1E4D6B;
  --info-bg: #E3EEF4;

  /* Faróis (pontos de estado — semáforo do painel) */
  --farol-verde: #2F7A3F;
  --farol-amarelo: #E8B31C;
  --farol-vermelho: #B42318;

  /* --- Tipografia --- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  /* --- Estrutura --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, .06);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

/* ============================== Cabeçalho ============================ */
/* Grafite institucional texturizado (motivo da capa do parecer) com a
   barra amarela grossa — o motivo do "E" do logo — como base. */

.topo {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--graphite);
  border-bottom: 4px solid var(--cep-yellow);
  isolation: isolate;
}
.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 30% 30%, #4A4A52 0%, #404048 45%, #38383E 100%);
}
.topo > * { position: relative; z-index: 1; }

.topo-titulo { display: flex; align-items: center; gap: 16px; }
.topo-logo { height: 26px; display: block; }
/* Assinatura da marca no cabeçalho: logo CEP (E amarelo) · descritor "Gestão" */
.topo-marca { display: inline-flex; align-items: center; gap: 11px; color: #fff; }
.topo-logo-svg { height: 23px; width: auto; display: block; }
.topo-marca-div { width: 1px; height: 20px; background: currentColor; opacity: 0.34; }
.topo-marca-gestao {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}
.topo-divisor { width: 1px; height: 30px; background: rgba(255, 255, 255, .25); }
.topo-titulo h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1.1;
}
.topo-titulo p { margin: 2px 0 0; font-size: 12px; color: rgba(255, 255, 255, .65); }

.topo-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Filtros globais — moram na barra de abas (fundo claro), não mais no topo. */
.rotulo-mes { font-size: 12.5px; color: var(--fg-3); }

#seletor-periodo, #seletor-de, #seletor-ate, #seletor-dpto {
  background: var(--bg-card);
  color: var(--fg-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 150ms var(--ease-out);
}
#seletor-periodo:hover, #seletor-de:hover, #seletor-ate:hover, #seletor-dpto:hover { border-color: var(--cep-yellow-600); }
#seletor-periodo:focus-visible, #seletor-de:focus-visible, #seletor-ate:focus-visible, #seletor-dpto:focus-visible {
  outline: 2px solid var(--cep-yellow);
  outline-offset: 1px;
}
#seletor-dpto:disabled { cursor: default; color: var(--fg-2); background: var(--bg-surface-2); }

.periodo-custom { display: inline-flex; align-items: center; gap: 6px; }

/* Badges de status — retangulares (radius mínimo), sem animação */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-neutro { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); text-transform: none; letter-spacing: 0; font-weight: 500; }
.badge-demo { background: var(--cep-yellow); color: var(--ink); }
.badge-alerta { background: var(--danger); color: #fff; }

/* Saudação do dia — banner em destaque no topo do conteúdo */
.saudacao-banner {
  margin: 0 0 16px;
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--cep-yellow);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--fg-1);
  line-height: 1.3;
  overflow-wrap: anywhere; /* login-email sem espaços não estoura o mobile */
}
.saudacao-banner strong {
  background: var(--cep-yellow);
  color: var(--ink);
  padding: 0 8px;
  border-radius: 4px;
}

.oculto { display: none !important; }

/* ============ Barra de aviso de atualização + sincronização manual ===== */
.barra-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 9px 28px;
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--fg-3);
}
.barra-sync-info { display: inline-flex; align-items: center; gap: 8px; }
.barra-sync-info svg { color: var(--fg-4); flex: none; }
.barra-sync-info strong { color: var(--fg-2); font-weight: 600; }
.botao-sync {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: var(--graphite-900);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s var(--ease-out), opacity .15s var(--ease-out);
}
.botao-sync:hover:not(:disabled) { background: var(--graphite-700); }
.botao-sync:disabled { opacity: .6; cursor: default; }
.botao-sync svg { flex: none; }
.botao-sync.girando svg { animation: girar-sync 1s linear infinite; }
.botao-sync.ok { background: var(--success); }
.botao-sync.falha { background: var(--danger); }
@keyframes girar-sync { to { transform: rotate(360deg); } }

.sync-acoes { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.botao-sync-sec {
  padding: 6px 12px;
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out);
}
.botao-sync-sec:hover:not(:disabled) { background: var(--bg-card); border-color: var(--fg-3); }
.botao-sync-sec:disabled { opacity: .5; cursor: default; }

/* ================================ Abas =============================== */

.abas {
  display: flex;
  gap: 2px;
  padding: 6px 24px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
  position: sticky;
  /* Offset segue a ALTURA REAL do topo (setada via ResizeObserver no app.js):
     o header cresce quando os badges quebram linha — um top fixo deixaria a
     barra (e os filtros) deslizar por baixo dele ao rolar. */
  top: var(--topo-h, 76px);
  z-index: 150;
  flex-wrap: wrap; /* em telas estreitas os filtros quebram para a linha de baixo */
}

.abas-tabs { display: flex; gap: 2px; }

/* Filtros de departamento/período — logo após as abas, na mesma barra */
.abas-filtros {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  align-self: center;
  margin: 0 0 4px 18px;
}

.aba {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--fg-3);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px 9px;
  cursor: pointer;
  transition: color 150ms var(--ease-out);
}
.aba:hover { color: var(--fg-1); }
.aba.ativa { color: var(--fg-1); border-bottom-color: var(--cep-yellow); }

/* Barra de abas do painel do colaborador (Dashboard | Rotinas) — reusa .aba */
.colab-abas { margin: 0 0 16px; border-bottom: 1px solid var(--line); }

/* Sub-abas de uma view (ex.: Horas → Minhas horas | Aprovações) — reusa .aba */
.sub-abas { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.sub-aba {
  appearance: none; background: transparent; border: none;
  border-bottom: 3px solid transparent; color: var(--fg-3);
  font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px 9px;
  cursor: pointer; transition: color 150ms var(--ease-out);
}
.sub-aba:hover { color: var(--fg-1); }
.sub-aba.ativa { color: var(--fg-1); border-bottom-color: var(--cep-yellow); }

/* Abas do ambiente Tarefas (Quadro | Lista) — cada uma exibe quantas tarefas
 * tem, para não precisar entrar na aba só para descobrir se há algo lá. */
/* align-items: flex-end mantém as abas coladas na borda de baixo mesmo com a
 * barra de filtros (mais alta) ao lado; flex-wrap deixa os filtros descerem no
 * celular em vez de espremerem as abas. */
.tar-abas { gap: 2px; margin: 0 0 18px; border-bottom: 1px solid var(--line);
  align-items: flex-end; flex-wrap: wrap; }
.tar-abas .aba { display: inline-flex; align-items: center; gap: 7px; }
.tar-aba-qtd {
  font-size: 11px; font-weight: 700; color: var(--fg-3);
  background: var(--bg-surface-2); border-radius: 999px; padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.aba.ativa .tar-aba-qtd { color: var(--fg-2); }

/* Botão de ação principal alternativo (ex.: "Salvar e submeter") — grafite,
   para destacar do amarelo do botão padrão numa mesma barra de ações. */
.botao-acento { background: var(--graphite); color: #fff; }
.botao-acento:hover { filter: brightness(1.12); }

/* Linha de período do formulário de Hora Extra (data + início + fim + remover) */
.hx-periodo {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
.hx-periodo input { flex: 1; min-width: 0; }
.hx-periodo [data-p-remover] { flex: 0 0 auto; }

/* ============ Colabore (mural de sugestões + fila da gestão) ========== */
.badge-status-pendente { background: var(--bg-surface-2); color: var(--fg-2); }
.badge-status-em_andamento { background: var(--cep-yellow-100); color: var(--warning); }
.badge-status-aprovada,
.badge-status-implementada { background: var(--info-bg, #E3EEF4); color: var(--info, #1E4D6B); }
.badge-status-rejeitada { background: var(--danger-bg); color: var(--danger); }
/* Categoria é contexto, não estado — fica neutra para o status dar o tom. */
.col-badge-cat { background: var(--bg-surface-2); color: var(--fg-2); }
/* Quem enxerga a sugestão: no mural (equipe toda) ou reservada à gestão. */
.col-badge-mural { background: var(--cep-yellow-100); color: var(--warning); }
.col-badge-reservada {
  background: transparent; color: var(--fg-3); border: 1px solid var(--line-strong);
}

/* --- Cabeçalho grafite texturizado (mesmo motivo da barra do topo) --- */
.col-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--graphite); color: #fff;
  border-radius: var(--radius-md); padding: 24px 26px; margin-bottom: 14px;
}
.col-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 30% 30%, #4A4A52 0%, #404048 45%, #38383E 100%);
}
.col-hero > * { position: relative; z-index: 1; }
.col-hero-linha {
  display: flex; gap: 20px 40px; flex-wrap: wrap;
  align-items: flex-start; justify-content: space-between;
}
.col-hero-texto { min-width: 260px; flex: 1; }
.col-hero-texto h2 {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  line-height: 1.12; letter-spacing: .01em; color: #fff;
}
.col-hero-texto p {
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.55;
  color: rgba(255, 255, 255, .75); max-width: 540px;
}
.col-hero-numeros { display: flex; gap: 26px; flex-wrap: wrap; }
.col-num-valor {
  display: block; font-family: var(--font-display); font-size: 32px; font-weight: 700;
  line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.col-num-valor.destaque { color: var(--cep-yellow); }
.col-num-valor.alerta { color: #FF8A80; }
.col-num-rotulo {
  display: block; margin-top: 4px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.col-hero-passos {
  display: flex; gap: 10px 32px; flex-wrap: wrap; margin-top: 20px;
  padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: 12px; color: rgba(255, 255, 255, .75);
}
.col-hero-passos strong {
  font-family: var(--font-display); font-size: 15px; color: var(--cep-yellow); margin-right: 8px;
}

/* --- Compositor: publicar no mural --- */
.col-compositor {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 14px;
}
.col-compositor h3 {
  font-family: var(--font-display); font-size: 20px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--fg-1);
}
.col-compositor textarea, .col-editor textarea {
  width: 100%; resize: vertical; min-height: 76px; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--fg-1);
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5;
}
.col-compositor-rodape {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.col-arquivo { font-size: 12px; color: var(--fg-2); display: flex; align-items: center; gap: 6px; }
.col-arquivo input { font-size: 11.5px; max-width: 220px; }
/* A escolha de publicar no mural anda colada ao botão — é a decisão que muda
   o alcance do que acabou de ser escrito, não um ajuste perdido no formulário. */
.col-mural-opcao {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--fg-2); cursor: pointer;
}
.col-mural-opcao input { width: 15px; height: 15px; accent-color: var(--cep-yellow-600); cursor: pointer; }
.col-visib { margin: 10px 0 0; font-size: 12px; color: var(--fg-3); }
.col-contador {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-4); font-variant-numeric: tabular-nums;
}
.col-erro { margin: 10px 0 0; font-size: 12.5px; color: var(--danger); }
.col-nota { margin: 4px 0 12px; font-size: 12.5px; color: var(--fg-3); }
.col-vazio { margin: 0; padding: 26px 10px; text-align: center; color: var(--fg-3); font-size: 13px; }
.col-rotulo-mini {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-3); margin-right: 2px;
}
.col-chips-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.col-chip {
  padding: 4px 12px; background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); color: var(--fg-2);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.col-chip:hover { border-color: var(--fg-1); color: var(--fg-1); }
.col-chip.on { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.col-contagem {
  font-size: 11px; font-weight: 700; color: var(--fg-3); background: var(--bg-surface-2);
  border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.col-aviso {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  padding: 10px 14px; background: var(--success-bg); border: 1px solid #BFD8C4;
  border-radius: var(--radius-sm); font-size: 12.5px; color: var(--success);
}
.col-aviso-x {
  margin-left: auto; background: none; border: none; padding: 0 4px;
  font-size: 15px; line-height: 1; color: var(--success); cursor: pointer;
}

/* --- Mural: cards apoiáveis --- */
.col-mural-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.col-mural-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 14px 16px;
  transition: border-color 150ms var(--ease-out);
}
.col-mural-card:hover { border-color: var(--line-strong); }
.col-mural-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.col-mural-topo .badge-papel:last-child { margin-left: auto; }
.col-mural-texto { margin: 0; flex: 1; font-size: 13.5px; line-height: 1.5; color: var(--fg-1); }
.col-mural-rodape { display: flex; align-items: center; gap: 8px; }
.col-mural-autor {
  font-size: 11.5px; color: var(--fg-3); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col-apoiar {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); color: var(--fg-2);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.col-apoiar:hover { border-color: var(--fg-1); color: var(--fg-1); }
.col-apoiar strong { font-variant-numeric: tabular-nums; }
.col-apoiar.on { background: var(--cep-yellow); border-color: var(--cep-yellow); color: var(--ink); }

/* --- Minhas sugestões (lista) --- */
.col-lista { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md); }
.col-linha { padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.col-linha:last-child { border-bottom: none; }
.col-linha:hover, .col-linha:focus-visible { background: var(--bg-surface-2); outline: none; }
.col-linha-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col-linha-meta { font-size: 11px; color: var(--fg-3); }
.col-linha-data {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); font-variant-numeric: tabular-nums;
}
.col-linha-texto { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-1); }
.col-linha-rodape { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.col-linha-rodape .col-apoiar { margin-left: 0; }
.col-linha-dica { margin-left: auto; font-size: 11px; color: var(--fg-4); }

/* --- Resposta da gestão (mesma caixa nas duas telas) --- */
.col-resposta {
  margin-top: 10px; padding: 10px 12px; background: var(--bg-surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.col-resposta-fila { margin: 0 18px 14px; }
.col-resposta-rot {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-3);
}
.col-resposta p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-2); }

/* --- Fila de análise (gestão) --- */
.col-fila { display: flex; flex-direction: column; gap: 12px; }
.col-fila-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-md); min-width: 0;
}
.col-fila-card.atrasada { border-color: var(--danger); }
.col-fila-corpo { padding: 14px 18px 0; }
.col-fila-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col-fila-apoios { font-size: 11.5px; color: var(--fg-3); }
.col-fila-apoios strong { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.col-prazo {
  margin-left: auto; display: inline-flex; padding: 2px 9px; border-radius: var(--radius-sm);
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  background: var(--bg-surface-2); color: var(--fg-2);
}
.col-prazo.ok { background: var(--success-bg); color: var(--success); }
.col-prazo.atencao { background: var(--warning-bg); color: var(--warning); }
.col-prazo.estourado { background: var(--danger); color: #fff; }
.col-fila-texto { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-1); }
.col-fila-autor { margin: 6px 0 14px; font-size: 11.5px; color: var(--fg-3); }
.col-fila-acoes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 18px; border-top: 1px solid var(--line); background: var(--bg-surface-2);
}
.col-protocolo {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-4);
}
.col-editor {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--line); background: var(--bg-surface-2);
}
.col-editor .col-chips-linha { margin-top: 0; }
.col-editor-acoes { margin-left: auto; display: inline-flex; gap: 8px; }
/* Ação principal da fila (responder/enviar) — .botao-mini vem depois de
   .botao-acento na folha e apagaria o fundo sem esta regra própria. */
.col-fila-acoes .botao-mini.botao-acento,
.col-editor .botao-mini.botao-acento {
  background: var(--cep-yellow); border-color: var(--cep-yellow); color: var(--ink);
}
.col-fila-acoes .botao-mini.botao-acento:hover,
.col-editor .botao-mini.botao-acento:hover {
  background: var(--cep-yellow-600); border-color: var(--cep-yellow-600); color: var(--ink);
}

.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.col-detalhe { display: flex; flex-direction: column; gap: 12px; }
.col-det-topo { display: flex; gap: 6px; flex-wrap: wrap; }
.col-det-texto { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.col-anexos { display: flex; flex-direction: column; gap: 4px; }
.col-anexo { font-size: 13px; color: var(--info, #1E4D6B); text-decoration: none; }
.col-anexo:hover { text-decoration: underline; }
.col-anexo-tam { color: var(--fg-3); font-size: 11px; }
.col-status-ctl { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 10px; }
.col-status-ctl .campo { flex: 1; margin: 0; }

.col-chat {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 320px; overflow-y: auto; padding: 8px;
  background: var(--bg-surface-2); border-radius: var(--radius-sm);
}
.col-msg {
  align-self: flex-start; max-width: 80%;
  background: var(--bg-surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 10px; font-size: 13px;
  display: flex; flex-direction: column; gap: 2px;
}
.col-msg-propria { align-self: flex-end; background: var(--cep-yellow-100); border-color: transparent; }
.col-msg-admin { border-left: 3px solid var(--graphite); }
.col-msg-autor { font-size: 10.5px; font-weight: 700; color: var(--fg-3); text-transform: uppercase; letter-spacing: .03em; }
.col-msg-texto { white-space: pre-wrap; word-break: break-word; }
.col-msg-hora { font-size: 10px; color: var(--fg-3); align-self: flex-end; }
.col-chat-form { display: flex; gap: 8px; }
.col-chat-form input { flex: 1; }

/* ===================== Daily Scrum ===================== */
.daily-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.daily-topo .sub-abas { margin: 0; border: none; }
.daily-dpto-sel { font-size: 13px; color: var(--fg-2); display: flex; align-items: center; gap: 6px; }
.daily-dpto-fixo { font-size: 13px; color: var(--fg-2); }
.daily-mes-rotulo { font-weight: 600; min-width: 130px; text-align: center; display: inline-block; text-transform: capitalize; }

.daily-cal {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 4px;
}
.daily-cab-dia { text-align: center; font-size: 11px; font-weight: 700; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: .04em; padding: 4px 0; }
.daily-cel {
  position: relative; min-height: 52px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px 6px; background: var(--bg-surface);
}
.daily-cel-vazia { border: none; background: transparent; }
.daily-cel-num { font-size: 12px; color: var(--fg-2); }
.daily-cel-marca { position: absolute; right: 6px; bottom: 4px; font-size: 15px; font-weight: 700; }
.daily-cel[role="button"] { cursor: pointer; }
.daily-cel[role="button"]:hover { border-color: var(--cep-yellow); }
.daily-hoje { outline: 2px solid var(--cep-yellow); outline-offset: -1px; }
.daily-realizada { background: var(--farol-verde-bg, #E6F4EA); }
.daily-realizada .daily-cel-marca { color: var(--farol-verde, #1E7E34); }
.daily-naorealizada { background: var(--danger-bg); }
.daily-naorealizada .daily-cel-marca { color: var(--danger); }
.daily-pendente { background: var(--cep-yellow-100); }
.daily-pendente .daily-cel-marca { color: var(--warning); }
.daily-esperada { border-style: dashed; border-color: var(--line-strong); }

.daily-legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--fg-2); }
.daily-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.daily-leg { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }

.daily-dias { display: flex; gap: 6px; flex-wrap: wrap; }
.daily-dia-check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 8px; cursor: pointer; }
.daily-radio { display: flex; gap: 16px; }
.daily-radio label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.campo-inline { display: flex; flex-direction: row; align-items: center; gap: 8px; }

/* ===================== Relatórios ===================== */
.rel-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rel-topo .sub-abas { margin: 0; border: none; }
.rel-filtro { display: flex; align-items: flex-end; gap: 10px; }
.rel-filtro .campo { margin: 0; }
.rel-filtro input[type="date"] { min-width: 140px; }

main { padding: 20px 24px 48px; max-width: 1500px; margin: 0 auto; }

.painel-aba { display: none; }
.painel-aba.ativa { display: block; animation: surgir 180ms var(--ease-out); }
@keyframes surgir { from { opacity: 0; transform: translateY(4px); } }

/* ============================ Faróis ================================= */
/* Semáforo do painel: ponto sólido, sem brilho/sombra colorida. */

.farol {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 6px;
}
.farol-verde { background: var(--farol-verde); }
.farol-amarelo { background: var(--farol-amarelo); }
.farol-vermelho { background: var(--farol-vermelho); }
.farol-nulo { background: var(--line-strong); }

/* Bordas coloridas à esquerda são anti-padrão no design system CEP —
   as classes farol-b-* existem no markup e ficam neutras de propósito. */
.farol-b-verde, .farol-b-amarelo, .farol-b-vermelho, .farol-b-nulo { border-left: none; }

/* ======================= Cartões-resumo (KPI) ======================== */

.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  min-width: 0;
  transition: border-color 150ms var(--ease-out);
}
.card:hover { border-color: var(--line-strong); }
.card h4 {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

/* Número grande em Barlow Condensed — a voz display da marca */
.kpi-valor {
  display: block;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.kpi-sub { display: block; margin-top: 6px; font-size: 12px; color: var(--fg-3); }
.kpi-sub-mini { display: block; margin-top: 2px; font-size: 11px; color: var(--fg-3); }

.duo-kpi { display: flex; gap: 22px; flex-wrap: wrap; }
.duo-kpi > div { flex: 1; min-width: 140px; }

/* Mini-KPIs (linhas compactas dentro de painéis) */
.mini-kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mini-kpi {
  flex: 1;
  min-width: 120px;
  background: var(--bg-page);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.mini-kpi-rotulo { display: block; font-size: 10.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.mini-kpi-valor { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-top: 2px; color: var(--fg-1); }
.mini-kpi-sub { display: block; font-size: 11px; color: var(--fg-3); margin-top: 2px; }

/* ============================ Painéis ================================ */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }

/* Painel do colaborador: 2×2 harmônico — todos os quadros do MESMO tamanho.
   grid-auto-rows: 1fr iguala a altura das duas linhas (a maior manda); cada
   corpo rola por dentro se precisar (a carteira já tem seu próprio scroll). */
.grid-colab { grid-auto-rows: 1fr; }
.grid-colab > .painel { min-height: 0; }
.grid-colab > .painel > .painel-corpo { overflow: auto; }
@media (max-width: 1000px) { .grid-colab { grid-auto-rows: auto; } }

/* Aba Rotinas do colaborador: quadro único ocupa a largura TODA (sem grid);
   a lista da carteira tem scroll próprio, então não precisa de altura fixa. */
.quadro-full { width: 100%; }
.quadro-full > .painel { margin: 0; }

.painel {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.painel.span-2 { grid-column: 1 / -1; }
@media (max-width: 1000px) { .painel.span-2 { grid-column: auto; } }

.painel-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.painel-cab h3 { font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.painel-acoes { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 10px; }

/* Botão de ação secundária (exportar etc.) — retangular, discreto */
.botao-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.botao-mini:hover { border-color: var(--fg-1); color: var(--fg-1); }
/* Enquanto o servidor monta a planilha/PDF: o botão diz que está trabalhando. */
.botao-mini.ocupado { opacity: .6; pointer-events: none; cursor: progress; }

.painel-corpo { padding: 16px 18px; flex: 1; min-width: 0; }
.painel-nota { margin: 8px 0 0; font-size: 12px; color: var(--fg-3); }

.sub-bloco { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.sub-titulo { font-size: 11px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 8px; }

/* ============================ Tabelas ================================ */
/* Densidade de dados é o motivo visual da CEP — hairlines, números
   tabulares em mono, alinhamento à direita. */

.tabela-scroll { overflow-x: auto; }

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tabela th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.tabela td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--fg-1);
}
.tabela tbody tr:hover { background: var(--bg-page); }
.tabela .num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabela-mini { font-size: 12.5px; }
.tabela-mini th, .tabela-mini td { padding: 5px 8px; }

.cel-vermelha { color: var(--danger); font-weight: 700; }
.celula-vazia { color: var(--fg-4); }
.texto-verde { color: var(--success); }
.texto-vermelho { color: var(--danger); }
.txt-faltando { color: var(--fg-4); }
.campo-opcional { font-weight: 400; color: var(--fg-4); font-size: .85em; }

.badge-rein {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--danger-bg);
  color: var(--danger);
}

/* Barra de progresso (processos) — barras horizontais amarelas, o motivo
   do "E" do logo aplicado a dados. */
.cel-prog { min-width: 140px; }
.prog {
  position: relative;
  height: 16px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.prog-preenchido {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--cep-yellow);
  border-radius: var(--radius-sm);
}
.prog-txt {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  color: var(--ink);
}
.proc-grid { display: grid; gap: 12px; }

/* ======================== Ranking IDC ================================ */

.idc-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.idc-linha {
  display: grid;
  grid-template-columns: 220px 1fr 90px;
  align-items: center;
  gap: 12px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
}
.idc-linha:last-child { border-bottom: none; }
.idc-linha:hover { background: var(--bg-page); }
@media (max-width: 800px) { .idc-linha { grid-template-columns: 140px 1fr 74px; } }

.idc-ident { min-width: 0; }
.idc-ident strong { display: block; font-size: 13px; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idc-ident span { font-size: 11px; color: var(--fg-3); }

.idc-barra { min-width: 0; }
.idc-barra svg { display: block; width: 100%; height: 18px; }

.idc-score {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fg-1);
}

/* ============================ Gráficos =============================== */

.graf { display: block; width: 100%; height: auto; }
.graf-mini { max-height: 26px; }
.graf-donut { max-width: 190px; }

.spark { display: inline-block; width: 110px; height: 26px; vertical-align: middle; margin-top: 6px; }

.rolagem-x { overflow-x: auto; }
.rolagem-x svg { min-width: 640px; }

.flex-donut { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut-caixa { flex: 0 0 auto; }
.flex-donut .tabela-scroll { flex: 1; min-width: 220px; }

.legenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--fg-2); }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.legenda i { display: inline-block; width: 9px; height: 9px; border-radius: var(--radius-sm); }

.ponto-cor {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}

/* ============================= Chips ================================= */

.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.chips-rotulo { font-size: 11.5px; color: var(--fg-3); }
.chip {
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 12px;
  color: var(--fg-2);
}
.chip strong { color: var(--fg-1); margin-left: 4px; font-variant-numeric: tabular-nums; }
/* Dispensadas: informativo, não é pendência — tom apagado e tracejado (não conta). */
.chip-dispensada { border: 1px dashed var(--line-strong); background: transparent; color: var(--fg-3); cursor: help; }
.chip-dispensada strong { color: var(--fg-2); }

/* ======================= Listas e estados =========================== */

.lista-simples { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--fg-2); }
.lista-simples li { margin-bottom: 3px; }

.sem-dados {
  padding: 26px 10px;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
}

/* Erro de carregamento */
.erro-bloco {
  background: var(--bg-card);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  text-align: center;
}
.erro-icone { font-size: 22px; display: block; margin-bottom: 8px; color: var(--danger); }
.erro-det { color: var(--fg-3); font-size: 12.5px; margin: 6px 0 14px; }

.botao {
  appearance: none;
  background: var(--cep-yellow);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms var(--ease-out);
}
.botao:hover { background: var(--cep-yellow-600); }
.botao:active { transform: scale(.98); }

/* Skeleton (loading) — discreto, tons de papel */
.skel {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--line) 45%, var(--bg-surface-2) 65%);
  background-size: 220% 100%;
  animation: brilho 1.3s infinite linear;
}
@keyframes brilho { from { background-position: 180% 0; } to { background-position: -40% 0; } }
.skel-lin { height: 12px; margin: 8px 0; }
.skel-val { height: 30px; width: 40%; margin: 10px 0; }
.skel-graf { height: 180px; margin-top: 12px; }

/* ======================= Modal de detalhamento ======================= */

.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover td { background: var(--cep-yellow-100); }

.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(17, 17, 17, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 7vh 16px 16px;
  overflow-y: auto;
}

.modal {
  background: var(--bg-card);
  border-top: 4px solid var(--cep-yellow);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(17, 17, 17, .14);
  width: min(640px, 100%);
  max-width: 96vw;
  /* min-width:0 é essencial: sem isso, sendo item flex do .modal-fundo, uma
     tabela larga faz o modal crescer além da largura e ESTOURAR a tela em vez de
     rolar por dentro (overflow-x da .tabela-scroll). */
  min-width: 0;
  max-height: 84vh;
  overflow: hidden;              /* recorta o conteúdo largo no raio do cartão */
  display: flex;
  flex-direction: column;
  outline: none; /* foco programático (acessibilidade) sem anel visual */
  animation: surgir 180ms var(--ease-out);
}
/* Modal largo para popups com tabela de muitas colunas (ex.: entregas da empresa). */
.modal.modal-largo { width: min(960px, 96vw); }
/* Dentro do modal, a tabela rola no eixo X sem empurrar o diálogo. */
.modal-corpo .tabela-scroll { max-width: 100%; }

.modal-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.modal-cab h3 { font-size: 15px; font-weight: 600; color: var(--fg-1); }

/* Escopado ao cabeçalho: o "×" é um quadrado de 26px, mas a classe também é o
   gancho de fechar usado pelos botões "Cancelar" do rodapé dos formulários
   (`class="botao-mini modal-fechar"`) — sem o escopo, o tamanho fixo cortava a
   palavra "Cancelar" ao meio em todos eles. */
.modal-cab .modal-fechar {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  font-size: 15px;
  line-height: 1;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.modal-cab .modal-fechar:hover { color: var(--fg-1); border-color: var(--fg-1); }

.modal-corpo { padding: 16px 18px; overflow-y: auto; }
.modal-explica { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--fg-2); }
.modal-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 8px;
}
.modal-barra .sub-titulo { margin-bottom: 0; }

/* ===================== Botão de ajuda dos indicadores ================ */

.titulo-ajuda { position: relative; display: inline; }

.ajuda {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  padding: 0;
  vertical-align: middle;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--fg-3);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.ajuda:hover { color: var(--fg-1); border-color: var(--fg-1); }

.ajuda-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 300;
  width: min(300px, 78vw);
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--cep-yellow);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(17, 17, 17, .10);
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-2);
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
}

/* ========================= Painel lateral ============================ */
/* Dois modos: escondido (overlay com backdrop, abre pelo ☰) ou fixo
   (pino ⏍ — o conteúdo desloca e o painel fica sempre visível). */

.botao-menu {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-sm);
  color: #fff;
  width: 34px;
  height: 34px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 150ms var(--ease-out);
}
.botao-menu:hover { border-color: var(--cep-yellow); }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  background: var(--graphite-900);
  border-right: 1px solid rgba(255, 255, 255, .08);
  transform: translateX(-100%);
  transition: transform 200ms var(--ease-out);
}
.sidebar.aberta { transform: none; box-shadow: 0 0 44px rgba(17, 17, 17, .4); }
body.sidebar-fixa .sidebar { transform: none; box-shadow: none; }
body.sidebar-fixa { padding-left: 248px; }

.sidebar-fundo { position: fixed; inset: 0; z-index: 490; background: rgba(17, 17, 17, .45); }

.sidebar-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 3px solid var(--cep-yellow);
}
.sidebar-titulo {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
}
.sidebar-fixar {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .7);
  width: 26px;
  height: 26px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.sidebar-fixar:hover { border-color: var(--cep-yellow); color: #fff; }
body.sidebar-fixa .sidebar-fixar {
  background: var(--cep-yellow);
  border-color: var(--cep-yellow);
  color: var(--ink);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-secao {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  padding: 14px 8px 4px;
}
.sidebar-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .85);
  font: inherit;
  font-size: 13.5px;
  padding: 9px 10px;
  cursor: pointer;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out);
}
.sidebar-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar-item.ativa { background: var(--cep-yellow); color: var(--ink); font-weight: 600; }
.sidebar-item.desabilitada,
.sidebar-item.desabilitada:hover { background: transparent; color: rgba(255, 255, 255, .35); cursor: default; }
/* --- Colabore: o item que chama ---------------------------------------
   Exceção consciente ao "animação mínima" do design system. O módulo depende
   de lembrança: sugestão que ninguém escreve é módulo morto. Fica restrito a
   ESTE item — nenhum outro do menu se mexe — e some inteiro sob
   prefers-reduced-motion, incluindo o ponto e o brilho. */
.sidebar-colabore {
  position: relative;
  overflow: hidden;
  background: rgba(252, 197, 38, .10);
  color: #fff;
  font-weight: 600;
}
.sidebar-colabore:hover { background: rgba(252, 197, 38, .20); }
/* O amarelo SÓLIDO continua significando "você está aqui" — no menu inteiro,
   inclusive aqui. O mockup pintava o Colabore de amarelo, mas mostrava o
   gestor JÁ na tela do Colabore; fora dela, um segundo item sólido brigaria
   com o indicador de aba ativa. Para a gestão o que informa é o contador, que
   aparece nos dois estados. */
.sidebar-colabore.ativa { background: var(--cep-yellow); color: var(--ink); }
.sidebar-colabore.ativa:hover { background: var(--cep-yellow-600); }

.col-menu-lapis {
  display: inline-block;
  transform-origin: 60% 60%;
  animation: cep-lapis 5s ease-in-out infinite;
}
.col-menu-ping { position: relative; margin-left: auto; flex: none; width: 8px; height: 8px; }
.col-menu-ping > span {
  position: absolute; inset: 0; border-radius: 50%; background: var(--cep-yellow);
}
.col-menu-ping > span:last-child { animation: cep-ping 2.4s ease-out infinite; }
.sidebar-colabore.tem-fila .col-menu-ping { display: none; }
.col-menu-contador {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--cep-yellow); color: var(--ink);
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Sobre o item ativo (fundo amarelo) o contador inverte, senão some no fundo. */
.sidebar-colabore.ativa .col-menu-contador { background: var(--ink); color: var(--cep-yellow); }
.col-menu-contador[hidden] { display: none; }
.col-menu-varredura {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(252, 197, 38, .30) 50%, transparent 65%);
  animation: cep-varredura 5s ease-in-out infinite;
}
.sidebar-colabore.ativa .col-menu-varredura {
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
}
@keyframes cep-ping {
  0% { transform: scale(1); opacity: .8; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
@keyframes cep-varredura {
  0%, 74% { transform: translateX(-130%); }
  90%, 100% { transform: translateX(130%); }
}
@keyframes cep-lapis {
  0%, 78%, 100% { transform: rotate(0deg); }
  82% { transform: rotate(-14deg); }
  86% { transform: rotate(10deg); }
  90% { transform: rotate(-6deg); }
  94% { transform: rotate(3deg); }
}
/* Quem pediu menos movimento no sistema operacional não recebe nenhum: o ponto
   fica aceso (ainda informa) e o brilho sai de cena. */
@media (prefers-reduced-motion: reduce) {
  .col-menu-lapis, .col-menu-ping > span:last-child { animation: none; }
  .col-menu-varredura { display: none; }
}

/* Grupo com submenu LATERAL (Cadastros, Configurações).
 *
 * O submenu abre AO LADO da barra, não empurrando a lista para baixo: com a
 * sanfona, abrir Cadastros deslocava todo o resto do menu e a pessoa perdia a
 * referência de onde estava.
 *
 * Ele é `fixed` de propósito. A .sidebar-nav rola (overflow-y: auto), e um
 * filho posicionado por absolute seria CORTADO na horizontal por esse mesmo
 * overflow. Como fixed sai do fluxo, a posição vem do JS (_posicionarFlyout),
 * calculada a partir do botão e reajustada no scroll/resize. */
.sidebar-seta { margin-left: auto; font-size: 13px; line-height: 1;
  opacity: .55; transition: opacity .15s ease, transform .15s ease; }
.sidebar-grupo:hover .sidebar-seta { opacity: 1; }
.sidebar-grupo[aria-expanded="true"] .sidebar-seta { opacity: 1; transform: translateX(2px); }
.sidebar-grupo[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: #fff; }
/* O pai fica marcado enquanto um filho é a view corrente, mas discreto: quem
 * está ativo de fato é o filho, e dois amarelos ao mesmo tempo confundem. */
.sidebar-grupo.tem-ativa { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar-sub {
  position: fixed;
  z-index: 510;                 /* acima da própria barra (500) */
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--graphite-900);
  border: 1px solid rgba(255, 255, 255, .1);
  border-left: 3px solid var(--cep-yellow);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 44px rgba(17, 17, 17, .55);
}
.sidebar-subitem { font-size: 13px; }
.sidebar-item em {
  margin-left: auto;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .1);
}
.sidebar-icone { width: 18px; text-align: center; font-size: 14px; }

.sidebar-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.sidebar-usuario { min-width: 0; }
.sidebar-usuario strong {
  display: block;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-usuario span { display: block; font-size: 11px; color: rgba(255, 255, 255, .55); }
.sidebar-rodape .botao-mini { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .8); }
.sidebar-rodape .botao-mini:hover { border-color: var(--cep-yellow); color: #fff; }

/* Filtros de período/departamento moram na barra de abas (#abas-painel),
   que já é ocultada por inteiro fora da view Painel — sem regra extra aqui. */

/* Em telas estreitas o modo fixo vira overlay (não cabe deslocar) */
@media (max-width: 900px) {
  body.sidebar-fixa { padding-left: 0; }
  body.sidebar-fixa .sidebar { transform: translateX(-100%); }
  body.sidebar-fixa .sidebar.aberta { transform: none; }
}

/* ==================== Calendário de vencimentos ====================== */

.cal-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }

/* Caixas de seleção das fontes da agenda. As duas margens automáticas (aqui e
   no botão "hoje") dividem o espaço livre: o grupo fica entre o mês e o botão,
   como no resto do cabeçalho. */
.cal-fontes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
}
.cal-fonte {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  white-space: nowrap;
}
.cal-fonte input { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: var(--cep-yellow-600); }
.cal-fonte:hover { color: var(--fg-1); }
.cal-mes {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--fg-1);
  min-width: 150px;
  text-align: center;
}
.cal-hoje-btn { margin-left: auto; }

.cal-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-sem {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 2px 0;
}
.cal-dia {
  position: relative;
  min-height: 52px;
  background: var(--bg-page);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
}
.cal-vazio { background: transparent; border-color: transparent; }
.cal-num { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.cal-qtd {
  position: absolute;
  right: 6px;
  bottom: 3px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.cal-dia[data-cal-dia] { cursor: pointer; }
.cal-dia[data-cal-dia]:hover, .cal-dia[data-cal-dia]:focus-visible { border-color: var(--fg-2); outline: none; }

/* Estados do dia: pendência com multa > pendência > tudo entregue */
.cal-pendente { background: var(--warning-bg); border-color: var(--cep-yellow-600); }
.cal-pendente .cal-qtd { color: var(--warning); }
.cal-multa { background: var(--danger-bg); border-color: var(--danger); }
.cal-multa .cal-num, .cal-multa .cal-qtd { color: var(--danger); }
.cal-entregue { background: var(--success-bg); border-color: #BFD8C4; }
.cal-entregue .cal-qtd { color: var(--success); }
.cal-hoje { outline: 2px solid var(--graphite); outline-offset: 1px; }
.cal-hoje .cal-num { font-weight: 700; color: var(--fg-1); }

/* Badges de status no popup do dia (entregue/no prazo/pendente) */
.st-badge {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.st-entregue { background: var(--success-bg); color: var(--success); }
.st-prazo    { background: var(--warning-bg); color: var(--warning); }
.st-pendente { background: var(--danger-bg); color: var(--danger); }
.dot-st { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-right: 3px; }
.dot-entregue { background: var(--success); }
.dot-prazo { background: var(--cep-yellow-600); }
.dot-pendente { background: var(--danger); }
/* Entregue com atraso: verde (entregue) com aviso âmbar (foi tarde) */
.st-entregue-atraso { background: var(--success-bg); color: var(--warning); box-shadow: inset 0 0 0 1px var(--cep-yellow-600); }
.dot-entregue-atraso { background: var(--warning); }
/* Chip que explica o vermelho da grade: obrigações em aberto com multa */
.chip-multa { background: var(--danger-bg); color: var(--danger); }
.chip-multa strong { color: var(--danger); }

/* ===================== Quadro "Minha carteira" ======================= */

.cart-filtro {
  background: var(--bg-card);
  color: var(--fg-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.cart-filtro:hover { border-color: var(--cep-yellow-600); }

/* Barra de busca (empresa) + filtro por responsável — quadro de progresso da
   gestão/coordenação. Fica no topo do corpo do quadro (o cabeçalho já tem o
   select de período). */
.cart-busca-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.cart-busca {
  flex: 1 1 180px;
  min-width: 140px;
  background: var(--bg-card);
  color: var(--fg-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  font: inherit;
  font-size: 12.5px;
}
.cart-busca:focus {
  outline: 2px solid var(--cep-yellow);
  outline-offset: -1px;
  border-color: var(--cep-yellow-600);
}
.cart-busca-bar .cart-filtro { flex: 0 1 auto; }

/* Abas do quadro "Análise de entregas" (Acompanhamento / Tarefas / Solicitações) */
.analise-abas {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
/* Grupo à direita da linha das abas: ajuda (?) + filtro de período. */
.analise-abas-dir {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 5px 8px;
}
.analise-aba {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-3);
  cursor: pointer;
  white-space: nowrap;
}
.analise-aba:hover { color: var(--fg-1); }
.analise-aba.ativa { color: var(--fg-1); border-bottom-color: var(--cep-yellow); }
.analise-aba:focus-visible { outline: 2px solid var(--cep-yellow); outline-offset: 2px; }
/* Bolinha de "novidade" (nova tarefa/solicitação desde a última visita à aba) */
.analise-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  margin-left: 5px;
  vertical-align: middle;
}

/* Barra de progresso 0–100% (entregues/total no período) */
.cart-bar {
  height: 8px;
  min-width: 120px;
  background: var(--bg-surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.cart-fill { height: 100%; background: var(--cep-yellow-600); }
.cart-fill.cheia { background: var(--success); }
.cart-cel-bar { width: 28%; }

/* Linha clicável (abre o popup com as entregas da empresa) —
   sem identificador a linha não é clicável e não ganha cursor/hover */
.cart-linha[data-cart-emp] { cursor: pointer; }
.cart-linha[data-cart-emp]:hover td { background: var(--cep-yellow-100); }
.cart-linha[data-cart-emp]:focus-visible { outline: 2px solid var(--cep-yellow); outline-offset: -2px; }

/* Lista pode ser longa (gestão vê a carteira inteira): rola dentro do quadro */
.cart-scroll .tabela-scroll { max-height: 420px; overflow-y: auto; }
.cart-scroll thead th { position: sticky; top: 0; background: var(--bg-card); z-index: 1; }

/* ============ Análise Financeira + Fechamento mensal ================= */

.fin-instrucoes p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.fin-instrucoes code {
  background: var(--bg-surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.fin-instrucoes .lista-simples li { font-size: 12.5px; }

.fechamento-abre { font-size: 14px; line-height: 1.55; margin: 0 0 4px; }
.fechamento-lista li { margin: 5px 0; font-size: 13px; line-height: 1.5; }

/* ===== Pizza clicável "Minhas obrigações em aberto" (colaborador) ===== */
.pizza-caixa { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: center; }
.pizza-caixa .graf-donut { max-width: 200px; }
.fatia-clic { cursor: pointer; transition: opacity 120ms var(--ease-out); }
.fatia-clic:hover { opacity: .82; }
.fatia-clic:focus-visible { outline: 2px solid var(--cep-yellow); outline-offset: 2px; }
.pizza-legenda { display: flex; flex-direction: column; gap: 6px; }
.pizza-leg-item {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 4px 8px; font: inherit; font-size: 12.5px; color: var(--fg-2);
  cursor: pointer; text-align: left; transition: background 120ms var(--ease-out);
}
.pizza-leg-item:hover { background: var(--bg-surface-2); }
.pizza-leg-item i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.pizza-leg-item strong { color: var(--fg-1); font-variant-numeric: tabular-nums; }

/* Ação destrutiva discreta (ex.: Resetar senha) + badge de senha temporária */
.botao-perigo { color: var(--danger); border-color: var(--danger); }
.botao-perigo:hover { background: var(--danger-bg); }
.badge-senha-temp { background: var(--warning-bg); color: var(--warning); }
/* Modal bloqueante: sem X de fechar (troca de senha obrigatória) */
.modal-bloqueante .modal-cab .modal-fechar { display: none; }

/* Tooltip do dia */
.cal-tip {
  position: fixed;
  z-index: 600;
  width: min(300px, 86vw);
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--cep-yellow);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(17, 17, 17, .14);
  padding: 10px 12px;
  font-size: 12px;
  pointer-events: none;
}
.cal-tip strong { display: block; font-size: 12.5px; color: var(--fg-1); text-transform: capitalize; }
.cal-tip-resumo { display: block; margin-top: 2px; color: var(--fg-3); }
.cal-tip ul { margin: 8px 0 0; padding: 0; list-style: none; }
.cal-tip li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-top: 1px solid var(--line);
}
.cal-tip-nome { color: var(--fg-2); min-width: 0; }
.cal-tip-qtd { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; color: var(--fg-1); }
.cal-tip-qtd small { color: var(--fg-3); }
.cal-tip-mais { display: block; margin-top: 6px; font-size: 11px; color: var(--fg-3); font-style: normal; }

/* ===================== Formulários (modais/views) ==================== */

.form-linhas { display: flex; flex-direction: column; gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--fg-2); }
.campo > span { font-weight: 600; }
.campo input, .campo select {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--fg-1);
  font: inherit;
  font-size: 13px;
}
.campo input:focus-visible, .campo select:focus-visible {
  outline: 2px solid var(--cep-yellow);
  outline-offset: 1px;
}
.campo-linha { flex-direction: row; align-items: center; gap: 8px; }
/* Dica curta abaixo de um campo: explica a consequência da escolha (ex.: o que
   o gestor do departamento passa a receber), sem virar parágrafo de ajuda. */
.campo-nota { font-weight: 400; font-size: 11.5px; color: var(--fg-3); line-height: 1.35; }
.campo-linha input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--cep-yellow-600); }
.form-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 4px; }
.form-erro { margin: 0; font-size: 12.5px; color: var(--danger); }
.form-ok { color: var(--success); }

/* Badges de papel (cadastro de usuários) */
.badge-papel {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.badge-gestao { background: var(--graphite); color: #fff; }
.badge-coord { background: var(--cep-yellow-100); color: var(--warning); }
.badge-colab { background: var(--info-bg, #E3EEF4); color: var(--info, #1E4D6B); }
.badge-inativo { background: var(--bg-surface-2); color: var(--fg-3); }

/* Presença no cadastro de usuários (Online/Offline) + IP em fonte monoespaçada,
   para os números alinharem entre as linhas da coluna. */
.selo-presenca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.selo-presenca .ponto-presenca {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.selo-presenca.online { color: var(--success); }
.selo-presenca.online .ponto-presenca {
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}
.selo-presenca.offline { color: var(--fg-3); font-weight: 500; }
.mono-ip { font-family: var(--font-mono); font-size: 12px; }

/* Badges de prioridade (Tarefas) */
.badge-prio-alta { background: var(--danger-bg); color: var(--danger); }
.badge-prio-media { background: var(--cep-yellow-100); color: var(--warning); }
.badge-prio-baixa { background: var(--bg-surface-2); color: var(--fg-3); }

/* Tarefa concluída: texto esmaecido e riscado */
.tarefa-concluida > td { opacity: .6; }
.tarefa-concluida strong { text-decoration: line-through; }

/* Par de campos lado a lado no formulário (prioridade + status) */
.form-duo { display: flex; gap: var(--gap, 12px); }
.form-duo > .campo { flex: 1; }

/* Tag vermelha de multa (linhas de entregas do colaborador) */
.tag-multa {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Tag neutra "tarefa" (distingue tipo='T' de obrigação no calendário/listas) */
.tag-tarefa {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-surface-2);
  color: var(--fg-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mini-kpi-texto { font-size: 16px; word-break: break-word; }

/* ========================= Página de login =========================== */

body.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 30% 20%, #4A4A52 0%, #404048 45%, #2C2C32 100%);
}
.login-caixa { width: min(380px, 94vw); padding: 24px 0; }
.login-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-card);
  border-top: 4px solid var(--cep-yellow);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 44px rgba(17, 17, 17, .35);
  padding: 34px 34px 30px;
}
.login-logo { width: 72px; height: 72px; align-self: center; margin-bottom: 12px; }
.login-card h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
  color: var(--fg-1);
}
.login-sub { margin: -8px 0 4px; text-align: center; font-size: 13px; color: var(--fg-3); }
.login-erro {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 12.5px;
}
.login-botao { width: 100%; padding: 10px; font-size: 14px; }
.login-botao:disabled { opacity: .6; cursor: wait; }
/* Link "Esqueci minha senha" / "Voltar ao login" (botão em texto) */
.login-link {
  width: 100%; background: none; border: none; padding: 4px; margin-top: 2px;
  font: inherit; font-size: 12.5px; color: var(--fg-3); cursor: pointer;
  text-align: center; text-decoration: underline; text-underline-offset: 2px;
}
.login-link:hover { color: var(--cep-yellow-600); }
.login-hint { margin: -2px 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--fg-3); text-align: center; text-wrap: pretty; }
.login-msg {
  margin: 2px 0 4px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45;
  color: var(--info); background: var(--bg-surface-2); border-radius: var(--radius-sm);
}
.login-rodape { margin: 14px 0 0; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .55); }

/* ============================ Impressão ============================== */

@media print {
  body { background: #fff; }
  .topo, .abas { position: static; }
  .topo { background: var(--graphite); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .card, .painel { break-inside: avoid; }
  .sidebar, .sidebar-fundo, .botao-menu { display: none; }
  body.sidebar-fixa { padding-left: 0; }
}

/* ======================= Gestão de Processos ========================= */
.botao-primario { background: var(--graphite); color: #fff; border: 1px solid var(--graphite); }
.botao-primario:hover:not(:disabled) { background: var(--graphite-900); border-color: var(--graphite-900); }
.form-vert { display: flex; flex-direction: column; gap: 12px; }
.form-vert label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg-2); font-weight: 600; }
.form-vert input, .form-vert select { padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); font: inherit; background: var(--bg-card); color: var(--fg-1); }
.form-vert .check-inline { flex-direction: row; align-items: center; gap: 7px; font-weight: 500; }
.form-vert .check-inline input { width: auto; }
.form-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.painel-cabecalho { padding: 12px 16px 0; }
.painel-cabecalho h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--fg-1); }

.procg-toolbar { display: flex; gap: 8px; margin: 4px 0 14px; }
.procg-grid { align-items: start; }
.procg-lista { display: flex; flex-direction: column; gap: 8px; }
.procg-item { display: block; width: 100%; text-align: left; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; cursor: pointer; transition: border-color 120ms; }
.procg-item:hover { border-color: var(--line-strong); }
.procg-item-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.procg-item-topo strong { font-size: 13.5px; color: var(--fg-1); }
.procg-item-sub { font-size: 12px; color: var(--fg-3); margin: 2px 0 7px; }
.procg-item-pct { font-size: 11.5px; color: var(--fg-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.procg-barra { height: 6px; background: var(--bg-surface-2); border-radius: 999px; overflow: hidden; }
.procg-barra > span { display: block; height: 100%; background: var(--success); border-radius: 999px; transition: width 200ms var(--ease-out); }
.procg-mat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.procg-mat:last-child { border-bottom: 0; }
.procg-mat-info strong { font-size: 13.5px; color: var(--fg-1); }
.procg-mat-meta { font-size: 11.5px; color: var(--fg-3); display: block; margin-top: 2px; }
.procg-mat-acoes { display: flex; gap: 6px; flex: none; }

.procg-op-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.procg-op-titulo strong { font-size: 15px; }
.procg-arvore { display: flex; flex-direction: column; gap: 2px; }
.procg-no { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; }
.procg-no.feito .procg-nome { color: var(--fg-3); text-decoration: line-through; }
.procg-tag { width: 18px; text-align: center; flex: none; }
.procg-check { background: none; border: 0; cursor: pointer; font-size: 17px; line-height: 1; padding: 0; color: var(--fg-2); }
.procg-check:hover { color: var(--success); }
.procg-nome { color: var(--fg-1); }
.procg-folder .procg-nome { font-weight: 650; }
.procg-tarefa-chip { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--warning-bg); color: var(--warning); white-space: nowrap; }
.procg-desd { align-items: flex-start; }
.procg-desd-corpo { display: flex; flex-direction: column; gap: 6px; }
.procg-opcoes { display: flex; gap: 6px; flex-wrap: wrap; }
.procg-template-passos { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.procg-opcao-row { display: flex; gap: 6px; margin-bottom: 6px; }
.procg-opcao-row input, .procg-opcao-row select { flex: 1; }
.procg-subnav { border-bottom: 1px solid var(--line); margin: 0 0 16px; gap: 4px; }
.painel-cabecalho.procg-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ======================= Controle de Tarefas (kanban) ================ */
/* Visual conforme o redesenho da seção Tarefas: cada coluna carrega a cor do
 * seu estado numa borda superior de 3px + faixa de cabeçalho tingida, e os
 * cards ficam brancos sobre o creme da coluna. As cores por coluna vêm de
 * --kb-cor / --kb-cor-bg, definidas nos modificadores .kb-col-<id>.        */
.kb-board { display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .kb-board { grid-template-columns: 1fr; } }
.kb-col {
  --kb-cor: var(--fg-3); --kb-cor-bg: var(--bg-surface-2);
  display: flex; flex-direction: column; min-height: 320px;
  background: var(--bg-surface-2); border: 1px solid var(--line);
  border-top: 3px solid var(--kb-cor); border-radius: var(--radius-md);
}
.kb-col-afazer     { --kb-cor: var(--danger);        --kb-cor-bg: var(--danger-bg); }
.kb-col-andamento  { --kb-cor: var(--cep-yellow-600); --kb-cor-bg: var(--warning-bg); }
.kb-col-finalizado { --kb-cor: var(--success);       --kb-cor-bg: var(--success-bg); }
.kb-col-cab {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--kb-cor-bg); color: var(--kb-cor);
}
.kb-col-ponto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.kb-col-nome {
  flex: 1; font-family: var(--font-display);
  font-weight: 600; font-size: 17px; letter-spacing: .04em; text-transform: uppercase;
}
.kb-col-qtd {
  font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 2px;
  background: var(--bg-card); color: var(--kb-cor); border: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
}
/* A coluna ROLA por dentro em vez de esticar a página: com 30 cards em "A
 * fazer", o cabeçalho das outras colunas some da tela e o quadro deixa de ser
 * um quadro. O teto acompanha a altura da janela. */
.kb-col-corpo { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 10px;
  transition: background 120ms; max-height: calc(100vh - 300px); min-height: 90px;
  overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 900px) { .kb-col-corpo { max-height: 60vh; } }
.kb-drop-ativa { background: rgba(47, 122, 63, .10); outline: 2px dashed var(--success); outline-offset: -3px; }
.kb-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px 13px; cursor: grab; transition: border-color 150ms, box-shadow 150ms; }
.kb-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
/* O card arrastado fica fantasma NO LUGAR NOVO — é ele que mostra onde vai
 * cair, então não pode sumir nem virar uma linha tracejada à parte. */
.kb-arrastando { opacity: .45; cursor: grabbing; }
/* Enquanto os vizinhos deslizam (FLIP), o hover atrapalharia: o mouse passa
 * por cima deles no meio do caminho e a borda pisca. */
.kb-col-corpo.kb-animando .kb-card:hover { border-color: var(--line); box-shadow: none; }
/* Cliente no topo do card, acima do título: num escritório contábil é o que
 * mais separa uma tarefa da outra. Uma linha só — razão social é longa. */
.kb-card-cliente { font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-card-titulo { font-size: 13.5px; font-weight: 500; color: var(--fg-1); line-height: 1.35; }
.kb-card-rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 9px; }
.kb-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.kb-chip {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 2px;
  color: var(--fg-2); background: var(--bg-surface-2);
}
.kb-chip svg { width: 12px; height: 12px; flex: none; }
.kb-chip-vencida { background: var(--danger-bg); color: var(--danger); font-weight: 700; }
.kb-chip-ok { background: var(--success-bg); color: var(--success); }
/* Sobreposição em leque: o anel branco recorta o avatar de trás. */
.kb-avatares { display: flex; padding-left: 6px; flex: none; }
.kb-avatar {
  width: 24px; height: 24px; border-radius: 50%; margin-left: -6px; flex: none;
  border: 2px solid var(--bg-card); background: var(--graphite); color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center;
}
.kb-avatar-dono { background: var(--cep-yellow); color: var(--ink); }
.kb-avatar-mini { width: 20px; height: 20px; font-size: 9px; margin-left: 0; border-width: 0; }
.kb-add {
  margin: 0 10px 10px; padding: 7px;
  background: none; border: 1px dashed var(--line-strong);
  border-radius: 2px; color: var(--fg-3); font: inherit; font-size: 12.5px;
  font-weight: 500; cursor: pointer; transition: 150ms;
}
.kb-add:hover { border-color: var(--fg-3); color: var(--fg-1); background: var(--bg-card); }
.kb-dica { margin: 14px 2px 0; font-size: 12.5px; color: var(--fg-3); }
.kb-dica strong { color: var(--success); }

/* Confete da conclusão. z-index acima de tudo (modal é 400, sidebar 500) e
 * pointer-events:none — a tela continua clicável enquanto as peças caem. */
.confete-tela {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 900;
}

/* --- Aba Lista (tarefas pessoais) --- */
.tar-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 18px; }
.tar-cartao { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 18px; }
.tar-cartao-rot { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.tar-cartao-num { font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1.05; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.tar-cartao-sub { font-size: 12.5px; color: var(--fg-2); }
.tar-num-vermelho { color: var(--danger); }
.tar-num-verde { color: var(--success); }
.tar-num-amarelo, .tar-num-neutro { color: var(--fg-1); }  /* sem alarme: número neutro */
.tar-ponto-neutro { background: var(--farol-verde); }      /* zero vencidas = está bem */
.tar-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.tar-ponto-amarelo { background: var(--farol-amarelo); }
.tar-ponto-vermelho { background: var(--farol-vermelho); }
.tar-ponto-verde { background: var(--farol-verde); }
.tar-painel .painel-cab h3 { font-family: var(--font-display); font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }
.tar-banda { margin: 0; padding: 9px 16px; background: var(--bg-surface-2); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--fg-2); }
/* NÃO usar display:flex aqui: vira caixa flex e o <td> perde o alinhamento
 * vertical da linha da tabela (as linhas cresciam e os botões subiam). */
/* Filtros do ambiente de Tarefas: vão na barra de abas, empurrados para a
 * direita. No celular quebram para a linha de baixo em vez de espremer as abas. */
#tar-filtros { margin-left: auto; }
.tar-filtros { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.tar-filtro { display: flex; flex-direction: column; gap: 2px; }
.tar-filtro > span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-3); }
/* Razão social é longa: o seletor de cliente ganha mais espaço que os outros. */
.tar-filtro-largo select { max-width: 260px; }
.tar-filtro select { font-size: 12.5px; padding: 4px 8px; max-width: 190px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--bg-card); color: inherit; }
@media (max-width: 720px) {
  #tar-filtros { margin-left: 0; width: 100%; padding-top: 8px; }
  .tar-filtro select { max-width: none; width: 100%; }
  .tar-filtro { flex: 1 1 140px; }
}
.tar-vazio { background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 34px 18px; text-align: center; }
.tar-vazio p { margin: 0 0 14px; color: var(--fg-2); font-size: 13.5px; }
.tar-acoes { white-space: nowrap; }
.tar-acoes .botao-mini + .botao-mini { margin-left: 6px; }

/* caixa de "nova tarefa" — abre NA COLUNA, no lugar do botão (nada de prompt) */
.kb-novo { margin: 0 10px 10px; }
.kb-novo-linha { display: flex; align-items: stretch; gap: 6px; }
.kb-novo-txt {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; line-height: 1.35;
  color: var(--fg-1); background: var(--bg-card); border: 1px solid var(--cep-yellow);
  border-radius: 2px; padding: 7px 9px; resize: none;
}
.kb-novo-txt:focus { outline: 2px solid var(--cep-yellow-600); outline-offset: -1px; }
.kb-novo-ok {
  flex: none; font: inherit; font-size: 12.5px; font-weight: 600; padding: 0 14px;
  background: var(--graphite-900); color: #fff; border: 0; border-radius: 2px; cursor: pointer;
}
.kb-novo-ok:hover { background: var(--ink); }
.kb-novo-x {
  flex: none; width: 30px; font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  background: var(--bg-card); color: var(--fg-3); border: 1px solid var(--line); border-radius: 2px;
}
.kb-novo-x:hover { color: var(--fg-1); border-color: var(--line-strong); }
.kb-novo-dica { display: block; margin-top: 6px; font-size: 10.5px; color: var(--fg-3); }
.kb-novo-erro { margin: 6px 0 0; font-size: 11.5px; color: var(--danger); }

/* modal estilo Trello */
.kb-modal-shell .modal { width: min(980px, 96vw); }
.kb-modal { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; }
@media (max-width: 800px) { .kb-modal { grid-template-columns: 1fr; } }
.kb-modal-esq, .kb-modal-dir { min-width: 0; }
.kb-titulo-inp { width: 100%; font: inherit; font-size: 19px; font-weight: 800; color: var(--fg-1); border: 1px solid transparent; border-radius: var(--radius-md); padding: 4px 6px; background: transparent; }
.kb-titulo-inp:hover, .kb-titulo-inp:focus { border-color: var(--line-strong); background: var(--bg-card); outline: none; }
/* Pílula de status: continua sendo um <select> (é o controle que move a
 * tarefa de coluna), mas veste a cor da coluna atual, como no card. */
.kb-status-sel {
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 2px; border: 1px solid currentColor;
  background: var(--bg-card); color: var(--fg-2); cursor: pointer;
}
.kb-status-afazer     { background: var(--danger-bg);  color: var(--danger); }
.kb-status-andamento  { background: var(--warning-bg); color: var(--warning); }
.kb-status-finalizado { background: var(--success-bg); color: var(--success); }
.kb-modal-rodape { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.kb-concluir { background: var(--success); color: #fff; border-color: var(--success); }
.kb-concluir:hover { background: #276634; }
.kb-acoes-linha { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.kb-data-lab, .kb-file-lab { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.kb-data-lab input { border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--fg-1); width: 118px; }
.kb-excluir { color: var(--danger); border-color: var(--danger); margin-left: auto; }
.kb-h4 { margin: 16px 0 7px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); display: flex; align-items: center; gap: 8px; }
.kb-desc { width: 100%; min-height: 74px; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-card); color: var(--fg-1); resize: vertical; }
.kb-cliente select { font: inherit; font-size: 12.5px; padding: 5px 8px; width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--bg-card); color: inherit; }
.kb-cliente-nome { font-size: 13px; color: var(--fg-1); }
.kb-membros { display: flex; gap: 6px; flex-wrap: wrap; }
.kb-membro { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-surface-2); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12px; color: var(--fg-1); }
.kb-add-membro select { margin-top: 7px; font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: transparent; color: var(--fg-2); max-width: 100%; }
.kb-check-topo { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.kb-check-barra { height: 6px; background: var(--bg-surface-2); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.kb-check-barra > span { display: block; height: 100%; background: var(--success); }
.kb-checklist { display: flex; flex-direction: column; gap: 4px; }
.kb-check-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-1); }
.kb-check-item .kb-x { margin-left: auto; }
.kb-riscado { text-decoration: line-through; color: var(--fg-3); }
.kb-add-check { display: flex; gap: 6px; margin-top: 7px; }
.kb-add-check input { flex: 1; font: inherit; font-size: 12.5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.kb-anexos { display: flex; flex-direction: column; gap: 5px; }
.kb-anexo { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kb-anexo a { color: var(--fg-1); text-decoration: none; font-weight: 600; }
.kb-anexo a:hover { text-decoration: underline; }
.kb-anexo-meta { font-size: 11px; color: var(--fg-3); }
.kb-anexo .kb-x { margin-left: auto; }
.kb-x { background: none; border: 0; color: var(--fg-4); font-size: 15px; cursor: pointer; line-height: 1; padding: 2px 5px; border-radius: 4px; }
.kb-x:hover { color: var(--danger); background: var(--danger-bg); }
.kb-add-coment { display: flex; gap: 6px; margin-bottom: 12px; }
.kb-add-coment input { flex: 1; font: inherit; font-size: 12.5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.kb-feed { display: flex; flex-direction: column; gap: 10px; max-height: 440px; overflow-y: auto; }
.kb-feed-coment { display: flex; gap: 8px; }
.kb-feed-coment .kb-feed-texto { background: var(--bg-surface-2); border-radius: var(--radius-md); padding: 6px 10px; font-size: 13px; margin: 3px 0 2px; }
.kb-feed-atv { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--fg-2); }
.kb-feed-data { font-size: 10.5px; color: var(--fg-4); display: inline-block; }
.kb-coment-corpo { min-width: 0; flex: 1; }
/* Editar/Excluir só aparecem ao passar o mouse pelo comentário — no toque,
 * onde :hover não existe, ficam sempre visíveis. */
.kb-coment-acoes { display: inline-flex; gap: 8px; margin-left: 8px;
  opacity: 0; transition: opacity .12s ease; }
.kb-feed-coment:hover .kb-coment-acoes,
.kb-coment-acoes:focus-within { opacity: 1; }
@media (hover: none) { .kb-coment-acoes { opacity: 1; } }
.kb-coment-acao { background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 10.5px; color: var(--fg-4); text-decoration: underline; }
.kb-coment-acao:hover { color: var(--fg-2); }
.kb-coment-edit { width: 100%; margin: 3px 0 4px; padding: 6px 10px; font: inherit;
  font-size: 13px; resize: vertical; background: var(--bg-surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); color: inherit; }

/* ============ "Minhas tarefas" — dashboard do colaborador ============ */
/* Valores medidos no desenho enviado, não estimados. O painel tem corpo
 * colado nas bordas: os cartões de prioridade e a lista têm o próprio
 * respiro, e o padding do painel-corpo dobraria a margem. */
/* O desenho traz os títulos do dashboard em caixa-alta condensada — a mesma
 * regra que o módulo Tarefas já usa (.tar-painel). Vale para os três painéis
 * da tela: aplicar só no novo deixaria um destoando dos vizinhos. */
#colab-conteudo .painel-cab h3 { font-family: var(--font-display); font-size: 17px;
  letter-spacing: .04em; text-transform: uppercase; }
.painel-tarefas-colab .painel-corpo { padding: 0; }
.ct-conta { font-size: 12px; color: var(--fg-3); margin-right: 2px; }

.ct-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  padding: 14px; }
.ct-tile { position: relative; display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px; padding: 12px 14px 14px;
  background: var(--bg-page); border: 1px solid var(--line);
  border-radius: var(--radius-md); cursor: pointer; text-align: left; min-width: 0; }
.ct-tile:hover { border-color: var(--line-strong); }
/* A faixa de seleção mora numa borda própria, sobreposta: usar border-bottom
 * empurraria o conteúdo 3px ao selecionar e a linha inteira dançaria. */
.ct-tile::after { content: ''; position: absolute; left: -1px; right: -1px; bottom: -1px;
  height: 3px; background: transparent; }
.ct-tile.ativa::after { background: var(--cep-yellow); }
.ct-tile-num { font-family: var(--font-display); font-size: 30px; font-weight: 700;
  line-height: 1; color: var(--fg-1); font-variant-numeric: tabular-nums; }

.ct-eti { display: inline-flex; padding: 2px 8px; border-radius: 2px; font-size: 10px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; color: #fff; }
.ct-p-todas { background: var(--graphite); }
.ct-p-muito-alta { background: var(--danger); }
.ct-p-alta { background: #F3D2D2; color: #8E2A2A; }
.ct-p-media { background: var(--cep-yellow); color: var(--ink); }
.ct-p-baixa { background: var(--bg-surface-2); color: var(--fg-2); }

.ct-lista { border-top: 1px solid var(--line); }
.ct-linha { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); }
.ct-linha:last-child { border-bottom: 0; }
.ct-linha:hover { background: var(--bg-page); }
.ct-linha > .ct-eti { flex: 0 0 auto; }
.ct-meio { flex: 1 1 0; min-width: 0; }
/* Duas linhas no máximo: título de tarefa é livre e um muito longo empurraria
 * a data e o botão para fora. */
.ct-titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 13px; font-weight: 600; color: var(--fg-1); line-height: 1.35; overflow: hidden; }
.ct-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px;
  min-width: 0; flex-wrap: wrap; }
.ct-contexto { font-size: 11.5px; color: var(--fg-3); min-width: 0; }
.ct-situacao { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 1px 8px;
  border-radius: 2px; font-size: 10px; font-weight: 700; background: var(--bg-surface-2);
  color: var(--fg-2); white-space: nowrap; }
.ct-prazo { flex: 0 0 auto; min-width: 76px; max-width: 96px; text-align: right; }
.ct-prazo-dia { display: block; font-family: var(--font-mono); font-size: 12px;
  font-weight: 700; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ct-prazo-sub { display: block; font-size: 10.5px; line-height: 1.3; color: var(--fg-3); }
.ct-prazo-alerta { color: var(--danger); }
.ct-prazo-vazio { font-size: 11px; color: var(--fg-4); }
.ct-concluir { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; background: transparent; border: 1px solid var(--line-strong);
  border-radius: 2px; color: var(--fg-2); font-size: 11.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; }
.ct-concluir:hover { border-color: var(--fg-1); color: var(--fg-1); }

@media (max-width: 900px) {
  .ct-tiles { grid-template-columns: repeat(3, 1fr); }
  /* No celular a data desce para baixo do título em vez de espremer a linha. */
  .ct-linha { flex-wrap: wrap; }
  .ct-prazo { text-align: left; min-width: 0; }
}

/* ======================= Gestão de Processos v2 ====================== */
.procg-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.procg-chip-filtro { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px;
  cursor: pointer; color: var(--fg-3); user-select: none; }
.procg-chip-filtro.on { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.procg-chip-filtro input { display: none; }
.procg-busca { flex: 1; min-width: 200px; max-width: 380px; }
.procg-barra.vermelha > span { background: var(--danger); }
.procg-dias { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.procg-dias.vermelha { color: var(--danger); font-weight: 700; }
.procg-st-em_andamento { background: var(--success-bg); color: var(--success); }
.procg-st-agendado { background: var(--warning-bg); color: var(--warning); }
.procg-st-aguardando_autorizacao { background: var(--warning-bg); color: var(--warning); }
.procg-st-suspenso, .procg-st-desistencia { background: var(--bg-surface-2); color: var(--fg-3); }
.procg-st-concluido { background: var(--success-bg); color: var(--success); }
.procg-st-excluido { background: var(--danger-bg); color: var(--danger); }
.procg-op-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.procg-no.travado { opacity: .45; }
.procg-no.dispensado .procg-nome { color: var(--fg-4); text-decoration: line-through; }
.procg-just { font-size: 12px; color: var(--fg-3); }
.procg-flag { font-size: 12px; cursor: help; }
.procg-mini-cont { font-size: 10.5px; color: var(--fg-3); }
.procg-nome-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--fg-1);
  cursor: pointer; text-align: left; }
.procg-nome-btn:hover { text-decoration: underline; }
.procg-no-acoes { margin-left: auto; display: flex; gap: 4px; flex: none; }
.procg-mini { padding: 1px 8px; font-size: 11px; }
.procg-det .procg-det-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.procg-det h4 { margin: 0 0 8px; font-size: 12.5px; color: var(--fg-2); }
.procg-coment { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line-2, var(--line)); }
.procg-coment-form { display: flex; gap: 6px; margin-top: 8px; }
.procg-coment-form input { flex: 1; padding: 5px 8px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); font: inherit; }
.procg-anexo { display: block; font-size: 13px; padding: 4px 0; color: var(--fg-1); }
.procg-upload { display: inline-block; margin-top: 8px; cursor: pointer; }
.procg-log-linha { font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.procg-log { max-height: 60vh; overflow-y: auto; }
.procg-tpl-passo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.procg-tpl-acoes { display: flex; gap: 3px; flex: none; }
.procg-form-linha { display: flex; gap: 12px; flex-wrap: wrap; }
.procg-form-linha > label { flex: 1; min-width: 140px; }
.procg-lista-emp { display: flex; flex-direction: column; max-height: 520px; overflow-y: auto; }
.procg-mat.inativa { opacity: .55; }
.form-vert textarea { padding: 7px 9px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); font: inherit; background: var(--bg-card); color: var(--fg-1); }

/* --- Gestão de Processos: paridade com o módulo do Acessórias ------------- */

/* Painel "+Filtros" da listagem (§5.2/§5.3): grade que se adapta à largura —
   são dez campos e uma linha só viraria rolagem horizontal. */
.procg-filtros-av { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 10px; align-items: end; padding: 12px; margin: 0 0 14px;
  background: var(--bg-surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.procg-filtro-campo { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px;
  color: var(--fg-3); }
.procg-filtro-campo select, .procg-filtro-campo input { padding: 5px 7px; font: inherit;
  font-size: 12.5px; color: var(--fg-1); background: var(--bg-card);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); }

/* A linha da grade é o botão do processo MAIS a caixa de observações, que fica
   fora do botão — textarea dentro de <button> não recebe digitação. */
.procg-item-linha { display: grid; grid-template-columns: 1fr minmax(160px, 260px); gap: 8px;
  align-items: stretch; }
.procg-obs { padding: 7px 9px; font: inherit; font-size: 12px; resize: vertical;
  color: var(--fg-1); background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-md); transition: border-color 200ms; }
.procg-obs:focus { border-color: var(--line-strong); outline: none; }
.procg-obs.salvo { border-color: var(--success); }
@media (max-width: 720px) { .procg-item-linha { grid-template-columns: 1fr; } }

/* Barra de evolução clicável — muda o SLA só deste processo (§7.3). */
.procg-barra-botao { display: block; width: 100%; text-align: left; padding: 8px 10px;
  background: none; border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; font: inherit; }
.procg-barra-botao:hover { border-color: var(--line); background: var(--bg-surface-2); }

/* Sub-matriz recolhível (§7.4) e dica de execução em laranja (§7.4-d). */
.procg-chevron { background: none; border: 0; padding: 0 2px; cursor: pointer;
  color: var(--fg-3); font-size: 11px; line-height: 1; }
.procg-chevron:hover { color: var(--fg-1); }
.procg-dica { font-size: 12px; color: var(--warning); padding: 0 0 4px; line-height: 1.45; }

/* Editor de matriz: cabeçalho de ações, rodapé de usos (§9.4), passo em edição
   e a régua de variáveis de mesclagem do follow-up (§11.3). */
.procg-tpl-cab { display: flex; gap: 6px; margin: 0 0 10px; }
.procg-usos { margin: 10px 0 0; font-size: 12px; line-height: 1.5; }
.procg-tpl-passo.editando { background: var(--warning-bg); border-radius: var(--radius-md);
  padding: 3px 6px; margin: 0 -6px; }
.procg-vars { display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  font-size: 11.5px; color: var(--fg-3); margin: 6px 0 0; }
.procg-var { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; cursor: pointer;
  color: var(--fg-2); background: var(--bg-surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-md); }
.procg-var:hover { color: var(--fg-1); border-color: var(--line-strong); }

/* ===================== Fechamento Contábil (módulo dominio) ====   Matriz empresa × rotina. A célula é um marcador compacto e sóbrio: sem
   emoji, sem pill — estado por cor de texto/fundo suave, como o resto do
   painel. A cor sozinha nunca carrega o significado: cada marca tem sigla
   e title com a explicação (acessibilidade e impressão em P&B). */

.aviso-topo {
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-left: 3px solid var(--cep-yellow); border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--fg-2);
}
.aviso-topo strong { color: var(--fg-1); }
.aviso-topo code {
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--bg-surface-2); padding: 1px 5px; border-radius: var(--radius-sm);
}

.tabela-fech th { white-space: nowrap; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; }
.tabela-fech td { vertical-align: middle; }

.fech-linha { cursor: pointer; }
.fech-linha:hover, .fech-linha:focus-visible { background: var(--bg-surface-2); outline: none; }

.fech-emp { min-width: 210px; }
.fech-emp small { display: block; font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); margin-top: 1px; }

.fech-cel { text-align: center; padding-left: 4px; padding-right: 4px; }
.fech-mark {
  display: inline-block; min-width: 26px; padding: 2px 5px;
  border-radius: var(--radius-sm); font-size: 11px; font-weight: 700;
  font-family: var(--font-mono); line-height: 1.5;
}
.fech-ok   { background: var(--success-bg); color: var(--success); }
.fech-sem  { background: var(--warning-bg); color: var(--warning); }
.fech-na   { background: var(--bg-surface-2); color: var(--fg-4); }
.fech-erro { background: var(--danger-bg); color: var(--danger); }
.fech-vazio { color: var(--fg-4); }

.fech-diag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.fech-diag-msg { font-size: 13px; color: var(--fg-2); }
.fech-diag-msg.ok { color: var(--success); }
.fech-diag-msg.falha { color: var(--danger); }

.fech-evidencia {
  margin: 0; max-width: 320px; max-height: 130px; overflow: auto;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.45;
  background: var(--bg-surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 6px 8px; white-space: pre-wrap;
}

/* ======================= Notificações (sininho) ====================== */
.notif-caixa { position: relative; display: inline-flex; }
.notif-sino {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; transition: background 150ms;
}
.notif-sino:hover { background: rgba(255, 255, 255, .18); }
.notif-sino.tem-novidade { color: var(--cep-yellow); border-color: var(--cep-yellow); }
.notif-contador {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.notif-painel {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(380px, 92vw);
  max-height: 70vh; overflow-y: auto; z-index: 600;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(26, 26, 26, .18); color: var(--fg-1); text-align: left;
}
.notif-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.notif-ler-todas {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--fg-3); text-decoration: underline;
}
.notif-ler-todas:hover { color: var(--fg-1); }
.notif-vazio { margin: 0; padding: 18px 14px; font-size: 12.5px; color: var(--fg-3); }
.notif-lista { display: flex; flex-direction: column; }
.notif-item {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  padding: 11px 14px; background: none; border: 0; border-bottom: 1px solid var(--line);
  font: inherit; cursor: pointer;
}
.notif-item:hover { background: var(--bg-surface-2); }
.notif-item.nao-lida { background: var(--cep-yellow-50, #FFFAEC); }
.notif-item.nao-lida:hover { background: var(--warning-bg); }
.notif-item-icone {
  flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-surface-2); font-size: 11px;
}
.notif-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item-linha { font-size: 12.5px; line-height: 1.35; }
.notif-item-tarefa {
  font-size: 12px; color: var(--fg-2); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-item-quando { font-size: 11px; color: var(--fg-3); }

/* ---------------------- menção (@) no comentário --------------------- */
.kb-coment-campo { position: relative; flex: 1; min-width: 0; }
.kb-coment-campo input { width: 100%; }
.kb-mencoes {
  position: absolute; bottom: calc(100% + 4px); left: 0; width: 100%; z-index: 610;
  background: var(--bg-card); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.kb-mencao-op {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 10px; background: none; border: 0; font: inherit; font-size: 12.5px;
  cursor: pointer;
}
.kb-mencao-op.ativa, .kb-mencao-op:hover { background: var(--warning-bg); }
.kb-arquivar { color: var(--fg-2); margin-left: auto; }

/* ------------------------ prioridade da tarefa ----------------------- */
.kb-prio-lab { display: inline-flex; align-items: center; gap: 6px; }
.kb-prio-lab select { border: 0; background: transparent; font: inherit; font-size: 12px; color: inherit; cursor: pointer; }
.kb-chip-prio { font-weight: 700; }
.kb-prio-muito_alta { background: var(--danger); color: #fff; }
.kb-prio-alta       { background: var(--danger-bg); color: var(--danger); }
.kb-prio-media      { background: var(--bg-surface-2); color: var(--fg-2); }
.kb-prio-baixa      { background: var(--bg-surface-2); color: var(--fg-3); }
.botao-mini.kb-prio-muito_alta { border-color: var(--danger); }

/* ------------------ responsável do passo do checklist ---------------- */
.kb-check-resp { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.kb-check-resp select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;   /* o avatar É o botão; o select fica por cima */
}
.kb-avatar-vazio {
  background: transparent; color: var(--fg-4);
  border: 1px dashed var(--line-strong); font-weight: 400;
}
.kb-check-resp:hover .kb-avatar-vazio { border-color: var(--fg-3); color: var(--fg-2); }

/* --------------------------- menu do perfil -------------------------- */
.perfil-caixa { position: relative; display: inline-flex; }
.perfil-botao {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font: inherit; font-size: 12.5px; transition: background 150ms;
}
.perfil-botao:hover { background: rgba(255, 255, 255, .18); }
.perfil-iniciais {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--cep-yellow); color: var(--ink);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
}
.perfil-iniciais-g { width: 38px; height: 38px; font-size: 13px; }
.perfil-nome { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(268px, 92vw); z-index: 600;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(26, 26, 26, .18); color: var(--fg-1); overflow: hidden;
}
.perfil-cab { display: flex; gap: 11px; align-items: center; padding: 14px; border-bottom: 1px solid var(--line); }
.perfil-cab-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.perfil-cab-txt strong { font-size: 13px; }
.perfil-cab-txt span { font-size: 11.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-papel { color: var(--fg-2) !important; }
.perfil-op {
  display: block; width: 100%; text-align: left; padding: 10px 14px;
  background: none; border: 0; border-top: 1px solid var(--line);
  font: inherit; font-size: 12.5px; cursor: pointer; color: var(--fg-1);
}
.perfil-op:first-of-type { border-top: 0; }
.perfil-op:hover { background: var(--bg-surface-2); }
.perfil-op-sair { color: var(--danger); }

=============================================================
   PORTAL DO CLIENTE — superfície externa (/portal)
   Layout desenhado para o cliente do escritório, não para a equipe: uma
   coluna, sem sidebar, feito para o celular. Acima de 720px a lista de
   cartões dá lugar à tabela (o mesmo dado, cinco colunas cabem).
   ===================================================================== */

/* --- Entrada e criação de senha (páginas públicas do portal) ---------- */
body.pagina-portal-entrada {
  min-height: 100vh; display: flex; justify-content: center;
  background: var(--bg-page);
}
.portal-entrada {
  width: min(430px, 100%); padding: 36px 24px 28px;
  display: flex; flex-direction: column; gap: 24px;
}
.portal-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.portal-marca img { height: 22px; width: auto; display: block; }
/* A barra amarela curta é o motivo gráfico do logo (o "E" de três barras). */
.portal-barra-marca { height: 4px; width: 40px; background: var(--cep-yellow); }
.portal-marca-nome {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-2);
}
.portal-form {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 20px; display: flex; flex-direction: column; gap: 16px;
}
.portal-form p { margin: 0; }
.portal-campo { display: flex; flex-direction: column; gap: 6px; }
/* Só o RÓTULO (primeiro filho) é caixa alta — a ajuda e o erro do campo, que
   também são <span>, seguem em texto normal. */
.portal-campo > span:first-child {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-2);
}
.portal-campo input {
  font: inherit; font-size: 16px;   /* 16px evita o zoom automático do iOS */
  padding: 11px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--bg-card); color: var(--fg-1); width: 100%;
}
.portal-campo input:focus { outline: 2px solid var(--cep-yellow-600); outline-offset: 1px; }
.portal-campo input.erro { border-color: var(--danger); }
.portal-campo-ajuda { font-size: 12px; color: var(--fg-3); }
.portal-campo-erro { font-size: 12px; color: var(--danger); }
.portal-btn {
  font: inherit; font-size: 15px; font-weight: 600; min-height: 46px; padding: 12px 18px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--cep-yellow); color: var(--fg-1); cursor: pointer; width: 100%;
  text-align: center; text-decoration: none;
}
.portal-btn:hover { background: var(--cep-yellow-600); }
.portal-btn:disabled { opacity: .6; cursor: default; }
.portal-btn-linha {
  font-size: 14px; min-height: 44px; padding: 10px 18px; width: auto;
  background: var(--bg-card); border-color: var(--line-strong);
}
.portal-btn-linha:hover { background: var(--bg-card); border-color: var(--fg-1); }

/* Aviso no topo do formulário. Três causas, três cores — e nenhuma delas
   marca campo individual no erro de login (não revela qual dado existe). */
.portal-aviso {
  margin: 0; border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 13px; line-height: 1.45;
}
.portal-aviso-erro { background: var(--danger-bg); border: 1px solid rgba(180, 35, 24, .18); color: var(--danger); }
.portal-aviso-ok   { background: var(--success-bg); border: 1px solid rgba(47, 122, 63, .18); color: var(--success); }
.portal-aviso-info { background: var(--info-bg); border: 1px solid rgba(30, 77, 107, .18); color: var(--info); }

/* Barra indeterminada da verificação do link — sem spinner. */
.portal-progresso { height: 2px; background: var(--line); overflow: hidden; }
.portal-progresso i { display: block; height: 2px; width: 30%; background: var(--cep-yellow); animation: portalBarra 1.1s linear infinite; }
@keyframes portalBarra { 0% { transform: translateX(-100%); } 100% { transform: translateX(430%); } }

/* Andamento dos processos: barra de evolução DETERMINADA (largura = % feito) —
   classe própria, e não `.portal-progresso`, que é a indeterminada acima. */
.portal-andamento-barra { height: 5px; margin: 10px 0 4px; overflow: hidden;
  background: var(--line); border-radius: 999px; }
.portal-andamento-barra > span { display: block; height: 100%; border-radius: 999px;
  background: var(--success); transition: width 220ms ease-out; }
.portal-passos { list-style: none; margin: 8px 0 0; padding: 0; }
.portal-passo { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px;
  align-items: baseline; padding: 6px 0; font-size: 13.5px; line-height: 1.4;
  border-bottom: 1px solid var(--line); }
.portal-passo:last-child { border-bottom: 0; }
.portal-passo-marca { color: var(--fg-3); text-align: center; }
.portal-passo-ok .portal-passo-marca { color: var(--success); }
/* Etapa concluída não é riscada: para o cliente ela é notícia boa, não item
   descartado — o estado vai escrito, sem depender só da cor. */
.portal-passo-estado { font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }
.portal-passo-ok .portal-passo-estado { color: var(--success); }

/* --- O portal (área logada) ------------------------------------------ */
body.pagina-portal {
  min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-page);
}
.portal-topo {
  background: var(--graphite); color: #fff;
  padding: 14px clamp(16px, 4vw, 32px);
  display: flex; flex-direction: column; gap: 12px;
}
.portal-topo-linha { display: flex; align-items: center; gap: 10px; }
.portal-topo-linha img { height: 19px; width: auto; display: block; flex: none; }
.portal-topo-divisor { width: 1px; height: 14px; background: rgba(255, 255, 255, .22); }
.portal-topo-nome {
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cep-yellow);
}
.portal-topo-espaco { flex: 1; }
.portal-sair {
  font: inherit; font-size: 12px; font-weight: 500; color: #fff;
  background: transparent; border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-sm); padding: 0 14px; min-height: 44px;
  display: inline-flex; align-items: center; cursor: pointer;
}
.portal-sair:hover { background: rgba(255, 255, 255, .1); }
.portal-topo-empresa {
  margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600;
  line-height: 1.15; color: #fff;
}
.portal-topo-pessoa { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .62); }

.portal-abas {
  display: flex; background: var(--bg-card); border-bottom: 1px solid var(--line);
  padding: 0 clamp(0px, 1vw, 16px); overflow-x: auto;
}
.portal-aba {
  flex: 1 1 auto; font: inherit; font-size: 13px; font-weight: 500; color: var(--fg-3);
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 15px 8px; cursor: pointer; white-space: nowrap;
}
.portal-aba:hover { color: var(--fg-1); }
.portal-aba-ativa { color: var(--fg-1); font-weight: 600; border-bottom-color: var(--cep-yellow); }

.portal-corpo {
  flex: 1; width: min(940px, 100%); margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 24px) 20px;
  display: flex; flex-direction: column; gap: 12px;
}
/* Título + subtítulo; o aviso de atraso entra ao lado deles só em tela larga. */
.portal-cabecalho-larga { display: flex; flex-direction: column; gap: 12px; }
.portal-cabecalho { display: flex; flex-direction: column; gap: 3px; }
.portal-lista { display: flex; flex-direction: column; gap: 12px; }
.portal-titulo {
  margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 600;
  line-height: 1.1; color: var(--fg-1);
}
.portal-subtitulo { font-size: 12px; color: var(--fg-3); }

.portal-cartao {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.portal-cartao-cab { display: flex; align-items: flex-start; gap: 10px; }
.portal-cartao-titulo {
  margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 600;
  line-height: 1.15; flex: 1; color: var(--fg-1);
}
.portal-nota {
  margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.55; color: var(--fg-3); text-wrap: pretty;
}

/* Rótulo da competência + linha, separando os grupos da lista. */
.portal-grupo { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.portal-grupo span {
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-3); white-space: nowrap;
}
.portal-grupo i { flex: 1; height: 1px; background: var(--line); }

/* Situação da obrigação. "Entregue" é texto, não etiqueta colorida: no mês
   normal está tudo entregue, e a tela normal precisa ser uma tela calma. */
.portal-sit { white-space: nowrap; }
.portal-sit-ok { font-size: 12px; font-weight: 500; color: var(--fg-2); padding-top: 3px; }
.portal-sit-espera, .portal-sit-atraso {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  border-radius: var(--radius-sm); padding: 4px 8px;
}
.portal-sit-espera { color: #7A5A0B; background: var(--cep-yellow-100); }
.portal-sit-atraso { color: var(--danger); background: var(--danger-bg); }

.portal-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.portal-meta > div { display: flex; flex-direction: column; gap: 3px; }
.portal-meta-rotulo {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-3);
}
.portal-meta-valor {
  font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.portal-meta-dpto {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--fg-2); padding-top: 2px;
}

/* Área declarada e ainda não construída: barra amarela, o que vai ser, e o
   que fazer enquanto não existe. Etiqueta cinza — não é erro nem promessa. */
.portal-futuro { padding: 20px; }
.portal-futuro p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.portal-futuro .portal-cartao-titulo { font-size: 26px; line-height: 1.1; }
.portal-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-2); background: var(--bg-card); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 4px 8px; white-space: nowrap; margin-top: 3px;
}
.portal-vazio { padding: 24px 16px; gap: 8px; }
.portal-vazio p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fg-2); }
.portal-falha { padding: 20px 16px; gap: 14px; align-items: flex-start; }
.portal-falha p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fg-2); }

.portal-skel { gap: 14px; animation: portalPulse 1.5s ease-in-out infinite; }
.portal-skel:nth-child(2) { animation-delay: .15s; }
.portal-skel:nth-child(3) { animation-delay: .3s; }
.portal-skel-titulo { height: 20px; width: 56%; background: var(--bg-surface-2); border-radius: var(--radius-sm); }
.portal-skel-linha { height: 30px; background: var(--bg-surface-2); border-radius: var(--radius-sm); }
@keyframes portalPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  .portal-skel { animation: none; }
  .portal-progresso i { animation: none; width: 100%; }
}

.portal-rodape {
  border-top: 1px solid var(--line); padding: 16px clamp(16px, 4vw, 32px); background: var(--bg-card);
}
.portal-rodape p {
  margin: 0 auto; width: min(940px, 100%); font-size: 12px; line-height: 1.55; color: var(--fg-3);
}

/* --- Tabela (só a partir de 720px) ------------------------------------ */
.portal-tabela-bloco { display: none; }
.portal-tabela { border-collapse: collapse; width: 100%; font-size: 13px; }
.portal-tabela th {
  text-align: left; text-transform: uppercase; letter-spacing: .08em;
  font-size: 10px; font-weight: 600; color: var(--fg-2);
  border-bottom: 2px solid var(--ink); padding: 12px 12px 8px 0; white-space: nowrap;
}
.portal-tabela td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); }
.portal-tabela th:last-child, .portal-tabela td:last-child { padding-right: 0; }
.portal-tabela td:first-child { font-weight: 600; color: var(--fg-1); }
.portal-tabela .portal-num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-2); white-space: nowrap;
}
.portal-tabela .portal-meta-dpto { padding-top: 0; }

@media (min-width: 720px) {
  /* Topo, abas e rodapé ocupam a largura toda (a linha e o fundo escuro não
     podem cortar), mas o CONTEÚDO deles alinha com a coluna de 940px do corpo:
     a margem lateral vira o espaço que sobra dos dois lados. */
  .portal-topo, .portal-abas, .portal-rodape {
    padding-left: max(calc((100% - 940px) / 2), clamp(16px, 4vw, 32px));
    padding-right: max(calc((100% - 940px) / 2), clamp(16px, 4vw, 32px));
  }
  .portal-topo { padding-top: 16px; padding-bottom: 16px; }
  .portal-rodape { padding-top: 16px; padding-bottom: 16px; }
  .portal-aba { flex: 0 0 auto; padding: 15px 16px; }
  .portal-aba:first-child { padding-left: 0; }
  .portal-corpo { padding: 24px clamp(16px, 4vw, 32px); gap: 16px; }
  .portal-titulo { font-size: 30px; }
  /* O cabeçalho ganha o resumo do atraso à direita; a lista de cartões dá
     lugar à tabela — mesmos dados, cinco colunas cabem. */
  .portal-cabecalho-larga { flex-direction: row; align-items: flex-end; gap: 16px; }
  .portal-cabecalho-larga .portal-cabecalho { flex: 1; }
  /* A nota do download acompanha o formato visível: fora da tabela no
     celular, dentro dela na tela larga. */
  .portal-lista, .portal-nota-lista { display: none; }
  .portal-tabela-bloco {
    display: block; background: var(--bg-card); border: 1px solid var(--line);
    border-radius: var(--radius-md); padding: 4px 20px 16px;
  }
  .portal-tabela-bloco .portal-nota { margin: 16px 0 0; padding-top: 0; border-top: 0; }
}

/* Filtro por departamento (guias). Segmentado sóbrio: o ativo é preenchido de
   grafite; os demais, hairline sobre branco. Sem pill, sem cor de marca —
   o amarelo fica reservado para a situação da obrigação. */
.portal-filtro { display: flex; flex-wrap: wrap; gap: 6px; }
.portal-filtro-btn {
  font: inherit; font-size: 12px; font-weight: 500; color: var(--fg-2);
  background: var(--bg-card); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 8px 12px; min-height: 40px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.portal-filtro-btn:hover { border-color: var(--fg-1); color: var(--fg-1); }
.portal-filtro-btn span {
  font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}
.portal-filtro-ativo {
  background: var(--graphite); border-color: var(--graphite); color: #fff; font-weight: 600;
}
.portal-filtro-ativo:hover { border-color: var(--graphite-900); color: #fff; }
.portal-filtro-ativo span { color: rgba(255, 255, 255, .7); }

/* Lista longa com rolagem dentro do modal (seleção de empresas do malote). */
.lista-rolagem {
  max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 10px;
}
.lista-rolagem .campo-linha { padding: 2px 0; }

/* Linha dispensada e detalhe da cobrança (CEP Docs → o que cada empresa manda). */
.linha-dispensada td { opacity: .6; }
.txt-detalhe { font-size: 12px; color: var(--fg-2); }

/* ===================== CEP Docs (cobrança de documentos) ===================== */

/* Badges dos seis status. As cores separam de quem é a bola: âmbar = espera o
   cliente, vermelho = atrasado ou devolvido, azul = já chegou e espera a
   conferência, verde = fechado.

   Esta é a MESMA atribuição usada nos gráficos do painel (ver CD_COR em
   app.js). Precisa ser: o mesmo estado com duas cores na mesma tela obriga a
   pessoa a reaprender a legenda a cada painel. */
.cd-b-p { background: var(--cep-yellow-100); color: var(--warning); }
.cd-b-e { background: var(--danger-bg); color: var(--danger); }
.cd-b-r { background: var(--info-bg); color: var(--info); }
.cd-b-v { background: var(--success-bg); color: var(--success); }
.cd-b-d { background: var(--bg-surface-2); color: var(--fg-4); }
.cd-b-w { background: var(--danger-bg); color: var(--danger); }

.cd-acoes { white-space: nowrap; text-align: right; }
.cd-acoes .botao-mini + .botao-mini { margin-left: 6px; }
.cd-doc-meta { display: block; margin-top: 2px; font-size: 11px; color: var(--fg-4); }
.cd-alvo { margin: 0 0 14px; font-size: 12.5px; color: var(--fg-3); }
.cd-inativa { color: var(--danger); }
.cd-mais { text-align: center; margin: 12px 0 0; }
.cd-titulo-sub { font-size: 12px; font-weight: 400; color: var(--fg-3); }
.cd-atrasado { color: var(--danger); }
.cd-cnpj { font-family: var(--font-mono); letter-spacing: -.02em; }
.cd-link {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--fg-2); text-decoration: underline;
  text-underline-offset: 2px;
}
.cd-link:hover { color: var(--fg-1); }

/* Contador ao lado do rótulo da aba — evita entrar na aba só para descobrir
   se há algo lá. Fica oculto no zero: "0" é ruído, ausência já diz. */
.cd-aba-n {
  margin-left: 6px; padding: 1px 6px; border-radius: 9px;
  background: var(--bg-surface-2); color: var(--fg-2);
  font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums;
}
.sub-aba.ativa .cd-aba-n { background: var(--cep-yellow-100); color: var(--warning); }

/* ------------------------------ painel (leitura) ------------------------- */
/* Título da aba: display condensada com o filete amarelo do sistema, e a
   contagem empurrada para a direita — é referência, não manchete. */
.cd-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0 0 18px;
}
.cd-cab h2 {
  font-family: var(--font-display); font-size: 26px; letter-spacing: .02em;
  text-transform: uppercase; padding-bottom: 6px;
  border-bottom: 3px solid var(--cep-yellow);
}
.cd-cab-dir { font-size: 12.5px; color: var(--fg-3); }

/* Cartão de status: além do número, a fatia que ele representa do total e o
   convite a abrir a lista já filtrada. */
.cd-tile { cursor: pointer; transition: border-color 150ms var(--ease-out); }
.cd-tile:hover, .cd-tile:focus-visible { border-color: var(--line-strong); }
.cd-tile:focus-visible { outline: 2px solid var(--cep-yellow); outline-offset: 2px; }
.cd-ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cd-barra {
  height: 4px; border-radius: 2px; background: var(--bg-surface-2);
  margin: 10px 0 8px; overflow: hidden;
}
.cd-barra > i { display: block; height: 100%; }
.cd-tile-link { font-size: 11.5px; color: var(--fg-3); }
.cd-tile:hover .cd-tile-link { color: var(--fg-1); }

.cd-grid-3, .cd-grid-prazos { display: grid; gap: 14px; margin-bottom: 18px; }
.cd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Próximos prazos é uma lista longa; triagem + rotina cabem numa coluna estreita. */
.cd-grid-prazos { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); }
@media (max-width: 1200px) { .cd-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .cd-grid-3, .cd-grid-prazos { grid-template-columns: 1fr; }
}

/* Segunda seção dentro de um painel (Rotina do mês, sob a Triagem). */
.cd-secao { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.cd-secao h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-2); margin-bottom: 4px;
}
.cd-secao .painel-nota { margin-top: 0; margin-bottom: 10px; }
.cd-rodape {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--fg-3);
}

/* Rosca de status. Os segmentos são clicáveis: o gráfico é também o controle,
   que é como as pessoas tentam usá-lo de qualquer jeito. */
.cd-donut-caixa { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cd-donut { width: 128px; height: 128px; flex: none; }
.cd-fatia { cursor: pointer; transition: opacity 120ms var(--ease-out); }
.cd-donut:hover .cd-fatia { opacity: .55; }
.cd-donut .cd-fatia:hover, .cd-donut .cd-fatia:focus-visible { opacity: 1; outline: none; }
.cd-donut .cd-fatia:focus-visible { stroke: var(--fg-1); stroke-width: 2; }
.cd-donut-n {
  text-anchor: middle; font-family: var(--font-display); font-size: 26px;
  font-weight: 600; fill: var(--fg-1);
}
.cd-donut-l { text-anchor: middle; font-size: 10px; fill: var(--fg-3); }
.cd-legenda { list-style: none; margin: 0; padding: 0; flex: 1 1 160px; min-width: 0; }
.cd-legenda li {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 12.5px; color: var(--fg-2);
}
.cd-legenda li + li { border-top: 1px solid var(--line); }
.cd-legenda i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.cd-legenda span { flex: 1; min-width: 0; }
.cd-legenda b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cd-legenda em { font-style: normal; color: var(--fg-4); font-size: 11px; min-width: 34px;
  text-align: right; }

/* Colunas de % por competência contra a linha de meta. */
/* max-height evita o efeito de "tipografia gigante": o SVG tem viewBox fixo,
   então esticá-lo até a largura do painel amplia junto os rótulos. Com o teto
   de altura ele escala pela altura e fica centrado, no tamanho projetado. */
.cd-graf { width: 100%; height: auto; max-height: 300px; display: block; margin: 0 auto; }
.cd-col-v {
  text-anchor: middle; font-family: var(--font-mono); font-size: 11px;
  font-variant-numeric: tabular-nums; fill: var(--fg-3);
}
.cd-col-atual .cd-col-v { fill: var(--fg-1); font-weight: 600; }
.cd-col-x { text-anchor: middle; font-size: 10px; fill: var(--fg-4); }
.cd-col-atual .cd-col-x { fill: var(--fg-2); }
.cd-meta-linha { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.cd-meta-t { font-size: 10px; fill: var(--fg-3); }

/* Ranking de pontualidade: nome, barra e número. A barra é comparação
   relativa; o número é o valor — quem precisa de precisão lê o número. */
.cd-ranking, .cd-prazos { list-style: none; margin: 0; padding: 0; }
.cd-ranking li { display: flex; align-items: center; gap: 10px; padding: 5px 0;
  font-size: 12.5px; }
.cd-ranking li + li { border-top: 1px solid var(--line); }
.cd-rk-nome {
  flex: 1 1 40%; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--fg-2);
}
.cd-rk-barra { flex: 1 1 40%; height: 6px; border-radius: 3px;
  background: var(--bg-surface-2); overflow: hidden; }
.cd-rk-barra > i { display: block; height: 100%; background: var(--cep-yellow-600); }
.cd-ranking b {
  min-width: 42px; text-align: right; font-family: var(--font-mono); font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--fg-1);
}
.cd-rk-baixo { color: var(--danger); }
.cd-rk-vazio { color: var(--fg-3); font-size: 12.5px; padding: 6px 0; }

.cd-prazos li { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.cd-prazos li + li { border-top: 1px solid var(--line); }
.cd-prazo-dia {
  flex: none; width: 40px; text-align: center; border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 3px 0; line-height: 1.15;
}
.cd-prazo-dia b { display: block; font-family: var(--font-display); font-size: 17px; }
.cd-prazo-dia em { font-style: normal; font-size: 10px; color: var(--fg-4);
  text-transform: lowercase; }
.cd-prazo-txt { flex: 1; min-width: 0; font-size: 12.5px; }
.cd-prazo-txt strong { display: block; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.cd-prazo-txt span { font-size: 11px; color: var(--fg-4); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-prazo-rel { flex: none; font-size: 11.5px; color: var(--fg-3); }
.cd-triagem-n { margin: 0 0 12px; font-size: 12.5px; color: var(--fg-2); }
.cd-triagem-n b { font-family: var(--font-display); font-size: 20px; }

/* ------------------------- filtros da aba Cobranças ---------------------- */
.cd-filtros {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
}
.cd-busca { flex: 1 1 260px; }
.cd-filtro-data { font-size: 12px; color: var(--fg-3); display: inline-flex;
  align-items: center; gap: 6px; }
.cd-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cd-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 5px 10px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--fg-2);
}
.cd-chip:hover { border-color: var(--line-strong); color: var(--fg-1); }
.cd-chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cd-chip.ativo { background: var(--graphite); border-color: var(--graphite); color: #fff; }

/* Seta que expande os documentos da cobrança sem sair da lista. */
.cd-caret {
  background: none; border: 0; padding: 0 6px 0 0; cursor: pointer;
  color: var(--fg-3); font-size: 12px;
}
.cd-caret:hover { color: var(--fg-1); }
.cd-itens-linha > td { background: var(--bg-surface-2); }
.cd-itens-inline { list-style: none; margin: 0; padding: 4px 0 4px 22px; }
.cd-itens-inline li { padding: 3px 0; font-size: 12.5px; display: flex;
  align-items: center; gap: 8px; }
.cd-item-nome { flex: 1; min-width: 0; }
/* "nenhum arquivo" ao lado do badge: o status diz o estado, a contagem diz se
   já existe o que conferir. */
.cd-itens-inline em { font-style: normal; font-size: 11px; color: var(--fg-4); }

/* ------------------------ painel de tratamento -------------------------- */
/* Duas colunas: os documentos (onde se decide) e o chat (onde se combina).
   No celular viram uma só — o chat desce. */
.cd-trat { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; }
@media (max-width: 860px) { .cd-trat { grid-template-columns: 1fr; } }

.cd-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 10px 0; background: var(--bg-surface);
}
.cd-card-topo { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.cd-card .campo { margin: 10px 0 0; }
.cd-radios { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.cd-radio { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: pointer; }
.cd-card-acoes { display: flex; gap: 8px; align-items: center; margin-top: 12px; }

.cd-lista-docs { list-style: none; margin: 8px 0 0; padding: 0; }
.cd-lista-docs li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--line);
}
.cd-lista-docs li:first-child { border-top: 0; }
.cd-lista-docs a { flex: 1 1 180px; min-width: 0; word-break: break-word; }
.cd-lista-docs .cd-doc-meta { flex: 1 1 100%; margin: 0; }

.cd-hist { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.cd-hist-lista { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.cd-hist-lista li { padding: 4px 0; color: var(--fg-3); }
.cd-hist-lista span { display: block; color: var(--fg-1); }
.cd-hist-lista em { display: block; color: var(--fg-3); }

/* ------------------------------- chat ----------------------------------- */
.cd-chat {
  max-height: 320px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px; margin-bottom: 10px;
  background: var(--bg-surface-2);
}
.cd-cmt { margin-bottom: 10px; }
.cd-cmt p { margin: 2px 0 0; font-size: 12.5px; white-space: pre-wrap; }
.cd-cmt-cab { font-size: 11px; font-weight: 700; color: var(--fg-2); }
.cd-cmt-cab span { font-weight: 400; color: var(--fg-4); margin-left: 6px; }
/* Comentário interno: o cliente não vê quando o Portal existir. A borda
   amarela é o lembrete visual de que aquele texto é de casa. */
.cd-cmt-interno { border-left: 3px solid var(--cep-yellow); padding-left: 8px; }

.cd-chat-form { display: flex; flex-direction: column; gap: 8px; }
.cd-chat-form textarea { width: 100%; }
.cd-chat-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cd-chat-acoes label { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--fg-3); cursor: pointer; }

/* --------------------------- cadastro da matriz ------------------------- */
.cd-doc-linha { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cd-doc-linha .cd-doc-nome { flex: 1 1 auto; }
.cd-doc-linha .cd-doc-tipo { flex: 0 1 220px; }

.cd-regua { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .cd-regua { grid-template-columns: 1fr; } }
.cd-regua-linha { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.cd-regua-linha label {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  color: var(--fg-2); cursor: pointer;
}

/* Formulário de uma linha só (alocação): os campos crescem, o botão fica na
   base para alinhar com os inputs, não com os rótulos. */
.cd-form-linha {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px;
}
.cd-form-linha .campo { flex: 1 1 180px; margin: 0; }
.cd-form-linha .botao { flex: 0 0 auto; }


/* ===================== Clientes (cadastro de empresas) ==================== */

/* --- Relação: cabeçalho, abas, busca, seleção, tabela, rodapé ---------
 *
 * Cores tiradas do layout aprovado. Os três estados de situação têm par
 * próprio (fundo claro + texto escuro da mesma família) porque cor sozinha
 * não informa: o rótulo continua escrito por extenso. */

.cli-cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.cli-titulo {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--fg-1); line-height: 1.1; margin: 0;
}
/* Barra curta, não sublinhado: no layout ela marca o começo do título, não
 * acompanha o comprimento do texto. */
.cli-titulo::after {
  content: ''; display: block; width: 90px; height: 4px;
  margin-top: 10px; background: var(--cep-yellow);
}
.cli-cab-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cli-cab-acoes a.botao-mini { text-decoration: none; display: inline-flex; align-items: center; }
.cli-btn-novo { background: var(--cep-yellow); color: var(--ink); border-color: var(--cep-yellow); }
.cli-btn-novo:hover { background: var(--cep-yellow-600); border-color: var(--cep-yellow-600); }

/* Abas de situação: a contagem fica ao lado do rótulo, em cápsula. */
.cli-abas {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.cli-aba {
  appearance: none; background: transparent; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  padding: 8px 14px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--fg-2);
}
.cli-aba:hover { color: var(--fg-1); }
.cli-aba.ativa { color: var(--fg-1); border-bottom-color: var(--cep-yellow); }
.cli-aba-n {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px;
  background: var(--bg-surface-2); color: var(--fg-3);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cli-aba.ativa .cli-aba-n { background: var(--cep-yellow-100); color: var(--warning); }
/* "Pendentes de finalização" é chamado de atenção: cor âmbar do layout, na aba
 * e na cápsula, mesmo quando não é a aba aberta. */
.cli-aba-alerta, .cli-aba-alerta:hover { color: #9A5B0B; }
.cli-aba-alerta .cli-aba-n { background: #FFF4D1; color: #9A5B0B; }
.cli-aba-alerta.ativa { border-bottom-color: #9A5B0B; }

.cli-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.cli-busca { position: relative; flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; }
.cli-busca-lupa {
  position: absolute; left: 11px; color: var(--fg-3); font-size: 15px; pointer-events: none;
}
.cli-busca input {
  flex: 1; padding: 9px 12px 9px 32px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--bg-card); color: var(--fg-1);
  font: inherit; font-size: 13px;
}
.cli-btn-filtros.ativa { background: var(--bg-surface-2); border-color: var(--fg-3); }
/* Chip = filtro aplicado. Sem ele, filtro esquecido vira "sumiu uma empresa". */
.cli-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--bg-card);
  font-size: 12px; color: var(--fg-1);
}
.cli-chip button {
  appearance: none; background: transparent; border: none; cursor: pointer;
  color: var(--fg-3); font: inherit; font-size: 14px; line-height: 1; padding: 0 2px;
}
.cli-chip button:hover { color: var(--danger); }
.cli-link {
  appearance: none; background: transparent; border: none; cursor: pointer;
  color: var(--fg-2); font: inherit; font-size: 12.5px; text-decoration: underline;
}
.cli-link:hover { color: var(--fg-1); }
.cli-link-claro { color: rgba(255, 255, 255, .8); }
.cli-link-claro:hover { color: #fff; }
.cli-ordenar { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cli-ordenar > span { font-size: 12.5px; color: var(--fg-3); }

.cli-filtros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 14px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-surface-2);
}
.cli-filtros-acoes { display: flex; align-items: flex-end; }

/* Quadro: barra de seleção e tabela são uma peça só, por isso o raio de
 * borda casa (a barra arredonda em cima, a tabela embaixo). */
.cli-quadro { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.cli-selecao {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--ink); color: #fff; font-size: 13px;
}
.cli-selecao .botao-mini {
  background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff;
  text-decoration: none;
}
.cli-selecao .botao-mini:hover { border-color: var(--cep-yellow); color: var(--cep-yellow); }
.cli-selecao .cli-link-claro { margin-left: auto; }

.cli-tabela { width: 100%; }
.cli-tabela th { white-space: nowrap; }
.cli-tabela td { vertical-align: middle; }
.cli-th {
  appearance: none; background: transparent; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
}
.cli-tabela th.ordenada .cli-th { color: var(--fg-1); }
.cli-c-check { width: 34px; text-align: center; }
.cli-c-id { width: 74px; }
.cli-c-menu { width: 38px; text-align: right; }
.cli-c-nome { min-width: 240px; }
.cli-mono { font-family: var(--font-mono); font-size: 12px; }
.cli-linha td { cursor: pointer; }
.cli-linha .cli-c-check, .cli-linha .cli-c-menu { cursor: default; }
.cli-linha:hover td { background: var(--bg-surface-2); }
.cli-linha.sel td { background: var(--cep-yellow-100); }
/* Linha pendente: fundo creme e barra âmbar na borda, como no layout. Perde
 * para a seleção, que é o que a pessoa acabou de fazer. */
.cli-linha.pendente td { background: #FFFAEC; }
.cli-linha.pendente td:first-child { box-shadow: inset 3px 0 0 var(--cep-yellow); }
.cli-linha.sel td, .cli-linha.sel.pendente td { background: var(--cep-yellow-100); }
/* Inativa fica legível, mas recuada: continua consultável sem competir com
 * quem está em atividade. */
.cli-linha.apagada strong { color: var(--fg-3); font-weight: 600; }
.cli-fantasia { margin-left: 8px; font-size: 12px; color: var(--fg-3); }
.cli-uf { font-size: 11px; color: var(--fg-3); }
.cli-kebab {
  appearance: none; background: transparent; border: none; cursor: pointer;
  color: var(--fg-3); font-size: 16px; line-height: 1; padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.cli-kebab:hover { background: var(--bg-surface-2); color: var(--fg-1); }
.cli-menu {
  position: fixed; z-index: 600; min-width: 190px; padding: 4px;
  background: var(--bg-card); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(17, 17, 17, .18);
  display: flex; flex-direction: column;
}
.cli-menu button, .cli-menu a {
  appearance: none; background: transparent; border: none; cursor: pointer;
  text-align: left; text-decoration: none; padding: 8px 10px;
  border-radius: var(--radius-sm); font: inherit; font-size: 13px; color: var(--fg-1);
}
.cli-menu button:hover, .cli-menu a:hover { background: var(--bg-surface-2); }

/* Situação: par de cores por estado, com o rótulo sempre escrito. */
.cli-sit {
  display: inline-block; padding: 3px 8px; border-radius: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}
.cli-sit-ativa { background: #E7F2E9; color: #2F7A3F; }
.cli-sit-cadastro { background: #E6EEF4; color: #1E4D6B; }
.cli-sit-inativa { background: transparent; border: 1px solid #BFB9AE; color: #7A786F; }
.cli-sit-pendente { background: #FFF4D1; color: #9A5B0B; border: 1px solid #9A5B0B; }
/* Marca de tipo de documento (Pessoa física, CAEPF) — contorno, não preenchida:
 * é qualificador do nome, não estado da empresa. */
.cli-marca {
  display: inline-block; margin-left: 8px; padding: 1px 5px; border-radius: 2px;
  border: 1px solid #BFB9AE; color: #7A786F;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

.cli-rodape {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px;
  font-size: 12.5px; color: var(--fg-3);
}
.cli-tamanho { margin-right: auto; }
.cli-tamanho select { font-size: 12.5px; padding: 5px 8px; }
.cli-paginas { display: flex; gap: 4px; align-items: center; }
.cli-pag {
  appearance: none; min-width: 30px; padding: 5px 8px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); color: var(--fg-1);
  font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.cli-pag:hover:not([disabled]):not(.ativa) { border-color: var(--fg-3); }
.cli-pag.ativa { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.cli-pag[disabled] { opacity: .4; cursor: default; }
.cli-pag-gap { padding: 0 2px; color: var(--fg-3); }

.cli-id { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.cli-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.cli-tag {
  display: inline-block; margin: 0 4px 2px 0; padding: 1px 7px;
  border-radius: 999px; background: var(--cep-yellow-100); color: var(--warning);
  font-size: 10.5px; font-weight: 700;
}
.cli-acoes-linha { white-space: nowrap; }
.cli-acoes-linha .botao-mini + .botao-mini { margin-left: 6px; }
.cli-perigo { border-color: var(--danger); color: var(--danger); }

/* Grade do formulário: dois campos por linha, um só no celular. */
.cli-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cli-grade .cli-largo { grid-column: 1 / -1; }
@media (max-width: 700px) { .cli-grade { grid-template-columns: 1fr; } }

.cli-doc, .cli-honorario { display: flex; gap: 8px; align-items: center; }
.cli-doc input, .cli-honorario input { flex: 1; }
.cli-doc input[readonly] { background: var(--bg-surface-2); color: var(--fg-2); }

/* Retorno da consulta à Receita: UMA LINHA, no fluxo, logo abaixo do
 * documento. Já foi um painel comparativo; virou linha porque o botão é para
 * preencher, e quem preenche quer olhar os campos — não uma tabela sobre
 * eles. Sobra o que ainda precisa ser dito: quantos campos entraram, os erros,
 * e o alerta de empresa não-ativa. */
.cli-rec-linha, .cli-rec-aviso {
  margin: 2px 0 6px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.cli-rec-linha { background: var(--bg-surface-2); color: var(--fg-2); }
.cli-rec-aviso { background: rgba(190, 40, 40, .1); color: var(--vermelho, #be2828); }

/* Linha repetível (inscrição estadual, identificador, tarefa agendada). */
.cli-repetivel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.cli-repetivel input, .cli-repetivel select {
  flex: 1 1 140px; padding: 7px 9px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--bg-card); color: var(--fg-1);
  font: inherit; font-size: 13px;
}
.cli-repetivel .campo-linha { flex: 0 0 auto; }

.cli-fieldset {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
}
.cli-fieldset legend { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--fg-2); padding: 0 6px; }
.cli-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px; }

.cli-janelas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 10px; }
.cli-janela { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cli-janela input[type="time"] {
  padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--fg-1); font: inherit; font-size: 12.5px;
}

.cli-comentario {
  border-left: 3px solid var(--cep-yellow); padding: 8px 12px; margin-bottom: 10px;
  background: var(--bg-surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cli-comentario p { margin: 0 0 4px; font-size: 13px; }
/* Comentário excluído continua visível pelo filtro — riscado, para ficar claro. */
.cli-apagado { opacity: .55; border-left-style: dashed; }
.cli-apagado p { text-decoration: line-through; }
/* ===================================================================== */
/* Módulo OBRIGAÇÕES — cadastro próprio (obrigação, regime, vínculo,     */
/* calendário) e lista de entregas.                                      */
/* ===================================================================== */

/* Barra de filtros acima de uma tabela: quebra sozinha em tela estreita. */
.filtros-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.filtros-linha input, .filtros-linha select {
  padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font: inherit; font-size: 12.5px; background: var(--bg-card); color: var(--fg-1);
}
.filtros-linha input[type="search"] { min-width: 220px; }

/* Campos lado a lado dentro de um formulário de modal. */
.form-colunas { display: flex; flex-wrap: wrap; gap: 12px; }
.form-colunas > .campo { flex: 1 1 200px; }

/* Os doze meses da obrigação: grade que encolhe sem virar rolagem lateral. */
.obr-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.campo-mes-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.campo-mes-cab label { font-size: 11.5px; color: var(--fg-3); font-weight: 600; }

/* "Replicar até dezembro": discreto até o mouse chegar perto — é atalho, não
   ação principal do formulário. */
.obr-replicar {
  border: 1px solid transparent; background: none; color: var(--fg-4);
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  padding: 2px 5px; border-radius: var(--radius-md);
}
.obr-replicar:hover { color: var(--fg-1); background: var(--bg-surface-2); border-color: var(--line); }
.obr-replicar:focus-visible { outline: 2px solid var(--cep-yellow-600); outline-offset: 1px; }

/* Pisca o campo que acabou de ser preenchido pela réplica. */
@keyframes obr-replica-flash {
  from { background: var(--cep-yellow-100, #FFF4D1); border-color: var(--cep-yellow-600); }
  to   { background: var(--bg-card); }
}
.obr-mes-replicado { animation: obr-replica-flash .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .obr-mes-replicado { animation: none; } }

.obr-blocos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Regime: obrigações agrupadas por departamento, cada grupo colapsável. */
.obr-grupo { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 12px; }
.obr-grupo summary { cursor: pointer; font-weight: 600; font-size: 12.5px; }
.obr-item-regime { display: flex; align-items: center; gap: 10px; padding: 3px 0 3px 6px; }
.obr-item-regime > .campo { flex: 1; }
.obr-tempo-regime {
  width: 78px; padding: 4px 7px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); font: inherit; font-size: 12px;
  background: var(--bg-card); color: var(--fg-1);
}

.acoes-cel { display: flex; flex-wrap: wrap; gap: 5px; }
.cel-sub { font-size: 11.5px; color: var(--fg-3); }
.cel-prazos { max-width: 380px; }
.cel-prazos .chip { margin: 1px 2px; }
.texto-amarelo { color: var(--warning); }
/* 
/* Faixa de MODO VISITA: o escritório olhando o portal como o cliente. Amarela e
   larga de propósito — tem de ser impossível confundir com a tela do cliente. */
.portal-visita {
  margin: 0; padding: 10px clamp(16px, 4vw, 32px);
  background: var(--cep-yellow-100); border-bottom: 1px solid var(--cep-yellow-600);
  font-size: 12.5px; line-height: 1.45; color: var(--fg-1); text-wrap: pretty;
}
.portal-visita-sair {
  font: inherit; font-size: 12px; font-weight: 600; margin-left: 4px;
  background: none; border: 0; padding: 0; color: var(--fg-1);
  text-decoration: underline; cursor: pointer;
}

/* Estado vazio que EXPLICA o próximo passo, em vez do "Sem dados" genérico. */
.bloco-vazio { padding: 4px 0 2px; }
.bloco-vazio p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.bloco-vazio p:last-child { margin-bottom: 0; }