/* ============================================================
   Correções de tela — hierarquia, densidade e rolagem
   ============================================================
   Carregar por último, depois de unify.css.
   ============================================================ */

/* ============================================================
   0. A BARRA DE ROLAGEM FICA NO CANTO DA JANELA
   ============================================================

   O bug: `.screen` é `height: 100vh; overflow: hidden`, então a
   janela nunca rola. Quem rola é o container da tela — e esse
   container era ao mesmo tempo ESTREITO e CENTRALIZADO:

     .ce-screen  { overflow-y: auto; max-width:  900px; margin: 0 auto }
     .fin-screen { overflow-y: auto; max-width: 1400px; margin: 0 auto }

   Barra de rolagem nasce na borda direita do elemento que rola.
   Se esse elemento tem 900px centralizados numa tela de 1920px,
   a barra aparece a ~1410px — ou seja, NO MEIO DA TELA. No
   Financeiro, com 1400px, ela cai mais à direita, mas ainda não
   no canto. Era isso, nas oito telas abaixo.

   A correção separa as duas responsabilidades, que nunca deveriam
   estar no mesmo elemento:

     quem ROLA   → ocupa a largura inteira (barra no canto)
     quem LIMITA → é o conteúdo dentro dele (centralizado)

   Feito por filho direto, sem tocar no HTML de nenhuma tela.

   ⚠️ CUIDADO com `margin` e `width` aqui. Estas telas recebem
   `margin-left: var(--sidebar-width)` por uma regra de especificidade
   maior (`.main-sidebar ~ #chat-screen .fin-screen`, 0,3,0). Escrever
   `margin: 0` não a vence — mas `width: 100%` somado àquele
   margin-left faz o bloco ficar 245px MAIS LARGO que a área útil:
   estoura à direita e abre um vão à esquerda. Por isso:
     margin-right: 0  (só a direita; o margin-left da sidebar fica)
     width: auto      (bloco ocupa o resto, já descontada a margem)
   ============================================================ */
.ce-screen,
.fin-screen,
.cv-screen,
.eq-screen,
.pc-screen,
.nl-screen-wrap,
.ls-screen-wrap,
.ga-screen-wrap {
  margin-right: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  width: auto;
}

/* O conteúdo é que se limita e se centraliza. */
.ce-screen > *,
.fin-screen > *,
.cv-screen > *,
.eq-screen > *,
.pc-screen > *,
.nl-screen-wrap > *,
.ls-screen-wrap > *,
.ga-screen-wrap > * {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--tela-conteudo, 75rem);
  padding-inline: var(--space-8);
  width: 100%;
}

/* Largura de leitura por tela: dado denso pede mais, formulário
   pede menos. */
.fin-screen,
.ls-screen-wrap { --tela-conteudo: 87.5rem; } /* 1400px — tabela larga */
.pc-screen,
.nl-screen-wrap { --tela-conteudo: 75rem; }   /* 1200px */
.ga-screen-wrap { --tela-conteudo: 87.5rem; } /* 1400px — tabela de 1100px */
.ce-screen,
.cv-screen,
.eq-screen     { --tela-conteudo: 62rem; }    /* ~990px — lista e formulário */

@media (max-width: 48rem) {
  .ce-screen > *, .fin-screen > *, .cv-screen > *, .eq-screen > *,
  .pc-screen > *, .nl-screen-wrap > *, .ls-screen-wrap > *,
  .ga-screen-wrap > * {
    padding-inline: var(--space-4);
  }
}

/* ============================================================
   1. Ícone — um só caráter em todo o sistema
   ============================================================
   Os SVG estão inline no HTML e no JS, desenhados em épocas
   diferentes: uns com traço 2, outros com ponta reta, tamanhos
   variados. Não dá para trocar o desenho por CSS, mas dá para
   igualar o CARÁTER — e é o traço/ponta que faz um conjunto de
   ícones parecer do mesmo sistema.

   O DS2 especifica: grade de 24, traço 2,5, cantos arredondados,
   sem preenchimento.
   ============================================================ */
