/* ==========================================================================
   Assistente de Julgamento de Recursos de Multas — Detran-RJ
   Protótipo de demonstração. Dados fictícios.
   ========================================================================== */

/* --- Tokens de marca (paleta institucional Detran-RJ) --------------------- */
:root {
  --detran-azul: #004F8A;
  --detran-azul-escuro: #243263;
  --detran-azul-acao: #155BCB;
  --detran-verde: #24D699;
  --cinza-fundo: #F4F6FA;
  --cinza-borda: #E4E8F0;
  --texto: #212529;
  --branco: #FFFFFF;

  /* Cores funcionais de urgência — não são cores de marca */
  --risco-critico: #C62828;
  --risco-alto: #EF6C00;
  --risco-medio: #F9A825;
  --risco-baixo: #2E7D32;

  /* Derivados de uso interno */
  --texto-secundario: #5A6169;
  --texto-terciario: #7E868F;
  --cinza-linha: #EFF2F7;
  /* Superfície tingida de azul, usada no lugar de bordas duras. */
  --tinta-azul: #EEF3FC;

  /* Geometria: raios generosos e sombras em duas camadas, no lugar do
     contorno de 1px em tudo. */
  --raio-xs: 6px;
  --raio: 10px;
  --raio-lg: 16px;
  --raio-pill: 999px;
  --sombra: 0 1px 2px rgba(23, 32, 66, .04), 0 2px 6px rgba(23, 32, 66, .05);
  --sombra-md: 0 2px 6px rgba(23, 32, 66, .05), 0 12px 28px rgba(23, 32, 66, .08);
  --anima: .16s cubic-bezier(.4, 0, .2, 1);

  /* Assinatura do fornecedor */
  --widelabs-azul: #1A3CFA;

  /* Azul do gov.br (blue-warm-vivid-70 do Design System gov.br) */
  --govbr-azul: #1351B4;

  /* Altura da barra superior e da navegação, remedidas em js/app.js quando a
     janela muda. Amarram a posição e a altura do copiloto ao topo fixo. */
  --altura-topbar: 60px;
  --altura-topo: 104px;

  /* Escala tipográfica — quatro tamanhos */
  --t-xs: 12px;
  --t-sm: 13px;
  --t-md: 15px;
  --t-lg: 20px;

  color-scheme: light;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cinza-fundo);
  color: var(--texto);
  font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: var(--t-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--detran-azul-acao); }

/* --- Tela de login -------------------------------------------------------- */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: linear-gradient(140deg, var(--detran-azul-escuro) 0%, var(--detran-azul) 55%, #0A6FB4 100%);
}
.login-caixa { width: 100%; max-width: 420px; }
.login-marca { display: flex; justify-content: center; margin-bottom: 28px; }
.login-marca img { height: 42px; width: auto; display: block; }
.login-cartao {
  background: var(--branco);
  border-radius: var(--raio-lg);
  padding: 32px 32px 24px;
  box-shadow: 0 24px 64px rgba(10, 20, 50, .34);
}
.login-cartao h1 {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--detran-azul-escuro);
  line-height: 1.3;
}
.login-sub { font-size: var(--t-xs); color: var(--texto-secundario); margin-top: 3px; margin-bottom: 22px; }
.campo { display: block; margin-bottom: 14px; }
.campo span {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto-secundario);
  margin-bottom: 5px;
}
.campo input {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  background: var(--branco);
  transition: border-color var(--anima), box-shadow var(--anima);
}
.campo input:focus {
  outline: none;
  border-color: var(--detran-azul-acao);
  box-shadow: 0 0 0 3px rgba(21, 91, 203, .15);
}
.login-cartao .btn { width: 100%; margin-top: 8px; }

/* Separador entre a entrada por matrícula e a entrada federada. */
.login-ou {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--texto-terciario);
  font-size: var(--t-xs);
}
.login-ou::before,
.login-ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cinza-linha);
}

/* Botão gov.br. A marca é composta tipograficamente — ver o ponto de
   substituição no index.html. */
.btn-govbr {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--branco);
  color: var(--govbr-azul);
  border: 1px solid var(--govbr-azul);
  border-radius: var(--raio-pill);
  padding: 10px 20px;
  font-family: Roboto, "Open Sans", system-ui, sans-serif;
  font-size: var(--t-sm);
  font-weight: 500;
  transition: background var(--anima), box-shadow var(--anima), transform var(--anima);
}
.btn-govbr:hover { background: #EEF3FC; box-shadow: 0 2px 10px rgba(19, 81, 180, .18); }
.btn-govbr:active { transform: translateY(1px); }
/* Marca monocromática: a versão colorida tem composição própria e só deve ser
   usada a partir do arquivo oficial. */
.govbr-marca {
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: var(--t-md);
  line-height: 1;
}
.govbr-marca span { font-weight: 400; }
.login-nota {
  margin-top: 18px;
  font-size: var(--t-xs);
  color: var(--texto-terciario);
  text-align: center;
}
.login-fornecedor {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cinza-linha);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--t-xs);
}
.login-fornecedor .rotulo { color: var(--texto-terciario); }

/* --- Modal (perfil do usuário) -------------------------------------------- */
.modal {
  border: none;
  padding: 0;
  max-width: 440px;
  width: calc(100% - 48px);
  border-radius: var(--raio-lg);
  box-shadow: 0 24px 64px rgba(10, 20, 50, .34);
  color: var(--texto);
}
.modal::backdrop { background: rgba(16, 24, 48, .45); }
.modal-titulo {
  padding: 16px 22px;
  border-bottom: 1px solid var(--cinza-linha);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--detran-azul-escuro);
}
.modal-corpo { padding: 20px 22px; }
.modal-acoes {
  padding: 0 22px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
/* Confirmação da aprovação: o diálogo repete o que está sendo decidido. */
.confirma-processo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--cinza-linha);
}
.confirma-processo strong { color: var(--detran-azul-escuro); }
.confirma-processo span { font-size: var(--t-xs); color: var(--texto-secundario); }
.confirma-linha { font-size: var(--t-sm); line-height: 1.55; }
.confirma-linha + .confirma-linha { margin-top: 10px; color: var(--texto-secundario); }
.perfil-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--cinza-linha);
}
.perfil-topo strong { display: block; font-size: var(--t-md); color: var(--texto); }
.perfil-topo span:not(.avatar) { font-size: var(--t-xs); color: var(--texto-secundario); }
/* Especificidade dupla de propósito: .avatar é definido depois, na barra
   superior, e precisa perder aqui — sobre fundo branco o azul é que contrasta. */
