/* ELOI Studio — sistema visual unificado (dark, KV aprovado 04/08/2026).
   Compartilhado por /portal/, /marca/, /orcamento/, /orcamento-precampanha/ e os briefings estaticos.
   Fonte da verdade dos tokens: app/src/ui/tokens.css. Este arquivo serve
   paginas fora do bundler, por isso o :root repete o subconjunto usado aqui
   com os MESMOS nomes semanticos (--cor-*, --raio-*...). Tudo que vem
   depois disso no :root e alias antigo (--brand, --ink, --surface, --texto-2,
   --raio-chip...) que 14 paginas ainda referenciam em <style>/style=""
   proprios — contrato de nome, so repontado. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ===== espelho de app/src/ui/tokens.css — MESMOS nomes e valores =====
     Mudou lá? Muda aqui no mesmo commit. Só o subconjunto que página
     estática usa: tipografia por escala e grade ficam no SPA. */
  --roxo:#7D2AE8;--roxo-hover:#6A1FD0;--roxo-press:#5A17B0;--roxo-claro:#9184D9;
  --lima:#DFF806;--coral:#FD4400;--lilas:#EEB4E7;--azul:#5B7CFD;--rosa:#FDD5D3;
  --tinta:#1B0647;--marinho:#0A0A60;
  --cor-fundo-primario:#08011A;--cor-fundo-secundario:#0D0225;--cor-fundo-elevado:#170B33;
  --cor-fundo-inverso:var(--rosa);
  --cor-superficie-padrao:var(--cor-fundo-secundario);--cor-superficie-elevada:var(--cor-fundo-elevado);
  --cor-superficie-hover:#20114A;--cor-superficie-selecionada:rgba(125,42,232,.22);
  --cor-superficie-desabilitada:rgba(253,213,211,.06);
  --cor-borda-sutil:rgba(253,213,211,.08);--cor-borda-padrao:rgba(253,213,211,.16);
  --cor-borda-forte:rgba(253,213,211,.28);--cor-borda-ativa:var(--roxo-claro);--cor-borda-foco:var(--lima);
  --cor-texto-primario:var(--rosa);--cor-texto-secundario:rgba(253,213,211,.68);
  --cor-texto-fraco:rgba(253,213,211,.45);--cor-texto-fraco-35:rgba(253,213,211,.35);
  --cor-texto-acento:var(--lima);--cor-texto-inverso:var(--tinta);
  --cor-texto-sobre-acento:#FFFFFF;--cor-texto-sobre-acento-2:rgba(255,255,255,.72);
  --cor-acento-primario:var(--roxo);--cor-acento-primario-hover:var(--roxo-hover);
  --cor-acento-primario-pressionado:var(--roxo-press);
  --cor-acento-sinal:var(--lima);--cor-acento-sinal-hover:#C9E005;--cor-acento-sinal-pressionado:#B4C904;
  --cor-acento-suave:var(--lilas);
  --cor-feedback-sucesso:var(--lima);--cor-feedback-aviso:#F5A300;--cor-feedback-erro:var(--coral);
  --cor-feedback-info:var(--azul);--cor-feedback-neutro:rgba(253,213,211,.14);
  --fonte-titulo:'Archivo',system-ui,sans-serif;--fonte-corpo:'Manrope',system-ui,sans-serif;
  --raio-minimo:6px;--raio-controle:10px;--raio-cartao:14px;--raio-painel:16px;
  --raio-bloco:18px;--raio-etiqueta:999px;--raio-folha:var(--raio-painel);
  --movimento-rapido:140ms;--movimento-padrao:240ms;--movimento-lento:420ms;
  --curva-padrao:cubic-bezier(.3,0,.2,1);
  --alvo-toque:44px;

  /* ===== nomes antigos — CONTRATO com o <style> de 14 paginas e com o JS
     do /gestao, que monta HTML com eles. Nao renomear; so apontar. ===== */
  --pagina:var(--cor-fundo-primario);--chao:var(--cor-fundo-secundario);
  --chao-2:var(--cor-fundo-elevado);--chao-3:var(--cor-superficie-hover);
  --linha-tabela:#150733;--faixa-grupo:#0A0132;
  --texto:var(--cor-texto-primario);--texto-2:var(--cor-texto-secundario);
  --texto-3:var(--cor-texto-fraco);--texto-4:var(--cor-texto-fraco);--texto-off:var(--cor-texto-fraco-35);
  --linha:var(--cor-borda-padrao);--linha-fraca:var(--cor-borda-sutil);
  --linha-forte:var(--cor-borda-forte);--linha-campo:var(--cor-borda-padrao);
  --raio-chip:var(--raio-controle);--raio-card:var(--raio-cartao);
  --c950:var(--tinta);--c900:var(--roxo-press);--c800:var(--roxo-press);--c700:var(--roxo);
  --c600:var(--roxo-hover);--c500:var(--roxo-claro);--c300:var(--lilas);--c100:var(--lilas);
  --logo-1:var(--roxo-claro);--logo-2:var(--lilas);
  --bg:var(--pagina);--surface:var(--chao);--surface-2:var(--chao-2);--surface-3:var(--chao-3);
  --line:var(--linha);--line-strong:var(--linha-forte);--line-field:var(--linha-campo);
  --ink:var(--texto);--ink-2:var(--texto-2);--muted:var(--texto-3);--muted-2:var(--texto-4);
  --brand:var(--cor-acento-primario);--brand-hover:var(--cor-acento-primario-hover);
  --brand-soft:var(--cor-superficie-selecionada);--ring:rgba(145,132,217,.35);
  --good:var(--cor-feedback-sucesso);--good-soft:rgba(223,248,6,.14);
  --warn:var(--cor-feedback-aviso);--warn-soft:rgba(245,163,0,.14);
  --bad:var(--cor-feedback-erro);--bad-soft:rgba(253,68,0,.14);
  --dark:var(--pagina);--dark-2:var(--chao-2);--dark-line:var(--linha);--on-dark:var(--texto);--on-dark-muted:var(--texto-3);
  --r-sm:var(--raio-controle);--r:var(--raio-cartao);--r-lg:var(--raio-painel);--r-xl:var(--raio-folha);
  --sh-1:none;--sh-2:none;--sh-3:none;
  --font:var(--fonte-corpo);
  /* --white: ponto dentro do radio preenchido e texto sobre Roxo. Texto comum usa --ink. */
  --white:var(--cor-texto-sobre-acento);
  --txt:var(--ink);--txt-dim:var(--muted);
  --radius:var(--r-lg);--radius-lg:var(--r-xl);--shadow:none;
  --amber:var(--warn);--danger:var(--bad);
  --sidebar-w:248px;
}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
::selection{background:var(--lima);color:var(--tinta)}
:focus-visible{outline:2px solid var(--cor-borda-foco);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Coluna de dinheiro nao pode "dancar" ao trocar de mes: tabular fixa a
   largura do algarismo, e vai em Archivo (dinheiro nunca em Manrope). Os
   seletores sao nomes de classe do /gestao e dos paineis; inertes onde nao existem. */
.valor,.rv,.gtot,.sv,.cmeta{font-variant-numeric:tabular-nums;font-family:var(--fonte-titulo)}

/* A aurora era o halo de fundo do tema claro. Sistema novo proibe degrade e
   blur decorativo, entao ela vira so uma mancha solida e discreta — a pagina
   ja e escura, nao precisa mais fingir profundidade com glass. Grao continua
   (nao e blur nem degrade, so ruido) pra tirar o banding de fundo chapado. */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora::after{content:"";position:absolute;inset:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.blob{position:absolute;border-radius:50%;background:var(--roxo);opacity:.05}
.blob.b1{width:46%;height:52%;left:-8%;top:-14%;animation:d1 26s ease-in-out infinite}
.blob.b2{width:40%;height:46%;right:-6%;top:-10%;background:var(--azul);animation:d2 32s ease-in-out infinite}
@keyframes d1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(16%,10%) scale(1.15)}}
@keyframes d2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-12%,12%) scale(1.1)}}

