/* Lista de ocorrências (UX-002 V1, "planilha calma") + painel de detalhe.
   Tokens: todos em `painel.css`; aqui não há hex nenhum.

   Sete colunas visíveis no lugar de catorze, hierarquia em quatro tamanhos
   (15 / 14 / 13 / 12 px), zebra REMOVIDA (numa linha de duas faixas de texto
   ela vira sujeira; quem separa passa a ser a borda + o respiro), faixa de
   confiança de 3px na borda esquerda da linha e coluna de ações fixa à direita
   — o botão da decisão nunca mais foge na rolagem horizontal (achado F-04).

   A cor da faixa NUNCA é o único canal: o texto da confiança acompanha sempre
   (badge C08 na célula Situação). */

.tabela-wrap { overflow-x: auto; background: var(--cor-superficie);
               border-radius: var(--raio-l); box-shadow: var(--sombra-1); }
/* width:auto deixa a tabela encolher até caber (sem rolagem) quando ela é
   mais estreita que o container; min-width segura a leitura em telas pequenas. */
table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 900px; }
@media (min-width: 1180px) { table { width: auto; } }

thead th { position: sticky; top: 0; background: var(--cor-cabecalho-fundo);
           color: var(--cor-cabecalho-texto); z-index: 2;
           font-size: var(--tipo-caption); font-weight: 700; text-transform: uppercase;
           letter-spacing: .04em; text-align: left; padding: var(--esp-3) var(--esp-4);
           border-bottom: 2px solid var(--cor-cabecalho-borda); white-space: nowrap; }
tbody td { padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--cor-borda);
           font-size: var(--tipo-corpo); vertical-align: top; line-height: var(--altura-linha);
           background: var(--cor-superficie); }
tbody tr:hover td { background: var(--cor-linha-hover); }
tbody tr:last-child td { border-bottom: 0; }
/* Fragmento que entra (linha decidida, detalhe) aparece com fade e a linha
   recém-atualizada fica realçada por 1,5s: o usuário vê ONDE a resposta chegou. */
tbody tr { transition: opacity var(--transicao-troca); }
tbody tr.htmx-added { opacity: 0; }
tbody td { transition: background var(--realce-atualizado) ease-out; }
tbody tr.htmx-added td, tbody tr.htmx-settling td { background: var(--cor-marca-claro-100); }

.nowrap { white-space: nowrap; }
.dim { color: var(--cor-texto-suave); }
.cam { opacity: .75; }
/* Os quatro níveis da hierarquia (V1): título da linha, corpo, apoio, auditoria. */
.n1 { font-size: var(--tipo-destaque); font-weight: var(--tipo-peso-medio); line-height: 1.3; }
.n2 { font-size: var(--tipo-corpo); }
.n3 { font-size: var(--tipo-corpo-s); color: var(--cor-texto-suave); line-height: var(--altura-linha); }
.n4 { font-size: var(--tipo-caption); color: var(--cor-texto-suave); line-height: 1.4; }
.qtd-forte { font-size: var(--tipo-destaque); font-weight: var(--tipo-peso-medio);
             font-variant-numeric: tabular-nums; }
.cel-data { position: relative; padding-left: 19px; white-space: nowrap;
            font-size: var(--tipo-corpo-s); color: var(--cor-texto-suave);
            font-variant-numeric: tabular-nums; }
.cel-data::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
tr.f-alta  .cel-data::before { background: var(--cor-marca-700); }
tr.f-media .cel-data::before { background: var(--cor-estado-pendente-texto); }
tr.f-baixa .cel-data::before { background: var(--cor-erro-600); }
.cel-oco { min-width: 280px; max-width: 440px; }
/* A análise e o aviso são FAIXAS abaixo do relato, nunca texto em linha: em
   linha, um aviso longo quebrando ao lado da miniatura flutuante virava fitas
   desencontradas (uma caixa de fundo por pedaço de linha). O `clear` desce a
   faixa para baixo da foto — inteira, alinhada, de uma peça só. */
.cel-oco .ia,
.cel-oco .aviso-analise-erro { display: block; clear: both; margin-top: 3px; }
/* A análise pode trazer a transcrição inteira da foto: na linha, três linhas
   bastam para decidir se é preciso abrir (texto inteiro no `title` e no painel). */