.perfil-topo .avatar {
  width: 52px;
  height: 52px;
  font-size: var(--t-md);
  background: var(--detran-azul);
  border-color: transparent;
}

/* --- Layout geral --------------------------------------------------------- */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Faixa de trabalho: conteúdo e copiloto lado a lado, dentro da mesma
   largura máxima da barra superior e do rodapé. É o que faz o agente ler
   como parte do sistema, e não como uma camada por cima dele. */
.area {
  flex: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}
.conteudo {
  flex: 1;
  min-width: 0;
  padding: 20px 24px 40px;
}

/* --- Seletor de solução no login ------------------------------------------
   Único ponto em que os dois módulos da demonstração se tocam. Fica sob o
   cartão de login, sobre o fundo azul: visível para quem procura, secundário
   para quem não. Usado por index.html e por validacao.html. */
.troca-modulo {
  margin-top: 20px;
  text-align: center;
  color: rgba(255, 255, 255, .72);
  font-size: var(--t-xs);
}
.troca-modulo span { display: block; margin-bottom: 8px; }
.troca-modulo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--raio-pill);
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .08);
  color: var(--branco);
  font-family: Roboto, "Open Sans", system-ui, sans-serif;
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--anima), border-color var(--anima);
}
.troca-modulo-btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .6); }

/* --- Barra superior ------------------------------------------------------- */
/* Topo fixo: a marca e a navegação não somem ao rolar um processo longo, e o
   copiloto ganha uma âncora estável para calcular a própria altura. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(104deg, var(--detran-azul-escuro) 0%, var(--detran-azul) 58%, #0A6FB4 100%);
  color: var(--branco);
}
.topbar-interno {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 60px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 24px;
  border-right: 1px solid rgba(255, 255, 255, .18);
  min-height: 60px;
}
.marca img { height: 30px; width: auto; display: block; }
.marca-fallback {
  font-family: Roboto, "Open Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: .5px;
}
.sistema-nome {
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.25;
}
.topbar-direita {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .85);
}
/* Sessão do usuário: nome, avatar com iniciais e menu suspenso. */
.usuario-caixa { position: relative; }
.usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  border-radius: var(--raio-pill);
  padding: 5px 12px 5px 16px;
  transition: background var(--anima);
}
.usuario:hover { background: rgba(255, 255, 255, .12); }
.usuario[aria-expanded="true"] { background: rgba(255, 255, 255, .18); }
.usuario-nome { font-size: var(--t-sm); font-weight: 600; color: var(--branco); }
.usuario-seta {
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255, 255, 255, .8);
  border-bottom: 2px solid rgba(255, 255, 255, .8);
  border-radius: 1px;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform var(--anima), margin-top var(--anima);
}
.usuario[aria-expanded="true"] .usuario-seta { transform: rotate(-135deg); margin-top: 4px; }

.usuario-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-md);
  padding: 6px;
  z-index: 60;
}
.usuario-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--raio-xs);
  padding: 9px 12px;
  font-size: var(--t-sm);
  color: var(--texto);
  transition: background var(--anima), color var(--anima);
}
.usuario-menu button:hover { background: var(--tinta-azul); color: var(--detran-azul-acao); }
.usuario-menu .sair { color: var(--risco-critico); }
.usuario-menu .sair:hover { background: #FDF5F5; color: var(--risco-critico); }
.usuario-menu hr { border: none; border-top: 1px solid var(--cinza-linha); margin: 5px 4px; }

.avatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  font-family: Roboto, system-ui, sans-serif;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--branco);
}

/* --- Navegação ------------------------------------------------------------ */
.nav {
  position: sticky;
  top: var(--altura-topbar);
  z-index: 39;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
}
.nav-interno {
  max-width: 1600px;
  margin: 0 auto;
  padding: 9px 24px;
  display: flex;
  gap: 6px;
}
.nav button {
  font-family: Roboto, "Open Sans", system-ui, sans-serif;
  background: none;
  border: none;
  border-radius: var(--raio-pill);
  padding: 8px 18px;
  font-size: var(--t-sm);
  color: var(--texto-secundario);
  transition: background var(--anima), color var(--anima);
}
.nav button:hover { color: var(--detran-azul-acao); background: var(--tinta-azul); }
.nav button[aria-current="page"] {
  background: var(--detran-azul-escuro);
  color: var(--branco);
  font-weight: 600;
}

/* --- Cabeçalho de tela ---------------------------------------------------- */
.tela-cabecalho { margin-bottom: 18px; }
.tela-cabecalho h1 {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--detran-azul-escuro);
}
.tela-cabecalho p {
  color: var(--texto-secundario);
  margin-top: 3px;
  max-width: 90ch;
}

/* ==========================================================================
   TELA 1 — Painel da fila
   ========================================================================== */

/* Faixa de risco de prescrição — único ponto visualmente enfático da demo */
/* Barra de faixas de ação — filtros que também são legenda */
.faixas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.faixa-btn { flex: 1 1 210px; }
.faixa-btn {
  font-family: Roboto, "Open Sans", system-ui, sans-serif;
  text-align: left;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 11px 14px;
  box-shadow: var(--sombra);
  transition: border-color var(--anima), background var(--anima),
              box-shadow var(--anima), transform var(--anima);
}
.faixa-btn:hover { border-color: #C9D6EC; box-shadow: var(--sombra-md); transform: translateY(-2px); }
.faixa-btn[aria-pressed="true"] {
  border-color: var(--detran-azul-acao);
  box-shadow: 0 0 0 3px rgba(21, 91, 203, .15);
  background: var(--tinta-azul);
  transform: none;
}
.faixa-btn-topo { display: flex; align-items: center; gap: 8px; }
.faixa-nome { font-size: var(--t-sm); font-weight: 600; color: var(--texto); }
.faixa-qtd {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--detran-azul-escuro);
}
.faixa-criterio { font-size: var(--t-xs); color: var(--texto-secundario); margin-top: 2px; }
.faixa-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cor); flex: none; }
.limpar-filtro {
  align-self: center;
  background: none;
  border: none;
  color: var(--detran-azul-acao);
  font-size: var(--t-xs);
  padding: 0 8px;
  white-space: nowrap;
}

