/* Facilita IAC — Plano 23: tokens de design compartilhados.
 *
 * POR QUE ESTE ARQUIVO EXISTE
 * ---------------------------
 * Antes dele o mesmo papel visual tinha valores diferentes em cada folha:
 * `detalhe.css` (Plano 18/20/21), `painel.css` (Plano 22 e hotfixes),
 * `logistica-design-system.css` (Plano 14) e dezenas de blocos `<style>` em
 * templates. A varredura do plano encontrou 303 valores hexadecimais distintos
 * em 182 arquivos, com o MESMO papel escrito de formas diferentes (o azul do
 * gradiente aparecia como `#000f51`, `#071d41`, `#06175f` e `#0d3272` sem
 * critério). Foi essa divergência que produziu o branco-sobre-branco do
 * Plano 05 em produção.
 *
 * COMO USAR
 * ---------
 * Este arquivo é carregado em `templates/base.html`, ANTES de qualquer folha de
 * página, e só declara variáveis em `:root` mais o componente de badge de
 * status. Ele não estiliza nenhum elemento existente: trocar um valor por
 * `var(--fac-…)` numa folha de página tem de dar exatamente a mesma cor
 * computada. Onde o valor de hoje não tem token equivalente, o valor fica onde
 * está — inventar um token "quase igual" mudaria a tela.
 *
 * A regra de medição de contraste (4,5:1 medido sobre o fundo REAL, não sobre o
 * fundo que se imagina) está em `docs/design-system.md`.
 */

