/* ============================================================================
   BichoPix — Camada de tema (claro / escuro)
   ----------------------------------------------------------------------------
   Este arquivo NÃO muda lógica e NÃO muda o visual do tema escuro.
   Ele apenas:
     1. Publica o conjunto completo de tokens (para todas as páginas resolverem
        as var() usadas nos blocos <style>, nas duas famílias de nomes);
     2. Redefine esses tokens quando <html data-theme="light">;
     3. Aplica alguns ajustes estruturais que não dão para tokenizar.

   IMPORTANTE — ORDEM E ESPECIFICIDADE
   Este arquivo é carregado ANTES do <style> de cada página. Por isso:
     - O bloco :root aqui só serve de BASE. Se a página define o mesmo token,
       a página ganha (mesma especificidade, vem depois). Isso é intencional:
       cada página mantém a identidade dela no escuro.
     - Todo override de tema claro usa o prefixo :root[data-theme="light"],
       que tem especificidade MAIOR e por isso ganha independente da ordem.

   Tokens de marca que mudam de significado entre páginas
   (--primary, --primary-light, --accent, --accent-dark) NÃO são declarados no
   :root base, justamente para não sobrescrever a paleta de nenhuma página.
   No claro eles são tratados por família (ver seção 3).
   ============================================================================ */

/* ============================================================================
   1. BASE — TEMA ESCURO
   Valores idênticos aos que já existem nas páginas. Serve para que tokens
   novos (e tokens que só algumas páginas declaram) resolvam em todo lugar.
   ============================================================================ */
