/* =============================================================
   TIARAJU OS — Camada visual
   Fase 2 do redesign. Carregada DEPOIS de assets/style.css.

   COMO REVERTER UMA TELA: apague o bloco de <link> do <head>
   daquela tela. Nada aqui reescreve o CSS antigo, só sobrepõe.

   REGRA: nenhum id, classe, name de campo ou data-attribute
   muda de nome neste arquivo. Ele só redefine valores.

   Telas que já carregam esta camada:
     - historico.php
     - dashboard.php
     - relatorio.php
     - catalogo.php
     - cliente.php (Portal do Cliente)
     - clientes.php
     - negocio.php
     - tarefas.php
     - triagem_email.php
     - tarefa_publica.php (Portal de Acompanhamento)
     - login.php
     - trocar_senha.php
     - admin_backups.php
     - radar-publisher.php

   ─────────────────────────────────────────────────────────────
   COMO USAR ISTO EM COISA NOVA

   1) TELA NOVA — não herda sozinha. Cole no fim do <head>, DEPOIS
      do <style> da própria página:

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&family=Playfair+Display:wght@600;700&display=swap">
        <link rel="stylesheet" href="assets/tiaraju-os.css?v=<?php echo filemtime(__DIR__ . '/assets/tiaraju-os.css'); ?>">

      Tem que ser por ÚLTIMO. Antes do <style> da página, perde.

   2) ELEMENTO NOVO em tela que já carrega — herda, DESDE QUE:

      a) use uma classe que já existe. As prontas:
         botão .......... .btn .btn-primary | .btn-sm (secundário)
         cartão ......... .card | .panel
         painel ........  .form-card
         tabela ......... .hist-tabela, ou copie o padrão de <th>
         selo ........... .badge-pendente .badge-em_andamento
                          .badge-concluida .badge-cancelada
         filtro ......... .fbtn (+ .ativo)
         aviso .......... .flash-ok .flash-erro

      b) NÃO tenha style inline. Inline vence a folha, sempre.
         Foi o que deixou 94 atributos fora do sistema até serem
         corrigidos um a um.

      c) NÃO seja <button> ou <input> solto, sem classe nenhuma.
         O botão "Adicionar" do formulário de produto ficou cinza
         e sem folga por meses justamente por isso.

   3) COR NOVA — não invente. Use os tokens da seção 1:
        var(--tj-laranja)  texto, link, detalhe sobre claro
        var(--tj-laranja-solido)  preenchimento com texto branco
        var(--tj-carvao)   título e faixa de cabeçalho
        var(--tj-tinta)    texto corrido
        var(--tj-tinta-2)  texto secundário QUE CARREGA INFORMAÇÃO
        var(--tj-tinta-3/4) só decorativo: ponto, ícone, divisória
        var(--tj-borda)    toda linha e contorno
        var(--tj-verde/ambar-marca/azul/terra)  estado

   4) MEDIDAS: raio 6 (selo) / 8 (controle) / 10 (cartão).
      Altura de botão e campo: 38px. Textarea cresce.

   5) TABELA NOVA: acrescente-a à lista do bloco MOBILE, no fim
      deste arquivo. Sem isso o cabeçalho desalinha do corpo no
      celular — é um defeito do style.css antigo, não seu.
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   1. TOKENS
   Paleta vinda do carta-consultor-TEMPLATE.html. Os três
   estados derivados (âmbar, azul, terra) cobrem o que a Carta
   não precisava ter e substituem os tons de biblioteca.
   ───────────────────────────────────────────────────────────── */
:root {
    /* Marca */
    --tj-laranja:        #C85A2A;
    --tj-laranja-claro:  #E8724A;   /* também da Carta: laranja para fundo escuro */
    --tj-laranja-escuro: #A94A22;
    /* Preenchimento sólido que carrega texto branco. Branco sobre o
       laranja da marca dá 4,24:1 e fica abaixo do mínimo de leitura em
       corpo de botão. Este é o MESMO tom que a marca já usa no hover,
       não é cor nova, e leva o contraste a 5,7:1. O --tj-laranja segue
       sendo o laranja de texto, link, borda e detalhe sobre fundo claro. */
    --tj-laranja-solido: #A94A22;
    --tj-laranja-solido-hover: #8F3D1C;
    --tj-laranja-suave:  #FEF3EC;

    /* Tinta */
    --tj-carvao:         #1C1C1C;
    --tj-tinta:          #3A3A3A;
    /* A Carta traz --cinza-medio: #777, e ele funciona lá, em texto
       corrido de 15px. No sistema esse degrau carrega metadado de 11 e
       12px, e aí #777 dá 4,38:1 — fica logo abaixo do mínimo de leitura.
       Aqui ele desce um pouco e vai a 5,5:1, sem mudar de família. */
    --tj-tinta-2:        #6E6660;
    /* tinta-3 e tinta-4 são DECORATIVOS: ponto, ícone, placeholder,
       divisória. Sobre branco eles não passam de 3,3:1 e 2,2:1, e nenhum
       ajuste de tom resolve isso sem virar o próprio tinta-2. Então texto
       que carrega informação — rótulo, metadado, estado vazio — usa
       tinta-2, mesmo quando é secundário. */
    --tj-tinta-3:        #948B82;
    --tj-tinta-4:        #B3AAA1;

    /* Superfície — três níveis, do mais fundo ao mais à frente:
       fundo da página → corpo da coluna → card. Sem os três, coluna e
       fundo ficam quase da mesma cor e o quadro perde a estrutura. */
    --tj-fundo:          #F5F4F0;
    --tj-coluna:         #EDE9E1;
    --tj-card:           #FFFEFD;
    --tj-branco:         #FDFCFB;
    --tj-plano:          #EAE6DE;
    --tj-borda:          #E8E4DF;
    --tj-linha:          #EFEBE4;

    /* Faixa de título de coluna */
    --tj-cap:            #1C1C1C;
    --tj-cap-texto:      #FDFCFB;

    /* Estado — croma mais alto que a primeira versão e matizes mais
       afastadas. No tom anterior o verde e o azul eram dois cinzas
       levemente tingidos e não se distinguiam de relance. */
    --tj-verde:          #17794A;  --tj-verde-suave:  #E2F5E9;
    /* O âmbar precisa de DOIS tons, porque serve a dois usos com regras
       diferentes. Como TEXTO sobre fundo claro ele tem de alcançar
       4,5:1, e amarelo só chega lá indo fundo — daí o #96620E. Mas esse
       mesmo tom numa ESTRELA ou numa BOLINHA lê como marrom, e para
       elemento gráfico o mínimo é 3:1, não 4,5. Então a marca fica no
       tom vivo e só o texto vai fundo. Ele é dourado de verdade: num
       ponto de 8px e numa estrela, o que conta é ler como amarelo, e o
       significado ainda vem da legenda ao lado. */
    --tj-ambar:          #96620E;  --tj-ambar-suave:  #FCF1DF;
    --tj-ambar-marca:    #E09A12;
    --tj-azul:           #1C6FA6;  --tj-azul-suave:   #E3EFFA;
    --tj-terra:          #B3402B;  --tj-terra-suave:  #FBEDE9;
    --tj-roxo:           #6B4E8F;  --tj-roxo-suave:   #F0EBF6;

    /* Tipografia
       Playfair Display + Lato, do site institucional da Tiaraju.
       Lato NÃO tem pesos 500 nem 600 — só 100/300/400/700/900.
       Por isso o sistema é de dois pesos: 400 e 700. Pedir 500
       faria o navegador cair em 400 e a ênfase sumir. */
    --tj-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --tj-sans:  'Lato', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Raio: três valores, no lugar dos treze de hoje */
    --tj-r-chip: 6px;
    --tj-r-ctrl: 8px;
    --tj-r-card: 10px;

    /* ── Remapeamento das variáveis antigas ──────────────────
       O style.css já usa estes nomes em 35 lugares. Redefinindo
       aqui, aquelas regras passam a desenhar com a paleta nova
       sem que o arquivo antigo seja tocado. */
    --cor-principal:       var(--tj-laranja);
    --cor-principal-hover: var(--tj-laranja-escuro);
    --cor-fundo:           var(--tj-fundo);
    --cor-card:            var(--tj-branco);
    --cor-borda:           var(--tj-borda);
    --cor-texto:           var(--tj-tinta);
    --cor-texto-leve:      var(--tj-tinta-2);
    --radius:              var(--tj-r-card);
    --radius-sm:           var(--tj-r-ctrl);
    --shadow:              none;
    --shadow-sm:           none;
}

/* Modo escuro — quente, não cinza neutro.
   Precisa vir depois do html.dark do style.css: vem, porque
   este arquivo é carregado por último. */
html.dark {
    --tj-laranja:        #E0733F;
    --tj-laranja-claro:  #F08A5D;   /* sobe um degrau: na faixa escura o tom
                                       claro do modo claro ficava em 4,45:1 */
    --tj-laranja-escuro: #F0916A;
    --tj-laranja-suave:  #33231A;

    --tj-carvao:         #F0ECE6;
    --tj-tinta:          #D6CFC6;
    --tj-tinta-2:        #9E958B;
    --tj-tinta-3:        #8B8279;
    --tj-tinta-4:        #6E665E;

    --tj-fundo:          #171614;
    --tj-coluna:         #1E1C1A;
    --tj-card:           #2A2724;
    --tj-branco:         #201E1B;
    --tj-plano:          #2E2A26;
    --tj-borda:          #35312C;
    --tj-linha:          #2A2723;

    /* No escuro a faixa não pode ser preta: seria invisível sobre a
       coluna. Ela clareia, e o texto inverte. */
    --tj-cap:            #322E29;
    --tj-cap-texto:      #F0ECE6;

    --tj-verde:          #5FC48D;  --tj-verde-suave:  #162C20;
    --tj-ambar:          #DFAC4E;  --tj-ambar-suave:  #2E2617;
    --tj-ambar-marca:    #F0BE5C;
    --tj-azul:           #63B0E8;  --tj-azul-suave:   #16242F;
    --tj-terra:          #E07156;  --tj-terra-suave:  #2E1C17;
    --tj-roxo:           #A98CC9;  --tj-roxo-suave:   #241D2E;

    --cor-fundo:      var(--tj-fundo);
    --cor-card:       var(--tj-branco);
    --cor-borda:      var(--tj-borda);
    --cor-texto:      var(--tj-tinta);
    --cor-texto-leve: var(--tj-tinta-2);
}


/* ─────────────────────────────────────────────────────────────
   2. BASE
   Degraus conferidos para Lato, não copiados do estudo:
   Lato tem desenho mais estreito e altura-x menor que a fonte
   da premissa antiga, então o corpo sobe ~0.5px e a entrelinha
   desce, porque a própria fonte já traz caixa alta de linha.
   ───────────────────────────────────────────────────────────── */
body {
    font-family: var(--tj-sans);
    background: var(--tj-fundo);
    color: var(--tj-tinta);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
    font-family: var(--tj-serif);
    font-weight: 600;
    color: var(--tj-carvao);
    letter-spacing: -.2px;
}
/* O style.css tem `html.dark h1, h2...` e `html.dark table`, que são
   mais específicos que um seletor de classe simples e trariam de volta
   os cinzas frios (#e8e8e8, #242424) por cima da paleta quente.
   Precisam ser respondidos no mesmo nível de especificidade. */
html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5 { color: var(--tj-carvao); }
html.dark table { background: transparent; }

a { color: var(--tj-laranja); }
a:hover { color: var(--tj-laranja-escuro); }

:focus-visible {
    outline: 2px solid var(--tj-laranja);
    outline-offset: 2px;
    border-radius: 3px;
}


/* ─────────────────────────────────────────────────────────────
   3. CABEÇALHO
   A marcação não muda: os <a class="btn-sm"> continuam sendo
   btn-sm. Só deixam de ser desenhados como sete pílulas.
   ───────────────────────────────────────────────────────────── */
.header {
    background: var(--tj-branco);
    border-bottom: 1px solid var(--tj-borda);
    padding: 13px 28px;
}
html.dark .header { background: var(--tj-branco); border-color: var(--tj-borda); }

/* O Kanban tem 13 itens de menu, o Histórico tem 6. O espaçamento precisa
   servir aos dois: rola na horizontal quando não cabe, em vez de quebrar. */
.header-right {
    gap: 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.header-right::-webkit-scrollbar { display: none; }

.header-right .btn-sm {
    padding: 0 0 2px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    font-family: var(--tj-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--tj-tinta-2);
    text-decoration: none;
    transition: color .15s, border-color .15s;
    /* Sem isto o emoji de itens como "⬇ Exportar" quebra para a linha
       de cima e o menu vira duas alturas. */
    white-space: nowrap;
    flex-shrink: 0;
}
.header-right .btn-sm:hover {
    color: var(--tj-laranja);
    border-bottom-color: var(--tj-laranja);
    text-decoration: none;
}
html.dark .header-right .btn-sm { background: none; border-color: transparent; color: var(--tj-tinta-2); }
html.dark .header-right .btn-sm:hover { color: var(--tj-laranja); border-bottom-color: var(--tj-laranja); }

/* Item da tela atual: o link que aponta para a própria página */
.header-right .btn-sm[aria-current="page"] {
    color: var(--tj-carvao);
    font-weight: 700;
    border-bottom-color: var(--tj-laranja);
}

/* Sair não é um destino como os outros: ganha uma divisória à esquerda
   para deixar a fila de navegação em vez de virar mais um item dela. */
.header-right .btn-logout {
    padding: 2px 0 2px 20px;
    background: none;
    border: none;
    border-left: 1px solid var(--tj-borda);
    border-radius: 0;
    font-size: 12px;
    color: var(--tj-tinta-2);
}
html.dark .header-right .btn-logout { border-left: 1px solid var(--tj-borda); }
.header-right .btn-logout:hover { background: none; color: var(--tj-laranja); }
html.dark .header-right .btn-logout { background: none; color: var(--tj-tinta-2); }


/* ─────────────────────────────────────────────────────────────
   4. BOTÕES — três papéis
   ───────────────────────────────────────────────────────────── */
.btn-primary,
.btn.btn-primary {
    background: var(--tj-laranja-solido);
    color: #fff;
    padding: 11px 20px;
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1px;
}
.btn-primary:hover { background: var(--tj-laranja-solido-hover); }


/* ─────────────────────────────────────────────────────────────
   5. CAMPOS
   ───────────────────────────────────────────────────────────── */
/* background-COLOR, nunca o atalho `background`: o atalho zera
   background-image, e há campo no sistema que carrega o próprio ícone
   de lupa como background url() — o Portal do Cliente é um deles.
   Com o atalho, o ícone sumiria sem nenhum aviso. */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea {
    font-family: var(--tj-sans);
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    background-color: var(--tj-branco);
    color: var(--tj-tinta);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--tj-laranja);
    box-shadow: 0 0 0 3px var(--tj-laranja-suave);
}
::placeholder { color: var(--tj-tinta-4); opacity: 1; }

/* ── Restauração de estados de campo ──────────────────────────
   A regra global acima tem especificidade (0,3,1), por causa dos três
   :not(). Isso empata com regras de ESTADO que as telas já tinham —
   como o campo de busca que fica laranja quando um produto foi
   escolhido — e, empatando, a folha carregada por último vence. Sem
   estas três linhas o usuário perde o aviso visual de "já selecionei",
   que é justamente o retorno de uma ação dele. Não é estilo novo: é o
   comportamento antigo devolvido, na paleta nova. */
.prod-search-wrap input[type="text"].selecionado,
.neg-busca.selecionado {
    border-color: var(--tj-laranja) !important;
    background-color: var(--tj-laranja-suave) !important;
}
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html.dark select,
html.dark textarea { background-color: var(--tj-branco); border-color: var(--tj-borda); color: var(--tj-tinta); }


