/* ---------------------------------------------------------------------------
   Dexplorer — Material Design 3
   Tokens do sistema Material (cor, forma, elevação, tipografia) em vez de
   valores soltos: mudar a marca é trocar as variáveis do :root, não caçar hex
   pelo arquivo. Os nomes de classe (.result, .carimbo, .excerpt) são os mesmos
   de antes de propósito — scripts/build.mjs e templates/search.js geram esse
   HTML, e renomeá-los quebraria os dois.
--------------------------------------------------------------------------- */

/* Tokens (:root) movidos para tokens.css — carregado ANTES deste arquivo. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Dois fundos sobrepostos: a grade de pontinhos (por cima, rolando com o
     conteúdo) e, por baixo, um degradê suave de Tiffany (embaixo) para branco
     (em cima). O degradê é fixo na viewport, então o banho de cor fica sempre
     na base da tela, independente da rolagem. */
  background-color: var(--md-surface);
  background-image:
    radial-gradient(circle, rgba(10, 186, 181, 0.18) 1.1px, transparent 1.1px),
    linear-gradient(to top, rgba(10, 186, 181, 0.2), transparent 52%);
  background-size: 24px 24px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-attachment: scroll, fixed;
  color: var(--md-on-surface);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

a { color: var(--md-primary); text-underline-offset: 3px; }

/* Foco visível é requisito de acessibilidade, não enfeite: quem navega por
   teclado precisa saber onde está. */
:focus-visible {
  outline: 3px solid var(--md-primary);
  outline-offset: 2px;
  border-radius: var(--md-shape-xs);
}

.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;
}

/* --- Destaque dos termos encontrados (o <mark> vem do Pagefind) ----------- */
mark {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  padding: 0.05em 0.2em;
  border-radius: var(--md-shape-xs);
  font-weight: 500;
}

/* --- Cabeçalho ------------------------------------------------------------ */
.masthead {
  padding: 3.5rem 0 2rem;
  text-align: center;
}

/* label-large do Material */
.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

/* Título-herói SUSi: grande, centralizado (o .masthead já centraliza), Tiffany. */
.masthead h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.75rem, 9vw, 6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tiffany);
}

/* Estrelinha de IA ao lado do nome SUSi (logo). Escala com o texto (em) e senta
   como um sobrescrito; cor do Tiffany vivo, para casar com o nome. */
.ai-star-mark {
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.08em;
  fill: var(--tiffany);
  vertical-align: 0.5em;
}

/* body-large */
.lede {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--md-on-surface-variant);
}

/* --- Painel de busca ------------------------------------------------------ */
.search-panel { margin-bottom: 2.5rem; }

.field { position: relative; }

/* Campo de busca COMPARTILHADO (busca e Radar): pill flat e limpo, sem borda,
   com anel de foco Tiffany. Tamanho e lupa ficam por conta de cada instância. */
.campo-busca {
  width: 100%;
  font-family: inherit;
  color: var(--md-on-surface);
  background: var(--md-surface-container-high);
  border: none;
  border-radius: var(--md-shape-full);
  appearance: none;
  transition: background-color var(--md-dur) var(--md-ease),
              box-shadow var(--md-dur) var(--md-ease);
}
.campo-busca::placeholder { color: var(--md-on-surface-variant); opacity: 0.75; }
.campo-busca:hover { background: var(--md-surface-container); }
.campo-busca:focus { outline: none; box-shadow: inset 0 0 0 2px var(--tiffany); }
/* Esconde o "x" nativo do type=search, pra ficar limpo como o chat. */
.campo-busca::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

/* Busca principal (hero): mais alta e com espaço à esquerda para a lupa. */
#q { height: 3.5rem; padding: 0 1.5rem 0 3.25rem; font-size: 1rem; }

/* Lupa desenhada em CSS puro — evita mais uma requisição de rede só por um ícone. */
.field::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  background: var(--md-on-surface-variant);
  -webkit-mask: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 16a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13Zm0-2a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm11 6.09L14.4 14l1.42-1.41 6.09 6.09-1.41 1.41Z"/></svg>');
  mask: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 16a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13Zm0-2a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm11 6.09L14.4 14l1.42-1.41 6.09 6.09-1.41 1.41Z"/></svg>');
  pointer-events: none;
}