/* Ferramentas da tabela */
.tabela-ferramentas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.busca {
  flex: 1;
  min-width: 260px;
  max-width: 420px;
  padding: 9px 16px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pill);
  background: var(--branco);
  transition: border-color var(--anima), box-shadow var(--anima);
}
.busca:focus {
  outline: none;
  border-color: var(--detran-azul-acao);
  box-shadow: 0 0 0 3px rgba(21, 91, 203, .15);
}
/* Alternador dos casos curados: pílula, no mesmo ritmo do campo de busca. */
.btn-filtro {
  font-family: Roboto, "Open Sans", system-ui, sans-serif;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto-secundario);
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pill);
  padding: 9px 18px;
  white-space: nowrap;
  transition: background var(--anima), border-color var(--anima), color var(--anima);
}
.btn-filtro:hover { border-color: #C9D6EC; color: var(--detran-azul-acao); }
.btn-filtro[aria-pressed="true"] {
  background: var(--detran-azul-escuro);
  border-color: var(--detran-azul-escuro);
  color: var(--branco);
}
.contador-fila { font-size: var(--t-xs); color: var(--texto-secundario); margin-left: auto; }

/* Tabela da fila */
.tabela-wrap {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-lg);
  overflow: auto;
  max-height: 62vh;
  box-shadow: var(--sombra);
}
.fila { font-size: var(--t-sm); }
.fila thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
  text-align: left;
  font-family: Roboto, system-ui, sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto-secundario);
  padding: 0;
  white-space: nowrap;
}
.fila thead th button {
  width: 100%;
  text-align: inherit;
  background: none;
  border: none;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
}
.fila thead th button:hover { color: var(--detran-azul-acao); }
.fila thead th.num, .fila td.num { text-align: right; }
.fila thead th.num button { text-align: right; }
.ord { color: var(--detran-azul-acao); font-weight: 700; }
.fila tbody tr { border-bottom: 1px solid var(--cinza-linha); cursor: pointer; }
.fila tbody tr { transition: background var(--anima); }
.fila tbody tr:hover { background: var(--tinta-azul); }
.fila td { padding: 9px 12px; vertical-align: top; }
.fila td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.processo-num { display: block; font-weight: 600; color: var(--detran-azul-acao); white-space: nowrap; }
/* O nome vem sob o número, na mesma hierarquia da descrição da infração:
   identifica o processo, não ordena a fila. */
.condutor-nome {
  display: block;
  font-size: var(--t-xs);
  color: var(--texto-secundario);
  max-width: 24ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* O código é o que identifica o enquadramento; a descrição é apoio, e por isso
   recua um degrau na hierarquia em vez de ocupar o corpo da linha. */
.auto-codigo { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Uma linha por processo: a descrição corta com reticências e o texto inteiro
   fica no title. Linhas de altura igual é o que faz a fila ser varrida com o
   olho, em vez de lida uma a uma. */
.auto-desc {
  display: block;
  font-size: var(--t-xs);
  color: var(--texto-secundario);
  max-width: 42ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Prazo em célula */
.prazo-dias { font-weight: 700; color: var(--cor); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Ação: um botão só, na cor do prazo — a mesma da coluna Prazo e a mesma da
   barra de filtros acima da tabela, que é filtro e legenda ao mesmo tempo. */
.abrir-processo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cor) 9%, var(--branco));
  color: var(--cor);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor) 24%, transparent);
  transition: background var(--anima), color var(--anima), transform var(--anima);
}
.abrir-processo svg { width: 15px; height: 15px; }
.abrir-processo:hover { background: var(--cor); color: var(--branco); transform: translateX(1px); }

/* Etiqueta de faixa */
.etiqueta {
  display: inline-block;
  font-family: Roboto, system-ui, sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  border: none;
  color: var(--cor);
  background: var(--fundo, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor) 22%, transparent);
  border-radius: var(--raio-pill);
  padding: 3px 11px;
  white-space: nowrap;
}
.etiqueta-btn { transition: box-shadow var(--anima), background var(--anima); }
.etiqueta-btn:hover { box-shadow: inset 0 0 0 1px var(--cor); }
.estado-vazio { padding: 40px 24px; text-align: center; color: var(--texto-secundario); }
.estado-vazio strong { display: block; color: var(--texto); font-size: var(--t-md); margin-bottom: 4px; }

/* ==========================================================================
   TELA 2 — Análise do processo
   ========================================================================== */
.voltar {
  background: none;
  border: none;
  color: var(--detran-azul-acao);
  padding: 0;
  margin-bottom: 12px;
  font-size: var(--t-sm);
}
.processo-cabecalho {
  display: flex;
  align-items: flex-start;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--cinza-borda);
}
/* O título cede largura antes de empurrar as métricas para uma segunda linha:
   quatro blocos de três linhas embaixo do título custam a altura de um painel. */
.processo-cabecalho > div:first-child { flex: 1 1 300px; min-width: 0; }
.processo-cabecalho h1 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; color: var(--detran-azul-escuro); }
.processo-cabecalho .sub { color: var(--texto-secundario); margin-top: 2px; }
.cabecalho-metricas { margin-left: auto; display: flex; gap: 22px; }
.metrica-rotulo { font-size: var(--t-xs); color: var(--texto-secundario); }
.metrica-valor { font-size: var(--t-md); font-weight: 600; font-variant-numeric: tabular-nums; }

.colunas {
  display: grid;
  grid-template-columns: minmax(420px, 5fr) minmax(520px, 7fr);
  gap: 20px;
  align-items: start;
}
/* Com o copiloto aberto sobra menos largura: quem cede é a coluna dos autos,
   que é consulta, e não a do parecer, que é onde se trabalha. */
body.com-copiloto .colunas {
  grid-template-columns: minmax(320px, 9fr) minmax(460px, 16fr);
  gap: 16px;
}
body.com-copiloto .colunas > div:first-child .dados { grid-template-columns: 1fr; }
.painel {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  margin-bottom: 16px;
}
.painel-titulo {
  padding: 13px 18px;
  border-bottom: 1px solid var(--cinza-linha);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--detran-azul-escuro);
  display: flex;
  align-items: center;
  gap: 10px;
}
.painel-corpo { padding: 16px 18px; }

/* Blocos recolhíveis (tramitação, prazos). O título vira o controle e leva um
   resumo à direita, para que o bloco fechado ainda informe. */
details.painel > summary {
  cursor: pointer;
  list-style: none;
  border-bottom: none;
}
details.painel > summary::-webkit-details-marker { display: none; }
details.painel > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 2px solid var(--detran-azul);
  border-bottom: 2px solid var(--detran-azul);
  border-radius: 1px;
  transform: rotate(-45deg);
  margin-left: 2px;
  transition: transform var(--anima);
}
details.painel[open] > summary::before { transform: rotate(45deg); margin-left: 0; }
details.painel[open] > summary { border-bottom: 1px solid var(--cinza-linha); }
details.painel > summary { border-radius: var(--raio-lg); transition: background var(--anima); }
details.painel[open] > summary { border-radius: var(--raio-lg) var(--raio-lg) 0 0; }
details.painel > summary:hover { background: var(--cinza-fundo); }
.bloco-resumo {
  margin-left: auto;
  font-weight: 400;
  font-size: var(--t-xs);
  color: var(--texto-secundario);
}
.bloco-resumo.alerta { color: var(--risco-alto); }

