/* ============================================================================
   Interface do Operador NFS-e — identidade visual do Portal Faktura
   ============================================================================

   Os tokens abaixo NÃO foram inventados: são os mesmos do tema do Portal
   Faktura (Pgv.Granner.Faktura.Portal), lidos de
   `apps/@pgv-root/src/themes/theme.tsx` e `custom-palette.tsx`. Quem mexer
   aqui deve conferir lá antes de trocar qualquer cor — o objetivo é que o
   operador não perceba diferença de linguagem visual ao alternar entre o
   Portal e esta ferramenta.

   Equivalências com o tema do Portal (MUI):
     palette.primary.main .................. --primaria            #481135
     palette.primary.dark .................. --primaria-escura     #28021B
     palette.secondary.main ................ --secundaria          #734A64
     palette.surface.surface1..5 ........... --superficie-1..5
     palette.text.primary/secondary/... .... --texto-*
     palette.system.divider ................ --divisor             #e9eff2
     palette.border.container .............. --borda-container     #D8D8D8
     palette.success/error/warning ......... --sucesso/--erro/--atencao
     palette.badge.* ....................... --etiqueta-*
     palette.alerts.* ...................... --alerta-*
     palette.system.tooltip ................ --dica-fundo          #2D3135
     typography.fontFamily ................. --fonte-texto         Red Hat Display

   Convenções herdadas do Portal:
     - MuiPaper `variant: outlined`  -> cartão é BORDA, não sombra.
     - MuiButton `disableElevation`  -> botão é chapado, sem sombra.
     - Raio de canto 4px (padrão MUI), 8px só em superfícies grandes.

   Fontes: Red Hat Display (texto) + Red Hat Mono (código), carregadas via
   <link> Google Fonts no index.html — o único recurso externo desta UI.
   DEGRADAÇÃO GRACIOSA: se a rede cair, cada `font-family` cai para a pilha
   do sistema e nada no leiaute depende de métrica exata da fonte.
   ============================================================================ */

:root {
  /* --- marca ------------------------------------------------------------- */
  --primaria: #481135;
  --primaria-escura: #28021B;
  --primaria-clara: #6B2B54;
  --primaria-contraste: #FFFFFF;
  --secundaria: #734A64;
  --secundaria-contraste: #A8518A;

  /* tintas da primária para fundos suaves (chip, hover, faixa ativa).
     Derivadas por opacidade da própria primária — nunca uma cor nova. */
  --primaria-tinta-04: rgba(72, 17, 53, .04);
  --primaria-tinta-08: rgba(72, 17, 53, .08);
  --primaria-tinta-16: rgba(72, 17, 53, .16);

  /* --- superfícies ------------------------------------------------------- */
  --superficie-1: #FFFFFF;   /* cartão, papel                                */
  --superficie-2: #F5F5F5;   /* cabeçalho de tabela, faixa neutra            */
  --superficie-3: #EAEAEA;   /* desabilitado                                 */
  --superficie-4: #F5F7FA;   /* fundo da aplicação                           */
  --superficie-5: #FCFCFC;   /* zebra de tabela                              */
  --superficie-ativa: #E6F4FD;
  --superficie-offwhite: #edf3f9;

  /* --- texto ------------------------------------------------------------- */
  --texto-primario: #4A4A4A;
  --texto-secundario: #666666;
  --texto-desabilitado: #9E9E9E;
  --texto-escuro: #15141A;
  --texto-inverso: #FFFFFF;
  --texto-marcador: rgba(74, 74, 74, .5);

  /* --- bordas ------------------------------------------------------------ */
  --divisor: #e9eff2;
  --borda-padrao: #cccccc;
  --borda-container: #D8D8D8;
  --borda-desabilitada: rgba(0, 0, 0, .12);

  /* --- semântica --------------------------------------------------------- */
  --sucesso: #28AF5A;
  --sucesso-forte: #155724;
  --sucesso-fundo: #D4EDDA;
  --erro: #BA1A1A;
  --erro-claro: #E9786B;
  --erro-forte: #721C24;
  --erro-fundo: #F8D7DA;
  --erro-fundo-suave: #FDF4F3;
  --atencao: #FFC107;
  --atencao-escura: #ff8d00;
  --atencao-forte: #856404;
  --atencao-fundo: #FFF3CD;
  --info: #0094EE;
  --info-forte: #004085;
  --info-fundo: #CCE5FF;
  --neutro-forte: #383D41;
  --neutro-fundo: #E2E3E5;

  /* --- etiquetas (palette.badge do Portal) -------------------------------- */
  --etiqueta-azul: #0094EE;
  --etiqueta-verde: #4BAF50;
  --etiqueta-amarela: #E9C16C;
  --etiqueta-laranja: #FF9E5F;
  --etiqueta-roxa: #8449ff;

  --dica-fundo: #2D3135;

  /* --- tipografia -------------------------------------------------------- */
  --fonte-texto: 'Red Hat Display', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-mono: 'Red Hat Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- métricas ---------------------------------------------------------- */
  --raio: 4px;              /* padrão MUI                                    */
  --raio-grande: 8px;       /* cartões e superfícies grandes                 */
  --raio-pilula: 999px;
  --barra-altura: 56px;
  /* 1600px: mesma largura ja usada em `.cmp-conteudo` (detalhe da execucao) —
     nao um valor novo. Subiu de 1180px porque a tabela de execucoes (8
     colunas) precisava de mais espaco em tela larga; formularios continuam
     estreitos por causa do proprio `max-width` deles (ver
     `form#formulario-novo`), entao o resto da UI nao fica esparramado. */
  --largura-conteudo: 1600px;

  /* elevação: usada com muita parcimônia (o Portal é `variant: outlined`).
     Só em coisas que realmente flutuam sobre o conteúdo. */
  --sombra-1: 0 1px 2px rgba(21, 20, 26, .06), 0 1px 3px rgba(21, 20, 26, .04);
  --sombra-2: 0 2px 6px rgba(21, 20, 26, .08), 0 1px 2px rgba(21, 20, 26, .06);

  --transicao: 140ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --transicao: 0ms; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================================
   Base
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte-texto);
  font-size: 14px;
  line-height: 1.5;
  background: var(--superficie-4);
  color: var(--texto-primario);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, pre, .mono { font-family: var(--fonte-mono); }

/* Foco visível em tudo que recebe teclado. `:focus-visible` não aparece no
   clique de mouse, então não polui a tela — mas o operador de teclado nunca
   fica perdido. */
:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
  border-radius: var(--raio);
}

.escondido { display: none !important; }

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primaria); color: var(--primaria-contraste);
  padding: 10px 16px; border-radius: 0 0 var(--raio) 0; font-weight: 600;
}
.pular-para-conteudo:focus { left: 0; }

/* Só para leitor de tela (rótulos que a tela já comunica visualmente). */
.apenas-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Barra do aplicativo
   ============================================================================ */

.cabecalho {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--barra-altura);
  padding: 0 24px;
  background: var(--primaria);
  color: var(--primaria-contraste);
}

.marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.marca .logo { height: 20px; width: auto; display: block; }
.marca .divisor-marca {
  width: 1px; height: 20px; background: rgba(255, 255, 255, .28); flex: none;
}
/* `eyebrow`: o nome do produto na barra. Caixa alta com entrelinha larga é o
   mesmo padrão do kit de documentos das skills. */