.card-base{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}

/* ---------- assinatura ----------
   Espelho de .marca em app/src/app.css: ELOI + complemento na mesma largura
   (wdth 72) e peso, cores diferentes, sem espaco entre as palavras. Existe
   aqui porque as paginas estaticas nao passam pelo bundler e vinham puxando
   o wordmark.svg de degrade — que o sistema novo proibe e que ainda letra
   "ELOI Design Studio". NUNCA centralizada. */
.marca{display:inline-flex;align-items:baseline;font-family:var(--fonte-titulo);
  font-size:20px;line-height:1.24;user-select:none;white-space:nowrap;text-decoration:none}
.marca b{font-variation-settings:'wdth' 72,'wght' 700;font-weight:400;
  letter-spacing:-.02em;color:var(--cor-texto-primario)}
.marca i{font-variation-settings:'wdth' 72,'wght' 700;font-weight:400;
  font-style:normal;color:var(--cor-texto-acento)}

/* ---------- login (estrutural) ----------
   A wordmark e blocada, empilhada e alinhada a esquerda. Um card mole e
   centrado contradiz o conteudo, entao: um unico eixo a esquerda, raio
   pequeno, filete no lugar de espaco vago, hierarquia por peso.
   ESTA SECAO E A DONA DO LOGIN. As paginas nao redefinem .login — antes cada
   uma tinha sua copia inline e o bloco daqui nunca era alcancado (mesmo peso,
   <style> depois do <link> vence por ordem). Ao mexer aqui, nao recrie copias. */