/* ─────────────────────────────────────────────────────────────
   6. PAINEL LATERAL (_painel.php)
   Renderiza junto com a tela, então entra no mesmo passe.
   ───────────────────────────────────────────────────────────── */
#painelLateral { background: var(--tj-branco); border-left: 1px solid var(--tj-borda); }
html.dark #painelLateral { background: var(--tj-branco); border-color: var(--tj-borda); }

.painel-tabs { background: var(--tj-fundo); border-bottom: 1px solid var(--tj-borda); }
html.dark .painel-tabs { background: var(--tj-fundo); border-color: var(--tj-borda); }

.painel-tab {
    font-family: var(--tj-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--tj-tinta-2);
}
.painel-tab-ativo {
    color: var(--tj-carvao);
    background: var(--tj-branco);
    border-bottom: 2px solid var(--tj-laranja);
}
html.dark .painel-tab { color: var(--tj-tinta-2); }
html.dark .painel-tab-ativo { color: var(--tj-carvao); background: var(--tj-branco); }

.painel-sol-item, .painel-pin-card { border-bottom: 1px solid var(--tj-linha); }
.painel-sol-item:hover, .painel-pin-header:hover { background: var(--tj-laranja-suave); }
html.dark .painel-sol-item, html.dark .painel-pin-card { border-color: var(--tj-linha); }
html.dark .painel-sol-item:hover, html.dark .painel-pin-header:hover { background: var(--tj-plano); }

.painel-sol-nome, .painel-pin-nome { color: var(--tj-carvao); font-weight: 700; }
.painel-sol-emp, .painel-pin-emp, .painel-sol-msg, .painel-sol-dt { color: var(--tj-tinta-2); }
html.dark .painel-sol-nome, html.dark .painel-pin-nome { color: var(--tj-carvao); }
html.dark .painel-sol-msg { color: var(--tj-tinta-2); }

.painel-s-nova         { background: var(--tj-ambar-suave); color: var(--tj-ambar); }
.painel-s-em_andamento { background: var(--tj-azul-suave);  color: var(--tj-azul); }
.painel-sol-vazio-ok   { color: var(--tj-verde); }
html.dark .painel-sol-vazio-ok { color: var(--tj-verde); }

.painel-acao-btn {
    background: var(--tj-plano);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-chip);
    color: var(--tj-tinta);
}
.painel-acao-btn:hover { border-color: var(--tj-laranja); color: var(--tj-laranja); }
.painel-acao-dest { background: var(--tj-laranja-solido); color: #fff !important; border-color: var(--tj-laranja-solido); }
html.dark .painel-acao-btn { background: var(--tj-plano); border-color: var(--tj-borda); color: var(--tj-tinta); }

.painel-pin-tarefa { background: var(--tj-fundo); border-radius: var(--tj-r-chip); }
.painel-pin-tarefa.status-pendente     { border-color: var(--tj-ambar-marca); }
.painel-pin-tarefa.status-em_andamento { border-color: var(--tj-azul); }
html.dark .painel-pin-tarefa { background: var(--tj-plano); }

.btn-pin:hover, .btn-pin.ativo { color: var(--tj-ambar-marca); }
#btnPainelMob { background: var(--tj-laranja-solido); box-shadow: 0 3px 12px rgba(28,28,28,.28); }


/* =============================================================
   TELA: HISTÓRICO (historico.php)

   Ganchos de JS desta tela — nenhum é tocado abaixo:
     ids     #resultadoItens  #contadorItens  #buscaItens
             #buscaGlobal     #buscaCliente   #clientesVazio
     classe  .linha-cliente         (querySelectorAll)
     dado    data-nome              (tr.dataset.nome)

   Classes que o JS ESCREVE via innerHTML e que precisam
   continuar existindo com o mesmo nome:
     .hist-tabela  .hist-vazio  .clicavel  .col-nome
     .col-num      .valor-final  <mark>

   O JS também faz tr.style.display = '' / 'none' nas linhas de
   cliente. Por isso nenhuma regra aqui define `display` em
   tr.linha-cliente: se definisse, o reset para '' cairia no
   valor daqui em vez do padrão table-row.
   ============================================================= */

.page-content { padding: 28px 24px 40px; }

/* ── Topo ───────────────────────────────────────────────── */
.hist-topo { gap: 14px; margin-bottom: 22px; align-items: flex-end; }
.hist-topo h1 {
    font-family: var(--tj-serif);
    font-size: 29px;
    font-weight: 600;
    line-height: 1.12;
    color: var(--tj-carvao);
    letter-spacing: -.3px;
}
.hist-voltar {
    font-family: var(--tj-sans);
    font-size: 12.5px;
    color: var(--tj-tinta-2);
    text-decoration: none;
}
.hist-voltar:hover { color: var(--tj-laranja); text-decoration: none; }

.hist-sel {
    padding: 8px 12px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    background: var(--tj-branco);
    color: var(--tj-tinta);
    font-family: var(--tj-sans);
    font-size: 13px;
}

/* ── Faixa de resumo ────────────────────────────────────── */
.hist-resumo {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: none;
    padding: 18px 22px;
    gap: 40px;
    margin-bottom: 22px;
}
html.dark .hist-resumo { background: var(--tj-branco); }
.hist-resumo-label {
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    color: var(--tj-tinta-2);
}
.hist-resumo-valor {
    font-family: var(--tj-serif);
    font-size: 25px;
    font-weight: 600;
    color: var(--tj-carvao);
    line-height: 1.15;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.hist-resumo-valor.destaque { color: var(--tj-laranja); }

/* ── Blocos ─────────────────────────────────────────────── */
.hist-bloco {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: none;
    padding: 22px 24px 24px;
    margin-bottom: 20px;
}
html.dark .hist-bloco { background: var(--tj-branco); }
.hist-bloco h2 {
    font-family: var(--tj-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--tj-carvao);
    letter-spacing: -.1px;
    margin-bottom: 3px;
}
.hist-bloco-sub {
    font-family: var(--tj-sans);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--tj-tinta-2);
    margin-bottom: 16px;
}
.hist-bloco-sub em { font-style: italic; color: var(--tj-tinta); }
html.dark .hist-bloco-sub { color: var(--tj-tinta-2); }

/* ── Busca ──────────────────────────────────────────────── */
.hist-busca {
    padding: 9px 15px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    background: var(--tj-branco);
    color: var(--tj-tinta);
    font-family: var(--tj-sans);
    font-size: 14px;
}
.hist-busca:focus {
    border-color: var(--tj-laranja);
    box-shadow: 0 0 0 3px var(--tj-laranja-suave);
}
.hist-contador {
    font-family: var(--tj-sans);
    font-size: 12.5px;
    color: var(--tj-tinta-2);
    margin: 14px 0 10px;
}
.hist-contador strong { color: var(--tj-laranja); font-weight: 700; }

/* ── Tabela ─────────────────────────────────────────────── */
table.hist-tabela {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border-collapse: collapse;
}
table.hist-tabela th {
    background: var(--tj-carvao);
    color: var(--tj-branco);
    font-family: var(--tj-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 11px 14px;
    border-bottom: none;
    white-space: nowrap;
}
table.hist-tabela thead tr th:first-child { border-radius: var(--tj-r-chip) 0 0 0; }
table.hist-tabela thead tr th:last-child  { border-radius: 0 var(--tj-r-chip) 0 0; }
html.dark table.hist-tabela th { background: var(--tj-carvao); color: var(--tj-fundo); border-color: transparent; }

/* Sem `color` aqui de propósito: um td genérico com classe venceria
   .col-nome e .valor-final na cascata e apagaria o destaque. A cor do
   texto comum vem por herança do body. No modo escuro a regra precisa
   existir para vencer o `html.dark td` do style.css, e aí os dois
   modificadores voltam com especificidade equivalente. */
table.hist-tabela td {
    font-family: var(--tj-sans);
    font-size: 13.5px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--tj-linha);
}
html.dark table.hist-tabela td { color: var(--tj-tinta); border-color: var(--tj-linha); }

/* O zebrado sai: era um dos sinais concorrentes.
   Precisa de !important porque o style.css marca o hover assim. */
table.hist-tabela tbody tr:nth-child(even) td { background: transparent !important; }
table.hist-tabela tbody tr:hover td { background: transparent !important; }
table.hist-tabela tbody tr.clicavel:hover td { background: var(--tj-laranja-suave) !important; }
html.dark table.hist-tabela tbody tr:nth-child(even) td { background: transparent !important; }
html.dark table.hist-tabela tbody tr.clicavel:hover td { background: var(--tj-plano) !important; }

/* .col-nome aparece de duas formas: como classe do próprio td (lista de
   clientes e tabela montada pelo JS) e como div dentro do td (tabela de
   negócios). As duas precisam de regra. */
.col-nome { font-weight: 700; color: var(--tj-carvao); }
table.hist-tabela td.col-nome { font-weight: 700; color: var(--tj-carvao); }
html.dark table.hist-tabela td.col-nome { color: var(--tj-carvao); }

.col-sub {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--tj-tinta-2);
    margin-top: 2px;
}
.col-num { font-variant-numeric: tabular-nums; }

.valor-final { font-weight: 700; color: var(--tj-laranja); font-variant-numeric: tabular-nums; }
table.hist-tabela td.valor-final { font-weight: 700; color: var(--tj-laranja); }
html.dark table.hist-tabela td.valor-final { color: var(--tj-laranja); }

/* ── Chip de etapa ──────────────────────────────────────────
   A cor vem de $etapaCor no PHP, escrita como style inline na
   marcação. Como não mexemos em PHP nesta rodada, a cor é
   trocada casando o hex que o PHP escreve. O casamento é seguro
   porque o template gera sempre a mesma string, sem espaços.
   Quando quiser, isso vira uma edição de 6 linhas no array e
   estas regras podem sair.                                    */
.etapa-chip {
    font-family: var(--tj-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--tj-r-chip);
}
.etapa-chip[style*="#f3f4f6"] { background: var(--tj-plano)       !important; color: var(--tj-tinta-2) !important; }
.etapa-chip[style*="#dbeafe"] { background: var(--tj-azul-suave)  !important; color: var(--tj-azul)    !important; }
.etapa-chip[style*="#ede9fe"] { background: var(--tj-roxo-suave)  !important; color: var(--tj-roxo)    !important; }
.etapa-chip[style*="#fef3c7"] { background: var(--tj-ambar-suave) !important; color: var(--tj-ambar)   !important; }
.etapa-chip[style*="#d1fae5"] { background: var(--tj-verde-suave) !important; color: var(--tj-verde)   !important; }
.etapa-chip[style*="#fee2e2"] { background: var(--tj-terra-suave) !important; color: var(--tj-terra)   !important; }

/* ── Destaque da busca e vazio ──────────────────────────── */
mark {
    background: var(--tj-laranja-suave);
    color: var(--tj-carvao);
    font-weight: 700;
    padding: 0 2px;
    border-radius: 3px;
}
html.dark mark { background: var(--tj-laranja-suave); color: var(--tj-laranja-escuro); }

.hist-vazio {
    font-family: var(--tj-sans);
    font-size: 13px;
    color: var(--tj-tinta-2);
    padding: 22px 4px;
}

/* Coluna "Tipo" da lista de clientes: o #888 vem inline do PHP */
table.hist-tabela td[style*="color:#888"] { color: var(--tj-tinta-2) !important; }


/* =============================================================
   TELA: KANBAN (dashboard.php)

   Ganchos de JS desta tela — nenhum é tocado abaixo:
     ids     #btnPago  #btnCancelado  #btnDarkMode  #conteudoPrincipal
             #modalNovo  #modalImportarNegocios  #formNovoNeg
             #novaEmpresaForm  #novaEmpresaNome  #novoEmpresaId
             #novoContatoForm  #novoContatoNome  #novoContatoId
             #selEmpresa  #selContato
     dados   data-col   (querySelector('[data-col="pago"]'))
             data-nid   (botão de fixar no painel)
     funções toggleColuna()  toggleDark()  fecharModalNovo()
             painelPinToggle()

   DUAS COISAS QUE NÃO PODEM SER MEXIDAS AQUI:

   1. `display` em .kanban-col. O JS faz colEl.style.display = 'none' / ''
      para esconder as colunas Pagos e Cancelados, e guarda a escolha no
      localStorage. Se esta camada definisse display na coluna, o reset
      para '' cairia no valor daqui e a coluna não voltaria.
   2. `display` em .modal-overlay. O JS abre o modal com
      classList.add('open'), e quem mostra é a regra .modal-overlay.open
      { display:flex } do próprio dashboard.

   Os modais ficam fora deste passe de propósito: #modalNovo é posicionado
   por style inline e controlado por JS. Os campos dentro dele já pegam o
   estilo novo pela regra global de input/select/textarea.
   ============================================================= */

/* O style.css centraliza as colunas com justify-content:center e ainda deixa
   overflow-x:auto. Quando as colunas passam da largura da tela, a parte que
   sobra à ESQUERDA fica inalcançável pela rolagem — a primeira coluna some
   pela borda. Alinhar ao início resolve e não muda nada quando tudo cabe. */
.kanban-wrapper {
    justify-content: flex-start;
    padding: 24px 24px 32px;
    gap: 18px;
}

/* Sem `display` aqui — ver observação 1 acima. */
.kanban-col {
    background: var(--tj-coluna);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: none;
    overflow: hidden;          /* faz a faixa escura respeitar o canto arredondado */
}
html.dark .kanban-col { background: var(--tj-coluna); border-color: var(--tj-borda); }

/* A faixa de título: é ela que dá o destaque que faltava e amarra o quadro
   ao cabeçalho das tabelas do resto do sistema. */
.kanban-col-header {
    background: var(--tj-cap);
    padding: 11px 15px;
    border-bottom: none;
}
html.dark .kanban-col-header { background: var(--tj-cap); }

/* A regra base manda Playfair em h1..h5. Aqui o h2 é rótulo de coluna,
   não título: volta para a sans em caixa alta. */
.kanban-col-header h2 {
    font-family: var(--tj-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--tj-cap-texto);
}
html.dark .kanban-col-header h2 { color: var(--tj-cap-texto); }

.col-count {
    background: rgba(255,255,255,.14);
    color: var(--tj-cap-texto);
    font-family: var(--tj-sans);
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
html.dark .col-count { background: rgba(255,255,255,.12); color: var(--tj-cap-texto); }

/* O laranja da marca não tem contraste sobre a faixa escura;
   o laranja-claro da Carta tem. */
.col-total {
    font-family: var(--tj-sans);
    font-size: 12px;
    font-weight: 700;
    color: var(--tj-laranja-claro);
    font-variant-numeric: tabular-nums;
}

.kanban-cards { padding: 10px 12px 12px; }

/* Nível de frente: o card é a superfície mais clara do quadro. */
.card {
    background: var(--tj-card);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    padding: 13px 14px;
    margin-bottom: 9px;
    box-shadow: none;
    transition: border-color .15s, background .15s;
}
.card:hover {
    background: var(--tj-laranja-suave);
    border-color: var(--tj-laranja);
    box-shadow: none;
}
html.dark .card { background: var(--tj-card); border-color: var(--tj-borda); }
html.dark .card:hover { background: var(--tj-plano); border-color: var(--tj-laranja); }

.card-title {
    font-family: var(--tj-sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tj-carvao);
    margin-bottom: 3px;
}
html.dark .card-title { color: var(--tj-carvao); }

.card-meta {
    font-family: var(--tj-sans);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--tj-tinta-2);
}
/* No escuro o tinta-3 sobre o card dá 4,4:1, abaixo do mínimo de leitura.
   Um degrau acima resolve sem clarear o card. */
html.dark .card-meta { color: var(--tj-tinta-2); }

/* O valor é o dado que se procura no card: ganha a serifa, como na Carta */
.card-valor {
    font-family: var(--tj-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--tj-laranja);
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}