.cel-oco .ia-linha { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
                     -webkit-box-orient: vertical; overflow: hidden; }
.cel-sit { min-width: 230px; }
.cel-sit .apoio { display: block; margin-top: 5px; }
.cel-sit .audit { display: block; margin-top: 7px; padding-top: 6px;
                  border-top: 1px dotted var(--cor-borda); }
.pedido { font-weight: 400; font-size: var(--tipo-caption); color: var(--cor-texto-suave);
          margin-top: 2px; }

/* Coluna de ações fixa à direita (resolve F-04). */
th.cel-acoes, td.cel-acoes { position: sticky; right: 0; background: var(--cor-superficie);
                             box-shadow: -8px 0 10px -8px rgba(0,0,0,.28);
                             border-left: 1px solid var(--cor-borda); min-width: 230px; }
thead th.cel-acoes { background: var(--cor-cabecalho-fundo); z-index: 3; }
tbody tr:hover td.cel-acoes { background: var(--cor-linha-hover); }
.grupo-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.grupo-acoes button { padding: 6px 11px; }
.grupo-acoes button.secundario { font-weight: 400; }

/* C08 — badge de confiança · C07 — badge de estado (os CINCO, resolve F-02). */
.conf, .estado { display: inline-block; padding: 3px 11px; border-radius: var(--raio-pill);
        font-size: var(--tipo-caption); font-weight: 700; text-transform: capitalize; }
.conf-alta  { background: var(--cor-marca-claro-100); color: var(--cor-marca-900); }
.conf-media { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.conf-baixa { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
/* Nenhum estado é verde: "aprovada para o ERP" NÃO é sucesso (nada entrou no
   ERP), então recebe o cinza-azulado neutro. */
.estado { text-transform: none; white-space: normal; }
.estado-pendente { background: var(--cor-estado-pendente-fundo);
                   color: var(--cor-estado-pendente-texto); }
.estado-revisao { background: var(--cor-estado-revisao-fundo);
                  color: var(--cor-estado-revisao-texto); }
.estado-confirmada { background: var(--cor-estado-confirmada-fundo);
                     color: var(--cor-estado-confirmada-texto); }
.estado-aguardando { background: var(--cor-estado-aguardando-fundo);
                     color: var(--cor-estado-aguardando-texto); }
.estado-recusada { background: var(--cor-estado-recusada-fundo);
                   color: var(--cor-estado-recusada-texto); }
.fazer-baixa { color: var(--cor-erro-600); font-weight: var(--tipo-peso-medio); }
.fazer-ok    { color: var(--cor-texto-suave); }
tr.linha-recusada td { opacity: .6; }

/* C12 — painel de detalhe. ACRESCENTA uma linha abaixo (`afterend`) em vez de
   substituir a original: quantidade, foto e análise da IA continuam na tela
   enquanto se decide (resolve F-01, o pior defeito do fluxo de hoje). */
tr.linha-detalhe td { background: var(--cor-detalhe-fundo);
                      border-top: 2px solid var(--cor-marca-claro-100); }
tbody tr.linha-detalhe:hover td { background: var(--cor-detalhe-fundo); }
.conf-form { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-1) 2px; }
.conf-titulo { font-size: var(--tipo-corpo); }
.conf-campos { display: flex; gap: var(--esp-5); flex-wrap: wrap; align-items: flex-start; }
.conf-form label { font-size: var(--tipo-caption); color: var(--cor-texto-suave);
                   display: flex; flex-direction: column; gap: var(--esp-1); }
.conf-form input[type="text"] { width: 260px; max-width: 100%; margin: 0; }
.conf-acoes { display: flex; gap: var(--esp-2); }
.qtd-linha { display: flex; gap: 6px; align-items: stretch; }
.qtd-linha input.qtd-num { width: 130px; }
.qtd-linha select { margin: 0; padding: 9px; border: 1px solid var(--cor-borda-input);
                    border-radius: var(--raio-s); font-size: var(--tipo-corpo);
                    background: var(--cor-superficie); }
.resolver .rb { border: 1px solid var(--cor-borda); border-radius: var(--raio-m);
                padding: var(--esp-3) 14px; display: flex; flex-direction: column;
                gap: 10px; align-items: flex-start; background: var(--cor-superficie); }
.resolver .rb-titulo { font-size: var(--tipo-caption); font-weight: 700;
                       color: var(--cor-cabecalho-texto); text-transform: uppercase;
                       letter-spacing: .03em; }
.resolver .rb-recusar { border-color: var(--cor-recusar-borda); background: var(--cor-recusar-fundo); }
.resolver .recusa-input { width: 320px; max-width: 100%; margin: 0; padding: 9px;
                          border: 1px solid var(--cor-borda-input);
                          border-radius: var(--raio-s); font-size: var(--tipo-corpo); }
/* Painel FOCADO (um painel, um trabalho): o bloco perde a caixa — com um bloco
   só, a borda não separa nada — e deixa de empilhar. Campos e ações entram na
   MESMA faixa horizontal, que é o espaço que a página larga já tinha e não
   usava: o caso comum (ajustar a quantidade) cabe em uma linha. */
.painel-topo { display: flex; align-items: baseline; justify-content: space-between;
               gap: var(--esp-4); flex-wrap: wrap; }
.painel-foco .conf-titulo { font-weight: var(--tipo-peso-medio); }
/* Troca de ação: link discreto, nunca um segundo bloco de formulário —
   quem abriu o painel errado sai dele sem passar pela linha. */
.link-troca { background: none; padding: 0; color: var(--cor-marca-700);
              font-size: var(--tipo-corpo-s); text-decoration: underline; }
.link-troca:hover { background: none; color: var(--cor-marca-900); }
.painel-foco .rb { border: 0; background: none; padding: 0; flex-direction: row;
                   flex-wrap: wrap; align-items: flex-end; gap: var(--esp-5); }
.painel-foco .rb .conf-acoes { margin-left: auto; }
.contexto-revisao { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-4);
                    font-size: var(--tipo-corpo-s); }