:root {
    color-scheme: dark;

    /* --- Superfícies ------------------------------------------------------ */
    --bg-body: #0B1121;
    --bg-deep: #070B16;          /* fim do gradiente de fundo */
    --bg-surface: #151C2F;
    --bg-card: #151C2F;          /* alias da família antiga */
    --bg-dark: #0B1121;          /* alias da família antiga */
    --bg-light: #151C2F;         /* alias da família antiga */
    --bg-surface-2: #1B2438;     /* superfície levemente elevada */

    /* Superfícies translúcidas (cards sobre o fundo decorativo) */
    --surface-a40: rgba(21, 28, 47, 0.40);
    --surface-a60: rgba(21, 28, 47, 0.60);
    --surface-a90: rgba(21, 28, 47, 0.90);
    --surface-alt: rgba(46, 58, 89, 0.30);

    /* Navbar / véus de modal */
    --nav-bg: rgba(11, 17, 33, 0.85);
    --nav-bg-soft: rgba(11, 17, 33, 0.55);
    --scrim: rgba(0, 0, 0, 0.50);
    --scrim-strong: rgba(6, 9, 19, 0.70);

    /* --- Texto ------------------------------------------------------------ */
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --text-strong: #FFFFFF;      /* títulos que eram #fff */
    --text-on-brand: #0B1121;    /* texto sobre preenchimento dourado */

    /* --- Linhas ----------------------------------------------------------- */
    --border: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);
    --grid-line: rgba(255, 255, 255, 0.022);

    /* --- Elevação por sobreposição (hover, faixas, chips) ----------------- */
    --overlay-1: rgba(255, 255, 255, 0.03);
    --overlay-2: rgba(255, 255, 255, 0.06);
    --overlay-3: rgba(255, 255, 255, 0.08);
    --overlay-4: rgba(255, 255, 255, 0.10);

    /* Azul de PREENCHIMENTO de botão (o que leva texto branco por cima).
       Separado de --primary porque os dois papéis puxam para lados opostos:
       --primary #3B82F6 lê bem como TEXTO sobre fundo escuro (4,6:1), mas
       como fundo de botão deixa o branco em 3,7:1 — reprova. Escurecer o
       --primary consertaria o botão e estragaria o texto, então cada papel
       ganhou o seu token. */
    --primary-fill: #2563EB;   /* branco sobre ele: 5,2:1 */

    /* Mesma ideia para o dourado das páginas antigas: --accent é dourado no
       escuro e vira âmbar ESCURO no claro (certo quando é texto). Como
       PREENCHIMENTO — botão, círculo de ícone, número de seção — o âmbar
       escuro com tinta navy por cima dava 2,1:1. Estes seguem dourados nos
       dois temas, com tinta escura por cima. */
    --accent-fill: #FACC15;
    --accent-fill-2: #EAB308;

    /* Botão desabilitado. No claro, um botão cinza-escuro parece habilitado;
       o certo é um cinza claro apagado. */
    --disabled-bg: #334155;
    --disabled-fg: #94A3B8;

    /* Painel "afundado": fundo levemente mais escuro que a superfície em volta
       (usado em grades de estatística). No escuro é preto translúcido; no claro
       precisa ser muito mais suave, senão engole o contraste do texto. */
    --sunken: rgba(0, 0, 0, 0.20);

    /* --- Sombras ---------------------------------------------------------- */
    --shadow-1: rgba(0, 0, 0, 0.10);
    --shadow-2: rgba(0, 0, 0, 0.20);
    --shadow-3: rgba(0, 0, 0, 0.30);
    --shadow-4: rgba(0, 0, 0, 0.50);

    /* --- Cores de estado (não conflitam entre páginas) -------------------- */
    --danger: #EF4444;
    --error: #EF4444;
    --success: #10B981;
    --info: #3B82F6;
    --whatsapp: #25D366;
    --green: #3DDC84;
    --green-dark: #2DB870;
    --gray-status: #64748B;

    /* --- Marca ------------------------------------------------------------ */
    --gold-start: #FFE082;
    --gold-end: #FACC15;
    --logo-soft-yellow-start: #FFE082;
    --logo-soft-yellow-end: #FACC15;
    --yellow-start: #FFE082;
    --yellow-end: #FACC15;
    --pix-teal: #2DD4BF;
    --pix-green: #84CC16;
    --brand-orange: #FB923C;

    /* Dourado usado como TEXTO (logo, títulos em gradiente).
       Separado do dourado de preenchimento porque, no claro, texto dourado
       sobre fundo claro não lê — mas botão dourado continua ótimo. */
    --gold-text-start: #FFE082;
    --gold-text-end: #FACC15;

    /* --- Paleta dos ícones dos atalhos ------------------------------------
       Essas cores vivem em atributos style="" no HTML (dashboard, dúvidas,
       cotação, palpites). Atributo inline vence qualquer seletor, então não
       daria para corrigir por CSS: viraram tokens para poderem escurecer no
       tema claro. Os pastéis originais ficam ilegíveis sobre fundo claro.  */
    --ic-amber: #FBBF24;
    --ic-teal: #2DD4BF;
    --ic-orange: #FB923C;
    --ic-violet: #A78BFA;
    --ic-blue: #60A5FA;
    --ic-emerald: #10B981;
    --ic-rose: #FB7185;
    --ic-indigo: #818CF8;
    --ic-mint: #34D399;
    --ic-green: #2ECC71;

    /* Anel de foco (acessibilidade) */
    --focus-ring: #FACC15;

    /* --- Tintas (fundos coloridos suaves) -------------------------------- */
    --primary-tint: rgba(59, 130, 246, 0.10);
    --primary-tint-2: rgba(59, 130, 246, 0.20);
    --danger-tint: rgba(239, 68, 68, 0.10);
    --accent-tint: rgba(16, 185, 129, 0.12);
    --gold-tint: rgba(250, 204, 21, 0.08);

    /* Transição usada só na troca de tema */
    --theme-ease: 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   2. TEMA CLARO — "porcelana"
   Fundo levemente frio (não branco puro) + cards brancos. A profundidade vem
   de sombras suaves e fios de borda, não de contraste bruto.
   ============================================================================ */
