/* Monitor STJ/STF — sem framework CSS. Tema CLARO por padrão (tokens em :root);
   o escuro sobrescreve os tokens em :root[data-theme="dark"] (toggle no base.html). */

:root {
  color-scheme: light;
  --bg: #eef1f5;
  --bg-elevated: #ffffff;
  --border: #dde1e8;
  --text: #1b2027;
  --text-muted: #5a6572;
  --accent: #2f66d6;
  --danger: #cf4339;
  --radius: 8px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14161a;
  --bg-elevated: #1c1f26;
  --border: #2c2f38;
  --text: #e6e8eb;
  --text-muted: #9aa0ab;
  --accent: #5b8def;
  --danger: #e5675f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.brand {
  font-weight: 600;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
}

/* Seletor de tribunal do cabeçalho. Dois botões colados, formato de chave:
   o ativo fica preenchido e o outro apagado, para o recorte em vigor ser
   legível de relance — é o estado mais importante da tela, já que o sistema
   nunca mostra as duas cortes juntas. */
.tribunal-switch {
  display: inline-flex;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.tribunal-switch-btn {
  appearance: none;
  border: 0;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.7rem;
  cursor: pointer;
}

.tribunal-switch-btn + .tribunal-switch-btn {
  border-left: 1px solid var(--border);
}

.tribunal-switch-btn:hover {
  color: var(--text);
}

.tribunal-switch-btn.is-active {
  background: var(--accent);
  color: #fff;
  cursor: default;
}

.topbar-nav a {
  color: var(--text);
}

.user-email {
  color: var(--text-muted);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.theme-icon {
  display: none;
}

:root:not([data-theme="light"]) .theme-icon-sun {
  display: inline;
}

:root[data-theme="light"] .theme-icon-moon {
  display: inline;
}

.content {
  max-width: 720px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}

.auth-card {
  max-width: 360px;
  margin: 3rem auto;
  padding: 2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

h1 {
  font-size: 1.25rem;
  margin-top: 0;
}

form label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

form input,
form select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 1rem;
}

button,
.link-button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  cursor: pointer;
}

button.danger {
  background: var(--danger);
}

.link-button {
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  text-decoration: underline;
}

.inline-form {
  display: inline;
}

.error {
  color: var(--danger);
  font-size: 0.9rem;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

table.users-table {
  width: 100%;
  border-collapse: collapse;
}

table.users-table th,
table.users-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

/* ---- Dashboard / casos (pré-visualização) ---------------------------- */

.content.wide {
  max-width: 1080px;
}

.page-head {
  margin-bottom: 1.5rem;
}

.page-head h1 {
  margin-bottom: 0.25rem;
}

.muted {
  color: var(--text-muted);
}

.small {
  font-size: 0.82rem;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.kpi-num {
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
}

.kpi-label {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.panel h2 {
  font-size: 1rem;
  margin: 0 0 1rem;
}

.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 720px) {
  .panel-grid {
    grid-template-columns: 1fr;
  }
}

.bars {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bar-row {
  display: grid;
  grid-template-columns: 220px 1fr 48px;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
}

.bar-row:hover {
  text-decoration: none;
}

.bar-row:hover .bar-fill {
  filter: brightness(1.15);
}

.bar-label {
  font-size: 0.88rem;
}

.bar-track {
  height: 10px;
  background: var(--bg);
  border-radius: 5px;
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 5px;
  min-width: 2px;
}

.bar-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
}

.mini-table td {
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

/* Radar de julgadores — inclinação de favorabilidade por ministro e por turma */

.radar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.radar-head h2 {
  margin: 0;
}

.radar-filtro {
  display: flex;
  gap: 0.4rem;
}

.radar-filtro select {
  width: auto;
  margin-top: 0;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}

.radar-sub {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 1.1rem 0 0.4rem;
}

.radar-sub:first-of-type {
  margin-top: 0.4rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.radar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.radar-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.radar-legend .lg::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.lg-fav::before    { background: #3ba86a; }
.lg-misto::before  { background: #b7a63c; }
.lg-neutro::before { background: #5b8def; }
.lg-desfav::before { background: #d1655b; }

.radar-name {
  width: 44%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}

.radar-turma {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.radar-turma::before {
  content: "· ";
}

.radar-cell {
  width: 48%;
}

/* Radar clicável: deep-link para a lista de casos na mesma dimensão da
   decisão definidora (fav_relator/fav_turma). Sem JS — cada célula carrega o
   mesmo link (uma <tr> não pode ser envolvida por <a> em HTML válido). */
.radar-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.radar-link:hover {
  text-decoration: none;
}

table.mini-table.radar tbody tr:hover {
  background: var(--bg);
}

/* Aviso de curadoria pendente da decisão definidora, acima do radar. */
.aviso-curadoria {
  margin: 0 0 0.9rem;
}

.lean {
  display: flex;
  height: 12px;
  width: 100%;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}

.lean .seg {
  display: block;
  height: 100%;
  min-width: 2px;
}

/* Contagens visíveis sob a barra do radar (apontamento 04/08): número na cor
   de cada série, separados por ponto — a barra de 12px não comporta texto. */
.lean-nums {
  display: block;
  margin-top: 2px;
  font-size: 0.66rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lean-nums b { font-weight: 600; }
.lean-nums b + b::before { content: "·"; margin: 0 4px; color: var(--text-muted); font-weight: 400; }
.ln-fav    { color: #3ba86a; }
.ln-neutro { color: #5b8def; }
.ln-desfav { color: #d1655b; }

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Filtros globais do Panorama (itens 1/2 de 04/08) — mesma régua visual dos
   filtros da lista; margem para separar dos KPIs. */
.filtros-panorama { margin-bottom: 1.1rem; }

/* Cross-filter no gráfico de pilares: o nome do pilar é um link que filtra o
   Panorama inteiro. Cor herdada (não é navegação para fora da tela); o estado
   ativo ganha peso e o ✕ de desfazer. */
a.bar-label-filtro { color: var(--text); text-decoration: none; }
a.bar-label-filtro:hover { text-decoration: underline; }
a.bar-label-filtro.is-active { font-weight: 700; }

/* Radar agrupado por turma (apontamento 04/08, item 18): cabeçalho da turma em
   destaque; respiro entre um grupo e o seguinte. */
.radar-grupo-head .radar-name,
.radar-grupo-head .num { font-weight: 600; }
.radar-grupo + .radar-grupo .radar-grupo-head td { padding-top: 0.9rem; }

.cta {
  text-align: right;
}

/* Filtros + tabela de casos */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.filtros input[type="search"] {
  flex: 1 1 260px;
  margin-top: 0;
}

.filtros select {
  width: auto;
  margin-top: 0;
}

.filtros button {
  align-self: stretch;
}

/* Grupos de intervalo de data: alinhados na mesma linha de filtros (flex-wrap),
   com rótulo pequeno em maiúsculas como o cabeçalho da tabela. */
.filtros .filtro-data {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: nowrap;
}

.filtros .filtro-data input[type="date"] {
  width: auto;
  margin-top: 0;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
}

.filtros .filtro-limpar {
  align-self: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Dropdown de multisseleção (item 15 de 04/08) — details/summary sem JS.
   O summary imita um select; o painel abre por cima da tabela. */
.filtros .multi { position: relative; }
.filtros .multi > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.45rem 1.6rem 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-size: 0.85rem;
  white-space: nowrap;
  user-select: none;
}
.filtros .multi > summary::-webkit-details-marker { display: none; }
.filtros .multi > summary::after {
  content: "▾";
  position: absolute;
  right: 0.55rem;
  color: var(--text-muted);
}
.filtros .multi[open] > summary { border-color: var(--accent); }
.multi-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  min-width: 230px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.multi-panel label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}
.multi-panel input[type="checkbox"] { margin: 0; }

table.casos-table {
  width: 100%;
  border-collapse: collapse;
}

table.casos-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Ordenação server-side (cabeçalhos clicáveis + indicador ▲/▼ na coluna ativa). */
table.casos-table th a {
  color: inherit;
  text-decoration: none;
}

table.casos-table th a:hover {
  text-decoration: underline;
}

table.casos-table th .sort-arrow {
  display: inline-block;
  margin-left: 0.2rem;
  color: var(--accent);
  font-size: 0.7rem;
}

table.casos-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: top;
}

table.casos-table tbody tr {
  cursor: pointer;
}

table.casos-table tbody tr:hover {
  background: var(--bg-elevated);
}

.mono {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
}

.tribunal-tag {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-right: 0.4rem;
}

.dot {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0 0.25rem;
  vertical-align: middle;
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
}

.badge-fav    { background: #17402c; color: #7ee2a8; }
.badge-misto  { background: #3d3a17; color: #e6d97e; }
.badge-neutro { background: #23303f; color: #9fc2e6; }
.badge-desfav { background: #43221f; color: #f0a19a; }
.badge-pend,
.badge-indef,
.badge-fora   { background: #2a2d36; color: var(--text-muted); }

.fill-fav    { background: #3ba86a; }
.fill-misto  { background: #b7a63c; }
.fill-neutro { background: #5b8def; }
.fill-desfav { background: #d1655b; }
.fill-pend,
.fill-indef,
.fill-fora   { background: #565b66; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

/* Detalhe do caso */

.breadcrumb {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}

.tag-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.chip {
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.65rem;
  font-size: 0.8rem;
}

.chip-status {
  border-style: dashed;
  color: var(--text-muted);
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem 1.5rem;
}

.fact-k {
  display: block;
  color: var(--text-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.15rem;
}

.fact-v {
  font-size: 0.92rem;
}

.partes {
  margin: 1rem 0 0;
  font-size: 0.9rem;
}

.timeline {
  white-space: pre-wrap;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  margin: 0;
  overflow-x: auto;
}

dl.qa {
  margin: 0;
}

dl.qa dt {
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
}

dl.qa dd {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.qa-trecho {
  display: block;
  margin-top: 0.3rem;
  font-style: italic;
  color: var(--text-muted);
  border-left: 2px solid var(--border);
  padding-left: 0.6rem;
}

.ementa {
  max-height: 340px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 0.86rem;
  line-height: 1.55;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
}

/* ---- Tema claro: componentes com cor fixa (badges/chips) -------------- */
/* Os badges e o chip de estrela usam cor cravada (não token) para manter o
   contraste da pílula; abaixo as versões claras equivalentes. As cores
   semânticas dos segmentos (.fill-* / .lg-*) servem nos dois temas. */

:root[data-theme="light"] .badge-fav    { background: #d7efe1; color: #1a6b40; }
:root[data-theme="light"] .badge-misto  { background: #f1e8c2; color: #7a6410; }
:root[data-theme="light"] .badge-neutro { background: #dce8fb; color: #2b569f; }
:root[data-theme="light"] .badge-desfav { background: #f7dcd8; color: #a83a30; }
:root[data-theme="light"] .badge-pend,
:root[data-theme="light"] .badge-indef,
:root[data-theme="light"] .badge-fora   { background: #e7eaef; color: var(--text-muted); }

/* ---- Detalhe do caso: acompanhamento STJ (andamentos/documentos/partes/
   decisões/petições) — só tokens de tema, funciona em claro e escuro. ---- */

.andamentos-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--border);
}

.andamento-item {
  position: relative;
  padding: 0 0 1.1rem 1rem;
}

.andamento-item:last-child {
  padding-bottom: 0;
}

.andamento-item::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 0.3rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.andamento-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}

.andamento-data {
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.andamento-desc {
  font-size: 0.92rem;
}

.andamento-detalhe {
  margin-top: 0.35rem;
}

.andamento-detalhe summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.andamento-detalhe p {
  margin: 0.4rem 0 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  white-space: pre-wrap;
}

.andamentos-mais {
  margin-top: 0.6rem;
}

.andamentos-mais > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.86rem;
  padding: 0.3rem 0;
  list-style-position: inside;
}

.andamentos-mais[open] > summary {
  margin-bottom: 0.5rem;
}

.notas-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
}

.notas-form textarea {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
}

/* Editor do resumo narrativo (timeline_pt/timeline_en): monoespaçado p/ as
   linhas datadas alinharem, como no <pre> da linha do tempo. */
.notas-form textarea.narrativa-edit {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  min-height: 20rem;
}

/* Abas de idioma do resumo narrativo (PT aberto por padrão; EN recolhido). */
.narrativa-idioma {
  margin-top: 0.5rem;
}

.narrativa-idioma summary {
  cursor: pointer;
  font-weight: 600;
}

.narrativa-idioma .notas-form {
  margin-top: 0.5rem;
}

/* Sugestão automática de decisão definidora (degrau 0 / IA local) no form de
   curadoria — destaque discreto na cor de acento; a evidência (dispositivo)
   fica recolhida para não empurrar o form. */
.sugestao-definidora {
  border-left: 3px solid var(--accent);
  padding: 0.4rem 0.6rem;
  margin: 0.5rem 0 0.25rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--radius);
}

.sugestao-evidencia {
  margin: 0.25rem 0 0.75rem;
}

.sugestao-evidencia summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.sugestao-evidencia pre {
  white-space: pre-wrap;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
  max-height: 16rem;
  overflow-y: auto;
}

/* Situação binária (Ativo/Encerrado) na lista de casos. */
.sit-ativo {
  color: #1a7f37;
  font-weight: 600;
}

.sit-encerrado {
  color: var(--text-muted);
  font-weight: 600;
}

table.detail-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.25rem;
}

table.detail-table th {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 2px solid var(--border);
  font-size: 0.76rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

table.detail-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  vertical-align: top;
}

.partes-grupo {
  margin-bottom: 1rem;
}

.partes-grupo:last-child {
  margin-bottom: 0;
}

.partes-polo {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.partes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.parte-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.parte-nome {
  font-size: 0.9rem;
}

/* Companhia aérea: destaque com a cor de acento (sem cor cravada). */
.parte-airline {
  border-color: var(--accent);
}

.parte-airline .parte-nome {
  font-weight: 600;
  color: var(--accent);
}

.chip-adv,
.chip-airline {
  font-size: 0.72rem;
}

.chip-airline {
  border-color: var(--accent);
  color: var(--accent);
}

/* Natureza da decisão: colegiada (turma/seção decide) × monocrática (relator).
   Cores próprias para distinguir de relance na lista de decisões. */
.chip-natureza {
  font-size: 0.72rem;
}

.natureza-colegiada {
  border-color: #2c5a6b;
  color: #7ecfe6;
}

.natureza-monocratica {
  border-color: #6b542c;
  color: #e6c67e;
}

:root[data-theme="light"] .natureza-colegiada {
  border-color: #4f97be;
  color: #135367;
}

:root[data-theme="light"] .natureza-monocratica {
  border-color: #c39a4f;
  color: #6a4e12;
}

/* Linha do tempo: decisões (com natureza) + marcos processuais, cronológica. */
.lt-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.lt-item {
  border-left: 2px solid var(--border);
  padding: 0.1rem 0 0.1rem 0.85rem;
}

.lt-decisao {
  border-left-color: var(--accent);
}

.lt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.lt-data {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.lt-titulo {
  font-weight: 600;
}

.lt-resumo {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.chip-marco {
  border-style: dashed;
  color: var(--text-muted);
  font-size: 0.72rem;
}

/* Faixa que separa a fase na corte superior da fase no tribunal de origem.
   A advogada reconhece a virada de olho; o cliente não — daí a marcação
   explícita na linha do tempo (pedido de 24/07). */
.lt-entrada {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.35rem 0;
  padding: 0.35rem 0.7rem;
  border-top: 1px dashed var(--accent);
  border-bottom: 1px dashed var(--accent);
}

.lt-entrada-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.lt-entrada-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Segunda (ou terceira) subida do mesmo processo à corte — item 5.1. Marcada
   com mais peso que a primeira faixa: é a informação que explica por que a
   mesma linha do tempo tem dois julgamentos separados por anos. */
.lt-entrada-ciclo {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  color: var(--serie-alerta);
  background: color-mix(in srgb, var(--serie-alerta) 14%, transparent);
}

/* Eventos que correram no tribunal de origem ficam com a régua apagada — é a
   "parte branca" de que a consultora fala (antes da subida). */
.lt-origem {
  border-left-style: dotted;
  border-left-color: var(--border);
}

/* Petição na linha do tempo unificada (evento tipo="peticao"). */
.chip-peticao {
  border-color: #5a3d8f;
  color: #b79ee6;
  font-size: 0.72rem;
}

:root[data-theme="light"] .chip-peticao {
  border-color: #7a5cc4;
  color: #5a3d8f;
}

.lt-integra {
  margin-top: 0.4rem;
}

/* Íntegra com parágrafos legíveis (limpeza só na exibição — regra nº 6, texto
   no banco intacto): coluna de leitura confortável em <p>, sem pre-wrap (as
   quebras agora são tags reais, não espaço em branco preservado). */
.ementa-leitura {
  max-width: 70ch;
  white-space: normal;
}

.ementa-leitura p {
  margin: 0 0 0.9rem;
}

.ementa-leitura p:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
   Panorama — painéis pedidos pela consultora (reuniões 02 e 05):
   fluxo mensal de entradas/encerramentos, barra por pilar quebrada em
   ativo/encerrado ("verde está ativo, azul está inativo") e histograma do score
   com a "luz acesa" a partir de 50. Sem biblioteca de gráfico: CSS puro.
   --------------------------------------------------------------------------- */

:root {
  --serie-entrada: #2f9e63;   /* verde  — entrou / em andamento */
  --serie-saida:   #4a7fd4;   /* azul   — encerrou / inativo */
  --serie-neutra:  #9aa0ab;   /* cinza  — sem situação apurada */
  --serie-alerta:  #d98218;   /* âmbar  — score ≥ 50 */
}
:root[data-theme="dark"] {
  --serie-entrada: #43b97a;
  --serie-saida:   #6a9bec;
  --serie-neutra:  #767d88;
  --serie-alerta:  #e39b3e;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.legenda-fluxo {
  display: flex;
  gap: 0.9rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.legenda-fluxo .lg::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 0.35rem;
  vertical-align: baseline;
}
.lg-entrada::before,
.lg-ativo::before      { background: var(--serie-entrada); }
.lg-saida::before,
.lg-encerrado::before  { background: var(--serie-saida); }

/* --- Gráfico de fluxo mensal --- */

.fluxo {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.fluxo-mes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 1 1 0;
  min-width: 44px;
}

/* Altura fixa no contêiner: as colunas usam height em % e precisam de uma
   referência concreta para o percentual significar alguma coisa. */
.fluxo-cols {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 130px;
  width: 100%;
}

.fluxo-col {
  display: block;
  width: 12px;
  border-radius: 3px 3px 0 0;
  /* min-height para o mês com 1 caso não sumir e parecer zero. */
  min-height: 2px;
  transition: filter 0.12s ease;
}
.fluxo-col:hover { filter: brightness(1.2); }
.fluxo-entrada { background: var(--serie-entrada); }
.fluxo-saida   { background: var(--serie-saida); }

.fluxo-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.fluxo-num {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.base-viva {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  color: var(--text);
}

/* Avisos de cobertura de dado — o gráfico não pode parecer completo estando
   pela metade (regra nº 7 aplicada à UI). */
.nota-cobertura {
  margin: 0.7rem 0 0;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--serie-alerta);
  background: color-mix(in srgb, var(--serie-alerta) 8%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.nota-escopo { margin-top: 1.2rem; }
.nota-faixa  { margin: 0.8rem 0 0; font-size: 0.8rem; }

/* --- Barra por pilar, empilhada em ativo/encerrado --- */

.bar-row-dupla { color: var(--text); }

.bar-track-empilhada {
  display: flex;
  gap: 2px;
  background: var(--bg);
  /* 16px (e não os 10px do .bar-track): altura mínima para o número caber
     DENTRO do segmento — apontamento 04/08, "deixar o número visível". */
  height: 16px;
  border-radius: 4px;
}

.bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  min-width: 3px;
  border-radius: 3px;
  transition: filter 0.12s ease;
}
.bar-seg:hover { filter: brightness(1.2); }

.seg-num {
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* Cinza claro do "sem situação apurada" não sustenta texto branco. */
.seg-indefinido .seg-num { color: var(--text); }
.seg-ativo       { background: var(--serie-entrada); }
.seg-encerrado   { background: var(--serie-saida); }
.seg-indefinido  { background: var(--serie-neutra); }

a.bar-num { color: var(--text-muted); }
a.bar-num:hover { color: var(--text); text-decoration: none; }

/* --- Histograma do score --- */

.faixa-zero   { background: var(--serie-neutra); }
.faixa-baixo  { background: var(--accent); }
.faixa-alerta { background: var(--serie-alerta); }
.faixa-maximo { background: var(--danger); }

.bar-row-alerta .bar-label { font-weight: 600; }
.marca-alerta { color: var(--serie-alerta); }

.chip-alerta {
  background: color-mix(in srgb, var(--serie-alerta) 18%, transparent);
  color: var(--serie-alerta);
  border: 1px solid color-mix(in srgb, var(--serie-alerta) 40%, transparent);
  white-space: nowrap;
}

.kpi-alerta .kpi-num { color: var(--serie-alerta); }

/* Checkbox de auditoria na barra de filtros da lista. */
.filtro-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Seletor de idioma — bandeiras, não rótulo textual: o cliente da IATA não lê
   português, então a palavra "Português" não o ajudaria a achar o botão. Mesma
   mecânica do seletor de tribunal (POST, estado no servidor/cookie). */

.lang-switch {
  display: inline-flex;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.lang-switch-btn {
  appearance: none;
  border: 0;
  background: var(--bg-elevated);
  /* A sigla (PT/EN) na cor do TEXTO do tema — preta no claro, clara no escuro.
     Sem esta linha o botão herdava a cor branca de `button` e a sigla sumia no
     fundo claro (Ajustes 4.1, 08/09/2026: "alterar a cor da fonte para preto no
     modo claro"). */
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  /* Idioma inativo mais apagado; o contorno abaixo confirma qual está ativo. */
  opacity: 0.6;
  transition: opacity 0.12s ease;
}

.lang-switch-btn + .lang-switch-btn {
  border-left: 1px solid var(--border);
}

.lang-switch-btn:hover {
  opacity: 0.9;
}

.lang-switch-btn.is-active {
  opacity: 1;
  background: var(--bg);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* "Casos em que atuamos" (migração 0012) — recorte INTERNO: só admin/analyst
   veem. Estrela âmbar para destacar sem competir com o alerta de score. */

.chip-atua,
.dot-atua {
  background: color-mix(in srgb, var(--serie-alerta) 20%, transparent);
  color: var(--serie-alerta);
  border: 1px solid color-mix(in srgb, var(--serie-alerta) 45%, transparent);
  font-weight: 600;
}

.kpi-atua {
  text-decoration: none;
  color: inherit;
  border: 1px dashed color-mix(in srgb, var(--serie-alerta) 45%, transparent);
}
.kpi-atua:hover { text-decoration: none; border-style: solid; }
.kpi-atua .kpi-num { color: var(--serie-alerta); }

.filtro-atua { color: var(--serie-alerta); font-weight: 600; }

.panel-atua .atua-form { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }

/* --- Inclusão manual de caso por número (item 5.1) ---
   Fica logo abaixo dos filtros da lista, discreta: é uma ação rara (o processo
   que a busca automática não achou), não o caminho normal de entrada do acervo. */

.incluir-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
}

.incluir-form input[type="text"] {
  min-width: 22rem;
  flex: 0 1 auto;
}

.nota-erro {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--text);
}

/* --- Validação em lote (/validacao) ---
   Reaproveita casos-table, tribunal-switch, chip, badge e dl.qa/.qa-trecho
   (evidência = mesmo estilo de trecho citado da decisão); só a coluna de
   marcação e o toggle de "ver respostas" precisam de ajuste próprio. */

table.casos-table td.col-marca {
  width: 2.2rem;
  text-align: center;
}

details summary {
  cursor: pointer;
  color: var(--accent);
}

/* --- Pertinência aérea do rótulo (core/domain/pertinencia.py) ---------------
   O chip ao lado do pilar e o "por quê" recolhido logo abaixo. As classes vêm
   do domínio (`Selo.css`), não do HTML: mudar o vocabulário de selos lá muda o
   estilo aqui, e nenhum template escreve o slug.

   Só tokens de tema + `color-mix`, como os chips de score: funciona em claro e
   escuro sem uma segunda tabela de cores. Os dois selos que NÃO vão para a fila
   ficam propositalmente quietos (o acervo é 91% deles — um chip berrante em
   1.929 casos vira ruído e treina a advogada a ignorar a linha inteira). Os três
   da fila usam a mesma cor de alerta do score, e o `sem_prova` é o mais discreto
   dos três: ele significa "não há material", nunca "não é aéreo". */

.selo-provado,
.selo-indiciado {
  color: var(--text-muted);
}

.selo-dividido,
.selo-contestado {
  background: color-mix(in srgb, var(--serie-alerta) 20%, transparent);
  color: var(--serie-alerta);
  border-color: color-mix(in srgb, var(--serie-alerta) 45%, transparent);
  font-weight: 600;
}

.selo-sem-prova {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--serie-alerta) 45%, transparent);
  color: var(--serie-alerta);
}

.pertinencia-sinais {
  margin-top: 0.55rem;
  font-size: 0.85rem;
}

.pertinencia-sinais > p {
  margin: 0.35rem 0 0.5rem;
  max-width: 62ch;
}

.sinais-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sinais-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}

.sinal-tier {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 11rem;
}

/* O trecho canônico que a regra de fato casou — é prova de casamento, não
   citação da peça (regra nº 6). Cortado no fim para não empurrar a página. */
.sinal-evidencia {
  color: var(--text-muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46ch;
}

/* ---------------------------------------------------------------------------
   Reunião de 08/09/2026 com a consultora (Ajustes 4.1).
   --------------------------------------------------------------------------- */

/* "Suspensão – Tema 1417": processo sobrestado à espera do STF. Âmbar como o
   alerta de score — é sinal de atenção, não de resultado. */
.chip-suspensao {
  margin-top: 0.2rem;
  color: var(--serie-alerta);
  border-color: color-mix(in srgb, var(--serie-alerta) 55%, transparent);
  background: color-mix(in srgb, var(--serie-alerta) 12%, transparent);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Sugestão da IA ainda não confirmada: tracejada como o "Validação pendente",
   para não ser lida como o juízo publicado. */
.chip-sugestao {
  margin-top: 0.2rem;
  border-style: dashed;
  color: var(--accent);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Partes no grid: a identificação do caso para a IATA. */
.col-partes {
  min-width: 11rem;
  max-width: 18rem;
  font-weight: 600;
}

/* Partes em destaque no topo do caso — "pode ser em azul, dentro de um
   quadrinho" (consultora). Nome completo, sem agravante/agravado. */
.partes-destaque {
  margin: 0.6rem 0 0.2rem;
  padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
  color: var(--accent);
  font-weight: 700;
  line-height: 1.45;
}

.partes-destaque .parte-linha {
  display: block;
}

.partes-destaque .parte-x {
  color: var(--text-muted);
  font-weight: 400;
}

/* Quadro "Dispositivos apontados como violados" (resumo do recurso). */
.dispositivos-lista {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.dispositivos-lista li {
  margin-bottom: 0.35rem;
}

.dispositivos-lista .dispositivo {
  font-weight: 700;
}

/* Sugestão de favorabilidade com o botão de confirmar ao lado. */
.sugestao-favorabilidade {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.3rem 0 0.8rem;
}

.sugestao-favorabilidade form {
  display: inline;
  margin: 0;
}