:root {
    /* ── Azuis institucionais (gradiente do Facilita) ──────────────────────
     * Do mais escuro ao mais claro. Os quatro primeiros são fundos de
     * superfície; de `--fac-azul-500` para cima são cores de ação e de texto
     * sobre fundo escuro. */
    --fac-azul-950: #000f51;   /* topo do gradiente institucional */
    --fac-azul-900: #071d41;   /* meio do gradiente da navbar/rodapé */
    --fac-azul-880: #091a44;   /* fundo de input e de gradiente do detalhe */
    --fac-azul-860: #06175f;   /* superfície forte da Logística */
    --fac-azul-840: #0b1f4f;   /* moldura de evento da linha do tempo */
    --fac-azul-820: #0f2663;   /* início do gradiente de card do detalhe */
    --fac-azul-800: #0d3272;   /* fim do gradiente institucional */
    --fac-azul-780: #112a6b;   /* fim do gradiente do cabeçalho do detalhe */
    --fac-azul-760: #17388e;   /* fim do gradiente de card do detalhe */
    --fac-azul-740: #173f8f;   /* superfície de realce da Logística */
    --fac-azul-700: #1e3a8a;   /* azul royal institucional */
    --fac-azul-600: #1d4ed8;   /* ação primária (botão salvar/confirmar) */
    --fac-azul-550: #2563eb;   /* ação primária alternativa (painel) */
    --fac-azul-500: #3b82f6;   /* azul de ação ativa */
    --fac-azul-400: #60a5fa;   /* borda de badge "aberto" */
    --fac-azul-300: #93c5fd;   /* foco e borda de evento */
    --fac-azul-200: #bfdbfe;   /* texto de link sobre fundo escuro */
    --fac-azul-150: #dbeafe;   /* texto de cabeçalho de tabela escura */
    --fac-ciano-400: #38bdf8;  /* realce da Logística */
    --fac-ciano-300: #7dd3fc;  /* link da Logística */

    /* ── Escala neutra ───────────────────────────────────────────────────────
     * Um valor, um nome. Os mesmos cinzas servem de texto sobre fundo escuro E
     * de fundo/borda sobre fundo claro — dar dois nomes semânticos ao mesmo
     * `#e2e8f0` reintroduziria, por outro caminho, a duplicação que este plano
     * existe para acabar. Os nomes semânticos abaixo APONTAM para a escala. */
    --fac-cinza-000: #ffffff;
    --fac-cinza-050: #f8fafc;
    --fac-cinza-100: #f1f5f9;
    --fac-cinza-200: #e2e8f0;
    --fac-cinza-300: #cbd5e1;
    --fac-cinza-400: #94a3b8;
    --fac-cinza-500: #64748b;
    --fac-cinza-600: #475569;
    --fac-cinza-700: #334155;
    --fac-cinza-800: #1e293b;

    /* ── Texto (apelidos semânticos da escala acima) ──────────────────────── */
    --fac-branco: var(--fac-cinza-000);
    --fac-texto-claro: var(--fac-cinza-050);      /* principal sobre escuro */
    --fac-texto-suave: var(--fac-cinza-300);      /* secundário sobre escuro */
    --fac-texto-tenue: var(--fac-cinza-400);      /* ícone de estado vazio */
    --fac-texto-escuro: var(--fac-cinza-800);     /* principal sobre claro */
    --fac-texto-secundario: var(--fac-cinza-500); /* secundário sobre claro */
    --fac-texto-sobre-claro: var(--fac-cinza-600);
    --fac-texto-invertido: #0b1f5c;  /* texto escuro sobre tinta clara */

    /* ── Fundos claros e bordas ──────────────────────────────────────────── */
    --fac-fundo-claro: var(--fac-cinza-050);
    --fac-fundo-claro-2: var(--fac-cinza-100);
    --fac-borda-clara: var(--fac-cinza-200);
    --fac-borda-escura: #6584b5;        /* borda sobre superfície escura */
    --fac-borda-escura-forte: #7896c2;  /* borda de botão sobre escuro */
    --fac-borda-cabecalho: #274681;     /* moldura do cabeçalho do detalhe */
    --fac-borda-vidro: rgba(255, 255, 255, .12);
    --fac-borda-vidro-fraca: rgba(255, 255, 255, .08);

    /* ── Estados ─────────────────────────────────────────────────────────── */
    --fac-verde-600: #047857;
    --fac-verde-580: #065f46;
    --fac-verde-560: #087a55;   /* verde de ação do detalhe */
    --fac-verde-500: #10b981;   /* verde Facilita */
    --fac-verde-450: #059669;
    --fac-verde-400: #34d399;
    --fac-verde-300: #6ee7b7;
    --fac-verde-200: #a7f3d0;

    --fac-ambar-600: #d6a83d;
    --fac-ambar-500: #f59e0b;
    --fac-ambar-450: #fbbf24;
    --fac-ambar-400: #fde047;
    --fac-ambar-300: #fde68a;   /* também é a cor do anel de foco do detalhe */

    --fac-vermelho-700: #7f1d1d;
    --fac-vermelho-600: #b42318;
    --fac-vermelho-500: #ef4444;
    --fac-vermelho-450: #dc5050;
    --fac-vermelho-400: #f87171;
    --fac-vermelho-300: #fca5a5;
    --fac-vermelho-200: #fecaca;

    --fac-roxo-500: #a78bfa;
    --fac-roxo-300: #c4b5fd;
    --fac-roxo-200: #ddd6fe;

    --fac-laranja-500: #f97316;
    --fac-laranja-450: #fb923c;
    --fac-laranja-300: #fdba74;
    --fac-laranja-200: #fed7aa;

    /* ── Raios ───────────────────────────────────────────────────────────── */
    --fac-raio-xs: 6px;
    --fac-raio-sm: 8px;
    --fac-raio-md: 10px;
    --fac-raio-lg: 12px;
    --fac-raio-xl: 16px;
    --fac-raio-2xl: 18px;
    --fac-raio-3xl: 24px;
    --fac-raio-pilula: 999px;

    /* ── Sombras ─────────────────────────────────────────────────────────── */
    --fac-sombra-sm: 0 2px 8px rgba(0, 0, 0, .04);
    --fac-sombra-md: 0 4px 20px rgba(0, 0, 0, .12);
    --fac-sombra-lg: 0 12px 32px rgba(0, 0, 0, .15);
    --fac-sombra-card: 0 4px 14px #091a4414;
    --fac-sombra-cabecalho: 0 6px 18px #091a441a;
    --fac-sombra-flutuante: 0 12px 28px #091a4459;

    /* ── Escala de espaçamento ───────────────────────────────────────────── */
    --fac-esp-1: 4px;
    --fac-esp-2: 8px;
    --fac-esp-3: 12px;
    --fac-esp-4: 16px;
    --fac-esp-5: 20px;
    --fac-esp-6: 24px;
    --fac-esp-7: 32px;

    /* ── Tipografia ──────────────────────────────────────────────────────────
     * Uma escala só, a que o Plano 21 fixou no detalhe: 12 / 14 / 16 / 20 / 28
     * px, pesos 500 / 650 / 750. Em px, nunca em rem: o `font-size` do
     * documento muda entre telas e quebraria a escala. */
    --fac-fonte: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --fac-fonte-titulo: 'Outfit', 'Inter', sans-serif;
    --fac-texto-xs: 12px;
    --fac-texto-sm: 14px;
    --fac-texto-md: 16px;
    --fac-texto-lg: 20px;
    --fac-texto-xl: 28px;
    --fac-peso-normal: 500;
    --fac-peso-forte: 650;
    --fac-peso-titulo: 750;
    --fac-transicao: all .3s cubic-bezier(.16, 1, .3, 1);

    /* ── Mapa único de cores de status ───────────────────────────────────────
     * Um PAPEL por linha, não um status: o mesmo papel serve ao status do
     * chamado, ao estado do fluxo de Compras e ao status do pagamento. Quem
     * decide qual papel cabe a cada código é `chamados/badges.py`, em Python,
     * para que e-mails HTML (que não têm folha de estilo) gerem a mesma cor
     * inline a partir da mesma fonte.
     *
     * Cada papel tem DOIS pares, porque o Facilita tem duas superfícies reais:
     * `-escuro-*` para o gradiente azul (detalhe, painel, Logística) e
     * `-claro-*` para cards brancos (listas do portal interno, tabelas).
     * Contraste medido de cada par está em `docs/design-system.md`. */

    /* Novo / aberto — azul */
    --fac-status-novo-escuro-fundo: #173d77;
    --fac-status-novo-escuro-texto: #bfdbfe;
    --fac-status-novo-escuro-borda: #60a5fa;
    --fac-status-novo-claro-fundo: #eff6ff;
    --fac-status-novo-claro-texto: #1d4ed8;
    --fac-status-novo-claro-borda: #bfdbfe;

    /* Espera / aguardando informações — violeta */
    --fac-status-espera-escuro-fundo: #3d326d;
    --fac-status-espera-escuro-texto: #ddd6fe;
    --fac-status-espera-escuro-borda: #a78bfa;
    --fac-status-espera-claro-fundo: #f5f3ff;
    --fac-status-espera-claro-texto: #6d28d9;
    --fac-status-espera-claro-borda: #ddd6fe;

    /* Andamento / em análise — âmbar */
    --fac-status-andamento-escuro-fundo: #4c412e;
    --fac-status-andamento-escuro-texto: #fde68a;
    --fac-status-andamento-escuro-borda: #d6a83d;
    --fac-status-andamento-claro-fundo: #fffbeb;
    --fac-status-andamento-claro-texto: #92400e;
    --fac-status-andamento-claro-borda: #fde68a;

    /* Pausa / interrompido — laranja */
    --fac-status-pausa-escuro-fundo: #54392f;
    --fac-status-pausa-escuro-texto: #fed7aa;
    --fac-status-pausa-escuro-borda: #fb923c;
    --fac-status-pausa-claro-fundo: #fff7ed;
    --fac-status-pausa-claro-texto: #9a3412;
    --fac-status-pausa-claro-borda: #fed7aa;

    /* Concluído / resolvido / autorizado — verde */
    --fac-status-ok-escuro-fundo: #104c51;
    --fac-status-ok-escuro-texto: #a7f3d0;
    --fac-status-ok-escuro-borda: #34d399;
    --fac-status-ok-claro-fundo: #ecfdf5;
    --fac-status-ok-claro-texto: #065f46;
    --fac-status-ok-claro-borda: #a7f3d0;

    /* Recusado / cancelado — vermelho */
    --fac-status-recusado-escuro-fundo: #562e49;
    --fac-status-recusado-escuro-texto: #fecaca;
    --fac-status-recusado-escuro-borda: #f87171;
    --fac-status-recusado-claro-fundo: #fef2f2;
    --fac-status-recusado-claro-texto: #b91c1c;
    --fac-status-recusado-claro-borda: #fecaca;

    /* Neutro / encerrado sem juízo de valor — azul acinzentado */
    --fac-status-neutro-escuro-fundo: #253e73;
    --fac-status-neutro-escuro-texto: #e2e8f0;
    --fac-status-neutro-escuro-borda: #6584b5;
    --fac-status-neutro-claro-fundo: #f1f5f9;
    --fac-status-neutro-claro-texto: #334155;
    --fac-status-neutro-claro-borda: #cbd5e1;

    /* Pago — verde cheio; é o único papel com ênfase de fundo sólido, porque
     * "dinheiro saiu" é o fato mais consequente da tela de pagamento. */
    --fac-status-pago-escuro-fundo: #087a55;
    --fac-status-pago-escuro-texto: #ffffff;
    --fac-status-pago-escuro-borda: #34d399;
    --fac-status-pago-claro-fundo: #047857;
    --fac-status-pago-claro-texto: #ffffff;
    --fac-status-pago-claro-borda: #047857;
}