:root[data-theme="light"] {
    color-scheme: light;

    /* --- Superfícies ------------------------------------------------------ */
    --bg-body: #F1F4FA;
    --bg-deep: #E4EAF5;
    --bg-surface: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-dark: #F1F4FA;
    --bg-light: #FFFFFF;
    --bg-surface-2: #F7F9FD;

    --surface-a40: rgba(255, 255, 255, 0.62);
    --surface-a60: rgba(255, 255, 255, 0.80);
    --surface-a90: #FFFFFF;
    --surface-alt: rgba(224, 231, 243, 0.60);

    --nav-bg: rgba(255, 255, 255, 0.82);
    --nav-bg-soft: rgba(255, 255, 255, 0.68);
    /* Véu de modal continua escuro no claro — é o comportamento correto */
    --scrim: rgba(15, 23, 42, 0.38);
    --scrim-strong: rgba(15, 23, 42, 0.48);

    /* --- Texto ------------------------------------------------------------ */
    /* Contrastes medidos sobre --bg-body (#F1F4FA); todos >= 4.5:1 (AA) */
    --text-primary: #0D1526;     /* 15.9:1 */
    --text-secondary: #55627B;   /*  5.6:1 */
    --text-muted: #5F6B80;       /*  4.9:1 — texto pequeno também passa */
    --text-strong: #0D1526;
    --text-on-brand: #2A1D05;    /* tinta sobre dourado: 9.1:1 */

    /* --- Linhas ----------------------------------------------------------- */
    --border: rgba(13, 21, 38, 0.10);
    --border-strong: rgba(13, 21, 38, 0.18);
    --grid-line: rgba(13, 21, 38, 0.035);

    /* --- Elevação: no claro "elevar" é escurecer de leve ----------------- */
    --overlay-1: rgba(13, 21, 38, 0.035);
    --overlay-2: rgba(13, 21, 38, 0.055);
    --overlay-3: rgba(13, 21, 38, 0.075);
    --overlay-4: rgba(13, 21, 38, 0.10);

    --primary-fill: #1D4ED8;   /* branco sobre ele: 6,7:1 */
    --accent-fill: #FFD24A;    /* segue dourado: a tinta navy lê em 9:1 */
    --accent-fill-2: #F5B700;
    --disabled-bg: #E2E8F0;
    --disabled-fg: #93A0B4;
    --sunken: rgba(13, 21, 38, 0.045);

    /* --- Sombras: suaves e levemente frias ------------------------------- */
    --shadow-1: rgba(13, 21, 38, 0.04);
    --shadow-2: rgba(13, 21, 38, 0.07);
    --shadow-3: rgba(13, 21, 38, 0.10);
    --shadow-4: rgba(13, 21, 38, 0.16);

    /* --- Cores de estado ---------------------------------------------------
       Escurecidas o suficiente para servir aos DOIS papéis em fundo claro:
       como cor de texto (>= 4.5:1 sobre o fundo) e como preenchimento de
       botão com texto branco (>= 4.5:1 do branco sobre elas).            */
    --danger: #B91C1C;      /* texto 5.9:1 | branco sobre ela 6.5:1 */
    --error: #B91C1C;
    --success: #036B4E;     /* texto 5.9:1 | branco sobre ela 6.5:1
                               (escuro o bastante para ler também sobre a
                               tinta esmeralda de cabeçalho de tabela)     */
    --info: #1D4ED8;        /* texto 6.1:1 — precisa sobrar margem porque
                               aparece sobre tinta azul de cabeçalho de
                               tabela, que já escurece um pouco o fundo   */
    --whatsapp: #0B6B5F;    /* texto 5.8:1 | branco sobre ela 6.4:1 */
    --green: #047857;
    --green-dark: #036B4E;
    --gray-status: #5F6B80;

    /* --- Marca ------------------------------------------------------------
       O dourado continua dourado quando é PREENCHIMENTO (é a assinatura da
       marca e fica ótimo sobre fundo claro). Onde o dourado é TEXTO, há regra
       dedicada na seção 4 (.logo-text) trocando para âmbar legível.        */
    --gold-start: #FFD24A;
    --gold-end: #F5B700;
    --logo-soft-yellow-start: #FFD24A;
    --logo-soft-yellow-end: #F5B700;
    --yellow-start: #FFD24A;
    --yellow-end: #F5B700;
    --pix-teal: #0F766E;    /* texto 5.0:1 */
    --pix-green: #4D7C0F;   /* texto 4.5:1 */
    --brand-orange: #C2410C;/* texto 4.7:1 */

    /* Texto dourado vira âmbar/bronze: mantém o recado da marca e passa a ler
       sobre fundo claro (o dourado de preenchimento continua dourado acima).
       O stop inicial também aparece como cor sólida em :hover de links, por
       isso precisa passar em texto pequeno, não só no wordmark grande.    */
    --gold-text-start: #B45309;  /* 4.6:1 */
    --gold-text-end: #92400E;    /* 6.4:1 */

    /* Ícones dos atalhos: mesmos matizes, escurecidos. Todos >= 4.5:1. */
    --ic-amber: #B45309;
    --ic-teal: #0F766E;
    --ic-orange: #C2410C;
    --ic-violet: #6D28D9;
    --ic-blue: #2563EB;
    --ic-emerald: #047857;
    --ic-rose: #BE123C;
    --ic-indigo: #4338CA;
    --ic-mint: #047857;
    --ic-green: #047857;

    --focus-ring: #B45309;

    /* --- Tintas ----------------------------------------------------------- */
    --primary-tint: rgba(37, 99, 235, 0.08);
    --primary-tint-2: rgba(37, 99, 235, 0.16);
    --danger-tint: rgba(220, 38, 38, 0.08);
    --accent-tint: rgba(5, 150, 105, 0.10);
    --gold-tint: rgba(245, 183, 0, 0.12);
}

