/* ============================================================================
   Identidade visual — Agnelo & Jardim
   ----------------------------------------------------------------------------
   Carrega DEPOIS do app.css e redefine os mesmos nomes de variável. Como o
   app.css já usa var(--navy), var(--cyan) etc. em todo lugar, trocar os valores
   aqui re-pelicula o sistema inteiro sem reescrever 900 linhas.

   Por que sair do azul-marinho + ciano: é a combinação que todo painel gerado
   por IA usa. O sistema ficava correto e sem cara de nada.

   Cores e tipografia saem do manual da marca (jan/2024), com os nomes de lá:
     primárias  — chumbo #171717, cobre #493F10
     contraste  — #968162, #D8C9AD
     secundárias— cinza #B3B3B3, branco
   Tipografia: IBM Plex Sans e IBM Plex Mono. O verde profundo da lateral ficou
   por escolha do escritório e conversa com o cobre.

   Onde a cor da marca não passa em contraste, ela vira decoração e uma variante
   escurecida assume o texto — o caqui puro dá 3,41:1 sobre o papel, abaixo dos
   4,5:1 exigidos para leitura.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
/* TIPO-02 (Padrao-Visual/design-system.md #1.3): Cormorant Garamond so no nome do
   escritorio -- login, erro e e-mail. Nunca em titulo de tela, numero ou
   botao. Token isolado para nao colidir com --fonte-tit (IBM Plex). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&display=swap');

:root {
  --acao:        #16302a;   /* BTN-01: botão principal (verde da marca) */
  --acao-hover:  #0f2620;
  --acao-texto:  #ffffff;
  /* ---- superfícies: papel quente, não cinza-azulado frio ---- */
  --bg:        #f5f2ea;   /* areia da marca, bem diluída */
  --card:      #ffffff;
  --line:      #e3ddd0;

  /* ---- tinta ---- */
  --ink:       #1b201d;
  --muted:     #555b57;   /* COR-07: secundário do catálogo (era #6d7370 até 16/09/2026) */

  /* ---- verde profundo: barra lateral e superfícies escuras ---- */
  --navy:      #16302a;   /* nome antigo mantido: o app.css inteiro chama assim */
  --navy-700:  #0f2620;
  --navy-800:  #0a1c17;

  /* ---- acento: o #968162 do manual, escurecido ----
     --cyan é o nome antigo do acento no app.css (link, estado ativo).
     O tom puro dá 3,41:1 sobre o papel e reprovaria em texto; este dá 4,85:1.
     O puro continua disponível como --contraste, para uso decorativo. */
  --cyan:      #7a6949;
  --cyan-600:  #655437;
  --anel-foco: rgba(122, 105, 73, .18);   /* anel de foco dos campos — mesmo tom do --cyan */

  /* ---- balões do chat: a cor diz de onde a mensagem saiu ----
     Ver `models.OrigemMensagem`. O verde já era o da saída; os outros dois
     nasceram com ele. O terceiro é cinza QUENTE de propósito: cinza frio ao
     lado do papel areia lê como erro de impressão. Azul não entra — a
     identidade não tem azul. */
  --bolha-nos:   #e8f5e9;   --bolha-nos-b:   #cfe6d2;   /* saiu daqui, do CRM */
  --bolha-ia:    #fbf0d5;   --bolha-ia-b:    #ecdcae;   /* agente de IA */
  --bolha-fora:  #eeebe3;   --bolha-fora-b:  #dcd7ca;   /* app do WhatsApp */

  /* ---- cores da marca, com os nomes do manual ---- */
  --chumbo:    #171717;   /* primária */
  --cobre:     #493f10;   /* primária */
  --contraste: #968162;
  --areia:     #d8c9ad;
  --cinza:     #b3b3b3;   /* secundária */

  /* ---- semânticas, calibradas para o fundo quente ---- */
  /* linha/cartão em destaque (lead marcado, conversa marcada). Era o literal
     #fffdf5 escrito TRÊS vezes no app.css, num escopo diferente cada vez:
     `.chat-item.destacada`, `.crm-tabela tr.destacada` e `.conv-linha.destacada`
     — e mais três vezes o par escuro. Seis declarações, um conceito. */
  --destaque:  #fffdf5;
  /* COR-08 do catálogo (Padrao-Visual/design-system.md §1.2) — cabeçalho de tabela.
     Só esse tom faltava como token; --line já é o COR-08 "separar". */
  --linha-cabecalho: #ece7dc;
  --red:       #b3402f;
  --green:     #2f6d4f;
  --orange:    #b3762a;
  --purple:    #6b519a;
  --automacao: #4f6b7a;   /* COR-16: cor das automações */
  /* COR-09 e COR-10 (Padrao-Visual/design-system.md) — as faixas de aviso.
     Antes eram literais no app.css (`.flash` verde #e3f6ed e `.banner` âmbar com
     degradê) e copiados à mão em style= por dezenas de telas. 16/09/2026. */
  --sucesso-fundo: #e6f0ea;  --sucesso-borda: #b9d3c3;  --sucesso-texto: #1f5a3c;
  --atencao-fundo: #f6e9dd;  --atencao-borda: #e3c4a6;  --atencao-texto: #8a4b1c;
  /* COR-15 (Padrao-Visual/design-system.md) -- nome para o #e0455a que ja vivia
     solto em var(--vermelho,#e0455a) em duas telas (crm_config_categorias.html
     e a tela do chat do site). 17/09/2026 (tarefa d4). Corrigido no mesmo dia (tarefa
     d5): #e0455a media 3,63:1 no claro, abaixo do minimo 4,5:1. Aponta agora
     para o mesmo valor de --red (COR-11) deste tema, 5,09:1. Token separado
     permanece -- --erro-texto e so texto solto, --red tambem serve fundo de
     botao e borda; ver relatorio da tarefa d5. */
  --erro-texto: #b3402f;

  /* ---- escala de raio: três degraus, não um valor por componente ---- */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 14px;

  /* ---- escala de espaço (4px) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* ---- espessura de borda: DUAS, e a diferença entre elas é de significado
          (Fase 6, item A).

     A régua da Fase 6 é "toda borda é 1px", e ela vale para o que a borda
     costuma ser: uma linha que SEPARA — contorno de cartão, divisória de
     linha de tabela, moldura de campo. Essa é a `--borda`, e quando aparece
     um 2px nesse papel é descuido de quem copiou, não decisão.

     Só que ao varrer os 26 usos de 2px/3px do sistema, a maioria não estava
     separando nada: era barra de acento — a faixa colorida no topo da coluna
     do funil, o sublinhado da aba ativa, a marca à esquerda de um item em
     destaque. Ali a espessura É o sinal; achatar para 1px apagaria a
     informação e deixaria a tela "certa" pela régua e pior de ler.

     Então o padrão são dois tokens com nomes que dizem o papel. Borda nova
     que não seja um destes dois é para ser discutida, não escrita solta. */
  --borda: 1px;         /* separa: cartão, tabela, campo, divisória */
  --barra-acento: 3px;  /* marca: aba ativa, coluna do funil, item destacado */

  /* ---- sombra: um degrau só, discreto. Densidade se resolve com linha,
          não com sombra em tudo ---- */
  --shadow: 0 1px 2px rgba(27, 32, 29, .06), 0 1px 1px rgba(27, 32, 29, .04);

  /* ---- vidro líquido: raio e blur por camada ----
     --r-glass é um degrau áureo acima do --r-lg (14 × φ ≈ 22.6) — não um valor
     arbitrário. Camadas mais transparentes (header) levam blur/saturação mais
     fortes para compensar; o menu (mais opaco) pode usar menos. */
  --r-btn: var(--r-md);
  --r-glass: 22px;
  --glass-blur-header: 22px;   --glass-saturate-header: 160%;
  --glass-blur-modal:  20px;   --glass-saturate-modal:  150%;
  --glass-blur-menu:   18px;   --glass-saturate-menu:   140%;
  --glass-bg-header: rgba(255, 255, 255, .62);
  --glass-bg-modal:  rgba(255, 255, 255, .72);
  --glass-bg-menu:   rgba(255, 255, 255, .82);
  --glass-border: rgba(255, 255, 255, .55);
  --glass-shadow: 0 1px 2px rgba(27, 32, 29, .08), 0 20px 44px rgba(27, 32, 29, .16);

  /* ---- fontes ---- */
  --fonte-ui:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-tit:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-marca: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fonte-marca: 'Cormorant Garamond', Georgia, serif;   /* TIPO-02: so no nome do escritorio */
}

