/* BASE — variáveis de tema :root (cores, fontes, tamanhos), claro (padrão) e escuro (:root[data-theme="dark"]). Usado pelo app inteiro — mude um valor aqui e ele muda em todo lugar que usa aquela variável. */

:root{
  /* ============================================================
     TEMA VISUAL — cores, fontes e tamanhos usados no app inteiro.
     Este bloco :root e o TEMA CLARO (padrao). O tema escuro (a opcao
     alternativa que o usuario liga no toggle) esta inteiro no bloco
     ':root[data-theme="dark"]' logo abaixo — mesmas variaveis, outros
     valores. Editar um valor aqui muda em todos os lugares que o usam,
     só no tema claro; pra mudar o escuro, edite o outro bloco.
     Cores de dominio (Google, humor do Diario, elemento/aspecto
     astrologico) NAO estao aqui de proposito — nao fazem parte do
     tema de UI e ficam iguais nos dois temas.
     ============================================================ */

  /* --- Cores base (fundo, superficies, texto) — paleta inspirada no mapa natal (Sol Capricornio, Ascendente Aries) --- */
  --bg:#FFFFFF;                          /* fundo geral do app — branco, a pedido da usuária (2026-07-30) */
  --bg-rgb:255,255,255;                  /* --bg em R,G,B (p/ usar com transparencia) */
  --surface:#FFFFFF;                     /* fundo de cards e superficies elevadas — branco, a pedido da usuária (2026-07-30) */
  --surface-rgb:255,255,255;             /* --surface em R,G,B */
  --surface2:#FFFFFF;                    /* fundo de superficies um nivel acima (chips, inputs, hover) — branco, a pedido da usuária (2026-07-30) */
  --border:rgba(74,85,104,0.18);         /* borda padrao — tingida com --cosmic-blue-gray (2026-08-23) */
  --pv-card-border:#DCD6C8;              /* borda dos cards do Hub do Perfil Vivo — hex literal pedido pela usuária (2026-09-19), não bate com --border no escuro, por isso token próprio */
  --border-hover:rgba(74,85,104,0.32);   /* borda em destaque/hover/handle de modal — mesmo tom, mais opaco */
  --text:#201A1D;                        /* cor do texto principal — quase preto, tom quente (Sol Capricornio). ~15.1:1 no fundo claro */
  --text-muted:#6B625E;                  /* texto secundario — cinza quente, nao azulado */
  --text-dim:#8a8d9a;                    /* texto terciario/apagado (placeholders, rotulos finos) — uso decorativo */

  /* --- Cor de destaque (accent/primaria) --- */
  --accent:#8B2F6B;                      /* magenta profundo da familia do gradiente laranja-rosa-roxo-azul. ~7.7:1 no fundo claro */
  --accent-rgb:139,47,107;               /* --accent em R,G,B */
  --accent-dim:rgba(139,47,107,0.12);    /* accent suave (fundo de item selecionado) */
  --accent-glow:rgba(139,47,107,0.07);   /* accent bem suave (glow/fundo de destaque leve) */

  /* --- Sinastria por contexto (js/compat.js) — diferenciacao visual entre
     os dois indices, Compatibility (rosa suave, calma/harmonia) e Intensity
     (vermelho quente, forca/carga). Intensity NUNCA deve ler como "ruim" —
     por isso um vermelho terracota mais quente, distinto de --color-error
     (esse sim semanticamente "erro/perigo" em todo o resto do app). --- */
  --index-compat:#D7607E;
  --index-intensity:#C05A3E;

  /* --- Gradiente dos botoes principais (CTA: "Continuar", "Enviar" etc) — laranja->rosa->roxo->azul, mesmo padrao nos dois temas. Sobrescrito por usuaria quando --colorPersonalization esta ligado (applyAstroPalette()) --- */
  --gradient-start:#E48E6F;
  --gradient-start-rgb:228,142,111;
  --gradient-mid1:#D7607E;
  --gradient-mid2:#9D71D4;
  --gradient-end:#867FD7;
  --gradient-end-rgb:134,127,215;

  /* --- Gradiente linear dos headers (mapa-navbar, mapa-hero-own, interp-hero) — laranja->vinho->roxo->azul escuros, horizontal, cobrindo a largura inteira. Exclusivo dos headers, nao compartilhado com botoes --- */
  --header-start:#D9642E;
  --header-mid1:#A8324F;
  --header-mid2:#5B3A8C;
  --header-end:#3D3F8C;


  /* --- Overlay translucido adaptavel ao tema (bordas/divisores sutis) --- */
  --overlay-rgb:0,0,0;                   /* no claro, escurece o fundo; no escuro (abaixo) clareia */
  --color-auth-link:rgba(0,0,0,0.6);     /* link secundario da tela de login — alpha proprio pra manter AA (~5.7:1) no fundo claro */

  /* --- Cores utilitarias --- */
  --white-rgb:255,255,255;               /* branco puro em R,G,B — SEMPRE branco nos dois temas (ex: fundo escuro fixo do onboarding) */
  --black-rgb:0,0,0;                     /* preto puro em R,G,B — SEMPRE preto nos dois temas (sombras/scrims) */
  --color-white:#fff;                    /* branco solido — texto/icone sobre botoes coloridos, igual nos dois temas */
  --color-error:#A6293B;                 /* vermelho de mensagens de erro/validacao — mais profundo, ~7.0:1 no fundo claro */
  --color-retrograde:#a04949;            /* vermelho do marcador de planeta retrogrado — ~5.9:1 (já ajustado manualmente antes, mantido) */
  --color-tab-inactive:#6B6459;           /* icones/labels inativos na barra de abas — tom quente (2026-09-19, pedido usuária; era --cosmic-blue-gray) */
  --color-select-option-bg:#E8E2D6;      /* fundo das opcoes de <select> nativo — espelha --surface2 */
  --color-journal-empty:#b5b7c0;         /* cor do dia vazio no calendario do Diario */
  --color-beta-bg:#fdf3d9;               /* fundo do banner "beta" */
  --color-beta-text:#8a6a1a;             /* texto/borda do banner "beta" — ~4.6:1 no fundo do banner */

  /* --- Cores dos 4 elementos na mandala (fundo dos setores de signo + tint do glifo) —
     tema claro usa tons mais profundos/dessaturados; tema escuro mantem o pastel original
     (ver bloco [data-theme="dark"]) pra nao regredir visualmente lá. Mesma familia de matiz
     por elemento nos dois temas, so muda profundidade/saturacao. --- */
  --color-elem-fire:#6B4A94;
  --color-elem-earth:#2A5FA0;
  --color-elem-air:#5A82A8;
  --color-elem-water:#423F8F;

  /* --- Paleta astrologica pessoal (docs/SPEC-ASTRO-PALETTE.md) — 6 tokens
     calculados por /api/palette a partir do mapa natal de cada usuaria,
     aplicados via applyAstroPalette() apos generateChart(). Nascem em
     cinza neutro (tema "antes do calculo"); nenhum componente deve
     referenciar hex direto, so esses 6 nomes. --- */
  --color-dominant:#6B6862;
  --color-structure:#6B6862;
  --color-voice:#6B6862;
  --color-accent-rare:#6B6862;
  --color-cool-exception:#6B6862;
  --bg-base:#F2F0EE;

  /* --- Paleta clara do cartao de onboarding — fixa, igual nos dois temas (o onboarding tem seu proprio fundo escuro sempre) --- */
  --onboard-surface:#fff;
  --onboard-surface2:#f5f5f8;
  --onboard-text:#1a1b2e;
  --onboard-text-secondary:#3a3a4e;      /* usado em .ob-radio/.ob-check, mais escuro que text-muted */
  --onboard-text-muted:#6b6b80;
  --onboard-text-dim:#9b9bae;
  --onboard-placeholder:#b0b0be;
  --onboard-border:#e0e0e8;
  --onboard-border-hover:#d0d0d8;
  --onboard-bg-1:#1a1118;                /* gradiente de fundo do onboarding — topo */
  --onboard-bg-2:#120e14;                /* gradiente de fundo do onboarding — meio */
  --onboard-bg-3:#0d0a0f;                /* gradiente de fundo do onboarding — base */
  --sunset-1:#FF6B35;                    /* laranja neon */
  --sunset-2:#F2295B;                    /* rosa-vermelho neon */
  --sunset-3:#8B3FE8;                    /* roxo neon */
  --sunset-4:#5B4FE8;                    /* azul-violeta neon */
  /* Textura de nebulosa dos headers — assets/header-texture-nebula.webp (NASA/ESA/CSA/STScI, "Pillars of Creation", dominio publico), combinado via background-blend-mode:overlay com o gradiente do header. Credito no rodape da aba Mapa. */

  /* --- Tipografia — familias (igual nos dois temas) --- */
  --font-body:'DM Sans','Noto Sans','Noto Sans JP',sans-serif;       /* fonte padrao do app */
  --font-heading:'DM Sans','Noto Sans','Noto Sans JP',sans-serif; /* mesma fonte do corpo — sem serifada (2026-08-04) */
  --font-heading-alt:'Poppins','Noto Sans','Noto Sans JP',sans-serif; /* fonte alternativa (onboarding claro) */

  /* --- Tipografia — tamanhos (igual nos dois temas, do menor pro maior).
     Corrigido 2026-08-21: heading-sm(28px) era MAIOR que heading-md(26px) —
     nomenclatura sm/md/lg mentia sobre o tamanho real. Trocado por uma escala
     de tiers (xl/2xl/3xl) que não afirma nada sobre ordem além do próprio
     nome — sempre confira o valor em px, não deduza pelo nome. */
  --font-size-2xs:9px;          /* rotulos minusculos em uppercase */
  --font-size-xs:10px;          /* rotulos pequenos (abas, badges, cabecalhos de tabela) */
  --font-size-sm:11px;          /* legendas e graus */
  --font-size-md:13px;          /* texto padrao em componentes (linhas de tabela, chips) */
  --font-size-meta:14px;        /* texto secundario padrao */
  --font-size-base:14px;        /* tamanho padrao do corpo de texto do app */
  --font-size-lg:16px;          /* texto de destaque leve (botoes, inputs) */
  --font-size-body:22px;        /* paragrafos de leitura */
  --font-size-xl:26px;          /* logo/nome de marca (tamanho medio) */
  --font-size-2xl:28px;         /* titulos de cartao/modal/secao, wordmark, icones grandes */
  --font-size-3xl:30px;         /* logo/nome de marca (tamanho grande) */

  /* --- Tons cosmicos extraidos de fotos reais da NASA (nebulosa Pilares da
     Criacao) — accents terrosos/frios pra enriquecer elementos de UI sem
     escurecer o fundo. Fundo/accent principais (--bg, --surface, --accent)
     NAO mudam. Em teste 2026-08-23: --cosmic-purple aplicado so na borda
     esquerda de .aspect-card pra validacao visual antes de expandir. --- */
  --cosmic-purple:#4A3B5C;
  --cosmic-purple-light:#5C4A6E;
  --cosmic-blue-gray:#4A5568;
  --cosmic-blue-gray-light:#5C6B7A;
  --cosmic-earth:#6B5644;
  --cosmic-earth-light:#8A6F52;

  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
  --full-h:100dvh;
}
/* Altura da tela no app instalado (2026-10-11). No iPhone, com o app aberto
   pelo ícone da tela de início, 100dvh pode vir mais curto que a tela (falta
   mais ou menos a altura da barra de status) e sobra uma faixa branca embaixo.
   Instalado não existe barra do navegador, então a maior das medidas é a
   certa. --screen-h vem de screen.height (script no <head> do index.html, só
   iPhone em pé): é o único número que não depende do viewport instável. No
   navegador comum nada muda — lá 100lvh ficaria atrás da barra do Safari. */