/* Estados — mesmas classes, cores da marca */
.badge {
    font-family: var(--tj-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 9px;
    border-radius: var(--tj-r-chip);
    margin-top: 9px;
}
.badge-pendente     { background: var(--tj-ambar-suave); color: var(--tj-ambar); }
.badge-em_andamento { background: var(--tj-azul-suave);  color: var(--tj-azul); }
.badge-concluida    { background: var(--tj-verde-suave); color: var(--tj-verde); }
.badge-cancelada    { background: var(--tj-plano);       color: var(--tj-tinta-2); }

/* Faixa de aviso no topo */
.flash-bar {
    font-family: var(--tj-sans);
    font-size: 13px;
    padding: 12px 28px;
}
.flash-ok   { background: var(--tj-verde-suave); color: var(--tj-verde); }
.flash-erro { background: var(--tj-terra-suave); color: var(--tj-terra); }

/* Botões de mostrar/esconder coluna. O JS reescreve o textContent deles
   ('● Pagos' / '○ Cancelados'), então nada aqui depende do conteúdo. */
#btnPago, #btnCancelado, #btnDarkMode {
    font-family: var(--tj-sans);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--tj-tinta-2);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0 0 2px;
}
#btnPago:hover, #btnCancelado:hover, #btnDarkMode:hover {
    color: var(--tj-laranja);
    border-bottom-color: var(--tj-laranja);
}
html.dark #btnDarkMode { background: none; border-color: transparent; color: var(--tj-tinta-2); }


/* =============================================================
   TELA: RELATÓRIO (relatorio.php)

   Ganchos de JS desta tela — nenhum é tocado abaixo:
     ids       #formRelatorio  #briefOverlay  #briefGo  #briefSkip
               #btnNarrativa   #narrativaTexto  #narrativaStatus
               #narrativaAutoSaveInfo  #pdfStatus
     dinâmicos #vant_<id>  #custo_<id>   (montados em tempo de execução)
               #ftTotalEntregue  #ftEconomia  #ftInvestimento
     classes   .tipo-item-sel   (querySelectorAll do cálculo)
               .brief-ctx       (querySelectorAll dentro do #briefOverlay)
     dados     data-prod-id  data-mercado  data-final  data-id

   NÃO MEXER EM `display` NO #briefOverlay: o JS abre e fecha o briefing
   com style.display = 'flex' / 'none'. Só a aparência entra aqui.

   SOBRE O CÁLCULO: a função calcularTotais() e os ganchos #vant_<id>,
   #custo_<id>, #ftTotalEntregue, #ftEconomia, #ftInvestimento e
   .tipo-item-sel NÃO existem na marcação atual e nada chama a função —
   é código morto de uma versão anterior da tela. Os totais de hoje são
   calculados em PHP e impressos estáticos. Nada aqui depende disso, e
   nada aqui foi removido: se a função voltar a ser usada, encontra
   tudo com o mesmo nome.

   Por isso o verde do item incluso vem do PHP como texto literal
   (style="...color:#27ae60;"), e não do JS. Como a string é sempre a
   mesma, casar por ela é seguro e o tom entra na paleta sem tocar no
   PHP — mesma técnica dos chips de etapa do Histórico.
   ============================================================= */

/* ── Seletor de tipo de relatório ───────────────────────── */
.tipo-tabs { margin-bottom: 26px; }
.tipo-tab {
    background: var(--tj-branco);
    border: 1.5px solid var(--tj-borda);
    font-family: var(--tj-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--tj-tinta-2);
    padding: 10px 20px;
}
.tipo-tab + .tipo-tab { border-left: none; }
.tipo-tab:first-child { border-radius: var(--tj-r-ctrl) 0 0 var(--tj-r-ctrl); }
.tipo-tab:last-child  { border-radius: 0 var(--tj-r-ctrl) var(--tj-r-ctrl) 0; }
.tipo-tab:hover { color: var(--tj-laranja); }
.tipo-tab.active {
    background: var(--tj-laranja-solido);
    border-color: var(--tj-laranja-solido);
    color: #fff;
    font-weight: 700;
}
html.dark .tipo-tab { background: var(--tj-branco); border-color: var(--tj-borda); color: var(--tj-tinta-2); }
/* No escuro o --tj-laranja é o tom clareado (#E0733F): com texto branco
   por cima ele cai para 3,1:1. O preenchimento sólido é o mesmo dos
   outros botões, que sobre página escura continua legível. */
html.dark .tipo-tab.active { background: var(--tj-laranja-solido); border-color: var(--tj-laranja-solido); color: #fff; }

/* ── Painéis ────────────────────────────────────────────── */
.panel {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: none;
    padding: 22px 24px;
    margin-bottom: 20px;
}
html.dark .panel { background: var(--tj-branco); border-color: var(--tj-borda); box-shadow: none; }

.panel-title {
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--tj-laranja);
    margin-bottom: 16px;
}
html.dark .panel-title { color: var(--tj-laranja); }

.client-item label {
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--tj-tinta-2);
    margin-bottom: 3px;
}
.client-item span { color: var(--tj-carvao); font-weight: 700; }
html.dark .client-item label { color: var(--tj-tinta-2); }
html.dark .client-item span  { color: var(--tj-carvao); }

/* ── Tabela de prévia ───────────────────────────────────── */
/* O #3a3530 daqui foi a origem da faixa escura do resto do sistema.
   Agora ele vira o mesmo carvão das outras telas. */
table.prev-table th {
    background: var(--tj-cap);
    color: var(--tj-cap-texto);
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 11px 10px;
}
html.dark table.prev-table th { background: var(--tj-cap); color: var(--tj-cap-texto); }

table.prev-table td {
    font-family: var(--tj-sans);
    font-size: 12.5px;
    padding: 11px 10px;
    border-bottom: 1px solid var(--tj-linha);
}
html.dark table.prev-table td { color: var(--tj-tinta); border-color: var(--tj-linha); }
/* Zebrado sai, como nas outras tabelas */
table.prev-table tr:nth-child(even) td { background: transparent; }
html.dark table.prev-table tr:nth-child(even) td { background: transparent; }

/* Item incluso no fee: o verde literal do PHP entra na paleta. */
table.prev-table td[style*="#27ae60"] { color: var(--tj-verde) !important; }
/* Cinzas inline da mesma tabela. No escuro sobem um degrau: o tom mais
   fraco da paleta dá 2,95:1 sobre o painel e a numeração some. */
table.prev-table td[style*="color:#bbb"] { color: var(--tj-tinta-2) !important; }
table.prev-table td[style*="color:#666"] { color: var(--tj-tinta-2) !important; }
html.dark table.prev-table td[style*="color:#bbb"],
html.dark table.prev-table td[style*="color:#666"] { color: var(--tj-tinta-2) !important; }

.tipo-item-sel {
    font-family: var(--tj-sans);
    font-size: 11.5px;
    padding: 5px 8px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-chip);
    background: var(--tj-branco);
    color: var(--tj-tinta);
}
html.dark .tipo-item-sel { background: var(--tj-branco); border-color: var(--tj-borda); color: var(--tj-tinta); }

/* ── Rodapé financeiro ──────────────────────────────────── */
/* Três colunas em escala de ênfase: o que foi entregue, o que foi
   poupado, e o que se paga. A última é a que importa, e fica laranja. */
.footer-fin { border-radius: var(--tj-r-ctrl); overflow: hidden; margin-top: 18px; }
.footer-fin-col { padding: 16px 18px; }
.footer-fin-col:nth-child(1) { background: var(--tj-cap);   color: var(--tj-cap-texto); }
.footer-fin-col:nth-child(2) { background: var(--tj-plano); color: var(--tj-tinta); }
/* Laranja escuro, não o da marca: branco sobre #C85A2A dá 4,24:1 e o
   rótulo de 9px não se lê. Sobre o escuro dá 5,7:1 e continua sendo laranja. */