.login-wrap{position:relative;z-index:1;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:24px}
.login{/* max-width com calc garante goteira de 20px em qualquer largura sem depender
   de padding num wrapper — nem toda pagina tem um. Acima de 470px nao muda nada. */
  width:100%;max-width:min(430px,calc(100% - 40px));margin:min(11vh,92px) auto 0;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:40px 38px}
/* Duas formas convivem no projeto: em /admin/, /gestao/, /marca/ e nos
   paineis-briefings/ecommerce o proprio .login E o card; em /portal/ e nos
   paineis /painel/ e /painel-orcamentos/ ele e so o container e o card real
   fica dentro. Sem neutralizar o wrapper, ele vira uma coluna cheia. */
.login:has(> .card-base,> .login-card,> .login-box){background:none;border:0;padding:0;max-width:none;margin-top:0;display:flex;align-items:flex-start;justify-content:center;min-height:100vh}
.login-card,.login-box{/* max-width com calc garante goteira de 20px em qualquer largura sem depender
   de padding num wrapper — nem toda pagina tem um. Acima de 470px nao muda nada. */
  width:100%;max-width:min(430px,calc(100% - 40px));margin:min(11vh,92px) auto 0;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:40px 38px}
.login .logo,.login-card .logo,.login-box .logo{height:clamp(70px,13vw,104px);margin:0 0 20px;display:block;text-align:left}
.login .logo svg,.login .logo img,.login-card .logo svg,.login-box .logo svg{height:100%;width:auto;display:block}
/* h1 aqui rotula a porta, nao encabeca um documento: vira etiqueta em caixa
   alta espacada, separada da marca por um filete. O peso fica com a wordmark. */
.login h1,.login-card h1,.login-box h1{font-size:.72rem;font-variation-settings:'wght' 620;letter-spacing:.20em;text-transform:uppercase;color:var(--muted);
  margin:0 0 22px;padding-top:18px;border-top:1px solid var(--line)}
.login .sub{font-size:.86rem;color:var(--muted);margin:-14px 0 20px}
.login input,.login-card input,.login-box input{width:100%;background:var(--cor-fundo-primario);border:1px solid var(--line-field);border-radius:var(--r-sm);color:var(--ink);font-family:var(--font);font-size:.95rem;padding:14px 16px;outline:none;transition:border-color .18s,box-shadow .18s}
.login input:-webkit-autofill,.login-card input:-webkit-autofill,.login-box input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--cor-fundo-primario) inset;-webkit-text-fill-color:var(--cor-texto-primario);caret-color:var(--cor-texto-primario)}
.login input::placeholder,.login-card input::placeholder,.login-box input::placeholder{color:var(--muted)}
.login input:focus,.login-card input:focus,.login-box input:focus{border-color:var(--cor-borda-ativa);box-shadow:0 0 0 3px var(--ring)}
/* Botao-barra: rotulo a esquerda, seta empurrada a direita pelo space-between.
   A seta vem do ::after pra nao exigir markup novo em cada pagina. */
.login button,.login-card button,.login-box button{width:100%;margin-top:12px;background:var(--brand);color:var(--cor-texto-sobre-acento);border:none;border-radius:var(--r-sm);
  font-family:var(--font);font-size:.95rem;font-variation-settings:'wght' 620;padding:15px 18px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background .18s}