@media (display-mode:standalone){
  :root{--full-h:max(100dvh,100lvh,var(--screen-h,0px));}
}

:root[data-theme="dark"]{
  /* TEMA ESCURO — a opcao alternativa (era o unico tema antes deste toggle existir).
     So sobrescreve o que muda de fato entre os temas; fontes/tamanhos/onboarding
     ficam herdados do :root acima, sao iguais nos dois temas. O gradiente dos
     botoes PRECISA ser repetido aqui (nao e mais igual nos dois temas desde que
     o claro ganhou um tom mais profundo/premium) — sem isso, mudar o gradiente
     do tema claro vazaria pro escuro tambem, ja que --gradient-* nao tinha
     override proprio antes.
  */
  --bg:#08090d;
  --bg-rgb:8,9,13;
  --surface:#0f1117;
  --surface-rgb:15,17,23;
  --surface2:#161820;
  --border:rgba(255,255,255,0.07);
  --pv-card-border:var(--border);        /* #DCD6C8 do tema claro não bate no escuro — cai pro token já existente aqui */
  --border-hover:rgba(255,255,255,0.15);
  --text:#f0ede8;
  --text-muted:#7a7880;
  --text-dim:#4a4850;

  --accent:#C9A6FF;
  --accent-rgb:201,166,255;
  --accent-dim:rgba(201,166,255,0.15);
  --accent-glow:rgba(201,166,255,0.08);

  --gradient-start:#E48E6F;
  --gradient-start-rgb:228,142,111;
  --gradient-mid1:#D7607E;
  --gradient-mid2:#9D71D4;
  --gradient-end:#867FD7;
  --gradient-end-rgb:134,127,215;

  --header-start:#D9642E;
  --header-mid1:#A8324F;
  --header-mid2:#5B3A8C;
  --header-end:#3D3F8C;

  --overlay-rgb:255,255,255;
  --color-auth-link:rgba(255,255,255,0.5);

  --color-error:#e06060;
  --index-compat:#E68CA6;
  --index-intensity:#E0937A;
  --color-retrograde:#e07070;
  --color-tab-inactive:#B0A890;
  --color-select-option-bg:#1a1b22;
  --color-journal-empty:#3A3A40;
  --color-beta-bg:#2a2410;
  --color-beta-text:#f0d98c;

  --color-elem-fire:#9B6FD9;
  --color-elem-earth:#378ADD;
  --color-elem-air:#85B7EB;
  --color-elem-water:#5B5FC7;

  --color-dominant:#8A8780;
  --color-structure:#8A8780;
  --color-voice:#8A8780;
  --color-accent-rare:#8A8780;
  --color-cool-exception:#8A8780;
  --bg-base:#08090d;
}