/* Estados do campo (placeholder/hover/foco/limpar) ficam em .campo-busca. */

/* --- Filtros -------------------------------------------------------------- */
/* Filtros: pills multi-seleção, alinhados à esquerda. Cada grupo é uma linha
   (rótulo fixo à esquerda + pills que quebram para a próxima linha). */
.controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.25rem;
  padding: 0 0.25rem;
}

.filtro {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
}

.filtro-rotulo {
  flex: none;
  width: 3rem;
  padding-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-high);
  border: none;
  border-radius: var(--md-shape-full);
  cursor: pointer;
  transition: background-color var(--md-dur) var(--md-ease),
              color var(--md-dur) var(--md-ease);
}
.pill:hover { background: var(--md-surface-container); }
.pill.ativo { color: var(--md-on-primary); background: var(--md-ia); }
.pill-n { margin-left: 0.4rem; font-size: 0.85em; opacity: 0.6; }
.pill.ativo .pill-n { opacity: 0.85; }
/* Variante violeta da pill — as "bandeiras" (temas do DF) no Radar. */
.pill--tema.ativo { color: #fff; background: var(--violeta); }

/* Rótulo em caixa-alta compartilhado (grupos de filtro em ambas as páginas). */
.rotulo {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

/* Bloco colapsável — PADRÃO ÚNICO (estilo do Radar): cartão com marcador ▸ que
   gira ao abrir. Usado no filtro "Tipo" da busca e no "Fontes e temas" do Radar. */
.collapse {
  width: 100%;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container-low);
}
.collapse > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.6rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--md-primary);
}
.collapse > summary::-webkit-details-marker { display: none; }
.collapse > summary::before {
  content: "\25B8";
  margin-right: 0.5rem;
  display: inline-block;
  transition: transform var(--md-dur) var(--md-ease);
}
.collapse[open] > summary::before { transform: rotate(90deg); }
.collapse-corpo { padding: 0 0.95rem 0.95rem; display: flex; flex-direction: column; gap: 1rem; }
.collapse-grupo { display: flex; flex-direction: column; gap: 0.5rem; }

/* --- Status e avisos ------------------------------------------------------ */
.status {
  margin: 1.25rem 0.25rem 0;
  min-height: 1.25rem;
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
}

.note {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  border-radius: var(--md-shape-md);
}

/* --- Resposta redigida pela IA -------------------------------------------- */
/* Cor da IA (roxo), não a primária: o cidadão tem que enxergar em 1 segundo que
   este bloco foi ESCRITO por uma máquina, e que os cards abaixo são documentos
   de verdade. Se os dois tivessem a mesma cor, a distinção sumiria. */
.answer {
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, var(--md-ia-container), var(--md-surface-container-low));
  border: 1px solid color-mix(in srgb, var(--md-ia) 22%, transparent);
  border-radius: var(--md-shape-lg);
}

.answer-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-ia);
}
.answer-head svg { width: 1rem; height: 1rem; fill: currentColor; flex: none; }

.answer-text {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--md-on-surface);
}

/* Citação [1] no meio da frase: pequena, clicável, leva ao documento. */
.cite, .cite-n {
  display: inline-grid;
  place-items: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  color: var(--md-on-primary);
  background: var(--md-ia);
  border-radius: var(--md-shape-xs);
  text-decoration: none;
  vertical-align: 0.35em;
}
.cite:hover { background: var(--md-on-primary-container); }

.answer-sources {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--md-ia) 18%, transparent);
}
.answer-sources a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
  text-decoration: none;
}
.answer-sources a:hover { color: var(--md-ia); text-decoration: underline; }
.answer-sources .cite-n { vertical-align: 0; flex: none; }

