/* =============================================================
   ARARA :: css/tema.css
   -------------------------------------------------------------
   FONTE ÚNICA DA IDENTIDADE VISUAL DO SISTEMA.

   Toda cor, sombra, raio e espaçamento usado em qualquer página
   deve sair daqui. Páginas novas NUNCA escrevem um #hexadecimal
   direto: usam as variáveis abaixo.

   Carregado pelo partials/header.php antes de tudo, então as
   variáveis estão disponíveis em todas as folhas seguintes.

   Estrutura:
     [1] Paleta da marca
     [2] Gradientes oficiais
     [3] Superfícies e texto
     [4] Cores de estado (ok / atenção / erro / info)
     [5] Status do cliente (Ativo / Risco / Inativo)
     [6] Métricas: raio, sombra, espaço, tipografia
     [7] Reset mínimo
   ============================================================= */

:root {

    /* ============================================================
       [1] PALETA DA MARCA
       As duas cores base do Arara. Todo o resto deriva delas.
       ============================================================ */
    --ar-azul:            #339ecf;   /* azul Arara (menu, legendas)       */
    --ar-roxo:            #55368f;   /* roxo Arara (menu, cabeçalhos)     */
    --ar-azul-escuro:     #1e3a8a;   /* azul profundo (cartões, títulos)  */
    --ar-roxo-escuro:     #6d28d9;   /* roxo vibrante (cartões)           */
    --ar-azul-acao:       #3b82f6;   /* azul de ação: links, foco, ícones */
    --ar-azul-claro:      #eff6ff;   /* fundo suave de ícone/realce       */
    --ar-destaque:        #ffd54a;   /* amarelo de destaque (item ativo)  */

    /* ============================================================
       [2] GRADIENTES OFICIAIS
       Use SEMPRE estes. Não invente combinações novas.
       ============================================================ */
    --ar-grad-menu:       linear-gradient(180deg, var(--ar-roxo) 0%, var(--ar-azul) 100%);
    --ar-grad-cabecalho:  linear-gradient(120deg, var(--ar-azul-escuro) 0%, var(--ar-roxo-escuro) 100%);
    --ar-grad-tabela:     linear-gradient(to right, var(--ar-azul) 0%, var(--ar-roxo) 100%);

    /* ============================================================
       [3] SUPERFÍCIES E TEXTO
       ============================================================ */
    --ar-fundo:           #f1f5f9;   /* fundo da área de conteúdo */
    --ar-superficie:      #ffffff;   /* fundo de cartão           */
    --ar-superficie-2:    #f8fafc;   /* fundo de campo / faixa    */
    --ar-borda:           #e2e8f0;   /* borda padrão              */
    --ar-borda-campo:     #94a3b8;   /* borda de input (contraste)*/
    --ar-txt:             #0f172a;   /* texto principal           */
    --ar-txt-fraco:       #64748b;   /* texto secundário          */
    --ar-txt-invertido:   #ffffff;   /* texto sobre gradiente     */

    /* ============================================================
       [4] CORES DE ESTADO
       ============================================================ */
    --ar-ok:              #047857;
    --ar-ok-bg:           #ecfdf5;
    --ar-ok-borda:        #a7f3d0;

    --ar-atencao:         #b45309;
    --ar-atencao-bg:      #fffbeb;
    --ar-atencao-borda:   #fde68a;

    --ar-erro:            #b91c1c;
    --ar-erro-bg:         #fef2f2;
    --ar-erro-borda:      #fecaca;

    --ar-info:            #1d4ed8;
    --ar-info-bg:         #eff6ff;
    --ar-info-borda:      #bfdbfe;

    /* ============================================================
       [5] STATUS DO CLIENTE
       Espelha as faixas de dias de arara_app.config_cliente_status
       (tela router.php?p=config_metas). Use estas cores em QUALQUER
       lugar que mostre o status do cliente, para o sistema inteiro
       falar a mesma língua visual.
       ============================================================ */
    --ar-status-ativo:    #16a34a;
    --ar-status-risco:    #d97706;
    --ar-status-inativo:  #dc2626;

    /* ============================================================
       [6] MÉTRICAS
       ============================================================ */
    --ar-raio:            12px;   /* cartão              */
    --ar-raio-p:          9px;    /* input, botão        */
    --ar-raio-pill:       999px;  /* chip / badge        */

    --ar-sombra:          0 4px 16px -10px rgba(15, 23, 42, .25);
    --ar-sombra-leve:     0 1px 2px rgba(15, 23, 42, .04);
    --ar-sombra-forte:    0 12px 28px -14px rgba(15, 23, 42, .45);

    --ar-esp-1:           6px;
    --ar-esp-2:           10px;
    --ar-esp-3:           14px;
    --ar-esp-4:           20px;

    --ar-fonte:           'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ar-fs-p:            .78rem;   /* pequeno   */
    --ar-fs-n:            .88rem;   /* normal    */
    --ar-fs-m:            1rem;     /* médio     */
    --ar-fs-g:            1.15rem;  /* grande    */

    --ar-transicao:       .15s ease;

    /* ------------------------------------------------------------
       Compatibilidade com as folhas antigas.
       Mantido para que css/layout.css, css/sidebar.css e as folhas
       usr-*/vr-* continuem funcionando sem reescrita. Em páginas
       NOVAS use apenas os nomes --ar-*.
       ------------------------------------------------------------ */
    --usr-grad-1:       var(--ar-azul-escuro);
    --usr-grad-2:       var(--ar-roxo-escuro);
    --usr-azul:         var(--ar-azul-acao);
    --usr-borda:        var(--ar-borda);
    --usr-borda-input:  var(--ar-borda-campo);
    --usr-txt:          var(--ar-txt);
    --usr-fraco:        var(--ar-txt-fraco);
    --usr-radius:       var(--ar-raio);
    --legenda-bg-start: var(--ar-azul);
    --legenda-bg-end:   var(--ar-roxo);
}


/* ============================================================
   [7] RESET MÍNIMO
   Substitui o que o app realmente usava do Bootstrap.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--ar-fonte);
    color: var(--ar-txt);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--ar-azul-acao); }

/* Utilitários mínimos herdados do Bootstrap (uso pontual no layout) */
.d-flex          { display: flex; }
.align-items-center { align-items: center; }
.gap-2           { gap: 8px; }
.visually-oculto {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}