/* Lista de dados do processo */
.dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.dados.uma-coluna { grid-template-columns: 1fr; }
.dado-rotulo { font-size: var(--t-xs); color: var(--texto-secundario); }
.dado-valor { font-size: var(--t-sm); }
.dado.largo { grid-column: 1 / -1; }
.divergente { color: var(--risco-critico); font-weight: 600; }
.aviso-divergencia {
  margin-top: 12px;
  border-left: 4px solid var(--risco-critico);
  background: #FDF5F5;
  padding: 11px 14px;
  font-size: var(--t-xs);
  border-radius: var(--raio);
}
.requerimento {
  font-size: var(--t-sm);
  white-space: pre-line;
  background: var(--cinza-fundo);
  border-radius: var(--raio);
  padding: 13px 15px;
  color: var(--texto);
}

/* Histórico de tramitação */
.historico { list-style: none; margin: 0; padding: 0; }
.historico li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--cinza-linha);
  font-size: var(--t-sm);
}
.historico li:last-child { border-bottom: none; }
.historico time { color: var(--texto-secundario); font-variant-numeric: tabular-nums; }
.historico .paralisado { color: var(--risco-alto); font-size: var(--t-xs); display: block; }

/* Barra de confiança */
/* Verificação da lavratura */
.verificacao { list-style: none; margin: 0; padding: 0; }
.verificacao li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--cinza-linha);
}
.verificacao li:last-child { border-bottom: none; }
.sinal {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--branco);
  background: var(--cor);
  margin-top: 1px;
}
.sinal.na { background: var(--branco); color: var(--texto-terciario); border: 1px solid var(--cinza-borda); }
.item-nome { font-size: var(--t-sm); }
.item-detalhe { font-size: var(--t-xs); color: var(--texto-secundario); display: block; margin-top: 1px; }
.item-norma {
  font-size: var(--t-xs);
  color: var(--texto-terciario);
  white-space: nowrap;
  text-align: right;
  padding-top: 2px;
}
.resumo-verificacao {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--cinza-borda);
  font-size: var(--t-xs);
  color: var(--texto-secundario);
}

/* Fundamentação */
.fund-grupo + .fund-grupo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cinza-linha); }
.fund-grupo h4 { font-size: var(--t-xs); color: var(--texto-secundario); font-weight: 600; margin-bottom: 6px; }
.fund-lista { list-style: none; margin: 0; padding: 0; }
.fund-lista li { padding: 5px 0; font-size: var(--t-sm); display: grid; grid-template-columns: 190px 1fr; gap: 12px; }
.fund-disp { font-weight: 600; color: var(--detran-azul-escuro); }
.precedente { border-left: 4px solid var(--detran-azul); background: var(--tinta-azul); padding: 12px 14px; border-radius: var(--raio); }
.precedente + .precedente { margin-top: 8px; }
.precedente-ref { font-weight: 600; font-size: var(--t-sm); }
.precedente-txt { font-size: var(--t-xs); color: var(--texto-secundario); margin-top: 2px; }

/* Painel de análise em abas.
   A coluna direita concentra minuta, verificação e fundamentação em um único
   painel de abas: a minuta abre por padrão e é o destaque da tela; o resto
   fica a um clique, sem alongar a página. */
.painel-abas {
  border-color: transparent;
  box-shadow: var(--sombra-md);
  overflow: hidden;
}
.abas {
  display: flex;
  gap: 5px;
  background: linear-gradient(104deg, var(--detran-azul-escuro) 0%, #2C3E7A 100%);
  border-radius: var(--raio-lg) var(--raio-lg) 0 0;
  padding: 9px 10px;
}
.aba {
  font-family: Roboto, system-ui, sans-serif;
  background: transparent;
  border: none;
  border-radius: var(--raio-pill);
  color: rgba(255, 255, 255, .74);
  font-size: var(--t-sm);
  font-weight: 500;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: background var(--anima), color var(--anima);
}
.aba:hover { color: var(--branco); background: rgba(255, 255, 255, .12); }
.aba[aria-selected="true"] {
  color: var(--detran-azul-escuro);
  font-weight: 700;
  background: var(--branco);
}
/* Contagem de itens não conformes: o vício de lavratura precisa ser visível
   com a aba fechada. */
.aba-marca {
  background: var(--risco-critico);
  color: var(--branco);
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--raio-pill);
  display: grid;
  place-items: center;
}
.aba-corpo { padding: 20px 22px 22px; }

.minuta {
  font-family: "Open Sans", Georgia, serif;
  font-size: var(--t-md);
  line-height: 1.75;
  white-space: pre-line;
  /* Alinhado à esquerda, não justificado: na largura que sobra com o copiloto
     aberto, a justificação abre rios entre as palavras, e a hifenização que os
     fecha enche o parágrafo de hífens. A formalidade do parecer vem da
     tipografia e da numeração, não da margem direita reta. */
  text-align: left;
}
.minuta-editor {
  width: 100%;
  min-height: 340px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  line-height: 1.6;
  resize: vertical;
  font-size: var(--t-sm);
  transition: border-color var(--anima), box-shadow var(--anima);
}
.minuta-editor:focus {
  outline: none;
  border-color: var(--detran-azul-acao);
  box-shadow: 0 0 0 3px rgba(21, 91, 203, .15);
}
.conclusao {
  margin-top: 14px;
  padding: 13px 16px;
  border: none;
  border-left: 5px solid var(--cor);
  background: var(--fundo);
  border-radius: var(--raio);
  font-size: var(--t-sm);
}
.conclusao strong {
  font-family: Roboto, system-ui, sans-serif;
  display: block;
  color: var(--cor);
  margin-bottom: 3px;
}
/* Botão de editar dentro da barra de abas: pertence ao documento, e por isso
   fica na barra dele. Vazado, para não competir com a aba selecionada. */
.aba-editar {
  margin-left: auto;
  align-self: center;
  font-family: Roboto, system-ui, sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--branco);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--raio-pill);
  padding: 6px 14px;
  transition: background var(--anima), border-color var(--anima);
}
.aba-editar:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); }

