/**
 * Analitico — o painel de resultado (v4: o prototipo aprovado).
 *
 * Especificacao: docs/design/sintese/analitico.html · DECISAO.md secoes 4-6.
 *
 * O que este arquivo desenha: a barra de cabecalho do resultado (contagem +
 * chips do recorte + acoes em massa), a tabela de materias na densidade do
 * prototipo, o detalhe inline e o rodape de paginacao. O ESCOPO e o TRILHO DE
 * FACETAS sao de scope.css — esta tela nao tem controle de dimensao proprio.
 *
 * A regra da cor (main.css) manda aqui sem excecao:
 *   - azul (--act) apenas onde o usuario escolhe: chip de recorte, linha
 *     selecionada, link, foco. Os botoes "Ver"/"Editar"/"+ Novo Clipping" eram
 *     azuis solidos — acao e cromo, viraram tinta;
 *   - croma de dado (--pos/--neu/--neg) apenas no selo de sentimento e na listra
 *     de severidade das linhas negativas;
 *   - o resto e tinta e superficie, inclusive a barra de alcance (magnitude sem
 *     valencia: --ink-3, nunca verde/vermelho).
 */

/* ============================================================================
   Tabs Navigation — REMOVIDA DAQUI (e a fragilidade que sumiu junto)

   Viviam aqui `.tabs-navigation`, `.tabs-container`, `.tab-button`,
   `.tab-button:hover` e `.tab-button.active`: a navegacao em duas faixas
   empilhadas, com a aba corrente sublinhada em azul.
   `.tabs-navigation`/`.tabs-container` nao tinham mais elemento no DOM. Ja
   `.tab-button` TINHA: a marcacao nova do cabecalho e
   `class="tab tab-button"`, porque `main.js:switchTab` e
   `analitico.js:setupListListeners` casam por essa classe.

   O desenho vigente e o de `.top .tab` (topbar.css). Com `.tab-button` vivo
   junto dele, o resultado dependia de duas coisas ao mesmo tempo: `.top .tab`
   ganhar por especificidade (0,2,0 contra 0,1,0) E `topbar.css` ser a ultima
   folha do `<head>`. A primeira sozinha bastava para as regras base, mas a
   redundancia convidava a erro: bastava alguem reordenar os `<link>`, ou
   escrever uma regra `.tab-button` mais especifica, para o sublinhado azul
   voltar por baixo do desenho novo. Duas fontes de verdade para a mesma aba.

   Apagar as regras orfas encerra a duvida: agora ha UMA definicao de como uma
   aba se parece, e ela esta em topbar.css. Conferido antes de apagar — cada
   propriedade que `.tab-button*` setava (background, border, border-bottom,
   padding, font-size, font-weight, color, cursor, transition, white-space) ja
   era reescrita por `.top .tab`, `.top .tab:hover:not(.active)` ou
   `.top .tab.active`; a medicao pos-remocao devolveu os mesmos valores
   computados nos dois temas.

   `.tab-content` abaixo CONTINUA VIVO: e o painel de cada aba (index.html).
   ========================================================================= */

/* ============================================================================
   Tab Content
   ========================================================================= */

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn var(--transition-slow) ease-out;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ============================================================================
   Analítico Container
   ========================================================================= */

/* A grade de sangria do Analitico — mesmo racional de `#dashboard-content`
   (panel.css) e `.config-sections` (admin.css); main.css tem o texto completo.
   Era `display: flex` com `margin-top: var(--space-6)`; o `margin-top` saiu:
   ele empurrava `.analitico-container` (e `.scope` dentro dele) 24px pra baixo
   do padding-top de `.dashboard-main`, que `.scope` so cancelava parcialmente
   com margem negativa — na pratica a barra do Analitico NUNCA ficou colada ao
   cabecalho como a do Painel, so parecia por estarem perto. Comparado hoje
   (`.top` e `.scope` identicos no prototipo, ver topbar.css) contra o que o
   produto tinha: e uma correcao, nao so uma troca de mecanismo. `.scope`
   (`.sangria`) vira `grid-column: 1 / -1` em main.css; `.analitico-layout`
   fica na coluna 2, sem mudanca de forma — so mudou o pai. */