/* ----------------------------------------------------------------------------
   Correção pontual no TEMA ESCURO
   --info era #3B82F6, um azul escuro demais para servir de TEXTO sobre fundo
   escuro: no cabeçalho azul da tabela de inversão dava 3,8:1 (reprova AA).
   Clarear resolve sem efeito colateral porque --info só aparece como `color:`
   e como filete decorativo de 4px — nunca como preenchimento de botão, então
   não há texto branco por cima para piorar.
   ---------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    --info: #60A5FA;   /* 7,4:1 sobre o fundo; 5,7:1 sobre a tinta azul */

    /* --text-muted era #64748B: 3,3:1 sobre cartão — reprovava nos rótulos de
       seção do cadastro e no rodapé da home. Clareado o mínimo necessário
       para passar (4,6:1 na pior superfície) e continuar visivelmente mais
       apagado que --text-secondary #94A3B8 (6,0:1), preservando a hierarquia. */
    --text-muted: #7E8CA6;
}

/* ============================================================================
   3. TOKENS DE MARCA POR FAMÍLIA (só no tema claro)
   --primary/--accent significam coisas diferentes nas duas gerações de página.
   O theme.js marca <html> com .bp-fam-mint (páginas novas: --bg-surface,
   accent esmeralda) ou .bp-fam-gold (páginas antigas: --bg-card, accent
   dourado), para cada família receber o ajuste certo.
   ============================================================================ */

/* Família nova — azul + esmeralda
   O --accent aparece muito como cor de VALOR (saldos, prêmios) em texto de
   ~18px, então precisa passar em texto pequeno, não só em título grande. */
:root[data-theme="light"].bp-fam-mint {
    --primary: #2563EB;      /* 4.7:1 */
    --primary-light: #1D4ED8;/* 6.1:1 */
    --accent: #036B4E;       /* 5.9:1 — margem para os casos em que ele cai
                                sobre tinta esmeralda (badge, cabeçalho),
                                que já escurece o fundo um pouco          */
    --accent-dark: #02563E;  /* 7.4:1 */
}

/* Família antiga — navy + dourado */
:root[data-theme="light"].bp-fam-gold {
    --primary: #1E293B;
    --primary-light: #334155;
    --accent: #B45309;       /* âmbar: o dourado puro não lê sobre branco */
    --accent-dark: #92400E;
}

/* ============================================================================
   4. AJUSTES ESTRUTURAIS DO TEMA CLARO
   Regras que não dão para resolver só trocando token.
   ============================================================================ */

