/* =====================================================================
   O ACABAMENTO DO PRO E DO ESSENCIAL (lote 272, 10/10/2026)

   O dono: "eu tambem quero melhorias esteticas, principalmente no painel dos usuarios Pro e Essencial... para
   passar mais qualidade. Nao e para ser tao absurdo quanto o Overpower, mas eu quero uma melhoria estetica sim."
   Oito dos nove clientes estao no PRO: esta e a cara do produto para quase todo mundo.

   QUEM VE: o base.html so liga esta folha (e so marca <html data-acabamento="pro|essencial">) quando o painel NAO e
   o do Overpower - o cliente PRO, o Essencial e o "Ver como" desses dois. O Overpower (cliente e o dono) nem baixa
   este arquivo: o painel dele continua byte a byte o de antes.

   O QUE E: produto caro e SOBRIO. Superficie com um degrade quase imperceptivel, borda de 1 px transparente, o fio
   de luz por dentro no alto, sombra em tres camadas (encosta, afasta, some) e o halo vermelho de sempre (o dono
   pediu em 14/09: "halo vermelho suave em volta do bloco, em repouso") so que mais fino. Cabecalho de cartao com
   faixa propria, numero de painel financeiro (nitido, sem neon), botao com os quatro estados, o item do menu
   aceso com acabamento, o selo da edicao com cara de selo e a luz do ambiente mais larga e mais fraca.

   O QUE NAO E: nada do Overpower - sem aura, particula, brasa, ouro, grao de filme ou animacao de fundo. E NENHUMA
   transicao nem animacao nova aqui (a regra do PRO azul: "transicao e proibida"; o movimento que ja existia nas
   outras folhas continua igual). Sem filtro (pesa na tela inteira) e sem :is() com pseudo-elemento (o navegador
   descarta a regra inteira).

   COMO VENCE AS OUTRAS FOLHAS: carrega depois do scouter.css e do premium.css e antes do aplicativo.css, do
   celular.css, do temas.css e da folha de cada tela. Quase todo seletor comeca com :where(...), que pesa ZERO: a
   regra tem o mesmo peso da que ela refina e ganha so pela ordem - e perde, como deve, para a casca do celular,
   para o tema Claro e os tons (temas.css) e para a folha propria de cada tela. O que so fica bem no escuro (sombra
   preta, luz branca) leva :not(.tema-claro); o Claro segue com o desenho dele. A excecao e a secao O CELULAR: la o
   seletor pesa de proposito, para pintar a casca do aplicativo (so cor e luz; medida nenhuma).
   ===================================================================== */

