/* ============================================================
   SISTEMA FINANCEIRO — style.css  (v3 — claro + hierarquia)
   Tipografia: Inter (interface)
   Paleta: Azul-acinzentado claro + cores vivas semânticas
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('/css/components/notificacoes.css');
@import url('/css/components/alerta.css');
@import url('/css/components/formularios.css');
@import url('/css/components/acoes.css');
@import url('/css/components/situacao.css');
@import url('/css/components/catalogo-select.css');
@import url('/css/components/estrutura-paginas.css');
@import url('/css/components/tabelas.css');
@import url('/css/components/menu-sistema.css');
@import url('/css/components/paineis.css');
@import url('/css/components/modais.css');
@import url('/css/components/confirmacao-acao.css');
@import url('/css/components/dado-protegido.css');
@import url('/css/components/menu-acoes.css');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
    --azul-50:  #f2f6fc;
    --azul-100: #e2ebf8;
    --azul-200: #c6d7f1;
    --azul-300: #96b5e3;
    --azul-400: #5c8dd6;
    --azul-500: #2a6bcb;
    --azul-600: #1758b8;
    --azul-700: #134896;
    --azul-800: #0d3673;
    --azul-900: #08254f;

    --apaa-blue:     var(--azul-600);
    --apaa-blue-dark:var(--azul-700);
    --apaa-blue-soft:var(--azul-50);
    --apaa-purple:   #6847d9;
    --apaa-purple-soft: #f3f0ff;

    --tela-escura-topo:   #1f2166;
    --tela-escura-meio:   #2c2e8d;
    --tela-escura-pe:     #4b55d6;
    --tela-escura-brilho: rgba(96, 110, 240, .55);

    --tela-escura-ink:      #f6f2ff;

    --tela-escura-ink-soft: rgba(233, 223, 255, .88);

    --saudacao-inicio: #0a2a63;
    --saudacao-meio:   #10418f;

    --saudacao-fim:    #1758b8;

    --saudacao-sombra: rgba(16, 65, 143, .30);

    --bg:            #f8fafc;
    --bg-alt:        #eff2f6;
 
    --surface:       #ffffff;
    --surface-alt:   #fbfcfd;
    --surface-hi:    #f2f4f8;
 
    --border:        #e3e7ed;
    --border-hi:     #d0d5dd;
 
    --ink:           #1a1e23;
    --ink-mid:       #434b56;
    --ink-soft:      #6b7585;
    --ink-faint:     #9ea6b3;

    --hover-neutro:  #e4e8ee;

    --hover-linha:   var(--azul-100);

    --hover-linha-teal: #c9efe9;

    --primaria:        var(--azul-600);
    --primaria-dark:   var(--azul-700);
    --primaria-deeper: var(--azul-800);
    --primaria-light:  var(--azul-50);
    --primaria-border: var(--azul-200);
    --primaria-bg:     var(--azul-50);
    --primaria-glow:   rgba(23, 88, 184, .18);

    --blue:          var(--azul-600);
    --blue-dark:     var(--azul-700);
    --blue-deeper:   var(--azul-800);
    --blue-light:    var(--azul-50);
    --blue-border:   var(--azul-200);
    --blue-bg:       var(--azul-50);
    --blue-glow:     rgba(23, 88, 184, .18);

    --teal:          #0f766e;
    --teal-dark:     #0b5c56;

    --teal-deeper:   #08453f;
    --teal-light:    #effcfa;
    --teal-border:   #99e6dd;
    --teal-bg:       var(--teal-light);
    --teal-glow:     rgba(15, 118, 110, .22);

 
    /* Âmbar — alerta/pendente */
    --amber:         #f59e0b;
    --amber-dark:    #d97706;
    --amber-deeper:  #b45309;
    --amber-light:   #fff7ed;
    --amber-border:  #fed7aa;
    --amber-bg:      var(--amber-light);
 
    /* Verde — aprovado/valor */
    --green:         #059669;
    --green-dark:    #047857;
    --green-deeper:  #036045;
    --green-light:   #ecfdf5;
    --green-border:  #a7f3d0;
    --green-bg:      var(--green-light);
 
    /* Vermelho — reprovado */
    --red:           #dc2626;
    --red-dark:      #b91c1c;
    --red-light:     #fef2f2;
    --red-border:    #fecaca;
    --red-bg:        var(--red-light);
 
    /* Roxo — rascunho/diária */
    --purple:        var(--apaa-purple);
    --purple-dark:   #5135bd;
    --purple-light:  var(--apaa-purple-soft);
    --purple-border: #ddd6fe;
    --purple-bg:     var(--purple-light);

    /* Vinho — SEM USO desde 28/08/2026, quando o menu inteiro passou a ser azul institucional.
       Fica declarado de propósito: ele existe justamente por não significar área nem status em
       lugar nenhum, e é a cor de reserva para quando um grupo por intenção precisar de tom
       próprio sem emprestar o de uma área. Há teste reprovando o vinho em qualquer folha que
       não seja esta e a do menu. */
    --vinho:        #9f2249;
    --vinho-dark:   #7f1d3f;
    --vinho-light:  #fdf2f6;
    --vinho-border: #f6c9d8;
 
    /* Ciano — informativo, agenda e calendário */
    --cyan:          #0891b2;
    --cyan-dark:     #0e7490;
 
    --cyan-mais-escuro: #0b5c73;
    --cyan-light:    #ecfeff;
    --cyan-border:   #a5f3fc;
    --cyan-bg:       var(--cyan-light);

    /* Laranja — pendente financeiro */
    --orange:        #ea580c;
    --orange-dark:   #c2410c;
    --orange-light:  #fff7ed;
    --orange-border: #fed7aa;
    --yellow:        #a87c00;
    --yellow-dark:   #8a6400;
    --yellow-deeper: #7d5a00;
    --yellow-light:  #fffaeb;
    --yellow-border: #fadf8f;

    /* Amarelo da FAIXA DE ATENÇÃO (70-90%) do painel do Orçamento.

       ELE É SEPARADO DE --yellow* DE PROPÓSITO, e a separação nasceu de um erro: a faixa usava
       aquela família, que é a COR DE ÁREA do Orçamento — ela veste o item de menu, o sino, o
       cartão de cargo da home e a página do departamento. Trocar o tom da faixa mexendo nela
       mudou cinco telas que ninguém pediu para mudar. Área é identidade; faixa é um degrau de
       consumo entre o verde e o laranja.

       DOIS PAPÉIS, DUAS RÉGUAS, e é a distinção que faz o amarelo ser possível aqui.
       `--amarelo-faixa` pinta GRÁFICO (o filete de 4px da linha, a barra, o ponto da legenda);
       `--amarelo-faixa-forte` pinta TEXTO — o número do percentual —, e passa folgado: 5.68
       sobre o branco contra os 4.5 da WCAG AA.

       O gráfico é uma EXCEÇÃO DECLARADA, e ela custou três tentativas: amarelo tem luminância
       intrinsecamente alta, e um amarelo que PARECE amarelo não alcança os 3:1 que a casa exige
       de gráfico — #eab308 dá 1.92, e o teto dos 3:1 é #a89000, que lê como mostarda. Não existe
       amarelo legível pela régua: existe amarelo, ou existe mostarda.

       A escolha foi o amarelo, por decisão de produto de 26/08/2026, e é defensável porque **a
       cor aqui é redundante**: a faixa está escrita no número ao lado (que usa o forte, legível),
       nomeada na legenda e ordenada na própria escala. Quem não distinguir o tom não perde
       informação. O teste registra a exceção com a MEDIÇÃO, em vez de afrouxar o mínimo das
       outras faixas.

       ELE JÁ VOLTOU AO MOSTARDA UMA VEZ, em 27/08/2026, carregado por um commit sobre botões
       roxos que levou junto este valor e os ~247 comentários deste arquivo. Foi o teste que
       pegou, e é para isso que ele existe — mudar o tom aqui é decisão de produto, não efeito
       colateral de uma varredura. Restaurado em 28/08/2026.

       A matiz é 45°, a 24° do laranja da faixa crítica, com 1.86 de razão de luminância —
       separada nas duas medidas do par que este painel já confundiu uma vez. */
    --amarelo-faixa:       #eab308;
    --amarelo-faixa-forte: #786600;
    --yellow-bg:     var(--yellow-light);
 
    --radius-xs:  4px;
    --radius-sm:  6px;
    --radius:     8px;
    --radius-md:  10px;
    --radius-lg:  12px;
    --radius-xl:  14px;
    --radius-2xl: 16px;
    --radius-pill: 999px;

    --txt-micro:      10px;  /* rotulo em caixa alta, unidade, origem do dado */
    --txt-mini:       11px;  /* dado auxiliar, selo, legenda */
    --txt-menor:      12px;  /* celula de tabela, botao, texto de apoio */
    --txt-pequeno:    13px;  /* rotulo de campo, paragrafo denso */
    --txt-medio:      14px;  /* texto de leitura em cartao */
    --txt-corpo:      15px;  /* o corpo do sistema — o mesmo do <body> */
    --txt-titulo:     18px;  /* h2 e h3 de secao */
    --txt-titulo-lg:  22px;  /* h1 de tela interna */
    --txt-destaque:   28px;  /* numero de indicador, valor em painel */

    --largura-leitura:  1040px;
    --largura-conteudo: 1320px;
    --largura-painel:   1600px;
    --folga-lateral:    32px;

    --espaco-topo:  20px;
    --espaco-base:  48px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05);


    --item-sombra:  0 1px 2px rgba(16, 32, 64, .05), 0 8px 24px -8px rgba(16, 32, 64, .13);
    --item-borda:   transparent;

    --secao-borda:  transparent;
    --secao-sombra: 0 2px 4px rgba(16, 32, 64, .06), 0 16px 36px -14px rgba(23, 88, 184, .22);

    --divisor:      #e9edf4;
    --shadow: 0 8px 24px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04);
    --shadow-md: 0 14px 36px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .04);
    --shadow-lg: 0 24px 64px rgba(15, 23, 42, .12), 0 8px 24px rgba(15, 23, 42, .06);
    --shadow-btn: 0 2px 8px rgba(15, 23, 42, .08);
}