.eyebrow {
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  text-transform: uppercase;
  white-space: nowrap;
}
.eyebrow b { color: #fff; font-weight: 800; }

.navegacao { display: flex; align-items: center; gap: 4px; height: 100%; }

/* ---- sessao no header (#149): nome do usuario + Sair --------------------
   O cabecalho e roxo (--primaria): texto e borda claros, como as abas. */
.usuario-sessao { display: flex; align-items: center; gap: 12px; }
.usuario-nome { font-size: .85rem; font-weight: 600; color: rgba(255, 255, 255, .82); }
.botao-sair {
  background: transparent; border: 1px solid rgba(255, 255, 255, .4);
  color: var(--primaria-contraste); padding: 6px 14px; font-size: .85rem;
}
.botao-sair:hover { background: rgba(255, 255, 255, .12); border-color: var(--primaria-contraste); }

/* Abas do Portal: sublinhado, não pílula. */
.botao-nav {
  position: relative;
  height: 100%;
  display: inline-flex; align-items: center;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .74);
  padding: 0 16px;
  cursor: pointer;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: color var(--transicao), background var(--transicao);
}
.botao-nav::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: transparent;
  transition: background var(--transicao);
}
.botao-nav:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.botao-nav.ativo { color: #fff; }
.botao-nav.ativo::after { background: var(--secundaria-contraste); }
.botao-nav:focus-visible { outline-color: #fff; outline-offset: -3px; }

/* ============================================================================
   Faixa de pré-requisitos (preflight)
   ============================================================================ */

.preflight {
  background: var(--atencao-fundo);
  border-bottom: 1px solid #f0d69a;
  color: var(--atencao-forte);
  padding: 12px 24px;
  font-size: .84rem;
}
.preflight strong { color: #6b4f03; }
.preflight ul { margin: 6px 0 0; padding-left: 20px; }
.preflight .ok-item { color: var(--sucesso-forte); }
.preflight .falha-item { color: var(--atencao-forte); }

/* ============================================================================
   Leiaute e cartões
   ============================================================================ */

main {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 24px 24px 72px;
}

/* Cada "tela" é um papel branco com borda — MuiPaper variant="outlined". */
.tela {
  background: var(--superficie-1);
  border: 1px solid var(--divisor);
  border-radius: var(--raio-grande);
  padding: 24px 28px 28px;
}
.tela.escondido { display: none; }

h1, h2, h3, h4 { color: var(--texto-escuro); margin: 0 0 12px; font-weight: 800; }
h2 { font-size: 1.375rem; letter-spacing: -.01em; }
h4 { font-size: 1rem; font-weight: 700; }

/* h3 é usado como rótulo de seção ("Linha do tempo", "Continuar
   conversando") — vira um título de seção discreto, na cor da marca. */
h3 {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--secundaria); margin: 28px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--divisor);
}

.cabecalho-tela {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.cabecalho-tela h2 { margin: 0; }
.cabecalho-tela > div:first-child { flex: 1 1 380px; min-width: 0; }
.cabecalho-tela > div:first-child .dica { margin: 6px 0 0; max-width: 68ch; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }

/* ============================================================================
   Botões (MUI: contained / outlined / text, sem elevação)
   ============================================================================ */

button {
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--primaria);
  background: var(--primaria);
  color: var(--primaria-contraste);
  padding: 7px 18px;
  min-height: 36px;
  border-radius: var(--raio);
  font-size: .8125rem;
  font-family: var(--fonte-texto);
  font-weight: 700;
  letter-spacing: .028em;
  text-transform: uppercase;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao);
}
button:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); }
button:active { background: #1d0113; }

button.botao-perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
button.botao-perigo:hover { background: #8f1414; border-color: #8f1414; }

/* "Negar" não é a ação destrutiva da tela — é a escolha segura. Vermelho
   CHEIO puxa o olho como se fosse o botão principal; vermelho de contorno
   diz "recusar" sem virar a chamada para ação. */
button.botao-negar {
  background: transparent; color: var(--erro); border-color: var(--erro-claro);
}
button.botao-negar:hover { background: var(--erro-fundo-suave); border-color: var(--erro); }

.nota-escopo { margin: 10px 0 0; font-size: .78rem; }

/* Secundário (outlined): ações que não são a principal da tela. */
.botao-voltar,
#btn-atualizar-lista,
button.botao-secundario {
  background: transparent;
  color: var(--primaria);
  border-color: var(--borda-container);
}
.botao-voltar:hover,
#btn-atualizar-lista:hover,
button.botao-secundario:hover {
  background: var(--primaria-tinta-04);
  border-color: var(--primaria);
  color: var(--primaria);
}
.botao-voltar { margin-bottom: 18px; }

/* Terciário (text): ação discreta dentro de listas. */
.botao-discreto {
  background: none; border: 1px solid transparent; color: var(--texto-secundario);
  padding: 4px 10px; min-height: 28px; font-size: .75rem;
}
.botao-discreto:hover {
  background: var(--primaria-tinta-04); border-color: var(--borda-container);
  color: var(--primaria);
}
/* Variante para a ação que TIRA algo do caminho ("Descartar"): o vermelho aqui
   é informação, não decoração. Antes ele valia para todo `.botao-discreto` — e
   o "Mais recentes primeiro" da linha do tempo, que só troca a ordem de
   leitura, acendia vermelho como se fosse apagar alguma coisa. */
.botao-discreto.discreto-perigo:hover {
  background: var(--erro-fundo-suave); border-color: var(--erro-claro);
  color: var(--erro);
}

button:disabled,
button:disabled:hover {
  background: var(--superficie-3); border-color: var(--superficie-3);
  color: var(--texto-desabilitado); cursor: not-allowed;
}

/* ============================================================================
   Campos de formulário (MUI outlined)
   ============================================================================ */

input, select, textarea {
  padding: 9px 12px;
  border: 1px solid var(--borda-padrao);
  border-radius: var(--raio);
  font-size: .875rem;
  background: var(--superficie-1);
  color: var(--texto-primario);
  font-family: var(--fonte-texto);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
input::placeholder, textarea::placeholder { color: var(--texto-marcador); }
input:hover, select:hover, textarea:hover { border-color: var(--texto-secundario); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: 0 0 0 1px var(--primaria);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--superficie-3); color: var(--texto-desabilitado);
  border-color: var(--borda-desabilitada); cursor: not-allowed;
}
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; accent-color: var(--primaria);
  padding: 0; box-shadow: none;
}
select {
  /* seta própria: o `appearance: none` tira a do sistema, que muda de
     desenho a cada SO e quebra a impressão de produto único. */
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B5B66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
}

form#formulario-novo { display: flex; flex-direction: column; gap: 4px; max-width: 640px; }
form#formulario-novo > label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .8125rem; font-weight: 700; color: var(--texto-escuro);
  margin-bottom: 4px;
}
form#formulario-novo > button[type="submit"] {
  align-self: flex-start; margin-top: 20px; min-height: 40px; padding: 8px 26px;
}

/* ============================================================================
   Tabela de execuções
   ============================================================================ */

/* A tabela nunca deve vazar do cartao branco: o wrapper e quem rola na
   horizontal (tela estreita/media), nunca a pagina inteira. Em telas largas
   `table-layout: fixed` + as larguras por coluna abaixo bastam para caber
   sem precisar rolar. */
.tabela-jobs-scroll {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--raio-grande);
}
.tabela-jobs {
  width: 100%; min-width: 640px; table-layout: fixed;
  border-collapse: collapse; font-size: .875rem;
  border: 1px solid var(--divisor); border-radius: var(--raio-grande);
}
.tabela-jobs th, .tabela-jobs td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--divisor);
  overflow-wrap: break-word;
}
.tabela-jobs thead th {
  background: var(--superficie-2);
  color: var(--texto-secundario); text-transform: uppercase; letter-spacing: .08em;
  font-size: .6875rem; font-weight: 700; white-space: nowrap;
}
.tabela-jobs tbody tr { transition: background var(--transicao); }
.tabela-jobs tbody tr:nth-child(even) { background: var(--superficie-5); }
.tabela-jobs tbody tr:hover { background: var(--primaria-tinta-04); }
.tabela-jobs tbody tr:last-child td { border-bottom: 0; }
/* Larguras relativas das 8 colunas (ID, O que, Alvo, Operador, Estado,
   Duração, Criado em, Ações) — somam 100%. O ID e o mais previsivel em
   tamanho (timestamp-hex), por isso e o mais estreito; Ações e o mais largo
   porque pode ter dois botoes empilhados. */