.analitico-container {
  display: grid;
  grid-template-columns: 1fr min(var(--page-max), calc(100% - 2 * var(--page-gutter))) 1fr;
  /* `row-gap`, nao `gap`: o shorthand tambem seta `column-gap`, que entra
     DENTRO da area de um item que atravessa varias colunas — `.scope`, que e
     `grid-column: 1 / -1`, ficava 2×`--space-4` mais largo que as tres
     colunas somadas (os dois `column-gap` entre 1fr/meio/1fr contados a
     mais), sangrando 16px de cada lado da viewport em telas estreitas. Medido
     via Playwright: `scrollWidth` 776 contra `clientWidth` 768 a 768px antes
     desta troca. So a coluna do meio deve espacar de `.analitico-layout`. */
  row-gap: var(--space-4);
}

/* ============================================================================
   Controles de filtro compartilhados
   ========================================================================= */

/*
 * A barra de filtros propria do Analitico (`.filtros-bar`, `.preset-pill`,
 * `.filter-chip`, `.filtros-bar-*`) foi removida na Fase 1b: o recorte agora
 * vem da barra de escopo unica, em styles/scope.css. Restam so os estilos de
 * campo, que a barra de escopo e outros formularios reaproveitam.
 */

.filter-select,
.filter-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-base);
  font-size: var(--text-sm);
  background-color: var(--white);
  color: var(--gray-800);
  transition: border-color var(--transition-base);
}

.filter-select:focus,
.filter-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--act-ring);
}

/* ============================================================================
   O painel de resultado
   ========================================================================= */

/*
 * Era um cartao com padding de 24px em volta de tudo e um titulo "Dados
 * Analiticos" com icone. Agora o painel e uma moldura so, e cada faixa
 * (cabecalho, tabela, rodape) carrega o proprio respiro — como no prototipo,
 * em que a tabela e objeto de primeira classe e nao conteudo de um cartao.
 */
.data-table-container {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: visible;
}

/* Leitor de tela apenas (o cabecalho da coluna de acoes nao tem rotulo visivel:
   os proprios links dizem o que fazem). */
.ana-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Cabecalho do resultado: a contagem, o recorte, e o que se pode fazer --- */

.ana-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule-2);
}

.ana-count {
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: var(--font-bold);
  color: var(--ink);
}

.ana-count .mono {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: var(--font-regular);
  color: var(--ink-3);
}

/*
 * Contador do que falta revisar. Nao e chip de recorte (aqueles sao azuis, e
 * azul e escolha do usuario): e um AVISO de trabalho pendente, e por isso usa a
 * familia de dado --warn, que nenhuma outra coisa desta tabela usa (o selo de
 * sentimento fica em --pos/--neu/--neg, e a listra de severidade em --neg).
 * O trio fundo -soft / tinta -ink / borda cheia e o mesmo ja validado em
 * main.css para AA sobre o proprio fundo.
 *
 * Quando ele esta LIGADO (a fila aberta) o filtro esta ativo, e filtro ativo e
 * ardosia por regra editorial (METODO secao 4, item 4) — e a mesma tinta que o
 * chip de escopo marcado usa.
 */
.ana-pend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 3px 9px;
  font-family: inherit;
  font-size: 12px;
  color: var(--warn-ink);
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ana-pend[hidden] { display: none; }

.ana-pend b {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-bold);
}

.ana-pend .shp { font-size: 9px; line-height: 1; }

.ana-pend .x {
  margin-left: 2px;
  font-size: 13px;
  line-height: 1;
}

.ana-pend.on {
  color: var(--on-act);
  background: var(--act);
  border-color: var(--act);
}

.ana-chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.ana-nochips {
  font-size: 11.5px;
  color: var(--ink-3);
}

/*
 * Chip do recorte ativo. Azul: e escolha do usuario (familia 3). Vive so aqui —
 * a barra de escopo compactada mostra o estado dentro do proprio controle, e
 * duplicar isso como resumo era a redundancia apontada.
 */