.contexto-revisao p { margin: 0; max-width: 520px; }
.ia-completa { max-width: 760px; }
.ia-completa summary { cursor: pointer; list-style: none; }
.ia-completa summary::-webkit-details-marker { display: none; }
.ia-completa[open] .ia-resumo, .ia-completa[open] .ia-ver { display: none; }
.ia-ver { color: var(--cor-marca-700); text-decoration: underline; margin-left: var(--esp-1); }
.ia-completa p { margin-top: var(--esp-1); max-width: 760px; }
/* Linha travada: com o painel aberto, a decisão é dele. As ações da linha
   ficam à vista (a linha é o contexto) e inertes — nunca gravando o valor
   antigo enquanto há um valor novo digitado ao lado. */
tr.linha-travada .grupo-acoes { opacity: .55; }

/* Confiança baixa: o aviso vem ANTES dos botões, sempre visível (§2.9).
   `.aviso-publico` (RF6), `.aviso-troca` (CA-16) e `.aviso-analise-erro` (visão
   que tentou e falhou) compartilham a regra em vez de copiá-la: é o MESMO
   componente de aviso do DE (C15), com quatro assuntos agora. A terceira
   entrou apagando a cópia que ela tinha em `proposta.css` — quatro
   declarações do mesmo par de tokens divergiriam num dia de pressa. */
.aviso-confianca,
.aviso-publico,
.aviso-analise-erro,
.aviso-troca { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto);
               border-radius: var(--raio-m); padding: var(--esp-2) var(--esp-3);
               font-size: var(--tipo-corpo-s); }
.aviso-publico,
.aviso-troca { margin: 0; max-width: 760px; }
.aviso-troca { margin-bottom: var(--esp-2); line-height: var(--altura-linha); }
/* Na LINHA do relatório ele ocupa a faixa inteira acima dos botões: lado a lado
   viraria rodapé de uma decisão que a pessoa já tomou (a mesma razão do aviso
   de fala pública). A coluna de ações é estreita e fixa — o texto quebra, e
   quebrar é melhor que caber cortado. */
.grupo-acoes .aviso-troca { flex-basis: 100%; margin-bottom: 2px; }
.nota-papel { font-size: var(--tipo-corpo-s); color: var(--cor-texto-suave); }