.tabela-jobs th:nth-child(1), .tabela-jobs td:nth-child(1) { width: 11%; }
.tabela-jobs th:nth-child(2), .tabela-jobs td:nth-child(2) { width: 13%; }
.tabela-jobs th:nth-child(3), .tabela-jobs td:nth-child(3) { width: 16%; }
.tabela-jobs th:nth-child(4), .tabela-jobs td:nth-child(4) { width: 12%; }
.tabela-jobs th:nth-child(5), .tabela-jobs td:nth-child(5) { width: 16%; }
.tabela-jobs th:nth-child(6), .tabela-jobs td:nth-child(6) { width: 9%; }
.tabela-jobs th:nth-child(7), .tabela-jobs td:nth-child(7) { width: 11%; }
.tabela-jobs th:nth-child(8), .tabela-jobs td:nth-child(8) { width: 12%; }
/* ID: mono, menor, uma linha só — o id completo vive no `title` (JS). */
.tabela-jobs td:first-child {
  font-family: var(--fonte-mono); color: var(--texto-secundario);
  font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tabela-jobs .tag { white-space: normal; }
.tabela-jobs td:last-child { text-align: right; }
.tabela-jobs .col-quando { color: var(--texto-secundario); white-space: nowrap; }
/* Botoes da coluna Ações empilhados: dois botoes lado a lado é que forçava
   a coluna (e a tabela inteira) a estourar a largura do cartão. */
.tabela-jobs .acoes-linha-job {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}

/* Task D (#152): execução de outro operador — visível na listagem publica,
   sem ação nenhuma. Texto discreto, mesmo tom de "Criado em"; nenhuma cor
   nova, tudo do token de marca já usado no resto da tabela. */
.tabela-jobs .texto-somente-leitura {
  color: var(--texto-desabilitado); font-size: .8125rem; font-style: italic;
}
.tabela-jobs tr.linha-somente-leitura { color: var(--texto-secundario); }

/* Estado vazio: não é um parágrafo solto, é uma área com convite à ação. */
.estado-vazio {
  border: 1px dashed var(--borda-container); border-radius: var(--raio-grande);
  padding: 44px 24px; text-align: center; color: var(--texto-secundario);
  background: var(--superficie-5);
}
.estado-vazio .estado-vazio-icone { font-size: 2rem; display: block; margin-bottom: 10px; opacity: .55; }
.estado-vazio p { margin: 0 0 4px; font-size: .95rem; color: var(--texto-primario); font-weight: 600; }
.estado-vazio .dica { margin: 0; }

/* ============================================================================
   Etiquetas e estados
   ============================================================================ */

.tag {
  display: inline-block;
  border: 1px solid var(--divisor);
  border-radius: var(--raio);
  padding: 2px 8px;
  font-size: .75rem;
  color: var(--texto-primario);
  background: var(--superficie-2);
  font-family: var(--fonte-mono);
  white-space: nowrap;
}

/* Um estado de execução é informação de status: cor + palavra, nunca só cor
   (daltonismo). O texto legível vem do JS; aqui é só a pintura. */
.badge-estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--raio-pilula);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-estado::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.badge-estado.na_fila {
  background: var(--neutro-fundo); color: var(--neutro-forte); border-color: #d3d5d8;
}
.badge-estado.rodando {
  background: var(--info-fundo); color: var(--info-forte); border-color: #b3d7ff;
}
.badge-estado.rodando::before { animation: pulsar 1.4s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.badge-estado.aguardando_operador,
.badge-estado.aguardando_aprovacao,
.badge-estado.pausado {
  background: var(--atencao-fundo); color: var(--atencao-forte); border-color: #f3e0a6;
}
.badge-estado.concluido {
  background: var(--sucesso-fundo); color: var(--sucesso-forte); border-color: #b7dfc2;
}
.badge-estado.erro {
  background: var(--erro-fundo); color: var(--erro-forte); border-color: #f0bcc1;
}
.badge-estado.interrompido,
.badge-estado.terminou_sem_resultado,
.badge-estado.encerrada {
  background: var(--neutro-fundo); color: var(--neutro-forte); border-color: #d3d5d8;
}

/* ============================================================================
   Textos auxiliares e avisos
   ============================================================================ */

.dica { color: var(--texto-secundario); font-size: .8125rem; font-style: normal; }

/* Alerta de erro no padrão MuiAlert severity="error". */
.erro {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--erro-fundo-suave);
  border: 1px solid var(--erro-claro);
  border-left: 4px solid var(--erro);
  color: var(--erro-forte);
  padding: 12px 14px;
  border-radius: var(--raio);
  font-size: .875rem;
}
.erro::before { content: "!"; font-weight: 800; color: var(--erro); flex: none; }

/* Bloco de decisão (cidade já cadastrada, lista de cidades encontradas). */
.opcoes {
  background: var(--superficie-offwhite);
  border: 1px solid #d6e3ef;
  border-left: 4px solid var(--info);
  border-radius: var(--raio);
  padding: 14px 16px;
  margin-top: 16px;
}
.opcoes > p:first-child { margin-top: 0; font-weight: 600; color: var(--texto-escuro); }
.opcoes ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.opcoes li button {
  width: 100%; text-align: left; justify-content: flex-start;
  background: var(--superficie-1); color: var(--texto-primario);
  border-color: var(--borda-container);
  text-transform: none; font-weight: 600; letter-spacing: 0; font-size: .875rem;
}
.opcoes li button:hover {
  background: var(--primaria-tinta-04); border-color: var(--primaria); color: var(--primaria);
}
.aviso-staging { color: var(--atencao-forte); font-size: .8125rem; font-weight: 600; margin: 12px 0 6px; }

/* ============================================================================
   Detalhe da execução
   ============================================================================ */

.meta-kv {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--divisor); border-radius: var(--raio-grande);
  background: var(--superficie-5);
  margin-bottom: 20px; overflow: hidden;
}
.meta-kv .item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 18px; flex: 1 1 160px; min-width: 0;
  border-right: 1px solid var(--divisor);
}
.meta-kv .item:last-child { border-right: 0; }
.meta-kv .k {
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-secundario); font-weight: 700;
}
.meta-kv .v {
  font-size: .875rem; font-weight: 600; color: var(--texto-escuro);
  overflow: hidden; text-overflow: ellipsis;
}

.acoes-job { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }

.cartao {
  border: 1px solid var(--divisor);
  border-left: 4px solid var(--secundaria);
  border-radius: var(--raio-grande);
  padding: 18px 20px;
  margin-bottom: 18px;
  background: var(--superficie-1);
}
/* Pergunta e aprovação PARAM a execução esperando o humano: têm que gritar
   mais que o resto da tela. Sombra aqui é proposital — é o único elemento
   da interface que "flutua". */
.cartao-pergunta, .cartao-aprovacao {
  border-left-color: var(--atencao-escura);
  background: #FFFDF7;
  box-shadow: var(--sombra-2);
}
.cartao-resultado { border-left-color: var(--sucesso); }
.cabecalho-resultado {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.cabecalho-resultado h4 { margin: 0; }
.grupo-resultado { margin-top: 14px; }
.grupo-resultado h5 {
  margin: 0 0 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-secundario);
}
.grupo-resultado ul { margin: 0; padding-left: 20px; }
.grupo-resultado li { margin-bottom: 3px; font-size: .875rem; }
.lista-artefatos { list-style: none; padding: 0; }
.lista-artefatos li { margin-bottom: 4px; }
.lista-artefatos code {
  font-family: var(--fonte-mono); font-size: .8125rem;
  background: var(--superficie-2); padding: 2px 7px; border-radius: 3px;
  color: var(--texto-escuro); word-break: break-all;
}
.rodape-resultado {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--divisor); font-size: .8125rem; color: var(--texto-secundario);
}
.rodape-resultado b { color: var(--texto-primario); font-weight: 700; }
.cartao h4 { margin-top: 0; }
/* Um campo de usuário não fica melhor com 1100px de largura: a linha longa
   demais atrapalha a leitura e some com a noção de "quanto se espera aqui". */
.cartao form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; max-width: 560px; }
.cartao label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .8125rem; font-weight: 700; color: var(--texto-escuro);
}
.cartao form button[type="submit"] { align-self: flex-start; }
.cartao pre {
  background: var(--texto-escuro); color: #F1F5F9; padding: 14px; border-radius: var(--raio);
  border: 1px solid var(--texto-escuro); font-family: var(--fonte-mono); font-size: .8125rem;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 12px 0 0;
}
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ============================================================================
   Linha do tempo
   ============================================================================ */

.timeline {
  display: flex; flex-direction: column;
  position: relative; padding-left: 22px;
}
/* trilho vertical contínuo: dá a leitura de "sequência", que uma pilha de
   caixas soltas não dá */
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--divisor);
}
.evento {
  position: relative;
  padding: 10px 0 12px 14px;
  font-size: .875rem;
  border-bottom: 1px solid var(--divisor);
}
.evento:last-child { border-bottom: 0; }
.evento::before {
  content: ""; position: absolute; left: -21px; top: 15px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--superficie-1); border: 2px solid var(--borda-container);
}
.evento .rotulo-evento {
  font-weight: 700; margin-right: 8px; font-size: .625rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--secundaria);
}
.evento .hora { color: var(--texto-desabilitado); font-size: .6875rem; margin-left: 4px; }
.evento .corpo-evento { margin-top: 4px; }

.evento.tipo-texto::before { border-color: var(--primaria); background: var(--primaria); }
.evento.tipo-texto { white-space: normal; }
.evento.tipo-tool::before { border-color: var(--etiqueta-azul); }
.evento.tipo-tool .corpo-evento {
  font-family: var(--fonte-mono); font-size: .8125rem; color: var(--texto-secundario);
  word-break: break-word;
}
.evento.tipo-tool .rotulo-evento { color: var(--info-forte); }
.evento.tipo-erro::before { border-color: var(--erro); background: var(--erro); }
.evento.tipo-erro { background: var(--erro-fundo-suave); border-radius: var(--raio); padding-left: 14px; }
.evento.tipo-erro .rotulo-evento { color: var(--erro); }
.evento.tipo-progresso { color: var(--texto-desabilitado); }
.evento.tipo-progresso .rotulo-evento { color: var(--texto-desabilitado); }
.evento.tipo-resultado::before { border-color: var(--sucesso); background: var(--sucesso); }
.evento.tipo-resultado .rotulo-evento { color: var(--sucesso-forte); }
.evento.tipo-pergunta::before, .evento.tipo-aprovacao::before {
  border-color: var(--atencao-escura); background: var(--atencao);
}
.evento.tipo-pergunta .rotulo-evento, .evento.tipo-aprovacao .rotulo-evento { color: var(--atencao-forte); }

/* Ordem invertida: o DOM continua cronológico e só a pintura vira do avesso
   (ver aplicarOrdemTimeline em app.js). O trilho e os marcadores são
   posicionados por evento, então acompanham a inversão sem ajuste. */
.timeline.recentes-primeiro { flex-direction: column-reverse; }
.timeline.recentes-primeiro .evento:last-child { border-bottom: 1px solid var(--divisor); }
.timeline.recentes-primeiro .evento:first-child { border-bottom: 0; }