.answer-disclaimer {
  margin: 0.85rem 0 0;
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

/* --- Resultados ----------------------------------------------------------- */
.section-title {
  margin: 0 0 1rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.results {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Base de cartão COMPARTILHADA (busca e Radar): fundo, forma e transição. Cada
   um acrescenta o padding e o hover próprio (o resultado usa elevação; a linha
   do tempo usa borda + acento de tema). */
.card {
  background: var(--md-surface-container-low);
  border-radius: var(--md-shape-md);
  transition: background-color var(--md-dur) var(--md-ease),
              box-shadow var(--md-dur) var(--md-ease),
              border-color var(--md-dur) var(--md-ease);
}

/* Card do Material: sem borda, elevação sutil que cresce no hover. */
.result {
  position: relative; /* âncora para o link esticado (card todo clicável) */
  padding: 1.25rem;
}
.result:hover {
  background: var(--md-surface-container);
  box-shadow: var(--md-elev-1);
}

/* title-medium */
.result h3 {
  margin: 0.5rem 0 0.4rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}
.result h3 a { color: var(--md-on-surface); text-decoration: none; }
.result h3 a:hover { color: var(--md-primary); text-decoration: underline; }
/* Link esticado: a âncora do título cobre o card inteiro, então clicar em
   qualquer lugar do resultado abre o documento. */
.result h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--md-shape-md);
}

.excerpt {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--md-on-surface-variant);
}

/* --- Metadados do resultado ---------------------------------------------- */
.carimbo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--md-on-surface-variant);
}

/* Chip do Material */
.carimbo-tipo {
  padding: 0.2rem 0.6rem;
  font-weight: 500;
  color: var(--md-on-primary-container);
  background: var(--md-primary-container);
  border-radius: var(--md-shape-sm);
}

.carimbo-num, .carimbo-data { letter-spacing: 0.02em; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: var(--md-shape-full);
}
.badge svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }

.badge-exata {
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-high);
}

/* Mesma estrela e mesma cor do botão: o cidadão precisa ligar uma coisa à outra
   sem que ninguém explique. */
.badge-ia {
  color: var(--md-ia);
  background: var(--md-ia-container);
}

.empty {
  margin: 2rem 0 3rem;
  padding: 2rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-low);
  border-radius: var(--md-shape-lg);
}

/* --- Página de documento -------------------------------------------------- */
/* Top app bar do Material */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
  padding: 0 1.5rem;
  background: var(--md-surface-container);
  box-shadow: var(--md-elev-1);
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-primary);
  text-decoration: none;
  border-radius: var(--md-shape-full);
  transition: background-color var(--md-dur) var(--md-ease);
}
.back:hover { background: var(--md-primary-container); }

.site-mark {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--tiffany);
}

.doc {
  max-width: 45rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.doc-header {
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--md-outline-variant);
}

/* headline-medium */
.doc-header h1 {
  margin: 1rem 0;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.doc-resumo {
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--md-on-surface-variant);
}
.doc-resumo:empty { display: none; }

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
}
.doc-meta:empty { display: none; }

.doc-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.doc-tags:empty { display: none; }

/* As tags do documento usam a pill compartilhada (.pill) — ver acima. */

.doc-body {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.doc-body h2, .doc-body h3 {
  margin: 2.25rem 0 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}
.doc-body h2 { font-size: 1.5rem; }
.doc-body h3 { font-size: 1.2rem; }

.doc-body blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-low);
  border-left: 4px solid var(--md-primary);
  border-radius: 0 var(--md-shape-sm) var(--md-shape-sm) 0;
}

.doc-body ul, .doc-body ol { padding-left: 1.4em; }
.doc-body li { margin: 0.35em 0; }

/* --- Rodapé --------------------------------------------------------------- */
.site-footer {
  padding: 2rem 1.5rem 3rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
  border-top: 1px solid var(--md-outline-variant);
}
.site-footer p { margin: 0; }
/* O "sair" mora ao lado do "config", com o mesmo peso visual: os dois sao
   controles de bastidor, nenhum dos dois disputa atencao com a busca. */
.sair-form { display: inline; }

/* --- Modo config (edição dos textos fixos) — ver edit.js -------------------- */
/* Botão discreto no rodapé: quase invisível até o hover. */
.config-toggle {
  margin-top: 0.85rem;
  padding: 0.2rem 0.5rem;
  font: inherit;
  font-size: 0.7rem;
  color: var(--md-on-surface-variant);
  background: none;
  border: none;
  border-radius: var(--md-shape-full);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity var(--md-dur) var(--md-ease);
}
.config-toggle:hover { opacity: 1; }
.config-toggle[aria-pressed="true"] { opacity: 1; color: var(--md-ia); font-weight: 500; }