.ana-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 260px;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--act);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--act);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.ana-chip .k {
  font-size: 9.5px;
  font-stretch: 78%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.ana-chip .v {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ana-chip-x {
  padding: 0 2px;
  background: none;
  border: none;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}

.ana-chip-x:hover { opacity: 1; }

.ana-acts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ana-selinfo {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}

.ana-selinfo.is-on {
  color: var(--ink);
  font-weight: var(--font-semibold);
}

/*
 * Acao desabilitada: nao desaparece e nao vira cinza fantasma. Sai da familia
 * da acao (contorno tracejado, tinta --ink-3 — medida em 4,88:1 no escuro e
 * 4,6+ no claro) e o `title` diz o que falta. E o mesmo padrao do controle de
 * comparacao indisponivel (scope.css), em vez do `opacity: .5` herdado, que
 * derruba qualquer par medido para ~3,2:1.
 */
.ana-panel .btn-secondary:disabled,
.ana-panel .ana-menu.is-disabled > summary {
  opacity: 1;
  border-style: dashed;
  border-color: var(--rule-2);
  color: var(--ink-3);
  cursor: not-allowed;
}

/* --- Menu suspenso (ordenar, reclassificar, por pagina) --- */

/*
 * Em `<details>`, nao em `<select>`: o unico `<select>` que restava nesta tela
 * era o de "50 por pagina". Teclado de graca (o `<summary>` e focavel e
 * alterna com Enter/Espaco) e sem dependencia nova.
 */
.ana-menu {
  position: relative;
  flex: 0 0 auto;
}

.ana-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}

.ana-menu > summary::-webkit-details-marker { display: none; }
.ana-menu > summary::marker { content: ''; }

.ana-menu-caret {
  font-size: 9px;
  color: var(--ink-3);
}

.ana-menu-pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
  background: var(--surface-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-md);
}

.ana-menu-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px var(--space-2);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.ana-menu-item:hover {
  background: var(--sunken);
}

/* Opcao vigente: azul, porque e a escolha atual do usuario. */
.ana-menu-item.is-active {
  color: var(--act);
  background: var(--act-soft);
}

.ana-menu-item .shp {
  font-size: 8px;
  line-height: 1;
}

.ana-menu-item .shp-positivo { color: var(--pos); }
.ana-menu-item .shp-neutro   { color: var(--neu); }
.ana-menu-item .shp-negativo { color: var(--neg); }

/* ============================================================================
   Tabela do Analítico
   ========================================================================= */

/*
 * A base era compartilhada com `.admin-table` (Fase 0, UI_INVENTARIO §7.4),
 * quando as duas divergiam apenas em `vertical-align`. Deixaram de ser a mesma
 * coisa: a tabela de materias virou o objeto do prototipo (linha de duas
 * alturas, manchete em serifa, celulas que quebram em vez de truncar) e a de
 * administracao continua uma grade de registros curtos. A base compartilhada
 * segue viva aqui para `.admin-table`, que e quem ainda a usa.
 */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  table-layout: fixed;
}

.admin-table thead {
  background: var(--gray-50);
  border-bottom: 2px solid var(--gray-300);
}

.admin-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-bold);
  color: var(--gray-900);
  white-space: nowrap;
}

.admin-table tbody tr {
  border-bottom: 1px solid var(--gray-200);
  transition: background var(--transition-base);
}

.admin-table tbody tr:hover {
  background: var(--gray-50);
}

.admin-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* --- A tabela de materias --- */

/*
 * `table-layout: auto`, e nao `fixed` com larguras em porcentagem no HTML: eram
 * as porcentagens que truncavam "Governo do Piauí investe R$ 4…", "Port…" e
 * "Hospi…". As colunas curtas declaram a propria largura abaixo (dado de
 * tamanho previsivel) e a manchete fica com o que sobrar.
 */
.analitico-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.analitico-table thead th {
  padding: 9px 10px;
  text-align: left;
  font-size: 10.5px;
  font-stretch: 78%;
  font-weight: var(--font-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  border-bottom: 1px solid var(--rule-2);
}

.analitico-table thead th.th-num { text-align: right; }
.analitico-table thead th.th-rail { width: 34px; padding-left: 12px; }
.analitico-table thead th.th-acts { width: 74px; }

.analitico-table tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-2);
}

.analitico-table tbody tr:last-child td { border-bottom: none; }

.analitico-table tbody tr:hover { background: var(--surface-2); }