.cabecalho-timeline {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.cabecalho-timeline h3 { margin-bottom: 0; }

/* Marcos da conversa (início, novo turno, encerramento): não são fala nem
   ferramenta — são a moldura do que aconteceu, e por isso ganham faixa
   própria em vez de se misturarem à sequência de comandos. */
.evento.tipo-marco {
  background: var(--primaria-tinta-04);
  border-radius: var(--raio);
  padding-left: 14px;
}
.evento.tipo-marco::before { border-color: var(--primaria); background: var(--superficie-1); }
.evento.tipo-marco .rotulo-evento { color: var(--primaria); }
.evento.tipo-marco .corpo-evento { color: var(--texto-secundario); }
.evento.tipo-mensagem_operador { background: var(--superficie-offwhite); border-radius: var(--raio); padding-left: 14px; }
.evento.tipo-mensagem_operador::before { border-color: var(--secundaria-contraste); background: var(--secundaria-contraste); }
.evento.tipo-mensagem_operador .rotulo-evento { color: var(--secundaria); }

/* ============================================================================
   Conversa encerrada (controle do operador, não desfecho do agente)
   ============================================================================ */

.badge-conversa {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
}
.badge-conversa.aberta { background: var(--info-fundo); color: var(--info-forte); }
.badge-conversa.encerrada { background: var(--neutro-fundo); color: var(--neutro-forte); }

.aviso-encerrada {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--superficie-2); border-left: 4px solid var(--borda-container);
  border-radius: var(--raio); padding: 12px 14px; margin: 12px 0;
  color: var(--texto-secundario); font-size: .875rem;
}
.aviso-encerrada strong { color: var(--texto-escuro); }

/* Task G (#152): há quanto tempo a conversa aberta segura a trava (lista) e
   aviso de evidência de homologação não promovida (cartão de encerramento). */
.trava-desde {
  display: block; margin-top: 4px;
  font-size: .75rem; color: var(--texto-secundario);
}
/* Fase 4: há quanto tempo a execução espera o operador (pergunta aberta ou
   pausada) — cor de atenção, é o que pede ação de quem está vendo a lista. */
.esperando-desde {
  display: block; margin-top: 4px;
  font-size: .75rem; color: var(--atencao-forte);
}
.botao-perigo-texto { margin-left: 6px; color: var(--erro-forte); }
.aviso-homolog {
  margin-top: 8px; padding: 8px 12px; border-radius: var(--raio);
  background: var(--atencao-fundo); color: var(--atencao-forte); font-size: .8125rem;
}
.aviso-homolog ul { margin: 6px 0 0; padding-left: 18px; }

.placar-conversas {
  margin-top: 4px; font-size: .8125rem; font-weight: 600; color: var(--secundaria);
}

/* ============================================================================
   Markdown seguro (fala do agente, resultado da ferramenta, resumo)
   Gerado por renderMarkdownSeguro() em app.js — o texto é SEMPRE escapado
   antes de qualquer marcação. Aqui é só apresentação de HTML já seguro.
   ============================================================================ */