.painel-abas .conclusao {
  margin-top: 18px;
  padding: 13px 16px;
  border-left-width: 6px;
  font-size: var(--t-md);
}
.pendencias { list-style: none; margin: 8px 0 0; padding: 0; }
.pendencias li { padding: 5px 0 5px 16px; position: relative; font-size: var(--t-sm); }
.pendencias li::before {
  content: "";
  position: absolute; left: 2px; top: 10px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--risco-alto);
}
/* O que já foi apurado usa marcador de conclusão, para separar do que falta. */
.pendencias.apurado li::before { background: var(--risco-baixo); }
.subtitulo-bloco { font-size: var(--t-xs); font-weight: 600; color: var(--texto-secundario); margin: 14px 0 2px; }
.subtitulo-bloco:first-child { margin-top: 0; }

/* Ações */
.acoes {
  position: sticky;
  bottom: 0;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-lg);
  padding: 13px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 -4px 18px rgba(23, 32, 66, .07);
}
.btn {
  font-family: Roboto, "Open Sans", system-ui, sans-serif;
  border-radius: var(--raio-pill);
  padding: 10px 20px;
  border: 1px solid transparent;
  font-size: var(--t-sm);
  font-weight: 500;
  /* O rótulo é a ação: quebrar "Aprovar / parecer" em duas linhas engorda a
     barra e enfraquece o alvo. Quem cede largura é a nota, não o botão. */
  flex: none;
  white-space: nowrap;
  transition: background var(--anima), border-color var(--anima),
              color var(--anima), box-shadow var(--anima), transform var(--anima);
}
.btn:active { transform: translateY(1px); }
.btn-primario {
  background: var(--detran-azul-acao);
  color: var(--branco);
  box-shadow: 0 2px 8px rgba(21, 91, 203, .28);
}
.btn-primario:hover { background: #1250B4; box-shadow: 0 4px 14px rgba(21, 91, 203, .34); }
.btn-secundario { background: var(--branco); border-color: #D2D9E4; color: var(--texto); }
.btn-secundario:hover { border-color: var(--detran-azul-acao); color: var(--detran-azul-acao); background: var(--tinta-azul); }
/* A ação de seguir adiante encosta na direita; a de reprovar fica na esquerda.
   O que houver entre as duas ocupa a sobra. */
.acoes > .btn-primario { margin-left: auto; }
.acoes-nota {
  flex: 1 1 auto;
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--texto-secundario);
  text-align: right;
  max-width: 42ch;
}
.btn-perigo { background: var(--branco); border-color: #EBC9C9; color: var(--risco-critico); }
.btn-perigo:hover { background: #FDF5F5; border-color: var(--risco-critico); }
.btn-perigo:disabled { opacity: .45; cursor: not-allowed; }
.btn-perigo:disabled:hover { background: var(--branco); border-color: #EBC9C9; }

/* Motivo da reprovação: ocupa a mesma barra das ações, para a decisão não sair
   do lugar onde ela é tomada. */
.acoes-motivo { flex-direction: column; align-items: stretch; gap: 8px; }
.motivo-rotulo { font-size: var(--t-xs); font-weight: 600; color: var(--detran-azul-escuro); }
.motivo-campo {
  width: 100%;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 10px 13px;
  line-height: 1.5;
  resize: vertical;
  font-size: var(--t-sm);
  transition: border-color var(--anima), box-shadow var(--anima);
}
.motivo-campo:focus {
  outline: none;
  border-color: var(--risco-critico);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, .12);
}
.motivo-acoes { display: flex; gap: 10px; }
.decisao-motivo { display: block; color: var(--texto); margin: 2px 0 3px; }

/* Estado de decisão registrada */
.decisao-registrada {
  border-radius: var(--raio-lg);
  padding: 15px 18px;
  border: none;
  border-left: 5px solid var(--cor);
  background: var(--fundo);
  display: flex;
  gap: 12px;
  align-items: center;
}
.decisao-registrada .txt { font-size: var(--t-sm); }
.decisao-registrada .txt strong { display: block; }

/* ==========================================================================
   TELA 3 — Visão de gestão
   ========================================================================== */

/* Indicadores-chave da fila */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.kpi {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-lg);
  padding: 18px 20px;
  box-shadow: var(--sombra);
  transition: box-shadow var(--anima), transform var(--anima);
}
.kpi:hover { box-shadow: var(--sombra-md); transform: translateY(-2px); }
.kpi-rotulo { font-size: var(--t-xs); color: var(--texto-secundario); font-weight: 600; }
.kpi-valor {
  font-family: Roboto, system-ui, sans-serif;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--cor);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.kpi-nota { font-size: var(--t-xs); color: var(--texto-terciario); margin-top: 6px; }

/* Escopo do painel: de onde vem o número mostrado ali. */
.escopo {
  margin-left: auto;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--texto-terciario);
}

/* Listas de composição (por fase, por faixa de ação) */
.comp-lista { list-style: none; margin: 0; padding: 0; }
.comp-lista li {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(60px, 1.2fr) 74px;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cinza-linha);
}
.comp-lista li:last-child { border-bottom: none; }
.comp-nome { font-size: var(--t-sm); }
.comp-detalhe { display: block; font-size: var(--t-xs); color: var(--texto-terciario); }
.comp-barra {
  height: 8px;
  background: var(--cinza-linha);
  border-radius: var(--raio-pill);
  overflow: hidden;
}
.comp-barra i { display: block; height: 100%; background: var(--cor); border-radius: inherit; }
.comp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.comp-num strong { font-family: Roboto, system-ui, sans-serif; font-size: var(--t-md); }
.comp-num span { font-size: var(--t-xs); color: var(--texto-terciario); margin-left: 5px; }

/* --------------------------------------------------------------------------
   Gráficos
   Marcas finas, grade recessiva, rótulo direto só onde a história pede.
   O texto nunca veste a cor da série: a identidade vem da marca ao lado.
   -------------------------------------------------------------------------- */
.gr-corpo { padding: 4px 18px 16px; }
.gr-area { width: 100%; }
.gr-svg { display: block; width: 100%; height: auto; overflow: visible; }

.gr-grade { stroke: var(--cinza-linha); stroke-width: 1; }
.gr-base { stroke: var(--cinza-borda); stroke-width: 1; }
.gr-eixo {
  font-size: 12px;
  fill: var(--texto-terciario);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.gr-eixo-y { text-anchor: end; }
.gr-hit { fill: transparent; cursor: crosshair; }
.gr-hit:hover { fill: rgba(21, 91, 203, .05); }

/* Faixa de números que o gráfico resume */
.gr-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px 18px 6px;
}
.gr-resumo-item {
  background: var(--cinza-fundo);
  border-radius: var(--raio);
  padding: 13px 15px;
}
.gr-resumo-rotulo { font-size: var(--t-xs); color: var(--texto-secundario); }
.gr-resumo-valor {
  font-family: Roboto, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  color: var(--detran-azul-escuro);
}
.gr-resumo-valor.negativo { color: var(--risco-critico); }

