:root {

    /* =====================================================
       🔹 Cores Institucionais Originais
       ===================================================== */

    --azul-escuro: #003366;
    --azul-hover: #00264d;
    --branco: #ffffff;
    --preto: #000000;

    --cinza-borda: #cccccc;
    --cinza-texto: #999999;
    --cinza-claro: #888;
    --cinza-light: #cecdcd;

    --verde_jade: #6F8F86;
    --verde_salvia: #5E7F77;
    --verde-sucesso-soft: rgba(0, 128, 0, 0.08);  /* fill verde translúcido (tags claras) */
    --rosa_escuro: #B0005A;


    /* =====================================================
       🔹 Cores de Status
       ===================================================== */

    --verde-sucesso: #008000;
    --verde-sucesso-hover: #006600;   /* hover verde */

    --vermelho-erro: #8b0000;
    --vermelho-erro-hover: #a00000;   /* hover vermelho */
    --pdf-red: #e2231a;   /* vermelho do ícone de PDF (faixa do arquivo) */

    --amarelo-alerta-50:  #fffbeb;   /* amber-50 — bg suave (era custom #fff7e6) */
    --amarelo-alerta-100: #fef3c7;   /* amber-100 — bg de tags claras */
    --amarelo-alerta-200: #fde68a;   /* amber-200 — borda de tags claras */
    --amarelo-alerta-500: #f59e0b;   /* amber-500 — cor principal */
    --amarelo-alerta-600: #d97706;   /* amber-600 — hover / destaque */
    --amarelo-alerta-700: #b45309;   /* amber-700 — texto sobre bg 100 */
    --amarelo-alerta-800: #92400e;   /* amber-800 — texto escuro */

    --laranja-pausado: #f97316;
    --laranja-pausado-hover: #ea580c;


    /* =====================================================
       🔹 Fundo de Modal
       ===================================================== */

    --fundo-modal: rgba(0, 0, 0, 0.6);

    /* Véu CLARO por cima de conteúdo que está carregando — deixa o que está
       embaixo visível e apagado, em vez de esconder. Oposto do --fundo-modal,
       que escurece para tirar o foco do fundo.
       ⚠️ Existe um irmão não convertido: modal.css:558 usa
       rgba(255,255,255,0.6) para a mesma ideia com opacidade diferente. Não
       foi unificado aqui porque mudar 0.6 → 0.75 alteraria a aparência de
       OUTRA tela — é decisão visual, não limpeza. */
    --veu-branco: rgba(255, 255, 255, 0.75);


    /* =====================================================
       🔹 Escala Azul Slate (Base Moderna do Sistema)
       ===================================================== */

    --azul-slate900: #0f172a;   /* Azul principal profundo (Slate 900) */
    --azul-slate800: #1e293b;   /* Azul hover / destaque ativo (Slate 800) */
    --azul-slate700: #334155;   /* Azul intermediário */
    --azul-slate600: #475569;   /* Azul suave secundário */
    --azul-slate500: #64748b;   /* Texto auxiliar / status delivered/queued */
    --azul-slate400: #94a3b8;   /* Cinza-azulado claro (setinhas, indicadores discretos) */
    --azul-slate300: #cbd5e1;   /* Cinza-azulado claro (bolinhas inativas, linhas conectoras) */
    --azul-slate200: #e2e8f0;   /* Borda clara (bordas finas, separadores) */
    --azul-slate100: #f1f5f9;   /* Fundo muito claro / borda interna */
    --azul-slate50:  #f8fafc;   /* Fundo quase branco (thead de tabela) */

    --azul-slate900-rgba04: rgba(15, 23, 42, 0.04); /* hover leve de cards */

    /* Azul vibrante de "destaque ativo" — borda esquerda do item ativo
       da sidebar e do inbox (highlight de "está aqui" / "filtro ativo"). */
    --azul-destaque-ativo: #38bdf8;
    --azul-destaque-50: #eff6ff;   /* blue-50 — preenchimento claro que acompanha
                                      o destaque (conversa aberta, filtro ativo) */


    /* =====================================================
       🔹 Botões
       ===================================================== */

    --action-primary: var(--azul-slate900);         /* Fundo botão principal */
    --action-primary-hover: var(--azul-slate800);   /* Hover botão principal */

    --action-secondary: var(--azul-slate700);       /* Fundo botão secundário */
    --action-secondary-hover: var(--azul-slate600); /* Hover botão secundário */


    /* =====================================================
       🔹 Sidebar
       ===================================================== */

    --sidebar-bg: var(--azul-slate900);    /* Fundo da sidebar */
    --sidebar-hover: var(--azul-slate800); /* Hover e item ativo */


    /* =====================================================
       🔹 Bordas e Divisões
       ===================================================== */

    --border-light: #e5e7eb; /* borda leve cards/listas */
    --table-row-alt: rgba(0, 0, 0, 0.02);
    --table-row-hover-light: rgba(0, 0, 0, 0.03);
    --table-row-hover: rgba(0, 0, 0, 0.06);


    /* =====================================================
       🔹 Sombras Padronizadas
       ===================================================== */

    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1);      /* sombra padrão container */
    --shadow-hover: 0 6px 14px rgba(0, 0, 0, 0.05);    /* sombra leve hover */
    --shadow-elevated: 0 8px 20px rgba(0, 0, 0, 0.12); /* sombra destaque */


    /* =====================================================
       🔹 Raio — escala derivada de UMA base
       ===================================================== */

    /* Uma manopla só: mexeu em --radius, o app inteiro acompanha. Os degraus
       saem por proporção (padrão shadcn), e as proporções foram escolhidas
       pra cair exatamente nos valores que o app já usava — a adoção não
       mexeu em pixel nenhum além dos ajustes de coerência por tipo.
       Base em px (não rem) de propósito: raio não deve crescer junto com a
       fonte da raiz, e a leitora do check-in roda navegador antigo.

       ⚠️ ESTES SÃO OS DEGRAUS CRUS — dizem TAMANHO, não papel. CSS de tela
       usa os três APELIDOS logo abaixo. Degrau cru só para papel que a escala
       não nomeia (botão, item de menu lateral, tooltip, miniatura de mídia),
       e mesmo aí conferindo o que os vizinhos já usam. */
    --radius:      10px;
    --radius-xs:   calc(var(--radius) * 0.4);   /*  4px  base do --radius-field */
    --radius-sm:   calc(var(--radius) * 0.6);   /*  6px  base do --radius-card;
                                                   botões, menu lateral, tooltip,
                                                   miniatura de mídia */
    --radius-md:   calc(var(--radius) * 0.8);   /*  8px  base do --radius-modal;
                                                   bolha de conversa, câmera */
    /* ⚠️ SEM CONSUMIDOR desde 02/08/2026 — e ficam de propósito. Sem eles a
       escala pularia de 8px direto para 20px, e quem precisasse de um
       meio-termo cravaria literal, que é o que a revisão de 02/08 tirou do
       código inteiro. O `xl` é o 14px do CARD ANTIGO: se você foi buscar "o
       raio de card" pela memória, PARE — hoje é `--radius-card`, e ele vale
       6px. Repor o 14 aqui traz de volta a inversão card-maior-que-modal. */
    --radius-lg:   var(--radius);               /* 10px — órfão */
    --radius-xl:   calc(var(--radius) * 1.4);   /* 14px — órfão, era o card */
    --radius-2xl:  calc(var(--radius) * 2);     /* 20px — superfícies flutuantes
                                                   (barra inferior, ícone do PWA) */
    --radius-pill: 999px;                       /* badges e chips;
                                                   50% fica literal (é círculo) */

    /* ═══ A ESCALA DE RAIO — TRÊS DEGRAUS, UM POR PAPEL (02/08/2026) ═══
       Os apelidos dizem o PROPÓSITO; os degraus acima dizem o tamanho. Quem
       escreve CSS de tela usa os três abaixo e não escolhe número.

           --radius-field   4px   campo: input, select, textarea
           --radius-card    6px   card, painel, tile — a superfície de conteúdo
           --radius-modal   8px   modal, dropdown, menu flutuante

       ⚠️ A ORDEM IMPORTA, e é por isso que são três e não um. Raio igual em
       caixas ANINHADAS engana o olho: o canto de dentro parece mais redondo
       que o de fora. A regra é `interno = externo − padding`, e o app aninha
       de verdade — `.app-card-group` → `.app-card-group-head` → `.app-card` →
       `.input-field`, e modal → campo. Por isso o campo é MENOR que o card, e
       a cabeça do grupo (que COLA na borda do grupo, sem respiro) é a mais
       fechada de todas: 4px dentro de uma caixa de 6.

       ⚠️ E o app estava INVERTIDO até hoje: o card em 14px e a modal em 8 — a
       caixa maior era a menos arredondada, o contrário de todo sistema de
       design. A escala nova conserta isso e deixa tudo menos arredondado, que
       é a direção certa para uma ferramenta de operação (a faixa 4–8px é onde
       moram Bootstrap, Primer e shadcn; 12–16px é produto de consumo).

       NÃO estão na escala, de propósito: círculos (`50%`), pílulas
       (`--radius-pill`), a barra inferior (`--radius-2xl`, é pílula flutuante),
       os `funnel-*` legados e o RSVP público, que tem escopo visual próprio. */
    --radius-field: var(--radius-xs);
    --radius-card:  var(--radius-sm);
    --radius-modal: var(--radius-md);


    /* =====================================================
       🔹 Spinner
       ===================================================== */

    --spinner-track: #eeeeee; /* trilha do spinner */


    /* =====================================================
       🔹 WhatsApp Brand (palette do app real)
       Usado em previews de templates/mensagens. Não alterar
       sem motivo — replica o visual do WhatsApp.
       ===================================================== */

    --wa-bubble-bg:          #d9fdd3;  /* verde claro da bolha de saída */
    --wa-text:               #111b21;  /* texto principal */
    --wa-meta:               #667781;  /* hora, footer, metadados */
    --wa-link:               #027eb5;  /* botão CTA, links */
    --wa-divider:            #e9edef;  /* divisor entre body e CTA */
    --wa-header-placeholder: #c8d6e5;  /* placeholder de imagem no header */
    --wa-read:               #3b82f6;  /* azul de mensagem lida (status read) */

    --wa-frame-shadow:  inset 0 0 0 1px rgba(0,0,0,0.05);  /* borda interna sutil do frame */
    --wa-bubble-shadow: 0 1px 1px rgba(0,0,0,0.12);        /* sombra da bolha */

    /* Bolha de preview do canal Manual (Excel) — espelho do
       --wa-bubble-bg em azul. Adicionado na Onda 3.3 (Tela 1
       wizard Manual). Tom alinhado com tailwind blue-100. */
    --manual-bubble-bg: #dbeafe;

    /* ── A SETA PARA BAIXO do app, num desenho só (03/08/2026) ─────────────
       Triângulo cheio, sem cor: quem colore é quem usa. As duas setas do app
       saem daqui — a do `select.input-field` (style.css) e a do acordeão
       `.section-arrow` (tiles.css).

       ⚠️ Existe porque o acordeão desenhava o CARACTERE ▼ (U+25BC), que fontes
       de texto normalmente não trazem: ele vinha de fallback do sistema e
       mudava entre Windows, macOS, Android e iOS. Desenho nosso é igual em
       todo aparelho.

       São DUAS variantes do mesmo traçado, e a duplicação é obrigatória:

       • `--arrow-down-mask` — SEM `fill`, para servir de MÁSCARA. Quem pinta é
         o `background-color` de quem usa, então a cor sai de `var()`. É a que
         o acordeão usa, e a preferida sempre que der.

       • `--arrow-down-image` — COM o fill cravado, para `background-image`. O
         `<select>` precisa dela: elemento substituído não aceita `::after`, e
         mascarar o campo apagaria a caixa inteira. ⚠️ O hex espelha o
         `--azul-slate500` e tem de mudar junto com ele — está aqui, e não
         enterrado no style.css, justamente para essa dupla ficar à vista.

       ⚠️⚠️ ESTE COMENTÁRIO JÁ FECHOU CEDO DEMAIS UMA VEZ, e apagou a seta do
       acordeão em TODAS as telas (achado pela Flavia em 04/08; a causa entrou
       em 03/08, no commit que unificou as duas setas). Havia um fecha-comentário
       solto aqui — e não dá para escrevê-lo por extenso nem entre crases, porque
       o parser o fecha do mesmo jeito (foi o que aconteceu na PRIMEIRA tentativa
       de documentar isto, em 04/08). Com ele aqui, o texto abaixo caía FORA do
       comentário, como lixo dentro do bloco de declarações. O CSS entra em
       recuperação de erro e engole tudo até o `;` seguinte — que é o da própria
       linha do `--arrow-down-mask`. A variável não passava a existir.

       O sintoma é traiçoeiro por ser PARCIAL: `--arrow-down-image` vem depois
       daquele `;`, sobrevive, e a seta do `select` continua desenhando. Só o
       acordeão some — e ele some por completo, porque o `@supports` do
       tiles.css já zerou o `font-size` do caractere ▼ antes de a máscara
       falhar. Bloco de comentário longo com bullets é onde este erro nasce;
       ao editar aqui, conferir que o bloco fecha UMA vez só. O caderno
       tests/test_css_comments.py varre isto em todos os .css.

       ⚠️ O `viewBox` é JUSTO no triângulo (10×6), sem sobra em volta, e as duas
       trazem `width`/`height`. Os dois detalhes são o que fixa o tamanho:
       • sem `width`/`height`, `background-image` estica o SVG para a área
         inteira do campo — a seta sai gigante (aconteceu em 03/08);
       • com `viewBox` quadrado e sobra em volta, `mask-size: contain` encolhe
         o desenho para caber a MOLDURA, não o triângulo. */
    --arrow-down-mask:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z'/></svg>");
    --arrow-down-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%2364748b'/></svg>");

}