.md-corpo { line-height: 1.6; }
.md-corpo p { margin: 0 0 8px; }
.md-corpo p:last-child { margin-bottom: 0; }
.md-corpo h4, .md-corpo h5, .md-corpo h6 { color: var(--texto-escuro); font-weight: 700; margin: 12px 0 6px; }
.md-corpo h4:first-child, .md-corpo h5:first-child, .md-corpo h6:first-child { margin-top: 0; }
.md-corpo h4 { font-size: 1rem; }
.md-corpo h5 { font-size: .9375rem; }
.md-corpo h6 { font-size: .875rem; letter-spacing: .02em; }
.md-corpo ul, .md-corpo ol { margin: 0 0 8px 20px; padding: 0; }
.md-corpo li { margin-bottom: 3px; }
.md-corpo a { color: var(--primaria); text-decoration: underline; text-underline-offset: 2px; }
.md-corpo a:hover { color: var(--primaria-escura); }
.md-corpo code {
  background: var(--primaria-tinta-08); color: var(--primaria);
  padding: 1px 5px; border-radius: 3px; font-size: .875em; font-family: var(--fonte-mono);
}
.md-corpo pre {
  background: var(--texto-escuro); border-radius: var(--raio);
  padding: 12px 14px; margin: 8px 0; overflow-x: auto; font-family: var(--fonte-mono);
}
.md-corpo pre code { background: none; color: #E2E8F0; padding: 0; font-size: .8125rem; }

/* markdown-it entrega tabela, citação e lista aninhada — que o parser antigo
   nunca produzia e por isso o CSS não previa. Tabela larga rola dentro do
   próprio bloco: a página nunca rola de lado. */
.md-corpo table {
  border-collapse: collapse; margin: 8px 0; font-size: .8125rem;
  display: block; overflow-x: auto; max-width: 100%;
}
.md-corpo th, .md-corpo td {
  border: 1px solid var(--divisor); padding: 6px 10px; text-align: left; vertical-align: top;
}
.md-corpo th { background: var(--superficie-2); color: var(--texto-escuro); font-weight: 700; white-space: nowrap; }
.md-corpo tr:nth-child(even) td { background: var(--superficie-5); }
.md-corpo blockquote {
  margin: 8px 0; padding: 4px 0 4px 12px;
  border-left: 3px solid var(--primaria-tinta-16); color: var(--texto-secundario);
}
.md-corpo ul ul, .md-corpo ol ol, .md-corpo ul ol, .md-corpo ol ul { margin-bottom: 0; }
.md-corpo hr { border: 0; border-top: 1px solid var(--divisor); margin: 12px 0; }

.md-expandir { border: none; padding: 0; }
.md-expandir > summary {
  cursor: pointer; color: var(--texto-secundario); font-size: .875rem; list-style: none;
}
.md-expandir > summary::-webkit-details-marker { display: none; }
.md-expandir > summary:hover { color: var(--texto-escuro); }
.md-expandir .md-expandir-rotulo { color: var(--primaria); font-weight: 700; }
.md-expandir[open] > summary { margin-bottom: 8px; }

/* ============================================================================
   Formulário dinâmico por skill
   ============================================================================ */

.descricao-skill {
  margin: 6px 0 0; color: var(--texto-secundario); font-size: .875rem;
}
.ajuda-skill {
  border: 1px solid #d6e3ef; border-left: 4px solid var(--info);
  background: var(--superficie-offwhite);
  padding: 12px 16px; border-radius: var(--raio); margin: 14px 0 22px;
  font-size: .8125rem; color: var(--texto-primario); line-height: 1.55;
}

.campo { margin-bottom: 20px; }
.campo-rotulo { display: flex; flex-direction: column; gap: 6px; }
/* Campo composto usa <div>, não <label> (ver construirCampo em app.js): o
   título precisa do peso que o <label> dava por padrão. */
div.campo-rotulo > .campo-titulo,
label.campo-rotulo > .campo-titulo {
  font-weight: 700; font-size: .8125rem; color: var(--texto-escuro);
}
.campo-titulo .obrigatorio { color: var(--erro-claro); margin-left: 2px; }
.campo-ajuda { margin: 6px 0 0; font-size: .78rem; color: var(--texto-secundario); }

.linha-radio {
  display: inline-flex; gap: 2px; align-items: center; margin-bottom: 10px;
  background: var(--superficie-2); border: 1px solid var(--divisor);
  border-radius: var(--raio); padding: 3px;
}
/* Alternador segmentado: os dois modos ("Integrador" / "Cidade e UF") são
   excludentes, então parecem um seletor único, não dois rádios soltos. */
.linha-radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.linha-radio label {
  font-weight: 600; font-size: .8125rem; color: var(--texto-secundario);
  padding: 5px 14px; border-radius: 3px; cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.linha-radio label:hover { color: var(--texto-escuro); }
.linha-radio input[type="radio"]:checked + label {
  background: var(--superficie-1); color: var(--primaria);
  box-shadow: var(--sombra-1);
}
.linha-radio input[type="radio"]:focus-visible + label { outline: 2px solid var(--primaria); outline-offset: 1px; }

.linha-cidade { display: flex; gap: 8px; }
.linha-cidade input:first-child { flex: 1; min-width: 0; }
.campo-uf-curto { width: 74px; flex: none; text-transform: uppercase; }
.campo-alvo > div > select, .campo-provider { width: 100%; max-width: 420px; }

#formulario-novo textarea, #formulario-chat textarea, .cartao textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  font-family: var(--fonte-mono); font-size: .8125rem; resize: vertical;
  line-height: 1.5;
}

/* ============================================================================
   Anexos: área de soltar arquivo
   ============================================================================

   O <input type="file"> nativo continua no DOM (é ele quem abre o seletor do
   sistema e é ele que o leitor de tela anuncia), mas fica fora da vista: a
   área visível é o rótulo. Isso resolve três coisas de uma vez —
     1) o controle passa a ter a aparência do produto, e não a do SO;
     2) arrastar-e-soltar funciona mesmo onde o seletor do navegador não
        abre (janela embutida, navegador sem integração com o SO);
     3) colar (Ctrl+V) um arquivo da área de transferência também vale.
   ============================================================================ */

.area-anexos {
  border: 1px solid var(--divisor); border-radius: var(--raio-grande);
  padding: 18px 20px; margin: 22px 0; background: var(--superficie-5);
}
.area-anexos h4 { margin: 0 0 4px; color: var(--texto-escuro); font-size: .9375rem; }
.area-anexos > .dica { margin: 0 0 14px; }

.zona-solta {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 2px dashed var(--borda-container);
  border-radius: var(--raio-grande);
  background: var(--superficie-1);
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.zona-solta:hover { border-color: var(--primaria); background: var(--primaria-tinta-04); }
.zona-solta.arrastando {
  border-color: var(--primaria); background: var(--primaria-tinta-08); border-style: solid;
}
.zona-solta.enviando { cursor: progress; opacity: .7; }
.zona-solta input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.zona-solta:focus-within { outline: 2px solid var(--primaria); outline-offset: 2px; }
.zona-solta-icone { font-size: 1.6rem; line-height: 1; opacity: .55; }
.zona-solta-titulo { font-weight: 700; color: var(--texto-escuro); font-size: .9375rem; }
.zona-solta-titulo .zona-solta-link {
  color: var(--primaria); text-decoration: underline; cursor: pointer;
  text-underline-offset: 2px;
}
.zona-solta-formatos { font-size: .75rem; color: var(--texto-secundario); }

/* Variante compacta: usada onde anexar é o caminho SECUNDÁRIO — nos campos
   "cole ou anexe", em que a caixa de texto acima já é a via principal. Uma
   zona de tamanho inteiro embaixo de cada uma das quatro caixas do
   /nfse-erro transformava o formulário numa rolagem sem fim. */
.zona-solta.compacta {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 9px 14px; text-align: left; border-width: 1px;
  background: var(--superficie-5);
}
.zona-solta.compacta .zona-solta-icone { font-size: 1rem; }
.zona-solta.compacta .zona-solta-titulo { font-size: .8125rem; font-weight: 600; color: var(--texto-secundario); }
.zona-solta.compacta .zona-solta-formatos { margin-left: auto; }

/* Retorno do envio: sempre visível, nunca só um texto cinza minúsculo. */
.retorno-envio {
  display: none; margin-top: 12px; padding: 10px 12px;
  border-radius: var(--raio); font-size: .8125rem; border: 1px solid transparent;
}
.retorno-envio.visivel { display: block; }
.retorno-envio.enviando { background: var(--info-fundo); color: var(--info-forte); border-color: #b3d7ff; }
.retorno-envio.ok { background: var(--sucesso-fundo); color: var(--sucesso-forte); border-color: #b7dfc2; }
.retorno-envio.falha { background: var(--erro-fundo); color: var(--erro-forte); border-color: #f0bcc1; }

.lista-staging { list-style: none; padding: 0; margin: 0; }
.lista-staging li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; font-size: .8125rem;
  border: 1px solid var(--divisor); border-radius: var(--raio);
  background: var(--superficie-1); margin-bottom: 6px;
}
.lista-staging li .nome-arquivo { font-weight: 600; color: var(--texto-escuro); word-break: break-all; }
.lista-staging li .tamanho-arquivo { color: var(--texto-secundario); font-family: var(--fonte-mono); font-size: .75rem; }

/* estado por arquivo dentro do cartão de pergunta */
.arquivo-enviado { font-size: .8125rem; color: var(--sucesso-forte); font-weight: 600; }
.arquivo-enviado.enviando { color: var(--texto-secundario); font-weight: 400; }
.arquivo-enviado.falha { color: var(--erro); font-weight: 700; }

.linha-arquivo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ============================================================================
   Conversa depois da execução
   ============================================================================ */

/* Fica ACIMA da linha do tempo, então precisa de respiro dos dois lados: sem o
   margin-bottom o campo de escrita encostava no título "Linha do tempo" e os
   dois blocos liam como um só. */
.area-chat { margin-top: 28px; margin-bottom: 28px; }
#formulario-chat { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
#formulario-chat textarea { max-width: 100%; }
/* Anexos da próxima mensagem: ocupa a largura do formulário, que alinha à esquerda. */
.anexos-chat { align-self: stretch; }
.anexos-chat .lista-staging:not(:empty) { margin-top: 8px; }
.anexos-mensagem { list-style: none; padding: 0; margin: 6px 0 0; font-size: .8125rem; color: var(--texto-secundario); }

/* ============================================================================
   Documentos
   ============================================================================ */

.layout-documentos { display: flex; gap: 20px; align-items: stretch; }
.coluna-arvore { width: 380px; flex: none; display: flex; flex-direction: column; }
.busca-docs {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  padding: 9px 12px 9px 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat; background-position: 10px center;
}
#contagem-docs { margin: 0 0 8px; font-size: .75rem; }
.arvore-docs {
  flex: 1; height: 68vh; overflow: auto;
  border: 1px solid var(--divisor); border-radius: var(--raio-grande);
  padding: 10px 12px; background: var(--superficie-5);
}
.visor-doc {
  flex: 1; min-width: 0; height: 68vh; overflow: auto;
  border: 1px solid var(--divisor); border-radius: var(--raio-grande);
  padding: 16px 20px; background: var(--superficie-1);
}
/* Enquanto nada foi escolhido, o visor é um convite centralizado — e não
   uma caixa vazia de 12px de altura ao lado de uma árvore de 700px. */
.visor-doc > .dica:only-child {
  display: flex; align-items: center; justify-content: center;
  height: 100%; margin: 0; text-align: center;
}
.visor-doc pre { white-space: pre-wrap; word-break: break-word; font-family: var(--fonte-mono); }

.arvore-docs details.pasta-doc { margin-bottom: 1px; }
.arvore-docs summary {
  cursor: pointer; font-weight: 700; color: var(--texto-escuro); font-size: .8125rem;
  list-style: none; display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; border-radius: var(--raio);
}
.arvore-docs summary:hover { background: var(--primaria-tinta-04); }
.arvore-docs summary::-webkit-details-marker { display: none; }
.arvore-docs summary::marker { content: ""; }
.arvore-docs summary::before {
  content: "▸"; font-size: .7em; color: var(--texto-secundario); flex-shrink: 0;
  transition: transform var(--transicao);
}
.arvore-docs details[open] > summary::before { transform: rotate(90deg); }
.arvore-docs .pasta-nome { color: var(--texto-escuro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arvore-docs .pasta-contagem { color: var(--texto-desabilitado); font-size: .6875rem; margin-left: auto; font-weight: 600; }
.arvore-docs .item-doc {
  display: flex; align-items: center; gap: 8px; padding: 3px 6px; font-size: .8125rem;
  border-radius: var(--raio);
}
/* "Baixar" em toda linha, 2117 vezes, é ruído: só aparece na linha sob o
   ponteiro. `opacity: 0` (e não `visibility`/`display`) mantém o link no
   fluxo, na ordem de tabulação e visível para leitor de tela. */
.arvore-docs .item-doc a { opacity: 0; transition: opacity var(--transicao); }
.arvore-docs .item-doc:hover a,
.arvore-docs .item-doc a:focus-visible { opacity: 1; }
.arvore-docs .item-doc:hover { background: var(--primaria-tinta-04); }
.arvore-docs .item-doc-icone { flex-shrink: 0; }
.arvore-docs .item-doc-tamanho { color: var(--texto-desabilitado); font-size: .6875rem; flex-shrink: 0; font-family: var(--fonte-mono); }
.arvore-docs .item-doc a, .arvore-docs .item-doc button.link-doc {
  background: none; border: none; color: var(--texto-primario); padding: 0;
  font-size: .8125rem; font-family: var(--fonte-texto); font-weight: 500;
  min-height: 0; text-transform: none; letter-spacing: 0;
}
.arvore-docs .item-doc button.link-doc {
  flex: 1; text-align: left; justify-content: flex-start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arvore-docs .item-doc button.link-doc:hover,
.arvore-docs .item-doc a:hover {
  text-decoration: underline; color: var(--primaria); background: none;
}

.visor-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--divisor);
  position: sticky; top: -16px; background: var(--superficie-1); z-index: 1;
}
.visor-caminho { font-family: var(--fonte-mono); font-size: .75rem; color: var(--texto-secundario); word-break: break-all; }
/* Sem isto, o link "Baixar" do cabeçalho do visor sai no azul padrão do
   navegador — a única cor da tela que não é do tema. */
.visor-doc a { color: var(--primaria); text-underline-offset: 2px; }
.visor-doc a:hover { color: var(--primaria-escura); }
.visor-cabecalho a { font-weight: 700; font-size: .8125rem; white-space: nowrap; }
.visor-pdf, .visor-html {
  width: 100%; height: 64vh; border: 1px solid var(--divisor);
  background: #fff; border-radius: var(--raio);
}
.visor-imagem { max-width: 100%; height: auto; border-radius: var(--raio); border: 1px solid var(--divisor); }
.visor-codigo { font-size: .8125rem; }
.visor-markdown { line-height: 1.65; }
.visor-markdown h1, .visor-markdown h2, .visor-markdown h3 {
  color: var(--texto-escuro); margin: 22px 0 10px; border: 0; padding: 0;
  text-transform: none; letter-spacing: -.01em; line-height: 1.25;
}
.visor-markdown h1:first-child { margin-top: 0; }
.visor-markdown h1 code, .visor-markdown h2 code, .visor-markdown h3 code { font-size: .85em; }
.visor-markdown h1 { font-size: 1.375rem; }
.visor-markdown h2 { font-size: 1.125rem; }
.visor-markdown h3 { font-size: 1rem; }
.visor-markdown code {
  font-family: var(--fonte-mono); font-size: .875em;
  background: var(--superficie-2); padding: 1px 5px; border-radius: 3px;
}
.visor-markdown pre {
  background: var(--texto-escuro); color: #E2E8F0; padding: 14px;
  border-radius: var(--raio); overflow-x: auto;
}
.visor-markdown pre code { background: none; padding: 0; color: inherit; }
.visor-markdown blockquote {
  margin: 14px 0; padding: 8px 16px; color: var(--texto-secundario);
  border-left: 4px solid var(--secundaria); background: var(--superficie-offwhite);
  border-radius: 0 var(--raio) var(--raio) 0;
}
.visor-markdown a { color: var(--primaria); text-underline-offset: 2px; }

/* Tabela larga (leiaute de campos, tabela NBS) rola dentro do visor — a
   página inteira nunca rola na horizontal. */
.visor-markdown table, .visor-planilha table {
  border-collapse: collapse; width: 100%; margin: 14px 0; font-size: .8125rem;
  display: block; overflow-x: auto; white-space: nowrap;
}
.visor-markdown th, .visor-markdown td,
.visor-planilha th, .visor-planilha td {
  border: 1px solid var(--divisor); padding: 7px 11px; text-align: left;
}
.visor-markdown th, .visor-planilha th {
  background: var(--superficie-2); color: var(--texto-escuro); font-weight: 700;
}
.visor-planilha { overflow-x: auto; }

/* Realce de sintaxe (highlight.js) sobre fundo CLARO. */
.hljs-keyword, .hljs-selector-tag, .hljs-name { color: #7B1FA2; }
.hljs-string, .hljs-attr { color: #0B7285; }
.hljs-number, .hljs-literal { color: #B45309; }
.hljs-comment, .hljs-meta { color: var(--texto-desabilitado); font-style: italic; }
.hljs-tag { color: var(--texto-secundario); }
.hljs-title, .hljs-built_in { color: var(--primaria); }
/* dentro de <pre> escuro (markdown do agente) a paleta clara não serve */
.md-corpo pre .hljs-keyword, .visor-markdown pre .hljs-keyword { color: #C4B5FD; }
.md-corpo pre .hljs-string, .visor-markdown pre .hljs-string { color: #6EE7B7; }
.md-corpo pre .hljs-number, .visor-markdown pre .hljs-number { color: #FCD34D; }
.md-corpo pre .hljs-title, .visor-markdown pre .hljs-title { color: #93C5FD; }

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

@media (max-width: 900px) {
  main { padding: 16px 14px 60px; }
  .tela { padding: 18px 16px 22px; }
  .layout-documentos { flex-direction: column; }
  .coluna-arvore { width: 100%; }
  .arvore-docs { max-height: 40vh; }
  .visor-doc { width: 100%; max-height: none; }
  .meta-kv .item { border-right: 0; border-bottom: 1px solid var(--divisor); flex-basis: 100%; }
  .meta-kv .item:last-child { border-bottom: 0; }
}

@media (max-width: 720px) {
  .cabecalho { height: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 14px 0; }
  .navegacao { overflow-x: auto; }
  .botao-nav { padding: 10px 12px; height: auto; }
  .botao-nav::after { bottom: 0; }
  /* Tabela vira lista de cartões: 8 colunas não cabem num celular. O wrapper
     deixa de rolar (nao ha mais linha larga dentro dele) e cada `tr` vira um
     cartão empilhado. */
  .tabela-jobs-scroll { overflow-x: visible; }
  .tabela-jobs, .tabela-jobs tbody, .tabela-jobs tr, .tabela-jobs td { display: block; width: 100%; }
  .tabela-jobs { min-width: 0; }
  .tabela-jobs th, .tabela-jobs td { width: auto !important; }
  .tabela-jobs thead { display: none; }
  .tabela-jobs tr {
    border: 1px solid var(--divisor); border-radius: var(--raio-grande);
    margin-bottom: 10px; padding: 8px 4px;
  }
  .tabela-jobs td { border-bottom: 0; padding: 4px 12px; }
  .tabela-jobs td:first-child { white-space: normal; overflow: visible; text-overflow: clip; }
  .tabela-jobs td::before {
    content: attr(data-coluna) ": ";
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--texto-secundario); font-weight: 700;
  }
  .tabela-jobs td:last-child { text-align: left; }
  .tabela-jobs td:last-child::before { content: ""; }
  .tabela-jobs .acoes-linha-job { align-items: flex-start; }
  form#formulario-novo { max-width: 100%; }
}

@media print {
  .cabecalho, .navegacao, .acoes, .acoes-job, .area-chat, .botao-voltar { display: none !important; }
  body { background: #fff; }
  .tela { border: 0; padding: 0; }
}

/* --- aviso de mapeamento (Nova execução) ------------------------------------
   Uma linha, logo abaixo da descrição da skill, e só nas skills que partem de
   um mapping existente (`conferir_mapping` no catálogo). Era um bloco de 4
   linhas fixo no topo do formulário: aparecia em toda skill, inclusive nas que
   ainda vão criar o modelo, e virou papel de parede. Aviso que aparece sempre
   não é lido; a intensidade aqui é proporcional ao que ele pede — uma
   conferência, não um bloqueio. */
.aviso-mapping {
  display: flex;
  gap: 8px;
  align-items: baseline;
  background: var(--atencao-fundo);
  border-left: 3px solid var(--atencao);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 8px 12px;
  margin: 0 0 18px;
  font-size: .78rem;
  color: var(--texto-primario);
  line-height: 1.45;
}
.aviso-mapping > span:first-child { color: var(--atencao-forte); flex: none; }
.aviso-mapping .link-inline { font-size: .78rem; text-transform: none; }
/* Botão que se comporta como link dentro de uma frase. Duas correções que
   parecem detalhe e não são:

   1) `button:hover` é (0,1,1) e vencia `.link-inline` (0,1,0): no hover o link
      voltava a ser um botão roxo chapado no meio do texto. Os estados abaixo
      são declarados com a classe + pseudo-classe (0,2,0) para ganhar do
      elemento — e repetem `background`/`border`, senão a regra do elemento
      volta a valer só nessas propriedades.
   2) O reset do botão (`inline-flex`, `min-height: 36px`, caixa alta, tracking)
      transformava o link numa caixa de 36px de altura dentro do parágrafo.
      Aqui ele volta a ser texto: `display: inline`, métricas herdadas. */
.link-inline {
  display: inline;
  background: none; border: 0; padding: 0; min-height: 0;
  font: inherit; font-weight: 700;
  text-transform: none; letter-spacing: inherit;
  color: var(--primaria); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.link-inline:hover,
.link-inline:active,
.link-inline:focus-visible {
  background: none; border-color: transparent;
  color: var(--primaria-clara);
  text-decoration-thickness: 2px;
}

/* --- marcador de arquivo alterado por execução em aberto -------------------- */
.arvore-docs .item-doc-modificado { background: var(--atencao-fundo); border-radius: 4px; }
.arvore-docs .item-doc-modificado:hover { background: var(--atencao-fundo); }
.marcador-modificado {
  flex-shrink: 0;
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--atencao-forte);
  background: #fff;
  border: 1px solid var(--atencao);
  border-radius: 999px;
  padding: 1px 7px;
}
.ponto-modificado { color: var(--atencao-escura); font-size: .625rem; flex-shrink: 0; margin-left: 6px; }
.arvore-docs .pasta-contagem + .ponto-modificado { margin-left: 6px; }

/* --- marcacao estilo VS Code contra origin/master (Task L, #152) -----------
   Sem banner: so cor no nome do arquivo (link-doc) e um ponto na pasta que o
   contem. As cores sao as MESMAS do resto da interface — nenhuma inventada
   aqui (ver docs/referencia/interface/identidade-visual.md):
     modificado -> --atencao-forte (o mesmo tom de "alterado" acima)
     novo       -> --sucesso-forte
     removido   -> --erro-forte (+ risco no nome)
     publicado  -> --texto-desabilitado (ja e o tom "apagado" do tema) */
.arvore-docs .item-doc-estado-modificado button.link-doc { color: var(--atencao-forte); font-weight: 700; }
.arvore-docs .item-doc-estado-novo button.link-doc { color: var(--sucesso-forte); font-weight: 700; }
.arvore-docs .item-doc-estado-removido button.link-doc {
  color: var(--erro-forte); font-weight: 700; text-decoration: line-through;
}
.arvore-docs .item-doc-estado-publicado button.link-doc { color: var(--texto-desabilitado); }

.ponto-estado { font-size: .625rem; flex-shrink: 0; margin-left: 6px; }
.ponto-estado-modificado { color: var(--atencao-forte); }
.ponto-estado-novo { color: var(--sucesso-forte); }
.ponto-estado-removido { color: var(--erro-forte); }
.ponto-estado-publicado { color: var(--texto-desabilitado); }
.arvore-docs .pasta-contagem + .ponto-estado { margin-left: 4px; }

/* Filtros discretos "só alterados" / "por operador" — texto pequeno, sem
   destaque, igual ao resto dos controles auxiliares da árvore. */
.filtros-docs {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 8px; font-size: .75rem; color: var(--texto-secundario);
}
.filtro-docs-item { display: inline-flex; align-items: center; gap: 5px; }
.filtro-docs-item select {
  font-size: .75rem; padding: 2px 6px; min-height: 0;
  border: 1px solid var(--borda-padrao); border-radius: var(--raio);
  background: var(--superficie-1); color: var(--texto-primario);
}

/* --- painel "conferir com produção" ----------------------------------------- */
.painel-mapping {
  border: 1px solid var(--borda-container);
  border-radius: var(--raio-grande);
  margin: 12px 0;
  background: var(--superficie-2);
}
.painel-mapping > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 700;
  font-size: .8125rem;
  color: var(--primaria);
}
.painel-mapping-corpo { padding: 0 14px 14px; }
.painel-mapping-corpo .dica { margin-top: 0; }
.mapping-colado {
  width: 100%;
  font-family: var(--fonte-mono);
  font-size: .75rem;
  padding: 8px;
  border: 1px solid var(--borda-padrao);
  border-radius: 6px;
  resize: vertical;
}
.saida-mapping { margin-top: 12px; }
.mapping-igual { color: var(--sucesso-forte); font-weight: 600; font-size: .8125rem; }
/* Ações do cabeçalho do visor (Copiar, Baixar) lado a lado. */
.visor-acoes { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* --- comparador lado a lado (ui/comparador.js) ------------------------------
   Tela cheia sobre a interface: o visor de Documentos tem metade da largura e
   um JSON com 8 níveis de indentação não cabe em duas colunas ali. */
body.cmp-aberto { overflow: hidden; }
.cmp-sobreposicao {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(21, 20, 26, .45);
  display: flex; align-items: stretch; justify-content: center;
  padding: 24px;
}
.cmp-janela {
  flex: 1; max-width: 1600px; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--superficie-1);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.cmp-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--divisor);
}
.cmp-titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-titulo h2 { margin: 0; font-size: 1rem; color: var(--texto-escuro); }
.cmp-navegacao { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-contador { font-size: .8125rem; font-weight: 700; color: var(--primaria); margin-right: 4px; }
.cmp-filtro { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; margin: 0 8px; }

.cmp-colunas {
  display: grid; grid-template-columns: 1fr 76px 1fr;
  background: var(--superficie-2); border-bottom: 1px solid var(--borda-container);
  font-size: .8125rem;
}
.cmp-coluna-titulo { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 58px; }
.cmp-lado-a strong { color: var(--erro-forte); }
.cmp-lado-b strong { color: var(--sucesso-forte); }
.cmp-estado {
  font-size: .6875rem; font-weight: 700; padding: 2px 8px; border-radius: var(--raio-pilula);
  background: var(--neutro-fundo); color: var(--neutro-forte);
}
.cmp-estado-alterado { background: var(--atencao-fundo); color: var(--atencao-forte); }
.cmp-estado-erro { background: var(--erro-fundo); color: var(--erro-forte); }

.cmp-rolagem { flex: 1; overflow: auto; }
.cmp-tabela {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  font-family: var(--fonte-mono); font-size: .75rem; line-height: 1.5;
}
.cmp-col-num { width: 48px; }
.cmp-col-meio { width: 76px; }
.cmp-tabela td { padding: 0 8px; vertical-align: top; }
.cmp-num {
  text-align: right; color: var(--texto-desabilitado); user-select: none;
  background: var(--superficie-5); border-right: 1px solid var(--divisor);
}
.cmp-texto { white-space: pre-wrap; word-break: break-word; color: var(--texto-escuro); }
.cmp-meio { text-align: center; white-space: nowrap; padding: 0 4px; border-left: 1px solid var(--divisor); border-right: 1px solid var(--divisor); }
.cmp-menos { background: var(--erro-fundo-suave); }
.cmp-mais { background: rgba(40, 175, 90, .08); }   /* tinta de --sucesso, como as tintas da primária */
.cmp-menos mark { background: var(--erro-fundo); color: var(--erro-forte); border-radius: 2px; }
.cmp-mais mark { background: var(--sucesso-fundo); color: var(--sucesso-forte); border-radius: 2px; }
/* lado sem linha correspondente: hachurado, para não parecer linha em branco */
.cmp-vazio {
  background: repeating-linear-gradient(135deg, var(--superficie-2) 0 4px, var(--superficie-1) 4px 8px);
}
.cmp-mudanca.cmp-atual .cmp-num { box-shadow: inset 3px 0 0 var(--primaria); }
.cmp-mudanca:first-child td, tr:not(.cmp-mudanca) + .cmp-mudanca td { border-top: 1px solid var(--borda-container); }
.cmp-dobra td { text-align: center; background: var(--superficie-4); padding: 2px; }
.cmp-dobra button { font-family: var(--fonte-texto); text-transform: none; letter-spacing: 0; }

button.cmp-seta {
  min-height: 22px; padding: 0 7px; margin: 1px 2px; font-size: .8125rem; line-height: 1;
  background: var(--superficie-1); color: var(--primaria); border-color: var(--borda-container);
}
button.cmp-seta:hover { background: var(--primaria); color: var(--primaria-contraste); border-color: var(--primaria); }

.cmp-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 18px; border-top: 1px solid var(--divisor); background: var(--superficie-2);
}
.cmp-rodape .linha-botoes { margin: 0; }
.cmp-aviso { margin: 0; font-size: .8125rem; color: var(--texto-secundario); flex: 1; min-width: 240px; }
.cmp-aviso-ok { color: var(--sucesso-forte); font-weight: 600; }
.cmp-aviso-erro { color: var(--erro); font-weight: 600; }

/* Caixa "copiar manualmente": só aparece quando o navegador recusou copiar. */
.copia-manual { z-index: 60; }
.copia-manual-janela { max-width: 960px; }
.copia-manual-texto {
  flex: 1; margin: 12px 18px 18px; padding: 10px; resize: none;
  font-family: var(--fonte-mono); font-size: .75rem; white-space: pre;
  border: 1px solid var(--borda-padrao); border-radius: var(--raio);
}

@media (max-width: 720px) {
  .cmp-sobreposicao { padding: 0; }
  .cmp-janela { border-radius: 0; }
  .cmp-col-num { width: 32px; }
  .cmp-coluna-titulo { padding-left: 14px; }
}

/* ============================================================================
   Tela Introdução
   ============================================================================
   Conteúdo de leitura, não de operação: coluna estreita (68ch) nas listas para
   a linha não ficar longa, e nenhuma sombra nova — cartão aqui é borda, como
   no resto (MuiPaper `variant: outlined`). */

.intro-par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.intro-cartao { margin: 0; }
.intro-cartao h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--texto-escuro);
  display: flex; align-items: center; gap: 8px;
}
.intro-cartao p { margin: 0 0 8px; font-size: .875rem; }
.intro-cartao p:last-child { margin-bottom: 0; }
.intro-icone { font-size: 1.125rem; line-height: 1; }
/* A distinção é semântica, não decorativa: o cartão da esquerda diz o que a
   ferramenta faz, o da direita o que ela não faz — e é esse o que mais custa
   quando se aprende errado. Daí o âmbar. */
.intro-cartao-e { border-left: 4px solid var(--primaria); }
.intro-cartao-nao { border-left: 4px solid var(--atencao); background: #FFFDF6; }
.intro-cartao-nao h3 { color: var(--atencao-forte); }

.intro-titulo-secao {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--texto-escuro);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divisor);
}

.intro-trilha {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.intro-trilha li {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--borda-container);
  border-radius: var(--raio-grande);
  background: var(--superficie-1);
  padding: 12px 14px;
}
.intro-passo-num {
  flex: none;
  width: 24px; height: 24px;
  border-radius: var(--raio-pilula);
  background: var(--primaria); color: var(--primaria-contraste);
  font-size: .75rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.intro-trilha li > div > strong { display: block; color: var(--texto-escuro); font-size: .9375rem; }
/* o `display:block` acima e do TITULO do passo; negrito dentro do paragrafo
   continua sendo enfase no meio da frase, nao uma linha propria. */
.intro-trilha p strong { display: inline; color: var(--texto-escuro); font-size: inherit; }
.intro-trilha p { margin: 6px 0 0; font-size: .8125rem; color: var(--texto-secundario); }
/* Quem faz o quê é a informação que o operador leigo mais erra: vira etiqueta,
   não frase solta no meio do parágrafo. */
.intro-quem {
  display: inline-block; margin-top: 4px;
  font-size: .625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  border-radius: var(--raio-pilula);
  padding: 1px 8px;
}
.intro-quem-maquina { background: var(--info-fundo); color: var(--info-forte); }
.intro-quem-voce { background: var(--primaria-tinta-08); color: var(--primaria); }
.intro-quem-fora { background: var(--neutro-fundo); color: var(--neutro-forte); }

.intro-nota { margin: 0 0 28px; max-width: 78ch; }

.intro-glossario {
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: minmax(150px, 190px) 1fr;
  gap: 0;
  border: 1px solid var(--borda-container);
  border-radius: var(--raio-grande);
  overflow: hidden;
}
.intro-glossario dt {
  font-weight: 700; color: var(--texto-escuro); font-size: .8125rem;
  padding: 10px 14px;
  background: var(--superficie-2);
  border-top: 1px solid var(--divisor);
}
.intro-glossario dd {
  margin: 0; font-size: .8125rem;
  padding: 10px 14px;
  border-top: 1px solid var(--divisor);
}
.intro-glossario dt:first-of-type, .intro-glossario dd:first-of-type { border-top: 0; }

.intro-regras, .intro-checklist {
  margin: 0 0 28px; padding-left: 0; list-style: none;
  max-width: 90ch;
}
.intro-regras li, .intro-checklist li {
  position: relative;
  padding: 0 0 10px 26px;
  font-size: .875rem;
}
.intro-regras li::before {
  content: "!"; position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: var(--raio-pilula);
  background: var(--atencao-fundo); color: var(--atencao-forte);
  font-weight: 800; font-size: .6875rem;
  display: flex; align-items: center; justify-content: center;
}
.intro-checklist { margin-bottom: 8px; }
.intro-checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--sucesso); font-weight: 800; font-size: .875rem;
}
.intro-regras strong, .intro-checklist strong { color: var(--texto-escuro); }

.intro-rodape {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--divisor);
  padding-top: 18px;
  margin-top: 8px;
}
.intro-rodape h3 { margin: 0 0 4px; font-size: 1rem; color: var(--texto-escuro); }
.intro-rodape .dica { margin: 0; max-width: 60ch; }
.intro-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================================
   "O que vem depois" — proximos_passos do catálogo
   ============================================================================
   Aparece em dois lugares, com o mesmo desenho: recolhido no formulário (antes
   de iniciar, é contexto) e ABERTO no cartão de resultado (depois de terminar,
   é a próxima ação do operador). */

.proximos-passos {
  border: 1px solid var(--borda-container);
  border-left: 4px solid var(--primaria);
  border-radius: var(--raio-grande);
  background: var(--superficie-1);
  padding: 14px 16px;
  margin-top: 16px;
}
.proximos-passos > h5, .proximos-passos > summary {
  margin: 0; font-size: .9375rem; font-weight: 700; color: var(--primaria);
}
details.proximos-passos { padding: 0; background: var(--superficie-5); }
details.proximos-passos > summary {
  cursor: pointer; padding: 11px 14px; list-style: none;
  font-size: .8125rem;
}
details.proximos-passos > summary::-webkit-details-marker { display: none; }
details.proximos-passos > summary::before { content: "▸ "; }
details.proximos-passos[open] > summary::before { content: "▾ "; }
details.proximos-passos .proximos-corpo { padding: 0 14px 14px; }
.proximos-resumo { margin: 8px 0 0; font-size: .8125rem; }
.proximos-passos ol { margin: 10px 0 0; padding-left: 22px; }
.proximos-passos ol li { margin-bottom: 6px; font-size: .8125rem; }
.proximos-passos ol li:last-child { margin-bottom: 0; }
.proximos-passos .proximos-guia {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--divisor);
}
.proximos-guia .link-inline { font-size: .8125rem; text-align: left; }

/* --- Nova execução: formulário + trilho de contexto -------------------------
   O formulário tem largura de leitura (640px) e sobrava uma faixa vazia à
   direita da tela inteira. O contexto da tarefa foi para lá: some do caminho de
   quem só quer preencher e continua visível para quem quer entender. É
   `sticky` porque serve durante o preenchimento, não antes dele. */
.layout-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}
.coluna-form { min-width: 0; }
/* Trilho escondido (skill sem ajuda e sem roteiro): a coluna some junto — senão
   o grid guardaria os 340px vazios. */
.layout-form:has(> .coluna-contexto.escondido) { grid-template-columns: minmax(0, 1fr); }
.coluna-contexto {
  position: sticky;
  top: calc(var(--barra-altura) + 20px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Roteiro aberto passa da altura da tela: o trilho rola por dentro em vez de
     esconder o fim do conteúdo atrás do rodapé. */
  max-height: calc(100vh - var(--barra-altura) - 40px);
  overflow-y: auto;
}
.coluna-contexto .ajuda-skill { margin: 0; }
.coluna-contexto details.proximos-passos { margin-top: 0; }
#proximos-skill:empty { display: none; }

/* Uma coluna só: o contexto vai para CIMA dos campos — atrás do formulário ele
   nunca seria visto no celular. */
@media (max-width: 1024px) {
  .layout-form { grid-template-columns: 1fr; gap: 18px; }
  .coluna-contexto { position: static; order: -1; }
}

/* ---- tela de login (#149) ------------------------------------------------ */
.tela-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh; background: transparent; border: none; padding: 0;
}
.cartao-login {
  width: 100%; max-width: 360px;
  background: var(--superficie-1); border: 1px solid var(--borda-container);
  border-radius: var(--raio-grande); box-shadow: var(--sombra-1);
  padding: 32px 28px; text-align: center;
}
/* logo.svg e branco (feito para o cabecalho roxo): no cartao branco ele sumiria */
.logo-login { height: 28px; width: auto; margin-bottom: 18px; filter: brightness(0); opacity: .8; }
.cartao-login h2 { margin-bottom: 4px; }
.cartao-login .dica { margin: 0 0 18px; font-size: .84rem; }
.cartao-login form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.cartao-login label { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; color: var(--texto-secundario); }
.cartao-login input { width: 100%; }
.cartao-login button[type="submit"] { margin-top: 4px; }
.cartao-login .erro { margin-top: 16px; text-align: left; font-size: .85rem; }

/* ---- portal de agentes (Task B, #149) ------------------------------------ */
.cards-agentes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.card-agente {
  border: 1px solid var(--borda-container);
  border-left: 3px solid var(--primaria);
  border-radius: var(--raio-grande);
  background: var(--superficie-1);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-agente h4 { margin: 0; color: var(--texto-escuro); }
.card-agente p { margin: 0; color: var(--texto-secundario); font-size: .86rem; }
.card-agente .card-acao {
  margin-top: 10px;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primaria);
}
.card-agente.card-clicavel { cursor: pointer; transition: box-shadow var(--transicao), background var(--transicao); }
.card-agente.card-clicavel:hover { box-shadow: var(--sombra-2); background: var(--primaria-tinta-04); }
/* card "em breve": visivelmente desabilitado e inerte (sem clique nenhum) */
.card-agente.card-em-breve {
  opacity: .55; cursor: default; border-left-color: var(--borda-padrao);
}
.card-agente.card-em-breve .card-acao { color: var(--texto-secundario); }

/* ---- administracao de acessos (Task B, #149) ----------------------------- */
.formulario-admin {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
  margin: 14px 0 20px;
}
.formulario-admin label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: .85rem; color: var(--texto-secundario);
}
.formulario-admin input { min-width: 260px; }
.celula-acessos .tag-acesso { margin-right: 6px; }
.botao-remover-acesso {
  background: transparent; border: none; color: var(--erro);
  padding: 0 0 0 6px; font-size: .74rem; text-decoration: underline;
}
.botao-remover-acesso:hover { background: transparent; color: var(--erro-forte); }
.celula-acoes-admin button {
  background: transparent; border: 1px solid var(--borda-padrao); color: var(--texto-secundario);
  font-size: .78rem; padding: 5px 10px;
}
.celula-acoes-admin button:hover {
  background: var(--primaria-tinta-04); color: var(--primaria); border-color: var(--primaria);
}

/* Publicacao do dia (#152, Task K) — painel da previa e links do resultado. */
.acoes-publicacao { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.painel-publicacao {
  background: var(--superficie-1); border: 1px solid var(--borda-container);
  border-radius: var(--raio-grande); padding: 12px 16px; margin: 12px 0;
}
.painel-publicacao h4 { margin: 12px 0 4px; }
.painel-publicacao h4:first-child { margin-top: 0; }
.lista-publicacao { margin: 0; padding-left: 18px; font-size: .8125rem; overflow-wrap: anywhere; }
.lista-alertas-publicacao {
  margin: 0; padding: 8px 12px 8px 28px; border-radius: var(--raio);
  background: var(--atencao-fundo); color: var(--atencao-forte); font-size: .8125rem;
}
.lista-alertas-publicacao:empty { display: none; }
.bloco-publicacao {
  background: var(--superficie-2); border-radius: var(--raio); padding: 8px 12px;
  font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px;
  overflow: auto; margin: 0;
}