/* --- Piso de cor do tema --------------------------------------------------
   Algumas páginas (cotacaoboard, meus-jogos, entre outras) deixam o body
   transparente e dependem só da camada .bg-orbs para pintar o fundo. Isso
   funciona, mas fica frágil. Esta regra garante que exista sempre um fundo
   do tema por baixo. Declarada antes do <style> das páginas, então quem
   define o próprio fundo continua mandando; o body transparente ganha piso.
   O background do body é propagado para o canvas, abaixo dos orbs — logo o
   fundo decorativo continua visível.                                      */
body { background-color: var(--bg-body); }

/* --- Fundo decorativo: no claro os orbs viram um véu pastel, não manchas --- */
:root[data-theme="light"] .bg-orbs {
    background:
        radial-gradient(1200px 700px at 50% -10%, rgba(37, 99, 235, 0.07), transparent 60%),
        linear-gradient(160deg, #F4F7FC 0%, #E4EAF5 100%);
}
:root[data-theme="light"] .orb { opacity: 0.22; filter: blur(100px); }

/* (O texto em gradiente dourado é resolvido pelos tokens --gold-text-*:
   as regras das páginas que fazem background-clip:text passaram a usá-los.) */

/* --- ILHAS ESCURAS -------------------------------------------------------
   Alguns blocos têm `background: var(--primary)`, que no tema claro continua
   sendo um navy escuro (e fica ótimo: um painel escuro sobre página clara é
   um recurso de design, não um bug). O problema é o CONTEÚDO: os filhos usam
   --text-primary, --accent etc., que viraram cores escuras — texto escuro
   sobre painel escuro.

   Em vez de corrigir regra por regra, os tokens são REDECLARADOS na própria
   ilha. Como variável CSS herda, todo descendente passa a usar a versão
   "para fundo escuro" automaticamente.

   Para marcar uma ilha nova, basta adicionar a classe .bp-superficie-escura
   no elemento.

   Sem seletor de tema de propósito: .contact-box e .animal-grupo são navy nos
   DOIS temas, então o conteúdo sempre precisa de cor para fundo escuro. Isso
   também corrige um defeito que já existia antes deste trabalho: em
   Termo_uso.html e politica_privacidade.html (que são documentos claros por
   projeto, com --text-primary escuro), o `.contact-box p` ficava com texto
   #1e293b sobre painel #2E3A59 — contraste 1,3:1, praticamente ilegível.   */
.contact-box,
.animal-grupo,
.bp-superficie-escura {
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-strong: #FFFFFF;

    --accent: #FACC15;
    --accent-dark: #EAB308;
    --primary-light: #93C5FD;
    --danger: #F87171;
    --success: #34D399;

    /* dourado volta a ser dourado: aqui o fundo é escuro */
    --gold-text-start: #FFE082;
    --gold-text-end: #FACC15;

    --border: rgba(255, 255, 255, 0.14);
    --border-strong: rgba(255, 255, 255, 0.26);
    --overlay-1: rgba(255, 255, 255, 0.05);
    --overlay-2: rgba(255, 255, 255, 0.08);
    --overlay-3: rgba(255, 255, 255, 0.12);
    --overlay-4: rgba(255, 255, 255, 0.16);
    --sunken: rgba(0, 0, 0, 0.20);

    color: var(--text-primary);
}

/* --- ILHAS CLARAS ---------------------------------------------------------
   O oposto do bloco acima. Termos de Uso e Política de Privacidade são
   DOCUMENTOS CLAROS por projeto original: declaram a própria paleta de papel
   (--bg-light #f8fafc, --bg-card #ffffff, --text-primary #1e293b) e continuam
   claros mesmo no tema escuro — de propósito, é um documento para leitura.

   O que estava quebrado: as cores de ESTADO dessas páginas continuavam sendo
   as do tema escuro (--info #3b82f6, --accent-dark #EAB308, --success #10b981),
   ou seja, cores pensadas para fundo escuro aplicadas sobre papel branco. Daí
   os títulos de callout em 1,9:1 e 2,5:1.

   A classe reescreve só as cores de conteúdo para versões que leem sobre
   claro. Vai no <main class="main-content">, NÃO no <body>: a navbar dessas
   páginas usa --bg-body e fica escura no tema escuro, então precisa continuar
   com texto claro.                                                          */
.bp-superficie-clara {
    --text-primary: #0D1526;
    --text-secondary: #475569;   /* 5,4:1 sobre a faixa #E2E8F0 do .last-update */
    --text-muted: #5F6B80;
    --text-strong: #0D1526;

    --info: #1D4ED8;             /* era #3b82f6: 3,7:1 sobre a tinta azul     */
    --success: #036B4E;          /* era #10b981/#2ECC71: 2,5:1                */
    --danger: #B91C1C;
    --accent: #B45309;           /* era #FACC15                               */
    --accent-dark: #92400E;      /* era #EAB308: 1,9:1 sobre a tinta amarela  */
    --primary-light: #334155;

    --gold-text-start: #B45309;
    --gold-text-end: #92400E;

    color: var(--text-primary);
}

/* --- Anel de foco visível sobre fundo claro ------------------------------- */
:root[data-theme="light"] a:focus-visible,
:root[data-theme="light"] button:focus-visible,
:root[data-theme="light"] input:focus-visible,
:root[data-theme="light"] select:focus-visible,
:root[data-theme="light"] textarea:focus-visible,
:root[data-theme="light"] label:focus-visible {
    outline-color: var(--focus-ring);
}

/* --- Campos de formulário -------------------------------------------------
   Várias páginas fixam `color: #fff` / `color: white` no input. Sobre fundo
   claro isso fica invisível. Aqui a cor do texto e do placeholder voltam a
   acompanhar o tema. Especificidade (0,2,1) ganha das classes das páginas. */
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
    color: var(--text-primary);
    border-color: var(--border-strong);
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}
/* Ícone do seletor de data nativo: no claro não precisa inverter */
:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
}