/* Linha selecionada: azul, familia da escolha — o mesmo azul do chip e da
   faceta marcada, em fundo levissimo mais um fio a esquerda. */
.analitico-table tbody tr.is-checked {
  background: var(--act-soft);
}

/* --- Coluna de selecao + listra de severidade --- */

.analitico-table td.td-rail {
  width: 34px;
  padding-left: 12px;
}

/* Listra so na linha negativa: "se algo esta colorido, algo aconteceu". Uma
   listra em toda linha nao distinguiria nada. */
.analitico-table td.rail-neg {
  box-shadow: inset 3px 0 0 var(--neg);
}

.analitico-table .row-select,
.analitico-table #select-all {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--act);
}

/* --- Data com dia da semana --- */

.analitico-table td.td-date {
  width: 64px;
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--ink);
  white-space: nowrap;
}

.analitico-table td.td-date small {
  display: block;
  font-size: 10px;
  color: var(--ink-3);
}

/* --- Manchete + procedencia --- */

/* 40% em `table-layout: auto` e preferencia, nao lei: as colunas curtas pegam o
   que precisam e a manchete leva o resto. E o conteudo que o analista le. */
.analitico-table td.td-titulo,
.analitico-table thead th.th-titulo {
  width: 40%;
  min-width: 220px;
  padding-right: var(--space-4);
}

/*
 * Serifa = "texto que alguem publicou la fora" (DECISAO.md secao 5).
 *
 * Corte em TRES linhas, na vertical, com a frase inteira no `title` e no
 * detalhe da linha. Nao e o defeito medido: aquele era reticencia no meio da
 * palavra por largura ("Governo do Piauí investe R$ 4…"), que somia com o
 * assunto. Uma manchete de jornal cabe inteira em tres linhas de 16,5px nesta
 * coluna; o que passa disso, nesta base, nao e manchete — sao os registros em
 * que o titulo recebeu o texto da materia (300+ caracteres), e sem limite eles
 * empurram a linha para 6 alturas e desmontam a densidade da tela.
 */
.analitico-table td.td-titulo .t {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: var(--font-medium);
  line-height: 1.28;
  letter-spacing: 0.002em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.analitico-table td.td-titulo .t a {
  color: var(--ink);
  text-decoration: none;
}

.analitico-table td.td-titulo .t a:hover {
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
}

.analitico-table td.td-titulo .src {
  margin: 3px 0 0;
  font-family: var(--font-numbers);
  font-size: 10.5px;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

/* --- Unidade e tema --- */

.analitico-table td.td-unidades {
  width: 140px;
  font-size: 12px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.analitico-table td.td-temas {
  width: 108px;
}

.tag {
  display: inline-block;
  padding: 2px 7px;
  font-size: 11px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

/* "+2" = ha mais valores, com a lista inteira no `title`. Nunca reticencias:
   reticencia esconde sem dizer quanto. */
.ana-mais {
  margin-left: 4px;
  font-family: var(--font-numbers);
  font-size: 10.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

.ana-vazio {
  color: var(--ink-3);
}

/* --- Selo de sentimento --- */

/*
 * Palavra + forma + cor: a separacao nunca depende de cor sozinha (DECISAO.md
 * secao 4). A tinta e a variante de TEXTO da cor de dado (--pos-ink/--neg-ink),
 * nao a de preenchimento — foi essa troca que corrigiu os 38 selos que mediam
 * entre 3,99 e 4,00:1 sobre o proprio fundo -soft.
 */
.analitico-table td.td-sentimento { width: 112px; }

.sentiment-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-stretch: 80%;
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid;
  border-radius: var(--radius-sm);
}

.sentiment-badge .shp {
  font-size: 8px;
  line-height: 1;
}

.sentiment-badge.positivo {
  color: var(--pos-ink);
  border-color: var(--pos);
  background: var(--pos-soft);
}

.sentiment-badge.neutro {
  color: var(--neutral-dark);
  border-color: var(--rule-2);
  background: var(--neu-soft);
}

.sentiment-badge.negativo {
  color: var(--neg-ink);
  border-color: var(--neg);
  background: var(--neg-soft);
}

/* --- Selo de revisao --- */

/*
 * Mesma anatomia do selo de sentimento (palavra + forma + cor), pela mesma
 * razao: a separacao nao pode depender de cor sozinha (DECISAO.md secao 4).
 *
 * As tres cores foram escolhidas para NAO colidir com a coluna vizinha: o
 * sentimento ja ocupa --pos/--neu/--neg na mesma linha, e um selo verde de
 * "confirmado" ao lado de um selo verde de "positivo" seriam duas coisas
 * diferentes com a mesma cara. Sobra a familia --warn para o unico estado que
 * pede acao, e o cinza de estrutura para os dois que ja foram resolvidos.
 *
 * `nao_se_aplica` nao tem selo: a celula recebe `.ana-vazio`, o mesmo travessao
 * de Unidade e Tema vazios.
 */
.analitico-table td.td-rev { width: 104px; }

.rev-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-stretch: 80%;
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid;
  border-radius: var(--radius-sm);
}

.rev-badge .shp {
  font-size: 9px;
  line-height: 1;
}

.rev-badge.pendente {
  color: var(--warn-ink);
  border-color: var(--warn);
  background: var(--warn-soft);
}

/* Os dois estados ja resolvidos partilham o cinza de estrutura — o que os
   separa e a palavra e a forma, nao o croma. Se `corrigido` ganhasse cor
   propria, a linha diria "aconteceu algo aqui" sobre trabalho ja concluido. */
.rev-badge.confirmado,
.rev-badge.corrigido {
  color: var(--ink-2);
  border-color: var(--rule-2);
  background: var(--surface-2);
}

.rev-badge.corrigido { border-style: dashed; }

/* --- Alcance com barra de magnitude --- */

.analitico-table td.td-reach { width: 92px; }

.reach-v {
  margin: 0;
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--ink);
  text-align: right;
}

.reach-b {
  position: relative;
  height: 4px;
  margin-top: 4px;
  background: var(--sunken);
  border-radius: 2px;
}

/* Magnitude sem valencia: tinta, nunca croma de sentimento. */
.reach-b i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--ink-3);
  border-radius: 2px;
}

