/* `.drive-legacy-oculto` SAIU EM 10/08/2026, e ela merece um epitáfio.

       Era o que escondia a funcionalidade antiga do Drive — criar e pesquisar
       pasta, enviar e colar documento, o painel de documentos — sem removê-la,
       "para não quebrar o JS que referencia esses elementos". Foi assim por
       meses: o código continuava lendo campos invisíveis, mandando valores que
       ninguém digitou, e um erro lendo arquivo podia abortar um salvamento numa
       área que a equipe nem via.

       Agora não há o que esconder. */

    /* FORA DA TELA A PEDIDO (29/07), sem sair do HTML. Carrega esta classe:
         - o campo "Etapa" de cada auto, no Retroativo.
       (A seção "Drive do cliente" dos dois cadastros estava nesta lista e saiu
       em 10/08/2026 — removida, e não escondida.)
       Escondido e NAO removido porque o JS continua lendo esses elementos:
       salvarCadastro/salvarRetroativo leem os campos do Drive, e collectAutos
       le `.etapa-input`. Escondidos eles entregam string vazia, que e o que o
       adapter ja aceita. Para trazer de volta, tirar a classe daqui e devolver
       a quinta coluna em `.auto-row.retro-row`. */
    .ct-oculto { display: none !important; }

    /* As tres luzes do semaforo da fila, que eram hex passados por argumento. */
    .luz--ok{background:var(--e-ok)}
    .luz--atencao{background:var(--ct-dourado-fill)}
    .luz--alerta{background:var(--e-alerta)}
    /* ---- AS CLASSES QUE SUBSTITUIRAM O ESTILO NA MARCACAO (etapa 7.4) -----
       Estilo na marcacao VENCE a folha: enquanto ele existir, a paleta e o
       tema ficam com um buraco que nenhuma regra alcanca. As medidas sao as
       que ja estavam la — mudou o endereco, nao o desenho.

       OS 78 `display:block` E `display:none` FICAM, e e decisao com motivo.
       Eles nao sao aparencia: sao o mecanismo de MOSTRAR E ESCONDER das caixas
       de recado (`.msg` nasce com display:none na folha, e a marcacao a
       acende). E ele esta amarrado ao JavaScript: em `aviso()` a linha
       seguinte faz `caixa.className = 'msg ' + tipo`, que SUBSTITUI o
       className inteiro — uma classe de visibilidade seria apagada por ela a
       cada recado. Troca-los exigiria reescrever o mostrar/esconder desta
       tela, que e mexer no comportamento para arrumar a aparencia, e nao ha
       uma cor sequer dentro deles. Ficam anotados no relatorio. */
    .mt0{margin-top:0} .mt6{margin-top:6px} .mt8{margin-top:8px} .mt10{margin-top:10px}
    .mt12{margin-top:12px} .mt14{margin-top:14px} .mt16{margin-top:16px}
    .mb4{margin-bottom:4px} .mb10{margin-bottom:10px} .mb12{margin-bottom:12px}
    .mb14{margin-bottom:14px} .mb16{margin-bottom:16px}
    .respiro16{margin:16px 0} .empurraDireita{margin-left:auto}
    .comFolga6{gap:6px} .semPadEmbaixo{padding-bottom:0} .semSublinhado{text-decoration:none}
    .alto18{height:18px} .alto150{min-height:150px}
    .grade2{grid-template-columns:1fr 1fr}
    .fileira6{display:flex;align-items:center;gap:6px}
    .fileira10{display:flex;align-items:center;gap:10px}
    .pesoForte{font-weight:var(--ct-peso-forte)}
    .tituloClicavel{cursor:pointer;font-weight:var(--ct-peso-forte);font-size:17px;margin-bottom:6px}
    .blocoRolante{white-space:pre-wrap;max-height:360px;overflow:auto;font-size:var(--ct-fs-meta)}

    /* (as sete que a etapa 7.5 trouxe para ca subiram para o ds/componentes.css
       na secao 18, em 08/08/2026: elas sao anatomia do card, e o card e dos
       DOIS sites. Aqui viravam a copia que diverge no primeiro ajuste.) */

    /* (o trilho do card subiu para o ds/componentes.css, secao 18.7, na tarefa
       2 do fechamento: ele e dos DOIS sites, e o valor dele e justamente as
       cores serem as MESMAS nos dois. As quatro variantes antigas —
       --alert, --info, --ok, --gold — falavam de ESTADO; as sete de la falam
de FILA, que e o que o trilho passou a dizer.) */

    /* ---- OS TRES BLOCOS :root MORRERAM AQUI (etapa 7.2, 08/08/2026) ------

       Eram tres, e o texto que ficava neste primeiro explicava a base do Site
       1 "remapeada para os tokens ct-". Com o ds/tokens.css carregado, o
       remapeamento virou uma ponte sem a outra margem: as regras passaram a
       falar direto a lingua do sistema, e cada nome curto foi trocado pelo
       token que ele de fato valia.

       "DE FATO VALIA" NAO E FORCA DE EXPRESSAO. O segundo bloco, 900 linhas
       abaixo deste, REDEFINIA --blue e --shadow — e vencia, por vir depois.
       Entao --blue, que este bloco dizia ser --ct-info, era na verdade um
       cinza escuro (#3f3f3f), e a --shadow, que ele dizia ser curta, era uma
       de 60px de raio. Quem lia o bloco de cima achava que sabia a cor.

       O QUE FICA REGISTRADO DAQUELE TEXTO, porque continua valendo: a fonte
       desta tela era ARIAL. A pilha dizia `Inter, Arial, sans-serif`, e
       `Inter` nao existe nesta casa — nenhuma folha declara @font-face para
       ela. O navegador caia no SEGUNDO nome, e o sistema mais usado da casa
       rodava em Arial enquanto as outras sete paginas usavam a fonte do
       sistema. Nao dava para ver lendo o CSS, porque o CSS dizia um nome de
       fonte que parecia certo. Hoje a fonte vem do ds/tokens.css. */

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: var(--ct-fonte);
      background: var(--ct-plano);
      color: var(--ct-tinta);
      min-height: 100vh;
    }

    .wrap {
      max-width: 1480px;
      margin: 0 auto;
      padding: 34px 22px 60px;
    }

    header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 22px;
    }

    h1 {
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.05;
      margin: 0 0 8px;
      letter-spacing: 0;
    }

    .subtitle {
      font-size: 17px;
      color: var(--ct-tinta-3);
      margin: 0;
    }

    .pill {
      background: rgba(255,255,255,.78);
      border: 1px solid var(--ct-linha);
      border-radius: 999px;
      padding: 13px 18px;
      white-space: nowrap;
      color: var(--ct-tinta);
      font-size: 14px;
    }

    .nav {
      display: flex;
      gap: 10px;
      margin: 22px 0;
      flex-wrap: wrap;
    }

    .nav button {
      border: 1px solid var(--ct-linha);
      background: var(--ct-superficie);
      color: var(--ct-tinta);
      border-radius: 999px;
      padding: 13px 18px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(15,23,42,.05);
    }

    .nav button.active {
      background: var(--ct-tinta-2);
      color: white;
      border-color: var(--ct-tinta-2);
    }

    /* O CONTADOR DA FILA DE CADASTRO, no próprio botão do menu (10/08/2026).
       Ele conta quem já PAGOU na Central e ainda não virou processo aqui — a
       fila que, até então, só existia depois de alguém clicar em "Atualizar
       lista" lá dentro.

       DOURADO, E NÃO VERMELHO: isto é trabalho esperando, não defeito. O
       vermelho voltou a significar defeito em 09/08/2026, e um número
       permanente em vermelho no menu ensina a ignorar vermelho.

       A cor do texto é a tinta escura fixa (e não `--ct-tinta`), porque o
       botão do menu vira escuro quando está `.active` e o número tem de
       continuar legível sobre o dourado nos dois estados. */
    .ct-badge-fila {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      margin-left: 8px;
      padding: 1px 7px;
      border-radius: 999px;
      background: var(--ct-amarelo);
      color: var(--ct-inverso);
      font-size: 12px;
      font-weight: 800;
      line-height: 18px;
    }
    .ct-badge-fila[hidden] { display: none; }

    /* ==========================================================================
       O PAINEL DE CADASTRO EM DUAS COLUNAS  (11/08/2026, desenho da dona)

       Antes era empilhado: abas, depois a fila de orçamentos pagos, depois a
       busca, depois o formulário. Quem cadastrava rolava a tela inteira para
       ver de qual orçamento estava tratando — e a fila, que é a razão de a
       pessoa estar ali, ficava fora de vista justo enquanto ela digitava.

    /* ==========================================================================
       O FORMULÁRIO DO CADASTRO  (11/08/2026, fatia 3 do desenho da dona)

       A TRILHA NUMERADA É SÓ VISUAL — decisão dela, e ela tem razão: virar
       assistente de quatro etapas mudaria o jeito de trabalhar e obrigaria a
       refazer rascunho, validação e foco por etapa. Aqui ela é um MAPA: diz
       quantas partes o formulário tem e em qual a pessoa está, e a página
       continua inteira, rolando.

       O passo aceso acompanha a rolagem (ver `ligarTrilhaDoCadastro`): ele não
       é um botão que a pessoa aperta, é um espelho de onde ela está. */
    .ct-trilha {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      padding: 14px 16px;
      border: 1px solid var(--ct-linha);
      border-radius: 16px;
      background: var(--ct-superficie);
      margin-bottom: 16px;
    }
    .ct-trilha a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--ct-tinta-3);
      font-size: 13px;
      font-weight: 800;
      padding: 4px 6px;
      border-radius: 999px;
    }
    .ct-trilha a:hover { color: var(--ct-tinta); text-decoration: none; }
    .ct-trilha__n {
      width: 24px; height: 24px;
      border-radius: 999px;
      display: grid; place-items: center;
      background: var(--ct-rebaixo);
      border: 1px solid var(--ct-linha);
      font-size: 12px; font-weight: 800;
      color: var(--ct-tinta-3);
    }
    .ct-trilha a.ativo { color: var(--ct-tinta); }
    .ct-trilha a.ativo .ct-trilha__n {
      background: var(--ct-amarelo);
      border-color: var(--ct-amarelo);
      color: var(--ct-inverso);
    }
    .ct-trilha__linha {
      flex: 1 1 20px;
      min-width: 12px;
      height: 1px;
      background: var(--ct-linha);
    }

    /* A SEÇÃO COM ÍCONE. O ícone não é enfeite: ele é a âncora que o olho acha
       ao rolar um formulário de vinte campos. */
    .ct-secao { margin-top: 18px; }
    .ct-secao__t {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 800;
      color: var(--ct-tinta);
      margin-bottom: 10px;
    }
    .ct-secao__t i {
      width: 30px; height: 30px;
      border-radius: 9px;
      display: grid; place-items: center;
      background: var(--ct-dourado-suave);
      font-style: normal;
      font-size: 15px;
    }

    /* A FAIXA VERDE do orçamento carregado. Ela só existe quando o formulário
       veio de um orçamento — em cadastro digitado à mão não há o que anunciar. */
    .ct-veio-do-orcamento {
      display: flex; align-items: center; gap: 10px;
      border: 1px solid var(--ct-ok-linha);
      background: var(--ct-ok-suave);
      color: var(--ct-ok);
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 14px;
    }

    /* O CONTADOR DA OBSERVAÇÃO. Fica à direita, embaixo do campo, e só fica
       vermelho no limite — contador que já nasce chamando atenção ensina a
       ignorá-lo. */
    .ct-contador {
      text-align: right;
      font-size: 11.5px;
      color: var(--ct-tinta-3);
      margin-top: 4px;
    }
    .ct-contador.ct-contador--cheio { color: var(--ct-alerta); font-weight: 800; }

    /* O RODAPÉ DE AÇÕES. "Tirar da fila" fica À ESQUERDA, separado dos outros
       dois: ele é a ação que desfaz, e vizinho de "Salvar" é como se clica no
       errado com pressa. */
    .ct-rodape-acoes {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      border-top: 1px solid var(--ct-linha);
      margin-top: 18px;
      padding-top: 14px;
    }
    .ct-rodape-acoes .ct-rodape-direita {
      margin-left: auto;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    /* A TABELA DOS AUTOS. Ela substitui as fileiras de campos rotulados: com
       vinte autos, vinte repetições de "Número do auto / Órgão do auto"
       ocupavam mais altura que os próprios dados. O rótulo vira cabeçalho,
       dito uma vez. */
    .ct-autos-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
    /* A CLASSE `.auto-row` VEM DA ÉPOCA DAS FILEIRAS e traz `display:grid` com
       colunas próprias. Num `<tr>` isso vence o layout de tabela e empilha
       tudo numa coluna — foi o que a prova visual mostrou. Ela NÃO foi
       renomeada de propósito: `collectAutos`, o rascunho e a colagem em lote
       procuram por ela. Então o desenho antigo é desfeito aqui, onde a linha
       vive dentro da tabela. */
    .ct-autos-tab .auto-row,
    .ct-autos-tab .auto-row.retro-row { display: table-row; grid-template-columns: none; gap: 0; }
    .ct-autos-tab .auto-row > td { display: table-cell; }
    .ct-autos-tab th {
      text-align: left;
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ct-tinta-3);
      font-weight: 800;
      padding: 6px 8px;
      border-bottom: 1px solid var(--ct-linha);
      white-space: nowrap;
    }
    .ct-autos-tab td { padding: 5px 8px; vertical-align: middle; }
    .ct-autos-tab tr + tr td { border-top: 1px solid var(--ct-linha-suave, var(--ct-linha)); }
    .ct-autos-tab td:first-child {
      color: var(--ct-tinta-3);
      font-family: var(--ct-mono);
      font-size: 12px;
      width: 34px;
      text-align: center;
    }
    .ct-autos-tab input, .ct-autos-tab select { width: 100%; }
    .ct-autos-tab .ct-autos-remover {
      border: 0; background: transparent; cursor: pointer;
      color: var(--ct-alerta); font-size: 15px; padding: 4px 6px; border-radius: 8px;
    }
    .ct-autos-tab .ct-autos-remover:hover { background: var(--ct-alerta-suave, var(--ct-rebaixo)); }
    .ct-autos-tab td:last-child { width: 40px; text-align: center; }
    .ct-autos-add {
      width: 100%;
      margin-top: 8px;
      border: 1px dashed var(--ct-linha-forte);
      background: transparent;
      color: var(--ct-tinta-2);
      border-radius: 10px;
      padding: 9px;
      font: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }
    .ct-autos-add:hover { background: var(--ct-rebaixo); }


    /* O CARD DA FILA NUM ESPAÇO DE 340px.

       O card de orçamento pago nasceu para uma LINHA LARGA — placa, nome e
       estado lado a lado, com os campos numa grade de três. Posto numa coluna
       de 340px ele se amassa: a placa encolhe, o nome quebra em cada palavra e
       o estado cai para a linha de baixo sozinho. Foi o que a primeira prova
       visual mostrou.

    /* AS ABAS DO CADASTRO viraram trilha sublinhada, e não dois botões: elas
       dizem "onde estou", e botão lado a lado dá a entender "escolha uma ação".
       O sublinhado dourado marca a ativa. */
    .ct-cad-abas {
      display: flex;
      gap: 4px;
      border-bottom: 1px solid var(--ct-linha);
      margin-bottom: 18px;
    }
    .ct-cad-abas button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 0;
      background: transparent;
      color: var(--ct-tinta-3);
      font: inherit;
      font-size: 14px;
      font-weight: 800;
      padding: 12px 18px;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -1px;
    }
    .ct-cad-abas button:hover { color: var(--ct-tinta); }
    .ct-cad-abas button.ativa {
      color: var(--ct-tinta);
      border-bottom-color: var(--ct-amarelo);
    }


    /* O AVISO DE UM CAMPO SÓ (10/08/2026) — CPF que não fecha a conta, CEP que
       não existe. Fica COLADO no campo, e não na faixa de mensagem lá embaixo:
       num formulário de quinze campos, aviso longe do campo faz a pessoa
       procurar qual deles é.

       Ele nunca BLOQUEIA: o cadastro por telefone às vezes tem o CPF errado do
       lado de lá, e travar o salvamento deixaria a equipe sem caminho nenhum.
       Avisa, e quem decide é quem está atendendo. */
    .ct-aviso-campo {
      margin-top: 6px;
      font-size: 12.5px;
      line-height: 1.35;
      color: var(--ct-alerta);
    }
    .ct-aviso-campo[hidden] { display: none; }
    .ct-aviso-campo.ct-aviso-campo--ok { color: var(--ct-tinta-3); }

    /* A caixa de colar autos em lote. Fechada por padrão: quem cadastra UM
       auto não precisa vê-la, e quem tem duzentos a procura. */
    .ct-colar-autos { margin-bottom: 12px; }
    .ct-colar-autos > summary {
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      color: var(--ct-tinta-2);
      padding: 6px 0;
    }
    .ct-colar-autos textarea {
      width: 100%;
      min-height: 76px;
      font-family: var(--ct-mono);
      font-size: 13px;
    }

    .grid {
      display: grid;
      grid-template-columns: minmax(0, 1.32fr) minmax(360px, .68fr);
      gap: 22px;
      align-items: start;
    }

    @media (max-width: 1020px) {
      .grid { grid-template-columns: 1fr; }
      header { flex-direction: column; }
    }

    .card {
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-md);
      box-shadow: 0 18px 60px rgba(17, 17, 17, .12);
      overflow: hidden;
    }

    .card-head {
      padding: 24px 28px;
      border-bottom: 1px solid var(--ct-linha);
    }

    .card-head h2 {
      margin: 0 0 6px;
      font-size: 25px;
      letter-spacing: 0;
    }

    .card-head p {
      margin: 0;
      color: var(--ct-tinta-3);
      font-size: 15px;
    }

    .card-body {
      padding: 24px 28px 28px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 16px;
    }

    .form-grid.three {
      grid-template-columns: repeat(3, minmax(0,1fr));
    }


    label {
      display: block;
      font-weight: 800;
      color: var(--ct-tinta);
      font-size: 14px;
      margin: 0 0 8px;
    }

    input, select, textarea {
      width: 100%;
      border: 1px solid var(--ct-linha);
      background: var(--ct-superficie);
      color: var(--ct-tinta);
      border-radius: 16px;
      padding: 14px 15px;
      font: inherit;
      outline: none;
      transition: .15s ease;
    }

    textarea {
      min-height: 108px;
      resize: vertical;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--e-novo-b);
      box-shadow: 0 0 0 4px rgba(47, 109, 224, .12);
    }

    .auto-box {
      margin-top: 18px;
      padding: 16px;
      background: var(--ct-rebaixo);
      border: 1px solid var(--ct-linha);
      border-radius: 18px;
    }

    .auto-title {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--ct-tinta-2);
      font-weight: 900;
      margin-bottom: 14px;
    }

    .auto-row {
      display: grid;
      grid-template-columns: 100px 1fr 1fr;
      gap: 12px;
      align-items: end;
      padding: 10px;
      border: 1px solid var(--ct-linha-suave);
      border-radius: 16px;
      margin-bottom: 10px;
      background: var(--ct-superficie);
    }

    /* Cinco colunas: tag, auto, orgao, status e a fila do auto. A "Etapa" e uma
       sexta que esta fora da tela (`.ct-oculto`) e nao ocupa track nenhum. */
    .auto-row.retro-row {
      grid-template-columns: 100px 1fr 1fr 1fr 1fr;
    }

    /* A fila geral, dentro da caixa dos autos e acima das fileiras: e um atalho
       que escreve em todas, entao fica separada delas por uma linha. */
    .retro-fila-geral {
      max-width: 320px;
      padding-bottom: 14px;
      margin-bottom: 14px;
      border-bottom: 1px solid var(--ct-linha-suave);
    }
    .retro-fila-geral .hint {
      display: block;
      margin-top: 6px;
      color: var(--ct-tinta-3);
      font-size: 12.5px;
    }

    /* RENOMEADA NA ETAPA 7.1: .tag ja tem dono no ds/componentes.css — la ela
       e a ETIQUETA DE ESTADO das seis cores (pilula, mono em caixa alta, 11px,
       com fundo e borda). Aqui ela era so o rotulo "Auto 1" do formulario, e
       com a folha nova ele virava uma pastilha de estado. Nome local, papel
       local — foi a sonda de antes-e-depois que apontou, e nao o olho. */
    .auto-row .autoTag {
      font-weight: 900;
      color: var(--ct-tinta-2);
      padding-bottom: 15px;
    }

    @media (max-width: 760px) {
      .form-grid, .form-grid.three { grid-template-columns: 1fr; }
      .auto-row { grid-template-columns: 1fr; }
      .auto-row .autoTag { padding-bottom: 0; }
    }

    .actions {
      display: flex;
      gap: 12px;
      margin-top: 20px;
      flex-wrap: wrap;
    }

    /* Os botoes nao herdavam a fonte da pagina: `button` tem fonte propria do
       navegador, e nenhuma regra aqui dizia o contrario. Eram os 63 ultimos
       elementos em Arial depois que o body virou Instrument Sans - e botao e
       justamente o que a pessoa mais le. Raio e peso tambem entram na
       gramatica: 17px e peso 900 eram do sistema antigo. */
    .btn {
      border: none;
      border-radius: var(--ct-r-sm);
      padding: 11px 18px;
      font-family: var(--ct-fonte);
      font-weight: 500;
      cursor: pointer;
      font-size: 14px;
    }

    .btn:disabled {
      opacity: .62;
      cursor: not-allowed;
      filter: grayscale(.15);
    }

    .btn-primary {
      flex: 1;
      background: var(--ct-tinta-2);
      color: white;
    }

    .btn-soft {
      background: var(--ct-info-suave);
      color: var(--e-novo-f);
    }

    .btn-danger {
      background: var(--e-alerta-s);
      color: var(--ct-alerta);
    }

    .btn-whatsapp {
      background: var(--e-ok-s);
      color: var(--e-ok-f);
      border: 1px solid var(--e-ok-b);
    }

    .msg {
      margin-top: 16px;
      padding: 16px;
      border-radius: 16px;
      white-space: pre-wrap;
      line-height: 1.45;
      display: none;
    }

    .msg.ok {
      display: block;
      background: var(--ct-ok-suave);
      border: 1px solid var(--ct-ok-linha);
      color: var(--ct-ok);
    }

    .msg.err {
      display: block;
      background: var(--ct-alerta-suave);
      border: 1px solid var(--ct-alerta-linha);
      color: var(--ct-alerta);
    }

    .msg.info {
      display: block;
      background: var(--ct-dourado-suave);
      border: 1px solid var(--ct-info-linha);
      color: var(--ct-info);
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 14px;
    }

    @media (max-width: 980px) {
      .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }

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

    .mini {
      padding: 18px;
      border-radius: 18px;
      border: 1px solid var(--ct-linha);
      background: var(--ct-dourado-suave);
      min-height: 110px;
    }

    .mini.green { background: var(--ct-ok-suave); }
    .mini.amber { background: var(--ct-dourado-suave); }
    .mini.red { background: var(--ct-alerta-suave); }
    .mini.gray { background: var(--ct-rebaixo); }

    .mini span {
      display: block;
      color: var(--ct-tinta-3);
      font-weight: 900;
      font-size: 13px;
      margin-bottom: 18px;
    }

    .mini strong {
      font-size: 34px;
      letter-spacing: 0;
    }

    .panel-grid {
      display: grid;
      grid-template-columns: 315px minmax(0,1fr);
      gap: 18px;
      align-items: start;
    }

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

    .filters {
      position: sticky;
      top: 16px;
      display: grid;
      gap: 13px;
    }

    .result-list {
      display: grid;
      gap: 12px;
    }

    .result-card {
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-radius: 18px;
      padding: 16px;
      box-shadow: 0 8px 24px rgba(15,23,42,.04);
    }

    .result-card.no-status { border-left: 6px solid var(--ct-dourado-linha); }
    .result-card.has-pending { border-left: 6px solid var(--e-alerta); }
    .result-card.incomplete { box-shadow: inset 6px 0 0 var(--ct-dourado-linha), 0 8px 24px rgba(15,23,42,.04); }
    /* O que falta, dito pelo nome, e o campo aceso (Atualização cadastral, 21/08/2026). */
    .atu-faltam { margin: 0 0 10px; font-size: 13px; color: var(--ct-tinta-2); }
    .atu-faltam b { color: var(--ct-tinta); }
    .atu-falta { border-color: var(--ct-dourado-linha) !important; box-shadow: 0 0 0 3px var(--ct-dourado-suave); }
    /* CEP e Protocolo: campo e botão na mesma linha (21/08/2026). */
    .atu-linha { display: flex; gap: 6px; align-items: center; }
    .atu-linha input { flex: 1; min-width: 0; }
    .atu-cep-aviso { margin-top: 4px; min-height: 1em; }
    .atu-cep-aviso.ok { color: var(--ct-ok); }
    .atu-protocolo[readonly], .atucard-protocolo[readonly] { background: var(--ct-rebaixo); color: var(--ct-tinta-2); }
    /* A gaveta do card usa as mesmas pecas (24/08/2026); o chip respeita a grade. */
    .atucard-secao .atu-faltam { margin: 0 0 10px; }
    .result-card.archived { box-shadow: inset 6px 0 0 var(--ct-tinta-3), 0 8px 24px rgba(15,23,42,.04); }

    .result-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--ct-linha-suave);
      padding-bottom: 10px;
      margin-bottom: 12px;
    }

    .card-top-actions {
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 10px;
      flex-wrap: wrap;
      text-align: right;
    }




    .result-card.card-is-closed {
      padding-bottom: 12px;
    }

    .result-card.card-is-closed .card-summary-grid {
      margin-bottom: 0;
    }

    .result-title {
      font-weight: 1000;
      font-size: 18px;
    }

    .row-meta {
      color: var(--ct-tinta-3);
      font-size: 13px;
      line-height: 1.55;
    }

    .card-summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 8px;
      margin: 10px 0;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 10px 0;
    }

    .chip {
      background: var(--ct-rebaixo);
      border: 1px solid var(--ct-linha);
      color: var(--ct-tinta-2);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 800;
    }

    .chip.warn {
      background: var(--ct-dourado-suave);
      border-color: var(--ct-atencao-linha);
      color: var(--ct-dourado);
    }

    .chip.good {
      background: var(--ct-ok-suave);
      border-color: var(--ct-ok-linha);
      color: var(--ct-ok);
    }

    .card-collapse {
      border: 1px solid var(--ct-linha);
      border-radius: 12px;
      background: var(--ct-rebaixo);
      margin-top: 10px;
      overflow: hidden;
    }

    .card-collapse summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 13px;
      color: var(--ct-tinta);
      font-size: 13px;
      font-weight: 1000;
      user-select: none;
    }

    .card-collapse summary::-webkit-details-marker {
      display: none;
    }

    .card-collapse summary::after {
      content: "Abrir";
      border: 1px solid var(--ct-linha);
      border-radius: 999px;
      padding: 4px 9px;
      color: var(--ct-tinta-3);
      background: var(--ct-superficie);
      font-size: 11px;
      font-weight: 900;
    }

    .card-collapse[open] summary {
      border-bottom: 1px solid var(--ct-linha);
      background: var(--ct-rebaixo);
    }

    .card-collapse[open] summary::after {
      content: "Fechar";
    }

    .collapse-count {
      color: var(--ct-tinta-3);
      font-size: 12px;
      font-weight: 900;
    }


    .card-collapse .daily,
    .card-collapse .card-edit-panel {
      margin-top: 0;
    }

    .card-save-indicator {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid var(--ct-info-linha);
      border-radius: 12px;
      padding: 9px 11px;
      margin-top: 10px;
      background: var(--ct-rebaixo);
      color: var(--ct-tinta-2);
      font-size: 12px;
      font-weight: 900;
    }

    .card-save-indicator small {
      color: var(--ct-tinta-3);
      font-weight: 800;
    }

    .card-save-indicator.save-saving {
      background: var(--e-novo-s);
      border-color: var(--ct-info-linha);
      color: var(--e-novo-f);
    }

    .card-save-indicator.save-draft {
      background: var(--ct-dourado-suave);
      border-color: var(--ct-atencao-linha);
      color: var(--ct-dourado);
    }

    .card-save-indicator.save-saved {
      background: var(--e-ok-s);
      border-color: var(--e-ok-b);
      color: var(--ct-ok);
    }

    .card-save-indicator.save-error,
    .card-save-indicator.save-conflict {
      background: var(--e-alerta-s);
      border-color: var(--e-alerta-b);
      color: var(--e-alerta-f);
    }

    /* ======================================================================
       CONFLITO DE EDIÇÃO — dois logins no mesmo card

       Não é erro de quem salvou: é o normal quando seis pessoas trabalham na
       mesma fila. Por isso a caixa não grita — ela apresenta os dois valores
       lado a lado e devolve a escolha para quem está olhando.
       ====================================================================== */
    /* A fila mudou enquanto a pessoa editava. Azul, e não vermelho: não é
       erro nem urgência — é notícia, e a pessoa decide quando aplicar. */
    .ct-faixa-mudou {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      margin: 0 0 12px; padding: 9px 13px; border-radius: 10px;
      background: var(--ct-info-suave, var(--ct-info-suave)); border: 1px solid var(--ct-info-linha);
      color: var(--ct-info, var(--ct-info)); font-size: 12.5px; font-weight: 600;
    }
    .ct-faixa-mudou button {
      margin-left: auto; border: 1px solid var(--ct-info, var(--ct-info)); background: var(--ct-superficie);
      color: var(--ct-info, var(--ct-info)); border-radius: 999px; padding: 3px 12px;
      font-family: inherit; font-size: 11.5px; cursor: pointer; font-weight: 700;
    }
    .ct-faixa-mudou button:hover { background: var(--ct-info, var(--ct-info)); color: var(--e-sobre-claro); }

    /* Realce de 2s no card que mudou. Apaga sozinho porque é notícia, e não
       estado — nada some junto com ele. */
    @keyframes ctCardMudou {
      from { box-shadow: 0 0 0 3px var(--ct-info-suave, var(--ct-info-linha)); border-color: var(--ct-info-linha); }
      to   { box-shadow: none; }
    }
    .ct-card--mudou { animation: ctCardMudou 2.2s ease-out 1; }
    @media (prefers-reduced-motion: reduce) { .ct-card--mudou { animation: none; } }

    .ct-conf { margin-top: 12px; border: 1px solid var(--ct-alerta-linha); border-radius: 12px; overflow: hidden; background: var(--ct-superficie); }
    .ct-conf__topo { padding: 11px 14px; background: var(--ct-alerta-suave, var(--ct-alerta-suave)); border-bottom: 1px solid var(--ct-alerta-linha); }
    .ct-conf__topo h4 { margin: 0 0 3px; font-size: 14px; color: var(--ct-alerta, var(--ct-alerta)); }
    .ct-conf__topo p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ct-tinta-2); }
    .ct-conf__campo { padding: 11px 14px; border-bottom: 1px solid var(--ct-alerta-linha); }
    .ct-conf__campo:last-of-type { border-bottom: 0; }
    .ct-conf__nome {
      font-family: var(--ct-mono); font-size: 10px; letter-spacing: .1em;
      text-transform: uppercase; color: var(--ct-tinta-3); margin-bottom: 7px;
    }
    .ct-conf__versoes { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    @media (max-width: 620px) { .ct-conf__versoes { grid-template-columns: 1fr; } }
    .ct-conf__v {
      border: 1px solid var(--ct-linha); border-radius: 10px; padding: 9px 11px;
      background: var(--ct-rebaixo); cursor: pointer; text-align: left; font-family: inherit;
      transition: border-color .12s, background-color .12s;
    }
    .ct-conf__v:hover { border-color: var(--ct-tinta-3); background: var(--ct-superficie); }
    .ct-conf__v[aria-pressed="true"] {
      border-color: var(--ct-info-linha); background: var(--ct-info-suave);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--ct-anel) 22%, transparent);
    }
    .ct-conf__quem { display: block; font-size: 11px; color: var(--ct-tinta-3); font-weight: 700; margin-bottom: 3px; }
    .ct-conf__valor { display: block; font-size: 14px; font-weight: 600; color: var(--ct-tinta); word-break: break-word; }
    .ct-conf__valor em { font-style: normal; color: var(--ct-tinta-3); font-weight: 400; }
    .ct-conf__pe { padding: 11px 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--ct-alerta-linha); }
    .ct-conf__aviso { font-size: 12px; color: var(--ct-tinta-3); flex: 1; min-width: 140px; }

    .card-conflict-alert {
      border: 1px solid var(--e-alerta-b);
      border-radius: 12px;
      padding: 10px 12px;
      margin-top: 10px;
      background: var(--e-alerta-s);
      color: var(--e-alerta-f);
      font-size: 13px;
      line-height: 1.45;
      font-weight: 800;
    }

    .mini-history-list {
      display: grid;
      gap: 8px;
    }

    .mini-history-item {
      border: 1px solid var(--ct-linha-suave);
      border-radius: 10px;
      padding: 9px 10px;
      background: var(--ct-superficie);
    }

    .mini-history-item strong {
      display: block;
      color: var(--ct-tinta);
      font-size: 13px;
      margin-bottom: 3px;
    }

    .mini-history-item span {
      color: var(--ct-tinta-3);
      font-size: 12px;
      font-weight: 800;
    }

    .edit-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .edit-grid .wide { grid-column: span 2; }
    .edit-grid .xwide { grid-column: span 4; }

    .edit-grid textarea {
      min-height: 76px;
      resize: vertical;
    }

    .card-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 12px;
      margin: 12px 0;
    }

    .card-section {
      border: 1px solid var(--ct-linha-suave);
      border-radius: 12px;
      padding: 12px;
      background: var(--ct-rebaixo);
    }

    .card-section h3 {
      font-size: 13px;
      margin: 0 0 10px;
      color: var(--ct-tinta-2);
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .detail-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 8px;
    }

    .detail-item {
      min-width: 0;
      border-radius: 10px;
      background: var(--ct-superficie);
      border: 1px solid var(--ct-info-linha);
      padding: 8px 10px;
    }

    .detail-item span {
      display: block;
      color: var(--ct-tinta-3);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
      margin-bottom: 3px;
    }

    .detail-item strong {
      display: block;
      color: var(--ct-tinta);
      font-size: 13px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .card-edit-panel {
      border: 1px solid var(--ct-atencao-linha);
      border-radius: 14px;
      padding: 12px;
      background: var(--ct-dourado-suave);
      margin-top: 14px;
    }

    .card-edit-panel .edit-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }

    .card-edit-panel .edit-title h3 {
      margin: 0;
      font-size: 14px;
      color: var(--ct-tinta);
    }

    @media (max-width: 860px) {
      .edit-grid { grid-template-columns: 1fr; }
      .edit-grid .wide,
      .edit-grid .xwide { grid-column: auto; }
      .card-summary-grid,
      .card-detail-grid,
      .detail-list { grid-template-columns: 1fr; }
    }

    .daily {
      margin-top: 16px;
      border: 1px dashed var(--ct-linha);
      border-radius: 18px;
      padding: 16px;
      background: var(--ct-rebaixo);
    }

    .daily h3 {
      margin: 0 0 10px;
    }

    .daily-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      overflow: hidden;
      border-radius: 12px;
    }

    .daily-table th, .daily-table td {
      border-bottom: 1px solid var(--ct-linha-suave);
      padding: 9px 8px;
      text-align: left;
      vertical-align: top;
    }

    .daily-table th {
      background: var(--e-novo-s);
      font-size: 12px;
      color: var(--ct-tinta-2);
    }

    .status-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 8px;
      margin-top: 12px;
    }

    @media (max-width: 760px) {
      .status-list { grid-template-columns: 1fr; }
    }

    .status-item {
      border: 1px solid var(--ct-linha);
      border-radius: 14px;
      padding: 10px 12px;
      background: var(--ct-superficie);
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      font-weight: 800;
    }

    .attendance-box {
      margin-top: 12px;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid var(--ct-info-linha);
      background: var(--e-novo-s);
      color: var(--ct-info);
      font-weight: 800;
      line-height: 1.45;
    }

    .attendance-box.busy {
      border-color: var(--ct-dourado-linha);
      background: var(--ct-dourado-suave);
      color: var(--ct-dourado);
    }

    .attendance-box.mine {
      border-color: var(--e-ok-b);
      background: var(--e-ok-s);
      color: var(--e-ok-f);
    }

    .attendance-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .btn-small {
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 13px;
    }

    .hidden { display: none !important; }

    /* ENQUANTO O PAINEL PEDIDO NAO CHEGA  (18/08/2026)

       A pagina nasce com o protocolo/atualizacao aceso (e o `class="active"`
       do botao dele), e isso e certo para quem abre o Site 1 direto. Para quem
       chegou por `?painel=`, porem, aquele painel nao e o destino - e o que
       estava na frente. Medido: 2,85 s ate a tela ficar pronta, com a base
       inteira em cache, porque o custo e INTERPRETAR ~1,5 MB de JavaScript, e
       nao baixa-lo. Dois segundos e meio olhando o painel errado.

       ENTAO ELE NAO E PINTADO, e no lugar fica um aviso do que esta
       acontecendo. Tela vazia seria pior: "nao carregou" e "estou carregando"
       precisam ser distinguiveis. */
    html[data-painel-pedido] #protocoloAtualizacaoTab { display: none !important; }
    html[data-painel-pedido] .ct-abrindo { display: flex; }
    .ct-abrindo {
      display: none; align-items: center; gap: 10px;
      padding: 22px var(--ct-pad-card, 18px); color: var(--ct-tinta-3);
      font-family: var(--ct-fonte); font-size: var(--ct-fs-meta, 13px);
    }
    .ct-abrindo__giro {
      width: 15px; height: 15px; flex: none; border-radius: 50%;
      border: 2px solid var(--ct-linha); border-top-color: var(--ct-tinta-3);
      animation: ctAbrindoGira .8s linear infinite;
    }
    /* `prefers-reduced-motion` desliga a volta, e o circulo fica parado - o
       aviso continua legivel, que e o que ele existe para fazer. */
    @media (prefers-reduced-motion: reduce) { .ct-abrindo__giro { animation: none; } }
    @keyframes ctAbrindoGira { to { transform: rotate(360deg); } }
  
    /* CT MULTAS PRO - identidade visual */
    /* (o segundo :root morreu na etapa 7.2 — ele era quem redefinia --blue e
       --shadow por cima do primeiro, 900 linhas acima) */

    /* O fundo era um brilho dourado no canto superior esquerdo sobre um
       degrade cinza-azulado. Dois problemas: o dourado encosta no lime dos
       botoes (a regra do sistema e que os dois nunca dividem tela), e um
       degrade diagonal faz o papel mudar de cor conforme a pessoa rola -
       entao o mesmo cartao branco parece de tons diferentes no topo e no fim
       da lista. Papel chapado, como nas outras sete paginas. */
    body {
      background: var(--ct-plano);
    }

    header.pro-header {
      background: linear-gradient(135deg, var(--ct-tinta-2) 0%, var(--ct-inverso) 100%);
      color: var(--e-sobre-claro);
      border-radius: 30px;
      padding: 22px 26px;
      box-shadow: 0 24px 70px rgba(17,17,17,.24);
      border: 1px solid rgba(246,199,95,.55);
      align-items: center;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .brand-logo {
      width: 82px;
      height: 82px;
      border-radius: 24px;
      object-fit: contain;
      background: var(--ct-tinta-2);
      border: 2px solid var(--ct-amarelo);
      box-shadow: 0 12px 30px rgba(0,0,0,.28);
    }

    .brand h1 {
      color: var(--e-sobre-claro);
      margin-bottom: 6px;
    }

    .brand .subtitle {
      color: var(--ct-tinta-inv-2);
    }

    .version-badge {
      display: inline-flex;
      align-items: center;
      margin-top: 8px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(246,199,95,.18);
      border: 1px solid rgba(246,199,95,.58);
      color: var(--ct-dourado);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .pill {
      background: rgba(255,255,255,.10);
      border-color: rgba(246,199,95,.65);
      color: var(--e-sobre-claro);
    }

    .nav button {
      background: var(--ct-superficie);
      color: var(--ct-tinta);
      border-color: var(--ct-linha-forte);
    }

    .nav button.active {
      background: linear-gradient(135deg, var(--ct-amarelo) 0%, var(--ct-dourado-fill) 100%);
      color: var(--ct-tinta);
      border-color: var(--ct-dourado-fill);
      box-shadow: 0 10px 28px rgba(233,173,47,.28);
    }

    .card {
      border-color: rgba(17,17,17,.08);
    }

    .card-head {
      background: linear-gradient(180deg, var(--ct-superficie) 0%, var(--ct-dourado-suave) 100%);
    }

    .card-head h2 {
      color: var(--ct-tinta);
    }

    /* ------------------------------------------------------------------
       BOTOES: a regra base, e nao mais uma lista de ids.

       O redesign anterior deu lime ao `.btn-primary` de NOVE paineis, um id
       por vez (#produtividadeTab, #historicoProTab, ...). Tres paineis
       ficaram de fora - Dashboard, Busca geral e Configuracoes, que vieram
       da camada V2 - e continuaram com o gradiente cinza-escuro de moldura
       dourada do sistema antigo. Nao foi descuido: uma lista de ids esquece
       por construcao, porque quem escreve um painel novo nao sabe que
       precisa se cadastrar nela.

       Entao a cor passa a estar na BASE. As regras por id que ja existem
       continuam valendo (dizem a mesma coisa, so com mais especificidade),
       e o proximo painel nasce certo sem pedir licenca.
       ------------------------------------------------------------------ */
    /* O PRINCIPAL FICOU PRETO, COM LUSTRO (11/08/2026, decisão da dona: fora o
       lime, e o botão do cadastro preto com efeito).

       ELE NÃO É NOVO: é o mesmo botão que o Site 2 usa desde o passo 4 do
       projeto visual, escrito contra os mesmos tokens da seção 1.8 do
       ds/tokens.css (`--b-preto`, `--b-preto-2`, `--b-preto-letra`,
       `--b-halo-preto`, `--b-lustro`). O Site 1 tinha ficado para trás porque
       esta página não herda folha nenhuma — e era a única em que a ação
       principal ainda era verde.

       O LUSTRO ATRAVESSA UMA VEZ no hover, e é a única animação do botão: no
       tema escuro o `--b-lustro` vira sombra em vez de brilho (o token muda
       sozinho), senão a faixa branca acenderia demais sobre o preto.

       `overflow:hidden` é o que segura a faixa dentro do botão; `position`
       relativa é o que dá origem a ela. */
    .btn-primary {
      background: linear-gradient(135deg, var(--b-preto-2), var(--b-preto));
      color: var(--b-preto-letra);
      border: 1px solid transparent;
      font-weight: 500;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 9px -2px var(--b-halo-preto);
    }
    .btn-primary:hover {
      background: linear-gradient(135deg, var(--b-preto-2), var(--b-preto));
      border-color: transparent;
      color: var(--b-preto-letra);
      box-shadow: 0 8px 20px -4px var(--b-halo-preto);
      filter: brightness(1.08);
    }
    .btn-primary::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(105deg, transparent 35%, var(--b-lustro) 50%, transparent 65%);
      transform: translateX(-120%);
    }
    .btn-primary:hover::after { animation: ctLustroSite1 .75s cubic-bezier(.4, 0, 1, 1); }
    /* `ctLustroSite1`, e não `ctLustro`: o nome do Site 2 é `ctLustroCnh`, e
       nome de animação repetido não soma — o último vence a folha inteira. */
    @keyframes ctLustroSite1 { to { transform: translateX(120%); } }

    .btn-soft {
      background: transparent;
      color: var(--ct-tinta-2);
      border: 1px solid var(--ct-linha);
    }
    .btn-soft:hover { background: var(--ct-rebaixo); color: var(--ct-tinta); }

    .result-card {
      border-color: rgba(17,17,17,.08);
    }

    .result-card.no-status { border-left: 7px solid var(--ct-dourado-linha); }
    .result-card.has-pending { border-left: 7px solid var(--e-alerta); }
    .result-card.incomplete { box-shadow: inset 7px 0 0 var(--ct-dourado-linha), 0 8px 24px rgba(15,23,42,.04); }
    .result-card.archived { box-shadow: inset 7px 0 0 var(--ct-tinta-3), 0 8px 24px rgba(15,23,42,.04); }

    .chip {
      background: var(--ct-rebaixo);
    }

    /* Os tres chips de estado nos tons do sistema: dessaturados de proposito,
       e sem moldura - a cor de fundo ja separa um do outro, e a borda so
       engrossava a pilula. */
    .chip.status-yellow {
      background: var(--ct-dourado-suave);
      border-color: transparent;
      color: var(--ct-dourado);
    }

    .chip.status-blue {
      background: var(--ct-info-suave);
      border-color: transparent;
      color: var(--ct-info);
    }

    .chip.status-green {
      background: var(--ct-ok-suave);
      border-color: transparent;
      color: var(--ct-ok);
    }

    .pro-section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .pro-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      background: var(--ct-superficie);
      border-radius: 16px;
      overflow: hidden;
    }

    .pro-table th, .pro-table td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--ct-linha-suave);
      text-align: left;
      vertical-align: top;
    }

    .pro-table th {
      background: var(--ct-dourado-suave);
      color: var(--ct-dourado-sobre);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .timeline {
      display: grid;
      gap: 10px;
    }

    .timeline-item {
      border: 1px solid var(--ct-linha-forte);
      border-left: 5px solid var(--ct-dourado-fill);
      border-radius: 14px;
      background: var(--ct-superficie);
      padding: 12px 14px;
    }


    /* A secao do Drive no card e uma linha so: abrir a pasta e copiar o link. */
    .drive-link-linha {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 0;
    }

    /* `.drive-panel-box` e `.drive-panel-head` saíram em 10/08/2026: eram a
       moldura e o cabeçalho do painel de documentos do formulário, que foi
       removido com o Drive. O `.drive-panel-body` abaixo FICA — a seção de
       leitura do card o reaproveita para listar os arquivos guardados. */
    .drive-panel-body {
      padding: 14px;
      display: grid;
      gap: 10px;
    }

    .drive-doc-item {
      border: 1px solid var(--ct-linha-forte);
      border-radius: 14px;
      padding: 11px 12px;
      background: var(--ct-rebaixo);
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
    }

    .drive-doc-item strong {
      display: block;
      font-size: 14px;
      color: var(--ct-tinta);
      margin-bottom: 3px;
      word-break: break-word;
    }

    .drive-doc-empty {
      border: 1px dashed var(--ct-linha);
      border-radius: 14px;
      padding: 14px;
      background: var(--ct-rebaixo);
      color: var(--ct-tinta-3);
      font-weight: 800;
    }



    /* AS ONZE CLASSES DO DRIVE QUE SOBRARAM SAÍRAM AQUI (10/08/2026).

       Eram o estilo de coisas que não existem mais: o quadro de status dos
       documentos (`drive-status-grid`, `drive-status-chip`), a busca de pasta
       (`drive-search-box`, `-row`, `-results`, `drive-folder-result`), a fila de
       envio (`drive-queue`, `-item`) e a caixa de "mover o antigo para
       DOCUMENTOS ANTIGOS" (`drive-update-check`).

       ESTILO SEM DONO É O QUE CRIOU A CONFUSÃO QUE ESTA REMOÇÃO DESFEZ: o Drive
       ficou meses "escondido, não removido", e o que sustentava a ilusão de que
       ele ainda existia era justamente a moldura continuar no arquivo.

       As quatro que FICARAM têm dono na seção de leitura do card:
       `drive-card-box`, `drive-link-linha`, `drive-panel-body`,
       `drive-doc-item` e `drive-doc-empty`. */

    /* Controle de senha por painel */
    .panel-password-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(15, 23, 42, .58);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 22px;
    }

    .panel-password-box {
      width: min(460px, 100%);
      background: var(--ct-superficie);
      border-radius: 24px;
      border: 1px solid rgba(17,17,17,.10);
      box-shadow: 0 30px 90px rgba(0,0,0,.28);
      overflow: hidden;
    }

    .panel-password-head {
      padding: 22px 24px;
      background: linear-gradient(135deg, var(--ct-tinta-2) 0%, var(--ct-inverso) 100%);
      color: var(--e-sobre-claro);
      border-bottom: 1px solid rgba(246,199,95,.55);
    }

    .panel-password-head h3 {
      margin: 0 0 6px;
      font-size: 22px;
    }

    .panel-password-head p {
      margin: 0;
      color: var(--ct-tinta-inv-2);
      font-size: 14px;
      line-height: 1.45;
    }

    .panel-password-body {
      padding: 22px 24px 24px;
      display: grid;
      gap: 14px;
    }

    .panel-password-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .panel-password-note {
      color: var(--ct-tinta-3);
      font-size: 13px;
      line-height: 1.45;
      margin: 0;
    }

    /* Modo fiscal externo: usado no link ?view=notafiscal.
       Sem o menu principal - e essa a razao de o link existir. */
    body.fiscal-mode .nav {
      display: none !important;
    }

    /* TUDO QUE NAO E A CENTRAL DO CONTADOR(A) FICA FORA, com !important: e a
       rede embaixo da regra de JS, para nenhum caminho antigo revelar uma
       tela por descuido. */
    body.fiscal-mode #produtividadeTab,
    body.fiscal-mode #historicoProTab,
    body.fiscal-mode #cadastroTab,
    body.fiscal-mode #retroativoTab,
    body.fiscal-mode #financeiroTab,
    body.fiscal-mode #protocoloAtualizacaoTab,
    body.fiscal-mode #atualizacaoTab,
    /* As seis filas de uma vez. A lista de ids tinha quatro e esquecia
       Registrados e Minha fila - no modo fiscal, que existe justamente para
       deixar so a Central do contador(a) na tela, duas filas continuavam
       alcancaveis. */
    body.fiscal-mode .ct-fila {
      display: none !important;
    }

    /* AS DUAS DA CENTRAL DO CONTADOR(A) NAO ENTRAM NAQUELA LISTA (03/08/2026).
       O #notaFiscalArquivadosTab estava la, e o #notaFiscalTab era forcado a
       aparecer - as duas coisas com !important. O resultado: a pilula "Notas
       arquivadas" existia, e clicar nela nao fazia nada. A contadora que
       precisa das arquivadas travava, sem mensagem nenhuma.
       Agora quem decide qual das duas esta na tela e o `hidden` que o showTab
       liga e desliga, como em toda a pagina - e quem decide se ela ALCANCA a
       outra e a permissao, nao o CSS. */

    .fiscal-access-banner {
      margin: 18px 0 0;
      border: 1px solid var(--ct-atencao-linha);
      background: var(--ct-dourado-suave);
      color: var(--ct-dourado-sobre);
      border-radius: 18px;
      padding: 14px 16px;
      font-weight: 800;
      line-height: 1.45;
    }

    .top-panel-grid {
      grid-template-columns: 1fr;
    }

    .filters.filters-top {
      position: static;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 12px;
      align-items: end;
      margin-bottom: 16px;
      padding: 14px;
      border: 1px solid var(--ct-info-linha);
      background: var(--e-novo-s);
      border-radius: 14px;
    }

    .filters.filters-top .filter-actions {
      display: flex;
      gap: 8px;
      align-items: end;
      flex-wrap: wrap;
    }

    .filters.filters-top .filter-msg {
      grid-column: 1 / -1;
      margin: 0;
    }

    .result-card {
      border-left-width: 7px;
      border-color: var(--ct-info-linha);
      box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
    }

    .result-card .result-title {
      color: var(--e-novo-f);
      letter-spacing: 0;
    }

    .result-card .chip {
      border-color: var(--ct-info-linha);
      background: var(--e-novo-s);
      color: var(--e-novo-f);
      font-weight: 900;
    }

    .result-card .chip.good,
    .result-card .chip.status-green {
      background: var(--e-ok-s);
      border-color: var(--e-ok-b);
      color: var(--e-ok-f);
    }

    .result-card .chip.warn,
    .result-card .chip.status-yellow {
      background: var(--ct-dourado-suave);
      border-color: var(--ct-dourado-linha);
      color: var(--e-site-f);
    }

    .detail-item {
      background: linear-gradient(180deg, var(--ct-superficie), var(--e-novo-s));
      border-color: var(--ct-info-linha);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
    }

    .detail-item span {
      color: var(--ct-info);
      font-weight: 900;
    }

    .detail-item strong {
      color: var(--e-novo-f);
    }

    .attendance-box {
      margin: 12px 0;
      border: 1px solid var(--e-novo-b);
      background: var(--e-novo-s);
      color: var(--e-novo-f);
      font-weight: 950;
    }

    .attendance-box .btn {
      background: var(--e-site-s);
      border-color: var(--e-site-b);
      color: var(--e-site-sobre);
    }

    .orcamento-card-box {
      margin-top: 12px;
      border: 1px solid var(--e-alerta-b);
      background: var(--e-alerta-s);
      border-radius: 14px;
      padding: 14px;
    }

    .orcamento-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
      color: var(--e-alerta-f);
    }

    .orcamento-head strong {
      font-size: 15px;
    }

    .orcamento-head span {
      color: var(--ct-alerta);
      font-size: 12px;
      font-weight: 900;
    }

    .orcamento-text {
      min-height: 150px;
      resize: vertical;
      border-color: var(--e-alerta-b);
      background: var(--ct-superficie);
      font-weight: 750;
      line-height: 1.45;
    }

    /* ============================================================================
       PAINEL DE CONFERENCIA - visual portado do central.html (Site 3), aba
       "Conferência com Gmail". Prefixo pconf- em tudo: nao pode colidir com
       .card/.actions/.msg que o Site 1 ja usa com outro significado (.card
       aqui e a secao de pagina inteira, com sombra - reusa-la aninhada dentro
       do card ficaria com caixa dentro de caixa). .actions e .msg (com
       .msg.ok/.err/.info) SAO reaproveitados como estao - o comportamento e
       identico ao que central.html quer.
       ============================================================================ */
    .pconf-root { display: flex; flex-direction: column; gap: 14px; }
    .pconf-card {
      background: var(--ct-superficie, var(--ct-superficie));
      border: 1px solid var(--ct-linha, var(--ct-linha));
      border-radius: var(--ct-r-md, 10px);
      overflow: hidden;
    }
    .pconf-cardHead {
      padding: 14px 16px 11px;
      border-bottom: 1px solid var(--ct-linha, var(--ct-linha));
      background: linear-gradient(180deg, var(--ct-superficie, var(--ct-superficie)), var(--ct-rebaixo, var(--ct-rebaixo)));
    }
    .pconf-cardHead h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ct-tinta, var(--ct-tinta)); }
    .pconf-cardHead p { margin: 4px 0 0; color: var(--ct-tinta-3, var(--ct-tinta-3)); font-size: 12.5px; }
    .pconf-cardBody { padding: 16px; }

    .pconf-via {
      border: 1px solid var(--ct-linha, var(--ct-linha));
      border-radius: var(--ct-r-md, 10px);
      padding: 13px 15px 14px;
      margin-bottom: 12px;
      background: var(--ct-superficie, var(--ct-superficie));
    }
    .pconf-via__rot {
      font-family: var(--ct-mono);
      font-size: 11px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ct-tinta-3, var(--ct-tinta-3));
      margin-bottom: 6px;
    }
    .pconf-via__desc { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--ct-tinta-2, var(--ct-tinta-2)); }
    .pconf-via .actions { margin-top: 0; }
    .pconf-via--manual { background: var(--ct-rebaixo, var(--ct-rebaixo)); }
    .pconf-via--manual .actions { margin-top: 0; }

    .pconf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
    .pconf-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 14px; }
    @media (max-width: 640px) { .pconf-grid2, .pconf-grid3 { grid-template-columns: 1fr; } }

    .pconf-notice {
      border: 0; border-left: 3px solid var(--ct-info, var(--ct-info)); background: var(--ct-info-suave, var(--ct-info-suave));
      color: var(--ct-tinta, var(--ct-tinta)); border-radius: 0; padding: 10px 12px; font-size: 13px; line-height: 1.55;
    }
    .pconf-notice.ok { border-left-color: var(--ct-ok, var(--ct-ok)); background: var(--ct-ok-suave, var(--ct-ok-suave)); }
    .pconf-notice.warn { border-left-color: var(--ct-dourado-fill, var(--ct-dourado-linha)); background: var(--ct-dourado-suave, var(--ct-atencao-suave)); }
    .pconf-tratado-linha { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, .08); }

    .pconf-tableWrap {
      overflow: auto; border: 1px solid var(--ct-linha, var(--ct-linha)); border-radius: var(--ct-r-md, 10px);
      margin-top: 12px; background: var(--ct-superficie, var(--ct-superficie));
    }
    table.pconf-rt, table.pconf-bt { width: 100%; border-collapse: collapse; min-width: 760px; }
    table.pconf-rt th, table.pconf-rt td, table.pconf-bt th, table.pconf-bt td {
      padding: 10px 12px; border-bottom: 1px solid var(--ct-linha-suave, var(--ct-linha-suave)); font-size: 13px; text-align: left; vertical-align: middle; color: var(--ct-tinta-2, var(--ct-tinta-2));
    }
    table.pconf-rt th, table.pconf-bt th {
      background: var(--ct-rebaixo, var(--ct-rebaixo)); color: var(--ct-tinta-3, var(--ct-tinta-3)); font-family: var(--ct-mono);
      font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
    }
    table.pconf-rt tbody tr:last-child td, table.pconf-bt tbody tr:last-child td { border-bottom: 0; }
    table.pconf-bt input, table.pconf-bt select { padding: 6px 8px; font-size: 12.5px; }
    table.pconf-bt input.pconf-b-val, table.pconf-bt input.pconf-b-hon { max-width: 110px; font-family: var(--ct-mono); }
    table.pconf-bt input[type=checkbox] { width: auto; transform: scale(1.1); }

    .pconf-tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 500; border: 0; }
    .pconf-tag.ok { background: var(--ct-ok-suave, var(--ct-ok-suave)); color: var(--ct-ok, var(--ct-ok)); }
    .pconf-tag.bad { background: var(--ct-alerta-suave, var(--ct-alerta-suave)); color: var(--ct-alerta, var(--ct-alerta)); }
    .pconf-tag.warn { background: var(--ct-dourado-suave, var(--ct-atencao-suave)); color: var(--ct-dourado, var(--ct-dourado)); }

    /* SO A DO ORCAMENTO usa esta grade (12/08/2026). A fileira de contadores da
       conferencia virou `.o-tiles`, do ds/orcamento-v3.css; esta continua
       porque o bloco do orcamento tem CINCO medidores, e tres deles sao preco —
       na Central o preco mora na coluna de resumo, e nao num cartao. Escopada
       para nao disputar com a `.o-tiles` da irma: as duas sao uma classe so, e
       quem ganharia seria a ordem de carregamento, que e o pior juiz. */
    .pconf-budget .pconf-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
    @media (max-width: 900px) { .pconf-summary { grid-template-columns: repeat(2, 1fr); } }
    .pconf-metric { border: 1px solid var(--ct-linha, var(--ct-linha)); border-radius: var(--ct-r-md, 10px); padding: 11px 13px 12px; background: var(--ct-superficie, var(--ct-superficie)); }
    .pconf-metric span { display: block; font-family: var(--ct-mono); font-size: 10.5px; color: var(--ct-tinta-3, var(--ct-tinta-3)); text-transform: uppercase; letter-spacing: .08em; }
    .pconf-metric strong { display: block; margin-top: 4px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ct-tinta, var(--ct-tinta)); font-variant-numeric: tabular-nums; }
    .pconf-metric.a strong { color: var(--ct-dourado, var(--ct-dourado)); }
    .pconf-metric.r strong { color: var(--ct-alerta, var(--ct-alerta)); }

    .pconf-card-nested { border: 1px solid var(--ct-linha, var(--ct-linha)); border-radius: var(--ct-r-md, 10px); margin-top: 14px; overflow: hidden; background: var(--ct-superficie, var(--ct-superficie)); }
    .pconf-bh { padding: 13px 15px 11px; border-bottom: 1px solid var(--ct-linha, var(--ct-linha)); background: linear-gradient(180deg, var(--ct-superficie, var(--ct-superficie)), var(--ct-rebaixo, var(--ct-rebaixo))); }
    .pconf-bh h4 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; }
    .pconf-bh p { margin: 4px 0 0; color: var(--ct-tinta-3, var(--ct-tinta-3)); font-size: 12.5px; }
    .pconf-bb { padding: 15px; }

    .fiscal-card {
      border-left-color: var(--e-site);
    }

    .finance-cards {
      grid-template-columns: repeat(2, minmax(220px, 360px));
      margin: 16px 0;
    }

    .finance-cards-panel {
      margin-top: 18px;
    }

    .finance-card-list {
      display: grid;
      gap: 14px;
    }

    .finance-card-list .fiscal-card {
      margin: 0;
    }

    .finance-grid {
      grid-template-columns: 1fr 1fr;
      margin-top: 12px;
    }

    .finance-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--ct-info-linha);
    }

    .finance-row:last-child {
      border-bottom: 0;
    }

    .finance-row strong {
      display: block;
      color: var(--e-novo-f);
    }

    .finance-row span {
      display: block;
      color: var(--ct-tinta-2);
      font-size: 12px;
      font-weight: 800;
      margin-top: 3px;
    }

    .finance-row b {
      color: var(--e-ok-f);
      white-space: nowrap;
    }

    .side-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .28);
      z-index: 70;
    }

    .side-detran-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: min(760px, 94vw);
      height: 100vh;
      background: var(--ct-superficie);
      border-left: 1px solid var(--ct-linha);
      box-shadow: -24px 0 60px rgba(15, 23, 42, .24);
      z-index: 80;
      display: flex;
      flex-direction: column;
    }

    .side-detran-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding: 14px 16px;
      border-bottom: 1px solid var(--ct-linha);
      background: var(--ct-tinta);
      color: var(--e-sobre-claro);
    }

    .side-detran-head span {
      display: block;
      color: var(--ct-linha);
      font-size: 12px;
      margin-top: 3px;
    }

    #detranSideFrame {
      border: 0;
      width: 100%;
      flex: 1;
      background: var(--ct-superficie);
    }

    @media (max-width: 920px) {
      .filters.filters-top {
        grid-template-columns: 1fr;
      }

      .finance-grid {
        grid-template-columns: 1fr;
      }
    }


    .brand-logo {
      border-radius: 50% !important;
      padding: 5px;
      background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.95), rgba(255,255,255,.18) 34%, transparent 52%),
        linear-gradient(135deg, var(--ct-amarelo), var(--ct-tinta-2));
      border: 2px solid var(--ct-dourado-linha) !important;
      box-shadow:
        0 0 0 7px rgba(246,199,95,.16),
        0 18px 42px rgba(0,0,0,.32),
        inset 0 0 18px rgba(255,255,255,.25);
      filter: saturate(1.05) contrast(1.08);
    }

    .brand-logo:hover {
      transform: translateY(-1px) scale(1.02);
      box-shadow:
        0 0 0 8px rgba(246,199,95,.22),
        0 22px 52px rgba(0,0,0,.36),
        0 0 24px rgba(246,199,95,.28);
    }

    #planilhaInfo {
      font-weight: 950;
    }

    #resultList .result-card,
    #confList .result-card,
    #contList .result-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(15, 23, 42, .08);
      border-left: 8px solid var(--ct-dourado-linha);
      background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98)),
        radial-gradient(circle at top right, rgba(246,199,95,.16), transparent 34%);
      box-shadow:
        0 18px 44px rgba(15, 23, 42, .10),
        inset 0 1px 0 rgba(255,255,255,.85);
    }

    #resultList .result-card::before,
    #confList .result-card::before,
    #contList .result-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: linear-gradient(90deg, var(--ct-amarelo), var(--e-novo), var(--e-ok));
      opacity: .82;
    }

    #resultList .result-card:hover,
    #confList .result-card:hover,
    #contList .result-card:hover {
      transform: translateY(-2px);
      box-shadow:
        0 24px 56px rgba(15, 23, 42, .14),
        inset 0 1px 0 rgba(255,255,255,.9);
    }

    #resultList .result-top,
    #confList .result-top,
    #contList .result-top {
      padding-bottom: 10px;
      border-bottom: 1px solid var(--ct-info-linha);
    }

    #resultList .detail-grid,
    #confList .detail-grid,
    #contList .detail-grid {
      gap: 10px;
    }

    .finance-row .finance-count {
      background: var(--e-novo-s);
      color: var(--e-novo-f);
      border: 1px solid var(--e-novo-b);
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 13px;
    }

    /* status-ok / status-error saíram: o pill virou anel de carregamento, que
       tem os proprios estados (arco cheio, arco vermelho). */

    .retro-form-only {
      max-width: 1040px;
    }

    /* Seletor "Novo cliente / Cliente retroativo" do painel Cadastro MULTA. */
    .ct-sub-cadastro {
      margin-bottom: 14px;
    }

    /* Seletores de sub-painel: filas da Central de processos e notas ativas/arquivadas. */
    .ct-sub-central,
    .ct-sub-contador {
      margin-bottom: 14px;
    }

    /* `.repeated-tag` FOI REMOVIDA em 12/08/2026. Ela era sobra do backend Apps
       Script (a etiqueta "Repetido xN" do agrupamento de pagamento) e não era
       usada em lugar nenhum — nem em marcação, nem montada em JavaScript.
       Removida junto com a chegada da `.ct-tag`, para não haver duas famílias de
       etiqueta no arquivo e a próxima pessoa não gastar tempo escolhendo. */

    #resultList .result-card,
    #confList .result-card,
    #contList .result-card {
      border-radius: 18px;
      padding: 18px;
    }

    #resultList .result-title,
    #confList .result-title,
    #contList .result-title {
      font-size: 22px;
      line-height: 1.08;
      max-width: 560px;
    }

    #resultList .chips,
    #confList .chips,
    #contList .chips {
      gap: 8px;
      margin: 12px 0;
    }

    #resultList .chip,
    #confList .chip,
    #contList .chip {
      border-radius: 999px;
      padding: 8px 12px;
      background: var(--ct-rebaixo);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
    }

    #resultList .card-summary-grid,
    #confList .card-summary-grid,
    #contList .card-summary-grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin: 12px 0;
    }

    #resultList .card-summary-grid .detail-item,
    #confList .card-summary-grid .detail-item,
    #contList .card-summary-grid .detail-item {
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--e-novo-s);
    }

    #resultList .attendance-box,
    #confList .attendance-box,
    #contList .attendance-box {
      border-radius: 16px;
      padding: 12px 14px;
      margin-top: 14px;
    }

    #resultList .actions,
    #confList .actions,
    #contList .actions {
      gap: 9px;
      padding-top: 10px;
      border-top: 1px solid var(--ct-linha-suave);
    }

    #resultList .btn,
    #confList .btn,
    #contList .btn {
      border-radius: 12px;
    }

    .card-collapse {
      border-radius: 12px;
      background: var(--ct-rebaixo);
    }

    .orcamento-envio-info {
      margin-top: 8px;
      color: var(--e-alerta-f);
      font-size: 12px;
      font-weight: 850;
    }

    /* ======================================================================
       Central de processos — complemento dos tokens

       O ct-tokens.css traz .ct-card, .ct-trilho, .ct-plate, .ct-fields, .ct-label,
       .ct-state e .ct-code. O que falta e a cola entre eles neste card, mais as
       regras que DESLIGAM o visual antigo onde as duas classes convivem
       (.ct-card.result-card) — sem isso, a borda e a sombra antigas continuam
       desenhando por baixo.
       ====================================================================== */
    .ct-card.result-card {
      padding: 0;
      box-shadow: none;
      border-left: 1px solid var(--ct-linha);
      font-family: var(--ct-fonte);
      color: var(--ct-tinta);
    }
    /* As faixas coloridas antigas davam a mesma informacao que a .ct-trilho, e
       com outra cor. Duas fontes de verdade para o mesmo estado confundem. */
    .ct-card.result-card.incomplete,
    .ct-card.result-card.archived { box-shadow: none; }

    .ct-titles { flex: 1; min-width: 0; }
    /* O nome perde peso de titulo: quem titula o card e a placa, ao lado. Sem
       nome (metade dos cadastros) este bloco nem existe, e a linha de
       identificacao sobe para o lugar dele. */
    .ct-titles .ct-nome {
      margin: 0 0 3px;
      font-size: var(--ct-fs-corpo);
      font-weight: 600;
      letter-spacing: -.01em;
      color: var(--ct-tinta);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ct-sep { color: var(--ct-tinta-3); }

    /* O CAMINHO DE VOLTA AO ORÇAMENTO (10/08/2026), na linha de meta.
       Herda a cor e o tamanho da linha porque é meta, e não uma ação de
       destaque — o que ele promete é "daqui dá para chegar lá", não "clique
       aqui primeiro". A afordância é o sublinhado pontilhado, a mesma da
       lista de Orçamentos salvos: as duas telas usam o mesmo gesto para
       abrir o mesmo tipo de coisa. */
    .ct-orc-volta {
      background: none; border: 0; padding: 0; font: inherit; color: inherit;
      cursor: pointer;
      text-decoration: underline; text-decoration-style: dotted;
      text-underline-offset: 3px;
    }
    .ct-orc-volta:hover, .ct-orc-volta:focus-visible { text-decoration-style: solid; }

    .ct-card__head-fim {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: none;
      justify-content: flex-end;
    }

    /* ----------------------------------------------------------------------
       O PROTOCOLO NO CABECALHO (30/07/2026)

       Ao lado da placa e no mesmo formato dela (rotulo pequeno em cima, codigo
       embaixo): o card fechado nao ganha um pixel de altura, e os dois
       identificadores do processo ficam juntos, que e como a equipe fala deles.
       ---------------------------------------------------------------------- */
    .ct-proto { flex: none; display: flex; align-items: center; gap: 7px; max-width: 240px; }
    .ct-proto-bloco { min-width: 0; }
    .ct-proto .ct-label { margin-bottom: 1px; }
    .ct-proto-valor { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* "sem protocolo" e ALERTA, e nao um campo vazio: era justamente o estado
       que passava despercebido numa fila de centenas de cards. */
    .ct-proto-valor--vazio {
      font-size: 12px; font-weight: 700; white-space: nowrap;
      color: var(--ct-alerta, var(--ct-alerta)); background: var(--ct-alerta-suave, var(--ct-alerta-suave));
      border: 1px solid var(--ct-alerta-linha); border-radius: 999px; padding: 2px 9px;
    }
    .ct-proto-editar { white-space: nowrap; }

    /* A caixa de edicao: dourada, porque espera uma acao deliberada de uma
       pessoa - a mesma cor do aviso do formulario preenchido. */
    .ct-proto-edit {
      margin: 0 18px 10px; padding: 10px 12px; border-radius: 8px;
      background: var(--ct-dourado-suave, var(--ct-atencao-suave));
      border: 1px solid var(--ct-dourado-fill, var(--ct-atencao-linha));
    }
    .ct-proto-aviso { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--ct-tinta, var(--ct-tinta)); }
    .ct-proto-edit-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .ct-proto-nota { margin: 8px 0 0; font-size: 12px; color: var(--ct-tinta-2, var(--ct-tinta-2)); }
    /* Card fechado tem altura fixa e corta o que passa dela. Com a caixa aberta
       ele precisa crescer, senao clicar em "editar" nao mostra nada. Mesma
       excecao que ja vale para o conflito e para o selo de conferido. */
    .ct-card--compacto:not(.card-is-open):has(.ct-proto-edit:not([hidden])) {
      height: auto; overflow: visible;
    }

    /* ======================================================================
       O CARD COMPACTO  (itens 3.2 e 3.3, 27/07/2026)

       Igual ao cnh.html, classe por classe. As duas Centrais passam a ter o
       mesmo card: quem trabalha nas duas para de reaprender.

       Antes: altura variavel e quatro sinais de estado competindo no
       cabecalho. Um card com posse, pendencia e conversa do WhatsApp era
       quase o dobro de um card seco - rolando a fila, o olho nao tinha regua
       e precisava LER cada card para saber onde ele comecava.

       Agora o card fechado tem altura fixa e mostra so o que se le de
       relance: quem e, em que pe esta, e se esta atrasado. O resto volta ao
       passar o mouse OU ao chegar de Tab (:focus-within), porque quem navega
       de teclado nao tem hover.

       "Abrir card" e a caixinha de selecao ficam FORA disso: sao o botao
       principal e o gesto do lote, e nao podem depender de gesto nenhum.
       ====================================================================== */
    /* A altura fixa do card fechado, agora somando a faixa dos carimbos que
       nasceu em 31/07 e esta em TODOS os cards. Mesma forma do cnh.html com a
       faixa do protocolo: uma variavel para a faixa, e a altura do card
       calculada a partir dela - assim mexer no espacamento da faixa nao exige
       recontar o numero magico aqui embaixo. */
    .ct-card--compacto {
      --ct-carimbos-h: 29px;
      /* A faixa do comentario interno (11/08/2026) entra na conta pelo mesmo
         motivo da dos carimbos: ela esta em TODO card. Somar aqui e o que
         impede que ela empurre o rodape do card fechado para fora do
         overflow:hidden - o corte seria silencioso. */
      --ct-coment-h: 30px;
      /* A faixa do proximo passo (25/08/2026) esta em TODO card, como a do
         comentario: entra na conta pela mesma razao. */
      --ct-proximo-h: 28px;
      --ct-card-h: calc(121px + var(--ct-carimbos-h) + var(--ct-coment-h) + var(--ct-proximo-h));
      overflow: hidden; position: relative;
    }
    .ct-card--compacto .ct-card__head {
      display: flex; align-items: center; gap: 14px; padding: 12px 18px;
    }
    .ct-card--compacto .ct-plate { flex: none; }
    .ct-titles .ct-nome--vazio {
      font-size: 13.5px; font-weight: 500; color: var(--ct-tinta-3);
    }
    .ct-card--compacto .ct-meta {
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* A marcacao do Relatorio de Conferencia (fase 4, 29/07/2026): a marca e
       a DATA DA LEITURA, em linha propria sob a meta — orientacao sem data e
       pior que nenhuma. O 📌 e o title (orientacao + porque) completam sem
       ocupar; dourado seria mentira aqui, porque nem toda marca espera gente. */
    .ct-marcacao {
      font-size: 12px; color: var(--ct-tinta-2, var(--ct-tinta-2)); margin-top: 2px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* A marcacao feita SEM consultar o orgao (30/07/2026). A ressalva vale
       tanto quanto a data, entao ela nao pode ser o pedaco que as reticencias
       comem: a linha passa a quebrar em vez de cortar. Sem cor de alarme —
       a conferencia foi feita, so nao teve orgao do outro lado; e contorno da
       leitura, nao defeito. O peso basta para ela nao passar por enfeite. */
    .ct-marcacao--cega { white-space: normal; overflow: visible; }
    .ct-sem-detran { font-weight: 600; color: var(--ct-tinta, var(--ct-tinta)); }

    /* O aviso do formulario preenchido pelo Relatorio (fase 6a). Dourado: e o
       que ESPERA uma acao da pessoa — conferir e cadastrar. */
    .ct-aviso-prefill {
      margin-bottom: 14px; padding: 11px 13px; border-radius: 8px;
      font-size: 13px; line-height: 1.55;
      background: var(--ct-dourado-suave, var(--ct-atencao-suave));
      border: 1px solid var(--ct-dourado-fill, var(--ct-atencao-linha));
      color: var(--ct-tinta, var(--ct-tinta));
    }
    .ct-aviso-prefill .mono { font-family: var(--ct-mono); }

    /* A PASTILHA - a unica palavra de estado do card fechado. */
    .ct-pas {
      display: inline-block; font-size: 11.5px; font-weight: 700; line-height: 1.35;
      padding: 3px 11px; border-radius: 999px; white-space: nowrap;
      border: 1px solid var(--ct-linha); background: var(--ct-rebaixo); color: var(--ct-tinta-2);
      max-width: 230px; overflow: hidden; text-overflow: ellipsis;
    }
    .ct-pas--ok     { background: var(--ct-ok-suave,var(--ct-ok-suave));    color: var(--ct-ok,var(--ct-ok));    border-color: var(--ct-ok-linha); }
    .ct-pas--ouro   { background: var(--ct-dourado-suave,var(--ct-atencao-suave));  color: var(--ct-dourado,var(--ct-dourado));  border-color: var(--ct-atencao-linha); }
    .ct-pas--alerta { background: var(--ct-alerta-suave,var(--ct-alerta-suave)); color: var(--ct-alerta,var(--ct-alerta)); border-color: var(--ct-alerta-linha); }
    .ct-pas--info   { background: var(--ct-info-suave,var(--ct-info-suave));  color: var(--ct-info,var(--ct-info));  border-color: var(--ct-info-linha); }
    .ct-pas--neutra { background: var(--ct-rebaixo); color: var(--ct-tinta-3); }

    /* ---- A TAG DO CARD (12/08/2026) ---------------------------------------
       MARCA-TEXTO: cor CHEIA no fundo, com o texto de contraste que a paleta já
       mediu para cada família. Não há hex aqui — cor escrita à mão é o que faz
       uma tela divergir do resto no tema escuro.

       CANTO QUADRADO, de propósito: a pastilha ao lado é `border-radius:999px`,
       e duas pílulas na mesma linha seriam lidas como duas palavras de estado. A
       tag é etiqueta, e etiqueta tem canto.

       ALTURA IGUAL À DA PASTILHA (mesma fonte, mesmo padding): o cabeçalho do
       card fechado não pode ganhar um pixel — a altura dele é fixa e o que passa
       dela é cortado calado. */
    .ct-tag {
      display: inline-flex; align-items: center; flex: none;
      font-size: 11.5px; font-weight: 700; line-height: 1.35;
      padding: 3px 10px; border-radius: 4px; border: 1px solid transparent;
      white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
      font-family: var(--ct-fonte); cursor: pointer;
    }
    /* A COR É POR CLASSE DE COR, e não por id de tag (etapa 2, 12/08/2026).
       Enquanto a lista morava no código dava para escrever `.ct-tag--impresso`;
       com a lista em Configurações, a próxima tag nasce sem CSS e sairia sem
       cor nenhuma. A tag guarda QUAL cor da paleta ela veste, e a folha tem uma
       classe para cada cor — quatro, e não infinitas, porque cada uma precisa
       do texto de contraste medido nos DOIS temas.

       AS QUATRO, MEDIDAS (claro / escuro):
         laranja  5,01 / 5,01     preto  13,63 / 12,14  (este inverte no escuro)
         roxo     5,70 / 5,70     azul    5,17 / 5,17

       VERDE, DOURADO E VERMELHO NÃO ESTÃO AQUI e não podem entrar: são a
       família do estado do processo, na pastilha logo ao lado, e tag nessa cor
       é lida como status. É a razão de a paleta ser fechada em vez de um
       seletor de cor livre em Configurações. */
    .ct-tag--cor-laranja { background: var(--e-site);    color: var(--e-site-sobre);  border-color: var(--e-site-f); }
    .ct-tag--cor-roxo    { background: var(--e-decurso); color: var(--e-sobre-claro); border-color: var(--e-decurso-f); }
    .ct-tag--cor-preto   { background: var(--e-aguar);   color: var(--e-aguar-sobre); border-color: var(--e-aguar-f); }
    .ct-tag--cor-azul    { background: var(--e-novo);    color: var(--e-sobre-claro); border-color: var(--e-novo-f); }
    /* Tag gravada que saiu do catálogo: aparece neutra, com o texto cru. Sumir
       com ela seria apagar um fato da tela sem apagá-lo do banco. */
    .ct-tag--fora     { background: var(--ct-rebaixo); color: var(--ct-tinta-2); border-color: var(--ct-linha); }
    /* A TAG DE REGRA (30/08/2026): o sistema aplica sozinho (Prioridade =
       órgão DETRAN; Imprimir = Operacional/Continuidade fora das exceções).
       TRACEJADA para o olho separar o automático do manual, e sem cursor de
       convite — não há menu nela. As cores vêm das classes de cor de cima. */
    .ct-tag--regra    { border-style: dashed; cursor: default; }
    /* O convite. Discreto de propósito: ele está em todo card sem tag, e um
       chip forte repetido trezentas vezes competiria com o que se lê. */
    .ct-tag--vazia {
      background: transparent; color: var(--ct-tinta-3); font-weight: 500;
      border: 1px dashed var(--ct-linha);
    }
    .ct-tag--vazia:hover { color: var(--ct-tinta); border-color: var(--ct-tinta-3); }
    .ct-tag:focus-visible { outline: 2px solid var(--ct-anel); outline-offset: 1px; }
    span.ct-tag { cursor: default; }   /* fila de leitura: mostra, não convida */

    /* O menu é UM na página (ver ctTagMenuAbrir), posicionado no clique. */
    .ct-tag-menu {
      position: fixed; z-index: 9999; min-width: 180px;
      display: flex; flex-direction: column; gap: 2px; padding: 6px;
      background: var(--ct-superficie); border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-md, 10px);
      box-shadow: 0 12px 30px -12px rgba(0,0,0,.35);
    }
    .ct-tag-menu__op {
      display: flex; align-items: center; gap: 8px; width: 100%;
      border: 0; background: transparent; cursor: pointer;
      padding: 6px 8px; border-radius: 6px; text-align: left;
      font-family: var(--ct-fonte); font-size: 13px; color: var(--ct-tinta);
    }
    .ct-tag-menu__op:hover { background: var(--ct-rebaixo); }
    .ct-tag-menu__op.is-atual { background: var(--ct-rebaixo); }
    .ct-tag-menu__remover { color: var(--ct-alerta); font-weight: 600; }

    /* O ESTADO FECHADO: altura fixa. */
    .ct-card--compacto:not(.card-is-open) { height: var(--ct-card-h); }

    /* ---- A BARRA FICA NO LUGAR; SO BAIXA O TOM -------------------------
       Esta parte teve DUAS versoes erradas antes desta, e as duas so
       cairam no teste (no Site 2, que roda primeiro):

       1a) a barra aparecia no hover e o card CRESCIA. Crescendo, empurra
           todos os cards de baixo - quem levava o mouse ate um botao do
           card seguinte via o botao fugir debaixo do cursor.

       2a) a barra aparecia no hover SOBREPONDO o card de baixo, como um
           menu. A fila parou de se mexer, mas ficou pior de usar: a barra
           do card 1 cobre o topo do card 2, e o mouse indo para baixo
           atravessa a barra do card anterior em vez de chegar no proximo.

       O que ficou: a barra esta SEMPRE no layout e sempre clicavel - so
       nasce em tom baixo, sem moldura, e ganha contorno quando o mouse
       entra no card ou o foco de teclado chega nele. A geometria da lista
       nunca muda, nada cobre nada, e quem usa Tab alcanca tudo.

       O ganho de densidade vem de onde ele realmente estava: os campos
       (auto, RENAVAM, CPF, telefone) saem do card fechado, e o cabecalho
       passou de quatro sinais de estado para dois.
       ------------------------------------------------------------------ */
    .ct-card--compacto:not(.card-is-open) .ct-cardtop {
      padding: 4px 18px 10px; opacity: .72; transition: opacity .12s;
    }
    .ct-card--compacto:not(.card-is-open) .ct-cardtop .ct-mini,
    .ct-card--compacto:not(.card-is-open) .ct-cardtop .ct-mini-sel {
      border-color: transparent; background: transparent;
    }
    .ct-card--compacto:not(.card-is-open):hover .ct-cardtop,
    .ct-card--compacto:not(.card-is-open):focus-within .ct-cardtop { opacity: 1; }
    .ct-card--compacto:not(.card-is-open):hover .ct-cardtop .ct-mini,
    .ct-card--compacto:not(.card-is-open):focus-within .ct-cardtop .ct-mini,
    .ct-card--compacto:not(.card-is-open):hover .ct-cardtop .ct-mini-sel,
    .ct-card--compacto:not(.card-is-open):focus-within .ct-cardtop .ct-mini-sel {
      border-color: var(--ct-linha); background: var(--ct-superficie);
    }
    .ct-card--compacto .ct-cardtop :focus-visible { outline: 2px solid var(--ct-tinta); outline-offset: 1px; }
    /* Isto sim continua fora do card fechado: e o que economiza altura de
       verdade, e tem lugar proprio quando o card abre. */
    .ct-card--compacto:not(.card-is-open) .ct-fields { display: none; }
    /* Texto na mesma linha (nowrap + reticencias): revelar nao muda altura. */
    .ct-card--compacto:not(.card-is-open) .ct-sub-extra { display: none; }
    .ct-card--compacto:not(.card-is-open):hover .ct-sub-extra,
    .ct-card--compacto:not(.card-is-open):focus-within .ct-sub-extra { display: inline; }

    /* O conflito NAO se esconde: e aviso, e aviso que so aparece no hover nao e
       aviso. Estica o card, e tudo bem - sao poucos.

       A FAIXA DOS CARIMBOS SAIU DESTA LISTA em 31/07/2026. Ate aqui quem estava
       aqui era o selo "Conferido", que so existia em ALGUNS cards - deixar
       esses poucos crescerem era barato. A faixa nova esta em TODOS, entao
       `height:auto` aqui desligaria a altura fixa da fila inteira, e a fila
       voltaria a ter card de tamanhos diferentes.
       A altura dela entra no calculo do card (ver --ct-carimbos-h), que e como
       o cnh.html ja trata a faixa do protocolo. */
    .ct-card--compacto:not(.card-is-open):has(.ct-conflito) { height: auto; }
    .ct-card--compacto.card-is-open { height: auto; overflow: visible; }

    /* Telas estreitas e toque: nao ha hover para revelar nada, e altura fixa
       deixa de valer quando o cabecalho quebra em duas linhas. */
    @media (max-width: 760px) {
      .ct-card--compacto,
      .ct-card--compacto:not(.card-is-open) { height: auto; overflow: visible; }
      .ct-card--compacto .ct-card__head { flex-wrap: wrap; }
      .ct-card--compacto:not(.card-is-open) .ct-cardtop { opacity: 1; }
      .ct-card--compacto:not(.card-is-open) .ct-sub-extra { display: inline; }
    }
    /* Sem mouse (toque) nao ha hover: a barra sai do tom baixo e a linha fina
       mostra tudo, senao esse conteudo ficaria inalcancavel no celular. */
    @media (hover: none) {
      .ct-card--compacto,
      .ct-card--compacto:not(.card-is-open) { height: auto; overflow: visible; }
      .ct-card--compacto:not(.card-is-open) .ct-cardtop { opacity: 1; }
      .ct-card--compacto:not(.card-is-open) .ct-cardtop .ct-mini,
      .ct-card--compacto:not(.card-is-open) .ct-cardtop .ct-mini-sel {
        border-color: var(--ct-linha); background: var(--ct-superficie); }
      .ct-card--compacto:not(.card-is-open) .ct-sub-extra { display: inline; }
    }

    /* ----------------------------------------------------------------------
       Semaforo do andamento. Tres luzes, so a do estado acesa:
       verde=Defesa previa, amarelo=1a instancia, vermelho=2a instancia.
       Desenhado em TODOS os cards - com as tres apagadas quando o status nao e
       processual - para a coluna de estado nao dancar de card para card.
       ---------------------------------------------------------------------- */
    .semaforo {
      display: inline-flex; gap: 5px; align-items: center; padding: 5px 8px;
      background: var(--ct-inverso); border-radius: 11px; vertical-align: middle;
    }
    .semaforo__luz {
      width: 15px; height: 15px; border-radius: 50%; opacity: .16;
      border: 1px solid rgba(255,255,255,.08);
    }
    .semaforo__luz--v { background: var(--e-alerta); }
    .semaforo__luz--a { background: var(--ct-dourado-fill); }
    .semaforo__luz--g { background: var(--e-ok); }
    .semaforo--vermelho .semaforo__luz--v { opacity: 1; box-shadow: 0 0 9px 1px var(--e-alerta); border-color: transparent; }
    .semaforo--amarelo  .semaforo__luz--a { opacity: 1; box-shadow: 0 0 9px 1px var(--ct-dourado-linha); border-color: transparent; }
    .semaforo--verde    .semaforo__luz--g { opacity: 1; box-shadow: 0 0 9px 1px var(--e-ok); border-color: transparent; }

    /* Selo do prazo do recurso. Conta da entrada na Conferencia. */
    .prazo {
      display: inline-block; font-size: 12px; font-weight: 600;
      padding: 2px 10px; border-radius: 999px; white-space: nowrap;
    }
    .prazo--ok    { background: var(--e-ok-s); color: var(--e-ok-f); }
    .prazo--perto { background: var(--ct-dourado-suave); color: var(--ct-dourado); }
    .prazo--venc  { background: var(--e-alerta-s); color: var(--e-alerta-f); }

    /* Atalhos no topo do card (Editar / Salvar / Status / Mover). Ficam a mao,
       logo abaixo do cabecalho, para o gesto comum nao exigir abrir o card. */
    .ct-cardtop {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      padding: 8px 18px 4px;
    }
    .ct-mini {
      border: 1px solid var(--ct-linha); background: var(--ct-superficie); color: var(--ct-tinta-2);
      border-radius: var(--ct-r-sm); padding: 5px 12px; font-family: var(--ct-fonte);
      font-size: 13px; cursor: pointer; line-height: 1.2;
      transition: background-color .12s, color .12s, border-color .12s;
    }
    .ct-mini:hover { background: var(--ct-rebaixo); color: var(--ct-tinta); border-color: var(--ct-tinta-3); }
    .ct-mini:disabled { opacity: .55; cursor: default; }
    .ct-mini--save { border-color: var(--ct-dourado, var(--ct-dourado-linha)); color: var(--ct-dourado); }
    /* Assumir e a acao que traz o cliente para voce. Era o lime da acao
       principal; com o lime fora da pagina (11/08/2026) ela veste o AZUL, que
       no vocabulario do sistema e "informacao/atalho" e nao estado de card.
       Preta ela nao pode ser: preto agora e a acao que decide, e um chip de
       linha de card competiria com o "Salvar" do formulario.
       "Meu" e estado, nao convite - fica discreto. */
    .ct-mini--assumir { border-color: var(--ct-info-linha); background: var(--ct-info-suave); color: var(--ct-info); font-weight: 500; }
    .ct-mini--assumir:hover { background: var(--b-azul); border-color: var(--b-azul); color: var(--b-letra); }
    .ct-mini--meu { border-color: var(--ct-info-linha); color: var(--ct-tinta-2); }
    .ct-mini--travado { background: var(--ct-rebaixo); color: var(--ct-tinta-3); cursor: default; }

    /* Selecao em lote: a caixinha entra antes da placa, e a barra de acoes
       aparece rente ao rodape so quando ha algo selecionado. */
    .ct-sel-wrap { display: inline-flex; align-items: center; padding: 0 2px; cursor: pointer; }
    .ct-sel { width: 17px; height: 17px; accent-color: var(--ct-anel); cursor: pointer; }

    /* Presa nas DUAS bordas e com largura fixa (o max-width), e nao dimensionada
       pelo conteudo. Com `left:50% + translateX(-50%)`, a caixa fixa so tem a
       metade direita da tela para se dimensionar e o max-width nunca chega a
       valer: medida a 1265px, a barra nascia com 583px e quebrava em duas
       linhas, com 107px de altura. Em 720 o conteudo (~640px) cabe numa linha
       so e a sobra fica com a mensagem, que e o unico item elastico.
       Mesma regra do Site 2 - e a mesma barra. */
    .ct-lote {
      position: fixed; left: 0; right: 0; bottom: 18px; margin-inline: auto;
      z-index: 60; display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
      padding: 10px 14px; max-width: min(720px, calc(100vw - 24px));
      background: var(--ct-superficie); border: 1px solid var(--ct-linha);
      border-radius: 999px; box-shadow: 0 8px 28px rgba(15, 23, 42, .16);
    }
    .ct-lote__n { font-size: 13.5px; color: var(--ct-tinta-2); white-space: nowrap; }
    .ct-lote__n b { color: var(--ct-tinta); }
    /* A mensagem absorve a sobra: sem `flex:1` a folga viraria um vao no fim da
       barra, e o "Limpar seleção" nao encostaria na borda direita. */
    .ct-lote__msg { font-size: 12.5px; color: var(--ct-tinta-3); min-width: 0; flex: 1; }
    .ct-lote__msg--err { color: var(--e-alerta-f); }
    /* Espaco no fim da pagina para a barra nao cobrir o ultimo card. */
    .ct-lote-aberto .wrap { padding-bottom: 84px; }
    /* No celular a barra vira faixa, e nao pilula: com pouca largura ela ocupa
       quase tudo, e o raio de 999px em duas linhas parece um erro. A largura ja
       e resolvida pelo max-width acima. */
    @media (max-width: 640px) {
      .ct-lote { border-radius: 14px; }
    }

    /* AS DUAS DATAS, a primeira coisa do card (31/07/2026).

       Ocupa o lugar do antigo selo "✅ Conferido" - faixa cheia, pelo mesmo
       motivo de antes: e informacao do card INTEIRO, e quem percorre a fila
       tem de ler de relance.

       O QUE MUDOU NA COR. O selo era verde porque era uma confirmacao ("este ja
       foi feito"). A faixa agora aparece em TODO card, inclusive nos que nunca
       foram conferidos - verde em todos diria que esta tudo conferido. Entao
       ela e neutra, e quem marca o estado continua sendo a pastilha e o
       semaforo, que ja existem para isso.

       SEM raio proprio de proposito: o card tem `overflow:hidden` e ja recorta
       os cantos. Com um raio aqui menor que o do card sobrava uma fresta branca
       em cada canto de cima - medido, na epoca do selo. */
    /* NADA AQUI REAPROVEITA CLASSE DE FORA, e isso e a licao de 31/07: a
       primeira versao usava `.ct-label` e `.ct-code`, que neste arquivo ja
       existem com OUTRO sentido - `.ct-label` e rotulo de formulario,
       `display:block` com margem embaixo. Resultado medido na pagina publicada:
       os dois blocos empilharam e a faixa foi para 65px, contra os 29px que a
       altura do card reserva. Card fechado tem `overflow:hidden`, entao o
       excesso nao aparece: ele CORTA o que vem depois, calado.
       Por isso todo seletor daqui e proprio e escopado em `.ct-carimbos`. */
    .ct-carimbos {
      display: flex; align-items: center; gap: 18px;
      /* NOWRAP e altura fixa: a faixa esta em TODO card, e a altura dela e uma
         parcela de --ct-card-h. Se ela crescer, corta o card por baixo. */
      flex-wrap: nowrap; overflow: hidden;
      height: var(--ct-carimbos-h, 29px); box-sizing: border-box;
      padding: 0 21px;
      background: var(--ct-rebaixo);
      border-bottom: 1px solid var(--ct-linha, var(--ct-linha));
      border-radius: 0;
      font-size: 12.5px; line-height: 1.2; color: var(--ct-tinta-2);
    }
    .ct-carimbos .ct-carimbo {
      display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    }
    .ct-carimbos .ct-carimbo-lbl {
      display: inline-block; margin: 0; flex: none;
      font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--ct-tinta-3, var(--ct-tinta-3)); font-weight: 600; line-height: 1.2;
    }
    .ct-carimbos .ct-carimbo-val {
      display: inline-block; margin: 0;
      font-family: var(--ct-mono); font-size: 12px; line-height: 1.2;
      color: var(--ct-tinta); white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .ct-carimbos .ct-carimbo-vazio {
      display: inline-block; font-size: 12px; line-height: 1.2;
      color: var(--ct-tinta-3, var(--ct-tinta-3)); font-style: italic; white-space: nowrap;
    }
    .ct-carimbos .ct-carimbo-por {
      font-size: 11.5px; line-height: 1.2; color: var(--ct-tinta-3, var(--ct-tinta-3));
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* O BOTÃO "CONFERIDO HOJE!"  (13/08/2026, pedido da dona: "um Botão Verde
       forte Escrito Conferido Hoje!")

       ELE TEM DE CABER EM 29px. A faixa tem altura FIXA, e essa altura é uma
       parcela de --ct-card-h (ver o topo deste bloco): um botão mais alto não
       empurra a faixa — ele é CORTADO, e o card fica torto por baixo. Por isso
       21px de altura e não o tamanho de botão de formulário.

       O VERDE NÃO VIRA NO TEMA ESCURO, e isto é escolha e não descuido. O
       `--ct-ok` da casa aponta para `--e-ok-f`, que é ESCURO no claro (#046A4C)
       e CLARO no escuro (#63E0B4) — usá-lo como fundo daria texto branco sobre
       verde-claro no escuro, que não se lê. Aqui vale a mesma regra do
       `--ct-inverso`: é uma cor de MARCA do botão, igual nos dois temas, com
       texto claro por cima. O #046A4C dá 7,4:1 com branco, folgado nos dois. */
    .ct-carimbos .ct-conf-hoje {
      flex: none; height: 21px; padding: 0 10px;
      border: 1px solid #046A4C; border-radius: var(--ct-r-pill, 999px);
      background: #046A4C; color: #FFFFFF;
      font-family: var(--ct-fonte); font-size: 11px; font-weight: 600;
      line-height: 1; letter-spacing: .01em; white-space: nowrap; cursor: pointer;
    }
    .ct-carimbos .ct-conf-hoje:hover { background: #035B41; border-color: #035B41; }
    /* Desligado é só ENQUANTO grava — ele volta a ficar ativo, de propósito
       (o pedido é poder clicar de novo e atualizar o carimbo). */
    .ct-carimbos .ct-conf-hoje:disabled { opacity: .55; cursor: default; }
    /* O calendario na altura do texto ao lado. As medidas vao com `!important`
       porque a regra de campo deste arquivo e mais especifica que uma classe
       so, e devolvia `padding:9px 11px` - 43px de altura num lugar de 29. */
    .ct-carimbos .ct-carimbo-data {
      display: inline-block; box-sizing: border-box;
      height: 22px !important; padding: 1px 5px !important; margin: 0 !important;
      font-family: var(--ct-mono) !important; font-size: 12px !important;
      line-height: 1.2 !important;
      border: 1px solid var(--ct-linha, var(--ct-linha)) !important;
      border-radius: 6px !important;
      background: var(--ct-superficie); color: var(--ct-tinta);
    }
    .ct-carimbos .ct-carimbo-data:focus { outline: 2px solid var(--ct-anel); outline-offset: 1px; }
    .ct-carimbos .ct-carimbo-data:disabled { opacity: .55; cursor: default; }
    .ct-carimbos .ct-conf-limpar { flex: none; }

    /* ---- COMENTARIO INTERNO (11/08/2026) ------------------------------------
       A SEGUNDA FAIXA DE TODO CARD, e por isso ela entra na conta da altura
       (--ct-coment-h, somada em --ct-card-h la em cima). E a licao que a faixa
       dos carimbos deixou escrita: faixa que esta em TODO card e altura fixa,
       senao ela empurra o resto para fora do card fechado - que tem
       overflow:hidden e CORTA calado, sem erro nenhum para achar.

       Todo seletor daqui e escopado em `.ct-coment` pelo mesmo motivo do
       bloco acima: `.ct-coment-lbl` e parente de `.ct-label`, que neste
       arquivo e rotulo de formulario com display:block e margem - herdar
       aquilo empilharia a faixa e estouraria a altura. */
    .ct-coment {
      display: flex; align-items: center; gap: 10px;
      flex-wrap: nowrap; overflow: hidden;
      height: var(--ct-coment-h, 30px); box-sizing: border-box;
      padding: 0 21px;
      background: var(--ct-superficie);
      border-bottom: 1px solid var(--ct-linha, var(--ct-linha));
      font-size: 12.5px; line-height: 1.2; color: var(--ct-tinta-2);
    }
    .ct-coment .ct-coment-lbl {
      display: inline-block; margin: 0; flex: none;
      font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--ct-tinta-3, var(--ct-tinta-3)); font-weight: 600; line-height: 1.2;
    }
    .ct-coment .ct-coment-carimbo {
      display: inline-flex; align-items: center; flex: none;
      font-family: var(--ct-mono); font-size: 12px; line-height: 1.2;
      color: var(--ct-tinta); white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; max-width: 42%;
    }
    .ct-coment .ct-coment-vazio {
      display: inline-block; flex: none; font-size: 12px; line-height: 1.2;
      color: var(--ct-tinta-3, var(--ct-tinta-3)); font-style: italic; white-space: nowrap;
    }
    .ct-coment .ct-coment-por {
      font-size: 11.5px; line-height: 1.2; color: var(--ct-tinta-3, var(--ct-tinta-3));
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ct-coment .ct-coment-ver { flex: none; white-space: nowrap; }
    /* O campo ENCOLHE (min-width:0) em vez de empurrar os vizinhos para fora.
       Num flex, `1fr`/`flex:1` sozinho nao encolhe abaixo do conteudo - e o
       botao "Gravar" sairia da faixa nos cards de nome comprido. */
    .ct-coment .ct-coment-input {
      flex: 1 1 auto; min-width: 0; box-sizing: border-box;
      height: 22px !important; padding: 1px 8px !important; margin: 0 !important;
      font-size: 12px !important; line-height: 1.2 !important;
      border: 1px solid var(--ct-linha, var(--ct-linha)) !important;
      border-radius: 6px !important;
      background: var(--ct-superficie); color: var(--ct-tinta);
    }
    .ct-coment .ct-coment-input:focus { outline: 2px solid var(--ct-anel); outline-offset: 1px; }
    /* ALTURA PROPRIA, como o calendario da faixa de cima. O `.ct-mini` solto da
       5px de padding e 13px de fonte: ~28px numa faixa de 30, que passa
       raspando e estoura assim que alguem mexer no espacamento do botao.
       Dois nomes de classe ja vencem o `.ct-mini` de um nome so — nao precisa
       de `!important` aqui, ao contrario do calendario, que disputa com a
       regra de CAMPO deste arquivo (mais especifica que uma classe). */
    .ct-coment .ct-coment-gravar {
      flex: none;
      height: 22px; padding: 1px 10px; font-size: 12px; line-height: 1.2;
    }
    .ct-coment .ct-coment-msg {
      flex: none; font-size: 11.5px; line-height: 1.2; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; max-width: 30%;
    }
    .ct-coment .ct-coment-msg--ok   { color: var(--ct-ok, var(--ct-ok)); }
    .ct-coment .ct-coment-msg--err  { color: var(--ct-alerta, var(--ct-alerta)); }
    .ct-coment .ct-coment-msg--info { color: var(--ct-tinta-3, var(--ct-tinta-3)); }

    /* A CONVERSA, dentro do corpo do card: aqui nao ha altura fixa nenhuma, e
       o texto pode ocupar o que precisar. */
    .ct-coment-lista { display: flex; flex-direction: column; gap: 10px; }
    .ct-coment-item {
      border-left: 3px solid var(--ct-linha, var(--ct-linha));
      padding: 2px 0 2px 10px;
    }
    .ct-coment-meta { font-size: 11.5px; line-height: 1.3; color: var(--ct-tinta-3, var(--ct-tinta-3)); }
    .ct-coment-meta strong { font-family: var(--ct-mono); font-weight: 600; color: var(--ct-tinta-2); }
    .ct-coment-origem {
      display: inline-block; margin-left: 6px; padding: 0 6px;
      border-radius: 999px; font-size: 10.5px;
      background: var(--ct-rebaixo); color: var(--ct-tinta-3);
    }
    .ct-coment-texto {
      font-size: 13px; line-height: 1.45; color: var(--ct-tinta);
      white-space: pre-wrap; word-break: break-word;
    }
    .ct-coment-nenhum, .ct-coment-carregando {
      font-size: 12.5px; color: var(--ct-tinta-3, var(--ct-tinta-3)); font-style: italic;
    }
    /* Telas estreitas: a altura fixa do card ja cai (ver o media query dos
       cards), entao a faixa pode quebrar em duas linhas em vez de cortar. */
    @media (max-width: 760px) {
      .ct-coment { height: auto; flex-wrap: wrap; padding: 7px 14px; gap: 7px; }
      .ct-coment .ct-coment-input { flex: 1 1 100%; }
    }

    /* Selo de urgencia da fila: um numero que tambem e o caminho ate ele. */
    .ct-selo-prazo {
      display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
      border: 1px solid var(--ct-dourado, var(--ct-dourado-linha)); background: var(--ct-dourado-suave, var(--ct-atencao-suave));
      color: var(--ct-dourado); border-radius: 999px; padding: 3px 11px;
      font-family: var(--ct-fonte); font-size: 12.5px; line-height: 1.3; cursor: pointer;
      transition: background-color .12s;
    }
    .ct-selo-prazo:hover { background: var(--ct-dourado, var(--ct-dourado-fill)); color: var(--ct-dourado-sobre); }
    .ct-selo-prazo--ativo { cursor: default; opacity: .8; }
    .ct-selo-prazo--ativo:hover { background: var(--ct-dourado-suave, var(--ct-atencao-suave)); color: var(--ct-dourado); }
    /* `.ct-mini--drive` saiu com o atalho "🔍 Drive: placa" (10/08/2026). */
    /* No Arquivados a barra so tem o botao de excluir, entao ela nao precisa do
       recuo de cima que separa as acoes de edicao do cabecalho do card. O nome
       da classe guarda a origem: ali morava o link do Drive. */
    .ct-cardtop--drive { padding-top: 10px; }

    /* `.ct-vincular` saiu com o "Vincular pasta" (10/08/2026). */
    .ct-mini-input {
      border: 1px solid var(--ct-linha); background: var(--ct-superficie); color: var(--ct-tinta);
      border-radius: var(--ct-r-sm); padding: 5px 10px;
      font-family: var(--ct-mono); font-size: 12.5px; line-height: 1.2;
      width: 300px; max-width: 42vw;
    }
    .ct-mini-input:focus {
      outline: 0; border-color: var(--ct-anel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-anel) 22%, transparent);
    }
    .ct-mini-input:disabled { opacity: .55; }
    .ct-mini-mover { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
    .ct-mini-sel {
      border: 1px solid var(--ct-linha); border-radius: var(--ct-r-sm); padding: 5px 8px;
      font-family: var(--ct-fonte); font-size: 13px; color: var(--ct-tinta); background: var(--ct-superficie);
      max-width: 190px;
    }
    @media (max-width: 520px) { .ct-mini-mover { margin-left: 0; width: 100%; } .ct-mini-sel { flex: 1; } }

    /* ADIAR EM UM CLIQUE (12/08/2026). O grupo fica ANTES do `.ct-mini-mover`
       na marcacao, e isso e layout e nao gosto: aquele tem `margin-left: auto`
       e empurra para a direita tudo o que vier depois dele. Posto depois, o
       adiar viajaria junto e o "Mover para…" deixaria de ser o ultimo gesto. */
    .ct-mini-adiar { display: inline-flex; align-items: center; gap: 4px; }
    .ct-mini-adiar .ct-label { margin-right: 2px; }
    /* O GRUPO NASCE FECHADO (13/08/2026). Aberto, ele custava 340px numa barra
       que ja tinha 654 — e depois que "Conferi" e "Revisei" entraram, quatro
       das seis filas de trabalho precisavam de ~1240px para a barra caber em
       uma linha. Fechado, ela volta a caber em ~940px, e nenhuma capacidade se
       perde: adiar e acao secundaria, e pagar um clique por ela e mais barato
       do que pagar uma linha em TODO card editavel.
       O `[hidden]` precisa vir depois, e com o atributo no seletor: sem isso o
       `display` da caixa venceria a regra do navegador e ela nasceria aberta. */
    .ct-mini-adiar-caixa { display: inline-flex; align-items: center; gap: 4px; }
    .ct-mini-adiar-caixa[hidden] { display: none; }
    /* O `.ct-mini-input` nasce com 300px, largura de campo de texto. Uma data
       cabe num terco disso, e ocupar o resto empurraria o "Mover para…" para a
       linha de baixo em toda tela media. */
    /* 130px é o PISO de um `<input type="date">` no Chrome: abaixo disso o
       `dd/mm/aaaa` e o ícone do calendário começam a se cortar. Medido na
       bancada, e não escolhido de cabeça — o grupo inteiro custa 340px numa
       barra que já tinha 654, e cada pixel aqui decide em que largura a barra
       passa de uma linha para duas (hoje: 1050px). */
    .ct-mini-input--dia { width: 130px; min-width: 130px; font-size: 12px; padding: 4px 6px; }
    @media (max-width: 520px) { .ct-mini-adiar { width: 100%; } .ct-mini-input--dia { flex: 1; max-width: none; } }

    /* Banner de conflito: mesmo auto em cliente diferente. */
    .ct-conflito {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      margin: 8px 18px 2px; padding: 8px 12px; background: var(--e-alerta-s);
      border: 1px solid var(--e-alerta-b); border-radius: 9px;
    }
    .ct-conflito__txt { flex: 1; min-width: 200px; font-size: 12.5px; color: var(--e-alerta-f); line-height: 1.4; font-weight: 500; }
    .ct-mini--resolv { border-color: var(--e-alerta-f); color: var(--e-alerta-f); background: var(--ct-superficie); }
    .ct-mini--resolv:hover { background: var(--e-alerta-f); color: var(--e-sobre-claro); border-color: var(--e-alerta-f); }

    /* Conversa da Digisac ligada ao card, e o atalho para atender. */
    .ct-mini--wa { border-color: var(--e-ok); color: var(--e-ok-f); text-decoration: none; font-weight: 500; }
    .ct-mini--wa:hover { background: var(--e-ok); color: var(--e-sobre-claro); border-color: var(--e-ok); text-decoration: none; }
    .ct-conversa {
      margin: 4px 18px 0; font-size: 12.5px; color: var(--e-ok-f); background: var(--e-ok-s);
      border: 1px solid var(--e-ok-b); border-radius: 8px; padding: 5px 10px;
      display: inline-block; max-width: calc(100% - 36px);
    }

    /* As remessas em gravacao do cadastro (25/08/2026, ideia 10). */
    .ct-remessas:empty { display: none; }
    .ct-remessas { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
    .ct-remessa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 9px; font-size: 13px; line-height: 1.4;
      background: var(--ct-rebaixo); border: 1px solid var(--ct-linha); color: var(--ct-tinta); }
    .ct-remessa--ok { background: var(--e-ok-s); border-color: var(--e-ok-b); color: var(--e-ok-f); }
    .ct-remessa--err { background: var(--e-alerta-s); border-color: var(--e-alerta-b); color: var(--e-alerta-f); }
    .ct-remessa__txt { flex: 1; min-width: 200px; }
    .ct-remessa .ct-mini { flex: none; }
    /* O status sugerido pelo orcamento, ao lado do auto (25/08/2026). */
    .ct-autos-tab .ct-auto-fase { display: block; margin-top: 2px; font-size: 11px; color: var(--ct-tinta-3); font-family: var(--ct-mono); }
    /* O auto repetido acende a propria celula (25/08/2026, ideia 8). */
    .ct-autos-tab .auto-input.ct-auto-repetido { border-color: var(--e-alerta-f) !important; box-shadow: 0 0 0 3px var(--e-alerta-s); }

    /* O proximo passo em palavras (25/08/2026): uma linha, cortada com
       reticencias, nunca quebra — a altura e fixa e entra em --ct-card-h. O tom
       segue as cores de estado que a pastilha ja usa. */
    .ct-proximo {
      display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow: hidden;
      height: var(--ct-proximo-h, 28px); box-sizing: border-box; padding: 0 21px;
      background: var(--ct-superficie); border-bottom: 1px solid var(--ct-linha);
      font-size: 12.5px; line-height: 1.2; color: var(--ct-tinta-2);
    }
    .ct-proximo-lbl { flex: none; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ct-tinta-3); font-weight: 600; }
    .ct-proximo-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ct-tinta); }
    .ct-proximo--vermelho .ct-proximo-txt { color: var(--e-alerta-f); font-weight: 600; }
    .ct-proximo--dourado .ct-proximo-txt { color: var(--ct-dourado); font-weight: 600; }
    .ct-proximo--azul .ct-proximo-txt { color: var(--ct-tinta); }
    .ct-proximo-copiar { flex: none; font-size: 12px; }
    .irm-alerta { margin-left: 8px; font-size: 11.5px; }
    .irm-diverge { margin: 6px 18px 0; font-size: 12.5px; color: var(--e-alerta-f); line-height: 1.4; }
    .irm-igualar { font-size: 12px; margin-left: 4px; }
    /* Os avisos do quadro que citam o card (25/08/2026). */
    .ct-avisos-do-card { margin: 8px 18px 0; padding: 6px 10px; font-size: 12.5px; border-radius: 8px;
      background: var(--ct-dourado-suave); border: 1px solid var(--ct-dourado-linha); color: var(--ct-tinta); }
    /* A remessa do card e a assinatura do historico (25/08/2026). */
    .irm-linha--eu { background: var(--ct-superficie); }
    .ct-quem-cadastrou { display: block; margin-top: 4px; }
    .ct-quem-cadastrou--difere { color: var(--e-alerta-f); font-weight: 600; }
    /* A linha do tempo do card (25/08/2026). */
    .tempo-lista { display: flex; flex-direction: column; gap: 8px; }
    .tempo-ev { border-left: 3px solid var(--ct-linha); padding: 2px 0 2px 10px; }
    .tempo-ev--comentario { border-left-color: var(--ct-dourado-linha); }
    .tempo-meta { font-size: 11.5px; color: var(--ct-tinta-3); font-family: var(--ct-mono); }
    .tempo-txt { font-size: 13px; color: var(--ct-tinta); line-height: 1.4; }
    .tempo-antes { color: var(--ct-tinta-3); text-decoration: line-through; }

    /* "+ multa para este cliente" no card (25/08/2026, ideia 4). */
    .ct-mini--nova { border-color: var(--ct-tinta-3); }

    /* Outros processos da mesma placa, abriveis dentro do card. */
    .ct-irmaos { margin: 8px 18px 0; border: 1px solid var(--ct-linha); border-radius: 10px; overflow: hidden; background: var(--ct-rebaixo); }
    .ct-irmaos[hidden] { display: none; }
    .irm-linha { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--ct-linha); font-size: 13px; }
    .irm-linha:first-child { border-top: 0; }
    .irm-linha__info { flex: 1; min-width: 0; }
    .irm-linha__nome { font-weight: 600; color: var(--ct-tinta); }
    .irm-linha__proc { font-family: var(--ct-mono); font-size: 12px; color: var(--ct-tinta-2); }
    .irm-linha__aba { font-size: 11.5px; color: var(--ct-tinta-3); text-transform: uppercase; letter-spacing: .05em; }

    /* Selo de contagem da fila, ao lado da mensagem do filtro. */
    .ct-selo-contagem {
      display: inline-flex; align-items: center; gap: 8px; margin-left: 8px;
      padding: 3px 10px; border-radius: 999px; background: var(--ct-rebaixo);
      border: 1px solid var(--ct-linha); font-size: 12.5px; color: var(--ct-tinta-2);
    }
    .ct-selo-contagem b { color: var(--ct-tinta); font-weight: 600; }
    .ct-quebra-luz { display: inline-flex; align-items: center; gap: 4px; }
    .ct-quebra-luz i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; font-style: normal; }

    /* "ver" ao lado do dado mascarado. Discreto de proposito: e uma saida, nao
       um convite. */
    .ct-revelar {
      font: inherit;
      font-size: 10.5px;
      font-family: var(--ct-mono);
      text-transform: uppercase;
      letter-spacing: .08em;
      background: none;
      border: 0;
      padding: 0 0 0 7px;
      color: var(--ct-tinta-3);
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .ct-revelar:hover { color: var(--ct-tinta); }

    /* ----------------------------------------------------------------------
       CORPO DO CARD (tudo que abre no clique)

       Aqui os NOMES DAS CLASSES ficam como estao e so o estilo muda. E onde
       vivem os formularios de edicao, o Drive e o DETRAN: reescrever marcacao
       no meio de campo com id usado por JavaScript e onde o estrago sairia
       caro. Puro estilo, nenhuma linha de logica.
       ---------------------------------------------------------------------- */
    .ct-card.result-card > .card-main-body {
      padding: 16px var(--ct-pad-card) 18px 21px;
      border-top: 1px solid var(--ct-linha-suave);
      font-size: var(--ct-fs-corpo);
    }

    /* Secao e lista de detalhes */
    .ct-card .card-section {
      background: transparent;
      border: 0;
      border-top: 1px solid var(--ct-linha-suave);
      border-radius: 0;
      padding: 14px 0 4px;
      margin: 0;
      box-shadow: none;
    }
    .ct-card .card-section:first-child { border-top: 0; padding-top: 0; }
    .ct-card .card-section h3 {
      font-family: var(--ct-mono);
      font-size: var(--ct-fs-rotulo);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ct-tinta-3);
      font-weight: 400;
      margin: 0 0 10px;
    }
    .ct-card .detail-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 12px 20px;
    }
    .ct-card .detail-item { display: block; padding: 0; border: 0; background: none; }
    .ct-card .detail-item > span {
      display: block;
      font-family: var(--ct-mono);
      font-size: var(--ct-fs-rotulo);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ct-tinta-3);
      margin-bottom: 3px;
    }
    .ct-card .detail-item > strong {
      font-weight: 400;
      font-size: var(--ct-fs-corpo);
      color: var(--ct-tinta);
    }

    /* Blocos que abrem: divisoria fina, nao caixa dentro de caixa */
    .ct-card .card-collapse {
      background: transparent;
      border: 0;
      border-top: 1px solid var(--ct-linha-suave);
      border-radius: 0;
      margin: 0;
    }
    .ct-card .card-collapse summary {
      padding: 12px 0;
      font-weight: 500;
      font-size: var(--ct-fs-corpo);
      color: var(--ct-tinta-2);
      background: none;
    }
    .ct-card .card-collapse[open] summary { color: var(--ct-tinta); background: none; }
    .ct-card .card-collapse-body { padding: 0 0 14px; background: none; }
    .ct-card .collapse-count {
      font-family: var(--ct-mono);
      font-size: var(--ct-fs-rotulo);
      letter-spacing: .08em;
      color: var(--ct-tinta-3);
    }

    /* Campos de edicao */
    .ct-card .card-edit-panel { background: transparent; border: 0; padding: 0; }
    .ct-card input,
    .ct-card select,
    .ct-card textarea {
      font-family: var(--ct-fonte);
      font-size: var(--ct-fs-corpo);
      color: var(--ct-tinta);
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-sm);
      padding: 9px 11px;
    }
    .ct-card input:focus,
    .ct-card select:focus,
    .ct-card textarea:focus {
      border-color: var(--ct-anel);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-anel) 22%, transparent);
      outline: 0;
    }
    .ct-card label {
      font-family: var(--ct-mono);
      font-size: var(--ct-fs-rotulo);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ct-tinta-3);
      font-weight: 400;
    }

    /* Botoes dentro do card. Uma acao principal por bloco em lime; o resto
       neutro. Nenhum deles em negrito. */
    .ct-card .btn {
      font-family: var(--ct-fonte);
      font-size: 14.5px;
      font-weight: 400;
      border-radius: var(--ct-r-sm);
      padding: 8px 14px;
      border: 1px solid var(--ct-linha);
      background: transparent;
      color: var(--ct-tinta-2);
      box-shadow: none;
      transition: background .12s ease, border-color .12s ease, color .12s ease;
    }
    .ct-card .btn:hover { background: var(--ct-rebaixo); color: var(--ct-tinta); border-color: var(--ct-linha); }
    .ct-card .btn-small { padding: 6px 12px; font-size: 13.5px; }

    /* A pintura do principal DENTRO DO CARD saiu daqui em 11/08/2026: ela é
       uma das quatro cópias que agora vivem numa regra só, no fim do bloco de
       botões ("O PRINCIPAL PRETO, NOS QUATRO LUGARES"). O que ficou aqui é o
       peso, que é geometria e não cor. */
    .ct-card .btn-primary { font-weight: 500; }

    .ct-card .btn-soft { background: transparent; border-color: var(--ct-linha); color: var(--ct-tinta-2); }
    .ct-card .btn-danger { background: transparent; border-color: var(--ct-alerta); color: var(--ct-alerta); }
    .ct-card .btn-danger:hover { background: var(--ct-alerta-suave); border-color: var(--ct-alerta); color: var(--ct-alerta); }
    /* O verde do WhatsApp e marca de terceiro e briga com o lime. Neutralizado
       aqui: quem diz que a acao e de WhatsApp e o texto do botao. */
    .ct-card .btn-whatsapp { background: transparent; border-color: var(--ct-linha); color: var(--ct-tinta-2); }
    .ct-card .btn-whatsapp:hover { background: var(--ct-rebaixo); color: var(--ct-tinta); }

    .ct-card .actions { gap: 8px; margin-top: 14px; }

    /* ----------------------------------------------------------------------
       Envio por template.

       Fica FORA de `.actions` de proposito. "Ver historico" e "Abrir DETRAN"
       agem aqui dentro e nao custam nada; um template sai para o telefone de
       um cliente e nao volta. Misturar os dois no mesmo alinhamento apaga essa
       diferenca - entao o envio ganha faixa propria, com titulo, separada por
       uma linha.
       ---------------------------------------------------------------------- */
    .ct-templates { margin-top: 14px; border-top: 1px solid var(--ct-linha-suave); padding-top: 12px; }
    .ct-templates-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .ct-templates-titulo {
      font-size: var(--ct-fs-meta);
      color: var(--ct-tinta-3);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-right: 2px;
    }
    /* Nome do template e identificador, nao frase: monoespacado para bater com
       o que esta cadastrado na Digisac, e para nao ser lido como texto do app. */
    .ct-templates .ct-template-btn {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: calc(var(--ct-fs-meta) + 1px);
    }
    .ct-templates > .row-meta { margin-top: 8px; }

    .ct-template-form {
      margin-top: 12px;
      padding: 12px;
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-sm);
      background: var(--ct-rebaixo);
    }
    .ct-template-form-titulo { font-size: var(--ct-fs-meta); color: var(--ct-tinta-2); margin-bottom: 10px; }
    .ct-template-campo { display: block; margin-bottom: 10px; }
    .ct-template-campo > span { display: block; font-size: var(--ct-fs-meta); color: var(--ct-tinta-3); margin-bottom: 4px; }
    .ct-template-campo textarea {
      width: 100%;
      font: inherit;
      font-size: var(--ct-fs-corpo);
      padding: 8px;
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-sm);
      background: var(--ct-superficie);
      color: var(--ct-tinta);
      resize: vertical;
    }
    /* A previa e o texto do CLIENTE, nao um campo nosso: fundo de conversa,
       para a equipe ler como quem recebe. `pre-wrap` porque o \n do template
       e parte da mensagem. */
    .ct-template-previa {
      white-space: pre-wrap;
      font-size: var(--ct-fs-corpo);
      line-height: 1.45;
      padding: 10px 12px;
      border-radius: var(--ct-r-sm);
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha-suave);
      color: var(--ct-tinta);
      margin-bottom: 10px;
    }
    .ct-template-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

    /* Avisos dentro do card */
    .ct-card .msg { font-size: var(--ct-fs-corpo); border-radius: var(--ct-r-sm); }
    .ct-card .drivebox,
    .ct-card .daily {
      background: transparent;
      border: 0;
      border-top: 1px solid var(--ct-linha-suave);
      border-radius: 0;
      padding: 14px 0 4px;
    }

    /* ----------------------------------------------------------------------
       Os oito blocos do corpo que ainda tinham caixa e cor proprias.

       Cada um vinha com sua borda arredondada, seu fundo pastel e seu peso de
       fonte — azul no atendimento, vermelho no orcamento, amarelo no ocupado.
       Empilhados, viravam caixa dentro de caixa dentro de caixa, e nenhuma das
       cores queria dizer nada em especial.

       Agora todos usam a mesma gramatica do resto: divisoria fina em vez de
       moldura, e cor so onde ela informa alguma coisa.
       ---------------------------------------------------------------------- */

    /* 1. Atendimento — a faixa mais visivel do corpo.
          Livre = azul claro (a acao esta disponivel);
          seu   = a mesma faixa com o azul cheio na borda esquerda;
          de outra pessoa = ambar (nao e um erro, mas nao e seu).
       O par era lime claro / lime cheio ate 11/08/2026. */
    .ct-card .attendance-box {
      margin-top: 0;
      padding: 14px 16px;
      border-radius: var(--ct-r-sm);
      border: 1px solid var(--ct-info-linha);
      background: var(--ct-info-suave);
      color: var(--ct-tinta);
      font-weight: 400;
      font-size: var(--ct-fs-corpo);
    }
    /* "É seu" precisa se distinguir de "está livre" sem sair do azul: os dois
       sao estados bons, mas um convida e o outro confirma. A faixa cheia a
       esquerda marca posse — o mesmo gesto da .ct-trilho no card. */
    .ct-card .attendance-box.mine {
      border-color: var(--ct-info-linha);
      border-left: 4px solid var(--ct-info);
      background: var(--ct-info-suave);
      color: var(--ct-tinta);
      font-weight: 500;
    }
    .ct-card .attendance-box.busy {
      border-color: var(--ct-atencao-linha);
      background: var(--ct-dourado-suave);
      color: var(--ct-dourado);
    }
    .ct-card .attendance-actions { margin-top: 12px; }

    /* 2 a 5. Documentos guardados, historico e orcamento: divisoria, nao caixa.
       Painel de Conferencia (.pconf-root) tem visual proprio, nao entra aqui.
       Os dois seletores de busca de pasta (`drive-search-box` e
       `drive-card-search-box`) sairam em 10/08/2026, com o Drive. */
    .ct-card .drive-card-box,
    .ct-card .card-history-summary,
    .ct-card .orcamento-card-box {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      margin: 0;
    }
    .ct-card .orcamento-head {
      font-weight: 500;
      font-size: var(--ct-fs-corpo);
      color: var(--ct-tinta);
      margin-bottom: 8px;
    }
    .ct-card .orcamento-text {
      font-family: var(--ct-mono);
      font-size: 13px;
      line-height: 1.6;
      background: var(--ct-rebaixo);
      border: 1px solid var(--ct-linha-suave);
      border-radius: var(--ct-r-sm);
      padding: 12px;
      color: var(--ct-tinta-2);
    }
    .ct-card .mini-history-list { font-size: var(--ct-fs-corpo); color: var(--ct-tinta-2); }

    /* 6. Grade de edicao — onde a equipe digita. */
    .ct-card .edit-grid { gap: 14px; margin-top: 14px; }
    .ct-card .edit-collapse {
      background: transparent;
      border: 0;
      border-top: 1px solid var(--ct-linha-suave);
      border-radius: 0;
    }
    .ct-card .edit-title {
      font-weight: 500;
      font-size: var(--ct-fs-corpo);
      color: var(--ct-tinta);
    }

    /* 7. Indicador de salvamento: linha discreta, nao alarme. */
    .ct-card .card-save-indicator {
      border: 0;
      border-top: 1px solid var(--ct-linha-suave);
      border-radius: 0;
      padding: 12px 0;
      background: transparent;
      font-size: var(--ct-fs-meta);
      color: var(--ct-tinta-3);
    }
    .ct-card .card-save-indicator.save-ready { color: var(--ct-info); }

    /* 8. O que sobrou do vocabulario antigo por dentro do card.
          O `.chip` e o mesmo que tiramos do card fechado — sem isto ele
          reapareceria por dentro, e a poluicao voltava pela porta dos fundos. */
    .ct-card .chip {
      background: var(--ct-rebaixo);
      border: 1px solid var(--ct-linha-suave);
      color: var(--ct-tinta-2);
      font-weight: 400;
      font-size: var(--ct-fs-meta);
      border-radius: var(--ct-r-pill);
      padding: 3px 10px;
    }
    .ct-card .chips { gap: 6px; }
    .ct-card .row-meta { font-size: var(--ct-fs-meta); color: var(--ct-tinta-3); }
    .ct-card .card-detail-grid { gap: 14px; }
    .ct-card .pro-section-title { margin-bottom: 12px; }

    /* A quebra do cabecalho em telas estreitas subiu para o ct-tokens.css:
       e propriedade do proprio .ct-card__head, e o Site 2 (cnh.html) usa o
       mesmo card - la a etiqueta de estado estava sendo cortada por falta
       desta regra. Mesmo ponto de quebra (720px), mesmo efeito. */

    /* ======================================================================
       DIRECAO B — barra preta, menu horizontal e toolbar

       Substitui o cabecalho de papel da leva anterior. O preto devolve a
       hierarquia que faltava: a barra e o sistema, o resto e conteudo.

       O AMARELO volta AQUI, e so aqui. Ele e a marca (a placa de transito da
       logo), e na barra preta nao encosta no lime dos botoes - que estao no
       conteudo, sobre fundo claro. E a separacao que o CLAUDE.md pede: as
       duas cores existem, mas nunca no mesmo bloco.

       Nenhum id muda. Os filtros que a toolbar mostra sao os mesmos que ja
       existiam (painelTermo, painelStatus, painelResponsavel, painelLimite) -
       so mudaram de lugar e de aparencia.
       ====================================================================== */
    /* (o terceiro :root morreu na etapa 7.2 — os cinco nomes dele existem no
       ds/tokens.css com os MESMOS valores, so que como --ct-inverso* e
       --ct-amarelo*. Ele era uma copia da paleta do sistema esperando
       divergir no primeiro ajuste) */

    /* A barra ocupa a largura toda; o .wrap so limita o conteudo. */
    body > .wrap { padding-top: 0; }

    header.pro-header {
      background: var(--ct-inverso);
      color: var(--e-sobre-claro);
      border: 0;
      border-radius: 0;
      box-shadow: none;
      padding: 0 20px;
      height: 72px;
      display: flex;
      align-items: center;
      gap: 26px;
      /* A barra e o menu ficam FORA do .wrap no HTML, entao encostam nas
         bordas naturalmente - sem margem negativa e sem 100vw.
         Tentei com 100vw primeiro: aquela unidade inclui a largura da barra de
         rolagem, e a barra saia 15px mais larga que a area util, criando
         rolagem horizontal na pagina inteira. Mover no HTML resolve de vez. */
      position: sticky;
      top: 0;
      z-index: 30;
    }
    .pro-header .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-right: 22px;
      border-right: 1px solid var(--ct-inverso-3);
      height: 100%;
      flex: none;
    }
    .pro-header .brand-logo {
      width: 52px !important;
      height: 52px !important;
      border-radius: 0 !important;
      border: 0 !important;
      background: transparent;
      box-shadow: none;
      padding: 0;
      filter: none;
    }
    .pro-header .brand h1 {
      color: var(--e-sobre-claro);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -.01em;
      line-height: 1.1;
      margin: 0;
    }
    /* A badge de versao vira a linha "OPERACAO" da referencia: amarela,
       pequena, em caixa alta. Informa em que sistema voce esta. */
    .pro-header .version-badge {
      display: block;
      background: transparent;
      border: 0;
      padding: 0;
      margin-top: 2px;
      color: var(--ct-amarelo);
      font-family: var(--ct-fonte);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .pro-header .subtitle { display: none; }
    .pro-header > div:last-child { margin-left: auto; flex: none; }
    .pro-header .pill {
      background: transparent;
      border: 1px solid var(--ct-inverso-3);
      color: var(--ct-tinta-inv-2);
      font-size: 13px;
      font-weight: 400;
      border-radius: 7px;
      padding: 6px 12px;
    }
    .pro-header .pill:hover { background: var(--ct-inverso-2); color: var(--e-sobre-claro); }

    /* Menu: dentro da barra preta, como na referencia. */
    .nav {
      background: var(--ct-inverso);
      margin: 0 0 18px;
      padding: 0 20px 12px;
      border-bottom: 1px solid var(--ct-inverso-3);
      display: flex;
      align-items: center;
      gap: 3px;
      overflow-x: auto;
      position: sticky;
      top: 72px;
      z-index: 29;
    }
    .nav button {
      background: transparent;
      color: var(--ct-tinta-inv-3);
      border: 0;
      border-radius: 8px;
      padding: 8px 13px;
      font-family: var(--ct-fonte);
      font-size: 13.5px;
      font-weight: 400;
      white-space: nowrap;
      box-shadow: none;
      transition: background .12s ease, color .12s ease;
    }
    .nav button:hover { background: var(--ct-inverso-2); color: var(--e-sobre-claro); border: 0; }
    /* A aba ativa em AMARELO: e a marca, e aqui ela nao divide bloco com o
       lime. */
    .nav button.active {
      background: var(--ct-amarelo);
      color: var(--ct-amarelo-sobre);
      font-weight: 600;
      border: 0;
      box-shadow: none;
    }

    /* Toolbar: os filtros que ja existiam, em linha. */
    .filters.filters-top {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-sm);
      padding: 12px 14px;
      margin-bottom: 14px;
    }
    /* Cada filtro e uma peca so: o rotulo vira prefixo DENTRO da moldura, e o
       campo perde a borda propria.
       Antes o rotulo era escondido (`display:none`) para a barra nao dobrar de
       altura - mas ai a fila mostrava "Todos", "Todos", "Selecione" lado a lado,
       tres caixas sem dizer de que sao. Como prefixo, cada uma se apresenta e a
       barra continua com uma linha so. */
    .filters.filters-top > div:not(.filter-actions):not(.filter-msg) {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      height: 36px;
      padding: 0 11px;
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-sm);
      transition: border-color .12s, box-shadow .12s;
    }
    .filters.filters-top > div:focus-within {
      border-color: var(--ct-anel);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-anel) 22%, transparent);
    }
    .filters.filters-top label {
      display: block;
      margin: 0;
      white-space: nowrap;
      font-family: var(--ct-mono);
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ct-tinta-3);
      pointer-events: none;
    }
    .filters.filters-top input,
    .filters.filters-top select {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      height: 100%;
      font-size: 13.5px;
      color: var(--ct-tinta-2);
      min-width: 0;
    }
    /* Um <select> se dimensiona pela opcao MAIS LONGA da lista, e a de status
       tem "Aguardando julgamento em 2a instancia". Sem teto, quatro filtros
       ocupavam 1.240px so de espaco reservado para texto que quase nunca
       aparece. Com teto, o valor escolhido corta com reticencias e a lista
       aberta continua mostrando a opcao inteira. */
    .filters.filters-top select {
      max-width: 150px;
      text-overflow: ellipsis;
    }
    /* A busca e o campo elastico da barra: cresce com o espaco que sobra e
       encolhe primeiro quando falta, para os seis filtros caberem numa linha so
       em tela normal em vez de quebrar em duas. */
    /* Cresce com a sobra, mas ate um limite: no Arquivados, que so tem busca e
       limite, sem teto ela esticava para 940px - um campo de uma linha nao fica
       melhor por ser tres vezes maior que o necessario. */
    .filters.filters-top .campo-busca { flex: 1 1 230px; min-width: 150px; max-width: 520px; }
    .filters.filters-top input {
      font-family: var(--ct-mono);
      font-size: 13px;
      width: 100%;
      min-width: 0;
      text-overflow: ellipsis;
    }
    .filters.filters-top input:focus,
    .filters.filters-top select:focus { outline: 0; }
    /* O rotulo do campo de busca e a lupa, e nao a palavra "Pesquisar": e o
       unico filtro que se explica por um simbolo. */
    .filters.filters-top .campo-busca label {
      width: 15px; height: 15px; flex: none;
      overflow: hidden; text-indent: -999px;
      background: var(--ct-tinta-3);
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='8.5' cy='8.5' r='5.5'/><path d='M12.6 12.6 17 17'/></svg>") center / contain no-repeat;
      mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='8.5' cy='8.5' r='5.5'/><path d='M12.6 12.6 17 17'/></svg>") center / contain no-repeat;
    }
    .filters.filters-top .campo-busca:focus-within label { background: var(--ct-tinta-2); }

    .filters.filters-top .filter-actions { margin-left: auto; }

    /* Botao de pesquisa: so a lupa. O rotulo em texto ("Pesquisar Conferencia",
       "Pesquisar Registrados"...) repetia o nome da fila que ja esta no seletor
       logo acima, e era o elemento mais gritante da barra. */
    .btn.btn-lupa {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; padding: 0;
    }
    .btn.btn-lupa .ico-lupa {
      width: 17px; height: 17px;
      fill: none; stroke: currentColor; stroke-width: 1.9;
      stroke-linecap: round;
    }

    /* A mensagem da fila ocupa a linha inteira, abaixo dos filtros, e sem
       moldura: e recado de rotina ("carregando", "12 resultados"), nao alerta.
       Erro continua com a cara de erro. */
    .filters.filters-top .filter-msg {
      flex-basis: 100%;
      margin: 2px 0 0;
      padding: 0;
      border: 0;
      background: none;
      border-radius: 0;
      font-size: var(--ct-fs-meta);
      color: var(--ct-tinta-3);
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 18px;
    }
    .filters.filters-top .filter-msg.err {
      background: none;
      border: 0;
      color: var(--e-alerta-f);
    }
    /* Girinho enquanto espera. Aparece pelo data-carregando que o setMsg marca -
       "carregando" nao e um tipo de mensagem, e um momento dela. */
    .filters.filters-top .filter-msg[data-carregando="1"]::before {
      content: '';
      width: 12px; height: 12px; flex: none;
      border: 2px solid var(--ct-linha);
      border-top-color: var(--ct-tinta-3);
      border-radius: 50%;
      animation: ct-girar .7s linear infinite;
    }
    @keyframes ct-girar { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      .filters.filters-top .filter-msg[data-carregando="1"]::before { animation-duration: 3s; }
    }

    /* ======================================================================
       CENTRAL DE PROCESSOS — a casca das 6 filas

       Os cards de processo ja estao no vocabulario novo (buildResultCard).
       O que faltava era o que os ENVOLVE: o cartao de cada fila, o cabecalho,
       a toolbar de filtros e os avisos.

       AGORA POR CLASSE (.ct-fila), e nao por lista de ids. A lista tinha quatro
       (painel, conferencia, continuidade, arquivados) e o sistema tem seis:
       Registrados e Minha fila ficaram de fora de TODAS estas regras e por isso
       tinham outra cara - fundo, borda, cabecalho e campos diferentes dos
       vizinhos. Marcar a secao com a classe e a unica forma de o proximo painel
       nascer igual sem alguem lembrar de editar quinze seletores.

       O id tambem custava caro em especificidade: `#painelTab input` (1,1,0)
       vencia qualquer regra de classe, inclusive a da barra de filtros - era o
       que espremia o botao da lupa a 2,4px de largura, porque o `padding: 9px
       16px` do botao de id sobrava dentro dos 36px.
       ====================================================================== */
    .ct-fila .card {
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-md);
      box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    }
    .ct-fila .card-head {
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--ct-linha);
      background: linear-gradient(180deg, var(--ct-superficie), var(--ct-rebaixo));
    }
    .ct-fila .card-head h2 {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -.015em;
      margin: 0;
    }
    .ct-fila .card-head p {
      font-size: 13px;
      color: var(--ct-tinta-3);
      margin: 4px 0 0;
    }
    .ct-fila .card-body { padding: 20px; }

    /* Rotulos dos filtros em mono/caixa alta */
    .ct-fila label {
      font-family: var(--ct-mono);
      font-size: var(--ct-fs-rotulo);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ct-tinta-3);
      font-weight: 400;
      margin: 0 0 6px;
    }
    .ct-fila input,
    .ct-fila select {
      font-family: var(--ct-fonte);
      font-size: var(--ct-fs-corpo);
      color: var(--ct-tinta);
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-sm);
      padding: 10px 12px;
    }
    .ct-fila input:focus,
    .ct-fila select:focus {
      outline: 0;
      border-color: var(--ct-anel);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-anel) 22%, transparent);
    }

    /* Botao "Pesquisar" da toolbar: e a acao que traz a fila. A COR saiu daqui
       em 11/08/2026 (ver "O PRINCIPAL PRETO, NOS QUATRO LUGARES", no fim do
       bloco de botoes); o que fica e a forma. */
    .ct-fila .filters .btn-primary {
      font-weight: 500;
      border-radius: var(--ct-r-sm);
    }
    /* O recheio so vale para botao com texto: o da lupa tem tamanho proprio,
       e 16px de cada lado nao cabem num quadrado de 36. */
    .ct-fila .filters .btn-primary:not(.btn-lupa) { padding: 9px 16px; }
    /* O hover deste tambem saiu daqui: quem pinta e a regra agrupada do fim. */

    /* Avisos de rotina da fila em lime claro; erro segue vermelho.
       A mensagem da BARRA de filtros fica de fora (`:not(.filter-msg)`): la ela
       e uma linha de status ("carregando", "12 resultados"), e uma caixa verde
       do tamanho de um alerta para dizer isso pesa mais que a informacao. */
    .ct-fila .msg.ok:not(.filter-msg),
    .ct-fila .msg.info:not(.filter-msg) {
      background: var(--ct-info-suave);
      border: 1px solid var(--ct-info-linha);
      color: var(--ct-tinta-2);
      font-size: var(--ct-fs-corpo);
      border-radius: var(--ct-r-sm);
    }

    /* Cartoes de resumo (contadores no topo da fila) */
    .ct-fila .cards .metric {
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-sm);
    }

    /* ======================================================================
       OS 9 PAINEIS RESTANTES no vocabulario ct-

       Produtividade, Historico, Nota Fiscal (+ arquivadas), Financeiro,
       Protocolo/atualizacao, Atualizacao cadastral, Relatorios e Usuarios.

       Escopado por id porque .card/.form-grid/label/input sao classes
       GENERICAS. Nenhum destes nove tem card de PROCESSO (.ct-card) dentro -
       so as quatro filas tem, e essas ja foram feitas -, entao o `input`
       generico aqui nao colide com o `.ct-card input`.
       ====================================================================== */
    #produtividadeTab .card, #historicoProTab .card,
    #notaFiscalTab .card, #notaFiscalArquivadosTab .card,
    #financeiroTab .card, #protocoloAtualizacaoTab .card,
    #atualizacaoTab .card, #relatoriosAlertasTab .card,
    #usuariosTab .card {
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-md);
      box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    }
    #produtividadeTab .card-head, #historicoProTab .card-head,
    #notaFiscalTab .card-head, #notaFiscalArquivadosTab .card-head,
    #financeiroTab .card-head, #protocoloAtualizacaoTab .card-head,
    #atualizacaoTab .card-head, #relatoriosAlertasTab .card-head,
    #usuariosTab .card-head {
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--ct-linha);
      background: linear-gradient(180deg, var(--ct-superficie), var(--ct-rebaixo));
    }
    #produtividadeTab .card-head h2, #historicoProTab .card-head h2,
    #notaFiscalTab .card-head h2, #notaFiscalArquivadosTab .card-head h2,
    #financeiroTab .card-head h2, #protocoloAtualizacaoTab .card-head h2,
    #atualizacaoTab .card-head h2, #relatoriosAlertasTab .card-head h2,
    #usuariosTab .card-head h2 {
      font-size: 18px; font-weight: 600; letter-spacing: -.015em; margin: 0;
    }
    #produtividadeTab .card-head p, #historicoProTab .card-head p,
    #notaFiscalTab .card-head p, #notaFiscalArquivadosTab .card-head p,
    #financeiroTab .card-head p, #protocoloAtualizacaoTab .card-head p,
    #atualizacaoTab .card-head p, #relatoriosAlertasTab .card-head p,
    #usuariosTab .card-head p {
      font-size: 13px; color: var(--ct-tinta-3); margin: 4px 0 0;
    }
    #produtividadeTab .card-body, #historicoProTab .card-body,
    #notaFiscalTab .card-body, #notaFiscalArquivadosTab .card-body,
    #financeiroTab .card-body, #protocoloAtualizacaoTab .card-body,
    #atualizacaoTab .card-body, #relatoriosAlertasTab .card-body,
    #usuariosTab .card-body { padding: 20px; }

    #produtividadeTab label, #historicoProTab label,
    #notaFiscalTab label, #notaFiscalArquivadosTab label,
    #financeiroTab label, #protocoloAtualizacaoTab label,
    #atualizacaoTab label, #relatoriosAlertasTab label,
    #usuariosTab label {
      font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo);
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--ct-tinta-3); font-weight: 400; margin: 0 0 6px;
    }
    #produtividadeTab input, #produtividadeTab select, #produtividadeTab textarea,
    #historicoProTab input, #historicoProTab select, #historicoProTab textarea,
    #notaFiscalTab input, #notaFiscalTab select, #notaFiscalTab textarea,
    #notaFiscalArquivadosTab input, #notaFiscalArquivadosTab select,
    #financeiroTab input, #financeiroTab select, #financeiroTab textarea,
    #protocoloAtualizacaoTab input, #protocoloAtualizacaoTab select, #protocoloAtualizacaoTab textarea,
    #atualizacaoTab input, #atualizacaoTab select, #atualizacaoTab textarea,
    #relatoriosAlertasTab input, #relatoriosAlertasTab select,
    #usuariosTab input, #usuariosTab select, #usuariosTab textarea {
      font-family: var(--ct-fonte); font-size: var(--ct-fs-corpo);
      color: var(--ct-tinta); background: var(--ct-superficie);
      border: 1px solid var(--ct-linha); border-radius: var(--ct-r-sm);
      padding: 10px 12px;
    }
    #produtividadeTab input:focus, #produtividadeTab select:focus,
    #historicoProTab input:focus, #historicoProTab select:focus,
    #notaFiscalTab input:focus, #notaFiscalTab select:focus,
    #notaFiscalArquivadosTab input:focus, #notaFiscalArquivadosTab select:focus,
    #financeiroTab input:focus, #financeiroTab select:focus,
    #protocoloAtualizacaoTab input:focus, #protocoloAtualizacaoTab select:focus,
    #atualizacaoTab input:focus, #atualizacaoTab select:focus,
    #relatoriosAlertasTab input:focus, #relatoriosAlertasTab select:focus,
    #usuariosTab input:focus, #usuariosTab select:focus {
      outline: 0; border-color: var(--ct-anel);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-anel) 22%, transparent);
    }

    /* Botao primario (acao real) dos nove paineis. A COR saiu daqui em
       11/08/2026 e foi para a regra unica do fim do bloco de botoes ("O
       PRINCIPAL PRETO, NOS QUATRO LUGARES"): eram nove ids repetindo lime, e
       era exatamente a lista que "esquece por construcao" de que fala o
       comentario da regra base. */
    #produtividadeTab .btn-primary, #historicoProTab .btn-primary,
    #notaFiscalTab .btn-primary, #notaFiscalArquivadosTab .btn-primary,
    #financeiroTab .btn-primary, #protocoloAtualizacaoTab .btn-primary,
    #atualizacaoTab .btn-primary, #relatoriosAlertasTab .btn-primary,
    #usuariosTab .btn-primary {
      font-weight: 500; border-radius: var(--ct-r-sm);
    }
    #produtividadeTab .btn, #historicoProTab .btn,
    #notaFiscalTab .btn, #notaFiscalArquivadosTab .btn,
    #financeiroTab .btn, #protocoloAtualizacaoTab .btn,
    #atualizacaoTab .btn, #relatoriosAlertasTab .btn,
    #usuariosTab .btn { border-radius: var(--ct-r-sm); }

    /* As listas dinamicas destes paineis (linhas de usuario, notas fiscais,
       cards do financeiro) usam o `.result-card` ANTIGO - raio 18px, borda
       amarela a esquerda, sombra alta. Aqui viram cartoes neutros, no mesmo
       tom da casca. Nao alcancam o card de PROCESSO: aquele e .ct-card. */
    #notaFiscalTab .result-card, #notaFiscalArquivadosTab .result-card,
    #financeiroTab .result-card, #usuariosTab .result-card,
    #historicoProTab .result-card, #relatoriosAlertasTab .result-card,
    #protocoloAtualizacaoTab .result-card, #atualizacaoTab .result-card,
    #produtividadeTab .result-card {
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-left: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-sm);
      box-shadow: none;
      padding: 14px 16px;
    }
    #notaFiscalTab .result-title, #notaFiscalArquivadosTab .result-title,
    #financeiroTab .result-title, #usuariosTab .result-title,
    #historicoProTab .result-title, #relatoriosAlertasTab .result-title,
    #protocoloAtualizacaoTab .result-title, #atualizacaoTab .result-title,
    #produtividadeTab .result-title {
      font-size: 15px; font-weight: 600; letter-spacing: -.01em;
    }
    /* Os chips dessas listas: neutros, sem negrito, como no corpo do card. */
    #notaFiscalTab .chip, #notaFiscalArquivadosTab .chip,
    #financeiroTab .chip, #usuariosTab .chip,
    #historicoProTab .chip, #relatoriosAlertasTab .chip,
    #protocoloAtualizacaoTab .chip, #atualizacaoTab .chip,
    #produtividadeTab .chip {
      background: var(--ct-rebaixo); border: 1px solid var(--ct-linha-suave);
      color: var(--ct-tinta-2); font-weight: 400; font-size: var(--ct-fs-meta);
      border-radius: var(--ct-r-pill); padding: 3px 10px;
    }
    #notaFiscalTab .row-meta, #notaFiscalArquivadosTab .row-meta,
    #financeiroTab .row-meta, #usuariosTab .row-meta,
    #historicoProTab .row-meta, #relatoriosAlertasTab .row-meta,
    #protocoloAtualizacaoTab .row-meta, #atualizacaoTab .row-meta,
    #produtividadeTab .row-meta {
      font-size: var(--ct-fs-meta); color: var(--ct-tinta-3);
    }

    /* Avisos de rotina em lime claro; erro segue vermelho */
    #produtividadeTab .msg.ok, #produtividadeTab .msg.info,
    #historicoProTab .msg.ok, #historicoProTab .msg.info,
    #notaFiscalTab .msg.ok, #notaFiscalTab .msg.info,
    #notaFiscalArquivadosTab .msg.ok, #notaFiscalArquivadosTab .msg.info,
    #financeiroTab .msg.ok, #financeiroTab .msg.info,
    #protocoloAtualizacaoTab .msg.ok, #protocoloAtualizacaoTab .msg.info,
    #atualizacaoTab .msg.ok, #atualizacaoTab .msg.info,
    #relatoriosAlertasTab .msg.ok, #relatoriosAlertasTab .msg.info,
    #usuariosTab .msg.ok, #usuariosTab .msg.info {
      background: var(--ct-info-suave); border: 1px solid var(--ct-info-linha);
      color: var(--ct-tinta-2); font-size: var(--ct-fs-corpo); border-radius: var(--ct-r-sm);
    }

    /* ======================================================================
       CENTRAL DO CONTADOR(A) - Nota fiscal e NF arquivadas
       (projeto Layout, 03/08/2026 - docs/nota-fiscal-proposta.html)

       O cartao ganha anatomia fixa: quem . quanto . dados . autos . acao. O
       valor pago passa a ser o dado principal - mono, verde, coluna a direita
       -, porque e o que o contador procura e estava como um chip no meio de
       outros quatro. Le-se em coluna, nota apos nota.

       ESCOPO. A casca (regua do dia, sub-abas, estados) fica so nos dois
       paineis da Central do contador(a). O CARTAO vale tambem em
       #financeiroTab: aquele painel desenha pelo mesmo buildNotaFiscalCard e,
       sem o id aqui, ficaria sem estilo nenhum. O redesenho do Financeiro nao
       e deste projeto - ele so herda o cartao.

       NENHUM HEX CRU, so var(--ct-*). O ct-tokens.css v1 que esta pagina
       linka ainda nao tem par escuro (quem tem e o ds/tokens.css v3);
       escrevendo so contra token, no dia em que a pagina trocar de folha
       estes dois paineis acompanham sem que se toque aqui. Dois papeis que o
       v1 nao separa viram o vizinho mais proximo, dito no lugar de cada um.
       ====================================================================== */

    /* A REGUA DO DIA: tres numeros acima dos filtros, so nas notas ativas.
       Sai do que a tela ja recebeu - nenhuma consulta nova ao banco. */
    #notaFiscalTab .nf-regua {
      display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr));
      gap: 10px; margin: 0 0 14px;
    }
    #notaFiscalTab .nf-kpi {
      background: var(--ct-superficie); border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-sm); padding: 12px 15px;
    }
    #notaFiscalTab .nf-kpi small {
      display: block; font-family: var(--ct-mono); font-size: 10px;
      letter-spacing: .09em; text-transform: uppercase;
      color: var(--ct-tinta-3); margin-bottom: 4px;
    }
    /* Numero de vitrine: mono, algarismo proporcional. */
    #notaFiscalTab .nf-kpi b {
      font-family: var(--ct-mono); font-size: 21px; font-weight: 600;
      letter-spacing: -.02em;
    }
    #notaFiscalTab .nf-kpi b em {
      font-family: var(--ct-fonte); font-style: normal; font-size: 11.5px;
      color: var(--ct-tinta-3); font-weight: 400; margin-left: 4px;
    }
    #notaFiscalTab .nf-kpi--dinheiro b { color: var(--ct-ok); }
    /* A soma so alcanca o que esta carregado. Quando falta pagina, esta linha
       diz - numero parcial com cara de total e o pior erro desta tela. */
    #notaFiscalTab .nf-kpi i {
      display: block; font-style: normal; font-size: 11px;
      color: var(--ct-tinta-3); margin-top: 3px;
    }

    /* O CARTAO. Grade de duas colunas: a esquerda conta QUEM e O QUE, a
       direita conta QUANTO e a acao. */
    #notaFiscalTab .nf-cartao,
    #notaFiscalArquivadosTab .nf-cartao,
    #financeiroTab .nf-cartao {
      background: var(--ct-superficie); border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-md); padding: 16px 18px; margin: 0;
      display: grid; grid-template-columns: 1fr auto; gap: 6px 20px;
    }
    /* O v1 nao tem token de linha forte (o v3 tem, --ct-linha-forte); o
       vizinho mais proximo e a tinta de rotulo, que e cinza de mesma forca. */
    #notaFiscalTab .nf-cartao:hover,
    #notaFiscalArquivadosTab .nf-cartao:hover,
    #financeiroTab .nf-cartao:hover { border-color: var(--ct-tinta-3); }

    #notaFiscalTab .nf-quem b,
    #notaFiscalArquivadosTab .nf-quem b,
    #financeiroTab .nf-quem b {
      font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
    }
    #notaFiscalTab .nf-quando,
    #notaFiscalArquivadosTab .nf-quando,
    #financeiroTab .nf-quando {
      font-size: 12.5px; color: var(--ct-tinta-3); margin-top: 1px;
    }

    #notaFiscalTab .nf-valor,
    #notaFiscalArquivadosTab .nf-valor,
    #financeiroTab .nf-valor { text-align: right; }
    #notaFiscalTab .nf-valor small,
    #notaFiscalArquivadosTab .nf-valor small,
    #financeiroTab .nf-valor small {
      display: block; font-family: var(--ct-mono); font-size: 10px;
      letter-spacing: .09em; text-transform: uppercase;
      color: var(--ct-tinta-3); margin-bottom: 2px;
    }
    #notaFiscalTab .nf-valor b,
    #notaFiscalArquivadosTab .nf-valor b,
    #financeiroTab .nf-valor b {
      font-family: var(--ct-mono); font-size: 22px; font-weight: 600;
      color: var(--ct-ok); letter-spacing: -.02em;
    }
    /* A unidade por extenso: e ela, com o rotulo VALOR PAGO, que diz o que o
       numero e. Simbolo de moeda nao entra em texto de tela. */
    #notaFiscalTab .nf-valor b em,
    #notaFiscalArquivadosTab .nf-valor b em,
    #financeiroTab .nf-valor b em {
      font-family: var(--ct-fonte); font-style: normal; font-size: 11.5px;
      color: var(--ct-tinta-3); font-weight: 400; margin-left: 4px;
    }

    /* Dados do cliente: grade de rotulo + valor, sem chip solto. */
    #notaFiscalTab .nf-dados,
    #notaFiscalArquivadosTab .nf-dados,
    #financeiroTab .nf-dados {
      grid-column: 1; display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px 18px; border-top: 1px solid var(--ct-linha-suave);
      padding-top: 10px; margin-top: 6px;
    }
    #notaFiscalTab .nf-dado small,
    #notaFiscalArquivadosTab .nf-dado small,
    #financeiroTab .nf-dado small {
      display: block; font-family: var(--ct-mono); font-size: 9.5px;
      letter-spacing: .09em; text-transform: uppercase; color: var(--ct-tinta-3);
    }
    #notaFiscalTab .nf-dado span,
    #notaFiscalArquivadosTab .nf-dado span,
    #financeiroTab .nf-dado span { font-size: 13px; color: var(--ct-tinta-2); }
    /* Identificador e mono - regra da casa. */
    #notaFiscalTab .nf-dado span.cod,
    #notaFiscalArquivadosTab .nf-dado span.cod,
    #financeiroTab .nf-dado span.cod {
      font-family: var(--ct-mono); font-size: 12.5px;
    }
    /* Endereco e a unica linha que costuma passar da coluna. */
    #notaFiscalTab .nf-dado--largo,
    #notaFiscalArquivadosTab .nf-dado--largo,
    #financeiroTab .nf-dado--largo { grid-column: 1 / -1; }

    /* Os autos deste pagamento: uma linha por auto, numero em mono. E a casa
       do "um card por cadastro com todos os autos". */
    #notaFiscalTab .nf-autos,
    #notaFiscalArquivadosTab .nf-autos,
    #financeiroTab .nf-autos {
      grid-column: 1 / -1; background: var(--ct-rebaixo);
      border: 1px solid var(--ct-linha-suave); border-radius: var(--ct-r-sm);
      padding: 9px 12px; margin-top: 8px;
    }
    #notaFiscalTab .nf-autos > small,
    #notaFiscalArquivadosTab .nf-autos > small,
    #financeiroTab .nf-autos > small {
      display: block; font-family: var(--ct-mono); font-size: 9.5px;
      letter-spacing: .09em; text-transform: uppercase;
      color: var(--ct-tinta-3); margin-bottom: 5px;
    }
    #notaFiscalTab .nf-auto,
    #notaFiscalArquivadosTab .nf-auto,
    #financeiroTab .nf-auto {
      display: flex; gap: 10px; align-items: baseline; padding: 3px 0;
      font-size: 13px; flex-wrap: wrap;
    }
    #notaFiscalTab .nf-auto + .nf-auto,
    #notaFiscalArquivadosTab .nf-auto + .nf-auto,
    #financeiroTab .nf-auto + .nf-auto { border-top: 1px dashed var(--ct-linha); }
    #notaFiscalTab .nf-auto .num,
    #notaFiscalArquivadosTab .nf-auto .num,
    #financeiroTab .nf-auto .num {
      font-family: var(--ct-mono); font-size: 12.5px; color: var(--ct-tinta);
    }
    #notaFiscalTab .nf-auto .orgao,
    #notaFiscalArquivadosTab .nf-auto .orgao,
    #financeiroTab .nf-auto .orgao { color: var(--ct-tinta-3); font-size: 12px; }

    #notaFiscalTab .nf-tag,
    #notaFiscalArquivadosTab .nf-tag,
    #financeiroTab .nf-tag {
      display: inline-block; font-family: var(--ct-mono); font-size: 10px;
      letter-spacing: .06em; text-transform: uppercase;
      border-radius: var(--ct-r-pill); padding: 2px 9px; font-weight: 600;
    }
    /* Dourado e destaque NAO acionavel - por isso a etiqueta do grupo. */
    #notaFiscalTab .nf-tag--grupo,
    #notaFiscalArquivadosTab .nf-tag--grupo,
    #financeiroTab .nf-tag--grupo {
      background: var(--ct-dourado-suave); color: var(--ct-dourado); margin-left: 6px;
    }
    #notaFiscalTab .nf-tag--arq,
    #notaFiscalArquivadosTab .nf-tag--arq,
    #financeiroTab .nf-tag--arq {
      background: var(--ct-rebaixo); border: 1px solid var(--ct-linha);
      color: var(--ct-tinta-3);
    }
    /* Dado que falta e aviso, nao erro. O v1 ainda nao separa "atencao" do
       dourado da marca (o v3 separa, --ct-atencao); aqui vale o dourado. */
    #notaFiscalTab .nf-tag--falta,
    #notaFiscalArquivadosTab .nf-tag--falta,
    #financeiroTab .nf-tag--falta {
      background: var(--ct-dourado-suave); color: var(--ct-dourado);
    }

    /* Rodape: origem a esquerda, acao a direita. */
    #notaFiscalTab .nf-pe,
    #notaFiscalArquivadosTab .nf-pe,
    #financeiroTab .nf-pe {
      grid-column: 1 / -1; display: flex; align-items: center;
      justify-content: space-between; gap: 10px; flex-wrap: wrap;
      border-top: 1px solid var(--ct-linha-suave); padding-top: 10px; margin-top: 8px;
    }
    #notaFiscalTab .nf-origem,
    #notaFiscalArquivadosTab .nf-origem,
    #financeiroTab .nf-origem { font-size: 12px; color: var(--ct-tinta-3); }
    /* ARQUIVAR e acao seria, nao alarme: contorno discreto que so esquenta no
       hover. O v1 nao tem a linha suave de alerta do v3 (--ct-alerta-linha),
       entao o repouso usa a linha comum e o vermelho fica na palavra. */
    #notaFiscalTab .nf-arquivar,
    #notaFiscalArquivadosTab .nf-arquivar,
    #financeiroTab .nf-arquivar {
      border: 1px solid var(--ct-linha); background: var(--ct-superficie);
      color: var(--ct-alerta); border-radius: var(--ct-r-sm); padding: 6px 14px;
      font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .04em;
      cursor: pointer;
    }
    #notaFiscalTab .nf-arquivar:hover,
    #notaFiscalArquivadosTab .nf-arquivar:hover,
    #financeiroTab .nf-arquivar:hover {
      background: var(--ct-alerta-suave); border-color: var(--ct-alerta);
    }

    /* Arquivada e a MESMA nota, com menos tinta: fundo rebaixado, carimbo no
       lugar da acao. O olho reconhece o cartao, so muda o estado. */
    #notaFiscalTab .nf-cartao--arq,
    #notaFiscalArquivadosTab .nf-cartao--arq,
    #financeiroTab .nf-cartao--arq { background: var(--ct-rebaixo); }
    #notaFiscalTab .nf-cartao--arq .nf-valor b,
    #notaFiscalArquivadosTab .nf-cartao--arq .nf-valor b,
    #financeiroTab .nf-cartao--arq .nf-valor b { color: var(--ct-tinta-2); }
    #notaFiscalTab .nf-cartao--arq .nf-autos,
    #notaFiscalArquivadosTab .nf-cartao--arq .nf-autos,
    #financeiroTab .nf-cartao--arq .nf-autos { background: var(--ct-superficie); }

    /* ESTADOS. O esqueleto entra no lugar da frase "Pesquisando..." - a forma
       do cartao ja diz o que esta vindo. Erro continua como e. */
    #notaFiscalTab .nf-vazio,
    #notaFiscalArquivadosTab .nf-vazio {
      border: 1px dashed var(--ct-tinta-3); border-radius: var(--ct-r-md);
      padding: 34px 20px; text-align: center; color: var(--ct-tinta-3);
      background: var(--ct-superficie);
    }
    #notaFiscalTab .nf-vazio b,
    #notaFiscalArquivadosTab .nf-vazio b {
      display: block; color: var(--ct-tinta-2); font-size: 14.5px; margin-bottom: 3px;
    }
    #notaFiscalTab .nf-esqueleto,
    #notaFiscalArquivadosTab .nf-esqueleto {
      background: var(--ct-superficie); border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-md); padding: 16px 18px;
    }
    #notaFiscalTab .nf-esqueleto i,
    #notaFiscalArquivadosTab .nf-esqueleto i {
      display: block; height: 12px; border-radius: 6px;
      background: var(--ct-rebaixo); margin: 8px 0;
      animation: nfPulsa 1.2s ease-in-out infinite;
    }
    #notaFiscalTab .nf-esqueleto i:first-child,
    #notaFiscalArquivadosTab .nf-esqueleto i:first-child { width: 40%; height: 15px; }
    #notaFiscalTab .nf-esqueleto i:nth-child(2),
    #notaFiscalArquivadosTab .nf-esqueleto i:nth-child(2) { width: 70%; }
    #notaFiscalTab .nf-esqueleto i:last-child,
    #notaFiscalArquivadosTab .nf-esqueleto i:last-child { width: 55%; }
    @keyframes nfPulsa { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
    @media (prefers-reduced-motion: reduce) {
      #notaFiscalTab .nf-esqueleto i,
      #notaFiscalArquivadosTab .nf-esqueleto i { animation: none; }
    }

    /* O protótipo empilha as notas com 10px; a lista e grade com gap. */
    #notaFiscalTab .result-list,
    #notaFiscalArquivadosTab .result-list { gap: 10px; }

    /* Em tela estreita o cartao empilha: o valor desce para baixo do nome. */
    @media (max-width: 760px) {
      #notaFiscalTab .nf-regua { grid-template-columns: 1fr; }
      #notaFiscalTab .nf-cartao,
      #notaFiscalArquivadosTab .nf-cartao,
      #financeiroTab .nf-cartao { grid-template-columns: 1fr; }
      #notaFiscalTab .nf-valor,
      #notaFiscalArquivadosTab .nf-valor,
      #financeiroTab .nf-valor { text-align: left; }
      #notaFiscalTab .nf-dados,
      #notaFiscalArquivadosTab .nf-dados,
      #financeiroTab .nf-dados { grid-column: 1 / -1; }
    }

    /* Pills das filas */
    /* O quadro que empresta o painel de Conferência da Central (30/07/2026).
       Altura em vh porque o conteúdo lá dentro é uma tela inteira, com abas e
       tabela própria: altura fixa em px cortaria o orçamento no meio em telas
       menores. O mínimo existe para o quadro não virar uma fresta no notebook. */
    .ct-quadro-embutido { width: 100%; height: 78vh; min-height: 520px; border: 1px solid var(--ct-linha, var(--ct-linha)); border-radius: 10px; overflow: hidden; }
    .ct-quadro-embutido iframe { width: 100%; height: 100%; border: 0; display: block; }
    .ct-hint { margin: 0 0 10px; opacity: .8; font-size: 13px; }

    /* As pilulas de sub-painel. A Central do contador(a) entrou na MESMA regra
       das filas (projeto Layout, 03/08/2026) em vez de ganhar copia: sao o
       mesmo objeto - escolher entre telas irmas -, e duas copias da pilula
       viravam duas verdades sobre a cor da ativa. */
    .actions.ct-sub-central,
    .actions.ct-sub-contador { gap: 5px; margin: 0 0 13px; }
    .ct-sub-central .btn,
    .ct-sub-contador .btn {
      background: transparent;
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-pill);
      padding: 5px 13px;
      font-size: 12.5px;
      font-weight: 400;
      color: var(--ct-tinta-2);
    }
    .ct-sub-central .btn:hover,
    .ct-sub-contador .btn:hover { background: var(--ct-rebaixo); }
    .ct-sub-central .btn.btn-primary,
    .ct-sub-contador .btn.btn-primary {
      background: var(--ct-inverso);
      border-color: var(--ct-inverso);
      color: var(--e-sobre-claro);
      font-weight: 500;
    }
    /* A MESMA pilula, dita de novo com o id na frente. Nao e capricho: o bloco
       dos nove paineis estiliza `#notaFiscalTab .btn-primary` em lime, e id
       ganha de classe - sem esta repeticao a sub-aba ativa da Central do
       contador(a) sai lime e quadrada, enquanto a das filas sai preta e
       redonda. Mesma classe, duas verdades, dependendo do painel.
       Ela mora AQUI, junto da regra irma, e nao no bloco da Nota fiscal:
       o branco sobre o preto ainda e hex cru neste arquivo (o v1 nao tem
       tinta invertida), e aquele bloco e escrito so contra token. */
    #notaFiscalTab .ct-sub-contador .btn,
    #notaFiscalArquivadosTab .ct-sub-contador .btn {
      border-radius: var(--ct-r-pill);
      background: transparent;
      border-color: var(--ct-linha);
      color: var(--ct-tinta-2);
      font-weight: 400;
    }
    #notaFiscalTab .ct-sub-contador .btn:hover,
    #notaFiscalArquivadosTab .ct-sub-contador .btn:hover { background: var(--ct-rebaixo); }
    #notaFiscalTab .ct-sub-contador .btn.btn-primary,
    #notaFiscalArquivadosTab .ct-sub-contador .btn.btn-primary {
      background: var(--ct-inverso);
      border-color: var(--ct-inverso);
      color: var(--e-sobre-claro);
      font-weight: 500;
    }

    @media (max-width: 760px) {
      header.pro-header { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
      .pro-header .brand { border-right: 0; padding-right: 0; }
      .nav { position: static; padding-bottom: 10px; }
      .filters.filters-top input { min-width: 0; flex: 1 1 100%; }
    }

    /* Cartoes de tela (os que nao sao card de processo) */
    section > .card,
    .wrap > .card {
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-md);
      box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    }

    /* Sobras da decoracao antiga que venciam por especificidade de id.
       Sao tres coisas, e todas competiam com o que o card novo diz:
         - a faixa dourada de 8px a esquerda, que duplicava a .ct-trilho com
           outra cor e sempre a mesma, sem informar nada;
         - a fita degrade no topo (dourado -> azul -> verde), que era enfeite
           puro e agora encostava no lime;
         - o fundo em degrade e a sombra alta, que faziam o card flutuar. */
    #resultList .ct-card.result-card,
    #confList .ct-card.result-card,
    #contList .ct-card.result-card {
      border: 1px solid var(--ct-linha);
      border-left: 1px solid var(--ct-linha);
      background: var(--ct-superficie);
      box-shadow: none;
      transform: none;
    }
    #resultList .ct-card.result-card::before,
    #confList .ct-card.result-card::before,
    #contList .ct-card.result-card::before { content: none; }
    #resultList .ct-card.result-card:hover,
    #confList .ct-card.result-card:hover,
    #contList .ct-card.result-card:hover {
      transform: none;
      box-shadow: none;
      border-color: var(--ct-linha-forte);
    }

    /* A logo e um PNG COM transparencia, e a barra e preta: qualquer fundo ou
       moldura aqui vira um quadrado claro em volta dela. Por isso tudo zerado.
       Os !important existem porque as regras antigas (borda dourada, halo de
       7px, raio de 50%) tambem usavam !important. */
    .pro-header .brand-logo {
      width: 60px !important;
      height: 60px !important;
      border-radius: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      filter: none;
      object-fit: contain;
    }
    .pro-header .brand-logo:hover { transform: none; }

    /* Anel de carregamento no lugar do texto "Site carregado".
       O arco sobe conforme passos reais terminam; so fecha em 100% quando a
       pagina esta toda pronta. Amarelo porque e a marca, e na barra preta ele
       nao encosta no lime dos botoes. Zerado (fundo/borda/padding) porque o
       id do pill trazia amarelo chapado - o anel e o visual agora. */
    .pro-header #planilhaInfo {
      background: transparent;
      border: 0;
      padding: 0;
      box-shadow: none;
      width: 34px;
      height: 34px;
      position: relative;
      display: grid;
      place-items: center;
      flex: none;
    }
    #planilhaInfo svg { width: 34px; height: 34px; transform: rotate(-90deg); }
    #planilhaInfo .lr-track { fill: none; stroke: var(--ct-inverso-3); stroke-width: 3; }
    #planilhaInfo .lr-arc {
      fill: none;
      stroke: var(--ct-amarelo);
      stroke-width: 3;
      stroke-linecap: round;
      /* dasharray/offset vem do JS: circunferencia de r=13 */
      transition: stroke-dashoffset .3s ease;
    }
    #planilhaInfo .lr-num {
      position: absolute;
      font-family: var(--ct-mono);
      font-size: 9px;
      font-weight: 600;
      color: var(--ct-amarelo);
      letter-spacing: -.02em;
    }
    /* Erro: o anel para onde estava e fica vermelho. O % congelado mostra ate
       onde chegou, que ajuda mais do que zerar. */
    #planilhaInfo.is-error .lr-arc { stroke: var(--e-alerta); }
    #planilhaInfo.is-error .lr-num { color: var(--e-alerta-f); }

    /* ======================================================================
       PAINEL + CADASTRO no vocabulario ct-

       Escopado a #cadastroTab e #retroativoTab de proposito: .card,
       .form-grid, label e input sao classes GENERICAS, usadas por telas que
       ainda nao migraram (Nota Fiscal, Financeiro, Usuarios). Restyla-las sem
       escopo migraria todas de uma vez, sem querer.
       ====================================================================== */
    #cadastroTab .card,
    #retroativoTab .card {
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-md);
      box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    }
    #cadastroTab .card-head,
    #retroativoTab .card-head {
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--ct-linha);
      background: linear-gradient(180deg, var(--ct-superficie), var(--ct-rebaixo));
    }
    #cadastroTab .card-head h2,
    #retroativoTab .card-head h2 {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -.015em;
      margin: 0;
    }
    #cadastroTab .card-head p,
    #retroativoTab .card-head p {
      font-size: 13px;
      color: var(--ct-tinta-3);
      margin: 4px 0 0;
    }
    #cadastroTab .card-body,
    #retroativoTab .card-body { padding: 20px; }

    #cadastroTab .form-grid,
    #retroativoTab .form-grid { gap: 16px 18px; }

    /* Rotulo em mono/caixa alta, como no card. Nada de negrito. */
    #cadastroTab label,
    #retroativoTab label {
      font-family: var(--ct-mono);
      font-size: var(--ct-fs-rotulo);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ct-tinta-3);
      font-weight: 400;
      margin: 0 0 6px;
    }
    #cadastroTab input,
    #cadastroTab select,
    #cadastroTab textarea,
    #retroativoTab input,
    #retroativoTab select,
    #retroativoTab textarea {
      font-family: var(--ct-fonte);
      font-size: var(--ct-fs-corpo);
      color: var(--ct-tinta);
      background: var(--ct-superficie);
      border: 1px solid var(--ct-linha);
      border-radius: var(--ct-r-sm);
      padding: 10px 12px;
    }
    #cadastroTab input:focus,
    #cadastroTab select:focus,
    #cadastroTab textarea:focus,
    #retroativoTab input:focus,
    #retroativoTab select:focus,
    #retroativoTab textarea:focus {
      outline: 0;
      border-color: var(--ct-anel);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-anel) 22%, transparent);
    }

    /* Botoes: primaria em lime, o resto neutro. Um por bloco. */
    #cadastroTab .btn,
    #retroativoTab .btn {
      font-family: var(--ct-fonte);
      font-size: 14.5px;
      font-weight: 400;
      border-radius: var(--ct-r-sm);
      padding: 9px 15px;
      border: 1px solid var(--ct-linha);
      background: transparent;
      color: var(--ct-tinta-2);
      box-shadow: none;
    }
    #cadastroTab .btn:hover,
    #retroativoTab .btn:hover { background: var(--ct-rebaixo); color: var(--ct-tinta); }
    /* ------------------------------------------------------------------
       O PRINCIPAL PRETO, NOS QUATRO LUGARES  (11/08/2026)

       A cor da ação principal era declarada em CINCO blocos — a base, o card,
       a barra de filtros, os nove painéis por id e o cadastro — todos dizendo
       lime com palavras diferentes. Agora ela é dita uma vez, aqui.

       POR QUE UMA REGRA AGRUPADA, E NÃO SÓ A BASE: cada um desses escopos tem
       antes de si um `.btn` neutro da MESMA especificidade (`.ct-card .btn`,
       `#cadastroTab .btn`...). Sem repetir o seletor, o neutro vem depois e
       vence — o botão sairia branco dentro do card e preto fora dele.

       ESTA REGRA VEM DEPOIS DE TODOS ELES de propósito: com especificidade
       igual, quem vence é quem está por último.

       O gradiente, o lustro e o halo são os da seção 1.8 do ds/tokens.css, os
       mesmos que o Site 2 usa — a forma do `::after` e o `overflow:hidden`
       vêm da regra base lá em cima e valem para todos os escopos.
       ------------------------------------------------------------------ */
    .btn-primary,
    .ct-card .btn-primary,
    .ct-fila .filters .btn-primary,
    #produtividadeTab .btn-primary, #historicoProTab .btn-primary,
    #notaFiscalTab .btn-primary, #notaFiscalArquivadosTab .btn-primary,
    #financeiroTab .btn-primary, #protocoloAtualizacaoTab .btn-primary,
    #atualizacaoTab .btn-primary, #relatoriosAlertasTab .btn-primary,
    #usuariosTab .btn-primary,
    #cadastroTab .btn-primary,
    #retroativoTab .btn-primary {
      background: linear-gradient(135deg, var(--b-preto-2), var(--b-preto));
      border-color: transparent;
      color: var(--b-preto-letra);
      box-shadow: 0 2px 9px -2px var(--b-halo-preto);
    }
    .btn-primary:hover,
    .ct-card .btn-primary:hover,
    .ct-fila .filters .btn-primary:hover,
    #produtividadeTab .btn-primary:hover, #historicoProTab .btn-primary:hover,
    #notaFiscalTab .btn-primary:hover, #notaFiscalArquivadosTab .btn-primary:hover,
    #financeiroTab .btn-primary:hover, #protocoloAtualizacaoTab .btn-primary:hover,
    #atualizacaoTab .btn-primary:hover, #relatoriosAlertasTab .btn-primary:hover,
    #usuariosTab .btn-primary:hover,
    #cadastroTab .btn-primary:hover,
    #retroativoTab .btn-primary:hover {
      background: linear-gradient(135deg, var(--b-preto-2), var(--b-preto));
      border-color: transparent;
      color: var(--b-preto-letra);
      box-shadow: 0 8px 20px -4px var(--b-halo-preto);
      filter: brightness(1.08);
    }
    #cadastroTab .btn-small,
    #retroativoTab .btn-small { padding: 7px 12px; font-size: 13.5px; }

    /* Os dois botoes do topo (Novo cliente / Cliente retroativo): o ativo em
       grafite, o inativo em papel — nao dois amarelos disputando, e tambem nao
       o lime da acao (aqui o botao so ALTERNA a aba, nao envia nada).

       O #cadastroTab entra no seletor de proposito: sem ele, a regra
       `#cadastroTab .btn-primary` acima (2 ids) venceria por especificidade e
       o botao sairia lime. */
    #cadastroTab .ct-sub-cadastro .btn,
    #retroativoTab .ct-sub-cadastro .btn {
      border-radius: var(--ct-r-sm);
      padding: 11px 18px;
      font-size: 14.5px;
      font-weight: 500;
      border: 1px solid var(--ct-linha);
    }
    #cadastroTab .ct-sub-cadastro .btn-primary,
    #retroativoTab .ct-sub-cadastro .btn-primary {
      background: var(--ct-inverso);
      border-color: var(--ct-inverso);
      color: var(--e-sobre-claro);
    }
    #cadastroTab .ct-sub-cadastro .btn-primary:hover,
    #retroativoTab .ct-sub-cadastro .btn-primary:hover { background: var(--ct-inverso); }
    #cadastroTab .ct-sub-cadastro .btn-soft,
    #retroativoTab .ct-sub-cadastro .btn-soft {
      background: transparent;
      color: var(--ct-tinta-2);
    }
    #cadastroTab .ct-sub-cadastro .btn-soft:hover,
    #retroativoTab .ct-sub-cadastro .btn-soft:hover { background: var(--ct-rebaixo); color: var(--ct-tinta); }

    /* Avisos dentro do painel. Escopados aqui para nao repintar as mensagens
       de status das outras telas (que ainda usam verde/azul chapados). */
    #cadastroTab .msg,
    #retroativoTab .msg { font-size: var(--ct-fs-corpo); border-radius: var(--ct-r-sm); }

    /* Os dois avisos que o dono pediu em lime claro:
         .msg.ok   - "N orcamento(s) pago(s) aguardando cadastro" (texto cinza)
         .msg.info - "Digite a placa inteira e clique em buscar"
       Sao avisos de rotina (contagem, instrucao), nao conclusao nem erro -
       entao a cor da marca cabe. O ERRO fica de fora: continua vermelho, que e
       onde a cor precisa alarmar de verdade. */
    #cadastroTab .msg.ok,
    #cadastroTab .msg.info,
    #retroativoTab .msg.ok,
    #retroativoTab .msg.info {
      background: var(--ct-info-suave);
      border: 1px solid var(--ct-info-linha);
      color: var(--ct-tinta-2);
    }

    /* Miniaturas dos documentos que o parceiro anexou ao orcamento — na fila
       de orcamentos pagos e no formulario de cadastro. */
    .orcGaleria { display: flex; flex-wrap: wrap; gap: 10px; }
    .orcAnexoGrupo { margin-bottom: 14px; }
    .orcThumb {
      display: block;
      width: 92px;
      height: 92px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--ct-linha);
      background: var(--ct-rebaixo);
      transition: transform .18s, box-shadow .18s, border-color .18s;
    }
    .orcThumb:hover {
      transform: scale(1.04);
      box-shadow: 0 8px 16px -6px rgba(15, 23, 42, .28);
      border-color: var(--ct-linha-forte);
    }
    .orcThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .orcThumb--doc {
      display: grid;
      place-items: center;
      color: var(--e-alerta-f);
      font-weight: 900;
      font-size: 13px;
      text-decoration: none;
    }

    /* A barra de acesso (#firebaseAuthBanner) foi para o ds/componentes.css
       em 12/08/2026: o atendimento.html desenha o MESMO login, pelo mesmo
       adapter, e estava sem folha nenhuma. Uma copia so, nas duas telas. */

    /* ======================================================================
       USUÁRIOS E PERMISSÕES  —  reorganizado em 27/07/2026

       O QUE HAVIA: formulário em cima, matriz de 38 checkboxes no meio, lista
       de gente embaixo. Para editar alguém era preciso descer até a lista,
       clicar em "Editar", e SUBIR de volta para achar o formulário já
       preenchido - em 215 linhas de markup. Muita rolagem para uma tarefa de
       dez segundos, repetida o dia inteiro por quem administra.

       AGORA: lista à esquerda, pessoa à direita. Clicar num cartão abre a
       pessoa ao lado, sem sair do lugar. Abaixo de 1100px as duas viram uma
       coluna só (a lista primeiro), porque em tela estreita duas colunas de
       500px não existem.
       ====================================================================== */
    #usuariosTab .usr {
      display: grid;
      grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }
    @media (max-width: 1100px) { #usuariosTab .usr { grid-template-columns: 1fr; } }

    #usuariosTab .usr__coluna {
      border: 1px solid var(--ct-linha);
      border-radius: 18px;
      background: var(--ct-superficie);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    /* A lista rola por dentro. Sem isto, 21 cartões empurrariam o painel da
       direita para fora da tela - que é exatamente o problema que este
       layout existe para resolver. */
    #usuariosTab .usr__rolo { overflow-y: auto; max-height: 62vh; padding: 12px; display: grid; gap: 10px; }
    @media (max-width: 1100px) { #usuariosTab .usr__rolo { max-height: 46vh; } }

    #usuariosTab .usr__topo {
      padding: 12px 14px;
      border-bottom: 1px solid var(--ct-linha);
      background: var(--ct-rebaixo);
      display: grid;
      gap: 9px;
    }
    #usuariosTab .usr__titulo {
      display: flex; align-items: baseline; gap: 8px;
      font-weight: 800; font-size: 14px; color: var(--ct-tinta);
    }
    #usuariosTab .usr__cont { font-weight: 600; font-size: 12px; color: var(--ct-tinta-3); }

    #usuariosTab .usr__busca { position: relative; }
    #usuariosTab .usr__busca input { width: 100%; padding-right: 30px; }
    #usuariosTab .usr__busca .usr__x {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      border: 0; background: none; color: var(--ct-tinta-3); cursor: pointer;
      font-size: 17px; line-height: 1; padding: 2px 5px; border-radius: 6px;
    }
    #usuariosTab .usr__busca .usr__x:hover { background: var(--ct-linha-suave); color: var(--ct-tinta); }

    #usuariosTab .usr__chips { display: flex; flex-wrap: wrap; gap: 5px; }
    #usuariosTab .usr__chip {
      border: 1px solid var(--ct-linha); background: var(--ct-superficie); color: var(--ct-tinta-2);
      border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700;
      cursor: pointer; line-height: 1.5; font-family: inherit;
    }
    #usuariosTab .usr__chip:hover { background: var(--ct-rebaixo); }
    #usuariosTab .usr__chip[aria-pressed="true"] { background: var(--ct-tinta); border-color: var(--ct-tinta); color: var(--e-sobre-claro); }
    #usuariosTab .usr__chip small { font-weight: 600; opacity: .7; margin-left: 3px; }

    /* "Quem enxerga o painel X?" - a pergunta de auditoria, respondida em um
       clique. Os dados já estão todos em memória; isto é só um filtro. */
    #usuariosTab .usr__ve {
      font-family: inherit; text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ct-tinta-2); }
    #usuariosTab .usr__ve select { flex: 1; min-width: 0; padding: 6px 8px; font-size: 12.5px; }

    #usuariosTab .usr__card {
      border: 1px solid var(--ct-linha); border-radius: 14px; background: var(--ct-superficie);
      padding: 11px 12px; cursor: pointer; text-align: left; width: 100%;
      font-family: inherit; display: grid; gap: 4px;
      transition: border-color .12s, box-shadow .12s, background-color .12s;
    }
    #usuariosTab .usr__card:hover { border-color: var(--ct-tinta-3); background: var(--ct-rebaixo); }
    #usuariosTab .usr__card[aria-current="true"] {
      border-color: var(--ct-tinta); box-shadow: inset 4px 0 0 var(--ct-dourado-fill, var(--ct-dourado-linha));
      background: var(--ct-rebaixo);
    }
    #usuariosTab .usr__card__topo { display: flex; align-items: baseline; gap: 8px; }
    #usuariosTab .usr__card__nome { font-weight: 800; font-size: 14px; color: var(--ct-tinta); flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #usuariosTab .usr__card__mail { font-size: 12px; color: var(--ct-tinta-3);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #usuariosTab .usr__card__meta { font-size: 11.5px; color: var(--ct-tinta-3); line-height: 1.45; }
    #usuariosTab .usr__cargo {
      flex: none; font-size: 10.5px; font-weight: 800; padding: 1px 8px;
      border-radius: 999px; background: var(--ct-rebaixo); color: var(--ct-tinta-2); white-space: nowrap;
    }
    #usuariosTab .usr__cargo--administrador { background: var(--ct-alerta-suave); color: var(--ct-alerta); }
    #usuariosTab .usr__cargo--gerencial { background: var(--ct-atencao-suave); color: var(--ct-dourado); }
    #usuariosTab .usr__cargo--financeiro { background: var(--ct-ok-suave); color: var(--ct-ok); }
    #usuariosTab .usr__cargo--parceiro { background: var(--e-decurso-s); color: var(--e-decurso-f); }
    #usuariosTab .usr__cargo--cliente { background: var(--ct-info-suave); color: var(--ct-info); }
    /* AJUSTADO À MÃO, e não o padrão do cargo. É a diferença que se quer saber
       numa auditoria, e até aqui ela não existia em lugar nenhum da tela. */
    #usuariosTab .usr__ajustes {
      flex: none; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
      border-radius: 999px; background: var(--ct-atencao-suave); color: var(--ct-dourado); white-space: nowrap;
    }
    #usuariosTab .usr__vazio { padding: 26px 12px; text-align: center; color: var(--ct-tinta-3); font-size: 13px; line-height: 1.6; }
    #usuariosTab .usr__vazio strong { display: block; color: var(--ct-tinta-2); margin-bottom: 3px; }
    /* Esqueleto enquanto carrega: uma frase "Carregando..." não diz quanto
       falta, e a lista pulando de nada para 21 cartões faz a tela saltar. */
    #usuariosTab .usr__esqueleto { border: 1px solid var(--ct-linha); border-radius: 14px; padding: 11px 12px; display: grid; gap: 7px; }
    #usuariosTab .usr__esqueleto span { display: block; height: 9px; border-radius: 5px; background: var(--ct-info-suave); }
    #usuariosTab .usr__esqueleto span:nth-child(1) { width: 52%; }
    #usuariosTab .usr__esqueleto span:nth-child(2) { width: 74%; }
    #usuariosTab .usr__esqueleto span:nth-child(3) { width: 38%; }

    #usuariosTab .usr__detalhe { padding: 16px 18px 18px; }
    #usuariosTab .usr__quem {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--ct-linha);
    }
    #usuariosTab .usr__quem h3 { margin: 0; font-size: 17px; }
    #usuariosTab .usr__quem__sub { font-size: 12.5px; color: var(--ct-tinta-3); flex-basis: 100%; }
    #usuariosTab .usr__novo {
      margin-left: auto; border: 1px solid var(--ct-linha); background: var(--ct-superficie);
      border-radius: 10px; padding: 6px 12px; font-family: inherit; font-size: 12.5px;
      font-weight: 700; cursor: pointer; color: var(--ct-tinta-2);
    }
    #usuariosTab .usr__novo:hover { background: var(--ct-rebaixo); color: var(--ct-tinta); }

    /* ---- senha: mostrar, copiar, sugerir ----
       Quem define a senha de outra pessoa PRECISA lê-la para passar adiante.
       Até aqui digitava às cegas num type=password e torcia. */
    #usuariosTab .usr__senha { display: flex; gap: 6px; align-items: stretch; }
    #usuariosTab .usr__senha input { flex: 1; min-width: 0; }
    #usuariosTab .usr__senha button {
      flex: none; border: 1px solid var(--ct-linha); background: var(--ct-superficie); color: var(--ct-tinta-2);
      border-radius: 10px; padding: 0 10px; font-family: inherit; font-size: 12px;
      font-weight: 700; cursor: pointer; white-space: nowrap;
    }
    #usuariosTab .usr__senha button:hover { background: var(--ct-rebaixo); color: var(--ct-tinta); }

    /* ---- a matriz de painéis ---- */
    #usuariosTab .usr__grupo { margin-bottom: 14px; }
    #usuariosTab .usr__grupo__cab {
      display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
      padding-bottom: 5px; border-bottom: 1px solid var(--ct-linha);
    }
    #usuariosTab .usr__grupo__nome { font-weight: 800; font-size: 12.5px; color: var(--ct-tinta); flex: 1; }
    #usuariosTab .usr__grupo__tudo {
      font-family: inherit; text-transform: none; letter-spacing: 0;
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11.5px; font-weight: 700; color: var(--ct-tinta-3); cursor: pointer;
    }
    #usuariosTab .usr__grupo__n { font-size: 11px; color: var(--ct-tinta-3); font-weight: 600; }
    #usuariosTab .usr__caixas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 5px; }
    /* O CHECKBOX NAO E UM CAMPO DE TEXTO.
       `#usuariosTab input` da width:100% e padding 10px a TODO input da aba -
       regra escrita para os campos de e-mail e nome. Aplicada a um checkbox,
       ela o estica para a largura da coluna e joga o rotulo para o outro lado.
       Vale para a matriz e para o "marcar o site inteiro". */
    #usuariosTab .usr__caixa input[type="checkbox"],
    #usuariosTab .usr__grupo__tudo input[type="checkbox"] {
      width: auto; flex: 0 0 auto; margin: 0; padding: 0;
      accent-color: var(--ct-tinta); cursor: pointer;
    }

    #usuariosTab .usr__caixa {
      /* `#usuariosTab label` deixa todo label em mono e MAIUSCULA - isso serve
         para rotulo de campo, e nao para o nome de um painel, que aqui e uma
         frase inteira ("Central do contador(a): notas ativas"). */
      font-family: inherit; text-transform: none; letter-spacing: 0; color: var(--ct-tinta-2);
      display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 13px;
      padding: 4px 7px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
    }
    #usuariosTab .usr__caixa:hover { background: var(--ct-rebaixo); border-color: var(--ct-linha); }
    #usuariosTab .usr__caixa span { min-width: 0; }
    /* SENSÍVEL = mexe em dinheiro, em quem vê o que, ou na configuração do
       sistema. Sem esta marca, o checkbox que dá o poder de criar
       administradores tem o mesmo peso visual de "Histórico do cliente".
       Não é vermelho: é um rótulo, para a pessoa olhar duas vezes. */
    #usuariosTab .usr__selo {
      flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
      text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
      background: var(--ct-atencao-suave); color: var(--ct-dourado);
    }
    /* Diverge do padrão do cargo - nos dois sentidos. */
    #usuariosTab .usr__caixa--difere { border-color: var(--ct-dourado-linha); background: var(--ct-dourado-suave); }
    #usuariosTab .usr__caixa--difere:hover { background: var(--ct-atencao-suave); }

    #usuariosTab .usr__atalhos label { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ct-tinta-2); margin: 0; display: flex; align-items: center; gap: 6px; }
    #usuariosTab .usr__atalhos {
      display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
      margin: 0 0 14px; padding: 10px 12px; border-radius: 12px;
      background: var(--ct-rebaixo); border: 1px solid var(--ct-linha);
      font-size: 12.5px; color: var(--ct-tinta-2);
    }
    #usuariosTab .usr__atalhos select { padding: 5px 8px; font-size: 12.5px; max-width: 210px; }
    #usuariosTab .usr__link {
      border: 0; background: none; padding: 0; font-family: inherit; font-size: 12.5px;
      font-weight: 700; color: var(--ct-info); cursor: pointer; text-decoration: underline;
    }
    #usuariosTab .usr__link:hover { color: var(--ct-tinta); }

    /* ---- quem mudou o quê ----
       createTeamUser já grava updatedBy/updatedAt e senhaTrocadaPor/Em, e o
       adapter escreve em `eventos`. Nada disso era lido de volta - numa tela
       que controla acesso, é o registro que mais importa. */
    #usuariosTab .usr__registro {
      margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--ct-linha);
      font-size: 12px; color: var(--ct-tinta-3); line-height: 1.6;
    }
    #usuariosTab .usr__registro b { color: var(--ct-tinta-2); font-weight: 700; }

    /* ---- estado do login, e ligar/desligar o acesso ----
       Vermelho aqui e caro e por isso raro: ele so aparece quando ha algo
       ERRADO que alguem pode corrigir - cadastro sem login no Auth, ou acesso
       desligado. "Acesso ativo" e o normal, e normal nao pisca. */
    #usuariosTab .usr__alerta {
      display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px;
      border-radius: 999px; background: var(--ct-alerta-suave); color: var(--ct-alerta); white-space: nowrap;
    }
    #usuariosTab .usr__acesso {
      display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
      border-radius: 999px; background: var(--ct-rebaixo); color: var(--ct-tinta-3); white-space: nowrap;
    }
    #usuariosTab .usr__chip--alerta[aria-pressed="true"] { background: var(--ct-alerta); border-color: var(--ct-alerta); }

    #usuariosTab .usr__acesso__bloco {
      margin-top: 14px; padding: 12px 14px; border-radius: 12px;
      border: 1px solid var(--ct-linha); background: var(--ct-rebaixo);
    }
    #usuariosTab .usr__acesso__linha {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    }
    #usuariosTab .usr__acesso__estado {
      font-size: 12.5px; font-weight: 800; color: var(--ct-ok);
      padding: 2px 10px; border-radius: 999px; background: var(--ct-ok-suave);
    }
    #usuariosTab .usr__acesso__estado--off { color: var(--ct-alerta); background: var(--ct-alerta-suave); }
    #usuariosTab .usr__acesso__meta { font-size: 12px; color: var(--ct-tinta-3); }
    #usuariosTab .usr__acesso__linha .btn { margin-left: auto; }
    #usuariosTab .usr__acesso__aviso {
      font-size: 12.5px; line-height: 1.55; color: var(--ct-tinta-2);
    }
    #usuariosTab .usr__acesso__aviso--err { color: var(--ct-alerta); }

    /* ======================================================================
       ORÇAMENTOS PAGOS — a faixa, o descarte e a chegada no formulário
       ====================================================================== */
    /* A CHEGADA. "Cadastrar este orçamento" rolava para o topo da aba, que é o
       card de onde a pessoa acabou de clicar; o formulário ficava dois cards
       abaixo. Agora a rolagem para aqui, e este realce (que apaga sozinho) diz
       ao olho onde ela parou. */
    @keyframes orcChegou {
      from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-anel) 22%, transparent); border-color: var(--ct-anel); }
      to   { box-shadow: none; }
    }
    #cardNovoCliente.orc-chegou { animation: orcChegou 2.4s ease-out 1; }
    @media (prefers-reduced-motion: reduce) { #cardNovoCliente.orc-chegou { animation: none; } }

    .orcFaixa {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      padding: 11px 16px; border-radius: 12px; margin-bottom: 18px;
      background: var(--ct-info-suave); border: 1px solid var(--ct-info-linha);
      color: var(--ct-info); font-size: 13.5px; font-weight: 700;
    }
    .orcFaixa .btn { margin-left: auto; }

    /* O descarte: vermelho, porque é a única ação desta tela que tira algo de
       vista. Mas sem alarme — nada é apagado. */
    .orcDescarte {
      margin-top: 12px; padding: 13px 15px; border-radius: 12px;
      background: var(--ct-alerta-suave, var(--ct-alerta-suave)); border: 1px solid var(--ct-alerta-linha);
    }
    .orcDescarte h4 { margin: 0 0 4px; font-size: 13.5px; color: var(--ct-alerta, var(--ct-alerta)); }
    .orcDescarte p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--ct-tinta-2); }
    .orcDescarte .orcMotivos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
    .orcDescarte .orcMotivo {
      border: 1px solid var(--ct-alerta-linha); background: var(--ct-superficie); color: var(--ct-alerta, var(--ct-alerta));
      border-radius: 999px; padding: 3px 11px; font-family: inherit; font-size: 12px;
      cursor: pointer; font-weight: 700;
    }
    .orcDescarte .orcMotivo:hover { background: var(--ct-alerta-suave, var(--ct-alerta-suave)); }
    .orcDescarte input {
      width: 100%; font-family: inherit; font-size: 13px; padding: 8px 10px;
      border: 1px solid var(--ct-alerta-linha); border-radius: 9px; background: var(--ct-superficie); outline: 0;
    }
    .btn.btn-perigo {
      border-color: var(--ct-alerta-linha); background: var(--ct-superficie); color: var(--ct-alerta, var(--ct-alerta));
    }
    .btn.btn-perigo:hover { background: var(--ct-alerta-suave, var(--ct-alerta-suave)); }


    /* O CARD MARCADO PELO TECLADO (19/08/2026).

       Contorno, e nao fundo: o card ja usa fundo e borda para dizer estado
       (incompleto, arquivado, "mudou agora"), e mais uma cor de fundo disputaria
       com eles. O anel e o mesmo `--ct-anel` do foco do resto da tela, entao a
       marca do teclado se parece com o que o teclado ja desenha nos botoes.

       `outline` e nao `border` porque borda mudaria a altura do card, e a lista
       inteira daria um pulo de dois pixels a cada seta. */
    .ct-card--teclado { outline: 2px solid var(--ct-anel); outline-offset: 2px; }

    /* ==================== O MODO LISTA  (19/08/2026) =========================

       A MESMA FILA EM FORMA DE TABELA. Nao ha um segundo desenhista de card:
       `renderCardsList` monta o mesmo card de sempre e esta folha o reorganiza.
       Por isso todo o trabalho aqui e `display: contents` nos embrulhos, para
       que as PECAS do card (que ja tem nome desde 19/08) virem celulas da
       mesma grade.

       AS SETE COLUNAS, NA ORDEM DECIDIDA PELA DONA:
         3 placa · 4 auto · 5 orgao · 6 modalidade · 7 status · 8 relogio ·
         9 de quem e
       A 1 e a selecao para o lote e a 2 e o espaco dela; as tres ultimas sao o
       aviso do cadastro, a tag e o "Abrir card", que continuam funcionando.

       POR QUE AS SETE CABEM: o status e LISTA FECHADA de sete rotulos
       (`STATUS`, em ds/status-do-card.js), e o maior deles e "Aguardando
       julgamento", com 21 caracteres — dai o `21ch` da coluna 7. SE O STATUS
       VIRAR TEXTO LIVRE UM DIA, ESTA CONTA CAI e a coluna passa a cortar.

       AS COLUNAS SAO `max-content`, E NAO `fr`. Com `fr`, a linha se esticava
       para 1267px mesmo sem conteudo que pedisse isso — cada coluna abocanhava
       a sobra — e um laptop de 1280 ja comecava a rolar de lado. Medido na
       pagina de prova, com os sete cards da ordem.

       A ROLAGEM E DA LISTA, e nao da pagina: numa tela estreita as colunas
       continuam alinhadas e a lista rola de lado. Deixar quebrar linha faria
       cada card virar duas ou tres, que e exatamente o que o modo lista existe
       para evitar. */
    .result-list.ct-lista { overflow-x: auto; }
    .result-list.ct-lista .result-card {
      display: grid;
      grid-template-columns:
        auto                        /* 1  selecao para o lote */
        auto                        /* 2  folga da selecao    */
        minmax(8ch, max-content)    /* 3  placa               */
        minmax(12ch, max-content)   /* 4  auto                */
        minmax(8ch, max-content)    /* 5  orgao               */
        minmax(8ch, max-content)    /* 6  modalidade          */
        minmax(21ch, max-content)   /* 7  status              */
        minmax(16ch, max-content)   /* 8  relogio             */
        minmax(3ch, max-content)    /* 9  de quem e           */
        auto auto auto;             /* aviso, tag, abrir      */
      align-items: center;
      gap: 0 10px;
      padding: 3px 10px;
      margin-bottom: 3px;
      /* A LINHA NAO ENCOLHE ABAIXO DO QUE ELA E. Sem isto, as colunas se
         espremem para caber na largura da tela em vez de a lista rolar: a placa
         sai cortada e o texto vira reticencia em todo card. Medido: com 800px
         de tela e 12 colunas, a placa `RJU7B12` aparecia como `RJU`. */
      min-width: max-content;
    }
    /* Os embrulhos somem para que as pecas de dentro virem celulas. */
    .result-list.ct-lista .ct-card__head,
    .result-list.ct-lista .ct-titles,
    .result-list.ct-lista .ct-meta,
    .result-list.ct-lista .ct-card__head-fim { display: contents; }
    /* A linha fina deixa de ser "so no hover" — duas colunas moram nela. */
    .result-list.ct-lista .ct-card--compacto:not(.card-is-open) .ct-sub-extra,
    .result-list.ct-lista .ct-card--compacto:not(.card-is-open):hover .ct-sub-extra,
    .result-list.ct-lista .ct-card--compacto:not(.card-is-open):focus-within .ct-sub-extra { display: contents; }

    /* TUDO NA MESMA LINHA. Sem `grid-row`, a grade escolhe a linha sozinha na
       ordem do HTML — e a pastilha do relogio (coluna 8) vem DEPOIS da tag
       (coluna 11) no cabecalho, entao ela caia para uma segunda linha e o card
       virava um bloco de tres alturas. Foi o que a primeira medicao mostrou. */
    .result-list.ct-lista .ct-sel-wrap,
    .result-list.ct-lista .ct-plate,
    .result-list.ct-lista .ct-m--auto,
    .result-list.ct-lista .ct-m--orgao,
    .result-list.ct-lista .ct-m--modalidade,
    .result-list.ct-lista .ct-x--status,
    .result-list.ct-lista .ct-pas,
    .result-list.ct-lista .ct-x--dono,
    .result-list.ct-lista .ct-tag,
    .result-list.ct-lista .card-main-toggle { grid-row: 1; }

    .result-list.ct-lista .ct-sel-wrap { grid-column: 1; }
    .result-list.ct-lista .ct-plate { grid-column: 3; }
    .result-list.ct-lista .ct-m--auto { grid-column: 4; }
    .result-list.ct-lista .ct-m--orgao { grid-column: 5; }
    .result-list.ct-lista .ct-m--modalidade { grid-column: 6; }
    .result-list.ct-lista .ct-x--status { grid-column: 7; }
    /* O RELOGIO DA COLUNA E A MESMA PASTILHA DO CARD — o elemento, e nao uma
       copia da regra. Uma segunda conta de prazo desenhada so para a tabela
       divergiria da do card no primeiro ajuste. */
    .result-list.ct-lista .ct-pas:not(.ct-pas--aviso) { grid-column: 8; }
    .result-list.ct-lista .ct-x--dono { grid-column: 9; }
    .result-list.ct-lista .ct-pas--aviso { grid-column: 10; }
    .result-list.ct-lista .ct-tag { grid-column: 11; }
    .result-list.ct-lista .card-main-toggle { grid-column: 12; }
    /* Card aberto continua abrindo: o corpo ocupa a linha inteira embaixo. */
    .result-list.ct-lista .card-main-body { grid-column: 1 / -1; grid-row: 2; }

    /* O que nao e coluna sai de vista. Nada e removido do card — o mesmo card
       volta inteiro quando a escolha volta para "cards". */
    .result-list.ct-lista .ct-trilho,
    .result-list.ct-lista .ct-proto,
    .result-list.ct-lista .ct-proto-edit,
    .result-list.ct-lista .ct-nome,
    .result-list.ct-lista .ct-marcacao,
    .result-list.ct-lista .ct-orc-volta,
    .result-list.ct-lista .ct-sep,
    .result-list.ct-lista .ct-m--carimbo,
    .result-list.ct-lista .ct-m--idade,
    .result-list.ct-lista .ct-sub-extra > .ct-x:not(.ct-x--status):not(.ct-x--dono),
    .result-list.ct-lista .ct-x--dono > .ct-x-txt { display: none; }

    /* Uma linha e uma linha: nada quebra, e o que nao cabe corta com
       reticencias. O valor inteiro do auto continua no `title`. */
    .result-list.ct-lista .ct-m,
    .result-list.ct-lista .ct-x--status {
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      font-size: var(--ct-fs-meta); color: var(--ct-tinta-2);
    }
    /* DE QUEM E VAI COMO INICIAIS, com o nome inteiro no `title`. Card sem dono
       nao tem o atributo, e a celula fica vazia — de proposito. */
    .result-list.ct-lista .ct-x--dono::before {
      content: attr(data-iniciais);
      font-size: 11px; font-weight: 700; color: var(--ct-tinta-2);
    }
    /* A placa em tamanho menor, mas SEM `transform`: escala nao muda o lugar
       que o elemento ocupa, entao a coluna continuava do tamanho antigo. */
    .result-list.ct-lista .ct-plate { padding: 2px 6px; }
    .result-list.ct-lista .ct-plate b { font-size: 15px; letter-spacing: .5px; }
    .result-list.ct-lista .ct-plate small { font-size: 6px; }
    .result-list.ct-lista .ct-pas { white-space: nowrap; }

    /* As pecas com nome do cabecalho. No modo cards elas nao mudam nada: span
       e inline, e peca vazia nao ocupa lugar nenhum. */
    .ct-m, .ct-x { display: inline; }
    .ct-m:empty, .ct-x:empty { display: none; }

    /* O AVISO DO QUE VAI FALTAR NO CADASTRO (19/08/2026). O mesmo tom da
       pastilha "Falta..." do card, porque e o MESMO fato dito mais cedo: o que
       esta escrito aqui e o que a fila vai ler no card fechado. Nao pulsa e
       nao e erro — cadastro pela metade e permitido; a linha so tira a
       surpresa do caminho. */
    .ct-faltas {
      margin: 10px 0 0; padding: 9px 13px; border-radius: 10px;
      background: var(--ct-alerta-suave, var(--ct-alerta-suave));
      border: 1px solid var(--ct-alerta-linha);
      color: var(--ct-alerta, var(--ct-alerta));
      font-size: 12.5px; font-weight: 700; line-height: 1.5;
    }