/* Algumas páginas fixam `color-scheme: dark` no campo de data (meus-jogos,
   resulboard). Isso deixaria o calendário nativo escuro dentro do tema claro. */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .date-input {
    color-scheme: light;
}

/* Opções de <select> renderizadas pelo sistema */
:root[data-theme="light"] select option {
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* --- Barras de rolagem ---------------------------------------------------- */
:root[data-theme="light"] * {
    scrollbar-color: rgba(13, 21, 38, 0.22) transparent;
}
:root[data-theme="light"] ::-webkit-scrollbar { width: 11px; height: 11px; }
:root[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(13, 21, 38, 0.20);
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(13, 21, 38, 0.34);
    background-clip: content-box;
}

/* --- Seleção de texto ----------------------------------------------------- */
:root[data-theme="light"] ::selection {
    background: rgba(37, 99, 235, 0.18);
    color: var(--text-primary);
}

/* --- Sombra de card um pouco mais presente no claro -----------------------
   No escuro a borda já separa o card do fundo. No claro, card branco sobre
   fundo quase branco precisa de sombra para existir.                       */
:root[data-theme="light"] .saldo-card,
:root[data-theme="light"] .acao-card,
:root[data-theme="light"] .card,
:root[data-theme="light"] .info-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .pule-card,
:root[data-theme="light"] .modal-sair-card {
    box-shadow: 0 1px 2px var(--shadow-1), 0 10px 28px var(--shadow-2);
}

/* ============================================================================
   5. BOTÃO DE TROCA DE TEMA
   Injetado pelo theme.js. Fica na navbar quando existe um lugar natural;
   se a página não tem navbar, vira botão flutuante.
   ============================================================================ */
.bp-theme-toggle {
    --bp-tt-size: 38px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--bp-tt-size);
    height: var(--bp-tt-size);
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--overlay-1);
    color: var(--text-secondary);
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
    line-height: 1;
    transition: background var(--theme-ease), color var(--theme-ease),
                border-color var(--theme-ease), transform 160ms ease;
    -webkit-tap-highlight-color: transparent;
}
.bp-theme-toggle:hover {
    background: var(--overlay-3);
    color: var(--text-primary);
    border-color: var(--focus-ring);
}
.bp-theme-toggle:active { transform: scale(0.94); }

