/* Golden Rastreamento — paleta única dos temas claro/escuro.
   Toda cor do painel e do login vem daqui: nenhuma página ou script escreve hex próprio,
   assim os dois temas permanecem coerentes entre si. */
:root{
    /* o esquema nativo diz ao navegador com que cor ele pinta o que a página não pinta:
       o pop-up de <select>, a barra de rolagem e os calendários. Sem esta linha, uma máquina
       com o sistema no claro abre a lista em fundo branco herdando o texto claro do painel. */
    color-scheme:light;

    /* identidade */
    --brand-gold:#e0a33e;
    --brand-gold-2:#c9862a;
    --brand-gold-ink:#241a06;
    --brand-teal:#1f9e86;
    --brand-violet:#5e35b1;
    --brand-blue:#1c5d99;
    --brand-red:#c0392b;
    --brand-green:#12694f;
    --brand-amber:#a8630f;
    --on-solid:#ffffff;

    /* brilhos de marca usados em gradientes */
    --glow-gold:rgba(201,134,42,.18);
    --glow-teal:rgba(31,158,134,.25);

    --gold:var(--brand-gold);
    --bs-primary:var(--brand-gold-2);
    --bs-primary-rgb:201,134,42;

    /* tipografia e forma */
    --font-sans:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
    --font-head:"Poppins","Inter",system-ui,sans-serif;
    --radius-lg:16px;
    --radius-md:10px;
    --ease:cubic-bezier(.22,.61,.36,1);

    /* pares fundo+texto: um tom semântico por vez, legível nos dois temas */
    --t-gold-bg:rgba(224,163,62,.16);   --t-gold-fg:var(--brand-gold-2);
    --t-teal-bg:rgba(31,158,134,.14);   --t-teal-fg:var(--brand-teal);
    --t-blue-bg:rgba(28,93,153,.12);    --t-blue-fg:var(--brand-blue);
    --t-violet-bg:rgba(94,53,177,.12);  --t-violet-fg:var(--brand-violet);
    --t-green-bg:rgba(18,105,79,.12);   --t-green-fg:var(--brand-green);
    --t-amber-bg:rgba(168,99,15,.14);   --t-amber-fg:var(--brand-amber);
    --t-red-bg:rgba(192,57,43,.12);     --t-red-fg:var(--brand-red);
    --t-neutral-bg:#f6f8fa;      --t-neutral-fg:#5b6672;

    /* lista do <select>: a lista suspensa não é desenhada pela página, e sim pelo sistema,
       então precisa de fundo e texto próprios e opacos — transparência aí é o que some. */
    --select-surface:#ffffff;
    --select-text:#12161a;
    --select-marcado:#f6e6c6;

    /* gráfico */
    --chart-line:var(--brand-gold-2);
    --chart-area:rgba(224,163,62,.12);
    --chart-grid:rgba(18,22,26,.08);
    --chart-tick:#5b6672;

    /* login (página própria, sem Bootstrap) */
    --login-bg-a:#12161a;
    --login-bg-b:#0d1114;
    --login-surface:#ffffff;
    --login-text:#12161a;
    --login-muted:#5b6672;
    --login-line:#e6e9ee;
    --login-field-bg:#ffffff;

    /* camadas flutuantes (aviso e confirmação): superfície, sombra e véu */
    --aviso-sombra:0 18px 40px -22px rgba(18,22,26,.45);
    --aviso-veu:rgba(18,22,26,.55);

    /* mock do anúncio na busca do Google: são as cores do Google, não as da marca — e por
       serem de outra marca é que precisam de par declarado no tema escuro, senão o título azul
       some no fundo preto. */
    --anuncio-surface:#ffffff;
    --anuncio-texto:#12161a;
    --anuncio-titulo:#1a0dab;
    --anuncio-url:#006621;
    --anuncio-descricao:#4d5156;
    --anuncio-rotulo:#5f6368;
    --anuncio-linha:#e6e9ee;
}

[data-bs-theme="dark"]{
    color-scheme:dark;

    --t-gold-bg:rgba(224,163,62,.20);    --t-gold-fg:#eabf6b;
    --t-teal-bg:rgba(31,158,134,.20);    --t-teal-fg:#5ed3b9;
    --t-blue-bg:rgba(28,93,153,.26);     --t-blue-fg:#82b8f0;
    --t-violet-bg:rgba(94,53,177,.26);   --t-violet-fg:#bba2f2;
    --t-green-bg:rgba(18,105,79,.26);    --t-green-fg:#6ed3a7;
    --t-amber-bg:rgba(168,99,15,.26);    --t-amber-fg:#f0bd6a;
    --t-red-bg:rgba(192,57,43,.24);      --t-red-fg:#f2908f;
    --t-neutral-bg:rgba(255,255,255,.07);--t-neutral-fg:#9aa7b4;
    --select-surface:#171c21;
    --select-text:#eef2f5;
    --select-marcado:#3c3218;
    --chart-line:var(--brand-gold);
    --chart-area:rgba(224,163,62,.20);
    --chart-grid:rgba(255,255,255,.09);
    --chart-tick:#9aa7b4;
    --login-surface:#171c21;
    --login-text:#eef2f5;
    --login-muted:#9aa7b4;
    --login-line:#2c343c;
    --login-field-bg:#12171b;
    --aviso-sombra:0 18px 40px -22px rgba(0,0,0,.7);
    --aviso-veu:rgba(0,0,0,.72);

    /* o mesmo mock, lido no fundo escuro: azul e verde do Google clareados, na mesma medida
       que a própria busca clareia no tema escuro */
    --anuncio-surface:#171c21;
    --anuncio-texto:#eef2f5;
    --anuncio-titulo:#8ab4f8;
    --anuncio-url:#81c995;
    --anuncio-descricao:#b8c1c9;
    --anuncio-rotulo:#9aa7b4;
    --anuncio-linha:#2c343c;
}