/* ── Componente: badge de status ─────────────────────────────────────────────
 * A marcação sai SEMPRE da template tag (`{% badge_status %}`,
 * `{% badge_fluxo_compra %}`, `{% badge_pagamento %}`), nunca de um `{% if %}`
 * de cor no template. `.fac-badge` sozinha é o papel neutro; o modificador
 * `--<papel>` troca as três cores. A variante `.fac-badge--claro` é a mesma
 * badge sobre card branco.
 *
 * As medidas do detalhe (Plano 18/20/21) foram mantidas nos pares escuros para
 * que a troca de `.status-a`/`.status-e`/… por esta classe não mude um pixel
 * daquela tela. */
.fac-badge {
    display: inline-flex;
    align-items: center;
    /* Os cinco valores abaixo são, propositalmente, os mesmos de
     * `.chamado-detalhe .status-badge` (Plano 18): trocar aquela classe por
     * esta não muda um pixel do detalhe. `line-height` fica de fora pelo mesmo
     * motivo — a badge herda a da tela, como sempre herdou. */
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--fac-raio-xs);
    font-size: var(--fac-texto-xs);
    font-weight: var(--fac-peso-forte);
    white-space: nowrap;
    background: var(--fac-status-neutro-escuro-fundo);
    color: var(--fac-status-neutro-escuro-texto);
    border: 1px solid var(--fac-status-neutro-escuro-borda);
}