.footer-fin-col:nth-child(3) { background: var(--tj-laranja-escuro); color: #fff; }
.footer-fin-label {
    font-family: var(--tj-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 1;
    margin-bottom: 6px;
}
/* A opacidade sai e a hierarquia do rótulo passa a ser feita por cor,
   para o contraste ficar controlado em cada uma das três faixas. */
.footer-fin-col:nth-child(1) .footer-fin-label { color: rgba(253,252,251,.72); }
/* O cinza-médio sobre o plano claro dá 3,6:1. Aqui a hierarquia entre
   rótulo e valor vem do tamanho e da caixa alta, não de clarear a cor. */
.footer-fin-col:nth-child(2) .footer-fin-label { color: var(--tj-tinta); }
.footer-fin-col:nth-child(3) .footer-fin-label { color: rgba(255,255,255,.85); }
.footer-fin-value {
    font-family: var(--tj-serif);
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Campos e narrativa ─────────────────────────────────── */
.campo-linha label {
    font-family: var(--tj-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tj-tinta-2);
}
html.dark .campo-linha label { color: var(--tj-tinta-2); }
.campo-linha input {
    padding: 9px 13px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
}

.narrativa-area {
    padding: 14px 15px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    background: var(--tj-branco);
    color: var(--tj-tinta);
    font-family: var(--tj-sans);
    font-size: 13.5px;
    line-height: 1.75;
}
.narrativa-area:focus {
    outline: none;
    border-color: var(--tj-laranja);
    box-shadow: 0 0 0 3px var(--tj-laranja-suave);
}
html.dark .narrativa-area { background: var(--tj-branco); border-color: var(--tj-borda); color: var(--tj-tinta); }

.hint { font-family: var(--tj-sans); font-size: 11.5px; color: var(--tj-tinta-2); }
html.dark .hint { color: var(--tj-tinta-2); }

/* ── Ações ──────────────────────────────────────────────── */
/* O roxo marca "isto chama a IA", e é o mesmo roxo do chip de etapa. */
.btn-ia {
    background: var(--tj-roxo);
    color: #fff;
    border-radius: var(--tj-r-ctrl);
    padding: 11px 20px;
    font-family: var(--tj-sans);
    font-size: 13px;
    font-weight: 700;
}
.btn-ia:hover { background: #58407A; }
html.dark .btn-ia { color: #1C1C1C; }
html.dark .btn-ia:hover { background: #BFA5D8; }

/* Padding vertical zerado de propósito: quem define a altura é o
   min-height do bloco de controle. Com 13px de padding este botão
   saía em 40 e ficava 2px mais alto que todos os outros — diferença
   pequena demais para parecer intenção e grande demais para passar. */
.btn-pdf {
    background: var(--tj-laranja-solido);
    color: #fff;
    border-radius: var(--tj-r-ctrl);
    padding: 0 28px;
    font-family: var(--tj-sans);
    font-size: 13.5px;
    font-weight: 700;
}
.btn-pdf:hover { background: var(--tj-laranja-solido-hover); }

/* ── Modal de briefing ──────────────────────────────────── */
/* Sem `display` no .brief-overlay — ver observação no topo do bloco. */
.brief-overlay { background: rgba(28,28,28,.5); }
.brief-modal {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: 0 18px 50px rgba(28,28,28,.18);
}
html.dark .brief-modal { background: var(--tj-branco); border-color: var(--tj-borda); }
.brief-head, .brief-foot { border-color: var(--tj-borda); }
html.dark .brief-head, html.dark .brief-foot { border-color: var(--tj-borda); }
.brief-title {
    font-family: var(--tj-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--tj-carvao);
}
html.dark .brief-title { color: var(--tj-carvao); }
.brief-sub  { font-family: var(--tj-sans); font-size: 12.5px; color: var(--tj-tinta-2); }
.brief-row  { border-color: var(--tj-linha); }
html.dark .brief-row { border-color: var(--tj-linha); }
.brief-prod-nome { font-family: var(--tj-sans); font-size: 13.5px; font-weight: 700; color: var(--tj-carvao); }
html.dark .brief-prod-nome { color: var(--tj-carvao); }
.brief-prod-meta { font-size: 11.5px; color: var(--tj-tinta-2); }
.brief-ctx {
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
    background: var(--tj-branco);
    color: var(--tj-tinta);
}
.brief-ctx:focus {
    border-color: var(--tj-laranja);
    background: var(--tj-branco);
    box-shadow: 0 0 0 3px var(--tj-laranja-suave);
}
html.dark .brief-ctx { background: var(--tj-branco); border-color: var(--tj-borda); color: var(--tj-tinta); }
.brief-btn-skip {
    background: var(--tj-branco);
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
    color: var(--tj-tinta);
    padding: 10px 18px;
}
html.dark .brief-btn-skip { background: var(--tj-branco); border-color: var(--tj-borda); color: var(--tj-tinta); }
.brief-btn-go {
    background: var(--tj-laranja-solido);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13.5px;
    font-weight: 700;
    padding: 11px 22px;
}
.brief-btn-go:hover { background: var(--tj-laranja-solido-hover); }
.brief-close { color: var(--tj-tinta-4); }
.brief-close:hover { color: var(--tj-laranja); }


/* =============================================================
   TELA: CATÁLOGO (catalogo.php)

   Ganchos de JS desta tela — nenhum é tocado abaixo:
     lista     #buscaCatalogo  #buscaVazia
               .pasta  .pasta-nome  .prod-item  .prod-nome
               data-orig  (nomeEl.dataset.orig, guarda o texto original)
     formulário de produto (ÁREA INTOCÁVEL, nada estilizado aqui):
               #modalProduto #formProduto #modalTitulo #prodId #prodNome
               #prodPasta #prodPreco #prodTipo #prodAtivo #prodDescricao
               #prodDescContador #novaPastaForm #novaPastaNome
               #novaPastaCor #wrapExcluirProduto #formExcluirProduto
               #excluirProdId
     importação de CSV (ÁREA INTOCÁVEL):
               #modalImportar #formImportar #importFormato #tabPadrao
               #tabBitrix #dicaPadrao #dicaBitrix #modalImportarDesc
               #descArquivo #descJson #descResultado #btnSimularDesc
               #btnGravarDesc

   TRÊS ARMADILHAS DE `display` NESTA TELA. O filtro de busca faz
   pasta.style.display = '' / 'none' e item.style.display = '' / 'none',
   e o #buscaVazia também é ligado e desligado assim. Nenhuma regra
   abaixo define `display` nesses elementos.

   Atenção especial ao .prod-item: o style.css já lhe dá `display:flex`,
   e é justamente por isso que o reset para '' devolve a linha ao
   layout certo. Trocar esse valor aqui mudaria silenciosamente o
   arranjo da linha toda vez que a busca fosse limpa.

   O modal de produto e o de importação ficam de fora por serem as duas
   áreas que você marcou como sensíveis. Os campos dentro deles já
   pegam a borda e o foco novos pela regra global de input/select.
   ============================================================= */

/* O h2 do topo tem font-size e font-weight inline na marcação. Como não
   editamos marcação, os dois só cedem com !important. A família não
   precisa: essa não está inline. */
.page-top h2 {
    font-family: var(--tj-serif);
    font-size: 29px !important;
    font-weight: 600 !important;
    color: var(--tj-carvao);
    line-height: 1.12;
    letter-spacing: -.3px;
}
.page-top { align-items: flex-end; margin-bottom: 22px; }
.page-top-actions { gap: 16px; }

/* ── Busca ──────────────────────────────────────────────── */
/* Sem `display` no .busca-vazia — o JS liga e desliga por ele. */
.busca-wrap { margin-bottom: 20px; }
.busca-wrap input {
    padding: 11px 14px 11px 40px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    background: var(--tj-branco);
    color: var(--tj-tinta);
    font-family: var(--tj-sans);
    font-size: 14px;
}
.busca-wrap input:focus {
    border-color: var(--tj-laranja);
    box-shadow: 0 0 0 3px var(--tj-laranja-suave);
}
.busca-wrap svg { color: var(--tj-tinta-4); }
html.dark .busca-wrap input { background: var(--tj-branco); border-color: var(--tj-borda); color: var(--tj-tinta); }
html.dark .busca-wrap svg   { color: var(--tj-tinta-4); }
.busca-vazia { color: var(--tj-tinta-2); font-family: var(--tj-sans); font-size: 13.5px; }
html.dark .busca-vazia { color: var(--tj-tinta-2); }

/* ── Pasta ──────────────────────────────────────────────── */
/* Sem `display` na .pasta — o JS liga e desliga por ele. */
.pasta {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: none;
    margin-bottom: 18px;
}
html.dark .pasta { background: var(--tj-branco); border-color: var(--tj-borda); }

.pasta-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--tj-borda);
    background: var(--tj-coluna);
}
/* No claro a faixa da pasta afunda em relação ao card. No escuro precisa
   fazer o contrário e subir: o tom de "afundar" fica a 2 pontos do fundo
   do card e a faixa desaparece. */
html.dark .pasta-header { background: var(--tj-plano); border-color: var(--tj-borda); }

/* O quadrado numerado usa a cor da pasta, que vem do banco por style
   inline. Fica como está: é dado do usuário, não decisão de estilo. */
.pasta-num { border-radius: var(--tj-r-chip); font-family: var(--tj-sans); font-weight: 700; }

.pasta-nome {
    font-family: var(--tj-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--tj-carvao);
    letter-spacing: -.1px;
}
html.dark .pasta-nome { color: var(--tj-carvao); }
.pasta-desc { font-family: var(--tj-sans); font-size: 12px; color: var(--tj-tinta-2); }
html.dark .pasta-desc { color: var(--tj-tinta-2); }

/* ── Item de produto ────────────────────────────────────── */
/* NÃO redefinir `display` aqui: o reset da busca depende do flex. */
.prod-item {
    padding: 12px 20px;
    border-bottom: 1px solid var(--tj-linha);
    font-family: var(--tj-sans);
    font-size: 13.5px;
    transition: background .12s;
}
/* Zebrado sai, como nas demais listas */
.prod-item:nth-child(even) { background: transparent; }
.prod-item:hover { background: var(--tj-laranja-suave); }
html.dark .prod-item { background: transparent; border-color: var(--tj-linha); color: var(--tj-tinta); }
html.dark .prod-item:nth-child(even) { background: transparent !important; }
html.dark .prod-item:hover { background: var(--tj-plano) !important; }

.prod-nome { font-weight: 400; color: var(--tj-tinta); }
html.dark .prod-nome { color: var(--tj-tinta); }
.prod-tipo { font-size: 11px; color: var(--tj-tinta-2); }
html.dark .prod-tipo { color: var(--tj-tinta-2); }
.prod-preco {
    font-weight: 700;
    color: var(--tj-laranja);
    font-variant-numeric: tabular-nums;
}
.prod-edit-hint { font-size: 11px; color: var(--tj-laranja); }

/* Produto ainda sem descrição estratégica. O marcador invertido continua:
   o que falta preencher fica mais apagado que o resto. Mas o tom antigo
   (#a8a8a8) dava 2,3:1, e como quase todo o catálogo está nesse estado a
   tela inteira ficava lavada — um sinal que marca quase tudo deixa de
   ser sinal e vira só perda de leitura. Aqui ele sobe para 4,4:1: segue
   nitidamente mais fraco que um item preenchido, e dá para ler. */
.prod-sem-desc .prod-nome     { color: var(--tj-tinta-2); }
.prod-sem-desc-dot            { background: var(--tj-tinta-4); }
html.dark .prod-sem-desc .prod-nome { color: var(--tj-tinta-2); }
html.dark .prod-sem-desc-dot        { background: var(--tj-tinta-4); }

/* Realce da busca, mesmo tom das outras telas */
.prod-item mark { background: var(--tj-laranja-suave); color: var(--tj-carvao); font-weight: 700; }
html.dark .prod-item mark { background: var(--tj-laranja-suave); color: var(--tj-laranja-escuro); }


/* =============================================================
   TELA: PORTAL DO CLIENTE (cliente.php)

   É a única tela desta leva que o CLIENTE abre, e a única com CSS
   totalmente próprio: não carrega o style.css. Conferido: ZERO colisão
   de nome de classe com o resto desta camada — o Portal usa namespace
   próprio (portal-, secao-, tarefa-, sol-, form-, filtro-). O que chega
   nele são as regras de elemento (body, h1..h5, a, input, mark) mais o
   bloco abaixo.

   Não tem modo escuro e não deve ganhar um: quem liga o html.dark é um
   botão do sistema interno, que não existe aqui. As regras html.dark
   desta camada simplesmente nunca disparam nesta tela.

   Ganchos de JS — nenhum é tocado abaixo:
     ids     #buscaTarefas #tarefasVazio #contadorVisiveis #secaoHistorico
             #listaHist #alertaNovaSol #btnEnviarSol #solNome #solMensagem
             #solArquivo #uploadArea #uploadLista
             #cnt-pendente #cnt-em_andamento #cnt-concluida
             #cnt-cancelada #cnt-todas
     classes .filtro-btn        (querySelectorAll do filtro)
             .tarefa-item       (querySelectorAll com [data-status])
             .ativo             (classList.toggle no filtro)
             .drag-over         (classList no upload)
     dados   data-status

   TRÊS ARMADILHAS DE `display`: o filtro faz tarefa.style.display =
   '' / 'none', o #tarefasVazio e o #alertaNovaSol são ligados e
   desligados assim. Como no Catálogo, o .tarefa-item depende de o CSS
   dele já ser `display:flex` para o reset devolver a linha ao lugar.
   Nada aqui redefine display nesses elementos.

   As cores de status vêm do PHP como style inline, de um terceiro mapa
   (#2563eb, #d97706, #16a34a, #dc2626, #888) que não é nem o do sistema
   nem o da Carta. Entram na paleta por casamento da string, como nas
   telas anteriores. A badge usa o truque de alfa em hexa (#RRGGBB22),
   então a mesma string casa fundo e texto no mesmo elemento.
   ============================================================= */

.aviso-conf {
    background: var(--tj-coluna);
    border-bottom: 1px solid var(--tj-borda);
    font-family: var(--tj-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--tj-tinta-2);
    padding: 7px 16px;
}

.header-portal {
    background: var(--tj-branco);
    border-bottom: 3px solid var(--tj-laranja);
    padding: 16px 20px;
}
.header-portal-info h1 {
    font-family: var(--tj-serif);
    font-size: 21px;
    font-weight: 600;
    color: var(--tj-carvao);
    line-height: 1.15;
    letter-spacing: -.2px;
}
.header-portal-info .portal-label {
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--tj-laranja);
    margin-top: 4px;
}

.secao {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: none;
    margin-bottom: 18px;
}
.secao-header {
    padding: 15px 18px;
    border-bottom: 1px solid var(--tj-borda);
    background: var(--tj-coluna);
}
.secao-header h2 {
    font-family: var(--tj-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--tj-carvao);
    letter-spacing: -.1px;
}

/* ── Filtros e busca ────────────────────────────────────── */
/* O ícone de lupa da .busca-tarefa é background-image. A regra global
   de input usa background-color justamente para não apagá-lo. */
.busca-tarefa {
    padding: 10px 12px 10px 36px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13.5px;
    color: var(--tj-tinta);
    background-color: var(--tj-branco);
}
.busca-tarefa:focus {
    border-color: var(--tj-laranja);
    background-color: var(--tj-branco);
    box-shadow: 0 0 0 3px var(--tj-laranja-suave);
}

.filtro-btn {
    padding: 7px 14px;
    border: none;
    border-radius: var(--tj-r-ctrl);
    background: var(--tj-plano);
    font-family: var(--tj-sans);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--tj-tinta);
}
.filtro-btn:hover { background: var(--tj-borda); color: var(--tj-tinta); border: none; }
.filtro-btn.ativo { background: var(--tj-laranja-solido); color: #fff; font-weight: 700; }
.filtro-btn .filtro-count { opacity: 1; color: var(--tj-tinta-2); font-weight: 400; }
.filtro-btn.ativo .filtro-count { opacity: 1; color: rgba(255,255,255,.78); }

/* ── Tarefa ─────────────────────────────────────────────── */
/* NÃO redefinir `display` no .tarefa-item — o filtro depende do flex. */
.tarefa-item { padding: 13px 0; border-bottom: 1px solid var(--tj-linha); }
.tarefa-titulo {
    font-family: var(--tj-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--tj-carvao);
    line-height: 1.35;
}
.tarefa-meta { font-family: var(--tj-sans); font-size: 11.5px; color: var(--tj-tinta-2); margin-top: 3px; }
.tarefa-badge {
    font-family: var(--tj-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--tj-r-chip);
}
.tarefa-link-btn {
    font-family: var(--tj-sans);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tj-laranja);
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    background: var(--tj-branco);
    padding: 6px 12px;
}
.tarefa-link-btn:hover { background: var(--tj-laranja-suave); border-color: var(--tj-laranja); }

/* ── Cores de status: os três mapas viram um só ─────────── */
.tarefa-status-dot[style*="#888"]     { background: var(--tj-tinta-3) !important; }
.tarefa-status-dot[style*="#2563eb"]  { background: var(--tj-azul)    !important; }
.tarefa-status-dot[style*="#d97706"]  { background: var(--tj-ambar-marca) !important; }
.tarefa-status-dot[style*="#16a34a"]  { background: var(--tj-verde)   !important; }
.tarefa-status-dot[style*="#dc2626"]  { background: var(--tj-terra)   !important; }

.tarefa-badge[style*="#888"],    .sol-badge[style*="#888"]    { background: var(--tj-plano)       !important; color: var(--tj-tinta-2) !important; }
.tarefa-badge[style*="#2563eb"], .sol-badge[style*="#2563eb"] { background: var(--tj-azul-suave)  !important; color: var(--tj-azul)    !important; }
.tarefa-badge[style*="#d97706"], .sol-badge[style*="#d97706"] { background: var(--tj-ambar-suave) !important; color: var(--tj-ambar)   !important; }
.tarefa-badge[style*="#16a34a"], .sol-badge[style*="#16a34a"] { background: var(--tj-verde-suave) !important; color: var(--tj-verde)   !important; }
.tarefa-badge[style*="#dc2626"], .sol-badge[style*="#dc2626"] { background: var(--tj-terra-suave) !important; color: var(--tj-terra)   !important; }

/* ── Formulário de solicitação ──────────────────────────── */
.form-label {
    font-family: var(--tj-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tj-tinta-2);
    margin-bottom: 5px;
}
.form-input {
    padding: 10px 12px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13.5px;
    color: var(--tj-tinta);
}
.form-input:focus { border-color: var(--tj-laranja); box-shadow: 0 0 0 3px var(--tj-laranja-suave); }
.form-group { margin-bottom: 16px; }

.btn-enviar {
    padding: 13px;
    background: var(--tj-laranja-solido);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 14px;
    font-weight: 700;
}
.btn-enviar:hover { background: var(--tj-laranja-solido-hover); }
.btn-enviar:disabled { background: var(--tj-tinta-4); }

.upload-area {
    border: 1.5px dashed var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    padding: 16px;
    font-family: var(--tj-sans);
    font-size: 12.5px;
    color: var(--tj-tinta-2);
}
.upload-area:hover, .upload-area.drag-over {
    border-color: var(--tj-laranja);
    color: var(--tj-laranja);
    background: var(--tj-laranja-suave);
}
.upload-preview { background: var(--tj-coluna); border-radius: var(--tj-r-chip); font-family: var(--tj-sans); }

/* ── Solicitações e avisos ──────────────────────────────── */
.sol-item { padding: 13px 0; border-bottom: 1px solid var(--tj-linha); }
.sol-nome { font-family: var(--tj-sans); font-size: 13.5px; font-weight: 700; color: var(--tj-carvao); }
.sol-data { font-family: var(--tj-sans); font-size: 11px; color: var(--tj-tinta-2); }
.sol-msg  { font-family: var(--tj-sans); font-size: 13.5px; color: var(--tj-tinta); line-height: 1.65; }
.sol-badge {
    font-family: var(--tj-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--tj-r-chip);
}
.sol-arquivo a { font-family: var(--tj-sans); font-size: 12px; color: var(--tj-laranja); }

/* Sem `display` no .alerta — o JS liga e desliga por ele. */
.alerta {
    font-family: var(--tj-sans);
    font-size: 13px;
    border-radius: var(--tj-r-ctrl);
    padding: 13px 16px;
}
.alerta-ok   { background: var(--tj-verde-suave); color: var(--tj-verde); }
.alerta-erro { background: var(--tj-terra-suave); color: var(--tj-terra); }

.vazio { font-family: var(--tj-sans); font-size: 13px; color: var(--tj-tinta-2); padding: 28px; }

.footer-portal { font-family: var(--tj-sans); font-size: 11px; color: var(--tj-tinta-2); padding: 26px 20px; }
.footer-portal a { color: var(--tj-laranja); }


/* =============================================================
   TELA: CLIENTES (clientes.php)

   Ganchos de JS — nenhum é tocado abaixo:
     abas      .tab  .tab-content  #tabSolicitacoes  #badgeNaoLidas
               #tab-empresas #tab-contatos #tab-solicitacoes #tab-novo
               #actionsEmpresas #actionsContatos
     empresa   #modalEmpresa #formEditarEmpresa #modalEmpresaTitulo
               #editEmpresaId #editEmpresaNome #editEmpresaTipo
               #editEmpresaCnpj #editEmpresaEmail #editEmpresaTelefone
               #editEmpresaEndereco #editEmpresaObs
               #formExcluirEmpresa #excluirEmpresaId
               #listaContatosEmpresa #linkHistoricoEmpresa
               #secaoPortal #listaPortais #novoPortalForm
               #novoPortalLabel #novoPortalNivel
     contato   #modalContato #formEditarContato #editContatoId
               #editContatoNome #editContatoCargo #editContatoEmail
               #editContatoTelefone #editContatoEmpresa
               #editContatoPrincipal #editContatoAnalisarEmail
               #formExcluirContato #excluirContatoId
               #formNovoContatoEmpresa #novoContatoEmpresaId
               #novoContatoPrincipal #novoContatoAnalisarEmail
     import    #modalImportar #formImportar #importarTipo
               #importarTitulo #dicaEmpresas #dicaContatos
     histórico #modalHistoricoSol #histSolConteudo .hist-abrir-btn
     dados     data-idx  data-sol-id

   O QUE FICA DE FORA, E POR QUÊ:

   #modalSol — a solicitação que vira tarefa. Tem DUAS coisas da sua
   lista de intocáveis dentro: o formulário de criação de tarefa
   (#solCriarTarefaForm e os campos solTarefa*) e o CÁLCULO EM TEMPO
   REAL de produto (#solProdPreco e #solProdQtd chamam tpCalc('sol') no
   oninput, que escreve em #solProdValorFinal). Junto com ele ficam de
   fora as classes .tp-* e .neg-*, que são a interface desse cálculo e
   da busca de negócio.

   Isso sai limpo porque #modalSol e #modalHistoricoSol são estilizados
   inteiramente por style inline, sem classe: as regras de .modal e
   .modal-overlay simplesmente não os alcançam. O .hist-table e as
   .hist-tag do histórico entram, por serem só leitura.

   ARMADILHAS DE `display`:
   .tab-content é ligado e desligado por classList('active') sobre
   `display:none` / `display:block`, e .modal-overlay por .open. Nenhuma
   regra abaixo define display nesses elementos.
   ============================================================= */

/* ── Abas ───────────────────────────────────────────────── */
/* Sem `display` no .tab-content — é ele que troca de aba. */
.tabs { margin-bottom: 24px; }
.tab {
    background: var(--tj-branco);
    border: 1.5px solid var(--tj-borda);
    font-family: var(--tj-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--tj-tinta-2);
    padding: 10px 20px;
}
.tab + .tab { border-left: none; }
.tab:hover { color: var(--tj-laranja); }
.tab.active {
    background: var(--tj-laranja-solido);
    border-color: var(--tj-laranja-solido);
    color: #fff;
    font-weight: 700;
}
html.dark .tab { background: var(--tj-branco); border-color: var(--tj-borda); color: var(--tj-tinta-2); }
/* `html.dark .tab` e `.tab.active` têm a mesma especificidade, e a do
   modo escuro vem depois — sem repetir o fundo aqui, a aba ativa perde
   o laranja e fica igual às inativas. */
html.dark .tab.active {
    background: var(--tj-laranja-solido);
    border-color: var(--tj-laranja-solido);
    color: #fff;
}

/* A coluna "Tipo" reaproveita a classe global .badge com cor inline
   (background:#eee;color:#666). A regra .badge desta camada já lhe dá a
   forma; aqui a cor entra na paleta. */
.tabela-empresas .badge[style*="#eee"] { background: var(--tj-plano) !important; color: var(--tj-tinta-2) !important; }
/* A quebra livre da célula vale para e-mail e endereço, não para as
   etiquetas: sem isto elas partem no meio da palavra ("EMPRES / A"). */
.tabela-empresas .badge, .tabela-contatos .badge,
.sol-badge, .hist-tag, .portal-ativo-badge, .portal-inativo-badge { white-space: nowrap; }

/* .btn-sm fora do cabeçalho é botão de verdade, não item de menu: no
   cabeçalho ele virou link de texto, aqui continua sendo botão. O
   nowrap evita que o emoji do rótulo quebre para a linha de cima. */
.btn-sm {
    padding: 8px 14px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    background: var(--tj-branco);
    font-family: var(--tj-sans);
    font-size: 12.5px;
    color: var(--tj-tinta);
    white-space: nowrap;
}
.btn-sm:hover { border-color: var(--tj-laranja); color: var(--tj-laranja); }
html.dark .btn-sm { background: var(--tj-branco); border-color: var(--tj-borda); color: var(--tj-tinta); }
/* Dentro de célula o botão precisa ser mais enxuto: com o nowrap ligado,
   o padding cheio empurra a largura mínima da tabela para além do
   contêiner e a última coluna é cortada pelo overflow do card. */
td .btn-sm { padding: 6px 11px; font-size: 12px; }

.badge-tab {
    background: var(--tj-terra);
    color: #fff;
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    min-width: 17px;
    height: 17px;
}
.tab-actions { gap: 16px; align-items: center; }

/* ── Tabelas ────────────────────────────────────────────── */
/* As tabelas desta tela têm 6 e 7 colunas, com e-mail e endereço
   dentro. A largura mínima delas passa do contêiner e a última coluna
   era cortada. O painel da aba vira o contêiner de rolagem, como o
   .hist-tabela-wrap faz no Histórico.
   `overflow-x`, não `display`: quem troca de aba é o display. */
.tab-content { overflow-x: auto; }

.tabela-empresas, .tabela-contatos, #tab-solicitacoes table {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: none;
    overflow: hidden;
}
.tabela-empresas th, .tabela-contatos th, #tab-solicitacoes table th {
    background: var(--tj-cap);
    color: var(--tj-cap-texto);
    font-family: var(--tj-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 11px 14px;
    border-bottom: none;
}
html.dark .tabela-empresas th, html.dark .tabela-contatos th,
html.dark #tab-solicitacoes table th { background: var(--tj-cap); color: var(--tj-cap-texto); }

.tabela-empresas td, .tabela-contatos td, #tab-solicitacoes table td {
    font-family: var(--tj-sans);
    font-size: 13.5px;
    padding: 13px 12px;
    border-bottom: 1px solid var(--tj-linha);
    /* E-mail e endereço são palavras únicas e longas: sem isto eles
       viram a largura mínima da tabela e empurram a última coluna para
       fora do contêiner. Texto normal não é afetado. */
    overflow-wrap: anywhere;
}
html.dark .tabela-empresas td, html.dark .tabela-contatos td,
html.dark #tab-solicitacoes table td { color: var(--tj-tinta); border-color: var(--tj-linha); }