.login button::after,.login-card button::after,.login-box button::after{content:'\2192';font-size:1.05rem;line-height:1;transition:transform .18s}
.login button:hover,.login-card button:hover,.login-box button:hover{background:var(--brand-hover)}
.login button:hover::after,.login-card button:hover::after,.login-box button:hover::after{transform:translateX(3px)}
.login button:disabled,.login-card button:disabled,.login-box button:disabled{opacity:.55;cursor:not-allowed}
.err,.login-err{color:var(--coral);font-size:.85rem;margin-top:12px;min-height:1.2em}
@media(max-width:600px){
  .login{padding:30px 24px}
}

/* ---------- cabecalho de pagina ----------
   Duas marcacoes convivem: /gestao usa .pagehead, as outras telas usam
   .topbar. Recebem o mesmo tratamento (grudar no topo) pra que nenhuma
   pagina precise trocar de markup so pra ganhar o visual. Fundo solido —
   sem vidro fosco: o sistema novo proibe blur decorativo. */
.topbar,.pagehead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line);background:var(--chao)}
.topbar{justify-content:space-between;padding:16px 28px}
.pagehead{gap:14px;padding:18px 30px}
.pagehead h1{font-family:var(--fonte-titulo);font-size:1.35rem;font-variation-settings:'wght' 680;letter-spacing:-.02em;margin-right:4px}
.pagehead .monthnav{margin-left:auto}
.content{padding:24px 30px 90px;display:flex;flex-direction:column;gap:22px}
.topbar .logo{height:46px}
.topbar .logo svg,.topbar .logo img{height:100%;width:auto;display:block}
.topbar .actions{display:flex;gap:10px;align-items:center}

/* ---------- botoes ----------
   Botao primario e bloco de cor (fundo Roxo), sem gradiente nem elevacao
   de sombra — hover/active mudam de tom, nao de efeito. */
.btn{background:var(--cor-acento-primario);color:var(--cor-texto-sobre-acento);border:none;border-radius:var(--raio-controle);font-family:var(--font);font-size:.86rem;font-variation-settings:'wght' 620;padding:10px 18px;cursor:pointer;transition:background .18s,transform .14s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.2;white-space:nowrap}
.btn:hover{background:var(--cor-acento-primario-hover)}
.btn:active{background:var(--cor-acento-primario-pressionado)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--txt-dim);font-family:var(--font);font-size:.82rem;text-decoration:none;padding:9px 18px;border-radius:var(--raio-controle);cursor:pointer;transition:border-color .18s,background .18s,color .18s;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.2;white-space:nowrap}
.btn-ghost:hover{border-color:var(--cor-borda-ativa);background:var(--cor-superficie-hover);color:var(--ink)}
.btn-sm{font-size:.78rem;padding:7px 13px}

/* ---------- controle segmentado ----------
   Vem das abas Servicos/Clientes do /gestao. Sobe pro compartilhado porque e
   uma peca de navegacao, nao daquela tela. A faixa de meses (.months/.mtab do
   periodo.js) e a mesma ideia com outro raio e segue no /gestao por enquanto. */
.tabs{display:flex;gap:3px;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--raio-etiqueta)}
.tab{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--txt-dim);font-family:var(--font);font-size:.85rem;padding:8px 15px;border-radius:var(--raio-etiqueta);cursor:pointer;white-space:nowrap;transition:background .16s,color .16s}
.tab svg{width:16px;height:16px;flex:0 0 auto;opacity:.8}
.tab:hover{color:var(--ink);background:var(--brand-soft)}
.tab.active{background:var(--cor-superficie-selecionada);color:var(--cor-texto-primario);box-shadow:inset 0 0 0 1px var(--cor-borda-ativa);font-variation-settings:'wght' 620}
.tab.active svg{opacity:1}
/* Par neutro por padrao (fundo tenue + texto Rosa); paginas que aplicam cor
   inline (style="background:...") ou classe de estado propria sobrescrevem. */
.chip{display:inline-block;background:var(--cor-feedback-neutro);color:var(--cor-texto-primario);font-size:.73rem;font-variation-settings:'wght' 620;border-radius:var(--raio-etiqueta);padding:4px 12px;white-space:nowrap;letter-spacing:.01em}

/* ---------- superficie escura reutilizavel ----------
   A pagina inteira ja e escura por padrao; esta classe agora so aprofunda um
   nivel de tom (nav, hero) e inverte a enfase da logo. */
.on-dark{background:var(--dark);color:var(--on-dark);--logo-1:var(--lilas);--logo-2:var(--roxo-claro);--ink:var(--on-dark);--muted:var(--on-dark-muted);--line:var(--dark-line);--surface:var(--dark-2)}