@media (max-width: 560px) {
    :root {
        --folga-lateral: 16px;
        --espaco-topo:   10px;
        --espaco-base:   32px;
    }
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: var(--txt-corpo);
    color: var(--ink);
    background:
        radial-gradient(circle at 8% -4%, rgba(23, 88, 184, .1), transparent 34rem),
        radial-gradient(circle at 96% 4%, rgba(8, 145, 178, .08), transparent 30rem),
        var(--bg);
    background-attachment: fixed;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

small { font-size: var(--txt-menor); }

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #a0a8bb; }

/* ============================================================
   404 — .not-found-page
   ============================================================ */

.not-found-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
    text-align: center;
}

/* Estas tres escrevem direto no fundo, sem cartao: a cor do texto vem dos tokens
   da superficie escura, nao de --ink/--ink-soft, que sao escuros. */
.not-found-code { font-size: clamp(80px, 18vw, 140px); font-weight: 900; letter-spacing: -6px; color: var(--tela-escura-ink); line-height: 1; display: block; }

/* A barra ambar continua: e o unico acento quente da tela e sobrevive bem ao roxo. */
.not-found-code::after { content: ''; display: block; width: 56px; height: 5px; background: var(--amber); border-radius: 99px; margin: 14px auto 0; }

.not-found-title   { font-size: var(--txt-titulo-lg); font-weight: 700; color: var(--tela-escura-ink); margin: 24px 0 10px; letter-spacing: -0.4px; }
.not-found-message { font-size: var(--txt-corpo); color: var(--tela-escura-ink-soft); max-width: 360px; line-height: 1.65; margin-bottom: 32px; }