/* A lista do <select> é montada pelo sistema, não pela página: ela pega o fundo das cores do
   sistema e o texto do elemento, então no painel escuro sobra letra clara sobre lista branca e
   a lista abre aparentemente vazia. As duas cores declaradas na option fecham esse buraco em
   qualquer Windows; o fundo tem de ser opaco — transparência ali é invisível. */
option,optgroup{background-color:var(--select-surface);color:var(--select-text)}
option:checked{background-color:var(--select-marcado);color:var(--select-text)}
optgroup{font-weight:600}

/* Onde o navegador entende `base-select` (Chrome e Edge de 2024 em diante) a lista deixa de
   ser desenhada pelo sistema e passa a ser desenhada pela página: é a única garantia que não
   depende do tema do Windows, do modo escuro forçado do navegador nem da aceleração de vídeo,
   que são exatamente o que fazia a lista abrir como uma mancha de cor única. Sem esse suporte,
   o pop-up nativo fica com o par de cores declarado logo acima. */
@supports (appearance:base-select){
    /* `.form-select` entra no seletor porque o Bootstrap do painel escreve `appearance:none` na
       classe, e classe ganha de etiqueta: sem isso o campo continuaria com o pop-up do sistema. */
    select,.form-select,::picker(select){appearance:base-select}
    select::picker-icon{display:none}
    ::picker(select){
        background-color:var(--select-surface);
        color:var(--select-text);
        border:1px solid var(--bs-border-color);
        border-radius:var(--radius-md);
        padding:4px;margin-top:2px;
        box-shadow:var(--aviso-sombra);
    }
    option{display:flex;align-items:center;gap:8px;padding:.42rem .6rem;border-radius:6px}
    option:hover,option:focus{background-color:var(--select-marcado)}
    option:checked{background-color:transparent;font-weight:600}
    option::checkmark{color:var(--brand-gold-2)}
    optgroup label{padding:.4rem .6rem;color:var(--t-neutral-fg)}
}

/* utilitários de tom — chips, ícones e bolhas usam sempre o mesmo par */
.tone-gold{background:var(--t-gold-bg);color:var(--t-gold-fg)}
.tone-teal{background:var(--t-teal-bg);color:var(--t-teal-fg)}
.tone-blue{background:var(--t-blue-bg);color:var(--t-blue-fg)}
.tone-violet{background:var(--t-violet-bg);color:var(--t-violet-fg)}
.tone-green{background:var(--t-green-bg);color:var(--t-green-fg)}
.tone-amber{background:var(--t-amber-bg);color:var(--t-amber-fg)}
.tone-red{background:var(--t-red-bg);color:var(--t-red-fg)}
.tone-neutral{background:var(--t-neutral-bg);color:var(--t-neutral-fg)}
.text-tone-gold{color:var(--t-gold-fg)!important}
.text-tone-teal{color:var(--t-teal-fg)!important}
.text-tone-blue{color:var(--t-blue-fg)!important}
.text-tone-violet{color:var(--t-violet-fg)!important}
.text-tone-green{color:var(--t-green-fg)!important}
.text-tone-amber{color:var(--t-amber-fg)!important}
.text-tone-red{color:var(--t-red-fg)!important}

/* O QR do dois fatores: fundo branco opaco sempre, nos dois temas. Um código de barras escuro sobre
   fundo escuro existe para a tela, não para a câmera — e a câmera do celular é quem lê isto. */
.qr-golden{background:#fff;border:1px solid var(--login-line);border-radius:14px;padding:14px;color:#111}
.qr-golden svg{display:block;max-width:100%;height:auto}
/* Os oito códigos de recuperação: uma grade que se copia olhando, sem precisar de planilha. */
.codigos-recuperacao{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.codigos-recuperacao code{display:block;text-align:center;padding:12px 8px;font-size:1.02rem;letter-spacing:.06em;
    background:var(--t-neutral-bg);border:1px dashed var(--login-line);border-radius:10px;color:var(--bs-body-color)}