body { font-family: var(--fonte-ui); }

h1, h2, h3 { font-family: var(--fonte-tit); font-weight: 600; letter-spacing: 0; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

/* `.brand-txt` (nome do escritório na barra) saiu em 15/09/2026 — a barra
   passou a ser sempre recolhida (só a marca), decisão do escritório; ver
   ATUALIZACOES.md. Regra removida daqui e de app.css/base.html junto. */

/* Números que não dançam ao trocar de valor — importa em coluna de data,
   valor e número de processo, que é metade deste sistema. */
.mono, table td, .kpi, .num, .cal .dn, .tempo-hora {
  font-variant-numeric: tabular-nums;
}
.mono { font-family: var(--fonte-mono); }

/* ---- foco visível de verdade, para teclado ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- raio coerente: o app.css tinha 8, 9, 10, 12, 18px sem critério ---- */
.card, .modal { border-radius: var(--r-lg); }
.btn, input, select, textarea, .fld input, .fld select { border-radius: var(--r-md); }
.tag, .chip { border-radius: var(--r-sm); }

/* BTN-01: a cor do botão principal mora no `.btn` base (app.css), via os
   tokens --acao / --acao-hover / --acao-texto definidos no :root e no
   html.escuro abaixo. Até 16/09/2026 havia aqui uma regra por cima com
   `:not(.ghost):not(.danger):not(.sm)` que pintava de verde só parte dos
   botões; o botão pequeno escapava e ficava no caqui antigo. */

/* A marca de verdade no lugar do quadrado com as iniciais. */
.brand .logo, .menu-abrir .logo {
  background: var(--navy);
  border-radius: var(--r-sm);
  padding: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand .logo img, .menu-abrir .logo img { width: 100%; height: 100%; display: block; mix-blend-mode: lighten; }

/* ---- modo escuro: superfícies quentes-escuras, não azul-marinho ----

   Atenção a `--navy`: no app.css ele faz DUAS coisas — fundo da barra lateral
   e cor de texto em destaque (título de linha, nome de prazo). Escurecê-lo aqui
   apagou todo esse texto sobre card escuro. No escuro ele vira claro (é texto),
   e o fundo da lateral é dito à parte, logo abaixo. */
html.escuro {
  --acao:        #968162;   /* ESC-02: principal em caqui no escuro */
  --acao-hover:  #8b785b;
  --acao-texto:  #171717;   /* chumbo: 4,79:1 sobre o caqui */
  --bg:    #141816;
  --card:  #1b211e;
  --line:  #2b332f;
  --ink:   #e8e6e1;
  --muted: #9aa19c;
  --navy:  #e6e4df;          /* texto em destaque, não fundo */
  --navy-700: #d8d5ce;
  --navy-800: #cbc7be;
  --cyan:  #c7ae86;          /* caqui clareado: 8,39:1 sobre o fundo escuro */
  --cyan-600: #d8c9ad;
  --anel-foco: rgba(199, 174, 134, .22);
  --bolha-nos:   #1c3a2b;   --bolha-nos-b:   #27523c;
  --bolha-ia:    #3a3218;   --bolha-ia-b:    #554825;
  --bolha-fora:  #262a27;   --bolha-fora-b:  #363b37;
  --red:   #e2705c;
  --green: #5aa583;
  --orange:#d99a45;
  --purple:#a08ac9;
  --automacao:#8aa6b5;
  --sucesso-fundo: #12301f;  --sucesso-borda: #1e5638;  --sucesso-texto: #9ae6bb;
  --atencao-fundo: #2e2016;  --atencao-borda: #5a3a22;  --atencao-texto: #e8b48c;
  /* COR-15 -- par escuro decidido em 17/09/2026 (tarefa d5): #e0455a media
     4,41:1 no escuro, abaixo do minimo 4,5:1. Aponta agora para o mesmo valor
     de --red (COR-11) deste tema, 5,72:1. Token separado permanece pelo mesmo
     motivo do par claro; ver relatorio da tarefa d5. */
  --erro-texto: #e2705c;
  --destaque: #231f13;
  --linha-cabecalho: #232b26; /* par escuro do COR-08: um degrau acima do --card */

  /* vidro líquido no escuro: blur/saturação/raio não mudam (física do efeito,
     não cor) — só o fundo e o brilho da borda precisam de par escuro */
  --glass-bg-header: rgba(27, 33, 30, .55);
  --glass-bg-modal:  rgba(27, 33, 30, .72);
  --glass-bg-menu:   rgba(27, 33, 30, .82);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 20px 44px rgba(0, 0, 0, .55);
}
/* o verde profundo da lateral é fixo nos dois temas — é a âncora da marca */
html.escuro .side { background: #11201c; }
html.escuro .brand .logo, html.escuro .menu-abrir .logo { background: #1d3b33; color: #eae7e0; }

/* Não há regra de botão só para o escuro: o oliva da marca com texto branco dá
   10,49:1 nos DOIS temas, então uma regra só serve os dois. (Antes o botão usava
   o acento como fundo, e no escuro o acento clareado deixava branco-sobre-claro
   em 2,14:1 — reprovado. Trocar para o oliva resolveu na origem.) */

/* ---- movimento discreto: 150-250ms, e nada se a pessoa pediu menos ---- */
.btn, .nav, .subitem, .pilula, .tag, .card, a {
  transition: background-color .16s ease, color .16s ease,
              border-color .16s ease, opacity .16s ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---- alinhamento do ícone SVG ----
   Emoji ficava na linha de base do texto; SVG precisa ser dito. */
.ico { display: block; flex: 0 0 auto; }
.nav .ic, .menu-toggle,
.abas a, .btn { display: inline-flex; align-items: center; }
.nav .ic { justify-content: center; }
.menu-toggle { justify-content: center; }
.btn .ico, .pilula .ico { margin-right: 6px; }

/* ---- respiro vertical entre quadros empilhados na coluna (03/09/2026) ----

   O `.card` nunca teve margem — nem aqui, nem no app.css, nem no celular.css.
   O respiro que existe em algumas telas é acidente: `style="margin-top:16px"`
   escrito à mão, em 41 dos 291 cards do sistema. Onde ninguém escreveu, os
   quadros brancos colam um no outro. Foi assim que `/metricas` chegou ao
   escritório, com "A régua de confiabilidade" grudada em "As seis métricas".

   Por que `.main > .card` e não `.card` cru: o cartão mora em DOIS lugares.
   Solto na coluna, onde precisa de respiro; e dentro de `.grid2`/`.grid4`
   (app.css:305-306), que já resolvem por `gap:12px`. Margem no `.card` cru
   estufaria toda tela de painel — o CRM de funis tem 13 cards e 6 grids. O
   seletor de filho direto pega só o caso solto.

   Por que 16px e não os 24px (1.5rem) pedidos: 16 é o valor que as 33 margens
   inline de `margin-bottom` já usam. Escolha do escritório em 03/09, para o
   card solto ficar igual ao que já tinha margem em vez de 50% mais largo que
   qualquer respiro existente.

   As margens inline NÃO foram removidas junto, de propósito. `.main` é bloco
   normal (`padding:12px 14px;overflow:auto`), então margem de irmãos colapsa
   pelo maior: 16 da regra encostado em 16 inline dá 16, não 32. Nada dobra, e
   as poucas que valem 18 ou 22 continuam valendo o que alguém escolheu. Varrer
   as 41 é passe separado, com medição própria. */
.main > .card { margin-bottom: 16px; }
.main > .card:last-child { margin-bottom: 0; }