/* Portal do cliente GA Growth. Tema único de propósito: preto, vermelho GA, grafite e cinzas (igual ao relatório).
   Vermelho é assinatura e "abaixo do mínimo". Uso: cliente consultando número, em geral no celular, em pé. */
:root{
  color-scheme:light;
  --preto:#0B0B0C; --vermelho:#CF151C; --vermelho-escuro:#A50F15; --grafite:#4D4D4D; --prata:#BEBFBD;
  --papel:#FFFFFF; --mesa:#ECECEA; --faixa:#F4F4F2;
  --tinta:#17171A; --tinta-2:#5E6066; --linha:#E4E4E0; --linha-forte:#C8C8C3;
  --ok-fundo:#17171A; --ok-texto:#fff; --meio-fundo:#DEDEDA; --meio-texto:#17171A; --ruim-fundo:#F4D6D7; --ruim-texto:#8A0C12;
  --titulo:"Sora","Segoe UI",system-ui,sans-serif;
  --texto:"Figtree","Segoe UI",system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --chevron:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1.5l5 5 5-5%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{background:var(--mesa);-webkit-text-size-adjust:100%;scrollbar-color:var(--linha-forte) transparent}
body{margin:0;background:var(--mesa);color:var(--tinta);font:15px/1.55 var(--texto);font-variant-numeric:tabular-nums lining-nums;min-height:100dvh;caret-color:var(--vermelho);accent-color:var(--vermelho);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--titulo);margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}
::selection{background:var(--vermelho);color:#fff}
:focus-visible{outline:2px solid var(--vermelho);outline-offset:2px}
.capa :focus-visible,.lado :focus-visible{outline-color:#fff}
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-thumb{background:var(--linha-forte);border:2px solid var(--mesa)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- ENTRADA: lado da marca + formulário ---------- */
.entrada{min-height:100dvh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.lado{background:var(--preto);color:#fff;position:relative;overflow:hidden;padding:max(40px,env(safe-area-inset-top)) clamp(28px,5vw,64px) 48px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.lado::after{content:"";position:absolute;right:-180px;bottom:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(207,21,28,.38),rgba(207,21,28,0) 65%);pointer-events:none}
.lado .marca{width:72px;height:72px;position:relative;z-index:1}
.lado-texto{position:relative;z-index:1;display:grid;gap:14px;max-width:34ch}
.lado-frase{font:800 clamp(1.7rem,3.2vw,2.5rem)/1.12 var(--titulo);letter-spacing:-.02em;text-wrap:balance}
.lado-sub{color:#C6C6C3;font-size:1rem;max-width:40ch}
.cartao{align-self:center;justify-self:center;width:100%;max-width:440px;padding:40px clamp(20px,4vw,40px);display:grid;gap:10px}
.cartao h1{font-size:1.6rem;font-weight:700;margin-bottom:14px;letter-spacing:-.01em}
.cartao form{display:grid;gap:6px}
label{font-weight:600;font-size:.92rem;margin-top:10px}
.dica{font-weight:400;color:var(--tinta-2)}
input,select{font:inherit;font-size:16px;color:var(--tinta);background:var(--papel);border:1px solid var(--linha-forte);border-radius:0;padding:12px 14px;min-height:48px;width:100%;transition:border-color 150ms var(--ease-out),box-shadow 150ms var(--ease-out)}
input:hover{border-color:var(--grafite)}
input:focus-visible{outline:none;border-color:var(--preto);box-shadow:0 0 0 3px rgba(207,21,28,.28)}
input[aria-invalid="true"]{border-color:var(--vermelho);border-width:2px}
.campo-senha{position:relative}
.campo-senha input{padding-right:92px}
.ver{position:absolute;right:0;top:0;height:100%;min-width:88px;background:none;border:0;border-left:1px solid var(--linha);font:600 .86rem var(--texto);color:var(--tinta);cursor:pointer;transition:background-color 150ms var(--ease-out)}
.ver:hover{background:var(--faixa)}
.erro{color:var(--ruim-texto);font-size:.88rem}
.erro:empty{display:none}
.erro.geral{background:var(--ruim-fundo);padding:10px 12px;margin-top:6px}
.ok{background:var(--faixa);padding:10px 12px;font-size:.9rem;margin-top:6px;border:1px solid var(--linha-forte)}
.ok:empty{display:none}
.btn{font:700 1rem/1 var(--texto);background:var(--vermelho);color:#fff;border:0;border-radius:0;min-height:48px;padding:14px 20px;cursor:pointer;margin-top:16px;transition:background-color 150ms var(--ease-out),transform 160ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.65;cursor:progress}
.btn.claro{background:transparent;border:1px solid #55555a;color:#fff;margin-top:0}
.link{background:none;border:0;color:var(--tinta);font:600 .92rem var(--texto);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;min-height:44px;cursor:pointer;justify-self:start;padding:0}
.link:hover{text-decoration-color:var(--vermelho)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--vermelho-escuro)}
  .btn.claro:hover{background:#1b1b1e}
}

/* ---------- CARREGANDO ---------- */
.carregando{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--tinta-2)}
.carregando img{background:var(--preto);padding:6px}
.fio-carga{width:120px;height:3px;background:var(--linha);position:relative;overflow:hidden}
.fio-carga::after{content:"";position:absolute;inset:0;background:var(--vermelho);transform:translateX(-100%);animation:corre 1s var(--ease-out) infinite}
@keyframes corre{to{transform:translateX(100%)}}

/* ---------- FAIXA DA MARCA (relatório) ---------- */
.capa{background:var(--preto);color:#fff;position:relative;overflow:hidden;padding:max(20px,env(safe-area-inset-top)) 16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
.capa::after{content:"";position:absolute;right:-140px;top:-170px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(207,21,28,.32),rgba(207,21,28,0) 65%);pointer-events:none}
.capa-id{display:flex;align-items:center;gap:16px;position:relative;z-index:1;min-width:0}
.capa h1{font-size:clamp(1.3rem,4vw,1.9rem);font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.capa-sub{color:var(--prata);font-size:.9rem;margin-top:4px}
.logo{width:56px;height:56px;flex:none}
.capa-acoes{position:relative;z-index:1;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.periodo{display:grid;gap:6px;margin:0;font-size:.78rem;font-weight:600;color:var(--prata)}
.periodo select{appearance:none;-webkit-appearance:none;background:#161618 var(--chevron) no-repeat right 12px center;color:#fff;border-color:#55555a;min-height:44px;padding:8px 36px 8px 12px;width:auto;font-weight:500}
.periodo select option{color:#17171A;background:#fff}

/* ---------- ABAS ---------- */
.abas{background:var(--papel);border-bottom:1px solid var(--linha);display:flex;overflow-x:auto;padding-inline:8px;position:sticky;top:0;z-index:5;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.abas button{font:600 .95rem var(--texto);background:none;border:0;border-bottom:3px solid transparent;color:var(--tinta-2);min-height:48px;padding:12px 16px;cursor:pointer;white-space:nowrap;transition:color 150ms var(--ease-out),border-color 150ms var(--ease-out)}
.abas button[aria-selected="true"]{color:var(--tinta);border-bottom-color:var(--vermelho)}
@media (hover:hover) and (pointer:fine){.abas button:hover{color:var(--tinta)}}

/* ---------- CORPO ---------- */
.folha{max-width:1180px;margin:0 auto;padding:20px 16px 56px;display:grid;gap:20px}
section{display:grid;gap:20px;min-width:0;align-content:start}
section:not([hidden]){animation:entra 200ms var(--ease-out)}
@keyframes entra{from{opacity:0;transform:translateY(6px)}}
.aviso{color:var(--tinta-2);font-size:.88rem}
.rodape{color:var(--tinta-2);font-size:.82rem;text-align:center;padding-top:12px;max-width:56ch;margin-inline:auto}

.painel{background:var(--papel);border:1px solid var(--linha);padding:22px 20px;display:grid;gap:14px;align-content:start;min-width:0}
.painel h2{font-size:1.15rem;font-weight:700}
.sub{color:var(--tinta-2);font-size:.92rem;max-width:68ch}
.dupla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}

/* Destaque do resumo: uma frase que o cliente entende + régua das metas */
.destaque{background:var(--preto);color:#fff;padding:28px 22px 30px;display:grid;gap:22px;position:relative;overflow:hidden}
.destaque::after{content:"";position:absolute;right:-120px;top:-150px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(207,21,28,.3),rgba(207,21,28,0) 65%);pointer-events:none}
.destaque>*{position:relative;z-index:1}
.destaque h2{font-size:clamp(1.35rem,3.4vw,2rem);font-weight:800;letter-spacing:-.02em;max-width:26ch}
.destaque h2 em{font-style:normal;color:#fff;border-bottom:3px solid var(--vermelho)}
.destaque .sub{color:#C6C6C3}
.destaque .sel{justify-self:start}
.regua-metas{position:relative;height:64px;margin:14px 10px 0}
.rm-trilho{position:absolute;left:0;right:0;top:20px;height:8px;background:#2A2A2E}
.rm-enche{position:absolute;left:0;top:20px;height:8px;background:var(--vermelho);transform-origin:left;animation:enche 600ms var(--ease-out) 120ms both}
.rm-enche.bom{background:#fff}
@keyframes enche{from{transform:scaleX(0)}}
.rm-marca{position:absolute;top:12px;width:1px;height:24px;background:#8d8d92}
.rm-marca span{position:absolute;top:30px;left:0;transform:translateX(-50%);font-size:.74rem;color:#C6C6C3;white-space:nowrap;line-height:1.2;text-align:center}
.rm-marca.alto span{top:-20px}
.rm-atual{position:absolute;top:2px;width:2px;height:44px;background:#fff}
.rm-atual::before{content:"";position:absolute;left:50%;top:-1px;width:10px;height:10px;background:#fff;transform:translateX(-50%) rotate(45deg)}

/* Números de apoio: lista com divisores, sem cartões */
.numeros{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));background:var(--papel);border:1px solid var(--linha);overflow:hidden}
.numeros>div{padding:18px 20px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--linha);border-right:1px solid var(--linha);margin:0 -1px -1px 0}
.numeros dt{font-size:.82rem;color:var(--tinta-2);order:2}
.numeros dd{margin:0;font:700 1.45rem/1.1 var(--titulo);white-space:nowrap;order:1}

.leg{display:flex;gap:16px;flex-wrap:wrap;font-size:.84rem;color:var(--tinta-2)}
.leg i{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px}
.leg i.c-fat{background:#0B0B0C}
.leg i.c-inv{background:#CF151C}
svg.grafico{width:100%;height:auto;display:block;overflow:visible}
svg.grafico text{font:500 12px var(--texto);fill:var(--tinta-2)}
svg.grafico .barra-g{transform-box:fill-box;transform-origin:bottom;animation:cresce 500ms var(--ease-out) both}
@keyframes cresce{from{transform:scaleY(0)}}

/* Etiquetas de situação: texto + forma, nunca só cor */
.sel{display:inline-block;font:700 .74rem/1 var(--texto);letter-spacing:.04em;text-transform:uppercase;padding:7px 10px;white-space:nowrap}
.sel.bom{background:var(--ok-fundo);color:var(--ok-texto)}
.destaque .sel.bom{background:#fff;color:var(--preto)}
.sel.medio{background:var(--meio-fundo);color:var(--meio-texto)}
.sel.gargalo{background:var(--ruim-fundo);color:var(--ruim-texto);outline:1px solid var(--vermelho);outline-offset:-1px}
.sel.neutro{background:var(--faixa);color:var(--tinta-2)}

/* Funil */
.etapas{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha)}
.etapa{background:var(--papel);padding:18px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center}
.etapa h3{font-size:1rem}
.etapa .de{color:var(--tinta-2);font-size:.86rem}
.etapa .num{font:700 1.6rem/1 var(--titulo);text-align:right}
.etapa .regua{grid-column:1/-1;font-size:.82rem;color:var(--tinta-2);max-width:78ch}
.etapa-num{display:grid;gap:8px;justify-items:end}
.barra{grid-column:1/-1;height:8px;background:var(--faixa);position:relative;overflow:hidden}
.barra i{position:absolute;inset:0 auto 0 0;background:var(--preto);transform-origin:left;animation:enche 600ms var(--ease-out) 80ms both}
.barra.gargalo i{background:var(--vermelho)}
.barra.medio i{background:var(--grafite)}

/* Tabelas */
.rolagem{overflow-x:auto;border:1px solid var(--linha);background:var(--papel)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:.9rem}
caption{text-align:left;padding:14px 16px;font-weight:600;color:var(--tinta-2);font-size:.86rem}
th,td{padding:12px 14px;text-align:right;border-top:1px solid var(--linha);white-space:nowrap}
thead th{background:var(--faixa);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2);font-weight:700}
thead th:first-child{text-align:left}
tbody th.rowh{text-align:left;font-weight:600;white-space:normal;min-width:150px;background:var(--papel);position:sticky;left:0;box-shadow:1px 0 0 var(--linha)}
tfoot td{font-weight:700;background:var(--faixa)}
tfoot td:first-child{text-align:left}
@media (hover:hover) and (pointer:fine){tbody tr:hover td,tbody tr:hover th{background:var(--faixa)}}

.vazio{background:var(--papel);border:1px dashed var(--linha-forte);padding:44px 24px;text-align:center;display:grid;gap:8px;justify-items:center}
.vazio h2{font-size:1.2rem}
.vazio p{color:var(--tinta-2);max-width:48ch}

@media (max-width:860px){
  .entrada{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .lado{flex-direction:row;align-items:center;gap:16px;padding:max(20px,env(safe-area-inset-top)) 16px 20px}
  .lado .marca{width:48px;height:48px;flex:none}
  .lado-frase{font-size:1.1rem}
  .lado-sub{display:none}
  .cartao{padding:28px 16px 40px;align-self:start}
}
@media (max-width:520px){
  .numeros>div:last-child:nth-child(odd){grid-column:1/-1}
  .etapa .num{font-size:1.35rem}
  .capa-acoes{width:100%;justify-content:space-between}
  .destaque{padding:24px 16px 28px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}