/* Legenda: retângulo para colunas, traço para linhas. */
.gr-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 0 14px;
  font-size: var(--t-xs);
  color: var(--texto-secundario);
}
.gr-leg-item { display: inline-flex; align-items: center; gap: 7px; }
.gr-leg-marca {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--cor);
  flex: none;
}
.gr-leg-marca.linha { height: 2px; width: 18px; border-radius: var(--raio-pill); }
.gr-leg-marca.linha.tracejada {
  background: repeating-linear-gradient(90deg, var(--cor) 0 6px, transparent 6px 10px);
}

.gr-nota {
  font-size: var(--t-xs);
  color: var(--texto-secundario);
  margin-top: 10px;
  max-width: 96ch;
}

/* Tabela de dados: o caminho sem hover até cada número. */
.gr-tabela { margin-top: 12px; }
.gr-tabela > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--detran-azul-acao);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
}
.gr-tabela > summary::-webkit-details-marker { display: none; }
.gr-tabela > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--anima);
}
.gr-tabela[open] > summary::before { transform: rotate(45deg); }
.gr-tabela-wrap { overflow-x: auto; margin-top: 8px; }
.gr-tabela table { font-size: var(--t-xs); width: auto; min-width: 360px; }
.gr-tabela th, .gr-tabela td { padding: 6px 12px 6px 0; text-align: left; white-space: nowrap; }
.gr-tabela th { color: var(--texto-secundario); font-weight: 600; border-bottom: 1px solid var(--cinza-borda); }
.gr-tabela td { border-bottom: 1px solid var(--cinza-linha); font-variant-numeric: tabular-nums; }
.gr-tabela th.num, .gr-tabela td.num { text-align: right; padding-right: 20px; }

/* Tooltip dos gráficos */
.gr-dica {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-md);
  padding: 10px 13px;
  font-size: var(--t-xs);
  min-width: 170px;
}
.gr-dica-titulo {
  font-weight: 700;
  color: var(--detran-azul-escuro);
  margin-bottom: 5px;
}
/* "abril de 2026" e não "Abril De 2026". */
.gr-dica-titulo::first-letter { text-transform: uppercase; }
.gr-dica-linha { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.gr-dica-chave {
  width: 14px;
  height: 2px;
  border-radius: var(--raio-pill);
  background: var(--cor);
  flex: none;
}
.gr-dica-linha strong {
  font-family: Roboto, system-ui, sans-serif;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.gr-dica-rotulo { color: var(--texto-secundario); }

.subtitulo-secao {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--detran-azul-escuro);
  margin: 22px 0 12px;
}

/* ==========================================================================
   Rodapé
   ========================================================================== */
/* Rodapé claro: fundo branco sobre o cinza do corpo, para que o logotipo da
   WideLabs apareça na cor de marca, sem fundo de apoio. */
.rodape {
  background: var(--branco);
  color: var(--texto-secundario);
  border-top: 1px solid var(--cinza-borda);
}
.rodape-interno {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: var(--t-xs);
  flex-wrap: wrap;
}
.rodape-interno p { max-width: 80ch; }
.fornecedor {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.fornecedor .rotulo { color: var(--texto-terciario); }
/* Logotipo da WideLabs na cor de marca (#1A3CFA), direto sobre o rodapé
   claro — sem retângulo de apoio. */
.widelabs-logo {
  height: 18px;
  width: auto;
  display: block;
}

/* --- Aviso de ação (feedback de aprovação) -------------------------------- */
.aviso-acao {
  position: fixed;
  right: 24px;
  bottom: 56px;
  z-index: 50;
  max-width: 420px;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-left: 5px solid var(--detran-verde);
  border-radius: var(--raio-lg);
  padding: 14px 18px;
  box-shadow: 0 10px 34px rgba(23, 32, 66, .16);
  font-size: var(--t-sm);
  animation: sobe .16s ease-out;
}
.aviso-acao strong { display: block; }
.aviso-acao.neutro { border-left-color: var(--detran-azul-acao); }
@keyframes sobe { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aviso-acao { animation: none; } }

/* ==========================================================================
   COPILOTO — o agente como presença, não como ícone
   --------------------------------------------------------------------------
   Três decisões governam este bloco:
   · O agente é visível em repouso. O botão de chamada fica sempre na tela,
     com um sinal vivo — é o que separa um sistema conversacional de um
     sistema que por acaso usa IA.
   · O painel empurra a interface, não a cobre. Pedir a reescrita da minuta
     com a minuta escondida atrás do chat seria contraditório.
   · A fala do agente tem estrutura: texto, verificação, conclusão, fonte.
     A citação da base é parte da resposta, não um rodapé opcional.
   ========================================================================== */

/* --- Chamada permanente --------------------------------------------------- */
.copiloto-abrir {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 16px;
  border: none;
  border-radius: var(--raio-pill);
  background: linear-gradient(104deg, var(--detran-azul-escuro) 0%, var(--detran-azul-acao) 100%);
  color: var(--branco);
  font-family: Roboto, system-ui, sans-serif;
  font-size: var(--t-sm);
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(21, 91, 203, .36);
  transition: transform var(--anima), box-shadow var(--anima), right var(--anima);
}
.copiloto-abrir:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(21, 91, 203, .44); }
.copiloto-sinal {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--detran-verde);
  box-shadow: 0 0 0 0 rgba(36, 214, 153, .7);
  animation: pulso 2.4s ease-out infinite;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(36, 214, 153, .7); }
  70%  { box-shadow: 0 0 0 10px rgba(36, 214, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(36, 214, 153, 0); }
}
@media (prefers-reduced-motion: reduce) { .copiloto-sinal { animation: none; } }