/* --- Acoes da linha --- */

/*
 * Eram tres botoes azuis solidos ("Ver", "Editar") e um vermelho ("Excluir")
 * competindo com a manchete. Agora sao links: acao discreta, na familia da
 * escolha (azul de link) — e a destrutiva na tinta de dado negativa, que e o
 * unico lugar em que ela e legitima.
 */
/* Uma acao por linha, alinhadas a direita: tres links em fila quebravam de
   forma irregular ("detalhes editar" numa linha, "excluir" na de baixo) e
   custavam 130px de largura que a manchete queria. */
.analitico-table td.td-acts {
  width: 74px;
  text-align: right;
  white-space: nowrap;
}

.row-link {
  display: block;
  padding: 0 0 2px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: var(--font-semibold);
  color: var(--act);
  cursor: pointer;
}

.row-link:hover { text-decoration: underline; }

.row-link-danger { color: var(--neg-ink); }

/* --- Cabecalhos ordenaveis --- */

.sortable-th {
  cursor: pointer;
  user-select: none;
}

.sortable-th:hover { color: var(--ink); }

.sort-indicator::after {
  content: '';
  margin-left: var(--space-1);
  font-size: var(--text-xs);
}

.sortable-th.sort-asc .sort-indicator::after { content: '\2191'; }
.sortable-th.sort-desc .sort-indicator::after { content: '\2193'; }

/* Coluna ordenada: a seta ja diz; o degrau de tinta confirma sem gastar cor. */
.sortable-th.sort-asc,
.sortable-th.sort-desc { color: var(--ink); }

/* --- Estado vazio --- */

.ana-empty {
  padding: var(--space-8) var(--space-4) !important;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* ============================================================================
   Detalhe inline da matéria
   ========================================================================= */

.analitico-table tbody tr.ana-row { cursor: pointer; }

.expand-row {
  animation: fadeIn var(--transition-slow) ease-out;
}

.expand-row td {
  padding: 0 !important;
  background: var(--sunken);
  border-bottom: 1px solid var(--rule-2) !important;
}

.expand-content {
  padding: var(--space-3) var(--space-4) var(--space-4) 46px;
}

.expand-text {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-2);
  white-space: normal;
}