/* ------------------------------------------------------------------ AS FICHAS */
html[data-acabamento] {
  /* a borda transparente e a borda acesa (pegam a cor do fundo por baixo) */
  --ac-borda: rgba(var(--tinta-rgb), .085);
  --ac-borda-viva: rgba(var(--tinta-rgb), .16);
  /* a borda de cima dos cartoes, onde a luz bate */
  --ac-borda-topo: rgba(var(--tinta-rgb), .15);
  /* o fio de luz por dentro, no alto da superficie */
  --ac-realce: rgba(255, 255, 255, .06);
  /* a sombra em tres camadas: encosta na mesa, afasta, some antes da borda */
  --ac-sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 22px -12px rgba(0, 0, 0, .6), 0 28px 56px -30px rgba(0, 0, 0, .8);
  --ac-sombra-alta: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 32px -14px rgba(0, 0, 0, .7), 0 36px 72px -34px rgba(0, 0, 0, .9);
  /* o anel de foco do teclado: coral claro, aparece no preto e no botao vermelho */
  --anel-de-foco: rgba(255, 138, 154, .95);
}
html[data-acabamento].tema-claro {
  --ac-borda: rgba(var(--tinta-rgb), .12);
  --ac-borda-viva: rgba(var(--tinta-rgb), .24);
  --ac-realce: rgba(255, 255, 255, .9);
  --ac-sombra: 0 1px 2px rgba(28, 24, 20, .06), 0 8px 22px -14px rgba(28, 24, 20, .18);
  --ac-sombra-alta: 0 2px 4px rgba(28, 24, 20, .08), 0 14px 30px -16px rgba(28, 24, 20, .26);
  --anel-de-foco: rgba(216, 27, 58, .85);
}
/* a barra de rolagem fina, da cor das linhas (o claro tem a dele no temas.css) */
html[data-acabamento]:not(.tema-claro) { scrollbar-color: color-mix(in srgb, var(--linha-viva) 80%, transparent) transparent; }
html[data-acabamento]:not(.tema-claro) ::selection { background: rgba(224, 32, 63, .32); color: #fff; }

/* ------------------------------------------------------------------ O FUNDO
   A luz do ambiente (premium.css, a camada que ja derivava devagar): no alto a luz da marca, mais larga e mais fraca,
   e uma luz neutra do outro lado - da profundidade sem pintar a tela de vermelho. A grade fina continua. */
:where(html[data-acabamento]:not(.tema-claro)) body.v3::after {
  background:
    radial-gradient(ellipse 38% 26% at 18% 6%, rgba(var(--amb-rgb), .12), transparent 70%),
    radial-gradient(ellipse 34% 22% at 82% 2%, rgba(255, 255, 255, .028), transparent 72%),
    radial-gradient(ellipse 30% 24% at 84% 94%, rgba(var(--amb-rgb), .055), transparent 70%);
}

/* ------------------------------------------------------------------ A BARRA DE CIMA
   O vidro escuro na cor do tema (era o preto fixo: no tom Meia-noite a barra ficava preta em cima do azul) e uma
   sombra curta embaixo. A busca, o sino e as pilulas dos servicos com a mesma superficie dos cartoes. */
:where(html[data-acabamento]:not(.tema-claro)) .comando {
  background-color: color-mix(in srgb, var(--fundo) 86%, transparent);
  border-bottom-color: var(--ac-borda);
  box-shadow: 0 12px 30px -24px rgba(0, 0, 0, .9);
}
:where(html[data-acabamento]:not(.tema-claro)) :is(.busca, .sino, .pilula) {
  border-color: var(--ac-borda);
  background-color: var(--painel);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 1px 0 var(--ac-realce), 0 1px 2px rgba(0, 0, 0, .35);
}
:where(html[data-acabamento]:not(.tema-claro)) :is(.busca, .sino):hover,
:where(html[data-acabamento]:not(.tema-claro)) a.pilula:hover { border-color: var(--ac-borda-viva); }
:where(html[data-acabamento]) .busca kbd { border-color: var(--ac-borda-viva); background: rgba(var(--tinta-rgb), .04); }
/* o titulo da tela: o branco que assenta num cinza quente embaixo (a letra com volume, sem brilho) */
:where(html[data-acabamento]:not(.tema-claro)) .titulo-da-barra h1 {
  background: linear-gradient(180deg, #ffffff 30%, #c9c4be 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* ------------------------------------------------------------------ O TRILHO (computador)
   A coluna com um degrade de cima para baixo e a luz da marca so no canto da logo; a borda da direita fina. O item
   aberto ganha uma placa: a cor da marca indo para o transparente, o contorno de 1 px e o fio de luz - sem barrinha
   no canto (o dono ja recusou a barrinha em 22/09). No celular o menu e a folha do aplicativo.css (fica como esta). */
@media (min-width: 721px) {
  :where(html[data-acabamento]:not(.tema-claro)) .trilho-lateral {
    background:
      radial-gradient(130% 18% at 0% 0%, rgba(var(--amb-rgb), .075), transparent 70%),
      linear-gradient(180deg, color-mix(in srgb, var(--fundo-2), #fff 1.6%), var(--fundo-2) 38%, color-mix(in srgb, var(--fundo-2), var(--fundo) 60%));
    border-right-color: var(--ac-borda);
    box-shadow: 14px 0 34px -30px rgba(0, 0, 0, .95);
  }
  :where(html[data-acabamento]:not(.tema-claro)) .marca-do-trilho { border-bottom-color: var(--ac-borda); }
  :where(html[data-acabamento]:not(.tema-claro)) .trilho-pe { border-top-color: var(--ac-borda); }
  /* o titulo de cada grupo com um fio que some para a direita (recolhido, o tracinho de sempre) */
  :where(html[data-acabamento]) .grupo-do-trilho::after {
    content: ""; flex: 1 1 auto; height: 1px; margin: 0 22px 0 12px;
    background: linear-gradient(90deg, rgba(var(--tinta-rgb), .09), rgba(var(--tinta-rgb), 0));
  }
  :where(html[data-acabamento]) body.trilho-recolhido .grupo-do-trilho::after { display: none; }
  :where(html[data-acabamento]) .trilho-nav a:hover { background: rgba(var(--tinta-rgb), .045); }
  :where(html[data-acabamento]) .trilho-nav a.atual {
    background: linear-gradient(90deg, color-mix(in srgb, var(--vermelho) 17%, transparent), color-mix(in srgb, var(--vermelho) 5%, transparent) 72%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vermelho) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06),
      0 10px 22px -16px color-mix(in srgb, var(--vermelho) 80%, transparent);
  }
  :where(html[data-acabamento]) .trilho-nav a.atual span { font-weight: 600; }
}

/* ---- a marca: a moldura da logo com luz de dentro e o SELO DA EDICAO ----
   A moldura ganha um fundo com a luz da marca atras da arte (a arte "aparece" em vez de afundar no quadrado). O selo
   deixa de ser uma etiqueta lisa: o PRO ganha relevo (o brilho de vidro na metade de cima, sombra embaixo, contorno)
   POR CIMA do degrade de sempre do vermelho para o --coral - e o --coral que leva o ouro ao selo na Black Friday
   (temas.css, lote 240: "o ouro entra discreto nos detalhes - o degrade do selo PRO"); um degrade so de vermelho
   apagava o ouro. O Essencial (que antes aparecia como "PRO" - o rotulo nao batia com o plano) tem o selo proprio,
   grafite e prata. */
:where(html[data-acabamento]) .marca-do-trilho .mira {
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--amb-rgb), .26), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--painel-2), #fff 5%), var(--fundo));
  /* o contorno do ladrilho por cima da arte (contorno, e nao borda: a borda empurraria a arte de 46 px) */
  outline: 1px solid rgba(var(--tinta-rgb), .12); outline-offset: -1px;
}
:where(html[data-acabamento]) .marca-do-trilho .linha-da-marca em {
  height: 17px; padding: 0 7px; border-radius: 5px; color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, var(--vermelho), var(--coral));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .22),
    0 0 0 1px color-mix(in srgb, var(--vermelho) 60%, transparent), 0 3px 10px -3px color-mix(in srgb, var(--vermelho) 70%, transparent);
  text-shadow: 0 1px 0 rgba(80, 0, 12, .45);
}
/* ESSENCIAL tem nove letras: com o espaco do PRO passava 10 px do trilho aberto (244 px - icone 78 - folga 14 - borda
   1 = 151 px para SCOUTER + o selo). Letra do mesmo tamanho (abaixo de 9 px o Chakra serrilha), menos espaco entre
   elas e menos folga: 148 px (o teste do lote 272 refaz a conta com a fonte de verdade). */