.not-found-button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px;
    background: var(--primaria); color: white;
    border-radius: var(--radius); text-decoration: none; font-size: var(--txt-medio); font-weight: 700;
    transition: background 0.18s, transform 0.12s, box-shadow 0.2s;
    box-shadow: 0 2px 10px var(--primaria-glow);
}

.not-found-button:hover { background: var(--primaria-dark); transform: translateY(-1px); box-shadow: 0 4px 18px var(--primaria-glow); }

/* ============================================================
   LOGIN — .login-page
   ============================================================ */

.login-page,
.not-found-page {
    background:
        radial-gradient(ellipse 70% 55% at 8% 108%,
            var(--tela-escura-brilho) 0%, transparent 70%),
        linear-gradient(to bottom,
            var(--tela-escura-topo) 0%,
            var(--tela-escura-meio) 46%,
            var(--tela-escura-pe) 100%);

    background-attachment: fixed;
}

.login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
}

.login-brand     { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.login-logo      { width: 42px; height: 42px; background: linear-gradient(145deg, var(--primaria), var(--blue-deeper)); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px var(--primaria-glow); color: white; font-size: var(--txt-titulo-lg); font-weight: 900; }
.login-brand-name{ display: grid; gap: 2px; color: var(--ink); letter-spacing: -0.3px; }
.login-brand-name strong { font-size: var(--txt-titulo); }
.login-brand-name small { color: var(--ink-soft); font-size: var(--txt-micro); font-weight: 700; letter-spacing: 0; }
.login-title     { font-size: var(--txt-titulo-lg); font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.5px; }
.login-subtitle  { font-size: var(--txt-medio); color: var(--ink-soft); line-height: 1.6; margin-bottom: 32px; }

.home-conteudo {
    width: min(760px, calc(100% - 32px));
    margin: 48px auto;
}

.home-acesso-pendente {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--amber, #d69e2e);
    border-radius: 12px;
    background: #fffaf0;
    color: var(--ink);
}

.home-acesso-pendente h2 {
    margin: 0 0 8px;
    font-size: var(--txt-titulo-lg);
}

.home-acesso-pendente p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
}

.login-ms-button {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; padding: 14px;
    background: var(--surface-alt);
    color: var(--ink);
    border-radius: var(--radius);
    font-size: var(--txt-corpo); font-weight: 700;
    text-decoration: none;
    transition: background 0.18s, transform 0.12s;
    margin-bottom: 24px;
    border: 1px solid var(--border-hi);
}

.login-ms-button:hover { background: var(--bg); transform: translateY(-1px); }
.login-footer { font-size: var(--txt-menor); color: var(--ink-soft); text-align: center; line-height: 1.7; }