/* ===================================================================
   Paleta da área do associado, em dois temas.

   É o único lugar onde cor vira valor: `app.css` e `auth.css` só usam os
   tokens daqui, e por isso o tema escuro não precisa repetir regra nenhuma.

   O tema escolhido vive em `data-tema` no <html>, escrito por `tema.js`
   antes da primeira pintura. "Sistema" não aparece aqui: o script resolve
   a preferência do aparelho e grava "claro" ou "escuro", para o CSS ter um
   caminho só.
   =================================================================== */

:root {
    color-scheme: light;

    /* Paleta institucional ABREE */
    --verde: #61ba3d;
    --verde-escuro: #357322;
    --verde-claro: #eff8ec;
    --verde-claro2: #d7ecc9;
    /* Verde de texto e ícone. Separado de --verde-escuro, que é fundo: no
       tema escuro um precisa clarear e o outro precisa continuar escuro. */
    --verde-tinta: #357322;

    /* Menu lateral. No tema claro ele é a faixa verde institucional, e o
       item ativo se destaca com branco sobre ela. */
    --sidebar-fundo: var(--verde-escuro);
    --sidebar-texto: #e7ecdd;
    --sidebar-hover: rgba(255, 255, 255, .06);
    --sidebar-ativo-fundo: rgba(255, 255, 255, .12);
    --sidebar-ativo-marca: #ffffff;
    --sidebar-texto-forte: #ffffff;
    --sidebar-divisa: rgba(255, 255, 255, .15);

    --cinza-bg: #f4f8f1;
    --cinza-borda: #e0ead9;
    --texto: #3a4356;
    --texto-suave: #7c879a;
    --amarelo: #ff941c;
    --vermelho: #c14545;
    --vermelho-claro: #fbeaea;
    --azul-emb: #03388c;
    --azul-emb-claro: #e7edf8;
    --navy: #03388c;
    --navy-dark: #022a6b;

    /* Paleta ampliada — dashboard de indicadores (Impacto) */
    --imp-azul-medio: #2D63C8;
    --imp-verde-claro: #EAF6E5;
    --imp-azul-claro: #EAF1FD;
    --imp-amarelo-claro: #FFF4DF;

    /* Superfícies */
    --superficie: #ffffff;
    --superficie-suave: #fbfcf9;
    --superficie-afundada: #eef4ef;
    --campo-fundo: #fafbf8;
    --borda-suave: #f0f1ec;
    --trilho-fundo: #eef1ea;

    /* Texto */
    --texto-rotulo: #454a3d;
    --texto-fraco: #9aa48f;

    /* Selos de situação e variação */
    --sucesso-fundo: #e6f2da;
    --sucesso-borda: #cfe7c4;
    --sucesso-tinta: #2f7d1f;
    --atencao-fundo: #fbeed2;
    --atencao-borda: #ffdca8;
    --atencao-tinta: #8a6412;
    --perigo-fundo: #fbe2e2;
    --perigo-fundo-suave: #fbeceb;
    --perigo-borda: #f0c5c3;
    --perigo-tinta: #a33333;
    --perigo-tinta-forte: #8a2c2c;
    --neutro-fundo: #e7e9e2;
    --neutro-tinta: #5b6152;
    --info-borda: #c9dcee;
    --info-tinta: #2b4f70;
    /* Selo neutro sobre o fundo colorido do card de indicador. */
    --pill-sobre-cor: rgba(255, 255, 255, .65);

    /* Mapa do Brasil */
    --mapa-sem-dado: #e5e5e5;
    --mapa-traco: #ffffff;
    --tooltip-fundo: #233026;

    --acesso-fundo: linear-gradient(135deg, var(--navy-dark), var(--navy) 55%, var(--verde));

    /* A navbar e a marca do menu têm a mesma altura, e por isso as duas
       linhas de baixo se encontram. Vindo daqui, continuam se encontrando
       se a fonte ou o logo mudarem de tamanho. */
    --altura-cabecalho: 76px;

    --radius: 10px;
    --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --sombra-cartao: 0 1px 2px rgba(20,30,15,.04);
    --sombra-flutuante: 0 12px 28px rgba(20,32,12,.14);
    --sombra-rolagem: rgba(58, 67, 86, .10);
}