/* RF6 — pedir evidência: a ÚNICA fala do agente no grupo. Este bloco não vira
   faixa horizontal nem no painel focado (ao contrário do de quantidade): o
   aviso de que a mensagem é pública tem de ser lido ANTES do campo, e lado a
   lado ele viraria rodapé de uma linha que a pessoa já passou. */
.painel-foco .rb-evidencia { flex-direction: column; align-items: stretch; gap: 10px; }
.painel-foco .rb-evidencia .conf-acoes { margin-left: 0; align-items: center; }
.rb-evidencia .conf-acoes { align-items: center; }
.rb-evidencia .evid-input { width: 420px; max-width: 100%; margin: 0; padding: 9px;
                            border: 1px solid var(--cor-borda-input);
                            border-radius: var(--raio-s); font-size: var(--tipo-corpo); }
/* "Pedido 1 de 2" fica colado no botão, do lado oposto: é a informação que
   muda a decisão de perguntar de novo. */
.evid-contador { margin-left: auto; }

/* Espera na linha: há quanto tempo e quantos pedidos, sem abrir nada. */
.evid-espera { display: block; margin-top: 2px; }
/* A evidência que voltou é matéria-prima da decisão, não histórico: ganha o
   par de tokens de "em revisão" (7,07:1) para saltar do texto de apoio.
   `overflow: hidden` fecha a caixa em volta da miniatura da resposta (que
   flutua, como toda `.thumb`): sem ele o float escaparia por baixo e as duas
   fotos da linha encostariam uma na outra — exatamente a confusão a evitar. */
.evid-resposta { display: block; margin-top: var(--esp-1); padding: 3px 8px;
                 border-radius: var(--raio-s); max-width: 420px; overflow: hidden;
                 background: var(--cor-estado-revisao-fundo);
                 color: var(--cor-estado-revisao-texto); }
/* Menor que a foto da ocorrência e com a borda do próprio par de tokens: a
   diferença de tamanho e de moldura é lida antes de qualquer texto. */
.thumb-evid { width: 40px; height: 40px; margin: 2px var(--esp-2) 0 0;
              border-color: var(--cor-estado-revisao-texto); }

/* --- Trilha de auditoria: parada na linha + linha do tempo (TA-08/09/10) ----
   Tudo com tokens do DE; nenhuma cor nova. Sistema × pessoa se distinguem por
   FORMA e TEXTO, nunca só por cor — cor não é canal único de informação. */

/* Parada na linha: o número vem sempre com o que ele mede e com o carimbo. */
.parada-linha { display: block; margin-top: 5px; }
.parada { display: inline-block; border-radius: var(--raio-pill); padding: 1px 9px;
          font-size: var(--tipo-caption); font-weight: var(--tipo-peso-medio);
          background: var(--cor-estado-aguardando-fundo);
          color: var(--cor-estado-aguardando-texto); }
/* "Sem histórico registrado" NÃO é uma parada: fica em texto de apoio, sem o
   par de tokens de espera, porque não há número por trás dele (O-7). */
.parada-sem { background: none; color: var(--cor-texto-suave); padding: 1px 0;
              font-weight: 400; font-style: italic; }
.hist-abrir { margin-left: var(--esp-2); color: var(--cor-marca-700);
              font-size: var(--tipo-caption); text-decoration: underline; }

/* C11 — cartão de seção da linha do tempo. */
.cartao-hist { background: var(--cor-superficie); border-radius: var(--raio-l);
               border: 1px solid var(--cor-borda); padding: var(--esp-4) var(--esp-5);
               box-shadow: var(--sombra-1); }
.hist-topo { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.hist-titulo { margin: 0; font-size: var(--tipo-subtitulo); }
.hist-topo button { margin-left: auto; }
.hist-parada { margin: 0 0 var(--esp-2); font-size: var(--tipo-corpo); }
.hist-recorte, .hist-vazio { margin: 0 0 var(--esp-3); max-width: 760px;
                             font-size: var(--tipo-corpo-s); line-height: var(--altura-linha); }
.hist-recorte { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto);
                border-radius: var(--raio-m); padding: var(--esp-2) var(--esp-3); }