.expand-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 11.5px;
  color: var(--ink-2);
}

.expand-meta b {
  font-stretch: 78%;
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--ink-3);
}

.expand-meta a {
  color: var(--act);
  overflow-wrap: anywhere;
}

/* ============================================================================
   Rodapé de paginação
   ========================================================================= */

/*
 * "1–25 de 1.608 · 25 por página" com Anterior/Próxima discretos, no lugar de
 * "Página 1 de 65" mais um `<select>` de linhas por página. A classe
 * `.pagination-container` fica por causa da folha de impressao (components.css
 * a esconde no papel).
 */
/* Nota de estado explicito no pe do painel (hoje: alcance nao preenchido). */
.ana-note {
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
  font-family: var(--font-numbers);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.ana-pager {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--rule);
}

.ana-pager-info {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--ink-2);
}

.ana-pager-nav {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
}

/* O menu do rodape abre para cima e alinhado a esquerda: e o ultimo elemento da
   pagina, e um popover para baixo cairia fora do painel. */
.ana-pager .ana-menu-pop {
  top: auto;
  bottom: calc(100% + 4px);
  right: auto;
  left: 0;
}

/* Item 1.23 — nota de rodape compartilhada. O prototipo tem
   `analitico.html:497` (`.note-shared`, 57,2h x 1.216w, mono 10,5px): "o
   recorte e o mesmo em todas as telas...". O produto nao escreve este
   paragrafo em lugar nenhum do DOM — nao e so estilo faltando, e o
   `<p class="note-shared">` que nunca existiu. A marcacao sai de
   `analitico.js`, que nao e meu arquivo (nao esta na lista de arquivos deste
   worker); a regra abaixo fica pronta, sem elemento para casar ainda, para
   quando ele for adicionado — o texto exato a inserir esta no relatorio
   final desta auditoria, item 1.23. */
.note-shared {
  max-width: 1216px;
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-6);
  font-family: var(--font-numbers);
  font-size: 10.5px;
  color: var(--ink-3);
}

/* Item 1.25 — o botao duplicava "+ Novo registro", que ja e acao de primeira
   classe no cabecalho (`.top-actions .btn`, topbar.css). `analitico.js:214`
   ainda o escreve (`id="btn-novo-from-analitico"`, condicionado a
   `clipping.criar`) porque `analitico.js` nao e meu arquivo — a supressao
   aqui e so de tela: o no continua no DOM e a permissao continua sendo
   verificada, e por isso NAO e a correcao completa (ver "o que me deixou
   desconfortavel" no relatorio). Oculto nos dois temas e larguras porque o
   duplicado nao para de ser duplicado em nenhum breakpoint. */
#btn-novo-from-analitico {
  display: none;
}

/* ============================================================================
   Overlay de carregamento
   ========================================================================= */

.table-loading-overlay {
  position: absolute;
  inset: 0;
  background: var(--surface);
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: var(--radius-lg);
}

/* ============================================================================
   Responsivo
   ========================================================================= */

/*
 * Até 768px a tabela deixa de ser tabela e vira uma lista de registros (a mesma
 * saida do prototipo). Isso substituiu o segundo renderizador que existia aqui
 * (`renderMobileCards`/`createMobileCard`, ~90 linhas de JS e ~120 de CSS que
 * repetiam a anatomia da linha em outra marcacao, com o risco de as duas
 * divergirem — e divergiam: o cartao mostrava "Editar" azul e nao mostrava tema
 * nem alcance).
 */