/* Zebrado sai; o hover é o único realce de linha */
.tabela-empresas tbody tr:nth-child(even) td,
.tabela-contatos tbody tr:nth-child(even) td,
#tab-solicitacoes table tbody tr:nth-child(even) td { background: transparent !important; }
.tr-clicavel:hover td, .sol-row:hover td { background: var(--tj-laranja-suave) !important; }
html.dark .tr-clicavel:hover td, html.dark .sol-row:hover td { background: var(--tj-plano) !important; }

.sol-msg-preview { color: var(--tj-tinta-2); font-size: 12.5px; }
.sol-row td { font-size: 13.5px; padding: 13px 14px; border-bottom: 1px solid var(--tj-linha); }

.status-select {
    padding: 5px 9px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-chip);
    font-family: var(--tj-sans);
    font-size: 12px;
}

/* ── Selos ──────────────────────────────────────────────── */
.sol-badge, .portal-ativo-badge, .portal-inativo-badge {
    font-family: var(--tj-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--tj-r-chip);
}
.portal-ativo-badge   { background: var(--tj-verde-suave); color: var(--tj-verde); }
.portal-inativo-badge { background: var(--tj-plano);       color: var(--tj-tinta-2); }

/* ── Formulários fora de modal ──────────────────────────── */
.form-card {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: none;
    padding: 22px 24px;
}
html.dark .form-card { background: var(--tj-branco); border-color: var(--tj-borda); }
.form-card h3 {
    font-family: var(--tj-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--tj-carvao);
    margin-bottom: 16px;
}
html.dark .form-card h3 { color: var(--tj-carvao); }
.form-grid { gap: 16px; }
.form-grid label, .modal label {
    font-family: var(--tj-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tj-tinta-2);
    margin-bottom: 5px;
}
html.dark .form-grid label, html.dark .modal label { color: var(--tj-tinta-2) !important; }
/* As exclusões de checkbox e radio não são detalhe: sem elas a caixa de
   marcar ganha padding e borda de campo de texto e vira um retângulo. */
.form-grid input:not([type="checkbox"]):not([type="radio"]),
.form-grid select, .form-grid textarea,
.modal input:not([type="checkbox"]):not([type="radio"]),
.modal select, .modal textarea {
    padding: 10px 12px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13.5px;
}

/* Defeito antigo, presente em toda tela cujo CSS faz
   `.modal input { width:100% }` sem excluir checkbox: a caixa de marcar
   fica com a largura inteira do modal e empurra o próprio rótulo para
   fora. Vale para os modais de empresa e contato do Clientes e para o
   formulário de produto do Catálogo. */
#modalEmpresa input[type="checkbox"], #modalEmpresa input[type="radio"],
#modalContato input[type="checkbox"], #modalContato input[type="radio"],
#modalProduto input[type="checkbox"], #modalProduto input[type="radio"],
.modal input[type="checkbox"], .modal input[type="radio"],
.modal-sm input[type="checkbox"], .modal-sm input[type="radio"],
.modal-lg input[type="checkbox"], .modal-lg input[type="radio"] {
    width: auto;
    flex-shrink: 0;
    margin-right: 6px;
}

/* ── Modais de empresa, contato e importação ────────────── */
/* Sem `display` no .modal-overlay — o JS abre com .open. */
.modal-overlay { background: rgba(28,28,28,.5); }
.modal {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: 0 18px 50px rgba(28,28,28,.18);
}
html.dark .modal { background: var(--tj-branco); border-color: var(--tj-borda); }
.modal h2 {
    font-family: var(--tj-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--tj-carvao);
    margin-bottom: 18px;
}
html.dark .modal h2 { color: var(--tj-carvao); }

.contato-item {
    background: var(--tj-coluna);
    border-radius: var(--tj-r-chip);
    padding: 10px 12px;
    font-family: var(--tj-sans);
    font-size: 13.5px;
}
.contato-item:hover { background: var(--tj-laranja-suave); }
html.dark .contato-item { background: var(--tj-plano); }
.contato-item-nome { font-weight: 700; color: var(--tj-carvao); }
html.dark .contato-item-nome { color: var(--tj-carvao); }
.contato-item-sub { font-size: 11.5px; color: var(--tj-tinta-2); }

/* ── Botões ─────────────────────────────────────────────── */
.btn-save {
    padding: 11px 20px;
    background: var(--tj-laranja-solido);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
    font-weight: 700;
}
.btn-save:hover { background: var(--tj-laranja-solido-hover); }
.btn-cancel {
    padding: 11px 18px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    background: var(--tj-branco);
    font-family: var(--tj-sans);
    font-size: 13px;
    color: var(--tj-tinta);
}
html.dark .btn-cancel { background: var(--tj-branco); border-color: var(--tj-borda); color: var(--tj-tinta); }
.btn-excluir {
    padding: 10px 16px;
    border: 1.5px solid var(--tj-terra-suave);
    border-radius: var(--tj-r-ctrl);
    background: var(--tj-branco);
    color: var(--tj-terra);
    font-family: var(--tj-sans);
    font-size: 13px;
    font-weight: 700;
}
.btn-excluir:hover { background: var(--tj-terra-suave); border-color: var(--tj-terra); }
.btn-del { color: var(--tj-tinta-4); }
.btn-del:hover { color: var(--tj-terra); }

/* ── Histórico de solicitações (somente leitura) ────────── */
.hist-table th {
    background: var(--tj-cap);
    color: var(--tj-cap-texto);
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    border-bottom: none;
    padding: 10px;
}
.hist-table td { font-family: var(--tj-sans); font-size: 12.5px; border-bottom: 1px solid var(--tj-linha); padding: 11px 10px; }
.hist-table tr:hover td { background: var(--tj-laranja-suave); }
.hist-tag {
    font-family: var(--tj-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--tj-r-chip);
}
.hist-nova { background: var(--tj-ambar-suave); color: var(--tj-ambar); }
.hist-conv { background: var(--tj-verde-suave); color: var(--tj-verde); }
.hist-del  { background: var(--tj-plano);       color: var(--tj-tinta-2); }


/* =============================================================
   TELA: NEGÓCIO (negocio.php)

   É a tela de risco alto da lista, porque o CÁLCULO EM TEMPO REAL do
   valor do negócio mora nela. O que entra aqui é só a moldura.

   O QUE FICA DE FORA, INTEIRO — é a área do cálculo e do produto:
     .add-prod-form e seus campos  (#addQtd #inputPreco
        #addDescontoInput #addDescontoToggle #addDescontoHidden
        #addProdDescricao #inputRegistradoEm)
     .desconto-wrap  .toggle-modo   (o alternador % / R$, que o JS liga
        e desliga com classList.toggle('reais'))
     .prod-search-wrap  #prodDropdown  #prodSearchInput  #prodIdHidden
        .prod-opt .prod-opt-nome .prod-opt-pasta .prod-opt-preco
        (busca de produto, com classList('selecionado') e 'ativo')
     #modalEditarProduto e os campos #editProd* — inclusive
        #editProdValorFinal, que é o resultado do cálculo
     .tp-ia-*  (o cartão de sugestão da IA, que escreve dentro do
        formulário de produto)

   Nenhuma regra abaixo cita nenhum desses nomes. Os campos dessa área
   recebem apenas a regra global de input, que já valia antes desta
   tela e só troca borda, raio e cor.

   Os três modais da tela (#modalEditarProduto, #modalCriarNegocio,
   #modalConfirmExcluir) são estilizados por style inline, sem classe,
   como no Clientes: as regras de .modal não os alcançam.

   ARMADILHAS DE `display`: a tela tem quinze pontos onde o JS escreve
   style.display — dropdown de produto, cartão da IA, caixas de nova
   empresa e novo contato, e os modais. Todos estão fora do escopo
   acima, e nenhuma regra abaixo define display.

   COLISÃO DE NOME, de propósito: .tarefa-item, .tarefa-titulo e
   .tarefa-prazo existem aqui e no Portal do Cliente, com marcações
   diferentes. As regras do bloco do Portal alcançam as duas telas e
   isso é desejado — é a mesma coisa sendo mostrada nos dois lugares.
   ============================================================= */

.page-title {
    font-family: var(--tj-serif);
    font-size: 29px;
    font-weight: 600;
    color: var(--tj-carvao);
    line-height: 1.12;
    letter-spacing: -.3px;
    margin-bottom: 5px;
}
.page-subtitle { font-family: var(--tj-sans); font-size: 13px; color: var(--tj-tinta-2); margin-bottom: 24px; }
html.dark .page-subtitle { color: var(--tj-tinta-2); }

.grid { gap: 18px; }

/* O h3 do painel é rótulo de seção, não título: fica na sans, em caixa
   alta, e não herda a serifa da regra base de h1..h5. */
.panel h3 {
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--tj-laranja);
    border-bottom: 1px solid var(--tj-borda);
    padding-bottom: 10px;
    margin-bottom: 16px;
}
html.dark .panel h3 { color: var(--tj-laranja); border-color: var(--tj-borda); }

.info-row { border-bottom: 1px solid var(--tj-linha); padding: 8px 0; font-size: 13.5px; }
.info-label { color: var(--tj-tinta-2); font-family: var(--tj-sans); }
.info-value { color: var(--tj-carvao); font-weight: 700; font-family: var(--tj-sans); }
html.dark .info-label { color: var(--tj-tinta-2); }
html.dark .info-value { color: var(--tj-carvao); }

.etapa-select {
    padding: 7px 11px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-chip);
    font-family: var(--tj-sans);
    font-size: 12.5px;
    font-weight: 700;
}

/* ── Tabela de itens: só a aparência, o cálculo é intocado ── */
.prod-table th {
    background: var(--tj-cap);
    color: var(--tj-cap-texto);
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 10px 8px;
    border-bottom: none;
}
html.dark .prod-table th { background: var(--tj-cap); color: var(--tj-cap-texto); }
.prod-table td {
    font-family: var(--tj-sans);
    font-size: 13px;
    padding: 11px 8px;
    border-bottom: 1px solid var(--tj-linha);
    overflow-wrap: anywhere;
}
html.dark .prod-table td { border-color: var(--tj-linha); }
.prod-table .text-right { font-variant-numeric: tabular-nums; }
.prod-total { font-weight: 700; color: var(--tj-laranja); font-variant-numeric: tabular-nums; }
/* .prod-total é classe no próprio td, e `html.dark td {color:#ddd}` do
   style.css é mais específico que ela: sem esta linha o total do item
   perde o laranja no modo escuro. Mesma armadilha do .valor-final. */
html.dark .prod-table td.prod-total { color: var(--tj-laranja); }
.prod-row:hover td { background: var(--tj-laranja-suave); }
html.dark .prod-row:hover td { background: var(--tj-plano); }
.btn-remove { color: var(--tj-tinta-4); }
.btn-remove:hover { color: var(--tj-terra); }

/* ── Tarefas do negócio ─────────────────────────────────── */
.tarefa-item:hover { background: var(--tj-laranja-suave); }
html.dark .tarefa-item:hover { background: var(--tj-plano); }
.tarefa-briefing { font-family: var(--tj-sans); font-size: 12px; color: var(--tj-tinta-2); }
.tarefa-prazo    { font-family: var(--tj-sans); font-size: 11.5px; color: var(--tj-tinta-2); }
html.dark .tarefa-briefing, html.dark .tarefa-prazo { color: var(--tj-tinta-2); }
.tarefa-link     { font-size: 11.5px; color: var(--tj-laranja); font-weight: 700; }

/* ── Linha do tempo ─────────────────────────────────────── */
.tl-item { border-bottom: 1px solid var(--tj-linha); padding: 12px 0; font-family: var(--tj-sans); font-size: 13.5px; }
.tl-date { font-family: var(--tj-sans); font-size: 11px; color: var(--tj-tinta-2); }
html.dark .tl-date { color: var(--tj-tinta-2); }
.tl-icon { width: 8px; height: 8px; }
.tl-icon-comentario        { background: var(--tj-laranja); }
.tl-icon-tarefa_criada     { background: var(--tj-azul); }
.tl-icon-tarefa_concluida  { background: var(--tj-verde); }
.tl-icon-status_alterado   { background: var(--tj-ambar-marca); }
.tl-icon-produto_adicionado{ background: var(--tj-roxo); }
.tl-icon-negocio_criado    { background: var(--tj-tinta-3); }