.hist-falha { display: inline-block; background: var(--cor-erro-fundo);
              color: var(--cor-erro-texto); border-radius: var(--raio-s); padding: 2px 8px;
              font-size: var(--tipo-corpo-s); font-weight: var(--tipo-peso-medio); }

/* A lista: uma calha vertical à esquerda e um marcador por evento. */
.hist-lista { list-style: none; margin: 0; padding: 0 0 0 var(--esp-5);
              border-left: 2px solid var(--cor-borda); }
.hist-item { position: relative; padding: 0 0 var(--esp-3) 0;
             display: flex; flex-direction: column; gap: 2px; }
.hist-item::before { content: ""; position: absolute; left: calc(-1 * var(--esp-5) - 7px);
                     top: 5px; width: 10px; height: 10px; }
/* Pessoa: bulha CHEIA e redonda, na cor da marca. */
.hist-pessoa::before { border-radius: 50%; background: var(--cor-marca-700); }
/* Sistema: quadrado VAZADO, cinza-azulado. Forma diferente antes de cor
   diferente — "a IA criou às 09:12" não pode parecer "a Ana confirmou às 15:02",
   senão o tempo da máquina entra na conta da pessoa. */
.hist-sistema::before { border-radius: 2px; background: var(--cor-superficie);
                        border: 2px solid var(--cor-estado-aguardando-texto); }
.hist-quando { display: block; }
.hist-fato { font-size: var(--tipo-corpo); line-height: var(--altura-linha); }
.hist-quem { display: inline-block; border-radius: var(--raio-pill); padding: 0 8px;
             font-weight: var(--tipo-peso-medio); font-size: var(--tipo-corpo-s);
             background: var(--cor-marca-claro-100); color: var(--cor-marca-900); }
.hist-sistema .hist-quem { background: var(--cor-estado-aguardando-fundo);
                           color: var(--cor-estado-aguardando-texto); }
.hist-origem { margin-left: var(--esp-1); }
.hist-detalhe { display: block; padding-left: var(--esp-2);
                border-left: 2px solid var(--cor-borda); }
.hist-nota { display: block; margin: var(--esp-3) 0 0; }

/* TA-10 — a régua parcial dentro do painel de decisão. Mantém a caixa do bloco
   `.rb` mesmo no painel focado (que achata os blocos em linha): ela é leitura,
   não um campo do formulário ao lado dos outros. */
.rb-dado { background: var(--cor-superficie); }
.painel-foco .rb-dado { flex-direction: column; align-items: stretch; gap: 2px;
                        border: 1px solid var(--cor-borda); border-radius: var(--raio-m);
                        padding: var(--esp-2) var(--esp-3); }
.rb-dado p { margin: 0; }
.dado-mais summary { cursor: pointer; color: var(--cor-marca-700); }
.dado-mais[open] summary { margin-bottom: 2px; }
.dado-falta b { color: var(--cor-estado-pendente-texto); }
.dado-erp { color: var(--cor-texto-suave); font-style: italic; }

/* --- Um card aberto por vez (detalhe.js `atualizarFoco`, PO 2026-09-25) -----
   A linha dona do painel e o próprio painel ganham UMA moldura contínua (sem
   borda entre eles): lê-se "este painel saiu desta linha". O resto da tabela
   esmaece, e volta ao passar o mouse — continua clicável para trocar de card. */
tr { scroll-margin-top: 64px; }
tbody.em-foco > tr:not(.linha-foco) { opacity: .35; transition: opacity var(--transicao-troca); }
tbody.em-foco > tr:not(.linha-foco):hover { opacity: .85; }
tbody.em-foco tr.linha-foco td { background: var(--cor-detalhe-fundo); }
tbody.em-foco tr.linha-foco:not(.linha-detalhe) td { border-top: 2px solid var(--cor-marca-700);
                                                     border-bottom: 0; }
tbody.em-foco tr.linha-foco > td:first-child { border-left: 2px solid var(--cor-marca-700); }
tbody.em-foco tr.linha-foco > td:last-child { border-right: 2px solid var(--cor-marca-700); }
tbody.em-foco tr.linha-detalhe.linha-foco td { border-top: 0;
                                               border-bottom: 2px solid var(--cor-marca-700); }
tbody.em-foco tr.linha-historico.linha-foco td { border-bottom: 0; } /* entre linha e painel */