/* ELOI Studio — sistema visual unificado
   Ancorado na logo (#240043 / #3C0A6B): tela clara, tinta roxo-profunda.
   Compartilhado por /admin/, /gestao/, /portal/, /marca/ e os paineis.
   A rampa --c950..--c100 mantem os valores da marca (sao COR, nao papel).
   Papel fica nos tokens semanticos abaixo. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* rampa da marca — inalterada */
  --c950:#10002B;--c900:#240046;--c800:#3C096C;--c700:#5A189A;
  --c600:#7B2CBF;--c500:#9D4EDD;--c300:#C77DFF;--c100:#E0AAFF;
  /* logo */
  --logo-1:#240043;--logo-2:#3C0A6B;
  /* superficies */
  --bg:#F7F4FB;--surface:#FFFFFF;--surface-2:#F2ECF9;--surface-3:#EAE1F5;
  --line:#E7DEF2;--line-strong:#D5C6E9;
  /* --line-field e a borda de campo de formulario. WCAG 1.4.11 exige 3:1 quando
     a borda e o UNICO indicador do componente; --line (1.30:1) e --line-strong
     (1.61:1) nao servem pra isso. Este da 3.62:1 sobre branco, 3.32:1 sobre --bg. */
  --line-field:#957BB8;
  /* tinta */
  --ink:#240043;--ink-2:#3C0A6B;--muted:#6B5685;--muted-2:#8B7AA3;
  /* acao */
  --brand:#5A189A;--brand-hover:#3C096C;--brand-soft:#F0E7FA;--ring:rgba(90,24,154,.18);
  /* estado */
  --good:#0F7B4F;--good-soft:#E3F5EC;--warn:#A34A08;--warn-soft:#FBF0E0;
  --bad:#BE123C;--bad-soft:#FCE8ED;
  /* superficie escura (nav, heros) */
  --dark:#1A0033;--dark-2:#25004A;--dark-line:rgba(224,170,255,.16);--on-dark:#EFE6F8;--on-dark-muted:#A992C4;
  /* forma */
  --r-sm:8px;--r:12px;--r-lg:16px;--r-xl:22px;
  --sh-1:0 1px 2px rgba(36,0,67,.06);
  --sh-2:0 2px 8px rgba(36,0,67,.07),0 1px 2px rgba(36,0,67,.05);
  --sh-3:0 12px 32px rgba(36,0,67,.12),0 2px 8px rgba(36,0,67,.06);
  --font:'carbona-variable',sans-serif;
  /* --white e branco literal: e o ponto dentro do radio roxo preenchido,
     nao "a cor do texto". Texto usa --ink. */
  --white:#fff;
  /* Apelidos vindos do /gestao. Nao sao cores novas: apontam para os tokens
     que ja existiam acima, com os nomes que o JD daquela tela usa. Eram a
     unica coisa de fato ausente aqui — o resto do :root de la repetia estes
     mesmos valores. Mantidos como alias (e nao renomeados no JS) porque os
     nomes de classe e variavel sao CONTRATO: o JS monta HTML com eles. */
  --txt:var(--ink);--txt-dim:var(--muted);
  --radius:var(--r-lg);--radius-lg:var(--r-xl);--shadow:var(--sh-3);
  --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(--c300);color:var(--ink)}
:focus-visible{outline:2px solid var(--c500);outline-offset:2px;border-radius:6px}
/* Coluna de dinheiro nao pode "dancar" ao trocar de mes: tabular fixa a
   largura do algarismo. 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}

/* A aurora era o cenario do tema escuro. No claro vira um halo discreto.
   Versao do /gestao, promovida: blur e opacidade saem do container e vao
   pro .blob (senao o grao abaixo tambem borra), mais um grao sutil que
   remove o banding da faixa do gradiente. */
.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%;filter:blur(90px);opacity:.3}
.blob.b1{width:46%;height:52%;left:-8%;top:-14%;background:radial-gradient(circle,#5A189A,transparent 70%);animation:d1 26s ease-in-out infinite}
.blob.b2{width:40%;height:46%;right:-6%;top:-10%;background:radial-gradient(circle,#7B2CBF,transparent 70%);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)}}
@media(prefers-reduced-motion:reduce){.blob{animation:none}}

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

/* ---------- 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;box-shadow:var(--sh-3)}
/* 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 branca. */
.login:has(> .card-base,> .login-card,> .login-box){background:none;border:0;box-shadow:none;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;box-shadow:var(--sh-3)}
.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:.14em;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(--surface);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::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(--brand);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:#fff;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(--bad);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, vidro fosco) pra que
   nenhuma pagina precise trocar de markup so pra ganhar o visual. */
.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:rgba(255,255,255,.86);backdrop-filter:blur(14px)}
.topbar{justify-content:space-between;padding:16px 28px}
.pagehead{gap:14px;padding:18px 30px}
/* Sem backdrop-filter (Firefox antigo, WebView) o fundo translucido deixa o
   conteudo passar por baixo e o cabecalho fica ilegivel. Ai vai solido. */
@supports not (backdrop-filter:blur(1px)){.topbar,.pagehead{background:var(--surface)}}
.pagehead h1{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 ----------
   Visual vindo do /gestao (gradiente + leve elevacao no hover). As partes
   estruturais que so existiam aqui — text-decoration e justify-content, de
   que <a class="btn"> depende — ficam. */
.btn{background:linear-gradient(135deg,var(--c600),var(--c700));color:#fff;border:none;border-radius:11px;font-family:var(--font);font-size:.86rem;font-variation-settings:'wght' 620;padding:10px 18px;cursor:pointer;transition:filter .18s,transform .14s,box-shadow .2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.2;white-space:nowrap}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;filter:none;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:11px;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(--brand);background:var(--brand-soft);color:var(--ink);filter:none;box-shadow:none}
.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:99px}
.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:99px;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(--c600);color:#fff;font-variation-settings:'wght' 620}
.tab.active svg{opacity:1}
.chip{display:inline-block;color:var(--ink);font-size:.73rem;font-variation-settings:'wght' 620;border-radius:99px;padding:4px 12px;white-space:nowrap;letter-spacing:.01em}

/* ---------- superficie escura reutilizavel ---------- */
.on-dark{background:var(--dark);color:var(--on-dark);--logo-1:#E0AAFF;--logo-2:#C77DFF;--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 agora e gradiente: trocar o background no :active apagaria o
     gradiente e o botao piscaria roxo chapado. O escurecimento vem por
     filter. Os botoes de login seguem sendo cor solida. */
  .btn:active{filter:brightness(.92);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:hover,.btn-ghost:hover{box-shadow:none;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, sombra, 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;box-shadow:none;
    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);
    box-shadow:0 -2px 14px rgba(36,0,67,.06)}
  /* .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;box-shadow:none;padding:20px 16px 28px}
}