/* ── Formulários de comentário e de tarefa ──────────────── */
/* O JS pisca o fundo do formulário de tarefa e depois o devolve para o
   valor inline anterior (vazio), caindo nesta folha. Por isso nenhuma
   regra aqui define `background` no .form-tarefa. */
.form-inline input, .form-inline select, .form-inline textarea,
.form-tarefa input, .form-tarefa textarea {
    padding: 10px 12px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13.5px;
}
.form-inline button, .form-tarefa button {
    padding: 10px 18px;
    background: var(--tj-laranja-solido);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
    font-weight: 700;
}
.form-inline button:hover, .form-tarefa button:hover { background: var(--tj-laranja-solido-hover); }
.form-tarefa { border-top: 1px solid var(--tj-borda); padding-top: 14px; }


/* =============================================================
   TELA: TAREFAS (tarefas.php)

   A maior do sistema: 3.047 linhas, e as DUAS áreas mais sensíveis da
   sua lista moram nela. Por isso o escopo aqui é o menor de todos:
   só a LISTA. Nada do modal e nada do canal.

   O QUE FICA DE FORA, INTEIRO:
     canal de mensagens (POLLING) — todas as .canal-*, o histórico de
        bolhas, as reações, o seletor de emoji e o envio
     modais de tarefa — .modal-sm  .modal-lg  .modal-overlay
        .modal-footer .edit-tabs .edit-tab .quill-wrap .ql-*
        .btn-save .btn-save-outline .btn-cancel .btn-excluir-modal
        .nova-msg-salva
     atalhos de IA — #iaAtalhos  .ia-atalho
     exportação — .exp_status  .import-tip

   O QUE ENTRA: cabeçalho, título, pílulas de filtro, busca, legenda,
   a tabela e seus marcadores de prioridade e de não lida.

   ARMADILHAS DESTA TELA — são mais do que em qualquer outra:

   1. SESSENTA E QUATRO escritas de style.display no JS. A filtragem da
      lista percorre tr[data-status] e tr[data-tarefa-id] e liga/desliga
      linha por linha. Nenhuma regra abaixo define display em tr, td ou
      th da .tabela-tarefas.

   2. A troca de aba Concluídas usa classList('aba-concluida') sobre
      .col-prazo e .col-concluida com display:table-cell / none. Essas
      duas classes não são tocadas aqui.

   3. O JS ADICIONA E REMOVE as classes .prio-urgente, .prio-prioritaria
      e .tr-nao-lida nas linhas. O desenho delas continua vindo dessas
      classes, com os mesmos nomes — só muda a cor.

   4. .fbtn recebe e perde .ativo por querySelectorAll('.fbtn').

   Os marcadores de prioridade e de não lida disputavam a MESMA borda
   esquerda: um cobria o outro. Aqui a prioridade fica na borda e a não
   lida vira um ponto laranja antes do título, então os dois convivem.
   ============================================================= */

/* ── Topo e filtros ─────────────────────────────────────── */
.filtros h2 {
    font-family: var(--tj-serif);
    font-size: 29px !important;
    font-weight: 600 !important;
    color: var(--tj-carvao);
    line-height: 1.12;
    letter-spacing: -.3px;
}
.filtros { gap: 16px; margin-bottom: 22px; align-items: flex-end; }
.filtros-status { gap: 8px; margin-bottom: 20px; }

.fbtn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--tj-r-ctrl);
    background: var(--tj-plano);
    font-family: var(--tj-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--tj-tinta);
}
.fbtn:hover { background: var(--tj-borda); color: var(--tj-tinta); border: none; }
.fbtn.ativo { background: var(--tj-laranja-solido); color: #fff; font-weight: 700; }
.fbtn .fcnt { opacity: 1; color: var(--tj-tinta-2); font-size: 11px; }
.fbtn.ativo .fcnt { color: rgba(255,255,255,.78); }
html.dark .fbtn { background: var(--tj-plano); color: var(--tj-tinta); }
html.dark .fbtn.ativo { background: var(--tj-laranja-solido); color: #fff; }

.busca-wrap input {
    width: 260px;
    padding: 9px 30px 9px 14px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
}
.busca-limpar { color: var(--tj-tinta-4); }
.busca-limpar:hover { color: var(--tj-laranja); }

/* ── Legenda ────────────────────────────────────────────── */
.legenda { font-family: var(--tj-sans); font-size: 11.5px; color: var(--tj-tinta-2); gap: 18px; margin: 14px 2px 10px; }
.legenda-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--tj-tinta-2);
}
html.dark .legenda, html.dark .legenda-label { color: var(--tj-tinta-2); }

/* ── Pontos de prioridade e de estado ───────────────────── */
/* O halo (box-shadow em anel) sai: era o elemento mais infantil da
   tela, e com quatro sinais na mesma linha era ruído. */
.dot { width: 8px; height: 8px; }
.dot-urgente      { background: var(--tj-terra);   box-shadow: none; }
.dot-prioritaria  { background: var(--tj-ambar-marca); box-shadow: none; }
.dot-normal       { background: #D8D2C9; }
.dot-pendente     { background: var(--tj-ambar-marca); }
.dot-em_andamento { background: var(--tj-azul); }
.dot-concluida    { background: var(--tj-verde); }
.dot-cancelada    { background: var(--tj-tinta-3); }
html.dark .dot-normal { background: var(--tj-tinta-4); }

/* ── Tabela ─────────────────────────────────────────────── */
/* Sem `display` em tr, td ou th — ver armadilhas 1 e 2 acima. */
.tabela-tarefas {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: none;
    overflow: hidden;
}
.tabela-tarefas th {
    background: var(--tj-cap);
    color: var(--tj-cap-texto);
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 11px 14px;
    border-bottom: none;
}
html.dark .tabela-tarefas th { background: var(--tj-cap); color: var(--tj-cap-texto); }
/* Sem `overflow-wrap: anywhere` aqui, ao contrário do Clientes: lá o
   que estourava era e-mail, palavra única e sem espaço. Aqui as colunas
   têm nome de negócio e de empresa, que quebram sozinhos nos espaços —
   forçar a quebra livre picava "Design Editorial: Portfólio" numa
   palavra por linha. */
.tabela-tarefas td {
    font-family: var(--tj-sans);
    font-size: 13.5px;
    padding: 14px;
    border-bottom: 1px solid var(--tj-linha);
}
html.dark .tabela-tarefas td { color: var(--tj-tinta); border-color: var(--tj-linha); }
.tabela-tarefas tbody tr:nth-child(even) td { background: transparent !important; }
.tabela-tarefas tbody tr:hover td { background: var(--tj-laranja-suave) !important; }
html.dark .tabela-tarefas tbody tr:hover td { background: var(--tj-plano) !important; }
.tabela-tarefas .td-titulo-cell { color: var(--tj-carvao); }
html.dark .tabela-tarefas td.td-titulo-cell { color: var(--tj-carvao); }

/* Prioridade fica na borda esquerda; a não lida sai daqui para não
   disputar o mesmo lugar (ver o ponto logo abaixo). */
.tabela-tarefas tr.prio-urgente td:first-child     { box-shadow: inset 3px 0 0 var(--tj-terra); }
.tabela-tarefas tr.prio-prioritaria td:first-child { box-shadow: inset 3px 0 0 var(--tj-ambar); }

/* Não lida: ponto laranja antes do título, no lugar da faixa que
   antes cobria a marca de prioridade. A classe segue a mesma. */
.tabela-tarefas tr.tr-nao-lida { border-left: none; }
.tabela-tarefas tr.tr-nao-lida .td-titulo-cell::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tj-laranja);
    margin-right: 8px;
    vertical-align: 1px;
}

.badge-nao-lidas, .fbtn-badge {
    background: var(--tj-laranja);
    color: #fff;
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
}
.badge-urgente     { background: var(--tj-terra-suave); color: var(--tj-terra); }
.badge-prioritaria { background: var(--tj-ambar-suave); color: var(--tj-ambar); }

.prazo-atrasada { color: var(--tj-terra); font-weight: 700; }
/* Sem nowrap: o texto "(atrasada)" vem junto da data na mesma célula e,
   impedido de quebrar, inflava a coluna para 202px e empurrava Link e
   excluir para fora do contêiner. Deixando quebrar, ela cai para ~110px
   e a tabela inteira volta a caber. */
.tabela-tarefas .col-prazo, .tabela-tarefas .col-concluida { font-variant-numeric: tabular-nums; }
/* Rede de segurança: em janela estreita a tabela rola em vez de ser
   cortada. Não aparece barra quando cabe. */
.page-content { overflow-x: auto; }
.link-publico { font-size: 12.5px; color: var(--tj-laranja); font-weight: 700; }
.btn-del { color: var(--tj-tinta-4); }
.btn-del:hover { color: var(--tj-terra); }

/* ── Faixa de mensagens aguardando ──────────────────────── */
/* Sem `display` — o JS liga com a classe .visivel. */
.banner-msgs {
    background: var(--tj-laranja-solido);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
    font-weight: 700;
    padding: 12px 16px;
}

.flash { font-family: var(--tj-sans); font-size: 13px; border-radius: var(--tj-r-ctrl); padding: 12px 16px; }


/* =============================================================
   TELA: TRIAGEM DE EMAIL (triagem_email.php)

   O caso especial que o estudo já previa: é a única tela com um
   SISTEMA VISUAL PRÓPRIO INTEIRO. Não carrega o style.css e redefine
   .header, .tabs, .tab, .card e .btn com valores diferentes dos do
   resto do sistema — mesmos nomes, outro significado.

   COLISÕES CONFERIDAS — seis: .btn .card .header .tab .tabs .vazio
   Cinco são benignas, porque significam a mesma coisa nas duas telas.
   A que quebrava era .tab: as abas daqui são pílulas SEPARADAS com
   gap de 8px, e as regras do Clientes as tratam como controle unido,
   removendo a borda esquerda de cada uma depois da primeira. Ficaria
   um bloco com buracos. Por isso as abas são redesenhadas abaixo com
   escopo `.wrap`, que só existe nesta tela.

   ARMADILHA DE `display`: trocarTab() faz
   getElementById('tab-fila'|'tab-desc'|'tab-config').style.display
   = '' / 'none'. Nenhuma regra abaixo define display nesses três.

   A FILA em si é gerada por JS: #tab-fila recebe innerHTML com os
   cartões. Todas as classes que aparecem lá (.card__de .card__meta
   .card__assunto .campo .acoes .conf .anexos .canal-box) continuam
   com os mesmos nomes — o JS as escreve e precisa encontrá-las.
   Nenhum comportamento da fila é alterado aqui: só cor, borda,
   tipografia e espaçamento.
   ============================================================= */

.wrap { max-width: 900px; }

/* ── Cabeçalho próprio da tela ──────────────────────────── */
.header h1 {
    font-family: var(--tj-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--tj-carvao);
    letter-spacing: -.2px;
}
.header a { font-family: var(--tj-sans); font-size: 13px; color: var(--tj-tinta-2); }
.header a:hover { color: var(--tj-laranja); }

/* ── Abas: pílulas separadas, não controle unido ────────── */
.wrap .tabs { gap: 8px; margin-bottom: 20px; }
.wrap .tab {
    padding: 8px 16px;
    border: none;
    border-radius: var(--tj-r-ctrl);
    background: var(--tj-plano);
    font-family: var(--tj-sans);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--tj-tinta);
}
.wrap .tab + .tab { border-left: none; }
.wrap .tab:hover { background: var(--tj-borda); color: var(--tj-tinta); }
.wrap .tab.active {
    background: var(--tj-laranja-solido);
    border-color: var(--tj-laranja-solido);
    color: #fff;
    font-weight: 700;
}
.wrap .tab span { color: var(--tj-tinta-2); font-size: 11px; }
.wrap .tab.active span { color: rgba(255,255,255,.78); }

/* ── Cartão de e-mail da fila ───────────────────────────── */
/* Padding maior que o do card do Kanban: este carrega um formulário
   inteiro dentro, não três linhas de texto. */
.wrap .card {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    padding: 18px;
    margin-bottom: 14px;
}
.wrap .card:hover { background: var(--tj-branco); border-color: var(--tj-borda); }
.card__de      { font-family: var(--tj-sans); font-size: 14px; font-weight: 700; color: var(--tj-carvao); }
.card__meta    { font-family: var(--tj-sans); font-size: 11.5px; color: var(--tj-tinta-2); }
.card__assunto { font-family: var(--tj-sans); font-size: 13px; color: var(--tj-tinta); margin-top: 3px; }

.campo label {
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tj-tinta-2);
    margin-bottom: 4px;
}
.campo input, .campo select, .campo textarea {
    padding: 9px 12px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
    color: var(--tj-tinta);
}

/* Confiança da leitura da IA: entra na paleta de estado */
.conf {
    font-family: var(--tj-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--tj-r-chip);
    white-space: nowrap;
}
.conf.alta  { background: var(--tj-verde-suave); color: var(--tj-verde); }
.conf.media { background: var(--tj-ambar-suave); color: var(--tj-ambar); }
.conf.baixa { background: var(--tj-terra-suave); color: var(--tj-terra); }

/* ── Botões próprios desta tela ─────────────────────────── */
.wrap .btn, .header .btn {
    padding: 9px 16px;
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    background: var(--tj-branco);
    font-family: var(--tj-sans);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--tj-tinta);
}
.wrap .btn:hover, .header .btn:hover { border-color: var(--tj-laranja); color: var(--tj-laranja); }
.wrap .btn--primary, .header .btn--primary {
    background: var(--tj-laranja-solido);
    border-color: var(--tj-laranja-solido);
    color: #fff;
    font-weight: 700;
}
.wrap .btn--primary:hover, .header .btn--primary:hover {
    background: var(--tj-laranja-solido-hover);
    border-color: var(--tj-laranja-solido-hover);
    color: #fff;
}
.wrap .btn--ghost { border-color: transparent; background: none; color: var(--tj-tinta-2); }
.wrap .btn--ghost:hover { color: var(--tj-laranja); border-color: transparent; }

/* ── Restante ───────────────────────────────────────────── */
.anexos    { font-family: var(--tj-sans); font-size: 12px; color: var(--tj-tinta-2); }
.desc-item {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
    padding: 10px 14px;
}
.desc-item .em { color: var(--tj-tinta-2); font-size: 12px; }
.vazio { font-family: var(--tj-sans); color: var(--tj-tinta-2); }
.toast {
    background: var(--tj-carvao);
    color: var(--tj-branco);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
}
.toast a { color: var(--tj-laranja-claro); }


/* =============================================================
   TELA: PORTAL DE ACOMPANHAMENTO (tarefa_publica.php)

   É a página que o cliente abre pelo "Ver detalhes" do Portal do
   Cliente. As duas são a mesma jornada, e era aí que aparecia a
   emenda: saía do Portal novo e caía nesta, ainda antiga. Por isso o
   cabeçalho daqui repete o do Portal, inclusive a faixa laranja de
   3px, para o cliente não sentir troca de casa.

   Não carrega o style.css. Colisões de nome conferidas: só DUAS,
   .badge e .card, e as duas significam a mesma coisa que no resto.

   O POLLING DO CANAL MORA AQUI (api/polling_canal.php, a cada
   intervalo). Ele injeta mensagem nova montando HTML com as classes
   .msg .msg-autor .msg-texto .msg-data — todas mantidas com o mesmo
   nome. O que muda abaixo é só valor de cor, borda e tipografia;
   nenhuma regra altera estrutura, e nenhuma toca no que a função de
   polling lê ou escreve.

   ARMADILHAS DE `display`: #menuEmail, #uploadProgressWrap e
   #feedbackCanal são ligados e desligados por style.display, e o
   #uploadProgressWrap usa o reset para '' — nenhum recebe regra de
   display aqui.
   ============================================================= */