/* Os dois ícones ficam sobrepostos; só um aparece por vez */
.bp-theme-toggle .bp-tt-icon {
    position: absolute;
    font-size: 0.95rem;
    transition: opacity 200ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bp-theme-toggle .bp-tt-sun  { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.bp-theme-toggle .bp-tt-moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* No claro, o botão oferece "ir para o escuro" (lua) e vice-versa */
:root[data-theme="light"] .bp-theme-toggle .bp-tt-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
:root[data-theme="light"] .bp-theme-toggle .bp-tt-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* Variante flutuante (páginas sem navbar) */
.bp-theme-toggle.bp-tt-floating {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    top: calc(0.75rem + env(safe-area-inset-top));
    z-index: 1400;
    background: var(--bg-surface);
    border-color: var(--border-strong);
    box-shadow: 0 6px 20px var(--shadow-3);
}

/* Dentro de <ul class="menu-direito"> o botão vem embrulhado num <li> */
li.bp-theme-toggle-item { display: flex; align-items: center; }

/* Agrupador usado quando a navbar termina num CTA (ex.: "Criar conta"):
   o botão fica encostado no CTA em vez de flutuar no meio do espaço. */
.bp-tt-group {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 0 0 auto;
}

/* Espaçador de largura fixa que algumas navbars usam para centralizar a
   logo. A largura inline é preservada; só ganha alinhamento à direita. */
.bp-tt-slot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Encaixe de último recurso: empurra o botão para a ponta direita */
.bp-theme-toggle.bp-tt-inline-end { margin-left: auto; }

/* Reduz o tamanho no celular para não competir com o resto da navbar.
   34px continua acima do mínimo de alvo de toque (24px, WCAG 2.5.8). */
@media (max-width: 480px) {
    .bp-theme-toggle { --bp-tt-size: 34px; }
    .bp-theme-toggle .bp-tt-icon { font-size: 0.85rem; }

    /* Aperta as folgas da navbar em tela estreita para o botão caber.
       Medido em 375px no dashboard: o conteúdo pedia 367px num container de
       296px — já passava 21px ANTES deste botão; com ele, passava 23px da
       borda da tela. As reduções abaixo devolvem ~68px de folga.
       O prefixo :root eleva a especificidade para ganhar do <style> da
       página, que é carregado depois deste arquivo.                       */
    :root .navbar { padding-left: 0.75rem; padding-right: 0.75rem; }
    :root .nav-container { gap: 0.5rem; }
    :root .nav-left { gap: 0.75rem; }
    :root .menu-direito { gap: 0.5rem; }
}

/* ============================================================================
   6. TROCA SUAVE + PREFERÊNCIAS DO APARELHO
   ============================================================================ */

/* Só durante a troca de tema (classe posta pelo theme.js por ~300ms).
   Fora disso nada herda transição — não atrapalha animação nenhuma. */
:root.bp-theme-switching,
:root.bp-theme-switching body,
:root.bp-theme-switching .navbar,
:root.bp-theme-switching .sidebar,
:root.bp-theme-switching .bg-orbs {
    transition: background-color var(--theme-ease), background var(--theme-ease),
                color var(--theme-ease), border-color var(--theme-ease);
}

@media (prefers-reduced-motion: reduce) {
    :root.bp-theme-switching,
    :root.bp-theme-switching body,
    :root.bp-theme-switching .navbar,
    :root.bp-theme-switching .sidebar,
    :root.bp-theme-switching .bg-orbs { transition: none; }
    .bp-theme-toggle,
    .bp-theme-toggle .bp-tt-icon { transition: none; }
}

/* Mais contraste para quem pede */
@media (prefers-contrast: more) {
    :root[data-theme="light"] {
        --text-secondary: #3E4A60;
        --border: rgba(13, 21, 38, 0.20);
        --border-strong: rgba(13, 21, 38, 0.32);
    }
}