/* ==================== MOBILE: comportamento de app ====================
   Depende de viewport-fit=cover no <meta> — sem ele env(safe-area-inset-*)
   resolve pra 0 e o notch come o conteudo. */

/* Dedo nao tem hover: o retorno vem da pressao. O realce cinza padrao do
   WebKit atrasa e suja, entao ele sai e o :active entra explicito. */
@media(hover:none){
  a,button,.btn,.btn-ghost,[role=button]{-webkit-tap-highlight-color:transparent}
  .btn:active{background:var(--cor-acento-primario-pressionado);transform:scale(.985)}
  .login button:active,.login-card button:active,.login-box button:active{background:var(--brand-hover);transform:scale(.985)}
  .btn-ghost:active{background:var(--brand-soft);transform:scale(.985)}
  .btn-ghost:hover{transform:none}
}

@media(max-width:900px){
  /* Abaixo de 16px o iOS da zoom automatico ao focar o campo e a tela salta.
     Nao e preferencia de tamanho: e o gatilho do zoom. */
  input,select,textarea{font-size:16px}
  /* 44px e o minimo de alvo de toque (WCAG 2.5.8 / HIG). */
  .btn,.btn-ghost,button{min-height:44px}
  .btn-sm{min-height:38px}
  /* 100vh no celular conta a barra de URL que some ao rolar, entao estoura.
     dvh acompanha a viewport real. */
  .login:has(> .card-base,> .login-card,> .login-box){min-height:100dvh}
}

/* Full-bleed: o card e gesto de desktop (moldura sobre uma mesa). No celular
   a tela E o card, entao borda, raio e goteira saem. */
@media(max-width:600px){
  /* o wrapper tambem precisa zerar: sem isso o padding dele deixa faixas do
     canvas nas bordas e o "full-bleed" fica pela metade */
  .login-wrap{padding:0;min-height:100dvh}
  .login,.login-card,.login-box{
    max-width:none;width:100%;margin:0;border:0;border-radius:0;
    min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
    padding:max(env(safe-area-inset-top),20px) 24px max(env(safe-area-inset-bottom),24px)}
  .login:has(> .card-base,> .login-card,> .login-box){padding:0;display:block}
  .login .logo,.login-card .logo,.login-box .logo{flex:0 0 auto}
}

/* ---------- briefings no celular ----------
   Escopado por body:has(.progress-wrap): .main e .step-nav sao nomes genericos
   e existem noutras telas. O :has garante que so a pagina de briefing pegue.
   Vale pra /briefing/, /briefing-ecommerce/ e /briefing-solarium/, que
   compartilham a mesma estrutura e o mesmo admin.css. */
@media(max-width:900px){
  /* Progresso gruda: e a unica pista de "quanto falta" num formulario longo.
     O padding-top absorve o notch — com viewport-fit=cover o topo da viewport
     fica SOB a barra de status, entao top:0 sozinho enfia o texto embaixo dela.
     --pagenav-h e 0 por padrao e so vira altura real quando o pagenav.js cria
     a barra propria de Voltar/Inicio (app instalado). Assim o progresso recua
     sem que esta regra precise saber se aquela barra existe. */
  body:has(.progress-wrap) .progress-wrap{position:sticky;top:var(--pagenav-h,0px);z-index:50;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:calc(env(safe-area-inset-top) + 12px) 16px 10px}
  /* So a etapa ativa e exibida, entao fixar .step.active .step-nav basta —
     sem markup novo e sem JS. */
  body:has(.progress-wrap) .step.active .step-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--surface);border-top:1px solid var(--line);
    padding:12px 16px max(env(safe-area-inset-bottom),12px)}
  /* .step-nav-right e o pai real do botao; sem flex nele o flex do filho
     nao tem o que dividir e o botao encolhe pro canto direito. */
  body:has(.progress-wrap) .step.active .step-nav .step-nav-right{flex:1;gap:10px}
  body:has(.progress-wrap) .step.active .step-nav .btn-next,
  body:has(.progress-wrap) .step.active .step-nav .btn-submit{flex:1;justify-content:space-between}
  body:has(.progress-wrap) .main{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  /* Com o teclado aberto a barra fixa gruda nele e cobre o campo seguinte.
     :has(:focus) devolve ela ao fluxo enquanto se digita — sem JS. */
  body:has(.progress-wrap):has(:is(input,textarea,select):focus) .step.active .step-nav{
    position:static;padding:20px 16px 28px}
}