/* Reset global + mecânica de página (.page/.page.active) — movido pra cá
   (2026-09-11, durante a divisão de css/app.css) de dentro do que virou
   perfil-vivo-reskin.css, onde tinha ficado historicamente misturado sem
   relação nenhuma com o reskin do Perfil Vivo. Mover pra cima da cascata
   é seguro: são seletores de elemento/classe de baixíssima especificidade
   (*, html/body, body, .page), sem nenhuma outra regra concorrente de
   mesma especificidade em outro arquivo que dependesse da ordem antiga. */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;height:var(--full-h);overflow:hidden;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:300;}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;}
.star{position:absolute;width:1px;height:1px;background:white;border-radius:50%;animation:twinkle var(--d) ease-in-out infinite alternate;}
@keyframes twinkle{from{opacity:var(--min-o);}to{opacity:var(--max-o);}}
/* height:var(--app-height) removido (2026-08-25, 3ª rodada da auditoria
   mobile, docs/TECH-DEBT.md) — página de teste isolada (viewport-test.html)
   provou que o WebKit standalone realmente oscila entre duas leituras de
   altura nos primeiros ~40ms de vida (874/812/874...), MAS isso é
   inofensivo numa página em fluxo normal: sem altura travada em CSS, o
   navegador recalcula sozinho e continuamente, e o conteúdo sempre acaba
   no lugar certo. O bug visível (faixa branca OU corte de conteúdo,
   dependendo de qual leitura instável a gente congelava) era causado
   exclusivamente por --app-height tirar uma "foto" desse valor instável
   num instante e travar essa altura em CSS. position:fixed;inset:0 sem
   height explícito já é recalculado dinamicamente pelo próprio motor a
   cada mudança real de viewport — não precisa (e não deve) de JS pra
   isso. */