/* Campos editáveis no modo edição: contorno tracejado + cor de status ao salvar. */
[data-edit][contenteditable="true"] {
  outline: 2px dashed var(--md-ia);
  outline-offset: 3px;
  border-radius: 4px;
  cursor: text;
}
[data-edit][data-edit-state="salvando"] { outline-color: var(--md-on-surface-variant); }
[data-edit][data-edit-state="salvo"] { outline-color: #188038; }
[data-edit][data-edit-state="erro"] { outline-color: #d93025; }

/* --- Telas estreitas ------------------------------------------------------ */
@media (max-width: 600px) {
  /* No celular o título e o texto ficam CENTRALIZADOS (como no desktop): herda o
     text-align:center da .masthead e a .lede mantém margin:0 auto. */
  .masthead { padding: 2.5rem 0 1.5rem; }
  .controls { gap: 0.5rem; }
  .site-header { padding: 0 1rem; }
}

/* --- SUSi (chatbot) ------------------------------------------------------- */
/* O botão que abre a SUSi é um botão redondo do dock de ferramentas (canto
   superior esquerdo, junto com Painel e Radar) — ver .tool-fab--susi em
   painel.css. O painel desliza a partir da ESQUERDA, do mesmo lado dos botões;
   ao abrir, o dock desliza para a direita e fica encostado na borda do painel. */
.chat-panel {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: var(--chat-w);
  height: 100dvh;
  /* Vidro fosco Tiffany: vidro translúcido tingido (mais "ver através" que o
     branco a 78% de antes, que sobre fundo claro ficava imperceptível) + blur
     forte com saturate, para o pouco de cor atrás aparecer mais. As mensagens
     têm fundo próprio, então continuam legíveis. */
  background: color-mix(in srgb, var(--tiffany-container) 60%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--md-elev-3);
  transform: translateX(-105%);
  transition: transform 240ms var(--md-ease);
}
.chat-panel.aberto { transform: translateX(0); }

/* O header INTEIRO é um pill, com degradê do Tiffany (esquerda, onde fica o nome)
   para o ciano (direita). O lado Tiffany fundo mantém o "SUSi" legível. */
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.85rem 0.85rem 0.4rem;
  padding: 0.4rem 0.5rem 0.4rem 1.15rem;
  background: linear-gradient(to right, var(--md-ia), var(--ciano));
  color: var(--md-on-primary);
  border-radius: var(--md-shape-full);
}
.chat-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
}
.chat-title svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.chat-close {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--md-on-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.1rem 0.55rem;
  border-radius: var(--md-shape-full);
}
.chat-close:hover { background: rgba(255, 255, 255, 0.2); }

/* Transparente, para o vidro fosco do painel aparecer (sem fundo/borda opacos). */
.chat-disclaimer {
  margin: 0;
  padding: 0.35rem 1.25rem 0.7rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--md-on-surface-variant);
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.chat-msg {
  max-width: 88%;
  padding: 0.7rem 0.95rem;
  font-size: 0.9rem;
  line-height: 1.5;
  border-radius: var(--md-shape-lg);
}
.chat-msg-user {
  align-self: flex-end;
  color: var(--md-on-primary);
  background: var(--md-primary);
  border-bottom-right-radius: var(--md-shape-xs);
  white-space: pre-wrap;
}
.chat-msg-ia {
  align-self: flex-start;
  color: var(--md-on-surface);
  background: var(--md-surface-container);
  border-bottom-left-radius: var(--md-shape-xs);
}
.chat-msg-erro {
  align-self: flex-start;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-low);
  border: 1px dashed var(--md-outline-variant);
  font-size: 0.85rem;
}

.chat-sources {
  margin: 0.65rem 0 0;
  padding: 0.65rem 0 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--md-ia) 18%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.chat-sources a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--md-on-surface-variant);
  text-decoration: none;
}
.chat-sources a:hover { color: var(--md-ia); text-decoration: underline; }
.chat-sources .cite-n { flex: none; vertical-align: 0; }