:where(html[data-acabamento="essencial"]) .marca-do-trilho .linha-da-marca { gap: 6px; }
:where(html[data-acabamento="essencial"]) .marca-do-trilho .linha-da-marca em {
  padding: 0 5px; letter-spacing: .04em;
  color: #f1eeea;
  background: linear-gradient(180deg, #48474c, #2c2b30 55%, #1f1e22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .3),
    0 0 0 1px rgba(214, 210, 204, .26), 0 3px 10px -4px rgba(0, 0, 0, .8);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
/* a entrada (Entrar, Criar conta, Esqueci a senha) do Essencial: o mesmo selo, que agora diz ESSENCIAL tambem ali
   (login.html le a edicao; antes era "PRO" fixo) - grafite, sem o brilho vermelho da etiqueta do PRO */
:where(html[data-acabamento="essencial"]) .marca-da-entrada .linha-da-marca em {
  color: #f1eeea; letter-spacing: .08em;
  background: linear-gradient(180deg, #48474c, #2c2b30 55%, #1f1e22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(214, 210, 204, .26), 0 3px 10px -4px rgba(0, 0, 0, .8);
}
/* a conta no pe do trilho: a mesma superficie dos cartoes */
:where(html[data-acabamento]:not(.tema-claro)) .conta-do-trilho,
:where(html[data-acabamento]:not(.tema-claro)) .acao-da-conta {
  border-color: var(--ac-borda);
  background: linear-gradient(180deg, color-mix(in srgb, var(--painel), #fff 2.5%), var(--painel));
  box-shadow: inset 0 1px 0 var(--ac-realce);
}
:where(html[data-acabamento]:not(.tema-claro)) .conta-do-trilho:hover,
:where(html[data-acabamento]:not(.tema-claro)) .acao-da-conta:hover { border-color: var(--ac-borda-viva); }

/* ------------------------------------------------------------------ OS CARTOES
   Superficie que clareia 3% no alto e assenta embaixo, borda de 1 px transparente, o fio de luz por dentro, a
   sombra em tres camadas e o halo da marca bem mais fino que o de antes. Os cartoes com fundo proprio (o topo da
   Jornada, o "fora do seu plano", os avisos) pesam mais e continuam com o deles. Seletores SEPARADOS e nao num
   :is(): o :is() pesa o tanto do argumento mais pesado (".numeros .numero") e o ".cartao" passaria a ganhar dos
   cartoes com fundo proprio. Os quatro que tem fundo/borda de uma classe so (o topo da Jornada, o Indique, a ficha do
   cliente e a faixa de avisos) ficam de fora por um :where(:not(...)), que tambem pesa zero. */
:where(html[data-acabamento]:not(.tema-claro)) .cartao:where(:not(.jornada-heroi, .cartao-indique, .cartao-ficha, .faixa-de-avisos)),
:where(html[data-acabamento]:not(.tema-claro)) .servico,
:where(html[data-acabamento]:not(.tema-claro)) .kpi,
:where(html[data-acabamento]:not(.tema-claro)) .numero,
:where(html[data-acabamento]:not(.tema-claro)) .numeros .numero {
  border-color: var(--ac-borda);
  /* a borda de cima mais clara que as outras: a luz bate no alto do cartao (nos cantos redondos ela some sozinha) */
  border-top-color: var(--ac-borda-topo);
  background: linear-gradient(180deg, color-mix(in srgb, var(--painel), #fff 3.4%) 0%, var(--painel) 36%,
    color-mix(in srgb, var(--painel), var(--fundo) 55%) 100%);
  box-shadow: inset 0 1px 0 var(--ac-realce), 0 0 0 1px rgba(var(--amb-rgb), .03), var(--ac-sombra),
    0 0 46px -12px rgba(var(--amb-rgb), .07);
}
:where(html[data-acabamento]:not(.tema-claro)) .cartao:where(:not(.jornada-heroi, .cartao-indique, .cartao-ficha, .faixa-de-avisos)):hover,
:where(html[data-acabamento]:not(.tema-claro)) .servico:hover,
:where(html[data-acabamento]:not(.tema-claro)) .kpi:hover,
:where(html[data-acabamento]:not(.tema-claro)) .numero:hover,
:where(html[data-acabamento]:not(.tema-claro)) .numeros .numero:hover,
:where(html[data-acabamento]:not(.tema-claro)) .rota:hover {
  border-color: rgba(var(--amb-rgb), .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), 0 0 0 1px rgba(var(--amb-rgb), .1), var(--ac-sombra-alta),
    0 0 40px -8px rgba(var(--amb-rgb), .13);
}
/* NO CLARO: o temas.css troca a sombra do .cartao e do .numero, mas o .kpi (Resultados) e o .servico (Visao geral)
   ficavam com a sombra preta larga do escuro (0 18px 50px a 35%) - uma mancha cinza embaixo de cada um. */
:where(html[data-acabamento].tema-claro) .kpi,
:where(html[data-acabamento].tema-claro) .servico { box-shadow: inset 0 1px 0 var(--ac-realce), var(--ac-sombra); }
:where(html[data-acabamento].tema-claro) .kpi:hover,
:where(html[data-acabamento].tema-claro) .servico:hover { box-shadow: inset 0 1px 0 var(--ac-realce), var(--ac-sombra-alta); }
/* o fio de luz do alto: mais fino e mais curto, como reflexo de vidro */
:where(html[data-acabamento]:not(.tema-claro)) .cartao::before {
  left: 24px; right: 24px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .1) 70%, rgba(255, 255, 255, 0));
}

/* ---- o cabecalho do cartao: faixa propria, fio embaixo e o ponto com anel (sem o neon espalhado) ---- */
:where(html[data-acabamento]) .cartao-cabeca {
  background: linear-gradient(180deg, rgba(var(--tinta-rgb), .032), rgba(var(--tinta-rgb), .006));
  border-bottom-color: var(--ac-borda);
}
:where(html[data-acabamento]) .cartao-cabeca h2,
:where(html[data-acabamento]) .cartao-cabeca > strong { letter-spacing: .16em; }
:where(html[data-acabamento]) .cartao-cabeca h2::before,
:where(html[data-acabamento]) .cartao-cabeca > strong::before {
  width: 6px; height: 6px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermelho) 16%, transparent);
}
:where(html[data-acabamento]) .cartao-cabeca .contador { border-color: var(--ac-borda-viva); background: rgba(var(--tinta-rgb), .04); }

/* ------------------------------------------------------------------ OS NUMEROS
   Cara de painel financeiro: o numero nitido (sem o brilho branco em volta, que borrava a borda das letras) e a luz
   do alto do cartao mais fina (1 px no lugar de 2, o brilho mais curto) - um fio, nao um neon. */
:where(html[data-acabamento]) .kpi strong,
:where(html[data-acabamento]) .numeros .numero strong { letter-spacing: -.025em; text-shadow: none; }
:where(html[data-acabamento]:not(.tema-claro)) .kpi strong,
:where(html[data-acabamento]:not(.tema-claro)) .numeros .numero strong { text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
:where(html[data-acabamento]:not(.tema-claro)) .kpi.verde strong,
:where(html[data-acabamento]:not(.tema-claro)) .numeros .numero.destaque strong { text-shadow: 0 0 18px rgba(61, 220, 151, .16); }
:where(html[data-acabamento]) .kpi::before,
:where(html[data-acabamento]) .numeros .numero::before {
  left: 20%; right: 20%; height: 1px; border-radius: 0;
  background: linear-gradient(90deg, rgba(var(--amb-rgb), 0), rgba(var(--amb-rgb), .85) 50%, rgba(var(--amb-rgb), 0));
  box-shadow: 0 0 12px rgba(var(--amb-rgb), .3);
}
/* OS NUMEROS DE "QUANTO VOCE GANHOU" (Resultados) SAIAM COM 18 PX. No scouter.css a regra dos centavos e a da moeda
   comecam com ".kpi strong, ..." - faltou o ".centavos"/".moeda" depois do primeiro ".kpi strong" - e as duas valiam
   para o numero INTEIRO: 18 px, cinza e com 6 px sobrando a direita (no celular a regra de 26 px vinha depois e
   salvava; no computador o numero ficava menor que no celular). Aqui volta o desenho que a regra queria: o numero
   grande, a moeda e os centavos menores e apagados, o zero apagado. */
:where(html[data-acabamento]) .kpi strong { font-size: 34px; color: inherit; margin-right: 0; }
:where(html[data-acabamento]) .kpi strong.apagado { color: var(--fraco); }
:where(html[data-acabamento]) .kpi strong .centavos { font-size: 20px; color: var(--fraco); }
:where(html[data-acabamento]) .kpi strong .moeda { font-size: 18px; color: var(--fraco); margin-right: 6px; }
@media (max-width: 720px) {
  :where(html[data-acabamento]) .kpi strong { font-size: 26px; }
}

/* ------------------------------------------------------------------ A VISAO GERAL
   A primeira tela de todo cliente. A revisao do lote mediu a primeira versao desta camada pixel a pixel e a Visao
   geral quase nao mudava (6% dos pontos no computador, 1% no celular) - e o dono ja disse duas vezes que "a estetica
   nao mudou quase nada". Aqui ela muda de verdade, sem sair do sobrio: a saudacao vira a peca de abertura, os quatro
   numeros ganham o desenho de painel financeiro e os tres servicos dizem o estado com cor. */

/* ---- a saudacao: o fio de luz da marca no alto, a luz que entra pelo canto e o titulo com volume ---- */
:where(html[data-acabamento]:not(.tema-claro)) .saudacao-do-painel {
  border-color: var(--ac-borda); border-top-color: var(--ac-borda-topo);
  background:
    linear-gradient(90deg, rgba(var(--amb-rgb), 0) 3%, rgba(var(--amb-rgb), .8) 20%, rgba(var(--amb-rgb), .25) 46%, rgba(var(--amb-rgb), 0) 72%) top / 100% 1px no-repeat,
    radial-gradient(60% 150% at 0% 0%, rgba(var(--amb-rgb), .17), transparent 62%),
    radial-gradient(40% 120% at 100% 100%, rgba(255, 255, 255, .025), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--painel), #fff 3.4%), color-mix(in srgb, var(--painel), var(--fundo) 45%));
  box-shadow: inset 0 1px 0 var(--ac-realce), var(--ac-sombra);
}
:where(html[data-acabamento]) .saudacao-do-painel h2 { font-size: 24px; letter-spacing: -.005em; }
/* no celular a regra de 640 px do scouter.css (19 px) vinha antes desta e perdia: o titulo fica um pouco maior que o
   de antes, sem tomar a tela */
@media (max-width: 640px) {
  :where(html[data-acabamento]) .saudacao-do-painel h2 { font-size: 20px; }
}
:where(html[data-acabamento]:not(.tema-claro)) .saudacao-do-painel h2 {
  background: linear-gradient(180deg, #ffffff 35%, #cdc7c0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* o emoji do fim do titulo com a cor dele (o "transparente" de cima passa para os filhos) */
:where(html[data-acabamento]:not(.tema-claro)) .saudacao-do-painel h2 > span { -webkit-text-fill-color: currentColor; }
:where(html[data-acabamento]:not(.tema-claro)) .saudacao-do-painel p { color: color-mix(in srgb, var(--texto) 62%, var(--fundo)); }
:where(html[data-acabamento]:not(.tema-claro)) .saudacao-do-painel .atalho-da-jornada {
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .4);
}

/* ---- os quatro numeros: o valor grande, com volume (branco que assenta num cinza quente; o "publicadas" em verde,
   o "nao sairam" apagado), e a explicacao num rodape com fio - o numero em cima, a conta embaixo ---- */
:where(html[data-acabamento]) .numeros-resumo .numero strong { font-size: 40px; letter-spacing: -.03em; }
:where(html[data-acabamento]:not(.tema-claro)) .numeros-resumo .numero strong {
  background: linear-gradient(180deg, #ffffff 30%, #c9c3bc 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  /* sem sombra: com a letra transparente, a sombra apareceria por dentro do numero */
  text-shadow: none;
}
/* (o verde leva o "text-shadow: none" de novo: a regra do brilho verde de cima, ".numeros .numero.destaque strong",
   pesa mais que a do degrade) */
:where(html[data-acabamento]:not(.tema-claro)) .numeros-resumo .numero.destaque strong {
  background-image: linear-gradient(180deg, #a6f8d4 20%, var(--ok) 100%); text-shadow: none;
}
:where(html[data-acabamento]:not(.tema-claro)) .numeros-resumo .numero.apagado strong { background-image: linear-gradient(180deg, #b3aea8 20%, #77736e 100%); }
:where(html[data-acabamento]:not(.tema-claro)) .numeros-resumo .numero strong * { -webkit-text-fill-color: currentColor; }
:where(html[data-acabamento]) .numeros-resumo .numero small { margin-top: 2px; padding-top: 11px; border-top: 1px solid var(--ac-borda); }
:where(html[data-acabamento].tema-claro) .numeros-resumo .numero small { border-top-color: var(--linha); }
/* o "publicadas hoje" (o numero que importa) com a luz verde no canto */
:where(html[data-acabamento]:not(.tema-claro)) .numeros-resumo .numero.destaque {
  background:
    radial-gradient(80% 70% at 0% 0%, rgba(61, 220, 151, .075), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--painel), #fff 3.4%) 0%, var(--painel) 36%, color-mix(in srgb, var(--painel), var(--fundo) 55%) 100%);
}
@media (max-width: 720px) {
  :where(html[data-acabamento]) .numeros-resumo .numero strong { font-size: 31px; }
}

/* ---- os servicos (Automacao, Conversor, WhatsApp): o farol com anel na cor do estado e a pilula do estado com
   acabamento - no ar, verde; parado, um vermelho apagado (o farol ja e vermelho: a pilula concorda com ele) ---- */
:where(html[data-acabamento]) .servico .farol { box-shadow: 0 0 0 3px rgba(var(--tinta-rgb), .07); }
:where(html[data-acabamento]) .servico .farol.desligado { box-shadow: 0 0 0 3px rgba(224, 32, 63, .18); }
:where(html[data-acabamento]) .servico .farol.ligado { box-shadow: 0 0 0 3px rgba(61, 220, 151, .18), 0 0 10px rgba(61, 220, 151, .55); }
:where(html[data-acabamento]) .servico .farol.atencao { box-shadow: 0 0 0 3px rgba(245, 184, 61, .18), 0 0 10px rgba(245, 184, 61, .45); }
:where(html[data-acabamento]) .servico .estado { font: 700 10px/1.2 var(--fonte-titulo); letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; }
:where(html[data-acabamento]:not(.tema-claro)) .servico:not(.no-ar) .estado {
  color: color-mix(in srgb, var(--vermelho-claro) 80%, var(--texto)); border-color: rgba(224, 32, 63, .3);
  background: rgba(224, 32, 63, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
:where(html[data-acabamento]:not(.tema-claro)) .servico .estado.aceso { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 14px -4px rgba(61, 220, 151, .45); }
/* farol ambar (no ar com algum aviso, ou parado por um motivo que pede atencao): a pilula concorda com ele */
:where(html[data-acabamento]) .servico-topo:has(> .farol.atencao) .estado {
  color: var(--ct-f5b83d, #f5b83d); border-color: rgba(245, 184, 61, .4); background: rgba(245, 184, 61, .08);
}
:where(html[data-acabamento]:not(.tema-claro)) .servico-pe { border-top-color: var(--ac-borda); }
:where(html[data-acabamento]) .servico-nome strong { letter-spacing: .01em; }

/* ------------------------------------------------------------------ OS BOTOES
   Os quatro estados bem feitos: em repouso (relevo: luz em cima, sombra embaixo), ao passar o mouse (acende um
   tom), ao apertar (afunda - a luz vira sombra por dentro) e no teclado (o anel coral). As cores saem do vermelho
   do tema (color-mix), entao o Claro e os tons continuam com o vermelho deles. */
:where(html[data-acabamento]) :is(.acao.principal, .botao-cheio, .acao-ligar) {
  border-color: color-mix(in srgb, var(--vermelho), #000 30%);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--vermelho), #fff 10%), var(--vermelho) 55%, color-mix(in srgb, var(--vermelho), #000 20%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .4),
    0 8px 22px -10px color-mix(in srgb, var(--vermelho) 80%, transparent);
}
:where(html[data-acabamento]) :is(.acao.principal, .botao-cheio, .acao-ligar):hover {
  border-color: color-mix(in srgb, var(--vermelho), #000 22%);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--vermelho), #fff 18%), color-mix(in srgb, var(--vermelho), #fff 6%) 55%, color-mix(in srgb, var(--vermelho), #000 12%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .4),
    0 14px 30px -12px color-mix(in srgb, var(--vermelho) 90%, transparent);
}
:where(html[data-acabamento]) :is(.acao.principal, .botao-cheio, .acao-ligar):active {
  transform: translateY(1px);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--vermelho), #000 8%), color-mix(in srgb, var(--vermelho), #000 18%));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .32), 0 1px 1px rgba(0, 0, 0, .35);
}
/* o botao comum: superficie com relevo e borda transparente (o "perigo", o "fantasma", o da ficha e os travados
   tem o deles) */
:where(html[data-acabamento]:not(.tema-claro)) .acao:not(.principal, .perigo, .perigosa, .fantasma, .travado, .abre-ficha) {
  border-color: rgba(var(--tinta-rgb), .13);
  background-color: color-mix(in srgb, var(--painel-2), #fff 2%);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .4);
}
:where(html[data-acabamento]:not(.tema-claro)) .acao:not(.principal, .perigo, .perigosa, .fantasma, .travado, .abre-ficha):hover {
  border-color: rgba(var(--tinta-rgb), .24);
  background-color: color-mix(in srgb, var(--painel-2), #fff 5%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 20px -12px rgba(0, 0, 0, .8);
}
:where(html[data-acabamento]:not(.tema-claro)) .acao:not(.principal, .perigo, .perigosa, .fantasma, .travado, .abre-ficha):active {
  transform: translateY(1px);
  background-color: color-mix(in srgb, var(--painel-2), #000 12%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4);
}
:where(html[data-acabamento]:not(.tema-claro)) :is(.acao.perigo, .acao-parar) {
  background-color: rgba(224, 32, 63, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* travado (disabled): sem relevo, sem sombra e sem acender ao passar o mouse - a cor da marca bem apagada, para nao
   parecer um botao vermelho "sujo" (o Telegram do Essencial sem a API: "Enviar codigo" travado brilhava embaixo).
   Vem depois do hover e do apertar: pesa igual e ganha pela ordem. */
:where(html[data-acabamento]) :is(.acao.principal, .botao-cheio, .acao-ligar):disabled {
  opacity: .6; transform: none; color: rgba(255, 255, 255, .62);
  border-color: color-mix(in srgb, var(--vermelho) 30%, var(--linha));
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%);
  background-color: color-mix(in srgb, var(--vermelho) 34%, var(--painel-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* NO CLARO o travado e o cinza de botao travado (o branco a 62% em cima do rosa claro da regra de cima sumia: 1,3:1).
   Pesa igual a de cima e vem depois. */
:where(html[data-acabamento].tema-claro) :is(.acao.principal, .botao-cheio, .acao-ligar):disabled {
  opacity: 1; color: var(--fraco-2); border-color: var(--linha);
  background-image: none; background-color: var(--painel-3); box-shadow: none;
}
:where(html[data-acabamento]) .acao:not(.principal, .perigo, .perigosa, .fantasma, .travado, .abre-ficha):disabled {
  transform: none; box-shadow: none;
}
/* o anel do teclado por fora, com folga - aparece no preto e no botao vermelho */
:where(html[data-acabamento]) :is(.acao, .botao-cheio, .botao-vazado, .acao-ligar, .acao-parar, .acao-leve, .botao-voltar, .chip, .acao-da-conta):focus-visible {
  outline: 2px solid var(--anel-de-foco); outline-offset: 2px;
}

/* ---- os chips e o periodo: o escolhido com o mesmo relevo do botao principal, sem o halo largo (o verde e o ambar
   do "bom" e do "aviso" pesam mais e continuam) ---- */
:where(html[data-acabamento]) .chip.atual,
:where(html[data-acabamento]) .chip.ativa,
:where(html[data-acabamento]) .barra-de-periodo a.atual {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--vermelho), #fff 8%), color-mix(in srgb, var(--vermelho), #000 14%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px -8px color-mix(in srgb, var(--vermelho) 85%, transparent);
}
:where(html[data-acabamento]:not(.tema-claro)) .chip:not(.atual, .ativa),
:where(html[data-acabamento]:not(.tema-claro)) .barra-de-periodo {
  border-color: var(--ac-borda);
  background-color: color-mix(in srgb, var(--painel), #fff 1.5%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
:where(html[data-acabamento]:not(.tema-claro)) .chip:not(.atual, .ativa):hover { border-color: var(--ac-borda-viva); }

/* ------------------------------------------------------------------ AS TABELAS
   O cabecalho num degrau acima do corpo, linhas mais finas e a linha do mouse num tom (o traco vermelho do premium
   continua na primeira celula). */
:where(html[data-acabamento]:not(.tema-claro)) .tabela th {
  background: color-mix(in srgb, var(--painel), #fff 2%);
  border-bottom-color: var(--ac-borda);
}
:where(html[data-acabamento]:not(.tema-claro)) .tabela td { border-bottom-color: rgba(var(--tinta-rgb), .05); }
:where(html[data-acabamento]) .tabela tbody tr:hover td { background: rgba(var(--tinta-rgb), .03); }

/* ------------------------------------------------------------------ OS CAMPOS
   O campo afunda (sombra por dentro) e acende no foco com um anel fino da marca. */
:where(html[data-acabamento]:not(.tema-claro)) .conteudo :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) {
  border-color: rgba(var(--tinta-rgb), .1);
  background-color: rgba(0, 0, 0, .24);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
/* a SETINHA DA LISTA DE ESCOLHA tinha sumido de toda caixa de escolha: o painel.css desenha a seta no fundo do
   select, e o scouter.css (que vem depois) pinta o fundo com o atalho "background:", que apaga a imagem. Sem a seta,
   a caixa parece um campo de texto que nao deixa digitar. */
:where(html[data-acabamento]) .conteudo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238d8a86' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
/* Modelo do post: o "Exemplo: Mercado Livre" saia cortado ("Exemplo: Mercado Liv") - a folha da tela pedia 30 px e
   letra 12, mas a regra geral dos campos (42 px, letra maior) pesava mais e a largura maxima ficou a mesma
   (no celular fica a regra do dedo: letra de 16 px, senao o iPhone amplia a tela ao tocar) */
@media (min-width: 721px) {
  :where(html[data-acabamento]) .conteudo select.exemplo-da-previa { height: 34px; font-size: 13px; max-width: 240px; }
}
:where(html[data-acabamento]) .conteudo :is(input, select, textarea):focus {
  border-color: color-mix(in srgb, var(--vermelho) 75%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermelho) 18%, transparent), inset 0 1px 2px rgba(0, 0, 0, .2);
}

/* ------------------------------------------------------------------ OS GRAFICOS
   A grade em pontilhado bem fraco (o dado na frente, a regua atras), os numeros do eixo tabulares e a dica com a
   mesma superficie dos cartoes. */
:where(html[data-acabamento]) :is(.grafico-de-area, .grafico-de-barras) .linha-da-grade { stroke: rgba(var(--tinta-rgb), .07); stroke-dasharray: 2 5; }
:where(html[data-acabamento]) :is(.grafico-de-area, .grafico-de-barras) :is(.marca-do-eixo, .rotulo-do-eixo) { font-variant-numeric: tabular-nums; }
:where(html[data-acabamento]:not(.tema-claro)) .dica-do-grafico {
  border-color: var(--ac-borda-viva); border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--painel-2), #fff 3%), var(--painel-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--ac-sombra-alta);
}

/* ------------------------------------------------------------------ O CELULAR
   A casca do aplicativo (aplicativo.css, lote 167) escreve "html body ..." e ganha de toda regra :where() daqui - por
   isso a primeira versao desta camada nao mudava nada no celular, onde esta quase todo cliente. So nesta secao o
   seletor PESA (html[data-acabamento], sem :where) e so para PINTAR a casca: nenhuma medida muda, e as superficies
   continuam OPACAS (sem vidro, sem transparencia por cima do conteudo: o motivo do lote 167 - o celular refazia o
   desfoque a cada quadro e o texto aparecia embaralhado por tras). */
@media (max-width: 720px) {
  /* o cabecalho: o preto do tema com a luz de cima (o fio vermelho embaixo, do scouter.css, continua) */
  html[data-acabamento]:not(.tema-claro) body .area > header.comando {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--fundo), #fff 3.2%), var(--fundo));
  }
  /* a barra de baixo: a mesma luz, um fio claro no alto e a borda transparente */
  html[data-acabamento]:not(.tema-claro) body .casca > nav.barra-de-baixo {
    border-top-color: var(--ac-borda);
    background-image:
      linear-gradient(rgba(255, 255, 255, .055), rgba(255, 255, 255, .055)) top / 100% 1px no-repeat,
      linear-gradient(180deg, color-mix(in srgb, var(--fundo), #fff 4%), var(--fundo) 75%);
  }
  /* a aba aberta: a pilula da marca atras do icone, como nos aplicativos (o tracinho de cima continua). O "isolation"
     segura a pilula atras do icone e na frente da barra. */
  :where(html[data-acabamento]) .barra-de-baixo a:not(.central) { isolation: isolate; }
  :where(html[data-acabamento]) .barra-de-baixo a.atual:not(.central)::after {
    content: ""; position: absolute; z-index: -1; top: 8px; left: 50%; width: 56px; height: 30px; margin-left: -28px;
    border-radius: 999px; background: color-mix(in srgb, var(--vermelho) 17%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vermelho) 30%, transparent);
  }
  /* o "+" do meio: o relevo do botao principal (o brilho de vidro em cima) e um anel da cor do fundo - parece
     encaixado na barra */
  :where(html[data-acabamento]) .barra-de-baixo .central {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 52%),
      linear-gradient(160deg, color-mix(in srgb, var(--vermelho), #fff 14%), var(--vermelho) 45%, color-mix(in srgb, var(--vermelho), #000 40%));
    box-shadow: 0 0 0 4px var(--fundo), 0 0 0 5px var(--ac-borda), 0 14px 26px -8px color-mix(in srgb, var(--vermelho) 75%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 0 rgba(0, 0, 0, .2);
  }
  :where(html[data-acabamento].tema-claro) .barra-de-baixo .central {
    box-shadow: 0 0 0 4px var(--painel), 0 0 0 5px var(--linha), 0 12px 22px -10px color-mix(in srgb, var(--vermelho) 70%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, .38);
  }
}

/* ------------------------------------------------------------------ O QUE A REVISAO DAS TELAS ACHOU (PRO e Essencial)
   - Assinatura: a descricao do plano de cima ("automacao dos canais 24 h · ate 50 canais...") herdava do botao a
     letra em caixa alta, espacada e com a linha colada (line-height 1): tres linhas encavaladas. Volta a ser texto.
   - Radar e Telegram: "Token do bot do Radar" e "Telefone da conta pessoal" grudados no aviso de cima (o formulario
     vinha logo depois da nota, sem folga nenhuma). */
:where(html[data-acabamento]) .opcoes-de-plano .acao span {
  font: 500 12px/1.4 var(--fonte-texto); letter-spacing: 0; text-transform: none;
}
:where(html[data-acabamento]) .opcoes-de-plano .acao em { letter-spacing: .04em; }
/* - Assinatura, o botao do plano recomendado (o vermelho, o PRO para quem esta no Essencial): ficava preso em 44 px -
     a regra do botao das telas de entrada (".caixa-de-login .acao.principal { height: 44px }", painel.css) pesa mais
     que a das opcoes - e o preco "R$ 179,90/MES" saia cortado embaixo, a descricao cortada depois de "ate 10"; e a
     descricao era cinza em cima do vermelho (1,35:1; agora o branco cheio, 4,7:1 - a letra e de 12 px). O nome pode
     quebrar a linha (no celular nao cabia ao lado do preco). */
:where(html[data-acabamento]) .caixa-de-login .opcoes-de-plano .acao.principal { height: auto; min-height: 44px; margin-top: 0; }
:where(html[data-acabamento]) .opcoes-de-plano .acao b { white-space: normal; }
:where(html[data-acabamento]) .opcoes-de-plano .acao.principal span { color: #fff; }
/* no celular a descricao ocupa a largura toda, embaixo; o preco sobe para a linha do nome (na coluna estreita ao lado
   do preco, a descricao do Overpower ia em quatro linhas) */
@media (max-width: 520px) {
  :where(html[data-acabamento]) .opcoes-de-plano .acao span { grid-column: 1 / -1; }
  :where(html[data-acabamento]) .opcoes-de-plano .acao em { grid-row: 1; }
}
:where(html[data-acabamento]) .nota-vazia + :is(form, [data-telegram-passo]) { margin-top: 14px; }
/* - WhatsApp: os numeros da fila ("0 enviados, 0 falhas, 0 na fila") nascem escondidos (hidden) e so aparecem quando
     a ponte responde - mas o "display: grid" do .par-chave-valor passava por cima do hidden e eles apareciam com a
     ponte desligada, colados embaixo do botao "Ligar o WhatsApp". Escondido e escondido; quando aparecem, com folga. */
:where(html[data-acabamento]) .par-chave-valor[hidden] { display: none; }
:where(html[data-acabamento]) .acoes-de-edicao + .par-chave-valor { margin-top: 14px; }