.fac-badge--novo { background: var(--fac-status-novo-escuro-fundo); color: var(--fac-status-novo-escuro-texto); border-color: var(--fac-status-novo-escuro-borda); }
.fac-badge--espera { background: var(--fac-status-espera-escuro-fundo); color: var(--fac-status-espera-escuro-texto); border-color: var(--fac-status-espera-escuro-borda); }
.fac-badge--andamento { background: var(--fac-status-andamento-escuro-fundo); color: var(--fac-status-andamento-escuro-texto); border-color: var(--fac-status-andamento-escuro-borda); }
.fac-badge--pausa { background: var(--fac-status-pausa-escuro-fundo); color: var(--fac-status-pausa-escuro-texto); border-color: var(--fac-status-pausa-escuro-borda); }
.fac-badge--ok { background: var(--fac-status-ok-escuro-fundo); color: var(--fac-status-ok-escuro-texto); border-color: var(--fac-status-ok-escuro-borda); }
.fac-badge--recusado { background: var(--fac-status-recusado-escuro-fundo); color: var(--fac-status-recusado-escuro-texto); border-color: var(--fac-status-recusado-escuro-borda); }
.fac-badge--neutro { background: var(--fac-status-neutro-escuro-fundo); color: var(--fac-status-neutro-escuro-texto); border-color: var(--fac-status-neutro-escuro-borda); }
.fac-badge--pago { background: var(--fac-status-pago-escuro-fundo); color: var(--fac-status-pago-escuro-texto); border-color: var(--fac-status-pago-escuro-borda); }

.fac-badge--claro.fac-badge--novo { background: var(--fac-status-novo-claro-fundo); color: var(--fac-status-novo-claro-texto); border-color: var(--fac-status-novo-claro-borda); }
.fac-badge--claro.fac-badge--espera { background: var(--fac-status-espera-claro-fundo); color: var(--fac-status-espera-claro-texto); border-color: var(--fac-status-espera-claro-borda); }
.fac-badge--claro.fac-badge--andamento { background: var(--fac-status-andamento-claro-fundo); color: var(--fac-status-andamento-claro-texto); border-color: var(--fac-status-andamento-claro-borda); }
.fac-badge--claro.fac-badge--pausa { background: var(--fac-status-pausa-claro-fundo); color: var(--fac-status-pausa-claro-texto); border-color: var(--fac-status-pausa-claro-borda); }
.fac-badge--claro.fac-badge--ok { background: var(--fac-status-ok-claro-fundo); color: var(--fac-status-ok-claro-texto); border-color: var(--fac-status-ok-claro-borda); }
.fac-badge--claro.fac-badge--recusado { background: var(--fac-status-recusado-claro-fundo); color: var(--fac-status-recusado-claro-texto); border-color: var(--fac-status-recusado-claro-borda); }
.fac-badge--claro.fac-badge--neutro { background: var(--fac-status-neutro-claro-fundo); color: var(--fac-status-neutro-claro-texto); border-color: var(--fac-status-neutro-claro-borda); }
.fac-badge--claro.fac-badge--pago { background: var(--fac-status-pago-claro-fundo); color: var(--fac-status-pago-claro-texto); border-color: var(--fac-status-pago-claro-borda); }

/* Pílula: mesma cor, contorno arredondado. Usada onde a tela já usava pílula
 * (estado do fluxo de Compras, tabela do painel), para que a troca não mude a
 * forma do elemento. */
.fac-badge--pilula { border-radius: var(--fac-raio-pilula); padding: 5px 12px; }