/* --- Painel --------------------------------------------------------------- */
.copiloto {
  flex: none;
  width: 380px;
  margin: 20px 24px 40px 0;
  /* Acompanha a rolagem sem sair da faixa de trabalho: para no rodapé, como
     qualquer painel da tela. */
  position: sticky;
  top: calc(var(--altura-topo) + 16px);
  /* Cresce com a conversa até o que sobra da janela abaixo do topo fixo: altura
     fixa deixaria um vazio com poucas mensagens, e ignorar o topo faria o painel
     passar da dobra assim que a conversa crescesse. */
  height: auto;
  min-height: 320px;
  max-height: calc(100vh - var(--altura-topo) - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
}
/* Na análise o painel é coluna fixa da tela, e é o único lugar da interface
   onde se conversa: ganha o contorno e a elevação que os painéis de dado não
   têm, para ler como superfície ativa e não como mais um cartão de leitura. */
body.copiloto-fixo .copiloto {
  border-color: #C9D9F5;
  box-shadow: 0 0 0 4px rgba(21, 91, 203, .07), var(--sombra-md);
}
/* O aviso de ação sai do caminho do painel em vez de cobrir o campo de pergunta. */
body.com-copiloto .aviso-acao { right: auto; left: 24px; }
/* Com o painel aberto, a presença do agente é o próprio painel: a chamada
   flutuante sairia sobrando sobre o conteúdo. */
body.com-copiloto .copiloto-abrir { display: none; }

/* Cabeçalho na cor da barra superior: o agente é parte do sistema, e o
   cabeçalho é o que amarra as duas superfícies à mesma marca. */
.copiloto-topo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  background: linear-gradient(104deg, var(--detran-azul-escuro) 0%, var(--detran-azul) 62%, #0A6FB4 100%);
  color: var(--branco);
}
.copiloto-selo {
  flex: none;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: var(--raio-pill);
  background: rgba(36, 214, 153, .16);
  color: #9BF2D3;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.copiloto-avatar, .fala-avatar {
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--detran-verde) 0%, #12A7C8 55%, var(--detran-azul-acao) 100%);
}
.copiloto-avatar {
  position: relative;
  width: 28px;
  height: 28px;
}
.copiloto-avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--detran-verde);
  box-shadow: 0 0 0 2px var(--detran-azul);
}
.copiloto-identidade { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.copiloto-identidade strong { font-size: var(--t-sm); }
.copiloto-identidade span {
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.copiloto-fechar {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font-size: 18px;
  line-height: 1;
  transition: background var(--anima), color var(--anima);
}
.copiloto-fechar:hover { background: rgba(255, 255, 255, .16); color: var(--branco); }

.copiloto-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 18px 16px;
  background: var(--cinza-fundo);
}
/* `margin-top: auto` empurra a conversa para baixo enquanto ela é curta, e
   deixa de ter efeito quando passa a transbordar — sem quebrar a rolagem. */
.copiloto-fluxo { margin-top: auto; }
.copiloto-fluxo > *:last-child { margin-bottom: 0; }

/* --- Falas ---------------------------------------------------------------- */
.fala { display: flex; gap: 10px; margin-bottom: 14px; }
.fala-avatar { width: 24px; height: 24px; margin-top: 2px; }
.fala.julgador { justify-content: flex-end; }
.fala.julgador .fala-corpo {
  background: var(--detran-azul-acao);
  color: var(--branco);
  border-radius: var(--raio-lg) var(--raio-lg) var(--raio-xs) var(--raio-lg);
  padding: 10px 14px;
  max-width: 86%;
  box-shadow: 0 2px 10px rgba(21, 91, 203, .22);
}
.fala.agente .fala-corpo {
  flex: 1;
  min-width: 0;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-xs) var(--raio-lg) var(--raio-lg) var(--raio-lg);
  padding: 14px 16px;
  box-shadow: var(--sombra);
}
.fala.agente p { margin-bottom: 9px; }
.fala.agente p:last-of-type { margin-bottom: 0; }

/* Lista de verificação ou de cruzamento dentro da fala */
.fala-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.fala-lista li {
  display: flex;
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid var(--cinza-linha);
}
.fala-lista li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fala-lista strong { font-size: var(--t-sm); }
.fala-lista span span { font-size: var(--t-xs); color: var(--texto-secundario); }
.fala-marca {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--branco);
  background: var(--texto-terciario);
}
.marca-ok .fala-marca { background: var(--risco-baixo); }
.marca-erro .fala-marca { background: var(--risco-critico); }
.marca-alerta .fala-marca { background: var(--risco-alto); }
.marca-cita .fala-marca { background: var(--detran-azul-escuro); }

/* A conclusão da resposta, destacada por superfície tingida */
.fala-destaque {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: var(--raio);
  font-size: var(--t-xs);
  background: var(--tinta-azul);
  border-left: 3px solid var(--detran-azul-acao);
}
.fala-destaque strong { display: block; margin-bottom: 2px; font-size: var(--t-sm); }
.fala-destaque.ok { background: #F1F8F1; border-left-color: var(--risco-baixo); }
.fala-destaque.alerta { background: #FDF6EF; border-left-color: var(--risco-alto); }
.fala-destaque.critico { background: #FDF4F4; border-left-color: var(--risco-critico); }

.fala-acao {
  margin-top: 12px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: var(--raio-pill);
  background: var(--detran-azul-acao);
  color: var(--branco);
  font-family: Roboto, system-ui, sans-serif;
  font-size: var(--t-sm);
  font-weight: 600;
  transition: background var(--anima), box-shadow var(--anima);
}
.fala-acao:hover { background: #1250B4; box-shadow: 0 4px 14px rgba(21, 91, 203, .34); }

/* Gráfico gerado dentro da conversa */
.fala-grafico { margin-top: 12px; }
.fala-grafico-titulo {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto-secundario);
  margin-bottom: 6px;
}
.fala-grafico .gr-legenda { margin-bottom: 4px; }

/* Rastreabilidade: de onde veio a resposta */
.fala-fontes {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--cinza-linha);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.fala-fontes-rotulo {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-terciario);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fonte {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--raio-pill);
  background: var(--tinta-azul);
  color: var(--detran-azul-escuro);
}
.fonte.atencao { background: #FDF6EF; color: #9A5B14; }

/* Sugestões de partida */
/* O agente pensando: a espera é informação, não latência escondida */
.pensando-txt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-xs);
  color: var(--texto-secundario);
}
.fala-avatar.pensando { animation: respira 1.4s ease-in-out infinite; }
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.pontos { display: inline-flex; gap: 3px; }
.pontos i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--detran-azul-acao);
  animation: salta 1.1s ease-in-out infinite;
}
.pontos i:nth-child(2) { animation-delay: .15s; }
.pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes salta { 0%, 100% { transform: none; opacity: .4; } 50% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fala-avatar.pensando, .pontos i { animation: none; }
}

/* Painel sem conversa: na gestão o agente nasce vazio e o que ocupa o corpo é
   o convite. Fica junto do campo, na mesma linha de leitura da primeira
   resposta que vai aparecer ali. */
