/* Obsidian / ouro & bordô. Camada de materiais comum a todas as páginas.
   Não altera dados, estrutura de tabelas, formulários ou estados semânticos.
   Reflexos CSS respondem à interação; WebGL continua exclusivo do painel. */
:root {
  --brand-gold:#e2c28a;
  --brand-gold-ink:#805b27;
  --brand-bordeaux-ink:#762b45;
  --brand-bordeaux:#762b45;
  --brand-halo:#762b450a;
  --glass-rim:#ffffffd9;
  --glass-bottom:#bb98603d;
  --glass-material:radial-gradient(ellipse at 100% 0%,#e2c28a1c,transparent 55%),linear-gradient(128deg,#fffffff2,#ffffffd9 55%,#e9eff6cc);
  --glass-shadow:inset 0 1px 1px var(--glass-rim),inset 0 -1px 1px var(--glass-bottom),0 8px 26px #1425360c;
}
:root[data-theme="dark"] {
  --brand-gold-ink:#e6c992;--brand-bordeaux-ink:#eca9b9;--brand-halo:#762b451f;
  --glass-rim:#deebff6b;--glass-bottom:#e2c28a38;
  --glass-material:radial-gradient(ellipse at 100% 0%,#e2c28a12,transparent 55%),linear-gradient(128deg,#293848c9,#101822e8 55%,#241c2ad9);
  --glass-shadow:inset 0 1px 1px var(--glass-rim),inset 0 -1px 1px var(--glass-bottom),0 8px 26px #0004;
}
/* Continua legível com JavaScript indisponível. */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    --brand-gold-ink:#e6c992;--brand-bordeaux-ink:#eca9b9;--brand-halo:#762b451f;
    --glass-rim:#deebff6b;--glass-bottom:#e2c28a38;
    --glass-material:radial-gradient(ellipse at 100% 0%,#e2c28a12,transparent 55%),linear-gradient(128deg,#293848c9,#101822e8 55%,#241c2ad9);
    --glass-shadow:inset 0 1px 1px var(--glass-rim),inset 0 -1px 1px var(--glass-bottom),0 8px 26px #0004;
  }
}
html body {
  background:radial-gradient(ellipse at 95% 0%,#e2c28a12,transparent 44%),radial-gradient(ellipse at 15% 70%,var(--brand-halo),transparent 50%),var(--canvas);
  color:var(--ink);
}
html body.glass-preview {
  background:radial-gradient(ellipse at 95% 0%,#e2c28a12,transparent 44%),radial-gradient(ellipse at 15% 70%,var(--brand-halo),transparent 50%),var(--canvas);
}
::selection {background:#e8c78f;color:#291c22}

/* Marca vetorial única: balança original, relevo e esmalte bordô.
   Transformação pequena e estática evita tremulação e preserva a leitura. */
body .brand-mark {
  display:block;flex:none;width:40px;height:40px;object-fit:contain;
  transform:perspective(220px) rotateY(-10deg) rotateX(5deg);
  filter:drop-shadow(2px 4px 3px #0003);
}
body .brand-mark-compact {width:32px;height:32px}
body :is(.marca-nome,.pp-brand,.portal-brand) {font-family:Inter,system-ui,sans-serif;font-weight:650;letter-spacing:-.04em}
.premium-portal .brand-mark-emblem {position:absolute;right:max(32px,calc((100vw - 1090px)/2));top:40px;width:140px;height:140px;transform:perspective(500px) rotateY(-18deg) rotateZ(7deg);filter:drop-shadow(12px 18px 14px #0005)}

/* Mesmo shell do painel em TODAS as áreas autenticadas. O conteúdo das
   outras páginas mantém seus títulos, dicas, formulários e densidade. */
html body .app-shell .rail {
  width:236px;inset:10px auto 10px 10px;height:calc(100vh - 20px);
  border:1px solid #b9a78880;border-radius:24px;
  background:radial-gradient(ellipse at 0% 0%,#762b453d,transparent 45%),linear-gradient(135deg,#263341ee,#0b111aee 52%,#1b1721f2);
  box-shadow:inset 0 1px 2px #fff8,inset 0 -1px 5px #e2c28a40,0 18px 50px #0003;
  backdrop-filter:blur(16px);
}
html body .app-shell .nav {min-height:36px;font-size:12px;color:#cfdfec}
html body .app-shell .secao {padding-top:10px}
html body .app-shell .nav-active {
  background:linear-gradient(115deg,#762b45b3,#34213088);
  border:1px solid #d5b780a6;box-shadow:inset 0 1px 3px #f5ddba40,0 3px 12px #0002;color:#fff4e4;
}
html body .app-shell .nav-active svg {color:var(--brand-gold)}
html body .app-shell .nav:hover {background-color:#ffffff0d}
html body .app-shell .rail :focus-visible {outline-color:var(--brand-gold)!important}
html body .app-shell .barra-movel {background:linear-gradient(110deg,#251b29f5,#101b25f5);border-bottom:1px solid #d5b78055}
html body .app-shell .barra-movel .bg-white\/10 {background:#762b45a6;box-shadow:inset 0 1px 0 #e2c28a55}
html body .app-main > .topo {height:auto;min-height:90px;padding:20px 28px;gap:18px}
html body .app-main .conteudo {padding:4px 28px 50px}
html body .app-main :is(h1,h2,h3) {font-family:Inter,system-ui,sans-serif}
html body .app-main .titulo-pagina {font-size:26px;line-height:1.2;font-weight:550}
html body .app-main .migalha {color:var(--brand-gold-ink)}
html body .app-main .topo-subtitulo {font-size:12px;line-height:1.6;margin-top:6px}

/* Superfícies translúcidas, reflexo superior e borda quente. Sem blur em cada
   célula/cartão: evita camadas GPU caras em listas extensas e durante rolagem. */
html body :is(.card,.kpi,.pp-glass-label,.portal-composer,.command-menu),
html body .app-main :is(.card,.kpi),
html body.premium-portal :is(.card,.portal-composer,.portal-inbox .mensagem) {
  background:var(--glass-material);border:1px solid var(--glass-edge);
  border-top-color:var(--glass-rim);border-bottom-color:var(--glass-bottom);
  border-radius:20px;box-shadow:var(--glass-shadow);backdrop-filter:none;
}
html body :is(.card-cabeca,thead th,td) {border-color:var(--line-soft)}
html body .app-main :is(.bg-white,.bg-gray-50,.bg-gray-100,.bg-gray-800,.bg-gray-900):not(input):not(select):not(textarea) {background:var(--glass-material)}
html body .app-main .card:hover {border-color:var(--glass-edge);border-top-color:var(--glass-rim)}
html body .app-main thead th {background:var(--surface);color:var(--ink-soft)}
html body :is(.command-open,.theme-control select,.acao-link) {
  background-color:var(--secondary-bg);background-image:var(--secondary-wash);
  color:var(--secondary-ink);border:1px solid var(--secondary-line);
  box-shadow:inset 0 1px 1px #ffffff38;border-radius:12px;
}
html body .app-main .acao-link {background:var(--secondary-wash),var(--secondary-bg);color:var(--secondary-ink);border-color:var(--secondary-line)}
html body .app-main .acao-link svg {color:var(--brand-gold-ink)}
html body .app-main .acao-link:hover {background-color:var(--secondary-hover);border-color:var(--brand-gold-ink)}
html body :is(input,select,textarea,button) {font-family:Inter,system-ui,sans-serif}
html body .input {border-radius:12px;box-shadow:inset 0 1px 3px #101b2509}
html body :is(input[type=checkbox],input[type=radio]) {accent-color:var(--brand-bordeaux)}

/* Bordô fica reservado à ação, ouro ao contorno/luz; alertas continuam com
   as cores semânticas próprias. Os secundários mantêm seu contrato de contraste. */
html body .btn-primary,
html body .app-main .btn-primary,
html body.premium-public :is(.pp-button,.btn),
html body.premium-portal .portal-button:not(.portal-button-secondary) {
  background-color:var(--action-bg);background-image:linear-gradient(125deg,#ffffff12,transparent 55%,#1b0b191f);
  color:#fff;border:1px solid #b18c7280;border-radius:12px;
  box-shadow:inset 0 1px 1px #ffe7c538,0 3px 0 #351323,0 5px 12px #35132318;
}
html body .btn-primary:hover,
html body .app-main .btn-primary:hover,
html body.premium-public :is(.pp-button,.btn):hover,
html body.premium-portal .portal-button:not(.portal-button-secondary):hover {background-color:var(--action-hover);filter:none}
html body .app-main .kpi-icon {
  transform:perspective(240px) rotateY(-12deg) rotateX(6deg);
  box-shadow:inset 0 1px 2px #fff7,3px 4px 0 #101b2540,5px 7px 12px #101b2515;
  border:1px solid var(--line);
}
html body .app-main .kpi:nth-child(2) .kpi-icon {color:var(--brand-bordeaux-ink);background:linear-gradient(140deg,var(--surface),var(--brand-halo))}
html body .app-main .kpi:nth-child(3) .kpi-icon {color:var(--brand-gold-ink);background:linear-gradient(140deg,var(--surface),#e2c28a20)}
html body.glass-preview .workspace-hero {background:radial-gradient(ellipse at 96% 2%,#e2c28a18,transparent 50%),var(--glass-hero);box-shadow:var(--glass-shadow);border-top-color:var(--glass-rim);border-bottom-color:var(--glass-bottom)}
html body.glass-preview .workspace-hero strong {color:var(--brand-gold-ink)}
html body.glass-preview .motion-toggle {border-color:#d5b78080}
/* Lê o ponto de luz no próprio cartão, onde o controlador já o atualiza.
   Um token resolvido no :root perderia essas coordenadas locais do cursor. */
html body.glass-preview :is(.card,.kpi) {
  background:radial-gradient(ellipse at var(--shine-x,100%) var(--shine-y,0%),#ffffff08,transparent 45%),var(--glass-material);
}

/* Público: preserva composição editorial e textos, trazendo vidro às
   superfícies existentes e o mesmo material do logo para a escultura. */
html body.premium-public {--pp-jade:#e2c28a;--pp-copper:#d9b575;--pp-green:var(--brand-bordeaux-ink)}
html body.premium-public :is(.pp-editorial,.pp-hero-art) {background:radial-gradient(ellipse at 15% 10%,#762b454d,transparent 60%),radial-gradient(ellipse at 90% 80%,#e2c28a18,transparent 60%),var(--band-bg)}
html body.premium-public .pp-hero-art {border:1px solid #b9a78880;box-shadow:inset 0 1px 2px #ffffff80,inset 0 -1px 5px #e2c28a40,0 20px 45px #101b2520}
html body.premium-public .pp-form-side {background:radial-gradient(ellipse at 100% 0%,#e2c28a12,transparent 55%),radial-gradient(ellipse at 0% 100%,var(--brand-halo),transparent 50%)}
html body.premium-public .input {background:var(--secondary-wash),var(--input-bg);border-color:var(--secondary-line);box-shadow:inset 0 1px 2px #ffffff40}
html body.premium-public .pp-form-heading .pp-eyebrow {color:var(--brand-bordeaux-ink)}
html body.premium-public .pp-hero h1 em {color:var(--brand-bordeaux-ink)}
html body.premium-public :is(.dica a,.cadastro-link a,.voltar-link a) {color:var(--brand-bordeaux-ink)}
html body.premium-public .pp-column-back {background:linear-gradient(90deg,#62283b,#a9697e 65%,#421b2a 66%)}
html body.premium-public .pp-beam {background:linear-gradient(#f4dfb7,#c49a60);box-shadow:0 5px 0 #705030}
html body.premium-public .pp-balance {background:linear-gradient(130deg,#fff0cc,#e2c28a 60%,#93704a)}
html body.premium-public .pp-balance::before {background:#e2c28a}
html body.premium-public .pp-orbit {border-color:#e2c28a40}
html body.premium-public .pp-glass-label {background:linear-gradient(125deg,#ffffff1f,#101b25cc);color:#f4f8fc;border-color:#e2c28a55}
html body.premium-public .pp-feature-grid article {border-top-color:var(--glass-bottom)}
html body.premium-public .pp-icon-circle {background:conic-gradient(from 20deg,#fff0cc,#93704a,#e2c28a,#fff0cc)}

/* Portal, telas pontuais e confirmação de saída usam a mesma marca/tema. */
html body.premium-portal :is(.topo-portal,.capa),
html body.translation-page .topo-simples,
html body.calculator-public .topo {background:radial-gradient(ellipse at 0% 0%,#762b454d,transparent 60%),var(--band-bg);border-bottom:1px solid #e2c28a40}
html body.premium-portal .portal-contato {background:var(--glass-material)}
html body.premium-portal .portal-eyebrow {color:var(--brand-gold-ink)}
html body.premium-portal .capa .portal-eyebrow {color:var(--brand-gold)}
html body.premium-portal .mensagem.equipe {border-left-color:var(--brand-gold-ink)}
html body.premium-portal .portal-button-secondary {box-shadow:inset 0 1px 1px #ffffff40;background:var(--secondary-wash),var(--secondary-bg);color:var(--secondary-ink)}
html body.translation-page .topo-simples,
html body.calculator-public .topo-linha {flex-wrap:wrap}
html body :is(.topo-simples,.topo-linha,.topo-portal) > .theme-control {color:#c9d6e2;margin:0}
html body.calculator-public .observacoes {background:var(--surface);color:var(--ink-soft)}
/* O material de brilho troca background-image; a cor sólida mantém o CTA
   legível mesmo quando o gradiente específico deixa de ser a camada visível. */
html body.calculator-public .btn-ouro {background:linear-gradient(135deg,#f2dab0,#d9b575);background-color:#e2c28a;color:#2c1c23}
html body.calculator-public .dica {font-size:12px;line-height:1.5;margin-top:6px;color:var(--ink-soft)}
html body.calculator-public .rodape {color:#b6c7d7}
html body.logout-page .logout-brand-row {display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
html body.logout-page .migalha {color:var(--brand-gold-ink)}

/* Aparência: um único ícone de computador, 44px de alvo e opções nativas.
   O painel fica no body para não ser cortado por cabeçalhos/rails de vidro. */
html body .theme-control {flex:none;gap:0}
html body .theme-trigger {
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;padding:10px;margin:0;cursor:pointer;
  border:1px solid var(--secondary-line);border-radius:13px;
  color:var(--brand-gold-ink);background-color:var(--secondary-bg);
  box-shadow:inset 0 1px 1px var(--glass-rim),0 3px 8px #101b2510;
}
html body .theme-trigger svg {width:22px;height:22px;flex:none}
html body .theme-trigger[aria-expanded="true"] {border-color:var(--brand-gold-ink)}
html body .theme-panel {
  position:fixed;z-index:10000;width:184px;max-width:calc(100vw - 16px);
  display:grid;gap:4px;padding:6px;box-sizing:border-box;
  border:1px solid var(--secondary-line);border-top-color:var(--glass-rim);border-radius:17px;
  background:var(--glass-material),var(--surface);color:var(--ink);
  box-shadow:var(--glass-shadow),0 12px 32px #0003;
}
html body .theme-panel[hidden] {display:none!important}
html body .theme-option {
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
  margin:0;padding:10px;border:1px solid transparent;border-radius:11px;
  background:transparent;color:var(--ink);text-align:left;cursor:pointer;
  font:500 13px/1.4 Inter,system-ui,sans-serif;
}
html body .theme-option svg {width:18px;height:18px;flex:none}
html body .theme-option .theme-check {margin-left:auto;visibility:hidden;color:var(--brand-gold-ink)}
html body .theme-option[aria-pressed="true"] {background:var(--secondary-wash),var(--secondary-bg);border-color:var(--secondary-line)}
html body .theme-option[aria-pressed="true"] .theme-check {visibility:visible}
html body .theme-option:is(:hover,:focus-visible) {background-color:var(--hover-bg)}

/* Material compartilhado: a faixa de luz atravessa somente o próprio controle
   durante hover/foco. Sem pseudo-elemento sobre texto, timer ou blur extra. */
html:root body :is(.btn-primary,.btn-suave,.pp-button,.btn,.portal-button,.command-open,.theme-trigger,.acao-link,.btn-ouro),
html:root body .app-main :is(.btn-primary,.btn-suave,.acao-link) {
  background-image:linear-gradient(110deg,transparent 35%,#ffffff14 48%,#fff2 50%,transparent 64%),linear-gradient(125deg,#ffffff0d,transparent 55%,#e2c28a0a);
  background-size:250% 100%,100% 100%;background-position:100% 0,0 0;background-repeat:no-repeat;
  transition:background-position .55s ease,box-shadow .18s ease,transform .18s ease;
}
html body :is(.nav,.theme-option,input:not([type=hidden]),select,textarea,summary) {transition:box-shadow .18s ease}
/* Foco não depende do mouse e nunca é removido para dar lugar ao brilho. */
html body :is(button,a,input,select,textarea,summary):focus-visible {
  outline:3px solid var(--focus);outline-offset:3px;
}
html:root body :is(.btn-primary,.btn-suave,.pp-button,.btn,.portal-button,.command-open,.theme-trigger,.acao-link,.btn-ouro):focus-visible,
html:root body .app-main :is(.btn-primary,.btn-suave,.acao-link):focus-visible {background-position:0 0,0 0}
html body :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus-visible {box-shadow:inset 0 1px 2px #fff2,0 0 0 4px #e2c28a20}

@media (hover:hover) and (pointer:fine) {
  html:root body :is(.btn-primary,.btn-suave,.pp-button,.btn,.portal-button,.command-open,.theme-trigger,.acao-link,.btn-ouro):not(:disabled):not([aria-disabled="true"]):hover,
  html:root body .app-main :is(.btn-primary,.btn-suave,.acao-link):not(:disabled):not([aria-disabled="true"]):hover {
    background-position:0 0,0 0;transform:translateY(-1px);
    box-shadow:inset 0 1px 2px #ffe7c566,0 0 0 1px #e2c28a30,0 6px 16px #101b2524;
  }
  html body button:not(:disabled):not([aria-disabled="true"]):hover {box-shadow:inset 0 1px 2px #ffe7c53d,0 0 0 1px #e2c28a30}
  html body .app-shell .nav:hover {background-image:linear-gradient(110deg,#e2c28a14,#762b4526);box-shadow:inset 2px 0 #e2c28a88,inset 0 1px #fff1}
  html body :is(input:not([type=hidden]),select,textarea):not(:disabled):not([readonly]):hover {box-shadow:inset 0 1px 2px #fff2,0 0 0 1px #e2c28a55}
  html body :is(a.card,.portal-inbox a):hover {box-shadow:var(--glass-shadow),0 0 0 1px #e2c28a55}
  html body :is(.pp-nav nav a,.pp-nav-login,.sair,summary,a:not([class])):hover {text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--brand-gold-ink)}
  html body tbody tr:hover {background-image:linear-gradient(110deg,#e2c28a0d,transparent 55%,#762b450a)}
}
/* Pressão curta sem saltar o layout. Desabilitados nunca ganham elevação. */
html:root body :is(.btn-primary,.btn-suave,.pp-button,.btn,.portal-button,.command-open,.theme-trigger,.acao-link,.btn-ouro):active {transform:translateY(0)}
html:root body :is(button,[role=button]):is(:disabled,[aria-disabled="true"]) {transform:none;transition:none}
@media (prefers-reduced-motion:reduce), (hover:none) {
  html:root body :is(.btn-primary,.btn-suave,.pp-button,.btn,.portal-button,.command-open,.theme-trigger,.acao-link,.btn-ouro),
  html:root body .app-main :is(.btn-primary,.btn-suave,.acao-link) {
    transition:none;transform:none!important;background-position:100% 0,0 0!important;
  }
  html body :is(.nav,.theme-option,input,select,textarea,summary) {transition:none}
}
@media (forced-colors:active) {
  html body :is(.theme-trigger,.theme-panel,.theme-option[aria-pressed="true"]) {border:1px solid ButtonText;box-shadow:none}
  html body :is(.theme-trigger,.theme-option) {color:ButtonText}
}
@media print {html body :is(.theme-control,.theme-panel) {display:none!important}}

/* Nas ferramentas públicas, prioriza os campos sem esconder a orientação. */
@media (max-width:560px) {
  html body.calculator-public .topo {padding-block:12px}
  html body.calculator-public .intro {padding-top:20px}
  html body.calculator-public .intro h1 {font-size:24px;line-height:1.2}
  html body.calculator-public .intro p {font-size:14px;line-height:1.5;margin-top:8px}
  html body.calculator-public .miolo {padding-top:16px}
  html body.calculator-public .card-cabeca {padding:14px 18px}
}

@media (min-width:1024px) {html body .app-shell .app-main {padding-left:254px}}
@media (max-width:760px) {.premium-portal .brand-mark-emblem {display:none}}
@media (max-width:640px) {
  html body .app-main > .topo {padding:18px 16px;min-height:76px}
  html body .app-main .conteudo {padding:0 14px 40px}
  html body .app-main .titulo-pagina {font-size:24px}
  html body .app-main .topo-tools {gap:8px}
  html body .app-main .card-cabeca {padding-inline:18px}
  html body .app-main .card-corpo {padding-inline:18px}
  html body.calculator-public .topo-nav {width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce) {
  html body :is(.brand-mark,.kpi,.btn-primary,.btn-suave) {transition:none;animation:none}
}
@media (prefers-reduced-transparency:reduce) {
  html body :is(.card,.kpi,.portal-composer,.command-menu) {background:var(--surface);backdrop-filter:none}
}
@media (forced-colors:active) {
  html body :is(.card,.kpi,.btn-primary,.btn-suave,.nav-active) {border:1px solid CanvasText;box-shadow:none}
}
@media print {
  html body {background:#fff;color:#142536}
  html body :is(.card,.kpi,.portal-composer) {background:#fff;box-shadow:none;border:1px solid #bbb}
  html body .brand-mark {filter:none;transform:none}
}