/* "Digitando…" enquanto o primeiro token não chega */
.chat-typing { display: inline-flex; gap: 0.25rem; }
.chat-typing i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--md-on-surface-variant);
  animation: chat-bounce 1.2s infinite ease-in-out;
}
.chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-bounce { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--md-outline-variant);
  /* sem fundo opaco — deixa o vidro fosco do painel aparecer */
}
.chat-form input {
  flex: 1;
  height: 2.75rem;
  padding: 0 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--md-on-surface);
  background: var(--md-surface-container-high);
  border: none;
  border-radius: var(--md-shape-full);
}
.chat-form input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--md-ia); }
.chat-form input:disabled { opacity: 0.6; }
.chat-send {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--md-on-primary);
  background: var(--md-ia);
  border: none;
  border-radius: var(--md-shape-full);
  cursor: pointer;
  flex: none;
}
.chat-send svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.chat-send:hover { background: var(--md-on-primary-container); }

/* Respeita quem pediu menos animação no sistema. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   Tabelas de dados (camada de dados — ver scripts/dados.mjs)
   Renderizadas a partir dos registros do frontmatter, não escritas à mão.
   Rolam horizontalmente no celular em vez de espremer a coluna de texto.
   --------------------------------------------------------------------------- */
.tabela-dados {
  overflow-x: auto;
  margin: 1.25rem 0;
  border: 1px solid var(--md-outline-variant);
  border-radius: 12px;
  background: var(--md-surface-container-low);
}
.tabela-dados table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.94rem;
}
.tabela-dados th,
.tabela-dados td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--md-outline-variant);
  vertical-align: top;
}
.tabela-dados thead th {
  font-weight: 600;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.tabela-dados tbody tr:last-child td { border-bottom: 0; }
.tabela-dados tbody tr:hover { background: var(--md-surface-container); }

/* Números alinhados à direita e tabulares, para as colunas baterem na vertical. */
.tabela-dados .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Na impressão (rota de PDF), a tabela não pode rolar nem quebrar no meio. */
@media print {
  .tabela-dados { overflow: visible; border-color: #999; break-inside: avoid; }
  .tabela-dados thead th { position: static; background: transparent; }
}

/* Barra de ações da tabela (injetada por templates/dados.js). */
.tabela-acoes {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  flex-wrap: wrap;
}
.tabela-contagem {
  font-size: 0.8rem;
  color: var(--md-on-surface-variant);
  margin-right: auto;
  padding-left: 0.25rem;
}
.tabela-btn {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: 999px;
  background: var(--md-surface);
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tabela-btn:hover:not(:disabled) {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-color: transparent;
}
.tabela-btn:disabled { opacity: 0.65; cursor: default; }
.tabela-btn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

/* Cabeçalho ordenável: indica a direção com seta, e só quando ativo. */
.tabela-dados thead th[role="button"] { cursor: pointer; user-select: none; }
.tabela-dados thead th[role="button"]:hover { color: var(--md-on-surface); }
.tabela-dados thead th[data-ordem="asc"]::after { content: " ▲"; font-size: 0.7em; }
.tabela-dados thead th[data-ordem="desc"]::after { content: " ▼"; font-size: 0.7em; }
.tabela-dados thead th:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -2px; }

/* Na impressão, os controles somem — sobra só a tabela. */
@media print {
  .tabela-acoes { display: none; }
  .tabela-dados thead th::after { content: ""; }
}

/* Gráfico SVG (templates/grafico.js) --------------------------------------- */
.grafico-wrap {
  margin: 0;
  padding: 0.9rem 0.6rem 0.6rem;
  border-top: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
}
.grafico { width: 100%; height: auto; display: block; }
.grafico .g-rotulo {
  font-size: 12.5px;
  fill: var(--md-on-surface-variant);
}
.grafico .g-valor {
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--md-on-surface);
  font-variant-numeric: tabular-nums;
}
.grafico .g-legenda-txt { font-size: 11.5px; fill: var(--md-on-surface-variant); }
.grafico .g-linha:hover .g-barra { opacity: 0.82; }

/* Paleta das séries — cores da marca, com contraste suficiente entre si. */
.grafico .g-barra[data-serie="0"] { fill: var(--tiffany); }
.grafico .g-barra[data-serie="1"] { fill: var(--ciano); }
.grafico .g-barra[data-serie="2"] { fill: var(--violeta); }
.grafico .g-barra[data-serie="3"] { fill: var(--md-primary); }
.grafico .g-barra[data-serie="4"] { fill: var(--md-on-surface-variant); }
.grafico .g-barra[data-serie="5"] { fill: var(--md-outline); }

.grafico-wrap figcaption {
  font-size: 0.78rem;
  color: var(--md-on-surface-variant);
  text-align: center;
  margin-top: 0.5rem;
}

/* Botão de impressão do documento. */
.doc-imprimir {
  font: inherit;
  font-size: 0.82rem;
  margin-top: 2rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: 999px;
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  cursor: pointer;
}
.doc-imprimir:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.doc-imprimir:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

/* --- Impressão: a rota de PDF -------------------------------------------- */
@page { margin: 1.6cm 1.4cm; }

@media print {
  /* Fora tudo que é navegação, ferramenta ou decoração. */
  .site-header, .site-footer, .masthead, .busca, .filtros,
  .tool-dock, .tool-fab, #chat-fab, #chat-panel, .doc-imprimir,
  .voltar, nav { display: none !important; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
  }
  main, .doc, .doc-body { max-width: none; margin: 0; padding: 0; }

  /* Título e metadados do documento abrem a folha. */
  .doc h1 { font-size: 17pt; margin: 0 0 0.3cm; }
  .doc-meta, .meta-item { color: #444 !important; font-size: 9pt; }

  h2, h3 { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* Tabelas e gráficos não podem partir no meio da folha. */
  .tabela-dados, .grafico-wrap, figure, table { break-inside: avoid; page-break-inside: avoid; }
  .tabela-dados { border-color: #bbb; background: transparent; }
  .tabela-dados th, .tabela-dados td { border-color: #ddd; }
  .tabela-dados thead th { background: #f2f2f2 !important; color: #000 !important; }
  .tabela-dados tbody tr:hover { background: transparent; }

  /* Links: mostra o destino, já que no papel não dá para clicar.
     Só os externos — os internos poluiriam com /docs/... em cada linha. */
  .doc-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #555;
    word-break: break-all;
  }
}

/* Blocos de relatório gerados pela SUSi ------------------------------------ */
.compilar-wrap { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.compilar-wrap h1 { font-size: 1.6rem; margin-bottom: 0.3rem; }
.compilar-wrap .lede { color: var(--md-on-surface-variant); margin-bottom: 1.5rem; }
.compilar-form { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; }
.compilar-form input {
  flex: 1; font: inherit; padding: 0.7rem 1rem;
  border: 1px solid var(--md-outline); border-radius: 999px;
  background: var(--md-surface-container-low); color: var(--md-on-surface);
}
.compilar-form input:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 1px; }
.compilar-btn {
  font: inherit; font-weight: 500; padding: 0.7rem 1.4rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--md-primary); color: var(--md-on-primary);
}
.compilar-exemplos { font-size: 0.82rem; color: var(--md-on-surface-variant); margin-bottom: 2rem; }
.exemplo {
  font: inherit; font-size: 0.78rem; margin: 0.2rem 0.2rem 0 0;
  padding: 0.25rem 0.7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container); color: var(--md-on-surface-variant);
}
.exemplo:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.rel h2 { font-size: 1.2rem; margin-bottom: 0.2rem; }
.rel-explica { color: var(--md-on-surface-variant); margin-bottom: 1rem; }
.rel-contagem { font-size: 0.8rem; color: var(--md-on-surface-variant); margin-top: 0.5rem; }
.rel-fontes { margin-top: 1.6rem; }
.rel-fontes h3 { font-size: 0.9rem; margin-bottom: 0.4rem; }
.rel-fontes ul { margin: 0; padding-left: 1.2rem; font-size: 0.86rem; }
.rel-aviso {
  margin-top: 1.4rem; padding: 0.7rem 0.9rem; font-size: 0.8rem;
  border-left: 3px solid var(--md-ia, var(--tiffany));
  background: var(--md-surface-container-low); color: var(--md-on-surface-variant);
}
.rel-estado { color: var(--md-on-surface-variant); padding: 1.5rem 0; }
.rel-estado.erro { color: #b3261e; }

/* Nota de procedência do dado. Fica DENTRO do bloco da tabela, para acompanhar
   o dado quando alguém copia só a tabela. */
.tabela-proc {
  margin: 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container);
  border-top: 1px solid var(--md-outline-variant);
}
.tabela-proc strong { color: var(--md-on-surface); }
@media print { .tabela-proc { background: transparent; border-color: #ddd; } }

/* Aviso de procedência no compositor — mais forte que a nota da tabela, porque
   num agregado a origem do dado desaparece dentro da soma. */
.rel-proc {
  margin-top: 1.2rem; padding: 0.7rem 0.9rem; font-size: 0.82rem;
  border-left: 3px solid #b3261e;
  background: var(--md-surface-container); color: var(--md-on-surface-variant);
}
.rel-proc strong { color: var(--md-on-surface); }

/* Artefato dentro do balão do chat: a SUSi respondendo com tabela em vez de prosa. */
.chat-artefato { max-width: 100% !important; }
.chat-artefato .rel--compacto h3 { font-size: 0.95rem; margin: 0 0 0.3rem; }
.chat-artefato .rel--compacto h4 { font-size: 0.8rem; margin: 0 0 0.25rem; }
.chat-artefato .rel-explica { font-size: 0.84rem; margin-bottom: 0.6rem; }
.chat-artefato .tabela-dados { font-size: 0.86rem; margin: 0.6rem 0; }
.chat-artefato .rel-contagem,
.chat-artefato .rel-fontes { font-size: 0.76rem; }
.chat-artefato .rel-fontes ul { padding-left: 1rem; }
.chat-artefato .rel-aviso,
.chat-artefato .rel-proc { font-size: 0.75rem; padding: 0.5rem 0.7rem; }
.chat-artefato-pe {
  font-size: 0.76rem; margin: 0.7rem 0 0;
  color: var(--md-on-surface-variant);
}

.rel-ampliado {
  font-size: 0.8rem; margin: 0 0 0.7rem; padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--md-outline);
  background: var(--md-surface-container-low); color: var(--md-on-surface-variant);
}

/* Todos os filtros descartados: o resultado pode não ter relação com o pedido. */
.rel-ampliado--total { border-left-color: #b3261e; }

/* Relatório em texto gerado pela SUSi. */
.rel--documento .doc-gerado { line-height: 1.6; }
.rel--documento .doc-gerado h3 { font-size: 1.05rem; margin: 0.2rem 0 0.6rem; }
.rel--documento .doc-gerado h4 { font-size: 0.92rem; margin: 1.1rem 0 0.4rem; color: var(--md-on-surface); }
.rel--documento .doc-gerado p { margin: 0 0 0.7rem; }
.rel--documento .doc-gerado ul,
.rel--documento .doc-gerado ol { margin: 0 0 0.8rem; padding-left: 1.3rem; }
.rel--documento .doc-gerado li { margin-bottom: 0.25rem; }
.rel--documento .tabela-acoes { border: 1px solid var(--md-outline-variant); border-radius: 12px; margin-bottom: 1rem; }

/* Tabela ou gráfico anexado ao relatório depois ("adicione ao dossiê"). A
   regra acima separa do texto sem parecer outro artefato colado: continua
   dentro do documento, e é assim que sai no PDF. */
.doc-anexo { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--md-outline-variant); }
.doc-anexo > h2 { font-size: 1rem; margin: 0 0 0.7rem; color: var(--md-on-surface); }
.doc-anexo .rel { margin: 0; }

/* --- Modal de pré-visualização de artefato (templates/modal.js) ------------
   Empilhamento 75: acima dos modais do Painel/Radar (70), abaixo do dock (80),
   que é deliberadamente o topo. */
.modal-artefato { position: fixed; inset: 0; z-index: 75; display: flex;
  align-items: center; justify-content: center; padding: 1.5rem; }
.ma-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.ma-caixa {
  position: relative; display: flex; flex-direction: column;
  width: min(880px, 100%); max-height: min(86vh, 900px);
  background: var(--md-surface); color: var(--md-on-surface);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden;
}
.ma-caixa:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.ma-topo { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.2rem .8rem;
  border-bottom: 1px solid var(--md-outline-variant); }
.ma-topo h2 { font-size: 1.02rem; margin: 0; }
.ma-sub { margin: .25rem 0 0; font-size: .78rem; color: var(--md-on-surface-variant); }
.ma-fechar { margin-left: auto; font-size: 1.6rem; line-height: 1; border: 0; cursor: pointer;
  background: transparent; color: var(--md-on-surface-variant); padding: 0 .3rem; }
.ma-fechar:hover { color: var(--md-on-surface); }
.ma-corpo { overflow: auto; padding: 1rem 1.2rem; flex: 1; }
.ma-pre {
  margin: 0; white-space: pre; overflow-x: auto; font-size: .8rem; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant);
  border-radius: 10px; padding: .9rem 1rem; color: var(--md-on-surface);
}
.ma-previa-pagina { background: #fff; color: #111; padding: 1.6rem 1.8rem;
  border: 1px solid var(--md-outline-variant); border-radius: 10px; line-height: 1.55; }
.ma-previa-pagina .tabela-acoes { display: none; }
.ma-previa-titulo { font-size: 1.15rem; margin: 0 0 1rem; }
.ma-acoes { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap;
  padding: .8rem 1.2rem; border-top: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low); }
.ma-btn { font: inherit; font-size: .82rem; padding: .45rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--md-outline-variant); background: var(--md-surface); color: var(--md-on-surface-variant); }
.ma-btn:hover:not(:disabled) { background: var(--md-surface-container); color: var(--md-on-surface); }
.ma-btn--primaria { background: var(--md-primary); color: var(--md-on-primary); border-color: transparent; }
.ma-btn--primaria:hover:not(:disabled) { filter: brightness(1.08); background: var(--md-primary); color: var(--md-on-primary); }
.ma-btn:disabled { opacity: .65; cursor: default; }
.ma-btn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
body.modal-artefato-aberto { overflow: hidden; }
@media (max-width: 620px) { .modal-artefato { padding: .6rem; } .ma-caixa { max-height: 92vh; } }

/* Abas do modal de artefato. */
.ma-abas { display: flex; gap: .25rem; padding: .5rem 1.2rem 0;
  border-bottom: 1px solid var(--md-outline-variant); background: var(--md-surface-container-low); }
.ma-aba { font: inherit; font-size: .8rem; padding: .45rem .9rem; cursor: pointer;
  border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0;
  background: transparent; color: var(--md-on-surface-variant); position: relative; top: 1px; }
.ma-aba:hover { color: var(--md-on-surface); }
.ma-aba.ativa { background: var(--md-surface); color: var(--md-on-surface);
  border-color: var(--md-outline-variant); font-weight: 500; }
.ma-aba:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -2px; }