@media (max-width: 768px) {
  .ana-toolbar {
    padding: var(--space-3);
  }

  .ana-acts {
    margin-left: 0;
    width: 100%;
  }

  .analitico-table,
  .analitico-table tbody,
  .analitico-table tbody tr,
  .analitico-table tbody td {
    display: block;
    width: auto;
  }

  .analitico-table thead { display: none; }

  .analitico-table tbody tr {
    position: relative;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--rule);
  }

  .analitico-table tbody tr.rail-neg {
    box-shadow: inset 3px 0 0 var(--neg);
  }

  .analitico-table tbody td {
    border: none !important;
    padding: 2px 0 !important;
  }

  /* A listra passa para a linha; a celula devolve a dela. */
  .analitico-table tbody td.rail-neg { box-shadow: none; }

  .analitico-table tbody td.td-rail {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: auto;
    padding: 0 !important;
  }

  .analitico-table td.td-date {
    width: auto;
    font-size: 11px;
  }

  .analitico-table td.td-date small {
    display: inline;
    margin-left: 6px;
  }

  /* `width: auto` explicito: a preferencia de 40% da manchete e uma regra de
     duas classes e vence o `width: auto` generico do bloco acima — sem isto a
     manchete lia numa coluna de 150px dentro de uma tela de 390. */
  .analitico-table td.td-titulo {
    width: auto;
    min-width: 0;
    padding-right: var(--space-5) !important;
  }

  .analitico-table td.td-titulo .t { font-size: 17px; }

  .analitico-table td.td-unidades,
  .analitico-table td.td-temas,
  .analitico-table td.td-sentimento {
    width: auto;
  }

  /* Na lista de registros a celula perde o cabecalho da coluna: o rotulo volta
     como prefixo, como no prototipo. */
  .analitico-table td.td-unidades {
    margin-top: 4px;
  }

  .analitico-table td.td-unidades::before {
    content: 'unidade · ';
    font-family: var(--font-numbers);
    font-size: 10px;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* Sem tema (ou sem unidade) a celula sai da lista em vez de mostrar um
     travessao solto: na tabela o travessao ocupa a celula de uma coluna que
     existe; aqui nao ha coluna, e um "—" sozinho nao diz de que e a ausencia. */
  .analitico-table td.td-temas.is-empty,
  .analitico-table td.td-unidades.is-empty,
  .analitico-table td.td-rev.is-empty {
    display: none !important;
  }

  .analitico-table td.td-temas,
  .analitico-table td.td-sentimento,
  .analitico-table td.td-rev {
    display: inline-block !important;
    margin: 4px var(--space-2) 0 0;
  }

  /* Sem cabecalho de coluna, "PENDENTE" sozinho nao diz pendente de que. O
     prefixo devolve o assunto, como ja acontece em `td-unidades`. */
  .analitico-table td.td-rev::before {
    content: 'revisão · ';
    font-family: var(--font-numbers);
    font-size: 10px;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .analitico-table td.td-rev { width: auto; }

  .analitico-table td.td-reach {
    width: auto;
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
    margin-top: 4px;
  }

  .reach-v { text-align: left; }

  .reach-b {
    flex: 1;
    margin-top: 0;
  }

  .analitico-table td.td-acts {
    width: auto;
    text-align: left;
    margin-top: var(--space-2);
  }

  .row-link {
    display: inline-block;
    padding: 0 var(--space-3) 0 0;
  }

  .expand-content {
    padding: var(--space-3) 0 0;
  }

  .ana-pager { padding: var(--space-3); }
}

/*
 * A folha responsiva global (responsive.css) forcava, em <=480px,
 * `.analitico-table { min-width: 500px }` com `overflow-x: scroll` no
 * envelope — ou seja, ler a tabela num telefone de 390px exigia arrastar de
 * lado. Com a lista de registros isso deixou de ser necessario, e a regra e
 * desfeita aqui (esta folha carrega depois daquela).
 */
@media (max-width: 480px) {
  .analitico-container .table-responsive {
    overflow-x: visible;
  }

  .analitico-table {
    min-width: 0;
  }

  .ana-count { font-size: 13.5px; }

  .ana-acts .btn-secondary,
  .ana-acts .ana-menu > summary {
    font-size: 11.5px;
    padding: var(--space-1) var(--space-2);
  }
}

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

/* No papel a tabela e a materia: o que sobra sao as acoes e os menus. A
   contagem e os chips ficam — sao a legenda do recorte impresso. */
@media print {
  .ana-acts,
  .ana-menu,
  .row-link,
  .analitico-table td.td-rail,
  .analitico-table th.th-rail,
  .analitico-table td.td-acts,
  .analitico-table th.th-acts {
    display: none !important;
  }

  .data-table-container {
    border-color: #ccc;
  }
}