/* ── Cabeçalho, igual ao do Portal do Cliente ───────────── */
.top-bar {
    background: var(--tj-branco);
    border-bottom: 3px solid var(--tj-laranja);
    padding: 14px 20px;
}
.top-bar .sub {
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--tj-laranja);
    margin-top: 4px;
}
.btn-voltar {
    font-family: var(--tj-sans);
    font-size: 12.5px;
    color: var(--tj-tinta-2);
    border: 1.5px solid var(--tj-borda);
    background: var(--tj-branco);
}
.btn-voltar:hover { color: var(--tj-laranja); border-color: var(--tj-laranja); }

/* ── Cartão e conteúdo ──────────────────────────────────── */
.card {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    box-shadow: none;
}
.card h2 {
    font-family: var(--tj-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--tj-carvao);
    line-height: 1.2;
    letter-spacing: -.2px;
}
.meta { font-family: var(--tj-sans); font-size: 12px; color: var(--tj-tinta-2); }
.desc { font-family: var(--tj-sans); font-size: 13.5px; color: var(--tj-tinta); line-height: 1.65; }
.info-publica strong { color: var(--tj-carvao); font-weight: 700; }
.ql-editor a { color: var(--tj-laranja); }

/* ── Faixa de estado ────────────────────────────────────── */
.banner-status {
    border-radius: var(--tj-r-card);
    font-family: var(--tj-sans);
    font-size: 14px;
    font-weight: 700;
}
.banner-concluida { background: var(--tj-verde-suave); border: 1px solid var(--tj-verde); color: var(--tj-verde); }
.banner-cancelada { background: var(--tj-terra-suave); border: 1px solid var(--tj-terra); color: var(--tj-terra); }

/* ── Prazo ──────────────────────────────────────────────── */
.bloco-prazo-aberto {
    background: var(--tj-laranja-suave);
    border-left: 4px solid var(--tj-laranja);
    border-radius: 0 var(--tj-r-card) var(--tj-r-card) 0;
}
.bloco-prazo-aberto .prazo-concluida,
.bloco-prazo-aberto .prazo-subtitulo { font-family: var(--tj-sans); font-size: 13.5px; color: var(--tj-tinta); }
.bloco-prazo-aberto .prazo-aviso { font-family: var(--tj-sans); font-size: 12px; color: var(--tj-tinta-2); }
/* O contador é o número que o cliente olha: ganha a serifa e o laranja */
.contador-prazo {
    font-family: var(--tj-serif);
    font-size: 34px;
    font-weight: 600;
    color: var(--tj-laranja);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.bloco-encerramento {
    background: var(--tj-coluna);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
}
.bloco-encerramento p { font-family: var(--tj-sans); font-size: 13.5px; color: var(--tj-tinta); }
.bloco-encerramento .btn-contato {
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 14px;
    font-weight: 700;
    min-height: 44px;
}
/* Verde-escuro oficial do WhatsApp e azul da paleta: o verde claro da
   marca dá 2,3:1 com texto branco e não se lê num botão. */
.bloco-encerramento .btn-whats { background: #128C7E; }
.bloco-encerramento .btn-email { background: var(--tj-azul); }

/* ── Canal: só aparência, o polling não é tocado ────────── */
.canal-header {
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--tj-laranja);
    border-bottom: 1px solid var(--tj-borda);
    padding-bottom: 10px;
}
.btn-baixar-tudo {
    background: var(--tj-branco);
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 12px;
    color: var(--tj-tinta);
}
.btn-baixar-tudo:hover { border-color: var(--tj-laranja); color: var(--tj-laranja); background: var(--tj-laranja-suave); }

.msg { border-bottom: 1px solid var(--tj-linha); padding: 13px 0; }
.msg-autor { font-family: var(--tj-sans); font-size: 11.5px; font-weight: 700; }
.msg-autor.tiaraju { color: var(--tj-laranja); }
.msg-autor.cliente { color: var(--tj-azul); }
.msg-texto { font-family: var(--tj-sans); font-size: 13.5px; color: var(--tj-tinta); line-height: 1.6; }
.msg-data  { font-family: var(--tj-sans); font-size: 10.5px; color: var(--tj-tinta-2); }
.msg-reacao { background: var(--tj-coluna); border: 1px solid var(--tj-borda); }
.msg-reacao:hover { background: var(--tj-plano); }
.msg-reacao.minha { background: var(--tj-laranja-suave); border-color: var(--tj-laranja); }
.msg-reacao .rc { color: var(--tj-tinta-2); }

.msg-anexo-card {
    background: var(--tj-coluna);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
}
.msg-anexo-card .msg-anexo-nome { font-family: var(--tj-sans); color: var(--tj-carvao); font-weight: 700; }
.msg-anexo-card .msg-anexo-meta { font-family: var(--tj-sans); color: var(--tj-tinta-2); }
.msg-anexo-baixar { background: var(--tj-laranja-solido) !important; border-radius: var(--tj-r-chip); font-family: var(--tj-sans); font-weight: 700; }
.msg-anexo-baixar:hover { background: var(--tj-laranja-solido-hover) !important; }
.msg-anexo-img img { border-radius: var(--tj-r-ctrl); border: 1px solid var(--tj-borda); }

/* Sem `display` no .upload-progress-wrap — o JS o liga com reset ''. */
.form-msg input[type="text"], .form-msg-texto {
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13.5px;
    color: var(--tj-tinta);
}
.form-msg input[type="text"]:focus, .form-msg-texto:focus {
    outline: none;
    border-color: var(--tj-laranja);
    box-shadow: 0 0 0 3px var(--tj-laranja-suave);
}
#btnEnviar {
    background: var(--tj-laranja-solido);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-weight: 700;
    min-height: 38px;
}
#btnEnviar:hover { background: var(--tj-laranja-solido-hover); }
.upload-progress-wrap .bar > div { background: var(--tj-laranja); }


/* =============================================================
   TELAS INTERNAS CURTAS
   login.php · trocar_senha.php · admin_backups.php · radar-publisher.php

   Nenhuma carrega o style.css; todas têm CSS próprio e pequeno.

   COLISÕES CONFERIDAS:
     login e trocar senha .... nenhuma
     backups ................. .btn-sm .btn-gerar .card .vazio
     radar ................... .btn .btn-primary .btn-sm .card .campo
                               .hint .tabs .ativo

   A que quebrava era .card, com três significados diferentes: no
   Kanban é um cartão de negócio (padding 13), nos Backups é um painel
   (padding 20) e no Radar é a folha inteira da página (padding 40,
   canto de 14). A regra do Kanban venceria as outras duas e apertaria
   as duas telas. Por isso as duas são reescopadas abaixo pelo lugar
   onde vivem: `.container .card` e `body > .card`.

   ARMADILHA DE `display`: o #resultado dos Backups nasce oculto e o JS
   o liga por style.display. Nenhuma regra abaixo define display nele.

   O radar-publisher é a peça que o estudo apontou como referência de
   tom — já vinha com raio 8/14 e borda de 1,5px. Aqui ele só troca as
   cores literais pelos tokens e mantém a própria estrutura.
   ============================================================= */

/* ── Login e troca de senha ─────────────────────────────── */
.login-box, .box {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: none;
    padding: 40px;
}
.login-box h1, .box h1 {
    font-family: var(--tj-serif);
    font-size: 21px;
    font-weight: 600;
    color: var(--tj-carvao);
    letter-spacing: -.2px;
}
.box label {
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tj-tinta-2);
    margin-bottom: 5px;
}
.login-box input[type="password"], .box input[type="password"] {
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    padding: 12px 14px;
}
.login-box input:focus, .box input:focus {
    border-color: var(--tj-laranja);
    box-shadow: 0 0 0 3px var(--tj-laranja-suave);
}
.login-box button, .box button {
    background: var(--tj-laranja-solido);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-weight: 700;
    min-height: 44px;
}
.login-box button:hover, .box button:hover { background: var(--tj-laranja-solido-hover); }
.login-box button:disabled, .box button:disabled { background: var(--tj-tinta-4); }

.erro    { background: var(--tj-terra-suave); color: var(--tj-terra); border-radius: var(--tj-r-ctrl); font-family: var(--tj-sans); }
.sucesso { background: var(--tj-verde-suave); color: var(--tj-verde); border-radius: var(--tj-r-ctrl); font-family: var(--tj-sans); }
.voltar  { font-family: var(--tj-sans); font-size: 12.5px; color: var(--tj-tinta-2); }

/* ── Backups ────────────────────────────────────────────── */
.topo { background: var(--tj-branco); border-bottom: 1px solid var(--tj-borda); }
.topo-logo {
    font-family: var(--tj-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--tj-carvao);
}
.topo-nav { gap: 16px; }
.subtitulo { font-family: var(--tj-sans); font-size: 13px; color: var(--tj-tinta-2); }

