: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-800: #92400e;   /* amber-800 — texto escuro */

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


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

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


    /* =====================================================
       🔹 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;


    /* =====================================================
       🔹 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 */


    /* =====================================================
       🔹 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;

}