svg:not([class*="logo"]):not([class*="brand"]) {
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Traço um pouco mais presente, como o conjunto oficial. */
svg[stroke-width="2"] { stroke-width: 2.25; }
svg[stroke-width="1.5"] { stroke-width: 2; }

/* Ícone dentro de item de menu e de card: cor de DETALHE (Azul
   Precisão), nunca roxo — roxo é ação. */
.sidebar-nav-item svg { color: var(--night-200); flex-shrink: 0; }
.sidebar-nav-item:hover svg { color: var(--white); }
.sidebar-nav-item.active svg { color: var(--white); }

/* Ícone do card da Home: bloco discreto, não círculo colorido. */
.home-card-icon {
  align-items: center;
  background: var(--violet-050);
  border-radius: var(--radius-md);
  color: var(--violet-700);
  display: inline-flex;
  flex-shrink: 0;
  height: var(--space-10);
  justify-content: center;
  width: var(--space-10);
}
.home-card-icon svg { height: var(--space-5); width: var(--space-5); }
.home-card:hover .home-card-icon { background: var(--violet-100); }

/* Ícone de título de seção: menor e discreto. */
.home-section-title svg { height: var(--space-4); width: var(--space-4); }

/* ============================================================
   2. Rolagem — uma barra por tela
   ============================================================
   Lista principal de conteúdo com max-height + overflow-y cria
   uma segunda barra no MEIO da tela: a página rola por fora e o
   bloco rola por dentro. Quem lê não sabe qual usar.

   Dropdown, modal e caixa de comentário seguem com rolagem
   própria de propósito — ali é sobreposição, não conteúdo.
   ============================================================ */
.ce-lista-vagas,
.cl-email-list,
.pv-hist-list {
  max-height: none;
  overflow-y: visible;
}

/* Coluna do quadro também não: o quadro rola na horizontal, a
   página na vertical. */
.pv-kanban-cards { max-height: none; overflow-y: visible; }

/* ============================================================
   3. Quadro (kanban) — padrão .ct-board do DS2
   ============================================================
   Antes: colunas de 180px, gap de 8px, cartão com padding de 6px
   e rolagem interna. Tudo comprimido, e é isso que se lê como
   cartão feio — falta de respiro, não falta de enfeite.
   ============================================================ */
.pv-kanban-board {
  display: grid;
  gap: var(--space-4);
  grid-auto-columns: minmax(15rem, 1fr);
  grid-auto-flow: column;
  overflow-x: auto;
  padding-bottom: var(--space-4);
  width: 100%;
}
.pv-kanban-column {
  background: var(--surface-sunken);
  border: 0;
  border-radius: var(--radius-md);
  min-width: 0;
  padding: var(--space-4);
}
.pv-kanban-column-header {
  align-items: center;
  border-bottom: 0;
  display: flex;
  gap: var(--space-2);
  justify-content: flex-start;
  padding: 0 0 var(--space-3);
}
.pv-kanban-column-name {
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pv-kanban-column-count {
  background: var(--white);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin-left: auto;
  padding: 0 var(--space-2);
}
.pv-kanban-column-dot { height: 8px; width: 8px; }
.pv-kanban-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
}
/* O cartão: respiro de verdade, fio fino, sem sombra em repouso.
   A barra à esquerda continua carregando a urgência. */
.pv-kanban-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left-width: var(--space-1);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: var(--space-4);
}
.pv-kanban-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}
.pv-kanban-card:hover { border-left-color: inherit; }
.pv-kanban-card.pv-dragging { opacity: 0.5; transform: none; }
.pv-kanban-card-expanded {
  background: var(--surface-card);
  border: 1px solid var(--violet-200);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
  padding: var(--space-4);
}
.pv-kanban-column.pv-drop-target {
  background: var(--violet-050);
  box-shadow: inset 0 0 0 2px var(--violet-300);
}

/* A cor de urgência tem de ser REDECLARADA aqui.
   A regra base acima usa `border: 1px solid var(--border-subtle)`, que
   zera border-left-color; as classes .pv-urg-* vivem no styles.css, que
   carrega antes. Sem isto, todo cartão fica com a barra cinza e a
   urgência desaparece da tela — é o que estava acontecendo. */