.page{display:none;position:fixed;inset:0;height:var(--full-h);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;z-index:10;background:var(--bg);}
.page.active{display:block;}
/* #page-ip-overlay abre de DENTRO da aba Sinastria/Relações (#tab-compat,
   dentro de page-app) — com o mesmo z-index:10 de todo .page, ficar por
   cima dependia só da ordem no HTML (bug real, 2026-09-09, quando Relações
   ainda era o próprio #page-compat-overlay removido em 2026-09-11: o
   overlay "abria" — classes .active/.open corretas — mas a página por
   baixo pintava por cima e escondia tudo). z-index explícito aqui garante
   a pilha certa mesmo que a ordem no HTML mude no futuro. */
#page-ip-overlay{z-index:11;}


/* Dados técnicos (accordions "Ver dados técnicos" + link "ver aspecto") só
   pra conta dona do app — a classe show-tech é ligada em js/auth.js
   (onAuthStateChange). */
body:not(.show-tech) .tech-accordion,
body:not(.show-tech) .pv-tech-details,
body:not(.show-tech) .camada-ver-aspecto,
body:not(.show-tech) .tech-only{display:none!important;}
/* Contraparte do .tech-only: versão sem jargão (ex. título de assunto do card
   da Interpretação) que some pra dona, que já vê a versão técnica. */
body.show-tech .no-tech{display:none!important;}
/* Sinastria e Mapa Composto só pra conta dona (2026-10-12) — mesma ideia do
   show-tech: .rel-only some pras outras contas, .no-relations é o aviso que
   elas veem no lugar. A trava de verdade é no servidor
   (lib/auth/relations-access.js). */
body:not(.show-relations) .rel-only{display:none!important;}
body.show-relations .no-relations{display:none!important;}