@import url("/_casca/grafite.css");
/* TáNaFila · site na pele grafite (29/10/2026, pedido do Dickson: "o site do Tá na Fila em grafite também").
   Mesma pele da demonstração (demo/index.html) e de _estudos/grafite/grafite.css: chumbo com leve degradê, cartões em camada,
   um laranja-vermelho em degradê como única cor de destaque, Poppins. Entra depois do CSS de cada página e só troca cor,
   fundo, sombra e fonte; a estrutura das páginas não muda. */
:root{
  /* as cores, a fonte e a sombra da pele vêm de /_casca/grafite.css (importado acima, servido pelo Worker dos painéis).
     Aqui só os nomes que o CSS do site usa, apontando para a pele */
  --noite:var(--g-fundo);--noite2:var(--g-cartao);--noite3:var(--g-linha);
  --senha:var(--g-lar2);--brasa:#FFC46B;
  --grafite:#B9BCC2;--nevoa:var(--g-sec);--linho:var(--g-linha);
  --sombra:var(--gsom)}
h1,h2,h3{font-weight:600;letter-spacing:-.3px}
h2{font-size:clamp(32px,4.2vw,52px)}
.rot{color:var(--senha)}
.lead{color:var(--gt2)}
/* seções que eram claras */
section,.branca,.perg,.medida,.caso.claro{background:transparent}
.escura,.hero,.tour,.claras,.fim,.capa,.sm-hero{background:transparent}
.hero::before,.capa::before,.sm-hero::before{background:radial-gradient(60% 55% at 78% 40%,rgba(240,61,41,.16),transparent 70%)}
.hero .pontos{opacity:.22}
header.sol,.barra{background:rgba(34,37,44,.88);border-color:rgba(255,255,255,.05)}
footer{background:var(--gf2);border-color:rgba(255,255,255,.05)}
/* botões */
.bt-senha,.fim a.pri,a.bt.principal{background:var(--gdeg);color:#fff;box-shadow:0 14px 28px -10px rgba(240,61,41,.55)}
.bt-senha:hover{background:var(--gdeg);filter:brightness(1.06)}
.bt-linha,.fim a.sec,.topo a.bt{border-color:rgba(255,255,255,.22);color:#fff}
.bt-linha:hover{border-color:#fff}
/* cartões que eram brancos ou papel → cartão grafite em camada */
.ganho,.tipo,.janela,.cel,.momento .card-m,.prateleira .pr,.perg-m,.prev,.ajustes div,.tres .c,.no,.plano,.condicoes div,.regras div,
.obs-crm,.porque,.ad.antes,.mini-p,.anuncio .ganho,.vai .nao,details.tec-box,.feito div,.nivel.cfg,.navega,.aviso,.agenda,.princ > div,
.quadro,.evolui div,.extra,.lado .bloco,.lista-dono div{background:var(--gcard);box-shadow:var(--gsom);color:var(--gt);border-color:rgba(255,255,255,.06)}
.ganho .vitrine,.cartao,.kg,.fc,.prev .nums div,.prev .it,.prev .etapas span,.ajustes .ic,.tres .c .ic,.no .ic,.mostra > div,.chips span,
.momento .tela-m,.tec div,.feito div,.caso:not(.claro) .feito div,.relogio .mostrador,.passo .n,.feitio .n,.seg span.on,.modos button.on,
.b.ele,.rel,.cel .mio,.mini-p .lin,.kp div,.kpi,.graf,.trilho-ic,.pc .barra span,.extra .vitrine,.cal i,.traf .lin{background:var(--gc3);color:var(--gt);box-shadow:none}
.kpi,.graf,.trilho-ic,.pc .barra span,.extra .vitrine,.cal i,.kp div,.ganho .vitrine,.momento .tela-m,.cel .mio,.mostra > div{background:var(--gf2)}
.pc{background:var(--gcard);border-color:rgba(255,255,255,.06);box-shadow:var(--gsom)}
.cel{background:var(--gcard);color:var(--gt)}
.cel .mio{background:transparent}
.rel{background:var(--gf2);color:var(--gt)}
.b.nos{background:#2E5A3C;color:#fff}
.b small{color:var(--gs)}
.kpi.alto,.kg.alto,.kp div.alto{background:var(--gdeg);color:#fff;box-shadow:0 30px 56px -22px rgba(240,61,41,.55),0 10px 20px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.kpi.alto small,.kg.alto small,.kp div.alto small,.kpi.alto em,.kg.alto em,.kp div.alto em{color:rgba(255,255,255,.88)}
.kpi em,.kp em,.kg em.bom{color:#6FD39E}
.kg em.at{color:var(--brasa)}
/* textos que eram escuros sobre fundo claro */
.cartao .tt b,.etapa .cv b,.papel b,.cel,.aviso,.janela,.seg span.on,.modos button.on,.q input,.chs button,.mostra b,.no b,.tec b,
.porque b,.obs-crm b,.condicoes b,.impl strong,.feito b,.regras b,.ajustes b,.prateleira b,.perg-m h3,.prev .nums strong,.prev .it b,
.mini-p .cab b,.mini-p .lin b,.ganho h3,.tipo h3,.passo h3,.feitio h3,.momento h3,summary,.plano h3,.preco strong,.fala.eq,.rel b,.b.ele{color:var(--gt)}
.fala.eq{background:var(--gc3)}
.fala.tnf,.bolha-msg,.conversa .msg,.sug,.cerebro,.prateleira .sm,.ad.depois,.vai .sim,.nivel.exc,.alerta-f,.plano.rec,.cel .topo-c,.kg.alto .x{background:var(--gf2);color:var(--gt)}
.plano.rec{background:var(--gf2);box-shadow:0 40px 80px -30px rgba(240,61,41,.45),inset 0 0 0 1.5px rgba(248,115,74,.6)}
.plano li::before{background:#3BB273}
.plano.rec li::before{background:var(--senha)}
.ad li,.vai li,.nivel li{border-color:rgba(255,255,255,.08)}
.ad li::before{background:var(--gc3)}
.ad.antes li::before{background:rgba(240,61,41,.18);box-shadow:inset 0 0 0 5px rgba(240,61,41,.35)}
.impl,.ad li{border-color:rgba(255,255,255,.08)}
details{border-color:rgba(255,255,255,.08)}
details p{color:var(--gt2)}
.tg.atrasado{background:rgba(240,61,41,.16);color:#FF8A72}
.tg.atencao{background:rgba(255,181,71,.13);color:#FFC46B}
.tg.em-dia,.relogio .estado,.caso .uso{background:rgba(59,178,115,.15);color:#6FD39E}
.tg.novo,.prev .etapas span:first-child,.chs button.on{background:#F4F1EA;color:#22252C;border-color:#F4F1EA}
.tg.lq,.conversa .acoes-m span.cp,.alerta-f .ir,.sug .bts span.env,.mar .modo button.on,.ramos button.on{background:var(--gdeg);color:#fff;border-color:transparent}
.conversa .acoes-m span,.sug .bts span,.fc .av,.prev .it .av,.mini-p .av,.seg,.modos,.cel .topo-c i{background:var(--gc3);color:var(--gt2)}
.seg,.modos{background:var(--gf2)}
.q input{background:var(--gf2);border-color:var(--gc3)}
.chs button{background:var(--gc3);border-color:var(--gc3)}
.chs.cores button.on{box-shadow:0 0 0 3px var(--gc2),0 0 0 5px #fff}
.relogio .mostrador{box-shadow:inset 0 0 0 8px var(--gc2)}
.relogio .ponteiro{background:#fff}
@keyframes alvo{0%,30%{background:transparent}40%,85%{background:rgba(255,181,71,.14)}100%{background:transparent}}
.mini-funil div{background:var(--gc3)}
.mini-funil div:nth-child(2){background:#4A4F58}
.mini-funil div:nth-child(3){background:#5A5F6B}
.mini-funil div:nth-child(4){background:var(--gdeg)}
.mini-funil small,.prev .nums .ruim{color:#FF8A72}
.etapa .tr{background:var(--gf2)}
.etapa .tr i{background:#4A4F58!important;color:#fff}
.etapa:nth-child(2) .tr i{background:#555A63!important}
.etapa:nth-child(3) .tr i{background:#60656E!important}
.etapa.parou .tr i{background:var(--gdeg)!important}
.etapa:last-child .tr i{background:#6B707A!important}
.etapa.parou .tr{box-shadow:0 0 0 2px var(--senha)}
.barras-h i{background:var(--gc3)}
.barras-h i.ag{background:#6B707A}
.barras-h i.pico{background:var(--senha)}
.canal .tr{background:var(--gf2)}
.cano{background:var(--gc3)}
.cano i:nth-child(2),.cano i:nth-child(3){background:#fff}
.linha-dia::before{background:var(--gc3)}
.momento::before{background:var(--gc2);border-color:var(--gc3)}
.momento .hora{color:var(--senha)}
.papel,.chips span.mt,.no.op,.prateleira .pr,.ad.antes,.vai .nao{border-color:rgba(255,255,255,.18)}
.passos::before,.feitio::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 8px,transparent 8px 14px)}
.passo:first-child .n,.feitio > div:first-child .n{background:var(--gdeg);color:#fff}
.faixa{background:var(--gdeg)}
.faixa .corre{font-weight:600}
.faixa .corre span::after{background:rgba(0,0,0,.35)}
.aba.on{background:var(--gcard);box-shadow:var(--gsom)}
.aba b i{background:var(--gc3)}
.princ > div:hover{border-color:rgba(248,115,74,.5)}
.princ .ic{background:var(--gf2)}
.capa .meta span{background:var(--gc2);border-color:rgba(255,255,255,.06)}
.ramos button{background:var(--gc2);border-color:rgba(255,255,255,.06)}
.palavras span{background:var(--gf2)}
.cerebro .leit span{background:var(--gc2)}
.obs-crm{border-left-color:var(--senha)}
.mar{background:#13202C}
.mar .placa span,.mar .modo{background:rgba(27,29,35,.8)}
.navega .bolas i{background:#4A4F58}
.borrado i{background:linear-gradient(90deg,#6B707A,#4A4F58)}
.tel{border-color:#0B0C10}
.ciclo{box-shadow:var(--gsom)}
/* links da bio */
a.bt,.redes a{background:var(--gcard);border-color:rgba(255,255,255,.06);box-shadow:var(--gsom)}
a.bt:hover,.redes a:hover{border-color:rgba(255,255,255,.2)}
a.bt.claro{background:#F4F1EA;border-color:#F4F1EA;color:#22252C}
a.bt.claro small{color:#5A5F6B}
.frase,h1{font-weight:600}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
/* o ciclo do anúncio (ciclo/ciclo.css tem variáveis próprias) */
.ciclo,.ciclo.escuro{background:var(--gcard);color:var(--gt);border-color:rgba(255,255,255,.06);box-shadow:var(--gsom);font-family:var(--texto);
  --c-noite:#1B1D23;--c-noite2:#2F3239;--c-noite3:#3A3E45;--c-papel:#F4F1EA;--c-senha:#F8734A;--c-linho:#3A3E45;--c-grafite:#B9BCC2;--c-nevoa:#8B9097;--c-verde:#3BB273}
.ciclo .ci-modo{background:var(--gf2)}
.ciclo .ci-modo button.on{background:#F4F1EA;color:#22252C}
.ciclo .ci-bts button{background:var(--gdeg)}
.ciclo .ci-bts button.sec{background:var(--gc3);color:#fff}
.ciclo .ci-passo{background:var(--gf2);color:var(--gt)}
.ciclo .ci-passo span{color:var(--gt2)}
.ciclo .ci-medidor{background:var(--gc3)}
.ciclo .ci-semanas i{background:#4A4F58}
.ciclo .ci-semanas i.v{background:var(--c-senha)}
.ciclo .ci-bts .sem,.ciclo .ci-svg .tt,.ciclo .ci-passo .n,.ciclo .ci-medidor .num{font-family:var(--titulo);font-weight:600}
.ciclo .ci-svg text{font-family:var(--texto)}