.pv-kanban-card.pv-urg-vencida    { border-left-color: var(--danger-500); }
.pv-kanban-card.pv-urg-hoje       { border-left-color: var(--warning-500); }
.pv-kanban-card.pv-urg-critica    { border-left-color: var(--warning-500); }
.pv-kanban-card.pv-urg-alta       { border-left-color: var(--precision-500); }
.pv-kanban-card.pv-urg-normal     { border-left-color: var(--success-500); }
.pv-kanban-card.pv-urg-sem        { border-left-color: var(--gray-400); }
.pv-kanban-card.pv-urg-congelada  { border-left-color: var(--precision-300); opacity: 0.75; }
.pv-kanban-card.pv-urg-finalizada { border-left-color: var(--success-500); opacity: 0.75; }

/* Conteúdo do cartão: uma hierarquia clara em três níveis. */
.pv-card-codigo {
  color: var(--text-subtle);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.pv-card-cargo {
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 700;
  line-height: 1.3;
  margin-top: var(--space-1);
}
.pv-card-cliente {
  color: var(--text-muted);
  font-size: var(--text-caption);
  margin-top: 2px;
}
.pv-card-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ---- Selos do quadro: fundo suave, texto forte ----
   Estes vinham do tema escuro: fundo gray-700/gray-800 com texto
   claro. Em fundo claro viram blocos pesados dentro do cartão, e é
   boa parte do que se lia como "cartão feio". O padrão do DS2 para
   selo é o inverso: fundo no tom 100, texto no tom 500. */
.pv-badge-qual,
.pv-badge-qual-zero,
.pv-badge-meta,
.pv-badge-meta-alvo {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  color: var(--text-body);
  font-style: normal;
}
.pv-badge-qual-ok,
.pv-badge-qual-partial,
.pv-badge-meta-ok {
  background: var(--success-100);
  border: 1px solid color-mix(in srgb, var(--success-500) 25%, var(--white));
  color: var(--success-500);
}
.pv-badge-parcial,
.pv-badge-meta-partial {
  background: var(--warning-100);
  border: 1px solid color-mix(in srgb, var(--warning-500) 25%, var(--white));
  color: var(--warning-500);
}

/* Tela sem max-width própria: o conteúdo colava na borda esquerda. */
.pv-screen {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
@media (max-width: 48rem) {
  .pv-screen { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ============================================================
   4. Financeiro — resumo antes do detalhe
   ============================================================
   Antes: título pequeno no mesmo peso do resto, cinco caixas de
   indicador, seis abas com ícone decorativo e conteúdo colado.
   Nada dizia o que olhar primeiro.

   Agora: título de tela destacado, período como controle
   segmentado discreto, indicadores em linha sem caixa (.ct-stat,
   já em app.css), abas em texto puro.
   ============================================================ */
.fin-wrapper { display: block; }
.fin-header {
  align-items: end;
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
}
.fin-header-left {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.fin-title {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0;
}

/* Período: controle segmentado compacto, alinhado pela base do
   título. Não é campo de formulário nem fileira de botões. */
.fin-header-left .fin-periodo-selector {
  background: var(--surface-sunken);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: none;
  display: inline-flex;
  gap: 0;
  min-height: 0;
  padding: 3px;
}
.fin-header-left .fin-periodo-btn {
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-sm) - 3px);
  box-shadow: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 700;
  min-height: var(--space-8);
  padding: 0 var(--space-4);
}
.fin-header-left .fin-periodo-btn:hover { color: var(--text-strong); }
.fin-header-left .fin-periodo-active {
  background: var(--white);
  box-shadow: var(--shadow-xs);
  color: var(--text-strong);
}

/* Indicadores: linha respirada, sem caixa (a forma vem do .ct-stat). */
.fin-stats { margin-bottom: var(--space-8); }
/* 15rem, não 11rem: o valor é 28px, tabular e `nowrap`. "R$ 284.500,00" mede
   ~185px e um valor na casa do milhão ~209px; a coluna de 11rem deixava 165px
   de conteúdo e o número perdia os últimos dígitos. Dimensionado pelo pior
   caso (240px − 20px de barra e recuo = 220px), o corpo nunca precisa
   encolher: quando não cabem lado a lado, o auto-fit quebra a linha. */
.fin-stats-row {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Abas: texto e sublinhado. O ícone era decoração — sai.
   O DS2 proíbe ícone decorativo sem relação com o conteúdo. */
.fin-tabs {
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-6);
}
.fin-tabs-inner {
  display: flex;
  gap: var(--space-5);
  /* `overflow-y: hidden` é obrigatório, não enfeite: declarar só o eixo x faz
     o y computar de `visible` para `auto` (CSS Overflow 3, §3). Bastava 1px de
     sobra por subpixel para nascer uma barra VERTICAL de 6px na borda das
     abas — no meio da tela, e sem rolar nada. */
  overflow-x: auto;
  overflow-y: hidden;
}
.fin-tab {
  background: transparent;
  border: 0;
  border-bottom: var(--space-1) solid transparent;
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 700;
  min-height: calc(var(--space-10) + var(--space-1));
  padding: var(--space-3) 0;
  white-space: nowrap;
}
.fin-tab__icon { display: none; }
.fin-tab:hover { color: var(--text-strong); }
.fin-tab--active { border-bottom-color: var(--violet-500); color: var(--text-strong); }
.fin-content { padding-top: var(--space-2); }
.fin-loading, .fin-empty {
  color: var(--text-muted);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

/* Filtros: uma barra alinhada, SEM moldura. O legado desenhava
   fundo + borda + raio, criando uma caixa que competia com a
   tabela logo abaixo. */
.fin-filters {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: 0 0 var(--space-4);
}
.fin-filters input[type="search"], .fin-filters input[type="text"] { min-width: 16rem; }

/* Título e período no mesmo bloco ficavam grudados. */
.fin-header-left { gap: var(--space-6); }

/* ============================================================
   5. Formalizações — uma coisa depois da outra
   ============================================================
   Antes: seletor de tipo, busca de vaga e assunto empilhados com
   molduras concorrentes, e o par formulário/prévia sem separação
   clara. Tudo com o mesmo peso.

   Agora: as etapas viram passos com respiro, e o par vira duas
   colunas com fio entre elas.
   ============================================================ */
.formalizacoes-screen { padding-bottom: var(--space-12); }

.fz-type-selector {
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  padding-top: var(--space-6);
}
.fz-type-btn {
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 700;
  min-height: var(--space-10);
  padding: 0 var(--space-4);
}
.fz-type-btn:hover {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
}
.fz-type-btn.active, .fz-type-btn--active, .fz-type-btn.fz-type-active {
  background: var(--violet-500);
  border-color: var(--violet-500);
  color: var(--white);
}

/* Busca de vaga: bloco de trabalho, não card decorado. */
.fz-vacancy-section { padding-top: var(--space-6); }
.fz-vacancy-search-inner {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.fz-vacancy-search-header {
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}
.fz-vacancy-search-row { display: flex; gap: var(--space-2); }
.fz-vacancy-search-row input { flex: 1 1 auto; min-width: 0; }
/* O botão acompanha o próprio texto; sem isto ele estica por toda a
   largura restante, que é o que estava acontecendo. */
.fz-vacancy-search-row button,
.fz-vacancy-search-btn { flex: 0 0 auto; width: auto; }
.fz-vacancy-results {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
}
.fz-vacancy-results:empty { border: 0; margin: 0; }

.fz-subject-bar {
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  padding-top: var(--space-4);
}

/* Formulário e prévia: duas colunas, fio entre elas. */
.fz-main { padding-top: var(--space-6); }
.fz-form-header, .fz-preview-header {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}
.fz-preview {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/* ============================================================
   6. Controle de Envios — respiro e largura de leitura
   ============================================================ */
.ce-stats, .ce-stats-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-bottom: var(--space-8);
}
.ce-lista-vagas { gap: var(--space-2); }

/* Cabeçalho da tela: título e busca lado a lado, não empilhados
   com a busca esticada de ponta a ponta. */
.ce-header {
  align-items: end;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
}
.ce-busca { max-width: 22rem; width: 100%; }

/* Linha de vaga: código e cargo JUNTOS à esquerda.
   O `justify-content: space-between` jogava o cargo para a borda
   direita do cartão, longe do código a que pertence — e a linha
   ficava com um vão morto no meio. */
.ce-vaga-card { padding: var(--space-3) var(--space-4); }
.ce-vaga-card-top {
  align-items: baseline;
  display: flex;
  gap: var(--space-3);
  justify-content: flex-start;
  margin-bottom: 2px;
}
.ce-vaga-card-cargo { margin-bottom: 0; }
.ce-vaga-card-cliente { color: var(--text-muted); font-size: var(--text-caption); }
.ce-vaga-card-bottom {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  margin-bottom: 0;
  margin-top: var(--space-3);
}

/* Progresso é informação, não ação: sai o roxo, entra neutro.
   Roxo Vértice é reservado para ação (regra do DS2). */
.ce-vaga-card-enviados {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 0;
  white-space: nowrap;
}
/* Barra com altura suficiente para ser lida. */
.ce-mini-bar-track { height: 6px; }

.ce-page-icon {
  background: var(--violet-050);
  border-radius: var(--radius-md);
  color: var(--violet-700);
}

/* ============================================================
   7. Pendências e Prazos — cabeçalho igual ao resto
   ============================================================ */
.pv-screen, .pend-screen { padding-bottom: var(--space-12); }
.pv-header, .pend-header {
  align-items: end;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
}
.pv-title, .pend-title, .ce-title, .em-title,
.gu-title, .audit-title, .contr-title, .ga-title {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0;
}


/* ============================================================
   10. Garantias
   ============================================================
   Estava bagunçada por três motivos, todos medidos no navegador:
   linha de 118px porque o nome do cliente e o CNPJ quebravam em
   duas linhas cada; uma coluna vazia enorme entre Status e a ação;
   e o resumo colado no título, com os números sem tratamento.
   ============================================================ */
.ga-screen-wrap { padding-bottom: var(--space-12); }

.ga-header {
  align-items: end;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
}
.ga-title {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0;
}
.ga-resumo {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-bottom: var(--space-8);
}
.ga-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
}
.ga-toolbar input[type="search"] { max-width: 20rem; }

/* A tabela cabe na área: sem min-width forçando 1100px e sem
   estourar. Larguras proporcionais evitam a coluna vazia. */
/* Mesmo par do .fin-table-container: sem o eixo y explicito, ele computa
   para `auto` e nasce barra vertical fantasma ao lado da tabela. */
.ga-table-wrap { overflow-x: auto; overflow-y: hidden; }
.ga-table {
  min-width: 62rem;
  table-layout: fixed;
  width: 100%;
}
.ga-table th:nth-child(1), .ga-table td:nth-child(1) { width: 20%; }
.ga-table th:nth-child(2), .ga-table td:nth-child(2) { width: 18%; }
.ga-table th:nth-child(3), .ga-table td:nth-child(3) { width: 13%; }
.ga-table th:nth-child(4), .ga-table td:nth-child(4),
.ga-table th:nth-child(5), .ga-table td:nth-child(5) { width: 9%; }
.ga-table th:nth-child(6), .ga-table td:nth-child(6) { width: 8%; }
/* Status e ação precisam de folga: com 10%/5% a pílula "Acionada"
   ficava por baixo do botão Ver. */
.ga-table th:nth-child(7), .ga-table td:nth-child(7) { width: 13%; }
.ga-table th:nth-child(8), .ga-table td:nth-child(8) { text-align: right; width: 10%; }

/* Duas linhas por célula viravam quatro quando o texto quebrava.
   O nome fica em uma linha com reticências; o CNPJ é apoio. */
.ga-cell-main {
  color: var(--text-strong);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ga-cell-sub {
  color: var(--text-muted);
  font-size: var(--text-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ga-actions-cell { white-space: nowrap; }

/* Fundo de linha: sinal discreto, não bloco colorido. */
.ga-row-warn { background: color-mix(in srgb, var(--warning-500) 6%, transparent); }
.ga-row-acionada { background: color-mix(in srgb, var(--danger-500) 6%, transparent); }

.ga-pagination {
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}
.ga-pag-info, .ga-pag-page { color: var(--text-muted); font-size: var(--text-body-sm); }