/* Painel, não cartão de negócio: precisa do respiro que o Kanban não dá */
.container .card {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    padding: 22px 24px;
    margin-bottom: 20px;
}
.container .card:hover { background: var(--tj-branco); border-color: var(--tj-borda); }
.container .card h2 {
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--tj-laranja);
}
.btn-gerar {
    background: var(--tj-laranja-solido);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
    font-weight: 700;
}
.btn-gerar:hover { background: var(--tj-laranja-solido-hover); }
.btn-gerar:disabled { background: var(--tj-tinta-4); }
/* Sem `display` no .resultado — o JS o liga. */
.resultado { border-radius: var(--tj-r-ctrl); font-family: var(--tj-sans); }
.resultado.ok   { background: var(--tj-verde-suave); color: var(--tj-verde); }
.resultado.erro { background: var(--tj-terra-suave); color: var(--tj-terra); }
.tag-recente {
    background: var(--tj-verde-suave);
    color: var(--tj-verde);
    font-family: var(--tj-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: var(--tj-r-chip);
    padding: 3px 8px;
}
.btn-dl {
    background: var(--tj-branco);
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    color: var(--tj-tinta);
}
.btn-dl:hover { background: var(--tj-laranja-suave); border-color: var(--tj-laranja); color: var(--tj-laranja); }
.cron-box {
    background: var(--tj-coluna);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    color: var(--tj-tinta-2);
}
.cron-box code { background: var(--tj-carvao); color: var(--tj-branco); border-radius: var(--tj-r-chip); }
.topo-nav .btn-logout {
    background: var(--tj-terra-suave);
    color: var(--tj-terra);
    border: 1.5px solid var(--tj-terra-suave);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
}
.topo-nav .btn-logout:hover { border-color: var(--tj-terra); background: var(--tj-terra-suave); }

/* ── Radar Publisher ────────────────────────────────────── */
/* A folha da página inteira, não um cartão de lista. */
body > .card {
    background: var(--tj-branco);
    border: 1px solid var(--tj-borda);
    border-radius: var(--tj-r-card);
    box-shadow: none;
    padding: 40px;
    margin-bottom: 0;
}
body > .card:hover { background: var(--tj-branco); border-color: var(--tj-borda); }
body > .card h1 {
    font-family: var(--tj-serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--tj-carvao);
    letter-spacing: -.3px;
}
body > .card h2 {
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--tj-laranja);
}
.tab-btn {
    background: var(--tj-branco);
    font-family: var(--tj-sans);
    font-size: 12.5px;
    color: var(--tj-tinta-2);
    min-height: 38px;
}
.tab-btn.ativo { background: var(--tj-laranja-solido); color: #fff; font-weight: 700; }
.btn-outline { background: var(--tj-branco); border: 1.5px solid var(--tj-borda); color: var(--tj-tinta); }
.btn-outline:hover { border-color: var(--tj-laranja); background: var(--tj-laranja-suave); }
.btn-laranja { background: var(--tj-laranja-solido); color: #fff; }
.btn-cinza   { background: var(--tj-coluna); color: var(--tj-tinta); border: 1.5px solid var(--tj-borda); }
.btn-danger  { background: var(--tj-terra-suave); color: var(--tj-terra); border: 1.5px solid var(--tj-terra-suave); }
.btn-danger:hover { border-color: var(--tj-terra); background: var(--tj-terra-suave); }

.erro-box    { background: var(--tj-terra-suave); border: 1px solid var(--tj-terra); color: var(--tj-terra); border-radius: var(--tj-r-ctrl); }
.erro-diag   { background: var(--tj-coluna); border: 1px solid var(--tj-borda); color: var(--tj-tinta-2); border-radius: var(--tj-r-chip); }
.sucesso-box { background: var(--tj-verde-suave); border: 1.5px solid var(--tj-verde); border-radius: var(--tj-r-card); }
.sucesso-titulo { font-family: var(--tj-serif); font-size: 19px; font-weight: 600; color: var(--tj-verde); }
.url-label, .wa-label {
    font-family: var(--tj-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: var(--tj-tinta-2);
}
.url-row { background: var(--tj-branco); border: 1.5px solid var(--tj-verde); border-radius: var(--tj-r-ctrl); }
.url-row a { color: var(--tj-laranja); font-family: var(--tj-sans); }
.wa-textarea {
    border: 1.5px solid var(--tj-borda);
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    color: var(--tj-tinta);
    background: var(--tj-branco);
}
.wa-textarea:focus { border-color: var(--tj-laranja); box-shadow: 0 0 0 3px var(--tj-laranja-suave); }
.wa-hint { color: var(--tj-laranja); font-family: var(--tj-sans); }
.sep { border-top: 1px solid var(--tj-borda); }
.radar-item { border-bottom: 1px solid var(--tj-linha); }
.radar-nome { font-family: var(--tj-sans); font-size: 13.5px; font-weight: 700; color: var(--tj-carvao); }
.radar-meta { font-family: var(--tj-sans); font-size: 11.5px; color: var(--tj-tinta-2); }
.lista-vazia { font-family: var(--tj-sans); color: var(--tj-tinta-2); }


/* =============================================================
   NORMALIZAÇÃO DE CANTO

   Os blocos por tela cobriram os controles que cada uma expõe, mas
   sobrou uma cauda de botões e campos com o raio antigo (3, 4, 5 e 7px)
   que só aparece em modal aberto ou em área que ficou fora do escopo.
   O efeito é o que você notou: na MESMA tela, "Cancelar" e "Salvar e
   fechar" com 8px e "Salvar" com 5px.

   Este bloco só muda `border-radius`. Nada de cor, tamanho, espaço ou
   posição — e por isso alcança também as áreas sensíveis (canal, cálculo
   de produto, atalhos de IA) sem tocar em nada que elas fazem.

   O sistema tem três raios: 6 para selo, 8 para controle, 10 para
   cartão. A pílula de filtro era a quarta exceção, em 20 — e era ela
   que dava a impressão de dois arredondamentos diferentes na mesma
   tela. Agora usa o mesmo canto dos botões. Continuam redondos só os
   contadores (.col-count, .badge-nao-lidas), que são bolha de número.
   ============================================================= */

/* =============================================================
   ALTURA DE CONTROLE

   Na mesma fileira de Tarefas, "Exportar" media 37,4px e "Exportar
   completo" 33. Mesma classe, mesmo padding, mesma fonte. São duas
   causas somadas:

   1. "Exportar" é um <a> e os outros dois são <button>. O link herda o
      line-height do corpo (1,55 = 19,4px); o botão usa `normal` (~15px).
      Com o mesmo padding, a caixa sai 4px maior no link.
   2. O botão principal tem padding vertical de 11px contra 8px dos
      secundários, o que dava mais 5px de diferença.

   Padding não resolve isso, porque o que varia é o conteúdo da caixa,
   não a margem interna. A saída é fixar a altura e centralizar por
   flex: aí tag, fonte e line-height deixam de importar, e o padding
   passa a controlar só a largura.
   ============================================================= */
.btn, .btn-primary, .btn-sm, .fbtn, .filtro-btn,
.btn-save, .btn-save-outline, .btn-cancel, .btn-excluir,
.btn-ia, .btn-pdf, .btn-enviar, .btn-gerar,
.tab, .tipo-tab, .wrap .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-height: 38px;
    box-sizing: border-box;
}
/* No cabeçalho o .btn-sm não é botão, é link de texto: fica de fora
   da altura fixa, senão o menu ganha 38px de caixa por item. */
.header-right .btn-sm { min-height: 0; display: inline-block; }

/* ── Controles SEM CLASSE ────────────────────────────────────
   A regra acima é por classe, e boa parte dos controles do Negócio não
   tem classe nenhuma: são estilizados só por `style` inline. Por isso
   continuavam com a altura de cada padding — no topo, "Relatório" 38,
   "Criar negócio" 28, a etapa 33 e "Excluir" 28; na área de tarefas,
   prazo 40 e os seletores 36; na de produtos, campos 34 e o botão 19.

   Aqui o alvo é o CONTÊINER, não a classe do controle. Textarea fica
   de fora: ela tem altura própria e cresce com o conteúdo. */
.page-content > div:has(> div > .page-title) > div:last-child > a,
.page-content > div:has(> div > .page-title) > div:last-child > button,
.page-content > div:has(> div > .page-title) > div:last-child select,
.form-tarefa input:not([type="checkbox"]):not([type="radio"]),
.form-tarefa select,
.form-tarefa button,
.form-tarefa-row input:not([type="checkbox"]):not([type="radio"]),
.form-tarefa-row select,
.form-tarefa-row button,
.add-prod-form input:not([type="checkbox"]):not([type="radio"]),
.add-prod-form select,
.add-prod-form button,
.prod-search-wrap input[type="text"],
.desconto-wrap input[type="number"],
.desconto-wrap .toggle-modo,
.etapa-select,
/* Dentro de modal vale o mesmo: os campos também são inline e ficavam
   em 34 e 36 ao lado de botões de 38. A barra do editor de texto fica
   de fora — os botões dela são ícones de 24px, não controles de
   formulário, e 38 os deformaria. */
.modal input:not([type="checkbox"]):not([type="radio"]),
.modal select, .modal button,
.modal-sm input:not([type="checkbox"]):not([type="radio"]),
.modal-sm select, .modal-sm button,
.modal-lg input:not([type="checkbox"]):not([type="radio"]),
.modal-lg select,
.modal-lg button:not([class*="ql-"]),
#modalSol input:not([type="checkbox"]):not([type="radio"]),
#modalSol select, #modalSol button,
#modalEditarProduto input:not([type="checkbox"]):not([type="radio"]),
#modalEditarProduto select, #modalEditarProduto button,
#modalCriarNegocio input:not([type="checkbox"]):not([type="radio"]),
#modalCriarNegocio select, #modalCriarNegocio button,
#modalConfirmExcluir button,
.form-msg input[type="text"], #btnEnviar,
.campo input:not([type="checkbox"]):not([type="radio"]), .campo select,
/* Campos de busca: ficavam em 36 ao lado dos botões de 38 na mesma fileira */
.busca-wrap input, .hist-busca, .busca-tarefa, .hist-sel, .status-select {
    min-height: 38px;
    box-sizing: border-box;
}
/* O campo de descrição do produto ocupa a linha inteira e cresce:
   altura mínima maior, para não virar uma tira de 38px. */
.add-prod-form .f-desc { min-height: 60px; }

/* ── Folga dentro do botão ───────────────────────────────────
   Os botões "Adicionar" destas fileiras não têm classe NEM style
   inline: são <button> puros, e por isso ficavam com padding zero —
   60px de caixa para 56px de texto, dois pixels de ar de cada lado.
   A altura eu já tinha resolvido; a largura continuava colada. */
.add-prod-form button, .form-tarefa button, .form-tarefa-row button,
.form-inline button {
    padding-left: 20px;
    padding-right: 20px;
}
/* O alternador % / R$ troca de rótulo: precisa caber "R$" sem apertar */
.desconto-wrap .toggle-modo { padding-left: 14px; padding-right: 14px; }
/* Botões da seção de produto dentro do modal de solicitação */
.tp-btn-add, .tp-btn-reg { padding-left: 18px; padding-right: 18px; }

/* Os três campos curtos da fileira dividem 90px com o padding, e o de
   data ainda carrega o ícone do seletor: em 104px ele ainda cortava,
   mostrando "02/09/202". A data ganha largura própria. */
.add-prod-form .f-sm { width: 104px; }
.add-prod-form input[type="date"].f-sm { width: 140px; }

/* Este submit também não tem classe nem style inline, então nunca
   recebeu cor: ficava com o cinza padrão do navegador ao lado de
   botões laranja. O alternador % / R$ é irmão dele e NÃO entra —
   por isso o alvo é o type, não a tag. */
.add-prod-form button[type="submit"] {
    background: var(--tj-laranja-solido);
    color: #fff;
    border: none;
    border-radius: var(--tj-r-ctrl);
    font-family: var(--tj-sans);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.add-prod-form button[type="submit"]:hover { background: var(--tj-laranja-solido-hover); }

/* Campo de data e de data-hora: o seletor nativo do navegador tem
   conteúdo mais alto que uma linha de texto, e com padding de 10px o
   campo fecha em 40 — dois a mais que todo o resto da fileira. Com
   padding menor o conteúdo cabe e quem manda passa a ser o mínimo.
   O <select> tem o mesmo comportamento: a caixa de opção é mais alta
   que a linha de texto. */
input[type="date"], input[type="datetime-local"], input[type="time"] {
    padding-top: 7px;
    padding-bottom: 7px;
}
.form-grid select, .modal select, .modal-sm select, .modal-lg select,
#modalSol select, #modalEditarProduto select, #modalCriarNegocio select {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* As fileiras que guardam controle são flex, e o padrão do flex é
   ESTICAR o filho até a altura da linha. Com altura mínima definida
   isso vira um puxão para cima: o item cresce além dos 38px em vez de
   parar neles. Centralizar em vez de esticar prende a altura. */
.filtros, .filtros-status, .filtros-btns, .page-top-actions,
.tab-actions, .acoes, .tabs, .wrap .tabs, .tipo-tabs, .form-tarefa-row,
.form-inline, .modal-footer {
    align-items: center;
}

/* ── Controle: botão, campo, seletor ── 8px ─────────────── */
.btn-save, .btn-save-outline, .btn-cancel, .btn-excluir, .btn-excluir-modal,
.btn-ia, .btn-pdf, .btn-whats, .btn-copiar-whats, .btn-ia-copiar, .btn-dl,
.btn-gerar, .btn-anexar, .btn-remove, .btn-voltar,
.tp-btn-add, .tp-btn-reg, .tp-ia-btn-usar, .tp-ia-btn-cancel,
.canal-edit-salvar, .canal-edit-cancelar, .canal-emoji-btn,
.fmt-tab, .alerta,
.campo-linha input, .narrativa-area, .hist-sel, .status-select, .etapa-select,
.tipo-item-sel, .status-form select,
.add-prod-form select, .add-prod-form input, .add-prod-form .f-desc,
.neg-busca, .neg-dropdown, .tp-drop, .tp-form-box input,
.tp-ia-nome-inp, .tp-ia-desc-inp, .ia-input, .compartilhar-textarea,
.modal input, .modal select, .modal textarea,
.modal-sm input, .modal-sm select, .modal-sm textarea,
.modal-lg input, .modal-lg select, .modal-lg textarea,
.form-grid input, .form-grid select, .form-grid textarea,
.form-inline input, .form-inline select, .form-inline textarea, .form-inline button,
.form-tarefa input, .form-tarefa textarea, .form-tarefa button,
.busca-wrap input, .upload-area {
    border-radius: var(--tj-r-ctrl);
}

/* O par campo + alternador do desconto é UM controle partido ao meio:
   o raio tem de continuar só nas pontas de fora, senão os dois se
   separam visualmente e o botão deixa de parecer colado ao campo. */
.desconto-wrap input[type="number"] { border-radius: var(--tj-r-ctrl) 0 0 var(--tj-r-ctrl) !important; }
.desconto-wrap .toggle-modo         { border-radius: 0 var(--tj-r-ctrl) var(--tj-r-ctrl) 0; }

/* ── Selo e apoio ── 6px ────────────────────────────────── */
.import-tip, .tp-ia-aviso, .tp-nova-ok, .tp-ia-sugestao,
.canal-msg-acao-btn, .canal-prazo-estender, .canal-anexos-preview,
.upload-preview, .ia-caminho, .ia-pedido, .canal-campos-bar,
.canal-whats-sugestao, .tp-form-box {
    border-radius: var(--tj-r-chip);
}

/* ── Cartão e modal ── 10px ─────────────────────────────── */
.modal, .modal-sm, .modal-lg, .tp-ia-card {
    border-radius: var(--tj-r-card);
}

/* A bolha do canal NÃO entra: os cantos dela são assimétricos de
   propósito, é o "bico" que aponta para quem falou. */


/* ─────────────────────────────────────────────────────────────
   7. MOBILE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .header { padding: 11px 14px; gap: 12px; }
    /* Sem isto o logo é espremido pelo menu que rola ao lado */
    .header-left { flex-shrink: 0; }
    .header-right { gap: 16px; }

    /* O style.css já empilha as colunas com width:100%!important, mas o
       max-width:300px da regra base continua valendo e sobra faixa vazia
       à direita. Sem `display` aqui — o JS controla isso (ver observação 1). */
    .kanban-wrapper { padding: 14px 12px 26px; }
    .kanban-col { max-width: none; }

    .page-content { padding: 20px 16px 36px; }
    .hist-topo { gap: 10px; align-items: stretch; }
    .hist-topo h1 { font-size: 24px; }
    /* No desktop o seletor é empurrado para a direita por margin-left:auto.
       Em tela estreita ele vira um campo de largura inteira. */
    .hist-sel { margin-left: 0 !important; max-width: 100%; width: 100%; }

    .hist-resumo { gap: 20px 28px; padding: 16px 18px; }
    .hist-resumo-valor { font-size: 21px; }
    .hist-bloco { padding: 18px 16px 20px; }

    /* ── Cabeçalho desalinhado do conteúdo no celular ────────────────
       Defeito antigo do style.css, não da camada nova: no mobile ele faz
       `table {display:block}` e `thead,tbody,tfoot {display:table;width:100%}`.
       Isso desliga o algoritmo de tabela — cabeçalho e corpo viram DUAS
       tabelas independentes e cada uma calcula a largura das colunas por
       conta própria. Com nome de produto longo as duas divergem e o valor
       deixa de cair embaixo do título da coluna.

       A correção devolve a tabela ao fluxo de tabela e passa a rolagem
       para o contêiner de cima. Vale para as tabelas que esta camada já
       governa; ao trazer uma tela nova, acrescente a tabela dela aqui. */
    table.hist-tabela,
    table.prev-table,
    table.prod-table,
    table.tabela-tarefas,
    table.tabela-empresas,
    table.tabela-contatos,
    #tab-solicitacoes table { display: table; overflow-x: visible; }
    table.prod-table thead, table.tabela-tarefas thead { display: table-header-group; width: auto; }
    table.prod-table tbody, table.tabela-tarefas tbody { display: table-row-group;    width: auto; }
    table.prod-table tfoot, table.tabela-tarefas tfoot { display: table-footer-group; width: auto; }
    /* O .panel já ganhou overflow-x:auto no bloco do Relatório, e é ele
       que rola aqui também. */
    table.prod-table { min-width: 600px; }
    table.hist-tabela thead, table.prev-table thead,
    table.tabela-empresas thead, table.tabela-contatos thead,
    #tab-solicitacoes table thead { display: table-header-group; width: auto; }
    table.hist-tabela tbody, table.prev-table tbody,
    table.tabela-empresas tbody, table.tabela-contatos tbody,
    #tab-solicitacoes table tbody { display: table-row-group; width: auto; }
    table.hist-tabela tfoot, table.prev-table tfoot { display: table-footer-group; width: auto; }

    table.hist-tabela { min-width: 680px; }
    table.hist-tabela th { padding: 10px 12px; }

    /* A tabela de prévia do relatório não tem contêiner de rolagem próprio:
       quem rola é o painel que a contém. */
    .panel { overflow-x: auto; }
    table.prev-table { min-width: 620px; }

    /* ── Catálogo ─────────────────────────────────────────────────
       O topo é uma linha só no desktop. Em tela estreita o título de
       29px quebra em quatro linhas e empurra os botões para fora da
       tela. Vira coluna, e a fila de ações rola na horizontal. */
    .page-top { flex-direction: column; align-items: stretch; gap: 14px; }
    .page-top h2 { font-size: 23px !important; }
    .page-top-actions {
        gap: 14px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .page-top-actions::-webkit-scrollbar { display: none; }
    .page-top-actions > * { flex-shrink: 0; white-space: nowrap; }

    .pasta-header { padding: 13px 16px; }
    .prod-item { padding: 12px 16px; gap: 12px; }
    /* Sem isto o preço quebra em duas linhas ("R$" / "850,00") */
    .prod-preco { white-space: nowrap; }

    /* ── Tarefas ──────────────────────────────────────────────────
       No celular o style.css esconde as colunas 4 em diante e sobram
       P, Tarefa e Solicitante. Com o padding do desktop elas somavam
       384px em 375 e a última era cortada. */
    .tabela-tarefas th { padding: 10px 11px; }
    .tabela-tarefas td { padding: 12px 11px; }
    .filtros { flex-wrap: wrap; gap: 12px; }
    .filtros h2 { font-size: 23px !important; }
    .busca-wrap input { width: 100%; max-width: 100%; }
    .busca-wrap { margin-left: 0; width: 100%; }

    /* ── Negócio ──────────────────────────────────────────────────
       O topo da tela é um flex com o título de um lado e os botões do
       outro, num div SEM CLASSE e com o display no style inline. Em
       375px os dois somam 555px e os botões passam por cima do título.
       Como não há classe para pegar, o alvo é estrutural: o div que
       contém o .page-title. O flex-wrap não está no inline, então não
       precisa de !important. */
    .page-content > div:has(> div > .page-title) {
        flex-wrap: wrap;
        gap: 12px;
    }
    /* A fileira de ações também é um flex sem classe, e os quatro
       controles somam 364px em 343 disponíveis: o último ficava
       cortado. Ela passa a quebrar em duas linhas. */
    .page-content > div:has(> div > .page-title) > div:last-child {
        flex-wrap: wrap;
    }
    .page-title { font-size: 23px; }

    /* ── Clientes ─────────────────────────────────────────────────
       Quatro abas não cabem em 375px: cada uma quebrava em duas linhas
       e a última ficava cortada. Uma linha só, rolando na horizontal. */
    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        margin-bottom: 18px;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { white-space: nowrap; flex-shrink: 0; padding: 9px 15px; }
    .tab-actions { flex-shrink: 0; }

    /* ── Portal do Cliente ────────────────────────────────────────
       O item de tarefa é uma linha só: ponto, informação, badge e
       botão. Em tela estreita a informação é quem cede, e o título
       vira uma coluna de uma palavra por linha. Dando a largura
       inteira ao bloco de informação, a badge e o botão descem para
       a linha de baixo, alinhados com o texto.
       `flex-wrap`, não `display`: o filtro depende do display. */
    .tarefa-item { flex-wrap: wrap; }
    .tarefa-info { flex: 1 1 100%; }
    .tarefa-badge, .tarefa-link-btn { margin-left: 22px; }
    .secao-header { padding: 13px 15px; }
    .secao-body   { padding: 14px 15px; }
    .filtros-wrap { padding: 13px 15px 0; }
    table.hist-tabela td { padding: 12px; }
    .hist-tabela-wrap { -webkit-overflow-scrolling: touch; }
}