.copiloto-vazio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 4px 6px;
}
.copiloto-vazio .fala-avatar { width: 30px; height: 30px; margin-bottom: 2px; }
.copiloto-vazio strong { font-size: var(--t-md); color: var(--detran-azul-escuro); letter-spacing: -.01em; }
.copiloto-vazio span { font-size: var(--t-sm); color: var(--texto-secundario); line-height: 1.55; }

/* --- Atalhos fixos --------------------------------------------------------
   Ficam entre a conversa e o campo, sempre visíveis. São a resposta visual à
   pergunta "o que eu pergunto aqui?" — e mostram que o trabalho da tela
   (confiança, precedente, prazo, minuta) também se resolve conversando. */
.copiloto-atalhos {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 0;
  background: var(--branco);
  border-top: 1px solid var(--cinza-borda);
}
.atalho {
  flex: none;
  padding: 6px 12px;
  border: 1px solid #D2D9E4;
  border-radius: var(--raio-pill);
  background: var(--tinta-azul);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--detran-azul-acao);
  white-space: nowrap;
  transition: border-color var(--anima), background var(--anima), color var(--anima);
}
.atalho:hover { border-color: var(--detran-azul-acao); background: var(--detran-azul-acao); color: var(--branco); }

/* --- Campo de pergunta ---------------------------------------------------- */
.copiloto-form {
  display: flex;
  gap: 8px;
  padding: 10px 16px 6px;
  background: var(--branco);
}
.copiloto-campo {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pill);
  background: var(--cinza-fundo);
  transition: border-color var(--anima), box-shadow var(--anima), background var(--anima);
}
.copiloto-campo:focus {
  outline: none;
  background: var(--branco);
  border-color: var(--detran-azul-acao);
  box-shadow: 0 0 0 3px rgba(21, 91, 203, .15);
}
/* Ditado: o botão nasce discreto e vira vermelho enquanto ouve. O vermelho é
   o vocabulário de gravação, não o de erro da interface — e é o único estado
   em que o painel está captando alguma coisa. */
.copiloto-mic {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cinza-borda);
  border-radius: 50%;
  background: var(--branco);
  color: var(--texto-secundario);
  transition: border-color var(--anima), background var(--anima), color var(--anima);
}
.copiloto-mic svg { width: 17px; height: 17px; }
.copiloto-mic:hover {
  border-color: var(--detran-azul-acao);
  background: var(--tinta-azul);
  color: var(--detran-azul-acao);
}
.copiloto-mic.ouvindo {
  border-color: transparent;
  background: var(--risco-critico);
  color: var(--branco);
  animation: pulso-mic 1.8s ease-out infinite;
}
@keyframes pulso-mic {
  0%   { box-shadow: 0 0 0 0 rgba(198, 40, 40, .5); }
  70%  { box-shadow: 0 0 0 11px rgba(198, 40, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); }
}
@media (prefers-reduced-motion: reduce) { .copiloto-mic.ouvindo { animation: none; } }

.copiloto-enviar {
  flex: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--detran-azul-acao);
  color: var(--branco);
  font-size: 17px;
  line-height: 1;
  transition: background var(--anima), transform var(--anima);
}
.copiloto-enviar:hover { background: #1250B4; transform: translateY(-1px); }
.copiloto-rodape {
  padding: 4px 16px 12px;
  background: var(--branco);
  font-size: 11px;
  color: var(--texto-terciario);
}

/* ==========================================================================
   TELA 4 — Base de conhecimento
   ========================================================================== */
.envio {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border: 1px dashed #C2CEE2;
  border-radius: var(--raio-lg);
  background: var(--tinta-azul);
}
.envio-icone {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--branco);
  color: var(--detran-azul-acao);
  font-size: 22px;
  font-weight: 300;
  box-shadow: var(--sombra);
}
.envio-txt { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-xs); color: var(--texto-secundario); }
.envio-txt strong { font-size: var(--t-sm); color: var(--detran-azul-escuro); }
.envio .btn { flex: none; margin-left: auto; }

.tabela-wrap.plana { border: none; border-radius: 0; box-shadow: none; max-height: none; }
/* Cabeçalhos do acervo não são botões de ordenação, então precisam do
   recuo que ali vem do <button>. */
.acervo thead th, .enquadramentos thead th { padding: 10px 12px; }
.acervo tbody tr, .enquadramentos tbody tr { cursor: default; }
.acervo tbody tr:hover, .enquadramentos tbody tr:hover { background: transparent; }
.acervo td, .enquadramentos td { padding: 12px; vertical-align: middle; }

/* Principais enquadramentos: uma linha por código, sem quebra. A descrição
   ocupa a largura que sobra e corta com reticências quando não cabe — o texto
   inteiro fica no title. Gravidade e artigo saem de baixo da descrição: um vira
   coluna, o outro já está dito pelo código. */
.enquadramentos td { padding: 8px 12px; white-space: nowrap; }
.enquadramentos thead th { white-space: nowrap; }
.enq-desc {
  max-width: 0;          /* deixa a célula encolher e o texto cortar */
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enq-gravidade { font-size: var(--t-xs); color: var(--texto-secundario); }
/* A barra e o número dividem a mesma linha: a barra dá a ordem de grandeza, o
   número dá o valor, e nenhum dos dois depende do outro para ser lido. */
.enq-fila { display: flex; align-items: center; gap: 10px; }
.enquadramentos .comp-barra { flex: none; width: 110px; }
.enq-num { font-size: var(--t-xs); color: var(--texto-secundario); font-variant-numeric: tabular-nums; }
.doc-titulo { display: block; font-weight: 600; color: var(--detran-azul-escuro); }
.doc-escopo { display: block; font-size: var(--t-xs); color: var(--texto-secundario); max-width: 62ch; }
.doc-nota { display: block; font-size: var(--t-xs); color: #9A5B14; margin-top: 3px; }

/* --- Responsividade para projeção ---------------------------------------- */
@media (max-width: 1320px) {
  /* Sem largura para as duas colunas, o painel volta a sobrepor. */
  .copiloto {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    height: auto;
    margin: 0;
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--cinza-borda);
    box-shadow: -18px 0 48px rgba(23, 32, 66, .14);
  }
}
@media (max-width: 1200px) {
  .colunas { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .faixa-btn { flex: 1 1 260px; }
}
@media (min-width: 1900px) {
  :root { --t-xs: 13px; --t-sm: 14px; --t-md: 16px; --t-lg: 22px; }
}