/* Grade de planilha: leitura igual à de um editor de planilhas. */
.planilha-grade { overflow: auto; max-height: 60vh;
  border: 1px solid var(--md-outline-variant); border-radius: 10px; background: var(--md-surface); }
.planilha-grade table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .82rem; }
.planilha-grade th, .planilha-grade td {
  border-right: 1px solid var(--md-outline-variant);
  border-bottom: 1px solid var(--md-outline-variant);
  padding: .38rem .6rem; text-align: left; white-space: nowrap; }
.planilha-grade thead th { position: sticky; background: var(--md-surface-container);
  color: var(--md-on-surface-variant); font-weight: 600; z-index: 2; }
.planilha-grade thead tr:first-child th { top: 0; }
.planilha-grade thead tr:nth-child(2) th { top: 26px; }
.planilha-grade .pg-letra { text-align: center; font-weight: 500; font-size: .72rem;
  color: var(--md-outline); letter-spacing: .04em; }
.planilha-grade .pg-n, .planilha-grade .pg-canto {
  position: sticky; left: 0; z-index: 3; width: 2.6rem; text-align: center;
  background: var(--md-surface-container); color: var(--md-outline);
  font-size: .72rem; font-weight: 500; }
.planilha-grade thead .pg-canto, .planilha-grade thead .pg-n { z-index: 4; }
.planilha-grade tbody td { background: var(--md-surface); }
.planilha-grade tbody tr:nth-child(even) td { background: var(--md-surface-container-low); }
.planilha-grade tbody tr:hover td { background: var(--md-primary-container); }
.planilha-grade td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Cifra que a SUSi escreveu e não foi localizada nos documentos recuperados. */
.chat-sem-lastro {
  margin: .6rem 0 0; padding: .5rem .7rem; font-size: .78rem; line-height: 1.45;
  border-left: 3px solid #b3261e; border-radius: 0 6px 6px 0;
  background: var(--md-surface-container); color: var(--md-on-surface-variant);
}
.chat-sem-lastro strong { color: var(--md-on-surface); }