/* ---------------------------------------------------------------
   Tema escuro. As superfícies são pretas e neutras, como as do painel
   administrativo: o verde e o azul da ABREE entram nos detalhes — item
   ativo do menu, selos, ícones, links e botões — e não no preenchimento.
   Uma tela inteira de verde escuro cansa e some com a hierarquia.
   --------------------------------------------------------------- */

:root[data-tema="escuro"] {
    color-scheme: dark;

    /* A marca não muda de matiz; muda o que ela pinta. */
    --verde: #61ba3d;
    --verde-escuro: #2b5e1c;
    --verde-claro: #1a2417;
    --verde-claro2: #22301c;
    --verde-tinta: #8ed86b;

    /* Menu lateral: preto um tom acima da página, e não o verde do claro. */
    --sidebar-fundo: linear-gradient(180deg, #1a1d21 0%, #141619 100%);
    --sidebar-texto: #b7bec6;
    --sidebar-hover: rgba(255, 255, 255, .05);
    --sidebar-ativo-fundo: rgba(97, 186, 61, .15);
    --sidebar-ativo-marca: var(--verde);
    --sidebar-texto-forte: #eaf3e5;
    --sidebar-divisa: rgba(255, 255, 255, .09);

    --cinza-bg: #0f1113;
    --cinza-borda: #2a2e33;
    --texto: #e3e6ea;
    --texto-suave: #9aa1a9;
    --amarelo: #ff9f33;
    --vermelho: #e07676;
    --vermelho-claro: #2f2020;
    --azul-emb: #6ea4f2;
    --azul-emb-claro: #161d2b;
    --navy: #1b4ea8;
    --navy-dark: #16407f;

    --imp-azul-medio: #5d8ce2;
    --imp-verde-claro: #192019;
    --imp-azul-claro: #171b24;
    --imp-amarelo-claro: #221f16;

    --superficie: #17191c;
    --superficie-suave: #1c1f23;
    --superficie-afundada: #121416;
    --campo-fundo: #121417;
    --borda-suave: #212429;
    --trilho-fundo: #262a2f;

    --texto-rotulo: #c7ccd2;
    --texto-fraco: #8d949c;

    --sucesso-fundo: #1b2e15;
    --sucesso-borda: #2c4423;
    --sucesso-tinta: #8bd96b;
    --atencao-fundo: #2e2714;
    --atencao-borda: #463a1b;
    --atencao-tinta: #f0c161;
    --perigo-fundo: #321e1e;
    --perigo-fundo-suave: #2c1d1d;
    --perigo-borda: #52302e;
    --perigo-tinta: #e39393;
    --perigo-tinta-forte: #f0a0a0;
    --neutro-fundo: #23272c;
    --neutro-tinta: #a6adb5;
    --info-borda: #243a54;
    --info-tinta: #a9c8e6;
    --pill-sobre-cor: rgba(255, 255, 255, .10);

    --mapa-sem-dado: #2d3137;
    --mapa-traco: #0f1113;
    --tooltip-fundo: #2a2e33;
    --acesso-fundo: linear-gradient(135deg, #0b0e12, #10203c 55%, #16301a);

    --shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
    --sombra-cartao: 0 1px 2px rgba(0,0,0,.35);
    --sombra-flutuante: 0 12px 28px rgba(0,0,0,.45);
    --sombra-rolagem: rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------
   Seletor de tema — os três botões, na barra de cima e na tela de acesso.
   --------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.seletor-tema {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 9px;
    background: var(--neutro-fundo);
    flex: none;
}

.seletor-tema button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--texto-suave);
    cursor: pointer;
    transition: background .14s, color .14s;
}

.seletor-tema button svg {
    width: 13px;
    height: 13px;
    display: block;
    fill: currentColor;
}

.seletor-tema button:hover {
    color: var(--verde-tinta);
}

/* O botão da escolha atual, e não o do tema em vigor: com "sistema" marcado,
   o que o associado precisa ver é que delegou a decisão ao aparelho. */
.seletor-tema button[aria-pressed="true"] {
    background: var(--superficie);
    color: var(--verde-tinta);
    box-shadow: var(--sombra-cartao);
}

.seletor-tema button:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 1px;
}