/* GERADO por cli/dividir-css.php a partir de ativos/estilo.css — NÃO EDITE AQUI.
   Quem escreve CSS escreve no estilo.css; o publicar-painel.sh refaz este arquivo. */
/* =========================================================
   Painel do cliente — Gerando Movimento
   Mesma identidade do site: vidro sobre fundo claro, com os
   brilhos da marca por tras. Tema claro por decisao de projeto.
   ========================================================= */
:root{
  color-scheme:light dark;
  /* AS SUPERFÍCIES E A TINTA COM ALFA (25/09/2026, modo escuro). Todo
     #fff de fundo, todo rgba(14,16,29,x) de preenchimento e fio e todo
     rgba(255,255,255,x) apontam para estes — a paleta escura, no fim do
     arquivo, troca só os valores. Sombra é sombra nos dois temas. */
  --fundo:#FCFCFD;
  --fundo-rgb:252,252,253;
  --papel:#FFFFFF;
  --papel-rgb:255,255,255;
  --ink-rgb:14,16,29;
  --sombra-rgb:14,16,29;
  --sobre-ink:#FFFFFF;
  --raso:#E7E9EF;
  --trilha:#C9CDD8;
  --chave-on:#2E7D1B;
  --hairline-forte:#E3E5EA;
  --meta-fundo:#EAF2FF;  --meta-tinta:#0064C8;
  --google-fundo:#FDECEA; --google-tinta:#B4271C;
  --tinta-vermelha:#FDE7EB; --tinta-verde:#E3F6DA; --tinta-verde-clara:#F1FAEA;
  --texto-verde-escuro:#123B00; --texto-amarelo-escuro:#8A6A00; --texto-laranja-escuro:#3D1E00;
  --azul:#1F6FB2; --azul-vivo:#2F6FED;

  /* A ESCALA DE TIPOS (25/09/2026, régua da Apple): seis degraus, como os
     estilos de texto do iOS — corpo 17, mínimo 11 e só em rótulo de caixa
     alta. Todo font-size do painel aponta para um deles; título grande
     (h1, h2) tem tamanho próprio, acima da escala. */
  --t-titulo:1.75rem;   /* 28px · título da tela */
  --t-secao:1.375rem;   /* 22px · título de seção */
  --t-cabeca:1.0625rem; /* 17px · cabeçalho, semibold */
  --t-corpo:1.0625rem;  /* 17px · texto corrido */
  --t-denso:.9375rem;   /* 15px · tabela, lista, controle */
  --t-nota:.8125rem;    /* 13px · nota, explicação curta */
  --t-legenda:.75rem;   /* 12px · legenda */
  --t-rotulo:.6875rem;  /* 11px · só rótulo em CAIXA ALTA */

  --ink:#0E101D;
  --ink-2:#3A4050;
  /* v211: os dois cinzas de apoio escureceram. O --ink-4 de antes
     (#8A91A3) rendia 3,15:1 no branco e 2,86:1 no chão da página, num
     texto de 12,8px — abaixo do mínimo legível (4,5:1); de dia, no
     celular, ao sol, sumia. Mesmo tom da casa, só mais escuro:
     #6A7185 dá 4,87:1 e #5A6274 dá 6,12:1. */
  --ink-3:#5A6274;
  --ink-4:#6A7185;

  --laranja:#FF914D;
  --amarelo:#FFDE59;
  --verde:#7ED957;
  --verde-forte:#3E8E24;
  --laranja-forte:#C25A14;
  --vermelho:#C62B45;

  --glass:linear-gradient(158deg,rgba(var(--papel-rgb),.94),rgba(var(--papel-rgb),.82));
  --glass-strong:linear-gradient(158deg,rgba(var(--papel-rgb),.98),rgba(var(--papel-rgb),.92));
  --glass-edge:rgba(var(--ink-rgb),.055);
  --glass-shadow:0 10px 42px rgba(var(--ink-rgb),.065);
  --glass-inset:inset 0 1px 0 rgba(var(--papel-rgb),.9);
  --hairline:rgba(var(--ink-rgb),.10);

  --display:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  /* --corpo e --mono eram usadas em dez lugares e não existiam: a agenda
     inteira saía em máquina de escrever, e os rótulos do DRE perdiam a
     regra (09/09). --corpo é apelido de --body; --mono é para número que
     se alinha em coluna. */
  --corpo:var(--body);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* --fio também não existia: cinco regras pediam var(--fio) SEM reserva,
     e "border:1px solid var(--fio)" inválido vira border:none — as listas
     suspensas da agenda, da comissão e do "toda lista se escreve" ficavam
     sem contorno nenhum (09/09). */
  --fio:rgba(var(--ink-rgb),.12);

  --r:26px;
  --r-sm:16px;
}
*{box-sizing:border-box}
/* O atributo hidden vem do navegador com display:none de baixa força, e
   qualquer regra nossa com display o atropela — .barra-linha é grid,
   as linhas da tabela empilhada são block. Sem este !important, esconder
   um item por JavaScript simplesmente não acontecia. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font-family:var(--body);
  font-size:var(--t-corpo);line-height:1.5;letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
  background-color:var(--fundo);
  background-image:
    radial-gradient(46vw 62vh at -6% 2%,   rgba(255,145,77,.20), transparent 66%),
    radial-gradient(42vw 56vh at 104% 14%, rgba(126,217,87,.16), transparent 66%),
    radial-gradient(38vw 48vh at -4% 72%,  rgba(255,222,89,.13), transparent 66%),
    radial-gradient(40vw 52vh at 103% 82%, rgba(255,145,77,.12), transparent 66%);
  background-attachment:fixed;background-repeat:no-repeat;
}
img{max-width:100%;display:block}
a{color:var(--ink)}
.container{max-width:1180px;margin:0 auto;padding:0 22px}
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow),var(--glass-inset);
  border-radius:var(--r);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(var(--papel-rgb),.9)}
}
/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:120;padding:14px 22px 0}
.nav::before{content:"";position:absolute;top:0;left:0;right:0;height:14px;
  pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* GRADE, E NÃO FLEX QUE QUEBRA SOZINHO.

   Com flex-wrap, os atalhos (trocador, Administração, Sair) caíam para a
   segunda linha em QUALQUER largura — a marca e as abas já ocupavam a
   primeira — e o margin-left:auto os empurrava para a direita. Sobrava
   um vazio de 800px à esquerda deles, e a barra parecia montada errada.
   Medido a 1400, 1280, 1180, 1120, 1060 e 900: em todas.

   Agora as duas linhas são de propósito e sempre as mesmas: em cima a
   marca e a conta, embaixo a navegação, alinhada com a marca. Sem abas,
   a segunda linha simplesmente não existe. */
.nav-in{
  max-width:1180px;margin:0 auto;min-height:58px;padding:9px 18px;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"marca atalhos" "abas abas";
  align-items:center;gap:4px 20px;border-radius:28px;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--glass-edge);
  box-shadow:0 8px 26px rgba(var(--sombra-rgb),.10),var(--glass-inset);
}
.brand{grid-area:marca;display:flex;align-items:center;gap:9px;text-decoration:none;
  flex:none;color:var(--ink)}
.brand img{height:26px;width:auto}
.brand span{font-family:var(--display);font-weight:600;font-size:var(--t-corpo);
  letter-spacing:-.022em;white-space:nowrap}
.nav-links{grid-area:atalhos;justify-self:end;display:flex;align-items:center;
  gap:18px;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{color:var(--ink-2);text-decoration:none;font-size:var(--t-denso);font-weight:500;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-quem{font-size:var(--t-denso);color:var(--ink-4);white-space:nowrap}
.nav-cta{
  background:var(--ink);color:var(--sobre-ink)!important;padding:9px 18px;border-radius:999px;
  font-weight:600!important;box-shadow:0 4px 14px rgba(var(--sombra-rgb),.22);
  transition:transform .16s,box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(var(--sombra-rgb),.28)}
@media (max-width:640px){
  .nav-quem{display:none}
  .brand span{display:none}
}
/* No celular a barra é sticky e come tela: tudo o que tem outra porta
   sai daqui. "Administração" já está na faixa logo abaixo ("Ir para a
   administração"), e repetida aqui ela custava uma linha inteira da
   barra — 73px de tela em cada rolagem. */
@media (max-width:760px){
  .nav-links > a:not(.nav-cta):not(.retrato-nav){display:none}
  .nav-in{padding:8px 14px;gap:4px 12px}
  .trocador summary{max-width:52vw}
  .nav-abas{margin-left:-4px}
}
/* ---------- abas do painel ---------- */
/* Ficam no centro da pilula: e o primeiro lugar onde o olho procura
   "onde mais eu posso ir". */
/* A tira de abas monta para baixo — nunca corta, nunca sobrepõe.

   O que quebrava: .nav-abas tinha min-width:0 e as abas dentro dela vêm
   com white-space:nowrap. Faltando espaço, a caixa encolhia abaixo do
   conteúdo e as abas passavam a imprimir POR CIMA do seletor de empresa,
   em vez de empurrar. Com quatro abas cabia; a quinta — "Instagram e
   Facebook" — estourou. Medido em 04/09/2026: inteiro em 1100px,
   sobreposto em 1000px, cortado em 390px.

   Agora a barra quebra linha, como o cliente prefere: rolagem lateral,
   nunca. */
.nav-abas{grid-area:abas;display:flex;align-items:center;gap:4px;
  min-width:0;flex-wrap:wrap;row-gap:6px;margin-left:-6px}
/* Abaixo de 1100 as abas ganham a linha inteira, sob a marca e os
   atalhos. É a mesma ideia que já valia no celular, só que começando
   antes — 1000px é largura de notebook, e é lá que quebrava. */
/* A regra de 1100px que existia aqui virou o desenho padrão: as abas
   têm a linha delas em qualquer largura, e não só quando falta espaço. */
.nav-aba{
  display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;
  font-size:var(--t-denso);font-weight:500;color:var(--ink-3);text-decoration:none;
  white-space:nowrap;transition:background .16s,color .16s;
}
.nav-aba:hover{background:rgba(var(--ink-rgb),.05);color:var(--ink)}
.nav-aba.on{background:rgba(var(--ink-rgb),.07);color:var(--ink);font-weight:600}
/* A bolinha da aba: o mesmo vermelho do sino, do lado do nome. Ela some
   quando a tela é aberta — quem abre, atendeu. */
.aba-bolinha{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 5px;margin-left:6px;border-radius:999px;
  background:var(--vermelho);color:#fff;font-size:var(--t-legenda);font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums;
}
/* ---------- trocador de empresa ---------- */
.trocador{position:relative}
.trocador summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;font-size:var(--t-denso);font-weight:500;
  color:var(--ink-2);background:rgba(var(--ink-rgb),.045);max-width:210px;
  transition:background .16s;
}
.trocador summary::-webkit-details-marker{display:none}
.trocador summary:hover{background:rgba(var(--ink-rgb),.09);color:var(--ink)}
.trocador[open] summary{background:var(--ink);color:var(--sobre-ink)}
.trocador-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trocador-lista{
  position:absolute;right:0;top:calc(100% + 9px);z-index:130;
  min-width:250px;max-width:min(330px,calc(100vw - 32px));padding:8px;
  border-radius:20px;max-height:60vh;overflow:auto;
  /* FUNDO SÓLIDO, e não o vidro da casa — o mesmo motivo do sino: este
     menu nasce DENTRO da .nav-in, que já tem backdrop-filter, e vidro
     sobre vidro não borra nada. Dava para ler a página inteira por trás
     dos nomes das empresas. */
  background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.trocador-titulo{
  font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);padding:8px 12px 6px;
}
.trocador-item{
  display:block;padding:10px 12px;border-radius:12px;text-decoration:none;
  font-size:var(--t-denso);color:var(--ink-2);transition:background .14s;
}
.trocador-item:hover{background:rgba(var(--ink-rgb),.055);color:var(--ink)}
.trocador-item.on{background:rgba(255,145,77,.14);color:var(--ink);font-weight:600}
@media (max-width:860px){
  .nav-abas{order:3;width:100%;margin:0 0 10px;overflow-x:auto;
    padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* A FITA DE ABAS CORTAVA NO MEIO DA PALAVRA. Ela sempre rolou de
       lado, mas parada e cortada em "Anú" ela lê como defeito, não como
       "arraste para ver o resto" — e quem não arrasta nunca descobre
       que existe Carteira e Redes sociais. O degradê no fim é o que
       diz, sem palavra nenhuma, que a fita continua. */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  .nav-abas::-webkit-scrollbar{display:none}
  .nav-in{flex-wrap:wrap;padding:10px 10px 0 14px;border-radius:26px}
  .nav-links{margin-left:auto;order:2}
  .trocador summary{max-width:150px}
}
/* O CABEÇALHO NÃO PODE COMER UM QUARTO DA TELA.
   No iPhone ele estava com 192px: a marca numa linha, o seletor de empresa
   e os atalhos quebrando em duas, e as abas numa terceira — e como a barra
   é grudada no topo, esse pedaço ficava ali o tempo todo, por cima da
   leitura. O que sai é o link "Administração", e só para quem administra:
   ele está repetido logo abaixo, na faixa cinza, como "Ir para a
   administração". O "Sair" fica, porque não está repetido em lugar nenhum. */
@media (max-width:640px){
  .nav-links{gap:10px}
  .nav-links > a:not(.nav-cta):not(.retrato-nav){display:none}
  .trocador summary{max-width:min(46vw,190px)}
}
/* ---------- tipografia ---------- */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;
  letter-spacing:-.034em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.042em}
h2{font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.03em}
h3{font-size:var(--t-corpo);letter-spacing:-.022em}
p{margin:0}
.kicker{font-family:var(--display);font-size:.72rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4);margin-bottom:9px}
.sub{color:var(--ink-3);font-size:var(--t-denso);margin-top:8px}
/* ---------- topo da pagina ---------- */
.topo{padding:34px 0 6px}
.topo-linha{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
/* ---------- filtro de periodo ---------- */
.filtro{margin:22px 0 26px;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
/* Atalhos em cima, quebrando à vontade; datas embaixo, centralizadas.
   Já foram lado a lado: com margin-left:auto as datas desciam sozinhas
   para o canto direito e sobrava uma faixa vazia no meio; espremidas na
   mesma linha, "Este ano" e "Tudo" ficavam cortados. Quebrar é o que
   cabe em qualquer largura sem esconder atalho. */
.filtro-linha{display:flex;flex-direction:column;gap:13px}
/* Centralizados: quebrando em duas ou três linhas no celular, alinhados
   pelo meio ficam equilibrados — encostados à esquerda, a última linha
   sobra torta. */
.filtro-atalhos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pill{
  display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;
  font-size:var(--t-denso);font-weight:500;text-decoration:none;color:var(--ink-2);
  background:rgba(var(--papel-rgb),.66);border:1px solid rgba(var(--ink-rgb),.08);
  box-shadow:inset 0 1px 2px rgba(var(--sombra-rgb),.03);
  transition:background .16s,color .16s,border-color .16s;white-space:nowrap;
}
.pill:hover{background:rgba(var(--papel-rgb),.95);color:var(--ink)}
.pill.on{background:var(--ink);color:var(--sobre-ink);border-color:var(--ink);
  box-shadow:0 4px 12px rgba(var(--sombra-rgb),.2)}
.filtro-datas{display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap}
.filtro-datas label{font-size:var(--t-nota);color:var(--ink-3)}
input[type=date],input[type=time],input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  font-family:var(--body);font-size:var(--t-denso);color:var(--ink);
  background:rgba(var(--papel-rgb),.72);border:1px solid rgba(var(--ink-rgb),.13);
  border-radius:12px;padding:9px 12px;-webkit-appearance:none;appearance:none;
  box-shadow:inset 0 1px 2px rgba(var(--sombra-rgb),.04);
  transition:border-color .18s,background .18s,box-shadow .18s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--ink);background:rgba(var(--papel-rgb),.96);
  box-shadow:0 0 0 3px rgba(var(--sombra-rgb),.10);
}
select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666E82' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px;padding-right:36px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--ink);color:var(--sobre-ink);text-decoration:none;border:none;cursor:pointer;
  padding:11px 22px;border-radius:999px;font-size:var(--t-denso);font-weight:600;
  font-family:var(--body);letter-spacing:-.012em;
  box-shadow:0 6px 18px rgba(var(--sombra-rgb),.22);transition:transform .16s,box-shadow .2s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(var(--sombra-rgb),.28)}
.btn.pequeno{padding:8px 16px;font-size:var(--t-denso)}
.btn.claro{background:rgba(var(--papel-rgb),.9);color:var(--ink);
  border:1px solid var(--glass-edge);box-shadow:0 4px 14px rgba(var(--sombra-rgb),.08)}
.btn.perigo{background:var(--vermelho);box-shadow:0 6px 18px rgba(198,43,69,.28)}
/* ---------- cartoes de numero ---------- */
.kpis{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-bottom:20px}
.kpi{padding:20px 22px 18px;display:flex;flex-direction:column;gap:3px;min-width:0}
/* ---------- cartao de numero sem moldura ----------

   O numero deixa de morar dentro de uma caixa: fio em cima, e o espaco
   entre eles faz a separacao. Nasceu no telefone, onde a caixa era o
   problema — cartoes vizinhos com quantidades diferentes de informacao
   deixam sobra, e sobra DENTRO de um retangulo o olho le como defeito,
   porque a borda de baixo e' a regua. Sem retangulo, a mesma sobra e'
   respiro entre blocos.

   Vale tambem no computador porque ele pediu as duas telas no mesmo
   estilo — e porque o argumento nao era de largura: era de moldura.

   O .glass continua nos BLOCOS (as secoes), que e' onde o vidro faz
   sentido: ele separa assunto de assunto. Dentro do bloco, numero de
   numero se separa com um fio. */
.kpi.glass{
  background:none;border:0;box-shadow:none;border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-top:1px solid var(--hairline);
}
/* Sem caixa, o destaque vira o FIO laranja em cima — e so' ele.
   Colorir tambem o numero, como tentei primeiro, poe duas laranjas lado a
   lado querendo dizer coisas diferentes: "este e' o importante" e "este
   pede atencao". O fio marca importancia; a cor do numero fica reservada
   para julgamento (ver .valor.bom/.atencao/.ruim). */
.kpi.glass.destaque{background:none;border-top-color:var(--laranja)}
/* O NÚMERO JULGADO. Só o retorno usa isto hoje, e só onde há régua para
   julgar — ver tom_do_roas() no metricas.php. A cor vai no número e não
   num selo novo: selo cresce o cartão, e a fileira do celular já brigou
   demais por altura. A frase de apoio diz POR QUE a cor é aquela, porque
   número colorido sem explicação é o painel dando ordem sem dizer de onde
   tirou. */
.kpi .valor.bom{color:var(--verde-forte)}
.kpi .valor.atencao{color:var(--laranja-forte)}
.kpi .valor.ruim{color:var(--vermelho)}
/* No destaque não há mais cor de número para competir: só o fio. */
.kpi .rotulo{font-size:var(--t-nota);color:var(--ink-3);font-weight:500;display:flex;
  align-items:center;gap:6px}
.kpi .valor{
  font-family:var(--display);font-size:clamp(1.42rem,2.3vw,1.92rem);
  font-weight:800;letter-spacing:-.042em;line-height:1.1;margin-top:5px;
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
  /* valor financeiro sai por inteiro, com centavos: precisa caber
     "R$ 61.954,41" sem estourar o cartão */
  text-wrap:nowrap;
}
.kpi .apoio{font-size:var(--t-nota);color:var(--ink-4);margin-top:4px;line-height:1.4}
/* De onde veio o número, quando há mais de uma conta. Fica abaixo do
   apoio, menor e mais claro: quem quer só o total não tropeça nela. */
.kpi .reparte{
  display:flex;flex-direction:column;gap:3px;
  font-size:var(--t-legenda);color:var(--ink-4);margin-top:9px;
  padding-top:8px;border-top:1px dashed rgba(var(--ink-rgb),.10);
  font-variant-numeric:tabular-nums;
}
/* Plataforma, nome, valor — nesta ordem e sempre nas mesmas colunas. O
   valor encostado à direita é o que deixa comparar as contas de relance. */
/* Invólucro das linhas — nasceu para o telefone poder virar a
   repartição de coluna para fileira sem mexer no .reparte, que tem a
   borda tracejada e o espaçamento do bloco. */
.reparte-linhas{display:flex;flex-direction:column;gap:3px}
/* O SELO BASTA COMO NOME quando cada conta está numa plataforma diferente:
   "Google R$ 785,85 · Meta R$ 118,62" diz tudo numa linha. Quem marca é o
   PHP (ver .so-selo em painel.php), porque só ele sabe se há duas contas
   na mesma plataforma — e aí o nome fica, senão dois números não dizem de
   quem são.

   VALE NOS DOIS TAMANHOS, de propósito. Nasceu como regra do celular, e
   isso criou a única diferença de informação real entre as duas telas: o
   computador mostrava "META · Betel Galvanização · R$ 118,62" e o
   telefone, "META R$ 118,62". Ou o nome é necessário — e aí falta no
   telefone — ou é redundante — e aí sobra no computador. Ele é
   redundante: numa página que já se chama Betel Galvanização, repetir o
   nome da conta ao lado do selo não acrescenta nada. */
.reparte-linhas.so-selo{flex-direction:row;flex-wrap:wrap;gap:3px 14px}
.reparte-linhas.so-selo .reparte-linha{
  display:inline-flex;align-items:baseline;gap:5px;grid-template-columns:none}
.reparte-linhas.so-selo .reparte-conta{display:none}
.reparte-linha{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:6px;line-height:1.5;
}
.reparte-onde{
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:6px;white-space:nowrap;
  background:rgba(0,129,255,.12);color:var(--meta-tinta);
}
.reparte-onde.google{background:rgba(234,67,53,.12);color:var(--google-tinta)}
/* Nome comprido encolhe; o valor nunca. */
.reparte-conta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi .reparte b{font-weight:650;color:var(--ink-3);white-space:nowrap}
.kpi.destaque{background:linear-gradient(158deg,rgba(var(--papel-rgb),.98),rgba(255,241,232,.92));
  border-color:rgba(255,145,77,.28)}
/* ---------- a fileira de cartoes de um grupo de campanhas ----------

   Colunas CONTADAS, e nao auto-fit: cada grupo tem uma quantidade
   diferente de numeros, e com auto-fit os dois cartoes do reconhecimento
   esticavam ate o dobro da largura dos tres da captacao logo acima.
   Contando as colunas, o cartao do grupo de cima tem a mesma largura do
   cartao do grupo de baixo.

   Uma, duas ou quatro — nunca tres. Sao dez cartoes por grupo, e dez
   dividido por tres deixa UM sozinho na ultima fileira, que e defeito
   conhecido daqui. Em quatro colunas os dez fecham 4+4+2; nas outras
   contas quem cuida do sozinho e o cartoes_do_objetivo, e o que escapar
   dele cai na rede de seguranca logo abaixo.

   Aqui a media query vale: esta grade e filha direta do bloco, que ocupa
   a largura do container. A armadilha do componente espremido dentro de
   uma celula de outra grade nao se aplica. */
.kpis-grupo{grid-template-columns:1fr;gap:14px}
@media (min-width:560px){
  .kpis-grupo{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .kpis-grupo{grid-template-columns:repeat(4,1fr)}
}
/* Rede de seguranca: cartao sozinho na ultima fileira ocupa dois lugares
   em vez de ficar espremido num canto. Em duas colunas isso e todo numero
   impar; em quatro, so o que deixa resto 1 — e a faixa de duas colunas
   precisa de max-width, senao a regra dela vaza para a de quatro e
   engorda o ultimo cartao de uma fileira que estava certa. */
@media (min-width:560px) and (max-width:999px){
  .kpis-grupo>.kpi:last-child:nth-child(odd){grid-column:span 2}
}
@media (min-width:1000px){
  .kpis-grupo>.kpi:last-child:nth-child(4n+1){grid-column:span 2}
}
.chip{
  display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
  margin-top:9px;padding:4px 10px;border-radius:999px;
  font-size:var(--t-nota);font-weight:600;letter-spacing:-.01em;
  background:rgba(var(--ink-rgb),.055);color:var(--ink-3);
}
.chip.bom{background:var(--tinta-verde);color:var(--verde-forte)}
.chip.ruim{background:var(--tinta-vermelha);color:var(--vermelho)}
.chip.neutro{background:rgba(var(--ink-rgb),.055);color:var(--ink-3)}
/* O "?" — 15px de bolinha, 44px de alvo.

   Medido em 375px: a bolinha tinha 15×15 e a explicacao vivia so no
   atributo title, que no celular NAO ABRE. Ou seja: no aparelho em que a
   maior parte da gente acessa, a explicacao de "Pessoas alcancadas"
   simplesmente nao existia. Agora o toque abre o texto (ver ajuda.js) e
   o ::after estica a area clicavel sem mexer no desenho. */
.ajuda{
  position:relative;width:16px;height:16px;flex:none;border-radius:50%;border:none;padding:0;
  cursor:pointer;background:rgba(var(--ink-rgb),.10);color:var(--ink-3);
  font-size:var(--t-legenda);font-weight:700;line-height:16px;text-align:center;font-family:var(--body);
}
.ajuda::after{content:"";position:absolute;inset:-14px;border-radius:50%}
.ajuda:hover,.ajuda[aria-expanded="true"]{background:var(--ink);color:var(--sobre-ink)}
.ajuda:focus-visible{outline:2px solid var(--verde-forte);outline-offset:2px}
/* O texto que o toque abre. Ancorado no cartao, largura limitada para
   nao virar uma parede de texto no celular. */
.ajuda-balao{
  position:absolute;z-index:40;max-width:min(280px,calc(100vw - 32px));
  background:var(--ink);color:var(--sobre-ink);border-radius:12px;padding:11px 13px;
  font-size:var(--t-nota);line-height:1.5;font-weight:400;
  box-shadow:0 10px 30px rgba(var(--sombra-rgb),.28);
}
.ajuda:hover{background:var(--ink);color:var(--sobre-ink)}
/* ---------- blocos ---------- */
.bloco{padding:26px 26px 28px;margin-bottom:20px}
.bloco > h2{margin-bottom:4px}
.bloco-cabeca{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:8px;margin-bottom:18px}
.duas{display:grid;gap:20px;grid-template-columns:1.55fr 1fr;align-items:start}
@media (max-width:900px){
  .duas{grid-template-columns:1fr}
}
/* ---------- graficos ---------- */
.grafico{width:100%;overflow:visible}
.grafico text{font-family:var(--body);fill:var(--ink-4);font-size:var(--t-legenda)}
.grafico .eixo{stroke:var(--hairline);stroke-width:1}
.grafico .grade{stroke:rgba(var(--ink-rgb),.06);stroke-width:1}
/* Regra de folha de estilo ganha de atributo de apresentação: o fill e o
   font-size que graficos.js escrevia no <text> não pintavam nada, porque
   a regra acima já tinha dito cinza e 11px. Eram dois números errados na
   tela — o eixo da direita saía cinza igual ao da esquerda, sem dizer
   qual escala é o dinheiro, e o total no meio da rosca ficava do mesmo
   tamanho da palavra "investidos" embaixo dele. Quem pinta os dois é
   daqui, não de lá. */
.grafico text.eixo-b{fill:var(--verde-forte)}
.grafico text.rosca-total{fill:var(--ink);font-size:var(--t-denso);font-weight:700}
.legenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:var(--t-nota);color:var(--ink-3)}
.legenda span{display:inline-flex;align-items:center;gap:7px}
.legenda i{width:11px;height:11px;border-radius:4px;display:block;flex:none}
.dica{
  position:fixed;z-index:200;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--ink);color:var(--sobre-ink);border-radius:12px;padding:9px 12px;
  font-size:var(--t-nota);line-height:1.45;box-shadow:0 10px 30px rgba(var(--sombra-rgb),.28);
  max-width:230px;
}
.dica.on{opacity:1}
.dica b{font-weight:600}
.dica .l{color:rgba(255,255,255,.66)}
/* ---------- barras horizontais ---------- */
.barras{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.barra-linha{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.barra-nome{font-size:var(--t-denso);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-val{font-size:var(--t-denso);color:var(--ink-3);font-variant-numeric:tabular-nums}
.barra-trilho{grid-column:1/-1;display:block;height:9px;border-radius:999px;
  background:rgba(var(--ink-rgb),.06);overflow:hidden}
/* span e inline por padrao, e altura nao se aplica a inline: sem o display
   block a barra fica vazia. */
.barra-preenche{display:block;height:100%;min-width:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--laranja),var(--amarelo))}
.barra-preenche.verde{background:linear-gradient(90deg,var(--verde),#B6E88F)}
/* ---------- tabela ---------- */
.rolagem{overflow-x:auto;margin:0 -4px;padding:0 4px}
table.dados{width:100%;border-collapse:collapse;font-size:var(--t-denso);min-width:640px}
table.dados th,table.dados td{padding:11px 12px;text-align:right;white-space:nowrap}
table.dados th:first-child,table.dados td:first-child{text-align:left;white-space:normal;min-width:190px}
table.dados thead th{
  font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);border-bottom:1px solid var(--hairline);
}
table.dados tbody tr{border-bottom:1px solid rgba(var(--ink-rgb),.055)}
table.dados tbody tr:last-child{border-bottom:none}
table.dados tbody tr:hover{background:rgba(var(--papel-rgb),.5)}
table.dados td{font-variant-numeric:tabular-nums;color:var(--ink-2)}
table.dados td:first-child{color:var(--ink);font-weight:500}
table.dados tfoot td{font-weight:700;border-top:1px solid var(--hairline);color:var(--ink)}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:var(--t-legenda);
  font-weight:600;letter-spacing:.02em;background:rgba(var(--ink-rgb),.06);color:var(--ink-3)}
.tag.meta{background:rgba(0,129,255,.12);color:var(--meta-tinta)}
.tag.google{background:rgba(234,67,53,.12);color:var(--google-tinta)}
/* ---------- explicacao ---------- */
.explica{display:flex;flex-direction:column;gap:16px}
.explica-item{padding:18px 20px 19px;border-radius:var(--r-sm);
  background:rgba(var(--papel-rgb),.62);border:1px solid rgba(var(--papel-rgb),.9);
  border-left:3px solid var(--ink-4)}
.explica-item.bom{border-left-color:var(--verde-forte);background:rgba(227,246,218,.5)}
.explica-item.atencao{border-left-color:var(--laranja-forte);background:rgba(255,241,232,.62)}
.explica-item h3{margin-bottom:7px}
.explica-item p{color:var(--ink-2);font-size:var(--t-denso);line-height:1.6}
.explica-item b{font-weight:600;color:var(--ink)}
.glossario{margin-top:22px;border-top:1px solid var(--hairline);padding-top:8px}
.glossario summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:600;
  font-size:var(--t-denso);display:flex;align-items:center;gap:9px}
.glossario summary::-webkit-details-marker{display:none}
.glossario summary::before{content:"+";width:20px;height:20px;flex:none;border-radius:50%;
  background:rgba(var(--ink-rgb),.07);color:var(--ink-3);font-size:var(--t-nota);line-height:20px;
  text-align:center;font-weight:600}
.glossario[open] summary::before{content:"–"}
.glossario dl{margin:0 0 16px;display:grid;gap:12px}
.glossario dt{font-weight:600;font-size:var(--t-denso)}
.glossario dd{margin:2px 0 0;color:var(--ink-3);font-size:var(--t-denso);line-height:1.55}
/* ---------- avisos ---------- */
.aviso{padding:16px 20px;border-radius:var(--r-sm);font-size:var(--t-denso);line-height:1.55;
  background:rgba(var(--papel-rgb),.72);border:1px solid rgba(var(--papel-rgb),.95);
  border-left:3px solid var(--ink-4);margin-bottom:18px;color:var(--ink-2)}
.aviso.erro{border-left-color:var(--vermelho);background:rgba(253,231,235,.75);color:#8A1B2E}
.aviso.ok{border-left-color:var(--verde-forte);background:rgba(227,246,218,.6);color:#2C6B18}
.vazio{text-align:center;padding:52px 24px;color:var(--ink-3)}
.vazio h2{margin-bottom:10px;color:var(--ink)}
/* O caminho do estado vazio (25/09): a frase diz o que falta, o botão leva
   para onde se resolve. Um por linha no celular. */
.vazio-caminho{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0 0}
/* ---------- entrar ---------- */
body.entrar{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:26px 0;gap:8px}
body.entrar .rodape{padding:26px 0 0;margin:0}
.caixa-entrar{width:min(430px,calc(100vw - 36px));padding:38px 34px 32px;text-align:center}
.caixa-entrar .marca{width:124px;height:auto;margin:0 auto 20px}
.caixa-entrar h1{font-size:1.6rem;margin-bottom:6px}
.caixa-entrar .sub{margin-bottom:24px}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:15px;text-align:left}
.campo label{font-size:var(--t-denso);font-weight:500;color:var(--ink-2)}
.campo input{width:100%;padding:13px 14px;font-size:var(--t-corpo);border-radius:14px}
.caixa-entrar .btn{width:100%;margin-top:8px;padding:14px}
.fino{font-size:var(--t-nota);color:var(--ink-4);line-height:1.5;margin-top:16px}
/* ---------- rodape ---------- */
.rodape{padding:44px 0 40px;margin-top:16px;text-align:center;color:var(--ink-3);font-size:var(--t-denso)}
.rodape p{margin-bottom:6px}
.rodape a{color:var(--ink-2)}
.rodape .fino{color:var(--ink-4)}
/* Dois campos lado a lado enquanto couberem. O auto-fit olha para a
   largura do cartão, não a da janela: dentro de uma coluna estreita do
   admin-grid eles empilham sozinhos, coisa que um @media na viewport não
   fazia — e por isso o rótulo quebrava e o campo virava um risco. */
.linha-form{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-denso)}
@media print{
  body{background:var(--papel)}
  .nav,.filtro,.rodape,.btn{display:none!important}
  .glass{box-shadow:none;border:1px solid #ddd;background:var(--papel)}
  /* O QUE NÃO VAI PARA O PAPEL. Botão de excluir, botão de baixar e a
     barra de administração são coisas de tela: numa folha entregue ao
     contador ou guardada na pasta, viram ruído. */
  .nao-imprime,.barra-adm,.faixa-recado,.sino{display:none!important}
  /* Tabela cortada ao meio na virada da página é o defeito clássico de
     imprimir tela — e este relatório existe para ser guardado. */
  table{page-break-inside:auto}
  tr{page-break-inside:avoid;page-break-after:auto}
  thead{display:table-header-group}
  .rolagem{overflow:visible}
  .bloco{page-break-inside:avoid}
  a[href]{text-decoration:none;color:#000}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* ---------- lista de caixas de selecao ---------- */
.caixa-lista{
  display:flex;flex-direction:column;gap:2px;max-height:290px;overflow:auto;
  padding:10px 12px;border-radius:14px;
  background:rgba(var(--papel-rgb),.6);border:1px solid rgba(var(--ink-rgb),.1);
}
.caixa-lista label{
  display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:9px;
  font-size:var(--t-denso);color:var(--ink-2);cursor:pointer;
}
.caixa-lista label:hover{background:rgba(var(--ink-rgb),.04);color:var(--ink)}
/* display:flex acima ganha do [hidden] do HTML; sem esta linha o filtro
   da busca não esconde nada. */
.caixa-lista label[hidden]{display:none}
.busca-vazia{margin:8px 6px;font-size:var(--t-denso);color:var(--ink-4)}
/* Busca em cima de uma caixa-lista — ver busca_de_lista() no layout.php. */
.busca-lista{
  position:relative;display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.busca-lista svg{
  position:absolute;left:12px;width:16px;height:16px;pointer-events:none;
  fill:none;stroke:var(--ink-4);stroke-width:2;stroke-linecap:round;
}
.busca-lista input[type=search]{
  flex:1;min-width:0;min-height:44px;padding:9px 12px 9px 36px;
  border-radius:12px;border:1px solid rgba(var(--ink-rgb),.12);
  background:rgba(var(--papel-rgb),.7);font:inherit;font-size:var(--t-denso);color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.busca-lista input[type=search]:focus{
  outline:none;border-color:var(--laranja);background:var(--papel);
  box-shadow:0 0 0 3px rgba(255,145,77,.16);
}
.busca-lista input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.busca-conta{
  font-size:var(--t-nota);color:var(--ink-4);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.busca-conta:empty{display:none}
.campo label input[type=checkbox]{width:auto;margin-right:8px}
.campo > label:has(input[type=checkbox]){display:flex;align-items:center;font-weight:400}
/* =========================================================
   Catalogo de anuncios — prateleiras horizontais.
   O cliente reconhece a peca pela imagem antes de ler o nome,
   entao a imagem manda e o texto vem depois.
   ========================================================= */
.prateleira{margin:0 0 34px}
.prateleira-cabeca{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:0 2px 14px;
}
.prateleira-cabeca h2{font-size:1.16rem;letter-spacing:-.026em}
.prateleira-conta{font-size:var(--t-denso);color:var(--ink-4);white-space:nowrap}
/* Campanha com 36 anúncios não cabe numa linha, e rolagem lateral esconde
   peça — o cliente não sabe que existe o que ficou fora da tela. Então a
   fileira quebra para baixo e mostra tudo de uma vez. */
.fileira{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  gap:22px 16px;padding:4px 2px 12px;
}
.cartao-anuncio{
  text-decoration:none;color:inherit;
  transition:transform .18s cubic-bezier(.22,.61,.36,1);
}
.cartao-anuncio:hover{transform:translateY(-4px)}
.cartao-anuncio:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:20px}
.poster{
  position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  background:linear-gradient(155deg,#F1F3F7,#E4E8F0);
  border:1px solid var(--glass-edge);
  box-shadow:0 8px 24px rgba(var(--sombra-rgb),.10);
  display:flex;align-items:center;justify-content:center;
}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.cartao-anuncio:hover .poster{box-shadow:0 14px 34px rgba(var(--sombra-rgb),.18)}
/* Peca sem imagem: o texto vira o poster, com os tons da marca. */
.poster-texto{background:linear-gradient(155deg,rgba(255,145,77,.22),rgba(126,217,87,.20))}
.poster-frase{
  padding:22px 18px;font-family:var(--display);font-weight:700;font-size:var(--t-corpo);
  line-height:1.24;letter-spacing:-.026em;color:var(--ink);text-align:center;
}
/* Anuncio de pesquisa do Google, com a cara que ele tem la. */
.busca-mock{
  width:100%;height:100%;background:var(--papel);padding:18px 15px;
  display:flex;flex-direction:column;gap:5px;justify-content:center;text-align:left;
}
.busca-selo{
  align-self:flex-start;font-size:var(--t-legenda);font-weight:700;letter-spacing:.04em;
  border:1px solid rgba(var(--ink-rgb),.22);border-radius:4px;padding:1px 5px;color:var(--ink-2);
}
.busca-url{font-size:var(--t-legenda);color:#3A7D2C;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busca-titulo{
  font-size:var(--t-denso);line-height:1.24;color:#1A4FBF;font-weight:500;letter-spacing:-.014em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.busca-corpo{
  font-size:var(--t-legenda);line-height:1.4;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.poster-pe{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 11px;
  background:linear-gradient(to top,rgba(8,9,16,.86),rgba(8,9,16,.5) 45%,transparent);
}
.poster-nome{
  color:#fff;font-size:var(--t-nota);font-weight:600;line-height:1.3;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 5px rgba(0,0,0,.45);
}
.selo{
  position:absolute;top:10px;left:10px;z-index:2;
  padding:3px 9px;border-radius:999px;font-size:var(--t-rotulo);font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;
  background:rgba(var(--papel-rgb),.94);color:var(--ink-2);
  box-shadow:0 2px 8px rgba(var(--sombra-rgb),.18);
}
/* Um selo por veiculação. Só o que está no ar ganha fundo cheio: de longe,
   a prateleira mostra o que está rodando antes de qualquer leitura. */
.selo-ativo{background:var(--chave-on);color:#fff}
.selo-agendado{background:rgba(var(--papel-rgb),.94);color:var(--azul)}
.selo-analise{background:rgba(var(--papel-rgb),.94);color:var(--laranja-forte)}
.selo-concluido{background:rgba(var(--papel-rgb),.94);color:var(--ink-2)}
.selo-desativado{background:rgba(var(--papel-rgb),.94);color:var(--laranja-forte)}
.selo-rejeitado{background:rgba(var(--papel-rgb),.94);color:var(--vermelho)}
.selo-arquivado{background:rgba(var(--papel-rgb),.9);color:var(--ink-4)}
/* Com a pílula no pé, o nome da peça não passa por baixo dela. */
.poster .poster-pe{padding-right:56px}
/* A PÍLULA DO TIPO DESCEU PARA O PÉ DO CARTÃO.
   Os dois selos disputavam o topo: em duas colunas a 390px o cartão tem
   158px e "com o cliente" passava por baixo do "post". Limitar a largura
   só trocou a sobreposição por reticência — e com "carrossel" ou
   "Google" à direita nem isso bastava. Em cantos opostos na vertical não
   há largura que os faça brigar (09/09). */
.selo-plat{position:absolute;top:auto;bottom:10px;right:10px;z-index:2;
  background:rgba(var(--papel-rgb),.94)!important;box-shadow:0 2px 8px rgba(var(--sombra-rgb),.14)}
.selo-video{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--papel-rgb),.9);color:var(--ink);box-shadow:0 4px 16px rgba(var(--sombra-rgb),.3);
  padding-left:3px;
}
.cartao-dados{display:flex;flex-direction:column;gap:1px;padding:11px 3px 0}
.cartao-gasto{font-family:var(--display);font-weight:700;font-size:var(--t-corpo);letter-spacing:-.026em}
.cartao-metrica{font-size:var(--t-nota);color:var(--ink-3);line-height:1.35}
/* Os pedidos no pé do cartão. Discretos de propósito: quem abre a
   prateleira veio ver os anúncios, não pedir. Mas quando a vontade de
   pedir aparece, ela aparece olhando para a peça — e é aqui. */
.cartao-pede{display:flex;flex-wrap:wrap;gap:2px 12px;padding:6px 3px 0}
/* --ink-3 e não --ink-4: em --ink-4 o contraste dava 3,08:1 sobre o
   fundo claro, abaixo do mínimo legível para texto pequeno. (Na v211 o
   --ink-4 escureceu e passaria; fica em --ink-3 porque é link.) */
.cartao-pede a{
  font-size:var(--t-legenda);color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid transparent;padding:3px 0;
}
.cartao-pede a:hover{color:var(--ink-2);border-bottom-color:currentColor}
/* O "⋯" DO CARTÃO (25/09): botão redondo de 36px (alvo de 44 com a
   folga) e um menu que abre para cima, dentro do cartão. */
.cartao-pede{justify-content:flex-end;padding:2px 0 0;position:relative}
/* O menu se ancora na LINHA do cartão, não no botão: num cartão de 160px
   (duas colunas no celular) o menu de 190px saía pela esquerda da tela. */
.cartao-menu{position:static}
.cartao-menu > summary{list-style:none;cursor:pointer;width:36px;height:36px;margin:4px 0;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--ink-rgb),.06);color:var(--ink-2);font-size:1.1rem;font-weight:700;line-height:1;letter-spacing:.02em}
.cartao-menu > summary::-webkit-details-marker{display:none}
.cartao-menu > summary:hover{background:rgba(var(--ink-rgb),.1)}
.cartao-menu[open] > summary{background:var(--ink);color:var(--sobre-ink)}
.cartao-menu-lista{position:absolute;right:0;bottom:calc(100% + 2px);z-index:30;min-width:min(190px,100%);max-width:100%;padding:6px;border-radius:14px;
  background:var(--papel);box-shadow:0 14px 40px rgba(var(--sombra-rgb),.18);border:1px solid rgba(var(--ink-rgb),.06)}
.cartao-pede .cartao-menu-lista a{display:flex;align-items:center;min-height:44px;padding:0 12px;margin:0;border-radius:10px;
  font-size:var(--t-denso);color:var(--ink);border-bottom:0}
.cartao-pede .cartao-menu-lista a:hover{background:rgba(var(--ink-rgb),.05)}
.pill-n{
  margin-left:7px;padding:1px 7px;border-radius:999px;font-size:var(--t-legenda);font-weight:600;
  background:rgba(var(--ink-rgb),.08);color:var(--ink-3);
}
.pill.on .pill-n{background:rgba(var(--papel-rgb),.22);color:#fff}
@media (max-width:560px){
  .fileira{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:18px 12px}
  .prateleira-conta{display:none}
}
/* ---------- ficha do anuncio ---------- */
.ficha{display:grid;gap:22px;grid-template-columns:340px 1fr;align-items:start}
@media (max-width:820px){
  .ficha{grid-template-columns:1fr}
}
/* Moldura de celular: o cliente ve a peca como o publico dele ve. */
.previa{padding:22px;display:flex;flex-direction:column;align-items:center;gap:16px}
.telefone{
  width:100%;max-width:290px;border-radius:26px;overflow:hidden;background:var(--papel);
  border:1px solid rgba(var(--ink-rgb),.1);box-shadow:0 12px 38px rgba(var(--sombra-rgb),.14);
}
.copia{display:flex;flex-direction:column;gap:14px}
.copia-item{padding:14px 16px;border-radius:14px;background:rgba(var(--papel-rgb),.6);
  border:1px solid rgba(var(--ink-rgb),.08)}
.copia-rot{font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.copia-txt{font-size:var(--t-denso);line-height:1.55;color:var(--ink-2);white-space:pre-line;word-break:break-word}
/* ---------- tres colunas (demografia) ---------- */
.tres{display:grid;gap:26px 30px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tres h3{font-size:var(--t-denso);color:var(--ink-2)}
/* ---------- grade de publicacoes ---------- */
.grade-posts{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
}
.post{
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .18s cubic-bezier(.22,.61,.36,1);
}
.post:hover{transform:translateY(-4px)}
.post-arte{
  position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,145,77,.2),rgba(126,217,87,.18));
  border:1px solid var(--glass-edge);box-shadow:0 6px 20px rgba(var(--sombra-rgb),.09);
  display:flex;align-items:center;justify-content:center;
}
.post-arte img{width:100%;height:100%;object-fit:cover;display:block}
.post:hover .post-arte{box-shadow:0 12px 30px rgba(var(--sombra-rgb),.16)}
.post-sem-arte{
  padding:16px;font-size:var(--t-nota);line-height:1.4;color:var(--ink-2);text-align:center;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.selo-tipo{
  top:9px;left:9px;background:rgba(var(--papel-rgb),.94);color:var(--ink-2);
  font-size:var(--t-legenda);padding:3px 8px;
}
.post-dados{display:flex;flex-direction:column;gap:3px;padding:11px 3px 0}
.post-data{font-size:var(--t-legenda);color:var(--ink-4);letter-spacing:.02em}
.post-legenda{
  font-size:var(--t-nota);line-height:1.36;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-numeros{font-size:var(--t-nota);color:var(--ink-2);margin-top:3px;line-height:1.4}
.post-numeros b{font-weight:700;color:var(--ink)}
.post-numeros.fraco{color:var(--ink-4);font-size:var(--t-nota);margin-top:0}
@media (max-width:520px){
  /* 128, e nao 140. Medido em 375px: sobram 277px uteis dentro do bloco,
     e duas colunas de 140 com 14 de espaco pedem 294 — faltavam 17px, e
     a grade caia para UMA coluna. Dez publicacoes viravam quatro mil
     pixels de rolagem no celular. Com 128 e espaco de 12, cabem duas. */
  .grade-posts{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
}
/* ---------- checagens do instalador ---------- */
.checagens{display:flex;flex-direction:column;gap:8px;margin:0 0 22px;text-align:left}
.checagem{
  display:flex;align-items:flex-start;gap:10px;padding:9px 13px;border-radius:12px;
  font-size:var(--t-denso);background:rgba(var(--papel-rgb),.6);border:1px solid rgba(var(--ink-rgb),.07);
}
.checagem span{
  flex:none;width:19px;height:19px;border-radius:50%;font-size:var(--t-legenda);font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.checagem.ok span{background:var(--tinta-verde);color:var(--verde-forte)}
.checagem.falha{background:rgba(253,231,235,.6);border-color:rgba(198,43,69,.2)}
.checagem.falha span{background:var(--tinta-vermelha);color:var(--vermelho)}
/* ---------- botao de play sobre a capa ---------- */
.poster-area{position:relative}
.poster-link{display:block;text-decoration:none;color:inherit;border-radius:18px}
.poster-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.cartao-dados{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:1px}
.botao-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;padding:0 0 0 3px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--papel-rgb),.94);color:var(--ink);
  box-shadow:0 6px 20px rgba(var(--sombra-rgb),.34);
  transition:transform .16s,background .16s;
}
.botao-play:hover{transform:translate(-50%,-50%) scale(1.09);background:var(--papel)}
.botao-play:active{transform:translate(-50%,-50%) scale(.96)}
.botao-play:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.cartao-anuncio:hover .botao-play{background:var(--papel)}
/* ---------- player ---------- */
.player{
  border:0;padding:0;background:transparent;max-width:none;max-height:none;
  width:100%;height:100%;
}
.player::backdrop{background:rgba(8,9,16,.82);backdrop-filter:blur(6px)}
.player-caixa{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,calc(100vw - 28px));
  display:flex;flex-direction:column;gap:12px;
}
.player-topo{display:flex;align-items:center;gap:12px}
.player-nome{
  flex:1;min-width:0;color:#fff;font-family:var(--display);font-weight:600;
  font-size:var(--t-denso);letter-spacing:-.018em;line-height:1.3;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.player-x{
  flex:none;width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(var(--papel-rgb),.16);color:#fff;font-size:var(--t-denso);line-height:1;
  transition:background .16s;
}
.player-x:hover{background:rgba(var(--papel-rgb),.3)}
.player-quadro{
  position:relative;width:100%;height:min(78vh,760px);border-radius:20px;
  overflow:hidden;background:var(--papel);box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.player-quadro iframe{width:100%;height:100%;border:0;display:block}
.player-carregando{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  margin:0;color:var(--ink-3);font-size:var(--t-denso);text-align:center;padding:24px;
}
/* display:flex numa classe vence o [hidden] padrão do navegador; sem esta
   linha o "carregando" fica atrás da prévia depois de ela abrir. */
.player-carregando[hidden]{display:none}
/* Anuncio de imagem abre com uma lupa; video, com o play. */
.botao-play.botao-ver{width:44px;height:44px;padding:0}
.player-dica{
  color:rgba(255,255,255,.6);font-size:var(--t-nota);text-align:center;line-height:1.45;
}
@media (prefers-reduced-motion:no-preference){
  .player[open] .player-caixa{animation:sobe .24s cubic-bezier(.22,.61,.36,1)}
}
@keyframes sobe{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
/* video dentro da moldura do telefone */
.telefone video.telefone-img{width:100%;display:block;background:#000;max-height:62vh}
/* ---------- frescor dos numeros ---------- */
.frescor{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 18px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline);
}
.frescor form{flex:none}
/* ---------- previa dentro da ficha do anuncio ---------- */
.quadro-previa{
  position:relative;width:100%;max-width:330px;height:min(70vh,700px);
  border-radius:20px;overflow:hidden;background:var(--papel);
  border:1px solid rgba(var(--ink-rgb),.1);box-shadow:0 12px 38px rgba(var(--sombra-rgb),.14);
}
.quadro-previa iframe{width:100%;height:100%;border:0;display:block}
/* ---------- seletor de posicionamento da previa ---------- */
.player-formatos{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.player-formatos .formato{
  border:none;cursor:pointer;padding:6px 12px;border-radius:999px;
  font-family:var(--body);font-size:var(--t-nota);font-weight:500;
  background:rgba(var(--papel-rgb),.16);color:rgba(255,255,255,.82);
  transition:background .16s,color .16s;
}
.player-formatos .formato:hover{background:rgba(var(--papel-rgb),.3);color:#fff}
.player-formatos .formato.on{background:var(--papel);color:var(--ink);font-weight:600}
/* na ficha do anúncio o fundo é claro, então o seletor inverte */
.player-formatos.clara .formato{background:rgba(var(--ink-rgb),.06);color:var(--ink-3)}
.player-formatos.clara .formato:hover{background:rgba(var(--ink-rgb),.12);color:var(--ink)}
.player-formatos.clara .formato.on{background:var(--ink);color:var(--sobre-ink)}
/* o filtro de conta acompanha o seletor de empresa, um pouco mais discreto */
.trocador.conta summary{background:rgba(var(--ink-rgb),.03);color:var(--ink-3);font-weight:400}
.trocador.conta summary:hover{background:rgba(var(--ink-rgb),.08)}
.trocador.conta[open] summary{background:var(--ink);color:var(--sobre-ink)}
@media (max-width:1000px){
  .trocador.conta summary{max-width:130px}
}
/* selo de anuncio com varios posts: fica abaixo do de situacao */
.selo-multi{top:38px;left:10px;background:rgba(var(--ink-rgb),.82);color:#fff;font-size:var(--t-legenda)}
/* =====================================================================
   Empresa suspensa — o cliente entra, vê que os números dele estão ali,
   e sabe o que fazer para voltar a lê-los.

   O borrão é sobre o conteúdo, nunca sobre a navegação: o topo continua
   nítido e clicável para quem tem mais de uma empresa poder trocar para
   outra que esteja ativa.
   ===================================================================== */
body.suspenso main,
body.suspenso .rodape{
  filter:blur(7px);
  -webkit-user-select:none;user-select:none;pointer-events:none;
}
body.suspenso main{opacity:.85}
.cortina{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(252,252,253,.55);
  backdrop-filter:saturate(140%) blur(2px);
}
.cortina-caixa{
  max-width:520px;width:100%;text-align:center;
  padding:34px 30px;border-radius:24px;
  box-shadow:0 24px 60px rgba(var(--sombra-rgb),.18);
}
.cortina-caixa img{margin-bottom:14px}
.cortina-caixa h2{font-size:1.35rem;margin:0 0 12px}
.cortina-caixa p{color:var(--ink-3);margin:0 0 12px;line-height:1.55}
.cortina-caixa .acoes{justify-content:center;margin:22px 0 6px}
.cortina-caixa .fino{margin:0}
@media (max-width:520px){
  .cortina{align-items:flex-start;padding-top:80px}
  .cortina-caixa{padding:26px 20px}
}
/* A chave de serviço da empresa, na lista da administração. Verde é
   cliente ativo; cinza é contrato parado. */
.chave{
  appearance:none;border:0;cursor:pointer;padding:0;
  width:44px;height:24px;border-radius:999px;
  background:var(--trilha);transition:background .18s ease;
  display:inline-flex;align-items:center;
  /* O desenho continua 44x24; o ALVO passa a ter 44px de altura pelo::after. Numa tabela de 34 linhas, 24px de altura é errar de linha e
     suspender o cliente errado. Mesmo truque já usado no .ajuda. */
  position:relative;
}
.chave::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.chave.on{background:var(--chave-on)}
.chave-bola{
  width:18px;height:18px;border-radius:50%;background:#fff;
  margin-left:3px;transition:transform .18s ease;
  box-shadow:0 1px 3px rgba(var(--sombra-rgb),.35);
}
.chave.on .chave-bola{transform:translateX(20px)}
.chave:focus-visible{outline:2px solid var(--laranja-forte);outline-offset:2px}
/* Empresa com serviço pausado no seletor: vem depois de uma linha, com um
   ponto discreto. Continua clicável — o cliente entra e a cortina explica. */
.trocador-corte{
  margin-top:6px;padding-top:12px;
  border-top:1px solid var(--hairline);
}
.trocador-item.pausada{color:var(--ink-4)}
.trocador-item.pausada::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--trilha);margin-right:8px;vertical-align:middle;
}
/* Faixa que separa Meta de Google no catálogo, quando a empresa anuncia
   nos dois. Anúncio de busca é texto e anúncio de feed é imagem — lado a
   lado na mesma prateleira, um parece defeito do outro. */
.faixa-plataforma{
  margin:34px 0 14px;
  padding-top:20px;
  border-top:1px solid var(--hairline);
}
.faixa-plataforma:first-of-type{margin-top:6px;padding-top:0;border-top:none}
.faixa-plataforma h2{margin:0 0 4px;font-size:var(--t-corpo)}
.faixa-plataforma .tag{font-size:var(--t-nota);padding:4px 12px}
.faixa-plataforma .sub{margin:0}
.faixa-plataforma .fino{margin:0;display:inline}
/* ---------- busca e paginação de empresas (admin) ---------- */
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Fica depois da tabela: primeiro o admin lê as empresas, depois decide
   se vira a folha. */
.paginacao{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:16px;
}
.paginacao .fino{margin:0}
.paginacao-passos{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pag-n{
  min-width:30px;padding:5px 8px;border-radius:9px;text-align:center;
  font-size:var(--t-nota);font-weight:600;text-decoration:none;color:var(--ink-3);
  border:1px solid transparent;
}
a.pag-n:hover{background:rgba(var(--ink-rgb),.06);color:var(--ink)}
.pag-n.atual{background:var(--ink);color:var(--sobre-ink)}
/* ---------- seletor de contas ---------- */
/* Mora dentro do filtro, acima do período: é a primeira pergunta ("de qual
   conta?") antes da segunda ("de quando?"). */
.seletor-contas{border-bottom:1px solid var(--hairline);padding-bottom:14px}
.seletor-cabeca{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:11px;
}
.seletor-rotulo{font-size:var(--t-nota);color:var(--ink-3)}
.seletor-rotulo b{color:var(--ink);font-weight:600}
.btn-verde{
  font-size:var(--t-nota);font-weight:600;text-decoration:none;white-space:nowrap;
  border:1.5px solid #8FD46A;background:var(--tinta-verde-clara);color:var(--verde-forte);
  border-radius:999px;padding:6px 14px;transition:background .16s,border-color .16s;
}
.btn-verde:hover{background:var(--tinta-verde);border-color:var(--verde)}
/* Colunas de largura igual: é o que faz a plataforma, o nome e o valor
   caírem sempre na mesma altura de um botão para o outro. */
.seletor-grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px;
}
.conta-botao{
  display:flex;flex-direction:column;gap:5px;min-width:0;
  padding:12px 14px;border-radius:var(--r-sm);text-decoration:none;
  border:1.5px solid rgba(var(--ink-rgb),.11);background:rgba(var(--papel-rgb),.66);
  transition:background .16s,border-color .16s,color .16s;
}
.conta-botao:hover{background:rgba(var(--papel-rgb),.95);border-color:rgba(var(--ink-rgb),.2)}
.conta-botao:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.conta-plat{
  align-self:flex-start;font-size:var(--t-rotulo);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 8px;border-radius:6px;
  background:rgba(var(--ink-rgb),.06);color:var(--ink-4);
}
.conta-nome{
  font-size:var(--t-denso);color:var(--ink-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* --ink-4, e não #A2A8B7: aquele cinza dava 2,38:1 de contraste, abaixo
   do mínimo legível. É o valor gasto de uma conta desligada — apagado de
   propósito, mas ainda tem de dar para ler. */
.conta-valor{font-size:var(--t-nota);color:var(--ink-4);font-variant-numeric:tabular-nums}
/* Acesa: o mesmo verde do botão "Ligar as N" — borda, fundo e texto. */
.conta-botao.on{background:var(--tinta-verde-clara);border-color:#8FD46A}
.conta-botao.on:hover{background:var(--tinta-verde);border-color:var(--verde)}
.conta-botao.on .conta-plat{background:rgba(126,217,87,.20);color:var(--verde-forte)}
.conta-botao.on .conta-nome{color:var(--verde-forte);font-weight:600}
.conta-botao.on .conta-valor{color:var(--verde-forte);font-weight:500}
.conta-botao.travada{cursor:default}
.conta-botao.travada:hover{background:var(--tinta-verde-clara);border-color:#8FD46A}
@media (max-width:760px){
  /* Na tela estreita a linha única não cabe: as datas descem inteiras, e
     não espremidas num canto. */
  /* Os dois campos de data não cabem inteiros em 375px: perdem a largura
     fixa e dividem a linha, em vez de vazar pela direita. */
  .filtro-datas{gap:8px 10px}
  .filtro-datas input[type=date]{flex:1 1 128px;min-width:0;width:auto}
  .seletor-grade{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
  .conta-botao{padding:11px 12px}
}
/* A tabela de contas NUNCA é tabela — é uma lista de fichas, em qualquer
   largura de tela.

   O erro que me custou três tentativas: eu prendi a correção a
   @media (max-width:900px), e media query mede a JANELA. Só que esta
   tabela vive dentro de um cartão do admin-grid, que tem
   minmax(290px, 1fr) — numa janela de 2000px o cartão continua com uns
   470px, a media query não dispara, e a tabela quebra do mesmo jeito.
   O tamanho que importa é o do cartão, não o do monitor.

   Como o cartão é sempre estreito, a resposta certa é não depender de
   largura nenhuma: ficha sempre. Três colunas, sendo uma com dois
   botões de largura fixa, nunca vão caber ali. */
.rolagem:has(table.contas){overflow:visible;margin:0;padding:0}
table.dados.contas,
table.dados.contas tbody,
table.dados.contas tr,
table.dados.contas td{display:block;width:auto;min-width:0}
table.dados.contas thead{display:none}
table.dados.contas tr{
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  background:rgba(var(--papel-rgb),.55);padding:12px 14px;margin-bottom:10px;
}
table.dados.contas td{border:0;padding:3px 0;text-align:left}
table.dados.contas td::before{
  content:attr(data-rotulo);color:var(--ink-3);font-size:var(--t-nota);margin-right:8px;
}
table.dados.contas td[data-rotulo=""]::before,
table.dados.contas td:not([data-rotulo])::before{content:none}
/* ---------- caixa de confirmação ---------- */
/* O confirm() do navegador escreve "gerandomovimento.com.br diz" em cima
   da mensagem e usa os botões do sistema — nada indica qual ação é a
   perigosa. Esta usa o mesmo vidro, a mesma fonte e os mesmos botões do
   resto do painel. */
dialog.modal-gm{
  border:none;padding:0;background:transparent;color:var(--ink);
  max-width:min(460px,calc(100vw - 32px));
}
dialog.modal-gm::backdrop{
  background:rgba(var(--ink-rgb),.52);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.modal-gm-corpo{
  background:var(--glass-strong);border:1px solid var(--glass-edge);
  border-radius:var(--r);box-shadow:0 24px 70px rgba(var(--sombra-rgb),.24);
  padding:26px 26px 22px;
}
.modal-gm-titulo{
  font-family:var(--display);font-size:1.16rem;font-weight:700;
  letter-spacing:-.026em;margin:0 0 10px;line-height:1.3;
}
.modal-gm-texto{margin:0;color:var(--ink-2);font-size:var(--t-denso);line-height:1.6}
.modal-gm-acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.modal-gm-acoes .btn{flex:0 0 auto}
@media (max-width:480px){
  /* No celular os botões ocupam a linha inteira: alvo grande, sem erro
     de dedo entre cancelar e confirmar. */
  .modal-gm-acoes{flex-direction:column-reverse}
  .modal-gm-acoes .btn{width:100%;justify-content:center}
}
/* =========================================================
   Celular — o painel do cliente é lido no telefone.

   Medido em 375px: a barra do topo pedia 353px numa faixa de
   331 e cortava o "Sair"; a lista de empresas abria em x=-107,
   com os nomes fora da tela; o nome da campanha ficava com 60px
   para um texto de 214; e duas tabelas de 800px viviam dentro de
   uma janelinha de 285, só na rolagem lateral.
   ========================================================= */
/* =========================================================
   Celular: alvo de toque e campo que nao da zoom.

   Medido no aparelho de 375px, dentro da aba de redes sociais:
   62 alvos abaixo dos 44px que o dedo pede — abas de 38, atalhos de
   periodo de 39, itens do trocador de 42, o botao "Ver" de 33 — e os
   campos de data em 15px, que fazem o iPhone dar zoom na pagina inteira
   assim que o cliente toca neles, sem desfazer depois.
   ========================================================= */
@media (max-width:760px){
  .pill,.nav-aba,.trocador-item,.nav-cta,.btn,.filtro-atalhos a{min-height:44px}
  /* Links que sao controle, e nao texto corrido: "Administracao", a
     marca, os do rodape. Link dentro de frase fica como esta — esticar
     um "Resultados" no meio de um paragrafo abriria buraco na leitura. */
  .nav-links > a,.brand,.rodape-links a,.rodape a{min-height:44px;display:inline-flex;align-items:center}
  .pill,.nav-aba,.filtro-atalhos a{display:inline-flex;align-items:center}
  .trocador summary{min-height:44px}
  .conta-botao{min-height:48px}
  /* 16px e' o limite abaixo do qual o iOS decide dar zoom no campo.

     !important porque esta e' a guarda de ultima linha e estava PERDENDO:
     e' seletor de elemento (0,0,1), e vinte e uma regras posteriores com
     classe (.peca-form input, .campo textarea, .tarefa-marcar input...)
     passavam por cima com .93rem. Quarenta e oito dos oitenta campos do
     painel ficavam abaixo de 16px no celular, e o iPhone dava zoom em
     cada toque. Regra que existe para nao ser vencida precisa dizer
     isso. */
  input[type=date],input[type=text],input[type=email],input[type=password],
  input[type=number],input[type=search],input[type=url],input[type=tel],
  select,textarea{font-size:var(--t-corpo)!important;min-height:44px}
  /* Os numeros da paginacao ficavam com 27px de altura ao lado dos botoes
     "anterior" e "proxima", que ja ganham 44px da regra acima — alvos de
     dois tamanhos na mesma fileira. */
  .pag-n{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:560px){
  /* TUDO NUMA FILEIRA SÓ: marca, trocador de empresa e "Sair".

     O trocador já teve a linha inteira para si, e o preço apareceu no
     iPhone: a barra ficava com 192px de altura — marca numa fileira,
     trocador noutra, "Sair" numa terceira e as abas na quarta. Como ela é
     grudada no topo, esse quarto de tela ficava ali o tempo todo, por
     cima da leitura. Numa fileira, sobram uns 230px para o nome da
     empresa, que é mais do que qualquer um deles precisa.

     O "Administração" saiu daqui no celular (ver a regra dos 640px): é o
     único que está repetido logo abaixo, na faixa cinza. */
  .nav-in{gap:10px;padding:10px 12px;border-radius:24px}
  .nav-links{flex:1 1 auto;width:auto;min-width:0;margin-left:auto;gap:10px;
    flex-wrap:nowrap;justify-content:flex-end;align-items:center}
  .trocador{flex:1 1 auto;order:0;min-width:0}
  .trocador summary{max-width:100%;width:100%;justify-content:space-between;padding:9px 12px}
  .trocador-nome{min-width:0}
  /* A lista desce pela direita do trocador. Larga o bastante para o nome
     inteiro, e nunca mais larga do que a tela. */
  .trocador-lista{left:auto;right:0;min-width:min(280px,calc(100vw - 28px));
    max-width:calc(100vw - 28px)}
  .nav-quem{min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* Nome da campanha em cima, número embaixo. Lado a lado, o valor
     comia a linha e sobravam 60px para o nome — que é justamente o
     que o cliente precisa ler. */
  .barra-linha{grid-template-columns:1fr;gap:2px}
  .barra-nome{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
  .barra-val{justify-self:start}
  /* Tabelas viram fichas, uma embaixo da outra. O cabeçalho some e
     cada valor carrega o próprio rótulo, então dá para ler tudo sem
     arrastar a tela para o lado. */
  .rolagem:has(table.empilha){overflow:visible;margin:0;padding:0}
  table.dados.empilha,
  table.dados.empilha tbody,
  table.dados.empilha tfoot,
  table.dados.empilha tr,
  table.dados.empilha td{display:block;width:auto;min-width:0}
  table.dados.empilha thead{display:none}
  table.dados.empilha tr{
    border:1px solid var(--hairline);border-radius:var(--r-sm);
    background:rgba(var(--papel-rgb),.55);padding:12px 14px;margin-bottom:10px;
  }
  table.dados.empilha td{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:5px 0;border:none;text-align:right;white-space:normal;
  }
  table.dados.empilha td::before{
    content:attr(data-rotulo);flex:0 0 auto;text-align:left;
    color:var(--ink-3);font-size:var(--t-nota);font-weight:400;
  }
  /* A primeira célula é o nome da ficha: linha inteira, em destaque. */
  table.dados.empilha td:first-child{
    display:block;text-align:left;font-weight:600;
    padding:0 0 9px;margin-bottom:5px;border-bottom:1px solid var(--hairline);
  }
  table.dados.empilha td:first-child::before{display:none}
  table.dados.empilha td:empty{display:none}
  table.dados.empilha tfoot tr{background:rgba(var(--ink-rgb),.045);border-color:transparent}
}
/* ---------- de onde vieram, o que procuraram, para quem ---------- */
/* Os estados da Meta ficam abaixo das cidades do Google, separados por
   uma linha: são contagens diferentes e não se somam. */
.geo-estados{margin-top:22px;padding-top:16px;border-top:1px solid var(--hairline)}
.geo-fichas,.publico-fichas,.publico-linha{display:flex;flex-wrap:wrap;gap:8px}
.geo-ficha{
  font-size:var(--t-nota);color:var(--ink-3);background:rgba(var(--papel-rgb),.66);
  border:1px solid var(--glass-edge);border-radius:999px;padding:7px 14px;
}
.geo-ficha b{color:var(--ink);font-weight:600;margin-right:5px}
/* minmax(0,1fr), e não 1fr: a coluna de grade tem largura mínima
   automática, e a tabela lá dentro carrega min-width:640px — duas delas
   somavam 1.280 e punham a página inteira em rolagem lateral. */
.duas-listas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}
.duas-listas h3{font-size:var(--t-denso)}
@media (max-width:760px){
  .duas-listas{grid-template-columns:1fr;gap:28px}
}
/* Estas tabelas são estreitas de propósito: termo à esquerda, dois
   números à direita. O min-width das tabelas largas não vale aqui. */
/* O min-width:0 na tabela não basta: table.dados td:first-child carrega
   190px próprios, e duas tabelas dessas lado a lado se sobrepunham. */
table.dados.termos{min-width:0;width:100%}
table.dados.termos td:first-child,
table.dados.termos th:first-child{min-width:0}
table.dados.termos td:first-child{
  text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.4;
}
table.dados.termos th:first-child{text-align:left}
.publico-alvo{
  font-size:var(--t-denso);color:var(--ink-2);background:rgba(255,145,77,.10);
  border:1px solid rgba(255,145,77,.24);border-radius:var(--r-sm);padding:9px 15px;
}
.publico-alvo b{color:var(--ink);font-weight:600}
.publico-ficha{
  font-size:var(--t-nota);color:var(--ink-2);background:rgba(var(--ink-rgb),.05);
  border-radius:999px;padding:6px 13px;
}
/* A caixa do gráfico reserva altura antes do desenho chegar.

   Sem isto ela nasce com zero de altura e a página inteira dá um pulo
   quando o SVG aparece — o que, somado ao filtro que recarrega, fazia o
   cliente perder o lugar duas vezes no mesmo clique. */
.grafico-caixa{min-height:250px}
@media (max-width:560px){
  .grafico-caixa{min-height:210px}
}
/* Mapa de calor de dia da semana x faixa do dia. Grade simples de
   retângulos: o tom conta a história, o número confirma. */
.calor{display:grid;grid-template-columns:auto repeat(7,1fr);gap:5px;align-items:stretch}
.calor-topo{
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);
  text-align:center;padding-bottom:2px;
}
.calor-lado{
  font-size:var(--t-nota);color:var(--ink-3);display:flex;align-items:center;
  padding-right:10px;white-space:nowrap;
}
.calor-cel{
  border-radius:9px;min-height:46px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--ink-rgb),.04);font-size:var(--t-nota);color:var(--ink);
}
.calor-cel b{font-weight:700;font-variant-numeric:tabular-nums}
.calor-cel.fraca{color:var(--ink-4);background:rgba(var(--ink-rgb),.02)}
@media (max-width:560px){
  .calor{gap:3px}
  .calor-cel{min-height:38px;font-size:var(--t-legenda);border-radius:7px}
  .calor-topo{font-size:var(--t-legenda)}
  .calor-lado{font-size:var(--t-legenda);padding-right:6px}
}
/* A barra empilhada das interações — flex de spans com largura em %,
   sem uma linha de JavaScript. O min-width impede que uma fatia de 1%
   vire um fio invisível. */
.barra-pilha{
  display:flex;height:22px;border-radius:999px;overflow:hidden;
  background:rgba(var(--ink-rgb),.06);
}
.pilha-fatia{display:block;min-width:4px;transition:filter .16s}
.pilha-fatia:hover{filter:brightness(1.08)}
.pilha-legenda{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:var(--t-denso);color:var(--ink-2)}
.pilha-item{display:inline-flex;align-items:center;gap:7px}
.pilha-item i{width:10px;height:10px;border-radius:3px;flex:none}
.pilha-item b{color:var(--ink);font-weight:700}
.pilha-item .fino{font-size:var(--t-nota)}
@media (max-width:560px){
  .pilha-legenda{gap:7px 14px;font-size:var(--t-nota)}
}
/* Salvamento e compartilhamento no cartão da publicação.
   Compartilhar leva a marca para fora da audiência de quem já segue —
   por isso vem primeiro e mais forte que salvar. */
.post-selos{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.post-selo{
  font-size:var(--t-legenda);font-weight:600;letter-spacing:.01em;
  border-radius:6px;padding:2px 6px;
  background:rgba(var(--ink-rgb),.05);color:var(--ink-3);
}
.post-selo.forte{background:rgba(62,142,36,.12);color:var(--verde-forte)}
/* A faísca dentro do cartão: o desenho miúdo dos últimos 14 dias.
   Cor herdada do texto de apoio, para não competir com o número — quem
   manda no cartão é o valor, a faísca só diz o feitio. */
/* Faísca e selo colados no rodapé do cartão.

   Os cartões têm quantidades diferentes de linhas — uns têm frase de
   apoio, outros não; uns têm selo de variação, outros não têm período
   anterior para comparar. Fluindo de cima para baixo, cada faísca
   parava numa altura e a fileira ficava serrilhada. Com margin-top:auto
   a faísca é empurrada para o fim do cartão e todas se alinham, tenha o
   cartão duas linhas de texto ou quatro. */
.faisca-caixa{display:block;margin-top:auto;padding-top:10px;color:var(--verde-forte);opacity:.55;line-height:0}
/* Sem faísca, quem desce é o selo — para ele não subir e encostar no
   texto num cartão curto ao lado de um cartão alto. */
.kpi .faisca-caixa + .chip{margin-top:9px}
/* Sem :first-of-type. Ele conta SPAN, e antes do selo já vieram o rótulo,
   o valor e o apoio — então a regra nunca pegava, e numa fileira de quatro
   cartões o selo de quem não tem repartição por conta ficava uma linha
   acima dos vizinhos. Serrilhado é o defeito que mais se vê e o que menos
   se procura. */
.kpi > .chip:not(.faisca-caixa + .chip){margin-top:auto}
/* O que a Carteira manda para o rodapé do cartão. Era estilo em linha lá,
   e estilo em linha não deixa o celular inverter a regra. */
.kpi > .ao-rodape{margin-top:auto}
.faisca{display:block;overflow:visible}
@media (max-width:560px){
  .faisca-caixa{margin-top:8px}
}
/* Paginação de lista (cidades, termos). Mais discreta que a do admin:
   aqui ela é um detalhe da lista, não o assunto da tela. */
.paginacao-lista{margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline)}
.paginacao-lista .pag-n,
.paginacao-lista .btn{font-size:var(--t-nota);cursor:pointer}
.paginacao-lista button.pag-n{background:none;border:1px solid transparent;font-family:inherit}
.paginacao-lista button.pag-n:hover{background:rgba(var(--ink-rgb),.06);color:var(--ink)}
/* A reticência entre saltos de página: marca que existe caminho no meio
   sem virar mais um botão para o olho decidir. */
.pag-corte{color:var(--ink-2);opacity:.6;padding:0 2px;user-select:none}
@media (max-width:560px){
  .paginacao-lista{flex-direction:column;align-items:stretch;gap:10px}
  .paginacao-lista .paginacao-passos{justify-content:center}
}
/* Prova social no rodapé. Discreta de propósito: o cliente tem de ver
   que existe, e ao mesmo tempo nunca confundir com o número dele. Por
   isso o rótulo vem antes do valor, e a frase termina dizendo o que o
   número não é. */
.rodape-agencia{
  margin:0 auto 12px;max-width:640px;padding:13px 18px;
  border:1px dashed rgba(var(--ink-rgb),.16);border-radius:var(--r-sm);
  background:rgba(var(--ink-rgb),.028);
  font-size:var(--t-nota);color:var(--ink-3);line-height:1.55;
}
.rodape-agencia-rotulo{
  display:block;font-size:var(--t-rotulo);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px;
}
.rodape-agencia b{
  font-family:var(--display);font-size:1.12rem;font-weight:700;
  letter-spacing:-.026em;color:var(--ink-2);margin-right:5px;
  font-variant-numeric:tabular-nums;
}
/* ---------- mapa das cidades ----------
   Onde as barras dizem quanto, o mapa diz onde. O desenho do Paraná e os
   rios são SVG escrito na mão em graficos.js — sem biblioteca, sem CDN.

   As cores do mapa ficam em variáveis próprias, todas juntas na primeira
   regra: são o único ponto do painel que precisa de um cinza de "terra" e
   de um halo atrás das letras. Tudo o mais sai das variáveis do sistema.

   O painel é de tema claro por decisão de projeto. Havia aqui um bloco
   [data-tema="escuro"] esperando um dia que não chegou: era o único
   data-tema do projeto inteiro, nenhuma página escrevia o atributo, e ele
   virava mentira ao trocar quatro cores de um mapa que tem mais que
   quatro. Tema escuro, se vier, vem pela paleta do :root inteira — e
   estas variáveis viram junto, na mesma passada. */
.mapa-cidades{
  --mapa-terra:rgba(var(--ink-rgb),.05);
  --mapa-borda:rgba(var(--ink-rgb),.3);
  --mapa-rio:rgba(var(--ink-rgb),.2);
  --mapa-halo:#fff;
  /* A lista lateral é uma caixa clara sobre o vidro do cartão — mesmo tom
     de .explica-item e .aviso. Fica aqui em cima, com as outras cores do
     mapa, em vez de solta lá embaixo em número cru. */
  --mapa-lista:rgba(var(--papel-rgb),.6);
  --mapa-lista-borda:rgba(var(--papel-rgb),.9);
  display:grid;gap:20px;align-items:start;
}
/* A lista vai para o lado só quando o CARTÃO é largo — quem decide é o
   JavaScript, medindo o cartão. Media query aqui mediria a janela, e um
   cartão de 300px dentro de uma tela de 2000px continuaria espremido. */
.mapa-cidades.lado{grid-template-columns:minmax(0,1fr) 212px}
/* A caixa da página é .grafico-caixa mais esta, e a segunda existe pela
   reserva de altura. graficos.js roda no fim do body: até ele desenhar, a
   caixa está vazia, e os 250px de .grafico-caixa — que servem para a
   linha e para a rosca — deixam o mapa nascer com o triplo disso,
   empurrando as barras e o rodapé para baixo com a página já na tela.

   O recorte do Paraná é um retângulo fixo, então a altura sai da largura:
   é a proporção do viewBox desenhado em graficos.js. Só vale enquanto a
   caixa está vazia; depois quem manda é o conteúdo — e por isso ninguém
   deve pôr um "carregando..." aqui dentro, que mataria a reserva.

   A conta não fecha ao centavo, e nem tem como: quem decide o formato é o
   JavaScript, medindo o cartão depois. Medido em 04/09/2026, num cartão
   de 1082px: sem esta regra a página descia 466px de uma vez; com ela
   sobra 63px para um lado ou 135px para o outro, conforme a lista de fora
   do recorte caiba ao lado do desenho ou não. No cartão estreito a lista
   empilha embaixo e ainda chega sem aviso — é o resto do erro, e nenhuma
   proporção de CSS dá conta dele. */
.mapa-caixa:empty{aspect-ratio:1000/714}
.mapa-tela{min-width:0}
.mapa-svg{width:100%;height:auto;display:block;overflow:visible}
/* O mapa nao usa .grafico: ver o comentario em graficos.js. Estas duas
   linhas repoem o que aquela classe dava de util. */
.mapa-svg text{font-family:var(--body);fill:var(--ink-4)}
.mapa-terra{fill:var(--mapa-terra);stroke:var(--mapa-borda);
  stroke-linejoin:round;stroke-linecap:round}
.mapa-rio{stroke:var(--mapa-rio);stroke-linejoin:round;stroke-linecap:round}
.mapa-rio-nome{fill:var(--ink-4);font-style:italic;letter-spacing:.02em}
/* Bolha translúcida: cidades vizinhas se sobrepõem e as duas precisam
   continuar visíveis. */
.mapa-bolha{fill:var(--laranja);fill-opacity:.5;stroke:var(--laranja-forte);
  stroke-opacity:.85}
/* Cidade que apareceu mas não trouxe número: anel vazio, para dizer
   "chegou até aqui" sem inventar tamanho. */
.mapa-bolha.vazia{fill:none;stroke:var(--ink-4);stroke-opacity:.6}
/* Alvo do dedo, invisível e generoso — 44px de diâmetro. */
.mapa-alvo{fill:transparent;cursor:pointer}
.mapa-rotulo{fill:var(--ink);font-weight:600;stroke:var(--mapa-halo);
  paint-order:stroke;stroke-linejoin:round}
.mapa-ref{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:14px;font-size:var(--t-nota);color:var(--ink-3)}
.mapa-ref-item{display:inline-flex;align-items:center;gap:8px;
  font-variant-numeric:tabular-nums}
.mapa-ref-item i{display:block;flex:none;border-radius:50%}
.mapa-ref-item i.bolha{background:var(--laranja);opacity:.5;
  box-shadow:inset 0 0 0 1px var(--laranja-forte)}
.mapa-ref-item i.bolha.vazia{background:none;opacity:1;
  box-shadow:inset 0 0 0 1.5px var(--ink-4)}
/* O traço do rio na legenda não é um círculo: é o próprio fio. */
.mapa-ref-item i.rio{width:20px!important;height:0!important;border-radius:0;
  border-top:2px solid var(--mapa-rio)}
.mapa-ref-obs{color:var(--ink-4);font-size:var(--t-nota)}
/* ---- a lista do que não coube no recorte ---- */
.mapa-fora{
  border-radius:var(--r-sm);padding:14px 15px 6px;
  background:var(--mapa-lista);border:1px solid var(--mapa-lista-borda);
}
.mapa-fora h4{margin:0 0 4px;font-size:var(--t-denso);font-weight:600;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mapa-fora-conta{font-size:var(--t-legenda);font-weight:500;color:var(--ink-4);
  white-space:nowrap}
.mapa-fora .fino{margin:0 0 10px;font-size:var(--t-nota);line-height:1.45;color:var(--ink-4)}
/* A altura vem do JavaScript, casada com a do mapa, para a fileira não
   serrilhar. O que passar disso rola aqui dentro — nenhuma cidade sai
   da lista. */
.mapa-fora ul{list-style:none;margin:0;padding:0 2px 8px 0;overflow-y:auto}
.mapa-fora li{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding:7px 0;border-bottom:1px solid rgba(var(--ink-rgb),.055);font-size:var(--t-nota)}
.mapa-fora li:last-child{border-bottom:none}
.mapa-fora-nome{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.mapa-fora-nome i{font-style:normal;font-size:var(--t-legenda);color:var(--ink-4);margin-left:5px}
.mapa-fora-val{color:var(--ink);font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* ---------- os cartoes no celular: DUAS COLUNAS ----------

   A maioria abre o painel pelo telefone, e em coluna unica a pagina de
   Resultados media 11.730px — quase catorze telas de rolagem so' para
   passar pelos numeros, com 1.254px antes do primeiro deles. Cada cartao
   ocupava a largura toda para mostrar tres linhas curtas.

   O que abriu espaco para as duas colunas nao foi encolher o cartao: foi
   devolver a margem. Em 390px o container tirava 22px de cada lado e o
   bloco mais 26px — 96px, um quarto da tela, gastos em ar antes de
   qualquer numero. Com 14px e 14px sobram 334px, e duas colunas de 161px
   cabem sem espremer.

   O LIMITE E O DINHEIRO, nao o desenho. "R$ 61.954,41" sai por inteiro,
   com centavos, e em uma linha so' — e por isso o valor tem tamanho
   proprio aqui: 1.22rem e o maior que cabe sem estourar o cartao mais
   estreito. Conferido cartao por cartao em 320, 360 e 390px: nenhum
   estoura, e a pagina nao rola de lado.

   Nao mexe no cartao em si (padding do .kpi fica menor, mas a estrutura e
   a mesma): o mesmo HTML serve as duas larguras. */
@media (max-width:560px){
  main.container{padding-left:14px;padding-right:14px}
  .bloco{padding:18px 14px 20px}
  /* !important porque .kpis-grupo tem regra propria de coluna e as duas
     grades precisam do mesmo tratamento no telefone. */
  /* FLEX, E NAO GRADE DE DUAS COLUNAS. Na grade, cartao de fileira
     inteira (o de valor comprido) quebra a contagem: caindo numa posicao
     par ele desce e deixa meia fileira em branco, e o ultimo cartao fica
     sozinho num canto com o vazio do lado — os dois defeitos que esta
     casa ja' conhece. Tapar o vao com grid-auto-flow:dense funcionava,
     mas trocava a ordem de leitura (o Retorno subia na frente do
     Faturamento, que e' de onde ele vem), e nao resolvia o ultimo.

     Em flex os dois se resolvem sozinhos e sem contar nada: quem sobra
     na fileira CRESCE e fecha o vao. E' a mesma razao pela qual a ficha
     do anuncio ja' era flex — ver o <style> do anuncio.php.

     ALTURA IGUAL NA FILEIRA (stretch, que e' o padrao). Tentei
     align-items:flex-start para o cartao curto nao ficar com branco
     embaixo, e o preco foi pior: a fileira serrilha, um cartao acaba no
     meio do outro, e o Rafael leu como desalinhamento — que e' o que e'.
     A regra da casa ja' tinha decidido isto ao contrario: cartao em
     fileira nao serrilha, e quem cuida do rodape e' o margin-top:auto do
     chip e da faisca. */
  .kpis,.kpis-grupo{
    display:flex!important;flex-wrap:wrap;gap:10px;
  }
  .kpis>.kpi,.kpis-grupo>.kpi{
    flex:1 1 calc(50% - 5px);min-width:0;
    /* SEM justify-content:center. Eu tentei — o pedido veio dele, olhando
       a barriga branca — e conferi numa tela onde a diferença era de 40px,
       onde passava. Com os dados dele a diferença é de 90px, e aí o rótulo
       de um cartão começa muito abaixo do rótulo do vizinho: some a única
       linha que fazia a fileira parecer uma fileira. Ele olhou e disse
       "está desalinhado ainda", e tinha razão.

       Rótulo e número alinhados entre vizinhos é o que faz a grade ler
       como grade. O que sobra fica embaixo. */
  }
  /* (A desmoldura em si mora fora desta media query — ver "cartao de
     numero sem moldura", logo abaixo de .kpi. Ficou aqui só o que é
     específico do telefone.)

     A HISTÓRIA, para não se perder: a queixa dele foi "margem abaixo E À
     DIREITA grandes".

     A queixa dele foi "margem abaixo E À DIREITA grandes". O "à direita"
     é a pista: não é queixa de altura, é vazio DENTRO DE UMA CAIXA. O que
     desenha a caixa é o .glass — fundo, borda, raio de 26px e sombra —, e
     é a borda de baixo que dá ao olho a régua para medir a distância até
     o último texto. Numa fileira de altura igual com conteúdos diferentes
     a sobra TEM de ir para algum lugar; dentro de um retângulo ela vira
     defeito, entre dois blocos separados por um fio ela vira respiro.

     Foi a escolha de dois dos três juízes da pesquisa, e o terceiro
     descartou a alternativa técnica (subgrid) pelo argumento que decide
     aqui: subgrid só existe do Safari 16 em diante, e iPhone 6s, 7 e SE de
     primeira geração param no iOS 15 — o aparelho de boa parte de quem
     abre este painel. Consertaria para quem já estava bem servido.

     No computador a moldura fica: lá os quatro cartões da fileira têm
     conteúdos parecidos e a caixa funciona. */
  .kpi{padding:13px 10px 15px;gap:2px}
  /* DUAS LINHAS RESERVADAS PARA O RÓTULO. "Retorno sobre o investimento"
     quebra em duas linhas onde "Contatos recebidos" cabe em uma, e aí o
     número do vizinho nasce 18px abaixo — a única fileira que eu tinha
     medido fora de linha. Reservando a altura, os números da fileira
     saem sempre na mesma linha, sem grade nova e sem subgrid. */
  .kpi .rotulo{font-size:var(--t-nota);gap:4px;min-height:2.5em;align-items:flex-start}
  .kpi .valor{font-size:1.22rem;margin-top:3px}
  .kpi .apoio{font-size:var(--t-legenda);margin-top:3px;line-height:1.35}
  /* O cartao de valor comprido fica com a fileira inteira. Quem marca e o
     classe_larga() do formato.php, contando caracteres do valor que vai a
     tela — CSS nao conta letra. Sem isso, "R$ 296.770,37" pedia 132px num
     cartao de 115 e vazava por cima da borda, que e' o unico jeito de o
     dinheiro sair errado depois de moeda() ter acertado. */
  /* Valor comprido pede a fileira inteira. Em flex isso e' flex-basis,
     porque grid-column nao existe aqui. O flex-grow dos vizinhos cuida
     do que sobra na fileira de cima. */
  .kpi.larga-sempre{flex-basis:100%}
  /* A REPARTIÇÃO NO TELEFONE.

     Ela é 'selo | nome | valor' e cabia no cartão de largura inteira. No
     de meia coluna sobram uns 100px, e nem o nome nem o valor cabem ao
     lado do selo. Primeiro eu empilhei — nome numa linha, valor noutra —
     e ficou honesto e ALTO: quatro linhas num cartão de 200px, enquanto
     o vizinho tinha três. Era essa diferença que abria o vazio que o
     Rafael via, duas vezes.

     Quando cada conta está numa plataforma diferente, o selo já é o
     nome: "Google 40 · Meta 192" numa linha só, e o cartão encolhe de
     120px de repartição para 25. Quem marca isso é o PHP (ver .so-selo
     em painel.php), porque só ele sabe se há duas contas na mesma
     plataforma — e nesse caso o nome fica, porque sem ele os números
     não dizem de quem são. */
  .kpi .reparte{font-size:var(--t-legenda);margin-top:8px;padding-top:7px}
  /* Duas contas na mesma plataforma: o nome volta e ganha a linha
     inteira, porque em 100px ele não cabe ao lado do selo e do valor. */
  .kpi .reparte-linhas:not(.so-selo) .reparte-linha{grid-template-columns:auto minmax(0,1fr);row-gap:1px}
  .kpi .reparte-linhas:not(.so-selo) .reparte-linha b{grid-column:1/-1;justify-self:start}
  .kpi .reparte-conta{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
  /* O CONTEUDO FICA JUNTO, NO ALTO DO CARTAO.

     No computador as quatro colunas tem conteudos parecidos, e o
     margin-top:auto do selo alinha os rodapes sem custo. Em duas colunas
     num telefone os tamanhos sao muito diferentes — um cartao traz a
     reparticao por conta e o vizinho traz uma frase — e o mesmo
     margin-top:auto abre um BURACO NO MEIO: numero, texto, um palmo de
     branco, e o selo la' embaixo sozinho. Foi isso que o Rafael leu como
     desalinhado, e ele tem razao: o cartao deixa de ser um bloco.

     Aqui o selo sobe e cola no que veio antes. O vazio continua
     existindo, porque a fileira tem altura igual, mas fica DEPOIS do
     conteudo — que e' onde vazio nao atrapalha a leitura. */
  /* O selo cabia em duas linhas e agora cabe em uma: 46px viram 23. Não
     é enfeite — é metade do que sobrava de branco no cartão vizinho, que
     é o que faz a fileira parecer desalinhada. Encolhe a fonte, não o
     texto: "vs. período anterior" continua escrito, porque sem isso o
     cliente não sabe com o que está comparando. */
  .kpi > .chip{font-size:var(--t-legenda);padding:3px 9px;line-height:1.5}
  .kpi > .chip:not(.faisca-caixa + .chip){margin-top:9px}
  .kpi .faisca-caixa{margin-top:9px;padding-top:0}
  .kpi > .ao-rodape{margin-top:9px}
  /* Nao ha regra de "cartao sozinho" aqui: em flex ele cresce e fecha o
     vao sem ninguem precisar contar posicao. A regra de paridade que
     existia foi retirada justamente porque :nth-child conta filho do
     HTML e nao coluna da tela — com cartao largo no meio ela esticava
     quem ja' estava acompanhado. */
  /* As sete pilulas de atalho ocupavam TRES fileiras (148px) para oferecer
     um clique que o cliente da' uma vez por mes. Numa fileira que corre de
     lado sao 44px, e o gesto e' o mesmo de qualquer app de celular. O
     recuo negativo faz a fileira sangrar ate' a borda da tela: assim fica
     evidente que ha' mais coisa para o lado, em vez de parecer que a lista
     acaba ali. */
  .filtro-atalhos{
    /* A folga vertical e' para a SOMBRA da pilula acesa, que desce 16px
       (ver .pill.on). Com 6px embaixo, a caixa de rolagem cortava a
       sombra num risco reto. A margem negativa devolve o espaco, para a
       folga nao virar buraco no desenho. */
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    /* flex-start OBRIGATORIO: a regra de cima centraliza, e numa fileira
       que nao quebra o conteudo transborda pelos DOIS lados. O que sai
       pela esquerda fica inalcancavel, porque scrollLeft nao vai a
       negativo — "Este mes" e "Mes passado" sumiriam do telefone para
       sempre. Foi assim na primeira versao desta regra. */
    justify-content:flex-start;
    margin:-9px -14px -11px;padding:11px 14px 17px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .filtro-atalhos::-webkit-scrollbar{display:none}
  .filtro-atalhos .pill{flex:0 0 auto}
  /* As quatro abas quebravam em duas fileiras (96px) porque "Redes
     sociais" nao cabia ao lado das outras tres. Numa fileira que corre de
     lado sao 44px, e o gesto e' o mesmo das pilulas de periodo logo
     abaixo — quem aprendeu num aprendeu no outro. O trocador de empresa e
     o Sair ficam onde estao: aquilo ali foi decidido antes, e desfazer de
     passagem seria trocar um problema resolvido por outro. */
  .nav-abas{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    justify-content:flex-start;   /* mesma armadilha do .filtro-atalhos */
    /* Sem a folga vertical do .filtro-atalhos: a aba acesa (.nav-aba.on)
       tem so' fundo, nao tem sombra para ser cortada. Eram 22px gastos
       com nada, na barra que ja' e' a maior parte do que vem antes do
       primeiro numero no telefone. */
    margin:0 -12px;padding:0 12px 2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .nav-abas::-webkit-scrollbar{display:none}
  .nav-abas .nav-aba{flex:0 0 auto}
}
/* De 12 a 14 caracteres cabe em duas colunas num telefone grande e nao
   cabe num pequeno — a conta e' (largura-66)/2-24 de espaco util. */
@media (max-width:420px){
  .kpi.larga-mini{flex-basis:100%}
}
/* O telefone pequeno (320px, que ainda e' muito Android por aqui) deixa
   so' 100px uteis dentro do cartao, e ai' ate' "R$ 1.276,80" — onze
   caracteres, valor comum — vazava. Marcar de onze em diante como largo
   mandaria metade dos cartoes para a fileira inteira e desfaria as duas
   colunas justamente onde a rolagem mais doi. Encolher o numero um ponto
   custa menos: em 320px a tela inteira ja' e' menor, e 1,08rem ali le'
   igual a 1,22rem num telefone grande. */
@media (max-width:360px){
  .kpi{padding:12px 11px 11px}
  .kpi .valor{font-size:1.08rem}
  .kpi .rotulo{font-size:var(--t-legenda)}
}
/* ---------- a dobra do periodo (so' no telefone) ----------

   Quem esconde e quem mostra o corpo e' o proprio <details>, nativo. O
   CSS nao mexe nisso: a primeira versao tentava, com display:none no
   corpo e display:block no @media do desktop, e o resultado pintava mas
   nao respondia a clique — conteudo de <details> fechado e' inerte no
   Chrome. Aqui o CSS so' desenha o rotulo e o esconde no desktop; quem
   fecha no telefone e' o script de dobra_periodo_fecha(). */
.dobra{margin-top:14px}
/* Grade e nao flex-wrap: em flex o rotulo "1 de agosto a 31 de agosto de
   2026" empurrava o "trocar" para uma terceira linha e o resumo fechado
   ficava com 95px — mais alto que um cartao de numero, que e' o oposto
   de recolher. Na grade o texto ocupa a coluna da esquerda e quebra
   dentro dela; o gesto fica ancorado a' direita, sempre no mesmo lugar. */
.dobra > summary{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:10px;
  list-style:none;cursor:pointer;
  /* 44px de alvo de toque, que e' a regra da casa abaixo de 760px */
  min-height:44px;padding:9px 12px;border-radius:14px;
  background:rgba(var(--papel-rgb),.72);border:1px solid var(--glass-edge);
}
.dobra > summary > *{min-width:0}
.dobra > summary::-webkit-details-marker{display:none}
.dobra-texto{grid-column:1;line-height:1.35}
.dobra-oque{font-size:.72rem;color:var(--ink-4);text-transform:uppercase;letter-spacing:.04em;
  margin-right:6px}
.dobra-agora{font-size:var(--t-denso);color:var(--ink);font-weight:650}
/* O gesto por extenso, pela mesma razao do seletor de contas: cartao
   bonito que ninguem sabe que clica nao serve de nada. */
.dobra-gesto{
  grid-column:2;font-size:var(--t-nota);font-weight:600;color:var(--verde-forte);
  display:flex;align-items:center;gap:5px;white-space:nowrap;
}
.dobra-gesto::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
}
.dobra[open] > summary{background:rgba(var(--papel-rgb),.94)}
.dobra[open] .dobra-gesto::after{transform:rotate(-135deg) translateY(-2px)}
.dobra > .dobra-corpo{margin-top:12px}
/* Acima de 560px a dobra nao existe para quem olha: o rotulo some e o
   corpo, que nasce aberto, e' o formulario de sempre.

   `not all and (max-width:560px)` e nao `min-width:561px`: largura de
   janela nao e' numero inteiro (zoom do navegador, barra de rolagem,
   escala de tela do Android), e em 560,5px NENHUMA das duas casava — o
   rotulo "PERIODO ... trocar" aparecia junto com o formulario aberto,
   num computador. Este e' o complemento exato da outra media query, e o
   mesmo 560 que o matchMedia do layout.php pergunta. */
@media not all and (max-width:560px){
  .dobra{margin-top:0}
  /* SO' ESCONDE O ROTULO COM A DOBRA ABERTA. Escondendo sempre, bastava
     a dobra ficar fechada numa tela larga para o filtro sumir inteiro e
     sem volta — foi o que aconteceu quem girava o telefone: o script
     tinha fechado na vertical e, ao deitar, o rotulo sumia junto com o
     corpo. Quem conserta isso e' o ouvinte de largura do layout.php,
     mas ele depende de o navegador disparar o evento; esta linha nao
     depende de nada. No pior caso aparece um "PERIODO ... trocar" a
     mais numa tela larga, e um clique resolve. */
  .dobra[open] > summary{display:none}
  .dobra > .dobra-corpo{margin-top:0}
}
/* =========================================================
   ABA CLIENTES — o cartão de cada empresa.

   A faixa colorida fica numa BARRA À ESQUERDA, não no fundo
   do cartão: fundo colorido em 33 cartões vira um vitral e
   some com a hierarquia. A barra diz o estado de relance e
   deixa o texto no branco de sempre.

   A frase de ação usa margin-top:auto para colar no rodapé
   do cartão. Sem isso, cartões da mesma fileira serrilham —
   a armadilha de sempre.
   ========================================================= */
.faixa-topo{display:flex;align-items:baseline;gap:10px;margin:34px 0 2px}
.faixa-topo h2{margin:0;font-size:1.28rem;letter-spacing:-.02em}
.faixa-conta{
  border-radius:999px;padding:3px 10px;font-size:var(--t-nota);font-weight:700;
  font-variant-numeric:tabular-nums;
}
.f-atencao  .faixa-conta{background:rgba(198,43,69,.12);color:var(--vermelho)}
.f-recarga  .faixa-conta{background:rgba(255,145,77,.18);color:var(--laranja-forte)}
.f-melhorar .faixa-conta{background:rgba(255,222,89,.34);color:var(--texto-amarelo-escuro)}
.f-bem      .faixa-conta{background:rgba(126,217,87,.22);color:var(--verde-forte)}
.f-certo    .faixa-conta,
.f-parado   .faixa-conta,
.f-suspensa .faixa-conta{background:rgba(var(--ink-rgb),.06);color:var(--ink-3)}
.cli{
  background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--r-sm);
  box-shadow:var(--glass-shadow);padding:16px 17px 17px;
  display:flex;flex-direction:column;gap:11px;
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
}
.cli:hover{border-color:rgba(var(--ink-rgb),.14)}
.cli::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.f-atencao  .cli::before{background:var(--vermelho)}
.f-recarga  .cli::before{background:var(--laranja)}
.f-melhorar .cli::before{background:var(--amarelo)}
.f-bem      .cli::before{background:var(--verde)}
.f-certo    .cli::before{background:rgba(var(--ink-rgb),.12)}
.f-parado   .cli::before,
.f-suspensa .cli::before{background:rgba(var(--ink-rgb),.08)}
.f-suspensa .cli{opacity:.72}
/* O cartão virou três alvos: nome, números e a frase de ação, cada um
   abrindo a tela de que fala. Por isso o cartão em si NÃO é mais um <a> —
   link dentro de link não existe em HTML. */
/* SEM display aqui. `.cli > a` tem especificidade maior que `.cli-numeros`,
   e um display:block neste seletor derrubava o flex da linha de números —
   os três números empilhavam um debaixo do outro. Cada filho decide o seu
   display; este seletor cuida só do que é comum a link. */
.cli > a{text-decoration:none;color:inherit;border-radius:9px}
.cli > a:hover{background:rgba(var(--ink-rgb),.028)}
.cli > a:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
/* No celular, uma coluna e o cartão inteiro vira alvo de toque. */
@media (max-width:560px){
  .cli{padding:15px 15px 16px}
  .faixa-topo{margin-top:26px}
}
.rotina-modos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.rotina-modo{
  position:relative;
  display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;
  border:1px solid var(--hairline);border-radius:12px;background:rgba(var(--papel-rgb),.7);
  font-size:var(--t-denso);font-weight:600;color:var(--ink-3);cursor:pointer;
}
/* QUEM MANDA NO VISUAL É O PRÓPRIO INPUT, não uma classe vinda do PHP.
   Com a classe do servidor, clicar numa opção marcava o rádio de verdade
   mas o preto continuava na opção antiga — e a tela parecia travada. */
.rotina-modo input{position:absolute;opacity:0;width:0;height:0;margin:0}
.rotina-modo:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--sobre-ink)}
.rotina-modo:has(input:focus-visible){outline:2px solid var(--laranja);outline-offset:2px}
/* =========================================================
   HOJE — a lista que pede a mão, no topo da aba Clientes.

   Cada linha é um formulário de um botão só: marcar recarrega
   a página. Sem JavaScript de propósito — continua funcionando
   com a rede ruim do celular no meio da rua.
   ========================================================= */
.hoje-titulo{
  display:flex;align-items:center;gap:8px;margin:18px 0 8px;
  font-size:var(--t-nota);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);
}
.hoje-titulo:first-of-type{margin-top:4px}
.hoje-titulo b{
  background:rgba(var(--ink-rgb),.06);color:var(--ink-3);border-radius:999px;
  padding:2px 8px;font-size:var(--t-legenda);letter-spacing:0;
}
.hoje-titulo.atrasada{color:var(--vermelho)}
.hoje-titulo.atrasada b{background:rgba(198,43,69,.12);color:var(--vermelho)}
.tarefa{
  display:flex;align-items:center;gap:11px;margin-bottom:7px;
  padding:8px 12px;border-radius:12px;min-height:44px;
  border:1px solid var(--hairline);background:rgba(var(--papel-rgb),.7);
}
.tarefa.atrasada{border-color:rgba(198,43,69,.3);background:rgba(198,43,69,.04)}
.tarefa-marca{
  width:32px;height:32px;flex:none;padding:0;cursor:pointer;
  border:1.5px solid var(--ink-4);border-radius:8px;background:transparent;
  display:grid;place-items:center;
}
.tarefa-marca span{
  width:11px;height:6px;border-left:2px solid var(--verde-forte);
  border-bottom:2px solid var(--verde-forte);transform:rotate(-45deg) translateY(-1px);
  opacity:0;
}
.tarefa-marca:hover{border-color:var(--verde-forte);background:rgba(126,217,87,.1)}
.tarefa-marca:hover span{opacity:.55}
.tarefa-marca:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.tarefa-nome{font-size:var(--t-denso);font-weight:550;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tarefa-lado{margin-left:auto;font-size:var(--t-nota);color:var(--ink-4);white-space:nowrap;flex:none}
@media (max-width:560px){
  /* 44px de alvo, a regra da casa. No celular esta caixinha é a única
     coisa que se toca nesta lista, e 26px erra o dedo. */
  .tarefa-marca{width:44px;height:44px;border-radius:12px}
  .tarefa-marca span{width:14px;height:8px}
  .tarefa{padding:9px 11px;gap:10px}
  .tarefa-nome{white-space:normal}
  .tarefa-lado{display:none}
  /* No celular o rótulo do lado some: o nome do cliente é o que importa,
     e espremer os dois numa linha de 360px corta o nome pela metade. */
}
.tarefa-tipo{
  font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4);background:rgba(var(--ink-rgb),.06);
  border-radius:6px;padding:2px 7px;margin-left:7px;white-space:nowrap;
}
/* A conferência "ver como o cliente vê". Amarela de propósito: é um modo,
   não uma tela, e quem esquece que está nele estranha a aba Clientes ter
   sumido. */
.aviso-conferencia{
  background:rgba(255,222,89,.28);border-radius:10px;padding:9px 13px;
  display:inline-block;color:var(--ink-2);
}
.aviso-conferencia b{color:var(--texto-amarelo-escuro)}
/* Toda tarefa abre. Dentro estão os links, a escolha da pessoa e o campo
   de anotar — as três coisas de que se precisa na hora de publicar. */
.tarefa{display:block;padding:0;overflow:hidden}
.tarefa summary{
  display:flex;align-items:center;gap:11px;padding:8px 12px;min-height:44px;
  cursor:pointer;list-style:none;
}
.tarefa summary::-webkit-details-marker{display:none}
/* FILHO DIRETO, e não descendente (08/09): com "summary" solto, a seta da
   tarefa aberta virava para cima também nas linhas de material aprovado
   lá dentro — cinco linhas fechadas dizendo "estou aberta", e ele leu
   como "não mostra os materiais". Cada dobra desenha a própria seta. */
.tarefa > summary::after{
  content:"";width:7px;height:7px;margin-left:auto;flex:none;
  border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);
  transform:rotate(45deg) translateY(-2px);
}
.tarefa[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.tarefa-vez{font-size:var(--t-nota);color:var(--ink-4);white-space:nowrap}
.tarefa-vez b{color:var(--ink-2);font-weight:650}
.tarefa-escolha{
  padding:12px;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.tarefa-escolha p{flex-basis:100%}
.tarefa-escolha .btn.sugerido{
  background:rgba(126,217,87,.18);color:var(--verde-forte);font-weight:700;
}
.feita{padding:11px 0;border-top:1px solid var(--hairline)}
/* O corpo da tarefa aberta. */
.tarefa-corpo{padding:12px;border-top:1px solid var(--hairline)}
.tarefa-rotulo{
  margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);
}
.tarefa-rotulo + .tarefa-links + .tarefa-rotulo,
.tarefa-links + .tarefa-rotulo{margin-top:14px}
.tarefa-links{display:flex;flex-wrap:wrap;gap:7px}
.tlink{
  display:flex;flex-direction:column;gap:1px;text-decoration:none;
  border:1px solid var(--hairline);border-radius:11px;padding:8px 12px;
  background:rgba(var(--papel-rgb),.75);min-height:44px;justify-content:center;
  max-width:100%;
}
.tlink b{font-size:var(--t-denso);font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.tlink span{font-size:var(--t-legenda);color:var(--ink-4)}
.tlink:hover{border-color:var(--laranja);background:rgba(255,145,77,.06)}
.tlink.t-meu{border-color:rgba(255,145,77,.45)}
/* O material já aprovado, dentro da tarefa: verde de "pode usar", para
   não se confundir com os links de onde publicar. */
.tlink.t-arte{border-color:rgba(126,217,87,.5);background:rgba(126,217,87,.08)}
.tlink.t-arte:hover{border-color:var(--verde-forte);background:rgba(126,217,87,.16)}
span.tlink{cursor:default}
.tarefa-marcar{display:flex;gap:8px;align-items:center;margin-bottom:7px;flex-wrap:wrap}
.tarefa-marcar input[type=text]{
  flex:1;min-width:150px;min-height:44px;border:1px solid var(--hairline);
  border-radius:12px;padding:9px 12px;font:inherit;font-size:var(--t-denso);
  background:rgba(var(--papel-rgb),.8);
}
.tarefa-marcar .btn{flex:none}
.btn.sugerido{background:var(--verde-forte)}
/* "Não vou fazer": encerra o dia sem contar como entrega. Separado dos
   botões de marcar por uma linha, porque é a única ação da tarefa que
   não tem volta pela lista — só pelo bloco das encerradas. */
.tarefa-dispensar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline);
}
.tarefa-dispensar input[type=text]{
  flex:1;min-width:150px;min-height:44px;border:1px solid var(--hairline);
  border-radius:12px;padding:9px 12px;font:inherit;font-size:var(--t-denso);
  background:rgba(var(--papel-rgb),.8);
}
/* A faixa de administrador, entre a barra de abas e o conteúdo. Discreta
   de propósito: é ferramenta de quem trabalha, não parte da página. */
.barra-adm{padding-top:10px;padding-bottom:0}
.barra-adm p,.barra-adm-linha{margin:0;font-size:var(--t-denso);color:var(--ink-4)}
.barra-adm a{color:var(--ink-3)}
.barra-adm a:hover{color:var(--ink)}
.barra-adm .aviso-conferencia{font-size:var(--t-denso)}
/* O seletor de "ver como um colaborador", dentro da faixa. */
.ver-colab{display:inline-block;position:relative}
/* display:inline num <summary> desliga o list-style, e o triângulo nativo
   volta. Por isso o ::marker vazio também. */
.ver-colab summary{cursor:pointer;list-style:none;display:inline;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:2px}
.ver-colab summary::-webkit-details-marker{display:none}
.ver-colab summary::marker{content:""}
.ver-colab summary:hover{color:var(--ink)}
.ver-colab-lista{
  position:absolute;left:0;top:calc(100% + 6px);z-index:40;min-width:180px;
  display:flex;flex-direction:column;gap:2px;padding:8px;
  background:var(--papel);border:1px solid var(--glass-edge);border-radius:14px;
  box-shadow:var(--glass-shadow);
}
.ver-colab-lista a{
  display:block;padding:9px 11px;border-radius:9px;min-height:44px;
  color:var(--ink-2);text-decoration:none;font-size:var(--t-denso);line-height:1.5;
}
.ver-colab-lista a:hover{background:rgba(var(--ink-rgb),.05);color:var(--ink)}
/* Passar a rotina para outra pessoa, de dentro da tarefa. */
.tarefa-delegar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline);
}
.tarefa-delegar label{font-size:var(--t-nota);color:var(--ink-4)}
.tarefa-delegar select{
  min-height:44px;border:1px solid var(--hairline);border-radius:12px;
  padding:9px 12px;font:inherit;font-size:var(--t-denso);background:rgba(var(--papel-rgb),.8);
  max-width:100%;
}
/* Lançar uma peça — a linha da planilha virando formulário. */
.peca-form{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.peca-form .campo{margin:0}
.peca-form .campo.curto{max-width:200px}
/* FILHO DIRETO. Sem o ">", qualquer <b> dentro do campo virava bloco:
   o negrito no meio de uma frase de ajuda quebrava a linha e a frase
   aparecia partida em três pedaços, como se fossem três parágrafos. */
.peca-form .campo > b{display:block;font-size:var(--t-nota);font-weight:600;margin-bottom:5px;color:var(--ink-2)}
.peca-form .campo .fino b{font-weight:600;color:var(--ink-2);white-space:nowrap}
.peca-form .campo i{font-style:normal;font-weight:400;color:var(--ink-4)}
.peca-form input,.peca-form select{
  width:100%;min-height:44px;border:1px solid var(--hairline);border-radius:12px;
  padding:10px 13px;font:inherit;font-size:var(--t-denso);background:rgba(var(--papel-rgb),.8);
}
.peca-form .acoes{grid-column:1/-1;margin:0}
.resumo-mes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:18px}
.resumo-mes div{background:rgba(var(--papel-rgb),.66);border:1px solid var(--glass-edge);
  border-radius:14px;padding:13px 15px}
.resumo-mes > div > b{display:block;font-size:1.4rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.resumo-mes b.bom{color:var(--verde-forte)}
.resumo-mes b.aten{color:var(--laranja-forte)}
.resumo-mes span{font-size:var(--t-nota);color:var(--ink-4)}
/* Formulários das telas novas de administração. */
.campo textarea{
  width:100%;min-height:150px;border:1px solid var(--hairline);border-radius:12px;
  padding:11px 13px;font:inherit;font-size:var(--t-denso);line-height:1.5;
  background:rgba(var(--papel-rgb),.8);resize:vertical;
}
.campo select{
  width:100%;min-height:44px;border:1px solid var(--hairline);border-radius:12px;
  padding:10px 13px;font:inherit;font-size:var(--t-denso);background:rgba(var(--papel-rgb),.8);
}
/* A tela de aprovar do cliente: peças e dois botões, mais nada. */
.pecas-grade{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.peca-card{
  background:var(--papel);border:1px solid var(--glass-edge);border-radius:var(--r-sm);
  box-shadow:var(--glass-shadow);overflow:hidden;display:flex;flex-direction:column;
}
.peca-arte{
  aspect-ratio:4/5;background:linear-gradient(150deg,#EEF1F6,#E3E8F0);
  display:grid;place-items:center;color:var(--ink-4);font-size:var(--t-denso);text-align:center;padding:14px;
}
.peca-arte a{color:var(--ink-2);font-weight:600}
.peca-corpo{padding:13px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.peca-corpo b{font-size:var(--t-denso);letter-spacing:-.01em;line-height:1.3}
.peca-decidir{margin-top:auto}
.peca-decidir .btn{width:100%}
.btn.verde{background:var(--verde-forte)}
.btn.vermelho{background:var(--vermelho)}
.peca-reprovar summary{
  cursor:pointer;list-style:none;font-size:var(--t-denso);color:var(--ink-3);
  min-height:44px;display:flex;align-items:center;
}
.peca-reprovar summary::-webkit-details-marker{display:none}
.peca-reprovar summary::marker{content:""}
.peca-reprovar label{display:block;font-size:var(--t-nota);color:var(--ink-3);margin-bottom:8px}
.peca-reprovar textarea{
  width:100%;margin-top:5px;border:1px solid var(--hairline);border-radius:11px;
  padding:9px 11px;font:inherit;font-size:var(--t-denso);background:rgba(var(--papel-rgb),.9);resize:vertical;
}
.peca-reprovar .btn{width:100%;margin-top:8px}
/* =====================================================================
   Fila — a lista simples de peça, material e pedido.

   É a mesma linha em quatro telas: material aprovado do cliente, fila de
   publicar do colaborador, pedidos. Uma miniatura, o texto, e o que se
   faz com aquilo. Nada de cartão: cartão dá peso a coisa que se lê de
   relance e não se estuda.
   ===================================================================== */
.fila{display:flex;flex-direction:column}
.fila-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-top:1px solid var(--hairline);
}
.fila-item:first-child{border-top:0}
/* O texto é o que cede: o resto tem tamanho próprio e não pode encolher.
   O min-width:0 é o que deixa o nome comprido cortar em vez de empurrar
   o botão para fora da tela. */
/* overflow-wrap:anywhere porque o que entra aqui é link colado pelo
   cliente: uma URL de 300 caracteres sem espaço nenhum atravessava o
   bloco e era pintada por cima do selo de estado. */
.fila-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  overflow-wrap:anywhere}
.fila-texto b{font-size:var(--t-denso);font-weight:650;letter-spacing:-.012em;line-height:1.32}
.fila-texto > span{font-size:var(--t-nota);color:var(--ink-4);line-height:1.42}
.fila-texto a{color:var(--ink-3)}
.fila-item form{margin:0;flex:none}
.fila-item .btn{flex:none}
/* O estado do pedido, na palavra do cliente. Só o que ainda espera ganha
   cor: o resto já saiu da cabeça de quem pediu. */
/* Encostado no topo, e não centrado: ao lado de um pedido de quatro
   linhas, um selo no meio da altura parece solto no branco. */
.selo-pedido{
  flex:none;align-self:flex-start;margin-top:2px;font-size:var(--t-legenda);font-weight:700;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
  background:rgba(var(--ink-rgb),.06);color:var(--ink-3);
}
.selo-pedido.e-esperando{background:rgba(255,145,77,.16);color:var(--laranja-forte)}
.selo-pedido.e-andando{background:rgba(31,111,178,.14);color:var(--azul)}
.selo-pedido.e-feito{background:rgba(46,125,27,.13);color:var(--chave-on)}
.selo-pedido.e-recusado{background:rgba(var(--ink-rgb),.06);color:var(--ink-4)}
.selo-pedido.urgente{background:var(--vermelho);color:#fff}
@media (max-width:760px){
  /* Alvo de toque: no celular a linha inteira precisa dar para acertar
     com o polegar, e o botão do lado também. */
  .fila-item{padding:13px 0}
  .fila-item .btn{min-height:44px}
  /* 44px de alvo: no celular estes dois links ficam colados um no outro
     e num cartão de 170px. Sem altura mínima o dedo acerta o vizinho. */
  .cartao-pede a{display:flex;align-items:center;min-height:44px;font-size:var(--t-nota);padding:0 8px;margin:0 -8px}
}
@media (max-width:560px){
  /* A linha vira duas: o botão embaixo, no talhe do dedo, em vez de um
     nome espremido em três letras por linha. */
  .fila-item{flex-wrap:wrap}
  .fila-item form,.fila-item > .btn{width:100%}
  .fila-item form .btn{width:100%}
}
/* A chamada do pedido no fim dos resultados: texto de um lado, botão do
   outro, e no celular um embaixo do outro com o botão da largura toda. */
.pedir-chamada{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pedir-chamada > div{flex:1;min-width:220px}
.pedir-chamada h2{margin-bottom:4px}
@media (max-width:560px){
  .pedir-chamada .btn{width:100%;min-height:44px}
}
/* =====================================================================
   Pedido do cliente — a triagem.

   Um bloco por pedido, com a frase dele em cima e as escolhas embaixo.
   Os quatro seletores numa grade que se acomoda: em tela larga cabem
   lado a lado, no celular viram uma coluna. Nada de tabela — tabela de
   formulário no celular quebra letra a letra.
   ===================================================================== */
.pedidos-bloco{border-left:3px solid var(--laranja)}
.conta-pedidos{
  display:inline-block;margin-left:6px;padding:2px 10px;border-radius:999px;
  font-size:var(--t-nota);background:var(--laranja);color:#fff;vertical-align:middle;
}
.pedido{padding:16px 0;border-top:1px solid var(--hairline)}
.pedido:first-of-type{border-top:0;padding-top:0}
.pedido-topo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pedido-de{font-weight:700;font-size:var(--t-denso);letter-spacing:-.012em}
.pedido-de em{font-style:normal;font-weight:400;color:var(--ink-4)}
.pedido-quando{margin-left:auto;font-size:var(--t-nota);color:var(--ink-4)}
.pedido-texto{margin:0 0 4px;font-size:var(--t-corpo);line-height:1.45;color:var(--ink);
  overflow-wrap:anywhere}
.pedido-anuncio{margin:0 0 4px;font-size:var(--t-nota);color:var(--ink-4);overflow-wrap:anywhere}
.pedido-anuncio b{font-weight:600;color:var(--ink-3)}
.pedido-triagem{
  display:grid;gap:10px 14px;margin-top:12px;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));align-items:end;
}
.pedido-triagem label{display:flex;flex-direction:column;gap:5px}
/* O rótulo é um <span> e não texto solto: dentro de um label em coluna,
   texto solto e <i> viram dois itens do flex e o "— ele lê isto" cai
   sozinho numa linha. */
.pedido-triagem label > span{font-size:var(--t-nota);font-weight:600;color:var(--ink-3)}
.pedido-triagem label i{font-style:normal;font-weight:400;color:var(--ink-4)}
/* A resposta ocupa a linha inteira, com o botão do lado: é a última coisa
   que se escreve antes de decidir, e o olho não tem de voltar para cima. */
.pedido-fim{grid-column:1/-1;display:flex;gap:12px;align-items:end}
.pedido-fim label{flex:1;min-width:0}
.pedido-triagem select,.pedido-triagem input{
  width:100%;padding:9px 10px;border:1px solid var(--glass-edge);border-radius:10px;
  background:rgba(var(--papel-rgb),.7);font:inherit;font-size:var(--t-denso);color:var(--ink);
}
/* A resposta é a única linha que o cliente lê: ganha a largura toda. */
.pedido-triagem .btn{flex:none;white-space:nowrap}
@media (max-width:760px){
  /* 16px, senão o iPhone dá zoom na página inteira ao tocar no campo — e
     não desfaz depois. A regra geral já dizia isso; estas telas nasceram
     com font-size próprio e passaram por baixo dela. */
  .pedido-triagem select,.pedido-triagem input,
  .rel-filtro select,.mesa-mandar select{font-size:var(--t-corpo)}
}
@media (max-width:560px){
  .pedido-triagem{grid-template-columns:1fr}
  .pedido-fim{flex-direction:column;align-items:stretch}
  .pedido-triagem select,.pedido-triagem input{min-height:44px}
  .pedido-triagem .btn{width:100%;min-height:44px}
}
/* A resposta da agência dentro da linha do pedido: é o que o cliente
   abriu a tela para ler, então não pode ter a cor da data. */
.pedido-recado{
  font-size:var(--t-nota)!important;color:var(--ink-2)!important;line-height:1.45;
  padding-left:10px;border-left:2px solid var(--laranja);margin-top:3px;
}
/* Os dois pedidos no alto da ficha do anúncio. No celular ficam lado a
   lado ainda, mas com altura de dedo. */
.ficha-pedir{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (max-width:560px){
  .ficha-pedir{width:100%}
  .ficha-pedir .btn{flex:1;min-height:44px;justify-content:center}
}
@media (max-width:760px){
  .abrir-demanda{padding:10px 0;min-height:44px;display:flex;
  align-items:center;flex-wrap:wrap;gap:0 6px}
}
/* O orçamento da peça, antes de clicar em lançar. Ele é a resposta da
   pergunta que se faz na hora de preencher — "quanto isso vai dar?" — e
   por isso fica colado no botão, não no alto do formulário. */
.peca-fecho{
  grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding-top:14px;border-top:1px solid var(--hairline);
}
.peca-fecho .fino{flex:1;min-width:200px;margin:0}
.peca-fecho .acoes{margin:0;flex:none}
.orcamento{
  display:flex;flex-direction:column;gap:1px;margin:0;flex:none;
  padding:9px 16px;border-radius:14px;background:rgba(126,217,87,.13);
  border:1px solid rgba(126,217,87,.4);
}
.orcamento > span{font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.orcamento b{font-family:var(--display);font-weight:700;font-size:1.32rem;
  letter-spacing:-.028em;font-variant-numeric:tabular-nums;line-height:1.15}
.orcamento i{font-style:normal;font-size:var(--t-legenda);color:var(--ink-4);line-height:1.35}
.orcamento i:empty{display:none}
@media (max-width:560px){
  .peca-fecho{flex-direction:column;align-items:stretch}
  .orcamento{align-items:flex-start}
  .peca-fecho .acoes .btn{width:100%;min-height:44px}
}
@media (max-width:560px){
  .mesa-mandar{width:100%}
  .mesa-mandar select,.mesa-mandar .btn{width:100%}
}
/* =====================================================================
   A peça na esteira — a linha que abre.

   Fechada, ela é uma linha de lista: cliente, tipo, quem fez, quanto
   vale. Aberta, mostra o material antes de qualquer botão — decidir sem
   ver não é decidir, e o card antigo deixava aprovar às cegas.
   ===================================================================== */
.mesa-bloco{border-left:3px solid var(--laranja)}
.conta-pedidos.clara{background:rgba(var(--ink-rgb),.08);color:var(--ink-3)}
.peca-linha{border-top:1px solid var(--hairline);padding:2px 0}
.peca-linha:first-of-type{border-top:0}
.peca-linha > summary{
  cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;
  flex-wrap:wrap;padding:13px 2px;min-height:44px;
}
.peca-linha > summary::-webkit-details-marker{display:none}
.peca-linha > summary::marker{content:""}
/* A seta da linha de peça: para baixo fechada, para cima aberta. Vai para
   a ponta direita quando não há valor na linha; com valor, fica ao lado
   dele (o valor é quem segura a ponta). */
.peca-linha > summary::after{
  content:"";width:7px;height:7px;flex:none;margin-left:10px;align-self:center;
  border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);
  transform:rotate(45deg) translateY(-2px);
}
.peca-linha > summary:not(:has(.peca-linha-valor))::after{margin-left:auto}
.peca-linha[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.peca-linha > summary:hover .peca-linha-nome{text-decoration:underline;text-underline-offset:3px}
.peca-linha-nome{font-weight:700;font-size:var(--t-denso);letter-spacing:-.014em}
.peca-linha-nome em{
  font-style:normal;font-weight:600;font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);margin-left:7px;
  background:rgba(var(--ink-rgb),.06);padding:2px 7px;border-radius:6px;
}
.peca-linha-quem{font-size:var(--t-nota);color:var(--ink-4);min-width:0;overflow-wrap:anywhere}
.peca-linha-valor{
  margin-left:auto;font-family:var(--display);font-weight:700;font-size:var(--t-corpo);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.peca-linha.reprovada > summary{background:rgba(198,43,69,.05);border-radius:12px;padding-left:12px}
.peca-detalhe{padding:2px 2px 14px}
.peca-abrir{margin-bottom:14px}
.peca-ficha{
  display:grid;gap:10px 22px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin:0 0 12px;padding:13px 15px;border-radius:14px;background:rgba(var(--ink-rgb),.035);
}
.peca-ficha div{display:flex;flex-direction:column;gap:2px;min-width:0}
.peca-ficha dt{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4)}
.peca-ficha dd{margin:0;font-size:var(--t-denso);color:var(--ink);overflow-wrap:anywhere}
.peca-ficha .peca-valor{font-family:var(--display);font-weight:700;font-size:1.05rem;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.peca-ficha .fino{display:block;font-size:var(--t-legenda);margin:0}
.peca-motivo{
  margin:0 0 12px;font-size:var(--t-denso);background:rgba(255,222,89,.16);
  border-radius:11px;padding:10px 13px;overflow-wrap:anywhere;
}
.peca-caminho{margin:0 0 12px}
.peca-caminho summary{cursor:pointer;font-size:var(--t-nota);color:var(--ink-4);padding:6px 0;
  min-height:44px;display:flex;align-items:center;gap:6px}
.peca-caminho ol{margin:4px 0 0;padding:0 0 0 16px;font-size:var(--t-nota);color:var(--ink-3);
  display:flex;flex-direction:column;gap:5px}
.peca-caminho li b{color:var(--ink-2);font-weight:600}
.peca-caminho li span{color:var(--ink-4);font-variant-numeric:tabular-nums}
.peca-caminho li em{display:block;font-style:normal;color:var(--ink-3)}
.peca-acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.peca-acoes form{margin:0}
.peca-devolver{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.peca-devolver input{
  flex:1;min-width:180px;min-height:44px;border:1px solid var(--hairline);
  border-radius:12px;padding:9px 12px;font:inherit;font-size:var(--t-denso);
  background:rgba(var(--papel-rgb),.8);
}
.peca-devolver .btn{flex:none}
@media (max-width:560px){
  .peca-linha-valor{margin-left:0}
  .peca-acoes,.peca-devolver{flex-direction:column;align-items:stretch}
  .peca-acoes .btn,.peca-devolver .btn,.peca-devolver input,.mesa-mandar select{width:100%}
  .peca-abrir{width:100%;justify-content:center}
}
/* =====================================================================
   A prévia do material.

   O quadro é o próprio Drive (ou o YouTube) desenhando o arquivo aqui
   dentro. Proporção 16/10 porque cabe tanto post quadrado quanto vídeo
   deitado sem cortar nenhum dos dois; a grade de pasta do Drive precisa
   de altura, e ganha um pouco mais no desktop.
   ===================================================================== */
.previa-caixa{
  position:relative;width:100%;aspect-ratio:16/10;margin:0 0 12px;
  border-radius:14px;overflow:hidden;background:rgba(var(--ink-rgb),.05);
  border:1px solid var(--glass-edge);
}
.previa-caixa iframe,.previa-caixa video,.previa-caixa img{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.previa-caixa img{object-fit:contain;background:var(--papel)}
.previa-caixa video{object-fit:contain;background:#000}
@media (min-width:900px){
  .previa-caixa{aspect-ratio:16/9;max-height:420px}
}
/* Onde a peça foi parar. Verde quando o painel achou o post; laranja
   quando ele ainda não achou e precisa de você. */
.peca-post{
  display:flex;flex-direction:column;gap:3px;margin:0 0 12px;
  padding:11px 14px;border-radius:12px;
  background:rgba(126,217,87,.12);border-left:3px solid var(--verde-forte);
}
.peca-post.sem{background:rgba(255,145,77,.10);border-left-color:var(--laranja)}
.peca-post b{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4)}
.peca-post a{font-size:var(--t-denso);color:var(--ink-2);overflow-wrap:anywhere}
.peca-post .fino{margin:0}
.peca-escolher-post{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.peca-escolher-post select{
  flex:1;min-width:200px;min-height:44px;border:1px solid var(--hairline);
  border-radius:12px;padding:9px 12px;font:inherit;font-size:var(--t-denso);
  background:rgba(var(--papel-rgb),.85);max-width:100%;
}
@media (max-width:560px){
  .peca-escolher-post select,.peca-escolher-post .btn{width:100%}
  .peca-devolver label{width:100%}
  .peca-devolver input[type=date]{width:100%}
}
/* A capa da peça e a legenda do post. */
.peca-capa{
  display:block;width:100%;max-height:260px;object-fit:cover;
  border-radius:14px;margin:0 0 12px;border:1px solid var(--glass-edge);background:var(--papel);
}
.peca-legenda{
  margin:0 0 12px;padding:11px 14px;border-radius:12px;
  background:rgba(var(--ink-rgb),.04);border-left:3px solid var(--ink-4);
}
.peca-legenda.falta{background:rgba(255,145,77,.10);border-left-color:var(--laranja)}
/* FILHO DIRETO, de novo. Sem o ">", o negrito no meio do parágrafo de
   dentro virava bloco e caía sozinho numa linha em maiúsculas — "ANTES"
   parecia um título. É o mesmo tropeço do .peca-form. */
.peca-legenda > b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:4px}
.peca-legenda p{margin:0;font-size:var(--t-denso);line-height:1.5;color:var(--ink-2);
  overflow-wrap:anywhere}
.peca-legenda form{margin-top:10px}
.peca-legenda textarea{
  flex:1;min-width:200px;min-height:70px;border:1px solid var(--hairline);
  border-radius:12px;padding:9px 12px;font:inherit;font-size:var(--t-denso);line-height:1.5;
  background:rgba(var(--papel-rgb),.85);resize:vertical;
}
.peca-form .campo.larga{grid-column:1/-1}
.peca-form .campo.larga textarea{
  width:100%;min-height:90px;border:1px solid var(--hairline);border-radius:12px;
  padding:10px 12px;font:inherit;font-size:var(--t-denso);line-height:1.5;
  background:rgba(var(--papel-rgb),.8);resize:vertical;
}
.peca-form input[type=file]{
  width:100%;font:inherit;font-size:var(--t-denso);padding:9px 0;color:var(--ink-3);
}
/* A capa na tela do cliente: a imagem ocupa a área da arte, e o link
   continua embaixo dela. */
.peca-arte.com-capa{padding:0;position:relative;overflow:hidden}
.peca-arte.com-capa img{width:100%;height:100%;object-fit:cover;display:block}
.peca-arte.com-capa a{
  position:absolute;left:10px;bottom:10px;background:rgba(var(--papel-rgb),.94);
  padding:7px 13px;border-radius:999px;font-size:var(--t-nota);box-shadow:0 2px 10px rgba(var(--sombra-rgb),.2);
  min-height:44px;display:inline-flex;align-items:center;
}
.peca-legenda-cliente summary{
  cursor:pointer;font-size:var(--t-nota);color:var(--ink-3);padding:8px 0;min-height:44px;
  display:flex;align-items:center;
}
.peca-legenda-cliente p{
  margin:0;font-size:var(--t-denso);line-height:1.5;color:var(--ink-2);
  background:rgba(var(--ink-rgb),.04);border-radius:10px;padding:10px 12px;overflow-wrap:anywhere;
}
.popup > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;
  min-height:44px;white-space:nowrap;
}
.popup > summary::-webkit-details-marker{display:none}
.popup > summary::marker{content:""}
.popup[open]{position:static}
/* =====================================================================
   O DEFEITO DE RAIZ DOS POPUPS.

   backdrop-filter faz o elemento virar BLOCO DE CONTENÇÃO de todo filho
   position:fixed. E os popups moram dentro de blocos .glass, que têm
   backdrop-filter. Resultado: o quadro e o botão de fechar não se
   posicionavam pela JANELA, e sim pelo bloco em que estavam — abriam
   deslocados, no meio da página, com o "fechar" longe do canto. Era isso
   que aparecia como "o popup está horrível" e "o botão fechar está todo
   estragado", e nenhuma conta de posição consertava, porque a conta
   estava certa e a origem é que era outra.

   Com um popup aberto ali dentro, o bloco larga o backdrop-filter e a
   origem volta a ser a janela. Não se perde nada: o escuro do popup já
   cobre a tela, e ninguém vê o vidro do bloco que ficou atrás.
   ===================================================================== */
.glass:has(.popup[open]){backdrop-filter:none;-webkit-backdrop-filter:none}
.popup[open]::before{
  content:"";position:fixed;inset:0;z-index:200;
  background:rgba(8,9,16,.5);backdrop-filter:blur(2px);
}
/* Aberto, o botão vira o "fechar" — e fica acima do escuro para receber
   o clique. Sem isto ele ficaria embaixo do fundo e não fecharia mais.

   ELE MORA NO CANTO DO PAINEL, não no canto da tela. Grudado na janela,
   num monitor largo ele ficava a meio palmo do quadro que estava
   fechando — e um botão longe do que ele fecha é um botão que ninguém
   associa. A conta é a mesma da centralização do painel, ao contrário.

   Para isso o painel deixou de ser centrado na vertical: com o topo
   fixo, dá para saber onde o canto está. Centrado, a altura muda com o
   conteúdo e o canto some. */
.popup{--pw:760px}
/* O FECHAR MORA DENTRO DO PAINEL, grudado no canto dele.

   Antes ele era posicionado por uma conta de porcentagem sobre a largura
   da janela — e numa tela larga caía longe do quadro que fechava. Agora
   o painel é uma caixa de posição conhecida e o botão é filho dela na
   prática: mesma origem, mesmo canto, em qualquer tela. */
.popup{--pw:760px;--ptop:max(4vh,20px)}
/* POSICIONADO PELA DIREITA, sem transform.

   Estava com translateX(calc(... - 100% - 14px)): porcentagem dentro de
   calc num transform é descartada pelo navegador — a declaração inteira
   virava inválida e o botão ficava em left:50%, no meio da tela. Era por
   isso que ele "nunca chegava perto da borda", por mais que a conta
   parecesse certa no papel.

   Pela direita a conta não precisa saber a largura do próprio botão: a
   borda direita do painel está a (50% - metade da largura dele) da borda
   da janela, e 14px para dentro é o canto. */
.popup[open] > summary{
  position:fixed;z-index:203;
  top:calc(var(--ptop) + 14px);
  right:calc(50% - min(var(--pw), 100vw - 28px) / 2 + 14px);
  left:auto;
  background:var(--papel);color:var(--ink);box-shadow:var(--glass-shadow);
  padding:8px 15px;min-height:0;border-radius:999px;
}
.popup[open] > summary::after{content:"✕";margin-left:9px;font-size:1.05rem;line-height:1}
.popup-corpo{
  position:fixed;z-index:201;left:50%;top:var(--ptop);transform:translateX(-50%);
  width:min(var(--pw),calc(100vw - 28px));max-height:calc(100dvh - var(--ptop) * 2);
  overflow:auto;
  background:var(--papel,var(--papel));border-radius:24px;padding:26px 26px 24px;
  box-shadow:0 24px 70px rgba(var(--sombra-rgb),.32);
  -webkit-overflow-scrolling:touch;
}
.popup-corpo h2{margin-bottom:4px}
@media (max-width:640px){
  /* Tela cheia no celular: o canto do painel É o canto da tela. */
  .popup[open] > summary{width:auto;top:10px;right:10px;left:auto;transform:none}
  .popup-corpo{
    width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    top:0;left:0;transform:none;border-radius:0;
    padding:64px 16px 28px;
  }
}
/* A caixinha da legenda: o texto inteiro num span, senão o negrito no fim
   quebra sozinho e desalinha da caixa de marcar. */
.peca-form .campo.larga label{display:flex;align-items:flex-start;gap:9px}
.peca-form .campo.larga label input[type=checkbox]{margin-top:3px;flex:none}
.peca-form .campo.larga label span{flex:1;min-width:0;line-height:1.45}
/* A etiqueta do cliente sem plano mensal. */
.etiqueta-avulso{
  display:inline-block;margin-left:7px;padding:2px 9px;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(255,222,89,.35);color:var(--ink-2);vertical-align:middle;
}
.peca-form .campo i.fino{display:block;margin-top:6px;font-style:normal}
.peca-form .campo input[list]{
  width:100%;min-height:44px;border:1px solid var(--hairline);border-radius:12px;
  padding:10px 12px;font:inherit;font-size:var(--t-denso);background:rgba(var(--papel-rgb),.8);
}
/* O "editar esta peça" dentro do card: um botãozinho discreto, e o
   formulário abre por cima como os outros. */
.peca-editar-linha{margin:0 0 12px}
.peca-editar > summary{display:inline-flex}
/* =====================================================================
   A pasta do Drive, desenhada pelo painel.

   Antes era um quadro do Google embutido — e quando ele não carregava
   sobrava um retângulo cinza com um ícone de arquivo quebrado, que não
   diz nada a ninguém. Agora o painel lê a pasta e desenha os arquivos:
   miniatura, nome, e o play em cima do que é vídeo.
   ===================================================================== */
.previa-rotulo{
  margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);
}
.previa-rotulo b{color:var(--ink-2)}
.drive-grade{
  display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  margin:0 0 10px;
}
/* min-width:0 nos dois: sem isso o nome comprido de um arquivo estoura a
   coluna da grade e é impresso por cima do nome do vizinho. */
.drive-item{text-decoration:none;color:inherit;display:block;min-width:0}
.drive-arte{
  position:relative;display:block;border-radius:12px;overflow:hidden;
  background:rgba(var(--ink-rgb),.06);border:1px solid var(--glass-edge);
  /* A proporção vem do arquivo, no style da própria tag — ver
     desenhar_previa(). Este é só o padrão de quem não tem medida. */
  aspect-ratio:4/5;
}
/* contain, não cover: a caixa já tem a proporção do arquivo, e cover
   ainda cortava a borda quando a medida vinha arredondada. Story tem de
   aparecer inteira — é ela que se aprova. */
.drive-arte img{width:100%;height:100%;object-fit:contain;display:block}
.drive-item:hover .drive-arte{border-color:var(--laranja)}
.drive-nome{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:var(--t-legenda);color:var(--ink-3);line-height:1.3;
  min-width:0;overflow-wrap:anywhere;margin-top:5px;
}
/* O número do tíquete. Monoespaçado e fácil de selecionar: ele existe
   para ser dito no telefone e colado numa mensagem. */
.ticket{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82em;font-weight:600;letter-spacing:.02em;color:var(--ink-3);
  user-select:all;white-space:nowrap;
}
.peca-ficha .ticket{font-size:var(--t-denso);color:var(--ink)}
/* =====================================================================
   O ARQUIVO TOCANDO ALI MESMO.

   Antes cada arquivo era um popup: clicava, abria uma janela, o vídeo
   tocava dentro dela, e para ver o próximo tinha de fechar. Três cliques
   entre quem aprova e o material. Agora o quadro É o player — aperta o
   play e pronto, do mesmo jeito que a prateleira de anúncios já fazia.
   ===================================================================== */
.drive-arte video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;background:#000;
}
/* Fundo preto só quando é vídeo: por baixo de uma foto ele vira moldura
   escura em volta da arte, e arte se julga no claro. */
.drive-arte:has(video){background:#0b0c12;border-color:rgba(var(--ink-rgb),.2)}
/* Texto e PDF: para LER, e ler não pede tela cheia. Fechado por padrão
   porque nunca são o material — são o roteiro, a observação, o briefing. */
.drive-doc{
  border:1px solid var(--glass-edge);border-radius:12px;
  background:rgba(var(--papel-rgb),.5);overflow:hidden;
}
.drive-doc > summary{
  cursor:pointer;padding:10px 12px;min-height:44px;display:flex;align-items:center;
  font-size:var(--t-nota);color:var(--ink-3);list-style:none;overflow-wrap:anywhere;
}
.drive-doc > summary::-webkit-details-marker{display:none}
.drive-doc > summary::marker{content:""}
.drive-doc > summary::after{content:" ▾";color:var(--ink-4);margin-left:auto;padding-left:8px}
.drive-doc[open] > summary::after{content:" ▴"}
.drive-doc iframe{width:100%;height:min(60vh,480px);border:0;display:block;background:var(--papel)}
/* O nome do arquivo é link para o Drive — é lá que se baixa e se comenta. */
.drive-nome a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.drive-nome a:hover{color:var(--ink);border-bottom-color:var(--laranja)}
/* Imagem no visor: fundo claro e a foto inteira, sem cortar. */
.visor-caixa.clara{background:#f4f5f8}
/* A capa da peça quando ela é o próprio material: ocupa a largura, na
   proporção do arquivo, com teto para não empurrar o resto para fora. */
.peca-capa-item{margin:0 0 14px;max-width:min(100%,340px)}
.peca-capa-item .drive-nome{display:none}
.peca-capa-item .drive-arte{border-radius:14px}
/* =====================================================================
   A PRATELEIRA DE PEÇAS E A FICHA DE UMA.

   A mesma prateleira em três telas — a de quem aprova na agência, a do
   cliente e a do colaborador. Quem aprendeu a usar uma sabe usar as
   três, e é a mesma que a aba de anúncios já ensinou.
   ===================================================================== */
/* Os selos de estado, no lugar dos de veiculação do anúncio. Só o que
   espera decisão ganha fundo cheio: de longe, a prateleira mostra o que
   está parado por sua causa antes de qualquer leitura. */
.selo-espera{background:var(--laranja-forte);color:#fff}
.selo-cliente{background:rgba(var(--papel-rgb),.94);color:var(--azul)}
.selo-ajuste{background:rgba(var(--papel-rgb),.94);color:var(--vermelho)}
.selo-ok{background:rgba(var(--papel-rgb),.94);color:var(--chave-on)}
.selo-producao{background:rgba(var(--papel-rgb),.94);color:var(--ink-4)}
/* O pé do cartão: de quem é a peça, e o tíquete pelo qual se fala dela
   no telefone. Fora do pôster, porque ali dentro já há dois selos e o
   nome — mais uma linha por cima da arte é uma a mais. */
.cartao-pe{
  margin:7px 2px 0;font-size:var(--t-legenda);color:var(--ink-4);line-height:1.35;
  display:flex;gap:8px;align-items:baseline;justify-content:space-between;
  min-width:0;overflow-wrap:anywhere;
}
.cartao-pe b{font-weight:600;flex:none}
/* ---------- a ficha ---------- */
/* Ao contrário da ficha do anúncio, aqui o MATERIAL é a coluna grande: o
   anúncio já rodou e o que importa é o número; a peça ainda não foi ao
   ar e o que importa é olhar para ela. */
.ficha-peca{display:grid;gap:22px;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);
  align-items:start}
@media (max-width:900px){
  .ficha-peca{grid-template-columns:1fr}
}
.peca-lado{display:flex;flex-direction:column;gap:18px;min-width:0}
.peca-lado .bloco{margin:0}
.peca-palco{min-width:0}
.peca-palco-grade{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
/* Arquivo único ocupa o palco inteiro — é o material, não uma miniatura. */
.peca-palco-grade > .drive-item:only-child{max-width:min(100%,560px);margin-inline:auto}
.peca-palco-grade .drive-arte{border-radius:16px}
/* O selo repetido no cabeçalho, agora em linha com o texto. */
.selo-linha{
  display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  background:rgba(var(--papel-rgb),.94);color:var(--ink-2);
  box-shadow:0 2px 8px rgba(var(--sombra-rgb),.12);vertical-align:middle;
}
/* A legenda é para LER e para COPIAR — quem publica cola ela no
   Instagram. Fonte de leitura, largura de leitura, quebra preservada. */
.peca-legenda-texto{
  margin:0 0 12px;font-size:var(--t-denso);line-height:1.6;color:var(--ink-2);
  max-width:62ch;overflow-wrap:anywhere;
}
.peca-decisao .campo{display:block;margin:0 0 10px}
.peca-decisao .campo > b{display:block}
.peca-decisao textarea,.peca-decisao input,.peca-decisao select{width:100%}
.peca-botoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.peca-botoes .btn{flex:1 1 auto;min-height:44px}
/* O caminho da peça na ficha é uma lista aberta, não uma sanfona: aqui
   há espaço, e saber que ela voltou duas vezes muda como se decide. */
/* Os blocos de leitura, embaixo e na largura toda. Três colunas quando
   cabe, porque são três coisas curtas — em coluna única elas viravam uma
   fila comprida de cartões meio vazios. */
.peca-rodape{
  display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:start;margin-top:22px;
}
.peca-rodape .bloco{margin:0}
ol.peca-caminho{
  margin:0;padding:0 0 0 18px;font-size:var(--t-nota);color:var(--ink-3);
  display:flex;flex-direction:column;gap:9px;
}
ol.peca-caminho li b{color:var(--ink-2);font-weight:600;margin-right:6px}
ol.peca-caminho li p{margin:3px 0 0;color:var(--ink-3);overflow-wrap:anywhere}
@media (max-width:760px){
  /* No celular o material vem primeiro e a decisão logo abaixo dele —
     rolar para achar o botão depois de ver o vídeo é o caminho certo. */
  .peca-palco-grade{grid-template-columns:1fr}
  .peca-botoes .btn{flex:1 1 100%}
}
/* =====================================================================
   A VITRINE — o que dá para pedir, para quem não tem plano mensal.

   Fica na aba Materiais do cliente sem pacote. Não é loja: não tem
   carrinho, não tem pagamento. É a resposta a "quanto custa uma arte?"
   dada uma vez, na tela, em vez de por WhatsApp toda semana.
   ===================================================================== */
.vitrine{
  display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  margin:14px 0 18px;
}
.vitrine-item{
  display:flex;flex-direction:column;gap:6px;padding:18px;
  border:1px solid var(--glass-edge);border-radius:18px;
  background:rgba(var(--papel-rgb),.55);
}
.vitrine-item h3{margin:0;font-size:var(--t-corpo);letter-spacing:-.02em}
.vitrine-item .fino{margin:0}
/* O preço até o centavo, e nunca abreviado: o cliente confere com o que
   foi combinado. E margin-top:auto porque cartão em fileira serrilha —
   o que é do rodapé precisa ser empurrado para lá. */
.vitrine-preco{
  margin:auto 0 0;padding-top:10px;
  font-family:var(--display);font-weight:700;font-size:1.18rem;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.vitrine-pedir > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;
  min-height:44px;padding:0 16px;border-radius:999px;
  /* SECUNDÁRIO por padrão (25/09, régua da Apple): eram seis pílulas
     pretas na mesma tela. O preço em destaque faz o trabalho; o preto
     fica para uma ação por seção (.principal). */
  background:rgba(var(--papel-rgb),.9);color:var(--ink);font-size:var(--t-denso);font-weight:600;
  border:1px solid var(--glass-edge);box-shadow:0 4px 14px rgba(var(--sombra-rgb),.08);
}
.vitrine-pedir.principal > summary{background:var(--ink);color:var(--sobre-ink);border-color:transparent}
.vitrine-pedir > summary::-webkit-details-marker{display:none}
.vitrine-pedir > summary::marker{content:""}
.vitrine-pedir > summary:hover{opacity:.9}
/* Aberto, o botão vira rótulo do formulário que ele abriu: continuar
   preto e cheio faria dois botões pretos na mesma caixa, e o de baixo é
   que envia. */
.vitrine-pedir[open] > summary{
  background:transparent;color:var(--ink-3);border-color:var(--glass-edge);
  font-size:var(--t-nota);padding:0;min-height:32px;
}
/* Abrindo o pedido, o cartão toma a fileira inteira: escrever o que se
   precisa numa caixa de 230px é escrever espremido, e o que se escreve
   espremido é curto demais para a gente entender de primeira. */
.vitrine-item:has(details[open]){grid-column:1/-1}
.vitrine-item:has(details[open]) .vitrine-preco{margin-top:0}
/* display:block: dentro de um <label> em bloco, o texto e o campo são
   os dois de linha, e o rótulo ia parar ao LADO da caixa em vez de em
   cima dela. */
.vitrine-pedir textarea{display:block;width:100%;max-width:620px;margin:8px 0 10px}
.vitrine-pedir label{display:block;font-size:var(--t-nota);color:var(--ink-3)}
.vitrine-assessoria .vitrine-pedir{flex:0 0 auto}
.preco-linha{
  display:grid;gap:10px;align-items:end;
  grid-template-columns:minmax(140px,1fr) minmax(200px,2fr) 130px auto;
}
.preco-linha .campo{display:block;margin:0;min-width:0}
.preco-linha .campo > b{display:block;font-size:var(--t-legenda);color:var(--ink-4);margin-bottom:3px}
/* O rótulo só na primeira linha: repetido em cinco linhas ele vira ruído
   e empurra a tabela para baixo. No celular volta em todas, porque lá as
   colunas quebram e a linha de cima deixa de servir de cabeçalho. */
@media (min-width:761px){
  .preco-linha:not(:first-of-type) .campo > b{display:none}
}
.preco-linha input[type=text]{width:100%}
@media (max-width:760px){
  .preco-linha{grid-template-columns:1fr 1fr}
  .preco-linha .campo:nth-child(2){grid-column:1/-1}
}
/* ---------- os dois lados da conta, no lançamento ---------- */
/* O que o cliente paga fica menor e mais claro que o que você paga: na
   hora de lançar, o número que decide é o custo. O preço está ali para
   conferir, não para competir com ele. */
.orcamento-cliente{
  margin:4px 0 0;font-size:var(--t-denso);color:var(--ink-3);
  display:flex;gap:8px;align-items:baseline;
}
.orcamento-cliente b{font-size:var(--t-corpo);font-weight:600;color:var(--ink-2)}
.plano-linha .campo{display:block;margin:0;min-width:0}
.plano-linha .campo > b{display:block;font-size:var(--t-legenda);color:var(--ink-4);margin-bottom:3px}
/* ---------- os planos na vitrine do cliente ---------- */
.planos{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));
  margin:14px 0 0;
}
.plano-item{
  display:flex;flex-direction:column;gap:8px;padding:22px;
  border:1px solid var(--glass-edge);border-radius:20px;
  background:linear-gradient(150deg,rgba(255,145,77,.10),rgba(126,217,87,.09));
}
.plano-item h3{margin:0;font-size:1.1rem;letter-spacing:-.024em}
.plano-item .fino{margin:0}
.plano-preco{margin:6px 0 0;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.plano-preco b{
  font-family:var(--display);font-weight:700;font-size:1.46rem;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.plano-preco span{font-size:var(--t-nota);color:var(--ink-4)}
.plano-itens{
  margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;
  font-size:var(--t-denso);color:var(--ink-3);line-height:1.4;
}
.plano-itens li{padding-left:20px;position:relative}
.plano-itens li::before{
  content:"";position:absolute;left:2px;top:.45em;width:8px;height:8px;border-radius:50%;
  background:var(--laranja);
}
/* margin-top:auto no botão: cartões em fileira serrilham, e o que é do
   rodapé precisa ser empurrado para lá. */
.plano-item .vitrine-pedir{margin-top:auto;padding-top:12px}
@media (max-width:760px){
  .plano-linha{grid-template-columns:1fr 1fr}
}
/* A caixa de "sem legenda": alvo grande, porque marcar isto por engano
   manda a peça ao cliente sem o texto. */
.peca-check{
  display:flex;align-items:center;gap:9px;min-height:44px;margin:0 0 10px;
  font-size:var(--t-denso);color:var(--ink-2);cursor:pointer;
}
.peca-check input{width:20px;height:20px;flex:none}
.peca-check b{font-weight:600}
/* Botão travado: cinza e sem cursor de clique — travado e com cara de
   clicável é pior do que travado. */
.peca-botoes .btn[disabled]{opacity:.42;cursor:not-allowed;filter:saturate(.35)}
.peca-decisao textarea[disabled]{opacity:.5}
/* ---------- o popup "ver o que inclui", igual ao do site ---------- */
.plano-acoes{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.plano-saiba > summary{
  cursor:pointer;list-style:none;font-size:var(--t-nota);font-weight:600;color:var(--ink-2);
  min-height:44px;display:inline-flex;align-items:center;gap:6px;
}
.plano-saiba > summary::-webkit-details-marker{display:none}
.plano-saiba > summary::marker{content:""}
.plano-saiba > summary:hover{color:var(--laranja-forte)}
.plano-popup{max-width:min(560px,calc(100vw - 28px))}
.plano-detalhe{font-size:var(--t-denso);line-height:1.6;color:var(--ink-2)}
.plano-detalhe h3{margin:0 0 6px;font-size:1.18rem;letter-spacing:-.024em}
.plano-detalhe h4{margin:16px 0 6px;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.plano-detalhe p{margin:0 0 9px}
.plano-detalhe .mtag{font-size:.68rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:2px}
.plano-detalhe .mprice{font-family:var(--display);font-weight:700;font-size:1.5rem;
  letter-spacing:-.03em;color:var(--ink);margin:0 0 10px}
.plano-detalhe .mprice .mper-inline{font-family:inherit;font-size:var(--t-nota);font-weight:500;
  color:var(--ink-4);letter-spacing:0}
.plano-detalhe .destaque{color:var(--laranja-forte);font-weight:600}
.plano-detalhe .nota{font-size:var(--t-nota);color:var(--ink-4)}
.plano-detalhe ul{margin:0 0 10px;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:7px}
.plano-detalhe li{padding-left:20px;position:relative}
.plano-detalhe li::before{content:"";position:absolute;left:2px;top:.45em;
  width:8px;height:8px;border-radius:50%;background:var(--laranja)}
.plano-popup-pedir{margin-top:16px;padding-top:14px;border-top:1px solid var(--glass-edge)}
.plano-popup-pedir label{display:block;font-size:var(--t-nota);color:var(--ink-3)}
.plano-popup-pedir textarea{display:block;width:100%;margin:8px 0 10px}
/* A etiqueta "Mais escolhido" que o site põe em um dos planos. */
.plano-tag{
  align-self:flex-start;padding:3px 10px;border-radius:999px;
  font-size:var(--t-rotulo);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--ink);color:var(--sobre-ink);
}
/* Subtítulo dentro do bloco do relatório: separa as duas contas do mês
   sem precisar de dois blocos — elas são a mesma leitura, vista de dois
   lados. */
.rel-sub{
  margin:0 0 12px;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);
}
/* =====================================================================
   A BOTOEIRA DE LANÇAR — um botão por tipo de peça.

   Quem cria lança a mesma coisa dez vezes por semana, e a primeira
   escolha que ele faz é "o que eu fiz". Botão grande, com o nome do tipo
   e quanto vale: ele confere no clique se acertou, antes de qualquer
   formulário abrir.
   ===================================================================== */
.botoeira-tipos{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
}
/* :not([open]) EM TODAS. Aberto, este mesmo <summary> deixa de ser o
   botão e vira o "fechar" do popup, que é fixo e mora no canto do
   painel — regras de botão continuando a valer ali faziam o width:100%
   de um elemento fixo virar uma barra atravessando a tela inteira, por
   cima do quadro que ele deveria fechar.

   align-items:stretch, e não flex-start: com flex-start o nome comprido
   ("Vídeo montagem do zero com IA") não quebrava — o texto media o que
   quisesse e vazava 57px para fora do botão, por cima do vizinho. */
.peca-botao:not([open]) > summary{
  display:flex;flex-direction:column;align-items:stretch;gap:3px;
  width:100%;min-height:74px;padding:16px 18px;border-radius:16px;
  text-align:left;line-height:1.25;justify-content:center;white-space:normal;
}
.peca-botao:not([open]) > summary b{
  font-weight:600;font-size:var(--t-denso);letter-spacing:-.014em;
  min-width:0;overflow-wrap:anywhere;
}
/* O valor menor e mais claro: ele confere a escolha, não a comanda. */
.peca-botao:not([open]) > summary i{
  font-style:normal;font-size:var(--t-nota);color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}
.peca-botao:not([open]) > summary:hover{border-color:var(--laranja)}
/* Aberto, sobra o ✕: o nome e o valor já estão no título do quadro. */
.peca-botao[open] > summary b,
.peca-botao[open] > summary i{display:none}
/* Chegando de um link com #lancar, a botoeira se acende por um instante:
   sem isso o salto é mudo, e quem clicou em "lançar uma peça de fulano"
   acha que o clique não funcionou. */
#lancar:target{animation:acende-lancar 1.6s ease-out}
@keyframes acende-lancar{
  0%   {box-shadow:0 0 0 3px var(--laranja)}
  100% {box-shadow:0 0 0 3px rgba(255,145,77,0)}
}
@media (prefers-reduced-motion:reduce){
  #lancar:target{animation:none;box-shadow:0 0 0 2px var(--laranja)}
}
/* =====================================================================
   NA MÃO DA EQUIPE — lista por pessoa, uma linha por demanda.

   Cada linha fechada mostra o que se pergunta de relance: de qual
   cliente é, o começo do texto, e quando entrou. O resto abre em quem
   for clicado. Antes eram cartões abertos, um embaixo do outro: com seis
   já era rolagem, e a porta de fora enche isto rápido.
   ===================================================================== */
.equipe-quem{
  margin:20px 0 6px;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);
  display:flex;align-items:center;gap:8px;
}
.equipe-quem:first-of-type{margin-top:4px}
.equipe-lista{display:flex;flex-direction:column}
.equipe-item{border-top:1px solid var(--glass-edge)}
.equipe-item:last-of-type{border-bottom:1px solid var(--glass-edge)}
.equipe-item > summary{
  cursor:pointer;list-style:none;display:grid;align-items:baseline;gap:4px 12px;
  padding:11px 2px;min-height:44px;
  grid-template-columns:minmax(120px,1.1fr) minmax(0,2.4fr) auto;
}
.equipe-item > summary::-webkit-details-marker{display:none}
.equipe-item > summary::marker{content:""}
.equipe-item > summary:hover{background:rgba(var(--ink-rgb),.026)}
.equipe-item[open] > summary{background:rgba(var(--ink-rgb),.04)}
.equipe-cliente{font-weight:600;font-size:var(--t-denso);color:var(--ink);
  min-width:0;overflow-wrap:anywhere}
/* O resumo some antes do resto quando falta largura: cliente, tíquete e
   data são o que identifica a linha; o texto inteiro está a um clique. */
.equipe-resumo{
  font-size:var(--t-denso);color:var(--ink-3);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.equipe-quando{
  font-size:var(--t-nota);color:var(--ink-4);white-space:nowrap;
  display:flex;align-items:baseline;gap:8px;justify-self:end;
}
.equipe-urgente{
  font-style:normal;font-size:var(--t-rotulo);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;background:var(--vermelho);
  padding:2px 7px;border-radius:999px;
}
.equipe-corpo{padding:2px 2px 16px}
.equipe-corpo .pedido-texto{margin:0 0 12px;font-size:var(--t-denso);line-height:1.55}
@media (max-width:760px){
  /* Uma coluna: o resumo sai, porque cliente + data + tíquete já dizem
     qual linha é, e o texto inteiro abre no toque. */
  .equipe-item > summary{grid-template-columns:1fr auto;padding:12px 2px}
  .equipe-resumo{display:none}
}
/* ================= O SINO =================
   Fora da barra de abas, à direita do "Sair". A bolinha é a do
   telefone: vermelha, no canto do ícone, com o número por cima — e "9+"
   acima de nove, porque o número exato de 23 avisos não muda decisão
   nenhuma e estoura o círculo. */
.sino{position:relative;flex:none}
.sino summary{
  list-style:none;cursor:pointer;position:relative;display:inline-flex;
  align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:999px;color:var(--ink-2);background:rgba(var(--ink-rgb),.045);
  transition:background .16s,color .16s;
}
.sino summary::-webkit-details-marker{display:none}
.sino summary:hover{background:rgba(var(--ink-rgb),.09);color:var(--ink)}
.sino[open] summary{background:var(--ink);color:var(--sobre-ink)}
.sino summary:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.sino-bolinha{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--vermelho);color:#fff;
  font-size:var(--t-legenda);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  border:2px solid var(--papel);box-shadow:0 2px 6px rgba(198,43,69,.35);
}
.sino-painel{
  position:absolute;right:0;top:calc(100% + 9px);z-index:140;
  width:min(370px,calc(100vw - 28px));padding:8px;border-radius:20px;
  max-height:min(74vh,560px);overflow:auto;-webkit-overflow-scrolling:touch;
  /* FUNDO SÓLIDO E SEM VIDRO. O painel nasce DENTRO da .nav-in, que já
     tem backdrop-filter, e vidro sobre vidro não borra nada: a tela
     aparecia por baixo dos avisos, e os dois ficavam ilegíveis. Aqui o
     que vale é ler o aviso, não ver o que está atrás dele. */
  background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.sino-titulo{
  font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);padding:8px 12px 6px;margin:0;
}
.sino-vazio{padding:14px 12px 18px;margin:0;font-size:var(--t-denso);color:var(--ink-4)}
.sino-lista{display:flex;flex-direction:column}
.sino-item{
  display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:start;
  gap:10px;padding:11px 12px;border-radius:14px;text-decoration:none;
  color:var(--ink-2);transition:background .14s;
}
/* O sino mora dentro da .nav-links, onde TODO <a> é uma linha só que não
   quebra — e aquela regra (.nav-links a) tem mais peso que uma classe
   sozinha. Por isso o desempate vem escrito assim, e alcança o título
   junto: sem ele, "Rotina atrasada · Alivion Clínica de Especialidades"
   passava por cima da data e a empurrava para fora do painel. */
.nav-links a.sino-item,.sino-texto b,.sino-texto i{white-space:normal}
.sino-item:hover{background:rgba(var(--ink-rgb),.055)}
.sino-item.novo{background:rgba(255,145,77,.09)}
.sino-item.novo:hover{background:rgba(255,145,77,.16)}
/* A marca colorida diz o TIPO sem precisar ler: vermelho é o que voltou,
   laranja é o que espera você, cinza é o que só avisa. */
.sino-marca{width:8px;height:8px;border-radius:999px;margin-top:6px;background:var(--ink-4)}
.sino-devolvida,.sino-reprovada{background:var(--vermelho)}
.sino-atrasada{background:var(--laranja-forte)}
.sino-entregue,.sino-aprovar{background:var(--laranja)}
.sino-demanda,.sino-pedido{background:var(--verde-forte)}
.sino-texto{display:block;min-width:0}
.sino-texto b{
  font-size:var(--t-denso);font-weight:600;color:var(--ink);line-height:1.3;
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sino-texto i{
  display:block;font-style:normal;font-size:var(--t-nota);color:var(--ink-4);
  line-height:1.35;margin-top:2px;overflow-wrap:anywhere;white-space:normal;
  /* Duas linhas no máximo: um pedido comprido não pode empurrar os
     outros sete avisos para fora da tela. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sino-quando{font-size:var(--t-legenda);color:var(--ink-4);white-space:nowrap;margin-top:2px}
/* O push mora no pé do sino: é aqui que a pessoa pensa "queria ter
   sabido disso antes". */
.sino-push{border-top:1px solid rgba(var(--ink-rgb),.08);margin-top:6px;padding:12px 12px 6px}
.sino-push-titulo{
  font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);margin:0 0 8px;
}
.push-botao{
  width:100%;min-height:40px;border:0;border-radius:12px;cursor:pointer;
  background:var(--ink);color:var(--sobre-ink);font:inherit;font-size:var(--t-denso);font-weight:600;
  padding:10px 14px;transition:opacity .16s;
}
.push-botao:hover{opacity:.9}
.push-botao.on{background:rgba(var(--ink-rgb),.06);color:var(--ink-2)}
.push-botao[disabled]{opacity:.5;cursor:wait}
.push-recado{margin:8px 0 0;font-size:var(--t-nota);color:var(--ink-4);line-height:1.45}
.push-recado.push-passo{color:var(--ink-2)}
.push-recado.push-erro{color:var(--vermelho)}
@media (max-width:760px){
  /* Alvo de toque de 44px: o sino é o botão mais apertado da barra. */
  .sino summary{width:44px;height:44px}
  /* O SINO ESTAVA SAINDO DA TELA. Com o nome de uma empresa comprida no
     trocador, a fileira de atalhos ficava mais larga que a barra e
     transbordava pela direita — o sino metade fora, e o painel dele
     ancorado nesse metade fora. Deixar os dois encolherem resolve na
     origem: o nome da empresa corta, o sino fica inteiro. */
  /* A fileira precisa OCUPAR a coluna para poder encolher dentro dela.
     Com justify-self:end ela nasce do tamanho do conteúdo, e conteúdo
     grande simplesmente vaza — foi assim que o sino saiu pela direita. */
  .nav-links{justify-self:stretch;width:100%;min-width:0;gap:9px;
    flex-wrap:nowrap;justify-content:flex-end}
  /* Quem cede espaço é o nome da empresa, que já corta com reticências.
     O "Sair" e o sino têm tamanho fixo: são alvo de toque. */
  .trocador{flex:0 1 auto;min-width:0}
  .trocador summary{max-width:100%;width:100%}
  /* E O MENU DE EMPRESAS SAÍA PELA ESQUERDA DA TELA. Ele nasce ancorado
     no botão do nome da empresa (right:0 sobre .trocador), e esse botão
     acabou de encolher para o sino caber. Numa tela de 390px o botão
     ficou com 134px e a lista com 304: ela começava em −73px, fora da
     tela, e todo nome aparecia cortado pela metade — "ças Maringá",
     "alvanização", "so Imóveis".

     No celular ele passa a se ancorar na BARRA INTEIRA, de margem a
     margem, que é onde ele sempre coube. É por isso que o .trocador
     larga o position:relative aqui e a .nav-in assume. */
  .trocador{position:static}
  .nav-in{position:relative}
  .trocador-lista{left:12px;right:12px;width:auto;max-width:none;top:calc(100% + 8px)}
  /* NADA DE position:fixed AQUI. A .nav-in tem backdrop-filter, e um
     elemento com backdrop-filter vira o bloco de referência de todo
     descendente fixo — o painel iria parar dentro da barra em vez de
     na tela. Absoluto pela direita do sino já cobre a largura toda. */
  /* A largura desconta as duas margens: a da barra até a borda da tela
     (uns 35px, à direita do sino) e uma folga igual do outro lado.
     Com 100vw - 28px o painel começava sete pixels fora da tela. */
  .sino-painel{width:min(370px,calc(100vw - 48px));max-height:70vh;border-radius:22px}
  .sino-item{padding:13px 12px}
  .push-botao{min-height:44px}
}
.sino-corte{border-top:1px solid rgba(var(--ink-rgb),.08);margin-top:4px;padding-top:12px}
/* ================= A GRADE DE AVISOS =================
   A mesma chave da lista de clientes, agora como caixa de marcar dentro
   de um formulário — dezesseis chaves não podem ser dezesseis
   formulários, cada um com o seu botão. */
.chave-liga{display:inline-flex;cursor:pointer;position:relative}
.chave-liga input{position:absolute;opacity:0;width:0;height:0}
.chave-liga input:checked + .chave{background:var(--chave-on)}
.chave-liga input:checked + .chave .chave-bola{transform:translateX(20px)}
.chave-liga input:focus-visible + .chave{outline:2px solid var(--laranja-forte);outline-offset:2px}
.chave-liga input:disabled + .chave{opacity:.4;cursor:not-allowed}
.grade-avisos{width:100%;border-collapse:collapse}
.grade-avisos th{
  text-align:left;font-family:var(--display);font-size:var(--t-rotulo);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
  padding:0 10px 10px 0;white-space:nowrap;
}
.grade-avisos th.canal{text-align:center;width:88px}
.grade-avisos td{padding:11px 10px 11px 0;border-top:1px solid rgba(var(--ink-rgb),.07)}
.grade-avisos td.canal{text-align:center}
.grade-avisos td b{display:block;font-size:var(--t-denso);font-weight:600;color:var(--ink)}
.grade-avisos td i{
  display:block;font-style:normal;font-size:var(--t-nota);color:var(--ink-4);margin-top:2px;
}
.grade-nota{font-size:var(--t-nota);color:var(--ink-4);margin:14px 0 0;line-height:1.5}
@media (max-width:560px){
  .grade-avisos th.canal,.grade-avisos td.canal{width:64px}
  .grade-avisos td{padding:13px 6px 13px 0}
  .grade-avisos td i{display:none}
  /* Três canais no celular: cada coluna de chave encolhe até a chave
     (44px) e o título "WhatsApp" perde o espaçamento para caber. */
  .grade-avisos.tres-canais th.canal,.grade-avisos.tres-canais td.canal{width:54px}
  .grade-avisos.tres-canais th.canal{letter-spacing:.04em;font-size:var(--t-legenda);padding-right:4px}
  .grade-avisos.tres-canais td{padding-right:4px}
}
/* ================= O RETRATO NA BARRA =================
   Leva ao perfil. No celular ele toma o lugar do "Sair", que passou a
   morar dentro do perfil — a barra não cabe os dois, e num aplicativo
   de telefone é dentro do próprio perfil que se procura a saída. */
.retrato-nav{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;overflow:hidden;
  background:var(--laranja);color:#fff!important;text-decoration:none;
  font-size:var(--t-nota);font-weight:700;letter-spacing:.02em;
  border:2px solid transparent;transition:border-color .16s,transform .16s;
}
.retrato-nav img{width:100%;height:100%;object-fit:cover;display:block}
.retrato-nav:hover{transform:translateY(-1px)}
.retrato-nav.on{border-color:var(--ink)}
.retrato-nav:focus-visible{outline:2px solid var(--laranja-forte);outline-offset:2px}
@media (max-width:760px){
  /* O "Sair" sai da barra: ele mora dentro do perfil, e a barra não
     cabe os dois. O retrato é a porta. */
  .nav-links > a.so-largo{display:none}
  .retrato-nav{width:44px;height:44px}
}
/* ================= A TELA DO PERFIL ================= */
.perfil-topo{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.perfil-foto{flex:none;margin:0}
.retrato{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:96px;height:96px;border-radius:999px;overflow:hidden;cursor:pointer;
  background:var(--laranja);color:#fff;
}
.retrato img{width:100%;height:100%;object-fit:cover;display:block}
.retrato-letras{font-size:2rem;font-weight:700;letter-spacing:.02em}
.retrato input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.retrato-troca{
  position:absolute;left:0;right:0;bottom:0;padding:5px 0;text-align:center;
  background:rgba(var(--ink-rgb),.62);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.perfil-quem{min-width:0;flex:1 1 240px}
.perfil-quem h1{margin:0 0 2px;font-size:1.6rem;line-height:1.2;overflow-wrap:anywhere}
.perfil-papel{
  margin:8px 0 0;display:inline-block;padding:4px 11px;border-radius:999px;
  background:rgba(var(--ink-rgb),.06);font-size:var(--t-nota);font-weight:600;color:var(--ink-2);
}
.perfil-tirar{margin:10px 0 0}
.link-magro{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:var(--t-nota);color:var(--ink-4);text-decoration:underline;
}
.link-magro:hover{color:var(--vermelho)}
/* Campo de formulário não tem por que ter 700 pixels de largura numa
   tela grande: ninguém digita um nome desse tamanho, e o campo esticado
   é o que faz a tela parecer de outro site. O resto do bloco continua
   inteiro — quem estreita é só o formulário. */
.form-estreito{max-width:460px}
.chave-fora{color:var(--ink-4);font-size:var(--t-corpo);cursor:help}
.perfil-push{border-top:1px solid rgba(var(--ink-rgb),.08);margin-top:22px;padding-top:18px}
.perfil-push .push-botao{max-width:320px}
.aparelhos{display:flex;flex-direction:column;gap:10px}
.aparelho{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 15px;border-radius:14px;background:rgba(var(--ink-rgb),.035);
}
.aparelho.aqui{background:rgba(255,145,77,.10)}
.aparelho b{display:block;font-size:var(--t-denso);font-weight:600;color:var(--ink)}
.aparelho i{display:block;font-style:normal;font-size:var(--t-nota);color:var(--ink-4);margin-top:2px}
.aparelho form{margin:0;flex:none}
.vazio-magro{margin:0;font-size:var(--t-denso);color:var(--ink-4)}
.perfil-saidas{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.perfil-saidas form{margin:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.perfil-saidas .dica{margin:0}
@media (max-width:560px){
  .perfil-topo{gap:16px}
  .retrato{width:78px;height:78px}
  .retrato-letras{font-size:1.6rem}
  .aparelho{flex-direction:column;align-items:flex-start;gap:10px}
  .perfil-saidas .btn{width:100%;text-align:center}
}
/* Demanda vencida: a data fica vermelha e forte. O que importa numa
   lista de trabalho é o que já passou da hora, não o que nasceu ontem. */
.pedido-quando.venceu{color:var(--vermelho);font-weight:700}
/* Editar o texto da demanda na própria linha. O campo nasce com a cara
   do texto que ele substitui, para a lista não virar formulário. */
.pedido-editar{margin:0 0 12px}
.pedido-editar textarea{
  width:100%;font-size:var(--t-denso);line-height:1.55;padding:11px 13px;border-radius:12px;
  resize:vertical;min-height:76px;
}
.pedido-editar .btn{margin-top:8px}
/* A pergunta que vem depois de lançar uma peça a partir de uma demanda.
   Faixa no topo da tela para onde a pessoa voltou, e não popup: quem
   acabou de salvar não quer outra janela pedindo mais um clique antes de
   ver o que fez. */
.pergunta-demanda{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 16px;padding:15px 18px;border-radius:16px;
  background:rgba(255,145,77,.10);border:1px solid rgba(255,145,77,.30);
}
.pergunta-demanda b{display:block;font-size:var(--t-corpo);color:var(--ink);font-weight:700}
.pergunta-demanda i{
  display:block;font-style:normal;font-size:var(--t-denso);color:var(--ink-3);
  margin-top:3px;overflow-wrap:anywhere;
}
.pergunta-botoes{display:flex;gap:10px;flex:none;flex-wrap:wrap}
.pergunta-botoes form{margin:0}
@media (max-width:560px){
  .pergunta-demanda{flex-direction:column;align-items:stretch}
  .pergunta-botoes .btn{width:100%;text-align:center;min-height:44px}
}
/* ================= RECADOS =================
   A tela de escrever e a de ler. */
.rec-rotulo{
  font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);margin:22px 0 10px;
}
.rec-form .campo:first-of-type{margin-top:0}
.rec-dois{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rec-canais{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:6px}
.rec-canais label{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:var(--t-denso);color:var(--ink-2);cursor:pointer;
}
.rec-canais input{width:auto;margin:0}
.quem-recebe{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.quem{
  display:inline-flex;align-items:baseline;gap:6px;padding:6px 11px;border-radius:999px;
  background:rgba(var(--ink-rgb),.05);font-size:var(--t-denso);color:var(--ink-2);
}
.quem i{font-style:normal;font-size:var(--t-legenda);color:var(--ink-4)}
.quem.sem-email{background:var(--vermelho-fraco,rgba(198,43,69,.10))}
.quem.leu{background:rgba(126,217,87,.16)}
.conferir-fim .acoes{margin-top:18px}
.grupos{display:flex;flex-direction:column;gap:8px}
.grupo{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 15px;border-radius:13px;background:rgba(var(--ink-rgb),.035);
}
.grupo b{font-size:var(--t-denso);color:var(--ink)}
.grupo i{font-style:normal;font-size:var(--t-nota);color:var(--ink-4);margin-left:8px}
.grupo form{margin:0}
.recado-linha summary{cursor:pointer;list-style:none}
.recado-linha summary::-webkit-details-marker{display:none}
.recado-linha[open] summary{margin-bottom:10px}
.recado-corpo{margin:0;font-size:var(--t-denso);line-height:1.6;color:var(--ink-2);
  overflow-wrap:anywhere;white-space:normal}
.recado-quem{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.recado-feito{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 18px;padding:15px 18px;border-radius:16px;
  background:var(--verde-fraco,rgba(126,217,87,.14));border:1px solid rgba(62,142,36,.25);
}
.recado-feito b{display:block;font-size:var(--t-corpo);color:var(--ink)}
.recado-feito i{display:block;font-style:normal;font-size:var(--t-denso);color:var(--ink-3);margin-top:3px}
.recado-feito form{margin:0;flex:none}
/* a tela de ler */
.recado-card{margin-bottom:14px}
.recado-card.novo{border-left:3px solid var(--laranja)}
.recado-card.atencao.novo{border-left-color:var(--vermelho)}
.recado-topo{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:10px}
.recado-topo h2{margin:0;font-size:1.15rem;line-height:1.3}
.recado-quando{font-size:var(--t-nota);color:var(--ink-4);white-space:nowrap}
.recado-corte{
  font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);margin:28px 0 12px;
}
/* A faixa do recado que pede atenção — mesma geometria da barra do
   administrador. Não é cortina: travar o painel do dono do varejão no
   meio do expediente é o oposto da regra da casa. */
.faixa-recado{padding-top:10px;padding-bottom:0}
.faixa-recado p{
  margin:0;font-size:var(--t-denso);color:var(--ink-2);
  border-left:3px solid var(--laranja);padding:11px 15px;border-radius:12px;
  background:rgba(255,145,77,.10);display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.faixa-recado b{color:var(--ink);font-weight:700}
.faixa-recado span{color:var(--ink-4);font-size:var(--t-nota)}
.faixa-recado a{
  color:var(--laranja-forte);font-weight:600;white-space:nowrap;margin-left:auto;
  min-height:44px;display:flex;align-items:center;
}
/* A faixa da demonstração. Mesma geometria da faixa de recado, cor
   diferente de propósito: recado é da agência para o cliente, esta é um
   aviso sobre a própria tela. */
.faixa-demo{padding-top:10px;padding-bottom:0}
.faixa-demo p{
  margin:0;font-size:var(--t-denso);color:var(--ink-2);
  border-left:3px solid var(--amarelo);padding:11px 15px;border-radius:12px;
  background:rgba(255,222,89,.20);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
}
.faixa-demo b{color:var(--ink);font-weight:700;white-space:nowrap}
.faixa-demo span{color:var(--ink-3);font-size:var(--t-nota);line-height:1.45}
.sino-recado{background:var(--laranja)}
.sino-recado_urgente{background:var(--vermelho)}
.acoes-quando{white-space:nowrap}
.acoes-quando i{display:block;font-style:normal;font-size:var(--t-nota);color:var(--ink-4)}
table.dados td i{display:block;font-style:normal;font-size:var(--t-nota);color:var(--ink-4);margin-top:2px}
/* ================= O VERSÍCULO DO DIA =================
   Discreto de propósito, e por isso NÃO é um .bloco.glass: mais um
   cartão branco no fim da página competiria com os números, e o combinado
   é o contrário — ele é despedida, não é conteúdo. Um fio, um texto
   centrado, e acabou. Ver o cabeçalho de inc/versiculo.php. */
.versiculo{
  max-width:52ch;margin:38px auto 4px;padding:22px 6px 0;
  border-top:1px solid var(--hairline);text-align:center;
}
.versiculo-rotulo{
  margin:0 0 10px;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);font-weight:600;
}
.versiculo blockquote{
  margin:0 0 9px;font-size:var(--t-corpo);line-height:1.62;color:var(--ink-2);
  font-style:italic;text-wrap:pretty;
}
.versiculo blockquote::before{content:"\201C"}
.versiculo blockquote::after{content:"\201D"}
.versiculo cite{
  font-style:normal;font-size:var(--t-nota);font-weight:600;color:var(--verde-forte);
}
@media (max-width:560px){
  .versiculo{margin-top:30px}
  .versiculo blockquote{font-size:var(--t-denso)}
}
/* "Editar a legenda" — o <summary> vestido de botão, ao lado do copiar.
   O triângulo do navegador sai: dois botões lado a lado, um com setinha e
   outro sem, parecem coisas diferentes quando fazem a mesma coisa. */
.editar-legenda{display:inline-block}
.editar-legenda>summary{list-style:none;cursor:pointer;display:inline-flex}
.editar-legenda>summary::-webkit-details-marker{display:none}
.editar-legenda[open]{display:block;width:100%;margin-top:4px}
.editar-legenda textarea{min-height:180px;font-size:var(--t-denso);line-height:1.5}
/* "Aprovado por Fulano" embaixo do cartão da peça — ver aprovar.php.
   O cartão da prateleira já tem largura própria; este bloco só empilha o
   nome debaixo dele sem esticar nada. */
.peca-com-autor{display:flex;flex-direction:column}
.peca-quem-ok{margin:6px 2px 0;font-size:var(--t-nota);line-height:1.4}
.peca-quem-ok b{color:var(--ink-2);font-weight:600}
/* ---------------------------------------------------------------------
   ACHAR O CLIENTE ESCREVENDO — trocador do topo e campo de formulário.
   São 35 clientes e a lista só cresce; rolar procurando com o olho já
   estava custando mais do que digitar três letras.
   --------------------------------------------------------------------- */
/* O display:block do .trocador-item ganha do [hidden] do HTML; sem esta
   linha o filtro esconde e o nome continua na tela. Mesma pegadinha da
   .caixa-lista. */
.trocador-item[hidden]{display:none}
/* A busca gruda no topo do menu: com 35 nomes rolando, o campo sumia
   para cima e não dava para corrigir o que se digitou. */
.trocador-lista .busca-lista{
  position:sticky;top:0;z-index:2;margin:0 0 6px;padding:0 2px 6px;background:var(--papel);
}
.trocador-lista .busca-lista input[type=search]{background:var(--papel)}
/* O campo de escrever cliente dentro de formulário. Herda o desenho dos
   outros campos da casa — a diferença é só o menu escondido embaixo. */
.escolher-empresa{position:relative}
.escolher-empresa select[hidden]{display:none}
/* ---------------------------------------------------------------------
   ABA TRANCADA E A TELA QUE ELA ABRE.

   NÃO confundir com a .cortina lá de cima: aquela é o véu da empresa
   suspensa, que cobre a página inteira com position:fixed. Esta aqui é
   um bloco na página, e chamá-la de cortina fez a tela nascer flutuando
   por cima dos planos.

   A aba fechada continua na barra de propósito: ela é o convite. Fica
   apagada e com um cadeado — o suficiente para ler "tem coisa aqui" sem
   parecer defeito.
   --------------------------------------------------------------------- */
.nav-aba.trancada{color:var(--ink-4);opacity:.72}
.nav-aba.trancada:hover{opacity:1}
.aba-cadeado{margin-left:5px;vertical-align:-1px;opacity:.75}
.nav-aba.trancada.on{opacity:1}
/* Largura de bloco, como qualquer outra seção da casa — o que é
   centrado é o TEXTO dentro dele. Estreitando o cartão, ele e os planos
   logo abaixo ficavam com bordas desencontradas, cada um começando num
   lugar. */
.tranca{text-align:center}
.tranca > *{margin-left:auto;margin-right:auto}
.tranca-selo{
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;margin-bottom:6px;border-radius:50%;
  background:rgba(255,145,77,.13);color:var(--laranja);
}
.tranca h1{margin:0 0 10px;font-size:clamp(1.35rem,3.4vw,1.85rem)}
.tranca-oque{margin:0 auto 14px;max-width:46ch;color:var(--ink-2)}
/* O recado do administrador em destaque: é a frase que responde "e como
   eu faço para ter isto?", e é a única da tela que ele escreveu. */
.tranca-recado{
  margin:0 auto;max-width:46ch;padding:13px 17px;border-radius:15px;
  background:rgba(255,145,77,.1);color:var(--ink);font-weight:500;
}
.tranca-acoes{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px;
}
@media (max-width:520px){
  .tranca-acoes{flex-direction:column}
  .tranca-acoes .btn{width:100%}
}
/* O mês inteiro, no pé do bloco de datas. O que já passou fica riscado e
   apagado em vez de sumir: quem abre dia 20 precisa saber que a data do
   dia 7 existiu — é o que explica o mês. */
.datas-do-mes s{color:var(--ink-4);text-decoration-thickness:1px}
.datas-do-mes span{font-variant-numeric:tabular-nums;color:var(--ink-4)}
/* ---- a cascata ---- */
.dre-cascata{width:100%;overflow-x:auto;padding:4px 0 0;margin-bottom:6px}
.dre-cascata svg{display:block}
.dre-val{font-size:var(--t-nota);font-weight:600;fill:var(--ink);font-family:var(--corpo)}
.dre-rot{font-size:var(--t-legenda);fill:var(--ink-3);font-family:var(--corpo)}
/* A regra de .cob-fora mora junto do bloco das cobranças, mais abaixo.
   Havia uma segunda cópia aqui, do tempo em que isto era tabela: as duas
   se multiplicavam (0,5 × 0,55) e a linha encerrada saía com 27,5% de
   opacidade — ilegível, em vez de discreta. */
/* AS COBRANÇAS DO CLIENTE — ficha, nunca tabela.

   Sete colunas de dinheiro não cabem num cartão do .admin-grid, que dá
   minmax(290px,1fr). Espremida ali, a tabela caiu na regra que quebra a
   primeira coluna em qualquer letra — feita para as tabelas de três
   colunas do admin — e "Assessoria de marketing" desceu uma letra por
   linha. É o mesmo caminho que as contas ligadas já tinham feito, e pelo
   mesmo motivo: o tamanho que importa é o do cartão, não o do monitor. */
.rolagem:has(table.cobs){overflow:visible;margin:0;padding:0}
/* DOIS BOTÕES NO FIM DE UMA LINHA DA FILA — "Cobrar no zap" e "Recebi",
   "Ver as peças" e "Acertei R$ 135,00".

   A regra da casa dá flex:none a form e .btn soltos no .fila-item, e
   .fila-texto vem com min-width:0 e overflow-wrap:anywhere — feitos para
   o link de 300 caracteres que o cliente cola. Com DOIS botões de 550px
   ao lado, esse par vira uma armadilha: o texto encolhe até zero em vez
   de empurrar, e "Acerto com Davi" desce como "Acert / o com / Davi".

   O conserto é dar um PISO ao texto, e não uma media query: este bloco é
   largo hoje, mas media query mede a janela e um dia ele cabe num cartão.
   Com piso, a linha quebra sozinha quando o que sobra não serve — e os
   botões descem inteiros para a linha de baixo. */
.fila-item:has(.fila-acoes){flex-wrap:wrap}
.fila-item:has(.fila-acoes) .fila-texto{min-width:min(100%,15rem)}
.fila-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-left:auto}
.fila-acoes form{margin:0}
/* ---- a caixa de confirmação com VALOR ----

   Boleto pago com juros, cliente que pediu desconto, arredondamento do
   PIX: na maioria das vezes é o valor combinado, mas quando não é, o
   painel tem de guardar o que aconteceu, não o que estava previsto.

   Os modificadores ficam presos ao bloco (.modal-gm-diferenca.e-mais) e
   não soltos: "e-" é o prefixo que o painel monta em tempo de execução
   para o estado da peça, e nome curto solto neste arquivo já colidiu
   quatro vezes. */
.modal-gm-valor{display:block;margin-top:18px}
.modal-gm-valor > span{
  display:block;font-size:var(--t-denso);color:var(--ink-3);margin-bottom:6px;
}
.modal-gm-valor input{
  width:100%;min-height:52px;padding:12px 15px;border-radius:13px;
  border:1px solid rgba(var(--ink-rgb),.16);background:var(--papel);
  font-family:var(--display);font-size:1.35rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);
}
.modal-gm-valor input:focus{
  outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(255,145,77,.18);
}
.modal-gm-diferenca{
  margin:9px 0 0;font-size:var(--t-denso);font-weight:500;
}
.modal-gm-diferenca.e-mais{color:var(--verde-forte)}
.modal-gm-diferenca.e-menos{color:var(--vermelho)}
/* ---- O HISTÓRICO DE RECADOS: lista que abre, igual caixa de e-mail ----

   Era uma tabela de quatro colunas. Cada recado passou a carregar o
   texto, quem leu nome por nome e três ações — e isso não cabe numa
   célula. Mesmo caminho das contas ligadas e das cobranças: dentro de um
   cartão, tabela vira ficha.

   O corpo é escondido pelo próprio <details>, nativo. O CSS não mexe
   nisso: conteúdo de <details> fechado é INERTE no Chrome, e a primeira
   versão de outro bloco desta casa tentou display:none e ficou pintando
   sem responder a clique. */
.rec-lista{margin-top:4px}
.rec-item{border-top:1px solid var(--glass-edge)}
.rec-item:last-of-type{border-bottom:1px solid var(--glass-edge)}
.rec-item > summary{
  cursor:pointer;list-style:none;display:grid;align-items:baseline;gap:4px 12px;
  padding:12px 2px;min-height:44px;
  grid-template-columns:minmax(0,2.2fr) minmax(110px,1fr) auto;
}
.rec-item > summary::-webkit-details-marker{display:none}
.rec-item > summary::marker{content:""}
.rec-item > summary:hover{background:rgba(var(--ink-rgb),.026)}
.rec-item[open] > summary{background:rgba(var(--ink-rgb),.04)}
.rec-titulo{font-weight:600;font-size:var(--t-denso);color:var(--ink);min-width:0;
  overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.rec-para{font-size:var(--t-nota);color:var(--ink-3);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-placar{font-size:var(--t-nota);color:var(--ink-4);white-space:nowrap;justify-self:end}
.rec-placar b{color:var(--ink-2)}
/* Arquivado continua na lista — é histórico —, mas recuado. */
.rec-item.guardado > summary{opacity:.6}
.rec-corpo{padding:4px 2px 18px}
.rec-acoes{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-start;margin-top:16px}
.rec-acoes form{margin:0}
/* O editar abre no lugar, dentro do recado: sem tela nova, sem perder o
   que ele estava lendo. O summary é o próprio botão. */
.rec-editar > summary{list-style:none;cursor:pointer}
.rec-editar > summary::-webkit-details-marker{display:none}
.rec-editar > summary::marker{content:""}
.rec-form-editar{
  margin-top:14px;padding:16px;border-radius:var(--r-sm);
  background:rgba(var(--ink-rgb),.03);border:1px solid var(--hairline);
}
.rec-form-editar label{display:block;margin-bottom:12px}
.rec-form-editar label > span{display:block;font-size:var(--t-denso);color:var(--ink-3);margin-bottom:5px}
.rec-form-editar input,.rec-form-editar textarea,.rec-form-editar select{
  width:100%;padding:11px 13px;border-radius:12px;font:inherit;font-size:var(--t-denso);
  border:1px solid rgba(var(--ink-rgb),.13);background:var(--papel);min-height:46px;
}
.rec-form-editar textarea{min-height:96px;resize:vertical;line-height:1.55}
.rec-form-editar input:focus,.rec-form-editar textarea:focus,.rec-form-editar select:focus{
  outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(255,145,77,.16);
}
/* O editar ocupa a linha inteira quando aberto: formulário espremido ao
   lado de dois botões não se preenche. */
.rec-editar[open]{flex:1 1 100%}
@media (max-width:760px){
  /* Duas colunas: quem recebeu cede lugar, porque o placar e o título
     são o que identifica a linha. */
  .rec-item > summary{grid-template-columns:minmax(0,1fr) auto}
  .rec-para{display:none}
}
/* ---- A CAIXA DE RECADOS DO CLIENTE: fechado abre no clique ----

   O cartão virou <details>. O não lido nasce aberto — é o que mantém
   honesto o carimbo de "abrir é ler", que cai quando a tela é desenhada:
   recado novo nascendo fechado faria o painel dizer "leu" de um texto
   que a pessoa não viu. O já lido nasce fechado, porque virou histórico
   e histórico é lista.

   Quem esconde o corpo é o próprio <details>, nativo. O CSS não mexe
   nisso: conteúdo de <details> fechado é INERTE no Chrome. */
.recado-card > summary{
  cursor:pointer;list-style:none;min-height:44px;align-items:center;
}
.recado-card > summary::-webkit-details-marker{display:none}
.recado-card > summary::marker{content:""}
.recado-card:not([open]) > summary{margin-bottom:0}
.recado-card[open] > summary{margin-bottom:12px}
/* A seta diz que abre. Vira para baixo quando abre — sem ela, o cartão
   fechado parece um título solto que não faz nada. */
.recado-card > summary::after{
  content:"";flex:none;width:9px;height:9px;margin-left:2px;
  border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);
  transform:rotate(-45deg);transition:transform .15s;
}
.recado-card[open] > summary::after{transform:rotate(45deg)}
.recado-card > summary:hover h2{color:var(--laranja-forte)}
/* Recado de "precisa da atenção" JÁ LIDO ficava idêntico a um aviso
   comum: só o não lido tinha borda. Numa lista fechada, em que o corpo
   não está à vista, o peso do recado é a única coisa que distingue uma
   linha da outra — some dele e a lista vira um bloco cinza. */
.recado-card.atencao:not(.novo){border-left:3px solid rgba(198,43,69,.28)}
/* ---- quais avisos automáticos ficam guardados ---- */
.guardar-avisos{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.guardar-avisos label{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:14px 16px;border-radius:14px;
  border:1px solid rgba(var(--ink-rgb),.13);background:var(--papel);min-height:44px;
}
.guardar-avisos label:has(input:checked){border-color:var(--laranja);background:rgba(255,145,77,.07)}
.guardar-avisos label:has(input:focus-visible){outline:2px solid var(--laranja);outline-offset:2px}
.guardar-avisos input{margin-top:3px;flex:none;accent-color:var(--laranja)}
.guardar-avisos b{display:block;font-size:var(--t-denso);font-weight:600}
/* O porquê fica embaixo do nome: a escolha é entre "vale guardar" e "já
   tem casa em outra aba", e sem essa linha as quatro parecem iguais. */
.guardar-avisos i{display:block;font-style:normal;font-size:var(--t-nota);color:var(--ink-3);
  margin-top:4px;line-height:1.45}
/* "aviso do painel" na caixa do cliente: o subtítulo da tela promete
   gente escrevendo, e passar um automático por recado escrito seria a
   mentira pequena que estraga a confiança nas outras. */
.recado-auto{
  font-size:.72rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-4);
}
/* ---- pôr o painel na tela de início ----

   Uma tela que ENSINA, e tela que ensina se lê em pé, no ônibus, com uma
   mão. Por isso passo numerado grande, e não parágrafo corrido. */
.atalho-passos h2{margin-bottom:6px}
.atalho-lista{margin:0;padding:0;list-style:none;counter-reset:passo}
.atalho-lista li{
  counter-increment:passo;position:relative;
  padding:0 0 0 42px;margin-bottom:16px;font-size:var(--t-corpo);line-height:1.55;color:var(--ink-2);
}
.atalho-lista li:last-child{margin-bottom:0}
.atalho-lista li::before{
  content:counter(passo);position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--sobre-ink);
  font-family:var(--display);font-size:var(--t-denso);font-weight:700;
}
.atalho-lista b{color:var(--ink);font-weight:600}
/* O ícone de compartilhar do iPhone desenhado no meio da frase: a
   pessoa procura o SÍMBOLO na barra, não a palavra. */
.atalho-icone{
  display:inline-grid;place-items:center;vertical-align:-6px;
  width:26px;height:26px;margin:0 1px;border-radius:8px;
  background:rgba(var(--ink-rgb),.06);color:var(--ink-2);
}
.atalho-icone svg{width:15px;height:15px}
.atalho-ganhos{margin:0;padding:0;list-style:none}
.atalho-ganhos li{
  padding:0 0 0 26px;margin-bottom:11px;position:relative;
  font-size:var(--t-denso);line-height:1.55;color:var(--ink-2);
}
.atalho-ganhos li:last-child{margin-bottom:0}
.atalho-ganhos li::before{
  content:"";position:absolute;left:2px;top:8px;
  width:9px;height:5px;border-left:2px solid var(--verde-forte);
  border-bottom:2px solid var(--verde-forte);transform:rotate(-45deg);
}
.atalho-ganhos b{color:var(--ink);font-weight:600}
.atalho-ok{
  margin:0;font-family:var(--display);font-size:1.1rem;font-weight:600;
  color:var(--verde-forte);
}
/* ---- o convite para pôr na tela de início ----

   Mesma forma da faixa de recado, tom mais baixo: aquela é assunto do
   cliente e esta é conveniência nossa. Se as duas ficassem iguais, o
   olho pararia de distinguir a que importa. */
.convite-atalho{padding-top:10px;padding-bottom:0}
.convite-atalho p{
  margin:0;display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;
  padding:11px 16px;border-radius:var(--r-sm);
  background:rgba(var(--ink-rgb),.045);border:1px solid var(--hairline);
  font-size:var(--t-denso);color:var(--ink-2);
}
.convite-atalho b{font-weight:600;color:var(--ink)}
.convite-atalho span{color:var(--ink-3);min-width:0}
/* O link e o ✕ andam juntos: soltos, o "margin-left:auto" empurrava o
   link para a direita e o ✕ caía sozinho numa segunda linha, com a
   faixa ficando o dobro da altura por causa de um botãozinho. */
.convite-fim{margin-left:auto;display:inline-flex;align-items:center;flex:none}
.convite-atalho a{font-weight:600;color:var(--ink);white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center;
}
.convite-atalho button{
  flex:none;background:none;border:0;cursor:pointer;color:var(--ink-4);
  font-size:var(--t-corpo);line-height:1;width:44px;height:44px;border-radius:10px;
  margin-right:-10px;
}
.convite-atalho a + button{margin-left:2px}
.convite-atalho button:hover{color:var(--ink-2);background:rgba(var(--ink-rgb),.05)}
.convite-atalho button:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
@media (max-width:560px){
  /* O "abre num toque" é o que cede: numa tela estreita o que precisa
     caber é a frase de cima e o botão.

     O seletor é [data-convite-sub], e não "span": o link e o ✕ vivem
     dentro de um <span> também, e a regra genérica apagava justamente o
     botão que a faixa existe para oferecer. */
  .convite-atalho [data-convite-sub]{display:none}
}
/* ---- o versículo, no alto de toda tela ----

   Ele saiu do pé da tela de Resultados e virou uma linha que acompanha o
   painel inteiro. Discreto é o ponto, e não um detalhe: isto fica acima
   do que a pessoa veio fazer. Se pesar, atrapalha o trabalho e vira a
   coisa que ela aprende a pular — e some junto o que estiver do lado.

   Por isso uma linha só, cinza, sem rótulo, sem borda, sem fundo. O
   blockquote e o cite viram texto corrido: a semântica é para o leitor
   de tela, não para o desenho. */
.versiculo-linha{padding-top:10px;padding-bottom:0}
.versiculo-frase{
  margin:0 auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;
  justify-content:center;text-align:center;
  /* Versículo inteiro (23/09): no computador ele quebra em duas linhas
     de leitura, não numa faixa de 1180px de largura. */
  max-width:78ch;
}
/* inline, e não bloco: <blockquote> nasce ocupando a linha inteira, e a
   referência caía sozinha embaixo — duas linhas para o que devia ser
   uma, no lugar mais apertado da tela. */
.versiculo-linha blockquote{
  display:inline;margin:0;font-size:var(--t-nota);font-style:italic;
  color:var(--ink-4);line-height:1.5;
}
.versiculo-linha blockquote::before{content:"\201C"}
.versiculo-linha blockquote::after{content:"\201D"}
.versiculo-linha cite{
  font-style:normal;font-size:var(--t-nota);font-weight:600;color:var(--verde-forte);
  white-space:nowrap;opacity:.85;
}
/* ---------- os blocos que dobram (v210) ----------

   Todo bloco do Meu dia esconde e mostra com um toque — ver dobra_abre()
   no layout.php e o dobras.js. Quem abre e fecha é o próprio <details>;
   o CSS só desenha o cabeçalho com a cara de bloco e a setinha. O
   padding sai do cartão e vai para o resumo e para o corpo, senão o
   resumo fechado ficava com 54px de vazio embaixo. */
.bloco-dobra > .bloco-sumario{
  display:flex;align-items:center;gap:12px;
  list-style:none;cursor:pointer;min-height:44px;
}
.bloco-dobra > .bloco-sumario::-webkit-details-marker{display:none}
.bloco-dobra > .bloco-sumario h2{margin:0;min-width:0}
.bloco.bloco-dobra{padding:0}
.bloco.bloco-dobra > .bloco-sumario{padding:24px 26px}
.bloco.bloco-dobra > .bloco-corpo{padding:0 26px 28px}
/* O gesto por extenso, à direita: cartão bonito que ninguém sabe que
   clica não serve de nada. */
.bloco-gesto{
  margin-left:auto;flex:none;
  font-size:var(--t-nota);font-weight:600;color:var(--verde-forte);
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.bloco-gesto i{font-style:normal}
.bloco-gesto i:last-child{display:none}
.bloco-dobra[open] > .bloco-sumario .bloco-gesto i:first-child{display:none}
.bloco-dobra[open] > .bloco-sumario .bloco-gesto i:last-child{display:inline}
.bloco-gesto::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
}
.bloco-dobra[open] > .bloco-sumario .bloco-gesto::after{transform:rotate(-135deg) translateY(2px)}
/* A faixa de clientes dobra igual, mas não é cartão: o resumo é o
   .faixa-topo de sempre, com o gesto encostado à direita. */
.faixa.bloco-dobra > .bloco-sumario{margin:34px 0 2px}
@media (max-width:760px){
  .bloco.bloco-dobra > .bloco-sumario{padding:16px 14px}
  .bloco.bloco-dobra > .bloco-corpo{padding:0 14px 20px}
}
.conta-edicao > td,.lanc-edicao > td{
  background:rgba(var(--ink-rgb),.035);padding:18px 14px 20px;
}
.conta-fora td{opacity:.55}
.conta-fora td:last-child{opacity:1}
@media (max-width:560px){
  /* Mesmo ponto de quebra da tabela-ficha (560, e não 760): entre um e
     outro a tabela ainda é tabela, e uma célula "block" ali quebrava a
     linha de edição. Na ficha a célula vira flex com o rótulo à esquerda; a
     de edição não tem rótulo e carrega um formulário inteiro: volta a
     ser bloco, senão a grade dos campos era espremida à direita. */
  table.dados.empilha tr.conta-edicao td,
  table.dados.empilha tr.lanc-edicao td{display:block;text-align:left}
  table.dados.empilha tr.conta-edicao,
  table.dados.empilha tr.lanc-edicao{margin-top:-6px;border-top:none;
    border-top-left-radius:0;border-top-right-radius:0}
}
/* ---------- a tela de espera do vídeo (v218, vidro em 07/09) ----------
   Como a tela de atualização do iPhone: o símbolo pequeno no centro, a
   barra fina embaixo enchendo conforme o arquivo desce, e o andamento em
   letra miúda. Cobre o player por inteiro — de propósito, para engolir o
   toque (tocar aqui não pode virar "tocar pela rede", ver previa.js) — e
   some quando o vídeo está na memória.
   O fundo é VIDRO sobre a capa do vídeo: a capa fica desfocada por baixo,
   com um sopro de laranja e verde. Branco liso parecia "acabado simples
   demais pela tecnologia empregada" — palavras do Rafael. Onde o navegador
   não tem backdrop-filter, sobra o branco leitoso, que ainda funciona. */
.video-espera{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:22px;
  background:
    radial-gradient(70% 55% at 18% 12%, rgba(255,145,77,.30), transparent 70%),
    radial-gradient(70% 55% at 84% 92%, rgba(126,217,87,.30), transparent 70%),
    rgba(var(--papel-rgb),.62);
  /* 16px e sem saturate: no iPhone o desfoque grande custa GPU o tempo todo em
     que a barra anda. */
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(var(--papel-rgb),.85);
  pointer-events:auto;cursor:progress;
}
/* O símbolo com o peso da maçã na tela de atualização do iPhone (uns
   60×74 pt numa tela de 390): o nosso é largo, então ~28% da largura da
   caixa dá a mesma presença. É o SVG do símbolo, sem margem — e o
   símbolo em si não muda: o efeito é só em volta dele (regra do Rafael). */
.video-espera img{width:min(28%,96px);height:auto;animation:gm-respira 2.2s ease-in-out infinite}
.video-andar{display:block;width:min(40%,150px);height:3px;border-radius:999px;
  background:rgba(var(--ink-rgb),.10);overflow:hidden}
.video-andar b{display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#FF914D,#FFDE59,#7ED957);transition:width .3s}
.video-espera small{margin-top:-10px;font-size:var(--t-legenda);color:var(--ink-3);letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
@keyframes gm-respira{
  0%,100%{opacity:.72;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  .video-espera img{animation:none}
}
.video-espera[hidden]{display:none}
/* =====================================================================
   O LAYOUT NOVO (07/09/2026) — vale só com body.novo (ver layout_novo()).
   Padrão de comunicação da Apple com a identidade da casa: uma ideia por
   tela, silêncio em volta, menos cor e mais tipografia. A proposta
   inteira está na página "Padrão Apple para o painel".
   ===================================================================== */
body.novo{background-image:none;background-color:var(--fundo)}
body.novo h1,body.novo h2{font-weight:700}
body.novo .brand span{display:none}
/* ---- o cabeçalho de uma linha: marca · abas no centro · o que é da pessoa ---- */
body.novo .nav{padding-top:10px}
body.novo .nav-in{
  grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"marca abas atalhos";
  gap:0 14px;min-height:56px;padding:8px 12px 8px 16px;border-radius:999px;
}
body.novo .nav-abas{justify-content:center;margin:0}
body.novo .nav-links{gap:10px;flex-wrap:nowrap}
body.novo .nav-cta,body.novo .so-largo{display:none}
body.novo .trocador summary{max-width:220px}
/* o retrato vira o menu */
body.novo summary.retrato-nav{list-style:none;cursor:pointer}
body.novo summary.retrato-nav::-webkit-details-marker{display:none}
body.novo .menu-pessoa{position:relative}
body.novo .menu-pessoa[open] summary.retrato-nav{border-color:var(--ink)}
body.novo .menu-pessoa-lista{
  position:absolute;right:0;top:calc(100% + 10px);min-width:260px;padding:10px;
  border-radius:20px;z-index:130;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 18px 50px rgba(var(--sombra-rgb),.16);
}
body.novo .menu-pessoa-lista a{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:12px;
  font-size:var(--t-denso);font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;
}
body.novo .menu-pessoa-lista a:hover{background:rgba(var(--ink-rgb),.05)}
body.novo .menu-pessoa-lista a small{margin-left:auto;color:var(--ink-4);font-size:var(--t-nota);font-weight:500}
body.novo .menu-pessoa-quem{margin:6px 12px 8px;display:flex;flex-direction:column;gap:1px}
body.novo .menu-pessoa-quem b{font-size:var(--t-denso)}
body.novo .menu-pessoa-quem span{font-size:var(--t-nota);color:var(--ink-4)}
body.novo .menu-pessoa-titulo{
  margin:10px 12px 2px;font-size:var(--t-rotulo);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-4);font-weight:600;
}
body.novo .menu-sub summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;min-height:44px;padding:8px 12px;
  border-radius:12px;font-size:var(--t-denso);font-weight:500;
}
body.novo .menu-sub summary::-webkit-details-marker{display:none}
body.novo .menu-sub summary::after{content:"";margin-left:auto;width:7px;height:7px;
  border-right:1.6px solid var(--ink-4);border-bottom:1.6px solid var(--ink-4);transform:rotate(45deg)}
body.novo .menu-sub[open] summary::after{transform:rotate(-135deg)}
body.novo .menu-sub a{padding-left:24px;min-height:40px}
body.novo .menu-sair{color:var(--vermelho)!important}
/* APARÊNCIA: Automático, Claro, Escuro — o mesmo segmentado do filtro de
   período, pequeno. No menu estreito do computador os botões descem para
   baixo do rótulo; no Mais do celular cabem na mesma linha. */
body.novo .tema-escolha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 12px;padding:8px 12px;margin-top:4px;border-top:1px solid rgba(var(--ink-rgb),.07)}
body.novo .mais-grupo .tema-escolha{border-top:0;margin-top:0;padding:4px 12px}
body.novo .tema-rotulo{font-size:var(--t-denso);font-weight:500;color:var(--ink-3)}
body.novo .tema-opcoes{display:flex;flex:1 1 210px;max-width:280px;padding:3px;border-radius:999px;background:rgba(var(--ink-rgb),.06)}
body.novo .tema-opcoes button{flex:1;min-height:32px;padding:4px 8px;border:0;border-radius:999px;background:transparent;
  font:inherit;font-size:var(--t-nota);font-weight:600;color:var(--ink-3);cursor:pointer;white-space:nowrap}
body.novo .tema-opcoes button:hover{color:var(--ink)}
body.novo .tema-opcoes button[aria-pressed="true"]{background:var(--papel);color:var(--ink);box-shadow:0 1px 4px rgba(var(--sombra-rgb),.14)}
body.novo .tema-opcoes button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
@media (max-width:760px){
  body.novo .tema-opcoes button{min-height:44px}
}
body.novo .icone-aba{flex:none;color:var(--ink-3)}
body.novo .menu-sair .icone-aba{color:var(--vermelho)}
/* ---- a barra de abas do celular ---- */
body.novo .barra-abas{display:none}
@media (max-width:860px){
  body.novo .nav-abas{display:none}
  /* O ALTO COMO O DO WHATSAPP: sem logo e sem retrato — o cliente à
     esquerda, o sino à direita, e o título grande logo abaixo. O perfil
     mora no "Mais", com a foto. Rafael, 07/09. */
  body.novo .brand,body.novo .menu-pessoa{display:none}
  body.novo .nav-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"atalhos";padding:8px 8px 8px 10px;gap:0}
  body.novo .nav-links{justify-self:stretch;width:100%;justify-content:space-between;gap:10px}
  /* Sem trocador (a administração), o sino ia para a esquerda e a lista
     dele abria fora da tela. Ele sempre encosta à direita. */
  body.novo .nav-links .sino{margin-left:auto}
  body.novo .trocador{min-width:0;flex:1}
  body.novo .trocador summary{max-width:100%}
  body.novo .nav-quem{display:block;font-size:var(--t-denso);font-weight:600;color:var(--ink);padding-left:6px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  body.novo .mais-perfil{gap:12px}
  body.novo .mais-perfil img,body.novo .mais-iniciais{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
    background:var(--laranja);color:#fff;font-weight:700;font-size:var(--t-denso);display:grid;place-items:center}
  body.novo .mais-perfil span{display:flex;flex-direction:column;line-height:1.2}
  body.novo .mais-perfil small{font-size:var(--t-nota);color:var(--ink-4);font-weight:500}
  body.novo .barra-mais-lista{max-height:calc(100vh - 120px);overflow-y:auto}
  body.novo .mais-grupo{border-top:1px solid rgba(var(--ink-rgb),.07);margin-top:6px;padding-top:6px}
  body.novo .mais-sub summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px;border-radius:14px;
    font-weight:500;font-size:var(--t-denso);cursor:pointer;list-style:none}
  body.novo .mais-sub summary::-webkit-details-marker{display:none}
  body.novo .mais-sub summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.6px solid var(--ink-4);
    border-bottom:1.6px solid var(--ink-4);transform:rotate(45deg)}
  body.novo .mais-sub[open] summary::after{transform:rotate(-135deg)}
  body.novo .mais-sub a{padding-left:46px;min-height:44px}
  body.novo .mais-perfil{padding-top:10px;padding-bottom:10px}
  body.novo{padding-bottom:calc(86px + env(safe-area-inset-bottom) * .45)}
  /* BORDA DE ROLAGEM (25/09, régua da Apple): o conteúdo vai sumindo
     por baixo das barras num degradê, em vez de cortar seco. */
  body.novo::after{content:"";position:fixed;left:0;right:0;bottom:0;z-index:124;pointer-events:none;
    height:calc(100px + env(safe-area-inset-bottom) * .45);
    background:linear-gradient(to top,rgba(var(--fundo-rgb),.94) 30%,rgba(var(--fundo-rgb),0))}
  body.novo .nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(var(--fundo-rgb),.9),rgba(var(--fundo-rgb),0))}
  /* O VOLTAR NA PÍLULA e o TÍTULO COMPACTO (topo.js). */
  body.novo .nav .nav-voltar{flex:none;width:36px;height:36px;border-radius:50%;background:rgba(var(--ink-rgb),.06);
    display:grid;place-items:center;text-decoration:none;margin-right:2px}
  body.novo .nav-voltar::before{content:"";width:9px;height:9px;margin-left:3px;border-left:2px solid var(--ink);
    border-bottom:2px solid var(--ink);transform:rotate(45deg)}
  body.novo .nav-titulo-compacto{display:none;flex:1;min-width:0;text-align:left;border:0;background:transparent;
    font:inherit;font-size:var(--t-denso);font-weight:600;color:var(--ink);padding:0 6px;min-height:36px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
  body.novo .nav.compacto .trocador{display:none}
  body.novo .nav.compacto .nav-titulo-compacto{display:block}
  /* A BARRA DE BAIXO ENCOLHIDA: só os ícones, e volta ao subir. */
  body.novo .barra-abas{transition:padding .18s ease}
  body.novo .barra-abas.mini{padding-top:2px;padding-bottom:2px}
  body.novo .barra-abas.mini .barra-aba{min-height:36px;gap:0}
  body.novo .barra-abas.mini .barra-aba span{display:none}
  @media (prefers-reduced-motion:reduce){
    body.novo .barra-abas{transition:none}
  }
  /* FLUTUA COMO A DO WHATSAPP: descolada das bordas, arredondada, acima
     da linha de comando do iPhone (área segura). Colada no fundo ela
     ficava atrás dos controles do telefone — Rafael, 07/09. */
  body.novo .barra-abas{
    /* Só uma parte da área segura: com ela inteira mais 10px a barra
       ficava a 44pt do fundo — "muito alta" (07/09). O WhatsApp encosta
       mais na linha de comando, e é isso que se copia. */
    position:fixed;left:12px;right:12px;bottom:calc(6px + env(safe-area-inset-bottom) * .45);z-index:125;
    display:flex;justify-content:space-around;align-items:stretch;padding:4px 6px;
    background:rgba(var(--papel-rgb),.9);border:1px solid rgba(var(--ink-rgb),.08);border-radius:28px;
    box-shadow:0 10px 30px rgba(var(--sombra-rgb),.16);
    -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  }
  body.novo .barra-aba{
    flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-height:46px;padding:2px 4px;border-radius:12px;position:relative;
    font-size:var(--t-legenda);font-weight:600;color:var(--ink-4);text-decoration:none;letter-spacing:.01em;
  }
  body.novo .barra-aba span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.novo .barra-aba.on{color:var(--ink)}
  body.novo .barra-aba.on .icone-aba{color:var(--ink)}
  body.novo .barra-aba.trancada{opacity:.45}
  body.novo .barra-aba .aba-bolinha{position:absolute;top:1px;left:calc(50% + 6px);margin:0;font-style:normal}
  body.novo .barra-mais{flex:1;max-width:96px;display:flex}
  body.novo .barra-mais summary{list-style:none;flex:1;cursor:pointer}
  body.novo .barra-mais summary::-webkit-details-marker{display:none}
  body.novo .barra-mais-lista{
    position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom) * .45);z-index:126;
    padding:8px;border-radius:22px;display:flex;flex-direction:column;
    background:var(--papel);box-shadow:0 18px 50px rgba(var(--sombra-rgb),.18);
  }
  body.novo .barra-mais-lista a{
    display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px;border-radius:14px;
    text-decoration:none;color:var(--ink);font-weight:500;font-size:var(--t-denso);
  }
  body.novo .barra-mais-lista a.on{background:rgba(var(--ink-rgb),.06)}
  body.novo .barra-mais-lista .aba-bolinha{margin-left:auto;font-style:normal}
  body.novo .barra-mais-lista .menu-sair{color:var(--vermelho)}
  /* Não é fixed de propósito: o backdrop-filter da barra vira caixa de
     referência de qualquer fixed lá dentro, e o menu ia parar acima da
     tela. Absoluto, pendurado no retrato, cabendo na largura que houver. */
  body.novo .menu-pessoa-lista{position:absolute;left:auto;right:0;top:calc(100% + 10px);bottom:auto;
    min-width:0;width:min(320px,calc(100vw - 32px));background:var(--papel)}
  body.novo .menu-pessoa-lista a{white-space:normal}
}
/* ---- o filtro segmentado: quatro opções e "Personalizar" ---- */
body.novo .filtro-atalhos{
  display:inline-flex;flex-wrap:wrap;align-self:center;gap:0;padding:3px;border-radius:999px;
  background:rgba(var(--ink-rgb),.06);
}
body.novo .filtro-atalhos .pill{border:0;background:transparent;box-shadow:none;color:var(--ink-3);
  padding:7px 14px;font-weight:600}
body.novo .filtro-atalhos .pill:hover{background:rgba(var(--papel-rgb),.7);color:var(--ink)}
body.novo .filtro-atalhos .pill.on{background:var(--papel);color:var(--ink);box-shadow:0 1px 4px rgba(var(--sombra-rgb),.14)}
body.novo .filtro-atalhos .pill.escondida{display:none}
body.novo .filtro-atalhos .pill.personalizar::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 8px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);opacity:.7}
body.novo .filtro.personalizar .filtro-atalhos .pill.personalizar::after{transform:rotate(-135deg);margin-bottom:-2px}
body.novo .cal-pe .btn{display:none}
body.novo .filtro{padding:12px 16px;gap:10px}
/* CONTAS E PERÍODO NUMA LINHA SÓ (25/09/2026, régua da Apple): no
   computador a pílula das contas fica à esquerda e o segmentado do
   período à direita; as datas do "Personalizar" descem para uma segunda
   linha. Com uma conta só (sem pílula), o segmentado vai para a esquerda. */
@media not all and (max-width:560px){
  body.novo .filtro{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
  body.novo .filtro > .seletor-fechado{margin:0;align-self:center}
  body.novo .filtro > .fonte-dos-numeros{margin:0}
  body.novo .filtro > .dobra{flex:1 1 auto;min-width:0;margin:0}
  body.novo .filtro > .dobra > .dobra-corpo{margin:0}
  body.novo .filtro .filtro-linha{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px}
  body.novo .filtro > details.dobra:only-of-type .filtro-linha{justify-content:flex-start}
  body.novo .filtro .filtro-atalhos{align-self:auto}
  body.novo .filtro.personalizar .filtro-datas{flex-basis:100%;justify-content:flex-end}
}
/* No celular viram duas pílulas iguais lado a lado: "as 2 contas ⌄" e
   "Setembro de 2026 ⌄". A palavra "trocar" sai porque a pílula já é o
   gesto — é a mesma das contas, que a pessoa já aprendeu a tocar. */
@media (max-width:560px){
  body.novo .filtro{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
  body.novo .filtro > .seletor-fechado{flex:0 0 auto;margin:0}
  body.novo .filtro > .fonte-dos-numeros{flex:1 1 100%;margin:0}
  body.novo .filtro .seletor-rotulo{display:none}
  body.novo .filtro > .dobra{flex:1 1 150px;min-width:0;margin:0}
  body.novo .filtro > .dobra[open]{flex-basis:100%}
  body.novo .filtro .dobra > summary{min-height:36px;padding:6px 12px;border-radius:999px;background:rgba(var(--ink-rgb),.06);border:0;column-gap:6px}
  body.novo .filtro .dobra-oque{display:none}
  body.novo .filtro .dobra-agora{font-size:var(--t-denso);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.novo .filtro .dobra-gesto{font-size:0;gap:0;color:var(--ink-3)}
  body.novo .filtro .dobra-gesto::after{width:6px;height:6px;border-width:1.6px;transform:rotate(45deg) translateY(-1px)}
  body.novo .filtro .dobra[open] .dobra-gesto::after{transform:rotate(-135deg) translateY(1px)}
  body.novo .filtro > .dobra > .dobra-corpo{margin-top:10px}
}
/* O CABEÇALHO NO CELULAR (25/09): sem o rótulo "Painel do cliente" — a
   barra já diz onde a pessoa está — e as fotos pequenas na linha do
   título. O primeiro número sobe uma faixa inteira. */
@media (max-width:560px){
  body.novo .topo .kicker{display:none}
  body.novo .topo-linha > div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
  body.novo .topo-linha > div > .bolinhas{margin:0;flex:none}
  body.novo .topo-linha > div > h1{flex:1 1 60%;min-width:0;margin:0}
  body.novo .topo-linha > div > .sub{flex-basis:100%;margin-top:2px}
  body.novo .bolinha-caixa,body.novo .bolinhas.apertadas .bolinha-caixa{width:24px;height:24px;margin-left:-7px;font-size:var(--t-legenda);border-width:1.5px}
  body.novo .bolinha-caixa:first-child,body.novo .bolinhas.apertadas .bolinha-caixa:first-child{margin-left:0}
}
/* A aba trancada dentro do "Mais": nome e, embaixo, o que a libera. */
body.novo .barra-mais-lista a.mais-trancada{opacity:.8}
body.novo .barra-mais-lista a.mais-trancada > span{display:flex;flex-direction:column;line-height:1.2}
body.novo .barra-mais-lista a.mais-trancada small{font-size:var(--t-legenda);color:var(--ink-4);font-weight:500}
body.novo .filtro-datas{display:none}
body.novo .filtro.personalizar .filtro-datas{display:flex}
/* SÓ AS DATAS NA DOBRA (Anúncios, 08/09): a pílula com o período de agora
   nasce por script e abre o calendário. No telefone, com a dobra aberta,
   o próprio "trocar" já abriu o calendário e o resumo já diz o período —
   a pílula seria a mesma coisa duas vezes. */
@media (max-width:560px){
  body.novo .dobra[open] .filtro-atalhos.so-periodo{display:none}
}
/* A pílula sozinha fica no meio, como o filtro segmentado de cima. */
body.novo .dobra-corpo:has(> .filtro-atalhos.so-periodo){text-align:center}
/* ---- os cartões de número: sem o "?", o rótulo é o balão ---- */
body.novo .kpi .ajuda{display:inline-block;width:0;height:0;padding:0;border:0;overflow:hidden;opacity:0}
body.novo .kpi .rotulo{cursor:help}
body.novo .kpi .valor{font-weight:700}
body.novo .kpi .chip{background:none!important;padding:0;font-size:var(--t-nota)}
body.novo .fonte-dos-numeros{margin:0 0 12px;font-size:var(--t-nota);color:var(--ink-4)}
body.novo .leitura-primeiro{margin-top:4px}
/* ---- dois estilos de selo; nenhuma moldura colorida ---- */
/* SELO COM COR, senão some sobre a foto (Rafael, 07/09): amarelo para o
   que espera aprovação, laranja para o que voltou, verde para o
   aprovado; o que está no ar continua preto cheio. Fundo branco com
   sombra para os outros, para ler em cima de qualquer imagem. */
body.novo .selo{background:rgba(var(--papel-rgb),.94);color:var(--ink-2);border:0;box-shadow:0 2px 8px rgba(var(--sombra-rgb),.18)}
body.novo .selo-espera,body.novo .selo-cliente{background:#FFD54F;color:#4A3600}
body.novo .selo-ajuste{background:var(--laranja);color:var(--texto-laranja-escuro)}
body.novo .selo-ok{background:var(--verde);color:var(--texto-verde-escuro)}
body.novo .selo-ativo{background:var(--ink);color:var(--sobre-ink)}
body.novo .selo-rejeitado{background:var(--tinta-vermelha);color:var(--vermelho)}
body.novo .pedidos-bloco,body.novo .mesa-bloco,
body.novo .recado-card.novo,body.novo .recado-card.atencao:not(.novo){border-left-width:0}
/* ---- a administração como Ajustes do iPhone: grupos de linhas com seta ---- */
body.novo .adm-busca{flex-basis:100%;width:100%;margin-top:14px}
body.novo .adm-busca input{width:100%;max-width:420px}
body.novo .adm-menu{flex-basis:100%;width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:12px}
body.novo .adm-grupo{background:var(--papel);border:1px solid rgba(var(--ink-rgb),.07);border-radius:18px;padding:6px 0 4px;box-shadow:0 8px 26px rgba(var(--sombra-rgb),.05)}
body.novo .adm-grupo p{margin:8px 16px 6px;font-size:var(--t-rotulo);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);font-weight:600}
body.novo .adm-grupo a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;
  padding:8px 14px 8px 16px;border-top:1px solid rgba(var(--ink-rgb),.06);text-decoration:none;color:var(--ink);font-size:var(--t-denso);font-weight:500}
body.novo .adm-grupo a:hover{background:rgba(var(--ink-rgb),.03)}
body.novo .adm-grupo a span{display:flex;align-items:center;gap:10px;color:var(--ink-4);flex:none}
body.novo .adm-grupo a span b.n{font-weight:500;font-size:var(--t-denso);color:var(--ink-4);font-variant-numeric:tabular-nums}
body.novo .adm-grupo a span b.n.alerta{background:var(--laranja-forte);color:#fff;font-weight:700;font-size:var(--t-legenda);padding:2px 8px;border-radius:999px}
body.novo .adm-grupo a span i{width:8px;height:8px;border-right:1.6px solid rgba(var(--ink-rgb),.35);border-bottom:1.6px solid rgba(var(--ink-rgb),.35);transform:rotate(-45deg);margin-right:2px}
body.novo .adm-voltar{flex-basis:100%;margin:6px 0 0}
body.novo .adm-voltar a{text-decoration:none;font-weight:600;color:var(--ink-3)}
body.novo .cli{background:transparent;border:0;border-top:1px solid rgba(var(--ink-rgb),.12);border-radius:0;
  box-shadow:none;padding:14px 2px 12px;gap:8px;overflow:visible}
body.novo .cli::before{display:none}
body.novo .cli:hover{border-color:rgba(var(--ink-rgb),.12)}
body.novo .cli > a:hover{background:none}
body.novo .f-atencao  .cli{border-top-color:var(--vermelho)}
body.novo .f-recarga  .cli{border-top-color:var(--laranja)}
body.novo .f-melhorar .cli{border-top-color:var(--amarelo)}
body.novo .f-bem      .cli{border-top-color:var(--verde)}
/* ---- o calendário da casa (calendario.js), no molde do calendário do iPhone ----
   Balão de vidro flutuando sob a pílula "Personalizar", dias grandes,
   DOM. SEG. TER., o escolhido em círculo cheio, o intervalo numa faixa
   clara; embaixo "Redefinir" e o ✓ que aplica. Rafael, 07/09: "quero
   todos os filtros de calendário assim bonitos". */
body.novo .filtro.personalizar .filtro-datas.com-calendario{
  position:absolute;left:50%;top:calc(100% - 6px);transform:translateX(-50%);z-index:80;
  display:block;width:min(360px,calc(100vw - 24px));padding:14px 14px 12px;border-radius:26px;
  background:rgba(var(--papel-rgb),.96);
  -webkit-backdrop-filter:blur(34px) saturate(190%);backdrop-filter:blur(34px) saturate(190%);
  border:1px solid rgba(var(--papel-rgb),.75);box-shadow:inset 0 1px 0 rgba(var(--papel-rgb),.7),0 22px 60px rgba(var(--sombra-rgb),.2);
}
body.novo .filtro-datas.com-calendario > label,
body.novo .filtro-datas.com-calendario > input[type="date"],
body.novo .filtro-datas.com-calendario > .btn{display:none}
body.novo .calendario{width:100%;-webkit-user-select:none;user-select:none}
body.novo .cal-topo{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 8px}
body.novo .cal-topo b{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
body.novo .cal-ant,body.novo .cal-prox{width:34px;height:34px;border:0;border-radius:50%;background:transparent;cursor:pointer;position:relative}
body.novo .cal-ant:hover,body.novo .cal-prox:hover{background:rgba(var(--ink-rgb),.06)}
body.novo .cal-ant::after,body.novo .cal-prox::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translate(-30%,-50%) rotate(45deg)}
body.novo .cal-prox::after{transform:translate(-70%,-50%) rotate(-135deg)}
body.novo .cal-semana,body.novo .cal-grade{display:grid;grid-template-columns:repeat(7,1fr)}
body.novo .cal-semana span{text-align:center;font-size:var(--t-legenda);letter-spacing:.06em;color:var(--ink-4);font-weight:600;padding:4px 0 6px}
body.novo .cal-grade{touch-action:none;row-gap:2px}
body.novo .cal-dia{height:42px;border:0;background:transparent;font:inherit;font-size:var(--t-corpo);color:var(--ink);
  cursor:pointer;border-radius:0;font-variant-numeric:tabular-nums;padding:0;position:relative}
body.novo .cal-dia.fora{color:var(--ink-4);opacity:.45}
body.novo .cal-dia.futuro{color:var(--ink-4);opacity:.28;cursor:default}
body.novo .cal-dia.hoje{color:var(--laranja-forte);font-weight:700}
body.novo .cal-dia.entre{background:rgba(var(--ink-rgb),.07)}
body.novo .cal-dia.inicio,body.novo .cal-dia.fim{color:#fff;font-weight:700;opacity:1;background:transparent}
body.novo .cal-dia.inicio::before,body.novo .cal-dia.fim::before{content:"";position:absolute;inset:2px 0;left:50%;
  width:40px;margin-left:-20px;border-radius:50%;background:var(--ink);z-index:-1}
body.novo .cal-dia.inicio:not(.fim){background:linear-gradient(90deg,transparent 50%,rgba(var(--ink-rgb),.07) 50%)}
body.novo .cal-dia.fim:not(.inicio){background:linear-gradient(90deg,rgba(var(--ink-rgb),.07) 50%,transparent 50%)}
body.novo .cal-dia{isolation:isolate}
body.novo .cal-escolha{margin:8px 6px 0;font-size:var(--t-nota);color:var(--ink-3);text-align:left}
body.novo .cal-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
body.novo .cal-redefinir{border:0;background:rgba(var(--ink-rgb),.06);border-radius:999px;padding:10px 16px;font:inherit;font-size:var(--t-denso);font-weight:600;color:var(--ink);cursor:pointer}
body.novo .cal-confirmar{width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);cursor:pointer;position:relative}
body.novo .cal-confirmar::after{content:"";position:absolute;left:16px;top:11px;width:9px;height:15px;border-right:2.4px solid var(--papel);border-bottom:2.4px solid var(--papel);transform:rotate(45deg)}
@media (max-width:560px){
  body.novo .cal-dia{height:44px}
}
body.novo .linha-ajuste{display:flex;align-items:center;gap:12px;min-height:58px;border-top:1px solid rgba(var(--ink-rgb),.07)}
body.novo .linha-ajuste:first-child{border-top:0}
body.novo .linha-ajuste form{margin:0;flex:none}
/* ---- duas colunas como os Ajustes do Mac; no celular, uma tela por vez como no iPhone ---- */
body.novo .adm-duas{display:grid;grid-template-columns:272px minmax(0,1fr);gap:22px;align-items:start;margin-top:16px}
/* A BARRA LATERAL ROLA SOZINHA. Grudada no topo e mais alta que a
   janela, o fim dela ficava inalcançável: o mouse em cima rolava a
   página, não a barra (Rafael, 07/09, no Livro de ações). Agora ela
   tem a própria altura e a própria rolagem, como a dos Ajustes do Mac —
   duas rolagens independentes. */
/* Sem overscroll-behavior:contain, de propósito: com ele, a roda do mouse
   parada sobre a barra rolava só a barra e, no fim dela, travava — no app do
   Mac era preciso ir para a coluna da direita para a página continuar (19/09). */
body.novo .adm-lateral{position:sticky;top:82px;max-height:calc(100vh - 98px);overflow-y:auto;
  scrollbar-width:thin;padding:0 2px 8px 0}
body.novo .adm-lateral .adm-menu{display:flex;flex-direction:column;gap:12px;margin:0;width:auto;flex-basis:auto}
body.novo .adm-lateral .adm-busca{margin:0 0 12px;width:auto;flex-basis:auto}
/* O campo de busca como o do Mac: cinza, redondo, com a lupa dentro. */
body.novo .adm-busca input{
  width:100%;max-width:none;box-sizing:border-box;min-height:38px;padding:8px 12px 8px 34px;border:0;border-radius:11px;
  background:rgba(var(--ink-rgb),.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A7185' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 11px center/16px no-repeat;
  font:inherit;font-size:var(--t-denso);color:var(--ink);
}
body.novo .adm-busca input:focus{outline:2px solid rgba(var(--ink-rgb),.25);outline-offset:1px;background-color:var(--papel)}
body.novo .adm-busca input::-webkit-search-cancel-button{-webkit-appearance:none}
body.novo .adm-grupo a.on{background:rgba(var(--ink-rgb),.07);font-weight:600}
body.novo .adm-conteudo{min-width:0}
body.novo .adm-conteudo > .bloco:first-of-type{margin-top:0}
body.novo .adm-voltar{display:none}
@media (max-width:900px){
  body.novo .adm-duas{display:block}
  /* No celular a barra lateral NÃO rola por dentro: a rolagem própria
     (max-height + overflow) é o conserto do desktop, e no iPhone virava
     duas rolagens — a do menu parava no meio e a pessoa tinha de rolar
     fora e voltar. Reclamação dele em 08/09. */
  body.novo .adm-lateral{position:static;max-height:none;overflow:visible}
  body.novo .adm-duas.com-conteudo .adm-lateral{display:none}
  body.novo .adm-duas:not(.com-conteudo) .adm-conteudo{display:none}
  body.novo .adm-voltar{display:block;margin:0 0 12px}
}
/* ---- o seletor fechado de contas e perfis: pílula com o resumo, lista com o sinal ---- */
body.novo .seletor-fechado{position:relative;align-self:flex-start;margin-bottom:2px}
body.novo .seletor-fechado summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;
  border-radius:999px;background:rgba(var(--ink-rgb),.06);font-size:var(--t-denso);font-weight:500;color:var(--ink-3);
}
body.novo .seletor-fechado summary b{color:var(--ink);font-weight:600}
body.novo .seletor-fechado summary::-webkit-details-marker{display:none}
body.novo .seletor-fechado summary::after{content:"";width:6px;height:6px;margin-bottom:3px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:rotate(45deg)}
body.novo .seletor-fechado[open] summary::after{transform:rotate(-135deg);margin:3px 0 0}
body.novo .seletor-lista{
  position:absolute;left:0;top:calc(100% + 8px);z-index:60;width:min(380px,calc(100vw - 44px));padding:8px;
  border-radius:18px;background:var(--papel);box-shadow:0 18px 50px rgba(var(--sombra-rgb),.16);border:1px solid rgba(var(--ink-rgb),.06);
}
body.novo .seletor-titulo{margin:6px 12px 6px;font-size:var(--t-rotulo);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);font-weight:600}
body.novo .seletor-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px 6px 12px;border-radius:12px;
  text-decoration:none;color:var(--ink-4)}
body.novo .seletor-item.on{color:var(--ink)}
body.novo .seletor-item:hover{background:rgba(var(--ink-rgb),.05)}
body.novo .seletor-tipo{font-size:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;font-weight:600;min-width:64px;color:var(--ink-4)}
body.novo .seletor-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-denso);font-weight:500}
body.novo .seletor-valor{font-size:var(--t-nota);color:var(--ink-4);font-variant-numeric:tabular-nums;white-space:nowrap}
body.novo .seletor-item i.marca{width:20px;height:20px;flex:none;border-radius:50%;border:1.5px solid rgba(var(--ink-rgb),.18);position:relative}
body.novo .seletor-item.on i.marca{background:var(--ink);border-color:var(--ink)}
body.novo .seletor-item.on i.marca::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;
  border-right:2px solid var(--papel);border-bottom:2px solid var(--papel);transform:rotate(45deg)}
body.novo .seletor-todos{display:block;margin:4px 6px 2px;padding:10px 6px 4px;font-size:var(--t-nota);font-weight:600;
  color:var(--ink-2);text-decoration:none;border-top:1px solid rgba(var(--ink-rgb),.07)}
/* ---- O MIOLO DA ADMINISTRAÇÃO NO PADRÃO (layout novo) ----
   Vale para toda tela dentro de .adm-conteudo: os blocos viram grupos
   brancos de borda fina (como os painéis dos Ajustes do Mac), o título
   do grupo é discreto, os campos são cinza e redondos, as tabelas
   perdem o zebrado e ganham linhas de cabelo, e o botão principal é um
   só por grupo. É o tratamento geral; as telas que são listas viram
   linhas com seta (ver cada tela). */
body.novo .adm-conteudo .bloco{
  background:var(--papel);border:1px solid rgba(var(--ink-rgb),.07);border-radius:18px;box-shadow:0 8px 26px rgba(var(--sombra-rgb),.05);
  padding:20px 22px 22px;margin-bottom:14px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.novo .adm-conteudo .bloco > h2,body.novo .adm-conteudo .bloco-cabeca h2{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:0 0 4px}
body.novo .adm-conteudo .bloco > .sub,body.novo .adm-conteudo .bloco-cabeca .sub{font-size:var(--t-denso);color:var(--ink-4)}
body.novo .adm-conteudo h3{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:600;margin:18px 0 8px}
body.novo .adm-conteudo label{font-size:var(--t-nota);font-weight:600;color:var(--ink-2)}
body.novo .adm-conteudo input[type="text"],body.novo .adm-conteudo input[type="email"],body.novo .adm-conteudo input[type="number"],
body.novo .adm-conteudo input[type="password"],body.novo .adm-conteudo input[type="url"],body.novo .adm-conteudo input[type="tel"],
body.novo .adm-conteudo input[type="date"],body.novo .adm-conteudo input[type="month"],body.novo .adm-conteudo input[type="search"],
body.novo .adm-conteudo select,body.novo .adm-conteudo textarea{
  background:rgba(var(--ink-rgb),.05);border:1px solid transparent;border-radius:11px;padding:9px 12px;font:inherit;font-size:var(--t-denso);color:var(--ink);
}
body.novo .adm-conteudo input:focus,body.novo .adm-conteudo select:focus,body.novo .adm-conteudo textarea:focus{
  outline:none;background:var(--papel);border-color:rgba(var(--ink-rgb),.28);box-shadow:0 0 0 3px rgba(var(--sombra-rgb),.08)}
body.novo .adm-conteudo .btn.claro{background:rgba(var(--ink-rgb),.06);border:0;box-shadow:none;color:var(--ink)}
body.novo .adm-conteudo .btn.claro:hover{background:rgba(var(--ink-rgb),.1)}
/* Na coluna do conteúdo a tabela cabe: sem largura mínima e com as
   células quebrando linha — cortar a primeira coluna era pior do que
   quebrar. Tabela larga de verdade ainda rola dentro do .rolagem. */
body.novo .adm-conteudo table.dados{border-collapse:collapse;width:100%;min-width:0}
body.novo .adm-conteudo table.dados td{white-space:normal;overflow-wrap:anywhere}
body.novo .adm-conteudo table.dados th:first-child,body.novo .adm-conteudo table.dados td:first-child{min-width:0}
body.novo .adm-conteudo .acoes-quando{white-space:nowrap}
body.novo .adm-conteudo table.dados th{font-size:var(--t-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:600;
  border-bottom:1px solid rgba(var(--ink-rgb),.08);padding:8px 8px;background:none}
body.novo .adm-conteudo table.dados td{padding:11px 8px;border-bottom:1px solid rgba(var(--ink-rgb),.06);background:none;font-size:var(--t-denso)}
body.novo .adm-conteudo table.dados tbody tr:nth-child(even) td{background:none}
body.novo .adm-conteudo table.dados tbody tr:hover td{background:rgba(var(--ink-rgb),.025)}
body.novo .adm-conteudo table.dados tfoot td{font-weight:600;border-bottom:0}
body.novo .adm-conteudo .aviso{border-radius:14px}
body.novo .adm-conteudo .tag{background:rgba(var(--ink-rgb),.06);color:var(--ink-3)}
/* O título compacto e o Voltar da pílula (topo.js) só existem no celular;
   no computador o menu inteiro está à vista. */
body.novo .nav-titulo-compacto,body.novo .nav-voltar{display:none}
/* ---- as bolinhas da empresa no alto da tela: fotos dos perfis e a letra da plataforma ---- */
body.novo .bolinhas{display:flex;align-items:center;margin:2px 0 8px}
body.novo .bolinha{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--papel);margin-left:-9px;
  background:var(--raso);box-shadow:0 1px 3px rgba(var(--sombra-rgb),.12);flex:none}
body.novo .bolinha:first-child{margin-left:0}
body.novo .bolinhas.apertadas .bolinha{width:30px;height:30px;margin-left:-13px}
body.novo .bolinhas.apertadas .bolinha:first-child{margin-left:0}
/* A caixa com as iniciais por trás da foto (25/09): mesma bolinha, e a
   imagem cobre tudo; quando ela quebra (classe posta pelo script do
   cabeçalho), some e as letras aparecem. */
body.novo .bolinha-caixa{position:relative;box-sizing:border-box;width:34px;height:34px;border-radius:50%;margin-left:-9px;flex:none;
  display:grid;place-items:center;background:var(--raso);color:var(--ink-3);font-weight:700;font-size:var(--t-legenda);letter-spacing:.02em;
  border:2px solid var(--papel);box-shadow:0 1px 3px rgba(var(--sombra-rgb),.12);overflow:hidden}
body.novo .bolinha-caixa::before{content:attr(data-iniciais)}
body.novo .bolinha-caixa:first-child{margin-left:0}
body.novo .bolinha-caixa .bolinha{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;box-shadow:none;background:transparent}
body.novo .bolinha-caixa .bolinha.quebrada{display:none}
body.novo .bolinhas.apertadas .bolinha-caixa{width:30px;height:30px;margin-left:-13px}
body.novo .bolinhas.apertadas .bolinha-caixa:first-child{margin-left:0}
body.novo .bolinha.vazia,body.novo .bolinha.plat{display:grid;place-items:center;color:var(--ink-3);font-weight:700;font-size:var(--t-nota)}
body.novo .bolinha.plat.meta{background:var(--meta-fundo);color:var(--meta-tinta)}
body.novo .bolinha.plat.google{background:var(--google-fundo);color:var(--google-tinta)}
/* ENTRE 861 E 1120px AS ABAS GANHAM A LINHA DELAS, sem quebrar torto no
   meio da pílula: marca e o que é da pessoa em cima, abas embaixo,
   alinhadas à esquerda e rolando de lado se faltar espaço. */
@media (min-width:861px) and (max-width:1120px){
  body.novo .nav-in{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"marca atalhos" "abas abas";border-radius:28px;gap:2px 14px}
  body.novo .nav-abas{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-6px}
  body.novo .nav-abas::-webkit-scrollbar{display:none}
  body.novo .nav-aba{padding:7px 12px}
}
/* A LISTA DO SELETOR PASSA POR CIMA DO BLOCO DE BAIXO. Cada cartão de
   vidro (backdrop-filter) é um contexto de empilhamento próprio, e o
   irmão seguinte, vindo depois no HTML, pintava por cima da lista aberta
   — só o primeiro perfil aparecia (Rafael, 07/09). O cartão do período
   sobe uma camada; a barra de cima (120) continua acima de tudo. */
body.novo form.filtro{position:relative;z-index:6}
body.novo .seletor-fechado summary:focus{outline:none}
body.novo .seletor-fechado summary:focus-visible{outline:2px solid rgba(var(--ink-rgb),.35);outline-offset:2px}
/* No celular o filtro segmentado com muitas opções (situação do anúncio)
   rola de lado em vez de quebrar em duas linhas — como um segmented
   control do iPhone. O de período cabe inteiro e nem chega a rolar. */
@media (max-width:560px){
  body.novo .filtro-atalhos{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body.novo .filtro-atalhos::-webkit-scrollbar{display:none}
  body.novo .filtro-atalhos .pill{flex:none}
}
body.novo .versiculo-linha{padding-top:8px}
@media (max-width:860px){
  body.novo .barra-aba .icone-aba{width:20px;height:20px}
}
/* ---- a conferência: botões à vista, com cadeado, e o lembrete no toque ---- */
body.novo.conferindo .travado{opacity:.5;cursor:not-allowed;position:relative}
body.novo.conferindo .btn.travado,body.novo.conferindo button.travado:not(.chave){
  padding-right:calc(var(--btn-pad, 18px) + 18px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;
}
body.novo.conferindo .btn.claro.travado,body.novo.conferindo .btn.verde.travado,body.novo.conferindo .btn.vermelho.travado,
body.novo.conferindo .btn.travado{padding-right:34px}
body.novo.conferindo .btn.claro.travado{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E101D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
body.novo .conferencia-aviso{
  position:fixed;left:50%;top:14px;transform:translate(-50%,-30px);z-index:200;opacity:0;pointer-events:none;
  max-width:min(92vw,520px);padding:12px 16px;border-radius:16px;background:rgba(var(--ink-rgb),.92);color:#fff;
  font-size:var(--t-denso);line-height:1.4;box-shadow:0 14px 40px rgba(var(--sombra-rgb),.3);transition:opacity .2s,transform .2s;
}
body.novo .conferencia-aviso.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
body.novo .conferencia-aviso a{color:#fff;font-weight:700;margin-left:6px}
/* ---- O VIDRO DO iOS 26 nos menus, balões e barras (layout novo) ----
   Superfície bem translúcida, desfoque forte e saturado, borda de luz e
   sombra macia — o que a Apple chama de Liquid Glass. Rafael, 07/09:
   "os menus com efeitos glass do iOS 26". */
body.novo .menu-pessoa-lista,body.novo .barra-mais-lista,body.novo .seletor-lista,body.novo .trocador-lista,
body.novo .sino-painel,body.novo .ajuda-balao,body.novo .calendario.solto,body.novo .barra-abas,
body.novo .conferencia-aviso{
  background:rgba(var(--papel-rgb),.62);
  -webkit-backdrop-filter:blur(34px) saturate(190%);backdrop-filter:blur(34px) saturate(190%);
  border:1px solid rgba(var(--papel-rgb),.75);
  box-shadow:inset 0 1px 0 rgba(var(--papel-rgb),.7),0 18px 50px rgba(var(--sombra-rgb),.18);
}
/* Balão dentro de vidro não desfoca o que está atrás (o navegador só
   desfoca até o limite do vidro de cima); estes ficam mais leitosos. */
body.novo .menu-pessoa-lista,body.novo .barra-mais-lista,body.novo .seletor-lista,body.novo .trocador-lista,
body.novo .sino-painel,body.novo .calendario.solto{background:rgba(var(--papel-rgb),.9)}
body.novo .barra-mais-lista{background:rgba(var(--papel-rgb),.96)}
body.novo .conferencia-aviso{background:rgba(var(--ink-rgb),.78);border-color:rgba(var(--papel-rgb),.18);color:#fff}
body.novo .menu-pessoa-lista,body.novo .seletor-lista,body.novo .trocador-lista{border-radius:22px}
body.novo .barra-mais-lista{border-radius:24px}
body.novo .barra-abas{border-radius:28px}
body.novo .nav-in{background:rgba(var(--papel-rgb),.66);border:1px solid rgba(var(--papel-rgb),.75);
  box-shadow:inset 0 1px 0 rgba(var(--papel-rgb),.7),0 10px 30px rgba(var(--sombra-rgb),.10)}
/* ---- o calendário solto (campos de data fora do iPhone) ---- */
body.novo .cal-ancora{position:relative;display:inline-block;max-width:100%}
body.novo input.com-calendario-solto::-webkit-calendar-picker-indicator{display:none}
body.novo input.com-calendario-solto{cursor:pointer}
body.novo .calendario.solto{position:absolute;left:0;top:calc(100% + 8px);z-index:80;width:min(340px,calc(100vw - 24px));padding:14px 14px 12px;border-radius:26px}
body.novo .calendario.solto .cal-pe{justify-content:space-between}
body.novo .calendario.solto .cal-pe button{border:0;background:rgba(var(--ink-rgb),.06);border-radius:999px;padding:8px 14px;font:inherit;font-size:var(--t-nota);font-weight:600;color:var(--ink);cursor:pointer}
body.novo .calendario.solto .cal-hoje{background:var(--ink);color:var(--sobre-ink)}
@media (max-width:560px){
  body.novo .calendario.solto{left:50%;transform:translateX(-50%);width:min(320px,calc(100vw - 32px))}
}
/* ---- RODADA 2: o miolo da administração em LINHAS, como os Ajustes do Mac ----
   Cada campo vira uma linha: o rótulo à esquerda, o controle à direita,
   a dica embaixo do controle, linha de cabelo entre uma e outra. Vale para
   todo formulário dentro de .adm-conteudo, sem mexer no PHP de cada tela.
   No celular volta a empilhar (rótulo em cima), como os Ajustes do iPhone
   fazem com campo de texto. */
body.novo .adm-conteudo .campo{
  display:grid;grid-template-columns:minmax(150px,36%) minmax(0,1fr);align-items:center;
  column-gap:18px;row-gap:4px;margin:0;padding:11px 0;border-top:1px solid rgba(var(--ink-rgb),.07);
}
body.novo .adm-conteudo .campo:first-of-type,body.novo .adm-conteudo h2 + .campo,body.novo .adm-conteudo .sub + .campo{border-top:0}
body.novo .adm-conteudo .campo > label{font-size:var(--t-denso);font-weight:500;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
body.novo .adm-conteudo .campo > input,body.novo .adm-conteudo .campo > select,body.novo .adm-conteudo .campo > textarea{width:100%;padding:9px 12px;font-size:var(--t-denso);border-radius:11px}
body.novo .adm-conteudo .campo > .fino,body.novo .adm-conteudo .campo > span.fino{grid-column:2;margin:0;font-size:var(--t-nota);color:var(--ink-4)}
body.novo .adm-conteudo .campo > label:has(input[type="checkbox"]){grid-column:1 / -1}
body.novo .adm-conteudo label.campo{display:grid;grid-template-columns:minmax(150px,36%) minmax(0,1fr);align-items:center;column-gap:18px;
  margin:0;padding:11px 0;border-top:1px solid rgba(var(--ink-rgb),.07);font-size:var(--t-denso);font-weight:500}
body.novo .adm-conteudo label.campo > b{font-weight:500}
body.novo .adm-conteudo label.campo > input,body.novo .adm-conteudo label.campo > select,body.novo .adm-conteudo label.campo > textarea{width:100%;padding:9px 12px;font-size:var(--t-denso);border-radius:11px}
body.novo .adm-conteudo .acoes{justify-content:flex-end;margin-top:16px;padding-top:14px;border-top:1px solid rgba(var(--ink-rgb),.07)}
body.novo .adm-conteudo .acoes .btn{min-height:40px}
@media (max-width:560px){
  body.novo .adm-conteudo .campo,body.novo .adm-conteudo label.campo{grid-template-columns:1fr;row-gap:6px}
  body.novo .adm-conteudo .campo > .fino,body.novo .adm-conteudo .campo > span.fino{grid-column:1}
  body.novo .adm-conteudo .acoes{justify-content:stretch}
  body.novo .adm-conteudo .acoes .btn{flex:1}
}
/* O .peca-form é uma grade de colunas de 200px. Com a linha acima (rótulo
   de 150px à esquerda), sobravam poucos pixels para a caixa, e o "Lançar
   pagamento" mostrava "3", "2", "F" (15/09). Dentro da administração ele
   vira uma coluna: uma linha inteira por campo, como o resto. */
body.novo .adm-conteudo .peca-form{grid-template-columns:1fr;gap:0}
body.novo .adm-conteudo .peca-form .campo.curto{max-width:none}
body.novo .adm-conteudo .peca-form .campo > b{margin:0}
body.novo .adm-conteudo input[type="checkbox"],body.novo .adm-conteudo input[type="radio"]{accent-color:var(--ink);width:18px;height:18px}
/* ---- RODADA 2: a tela da peça no mesmo padrão ----
   Os blocos da ficha viram os mesmos cartões brancos de borda fina da
   administração, com título discreto; a ficha "A peça" vira linhas
   (rótulo à esquerda, valor à direita), como os Ajustes. */
body.novo .ficha-peca .bloco{background:var(--papel);border:1px solid rgba(var(--ink-rgb),.07);border-radius:18px;
  box-shadow:0 8px 26px rgba(var(--sombra-rgb),.05);-webkit-backdrop-filter:none;backdrop-filter:none}
body.novo .ficha-peca .bloco > h2{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
body.novo .peca-ficha{display:flex;flex-direction:column;gap:0}
body.novo .peca-ficha div{display:grid;grid-template-columns:minmax(110px,38%) minmax(0,1fr);align-items:center;
  column-gap:12px;padding:10px 0;border-top:1px solid rgba(var(--ink-rgb),.07)}
body.novo .peca-ficha div:first-child{border-top:0;padding-top:2px}
body.novo .peca-ficha dt{font-size:var(--t-denso);font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3)}
body.novo .peca-ficha dd{font-size:var(--t-denso);text-align:right;font-weight:500}
body.novo .peca-ficha .peca-valor{font-size:var(--t-denso)}
body.novo .peca-ficha .fino{grid-column:1 / -1;text-align:right}
body.novo .peca-botoes{gap:10px}
/* O "corrigir o dia" da linha Foi ao ar (v357): discreto, embaixo da linha,
   e com alvo de toque inteiro no celular. */
.peca-ficha .ficha-corrigir{grid-column:1 / -1;text-align:right}
.peca-ficha .ficha-corrigir summary{display:inline-flex;align-items:center;cursor:pointer;list-style:none;
  font-size:var(--t-legenda);color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.peca-ficha .ficha-corrigir summary::-webkit-details-marker{display:none}
.peca-ficha .ficha-corrigir[open] summary{color:var(--ink)}
.peca-ficha .ficha-corrigir form{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:flex-end;align-items:flex-end;margin-top:8px}
.peca-ficha .ficha-corrigir label{display:flex;flex-direction:column;gap:4px;text-align:left;font-size:var(--t-legenda);color:var(--ink-3)}
.peca-ficha .ficha-corrigir input[type=date]{min-height:40px}
@media (max-width:760px){
  .peca-ficha .ficha-corrigir summary{min-height:44px}
  .peca-ficha .ficha-corrigir input[type=date],.peca-ficha .ficha-corrigir .btn{min-height:44px}
}
body.novo .peca-botoes .btn{min-height:44px}
body.novo .peca-ficha{background:transparent;padding:0;border-radius:0;margin:0 0 8px}
/* ---------- grupos de linhas (rodada 2, 08/09) ----------
   A tabela do jeito dos Ajustes: nome à esquerda, valor à direita, a
   situação em bolinha, os botões no fim — e no celular os botões descem
   para a linha de baixo. Ver linha_dado() no layout.php. Vale nos dois
   desenhos, por isso não está atrás de body.novo. */
.lista-linhas{display:flex;flex-direction:column}
.linha-dado{display:flex;align-items:center;gap:14px;min-height:54px;padding:9px 0;
  border-top:1px solid rgba(var(--ink-rgb),.07);flex-wrap:wrap}
.linha-dado:first-child{border-top:0}
.ld-texto{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px}
.ld-texto b{font-weight:600;font-size:var(--t-denso);letter-spacing:-.01em;color:var(--ink)}
.ld-texto small,.ld-valor small{font-size:var(--t-nota);color:var(--ink-4);line-height:1.35;font-weight:400}
.ld-texto small .mono,.ld-valor .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-legenda);
  overflow-wrap:anywhere;color:var(--ink-3)}
.ld-valor{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font-size:var(--t-denso);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ld-valor small{white-space:normal;max-width:220px}
.ld-estado{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:var(--t-nota)}
.ld-estado::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.ld-estado.ok{color:var(--verde-forte)}
.ld-estado.atencao{color:var(--laranja-forte)}
.ld-estado.falta{color:#C62B45}
.ld-estado.off{color:var(--ink-3)}
.ld-estado.neutro{color:var(--ink-4)}
.ld-acoes{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex:none}
.ld-acoes form{margin:0}
.linha-dado.fora .ld-texto b,.linha-dado.fora .ld-valor{color:var(--ink-4)}
.linha-dado.atrasado .ld-valor{color:var(--vermelho)}
@media (max-width:560px){
  .ld-acoes{flex-basis:100%;padding-top:2px}
  .ld-valor small{max-width:none}
}
body.novo .adm-conteudo .bloco > .lista-linhas{margin-top:4px}
/* ---------- selos unificados, página a página (rodada 2, 08/09) ----------
   Um selo é sempre a mesma pílula, com a mesma letra, e a cor diz a mesma
   coisa em toda tela: AMARELO espera alguém (peça para aprovar, pedido
   esperando), LARANJA precisa de ajuste ou atenção, VERDE está certo
   (aprovado, feito, de pé), AZUL está andando, VERMELHO recusado ou com
   erro, PRETO no ar, CINZA já passou. Antes cada tela tinha o seu
   desenho: o pedido era laranja claro, o Estado do projeto tinha os
   próprios verdes, a peça tinha o amarelo — e o mesmo "esperando" mudava
   de cor de uma aba para a outra. */
body.novo .selo-pedido{font-size:var(--t-rotulo);font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 9px;background:rgba(var(--ink-rgb),.08);color:var(--ink-3)}
body.novo .selo-pedido.e-esperando{background:#FFD54F;color:#4A3600}
body.novo .selo-pedido.e-andando{background:var(--azul);color:#fff}
body.novo .selo-pedido.e-feito{background:var(--verde);color:var(--texto-verde-escuro)}
body.novo .selo-pedido.e-recusado{background:rgba(var(--ink-rgb),.08);color:var(--ink-4)}
body.novo .selo-pedido.urgente{background:var(--vermelho);color:#fff}
body.novo .selo-analise,body.novo .selo-desativado{background:var(--laranja);color:var(--texto-laranja-escuro)}
body.novo .selo-agendado{background:var(--azul);color:#fff}
body.novo .selo-concluido,body.novo .selo-arquivado,body.novo .selo-producao{background:rgba(var(--ink-rgb),.08);color:var(--ink-3);box-shadow:none}
body.novo .selo-linha{box-shadow:none;border:1px solid rgba(var(--ink-rgb),.08)}
body.novo .selo-linha.selo-espera,body.novo .selo-linha.selo-cliente,body.novo .selo-linha.selo-ajuste,
body.novo .selo-linha.selo-ok,body.novo .selo-linha.selo-ativo{border-color:transparent}
/* ---------- entrar sem senha (08/09) ---------- */
.entrar-sem-senha{margin:18px 0 6px;border-top:1px solid rgba(var(--ink-rgb),.08);padding-top:14px}
.entrar-sem-senha summary{cursor:pointer;list-style:none;font-weight:600;font-size:var(--t-denso);color:var(--ink-2);
  display:flex;align-items:center;gap:8px;min-height:44px}
.entrar-sem-senha summary::-webkit-details-marker{display:none}
.entrar-sem-senha summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-left:auto;opacity:.6}
.entrar-sem-senha[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.entrar-sem-senha form{margin-top:6px}
/* ---------- busca que acha gente, e a pasta Empresas (08/09) ---------- */
body.novo .adm-resultados .adm-grupo a .txt{display:flex;flex-direction:column;gap:1px;min-width:0}
body.novo .adm-resultados .adm-grupo a small{font-size:var(--t-nota);color:var(--ink-4);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.novo .adm-resultados .adm-nada{padding:12px 16px;margin:0;font-size:var(--t-nota);color:var(--ink-4)}
body.novo .adm-conteudo details.campo{display:block;padding:10px 0}
body.novo .adm-conteudo details.campo summary{font-weight:600;cursor:pointer;min-height:44px;display:flex;align-items:center}
.sem-precos .vitrine-preco,.sem-precos .plano-preco{display:none}
/* ---------- salvando, e o "deu certo" junto do botão (08/09) ---------- */
.btn.salvando{opacity:.55;pointer-events:none;position:relative;padding-right:40px!important}
.btn.salvando::after{content:"";position:absolute;right:14px;top:50%;width:14px;height:14px;margin-top:-7px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gm-gira .8s linear infinite}
@keyframes gm-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn.salvando::after{animation:none}
}
.aviso-junto{margin:0 0 10px;font-size:var(--t-denso);font-weight:600;display:flex;align-items:center;gap:8px;
  transition:opacity .8s;line-height:1.35}
.aviso-junto.ok{color:var(--verde-forte)}
.aviso-junto.ok::before{content:"✓";font-weight:800}
.aviso-junto.erro{color:var(--vermelho)}
.aviso-junto.erro::before{content:"!";font-weight:800}
.aviso-junto.some{opacity:0}
/* ---- Datas do mês em azulejos (08/09): linha em cima, nome, "em 7 dias" grande,
   o dia por extenso, para quem vale e o que criar. Laranja = vale mais. ---- */
.datas-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px 22px;margin-top:4px}
.data-tile{border-top:1px solid var(--linha,var(--hairline-forte));padding-top:10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.data-tile.valiosa{border-top-color:var(--laranja);border-top-width:2px}
.data-tile.passou{opacity:.45}
.data-tile .dt-nome{font-size:var(--t-nota);font-weight:600;color:var(--ink-3);line-height:1.25}
.data-tile .dt-grande{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.data-tile .dt-sub{font-size:var(--t-nota);color:var(--ink-4);line-height:1.35}
.data-tile .dt-sub b{color:var(--ink-3);font-weight:600}
.data-tile .dt-dica{font-size:var(--t-nota);color:var(--ink-3);line-height:1.35;margin-top:2px}
.data-tile .dt-selo{align-self:flex-start;margin-top:5px}
.dt-demanda{margin-top:auto;padding-top:8px}
.dt-demanda summary{cursor:pointer;font-size:var(--t-nota);font-weight:600;color:var(--ink-4);text-decoration:underline;
  text-underline-offset:3px;list-style:none;display:inline-flex;align-items:center}
.dt-demanda summary::-webkit-details-marker{display:none}
.dt-demanda summary:hover{color:var(--ink)}
.dt-demanda form{display:grid;gap:8px;margin-top:10px}
.dt-demanda label{display:grid;gap:3px;font-size:var(--t-nota);font-weight:600;color:var(--ink-4)}
.dt-demanda input,.dt-demanda select{font:inherit;font-size:var(--t-denso);font-weight:400;padding:8px 10px;
  border:1px solid var(--linha,#d9dce3);border-radius:10px;background:var(--papel);min-width:0;width:100%;box-sizing:border-box;color:var(--ink)}
.dt-demanda .btn{justify-self:start}
@media (max-width:760px){
  .dt-demanda summary{min-height:44px}
}
.dt-demanda .campo-lote{display:grid;gap:4px;font-size:var(--t-nota);font-weight:600;color:var(--ink-4)}
.dt-demanda .campo-lote .rot i{font-style:normal;font-weight:500;color:var(--ink-4)}
.dt-demanda .campo-lote .rot i:not(:empty)::before{content:"— "}
/* display:block, não grid: como item de grade com overflow:hidden, o rótulo
   encolhia para 8px (min-height:auto vira 0) e a lista aparecia vazia no Mac. */
.dt-clientes{max-height:168px;overflow:auto;border:1px solid var(--linha,#d9dce3);border-radius:10px;padding:4px 8px;display:block;background:var(--papel)}
.dt-clientes label{display:block;min-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--t-nota);font-weight:400;color:var(--ink);padding:0 2px;line-height:32px;cursor:pointer}
/* A caixinha NÃO herda o desenho dos campos de texto (padding, borda, 100%). */
.dt-demanda .dt-clientes input[type=checkbox]{width:16px;height:16px;padding:0;border:0;border-radius:0;background:none;
  box-shadow:none;margin:0 8px 0 0;vertical-align:-3px;accent-color:var(--ink)}
/* O formulário abre como balão por cima da grade, não dentro do azulejo:
   dentro, o azulejo esticava e a fileira inteira ia junto. */
.dt-demanda[open]{position:relative}
.dt-demanda[open] form{position:absolute;left:0;top:calc(100% + 6px);z-index:6;width:min(320px,calc(100vw - 48px));
  background:var(--papel);border:1px solid var(--linha,var(--hairline-forte));border-radius:16px;padding:14px;box-shadow:0 14px 34px rgba(var(--sombra-rgb),.14)}
@media (max-width:760px){
  .dt-clientes label{min-height:44px}
}
@media (max-width:560px){
  .datas-grade{grid-template-columns:1fr 1fr;gap:12px 14px}
}
@media (max-width:400px){
  .datas-grade{grid-template-columns:1fr}
}
/* ---- Notícias recentes (08/09) ---- */
.noticias-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 28px}
.not-item{border-top:1px solid var(--linha,var(--hairline-forte));padding:10px 0}
.not-linha{display:block;color:var(--ink);text-decoration:none}
.not-linha b{display:block;font-size:var(--t-denso);font-weight:600;line-height:1.3}
.not-linha:hover b{text-decoration:underline;text-underline-offset:3px}
.not-linha span{display:block;margin-top:3px;font-size:var(--t-nota);color:var(--ink-4)}
.not-onde{display:inline-block;font-style:normal;font-size:var(--t-rotulo);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);background:rgba(var(--ink-rgb),.06);border-radius:6px;padding:2px 7px;margin-right:7px;vertical-align:1px}
.not-item .dt-demanda{margin-top:4px;padding-top:0}
/* ---- O tempo da semana e o que bomba (08/09) ---- */
.tempo-cidade{display:grid;grid-template-columns:112px minmax(0,1fr);gap:6px 10px;align-items:center;margin-bottom:4px}
.tempo-nome{font-size:var(--t-denso);font-weight:600;color:var(--ink-3)}
.tempo-dias{display:flex;gap:10px;overflow-x:auto;padding:4px 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tempo-dia{flex:none;min-width:84px;border-top:1px solid var(--linha,var(--hairline-forte));padding-top:6px;display:grid;gap:1px}
/* No celular o nome da cidade fica em cima, e os dias rolam de lado na largura inteira. */
@media (max-width:560px){
  .tempo-cidade{grid-template-columns:1fr;gap:0}
  .tempo-dia{min-width:78px}
}
.tempo-dia.chuva{border-top-color:#4A90D9}
.td-dia{font-size:.72rem;font-weight:600;color:var(--ink-4);text-transform:uppercase;letter-spacing:.04em}
.td-dia i{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0}
.td-temp{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.td-temp i{font-style:normal;font-weight:500;color:var(--ink-4);font-size:var(--t-nota)}
.td-como{font-size:var(--t-legenda);color:var(--ink-3);line-height:1.3}
.tempo-dia.chuva .td-como{color:#2F6FB5;font-weight:600}
/* Milímetros do dia e a faixa em palavra (12/10): "12,3 mm" em cima, "chuva moderada" embaixo. */
.td-chuva{font-size:var(--t-legenda);color:#2F6FB5;line-height:1.3;display:grid}
.td-chuva b{font-weight:700}
/* Largura fixa: "chuva extremamente forte" não pode esticar um dia e deixar a fileira serrilhada. */
.tempo-dias .tempo-dia{width:112px;min-width:0;align-content:start}
@media (max-width:560px){
  .tempo-dias .tempo-dia{width:104px}
}
.tempo-credito{margin:6px 0 0}
.tempo-legenda{margin:2px 0 0}
.tempo-legenda summary{font-size:var(--t-nota);color:var(--ink-3);cursor:pointer;padding:12px 0;display:list-item;list-style-position:inside}
.tempo-legenda p{margin:0 0 8px}
.bomba-lista{display:flex;flex-wrap:wrap;gap:8px}
.bomba{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linha,var(--hairline-forte));border-radius:999px;padding:6px 12px;text-decoration:none;color:var(--ink);font-size:var(--t-nota);min-height:36px}
.bomba b{font-weight:600}
.bomba span{font-size:var(--t-legenda);font-weight:700;color:var(--laranja);letter-spacing:.02em}
.bomba:hover{border-color:var(--laranja)}
/* ---- A linha de Ideias no Meu dia e nas Demandas (08/09) ---- */
a.ideias-linha{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);padding:16px 22px;margin-bottom:16px}
.ideias-rotulo{flex:none;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--laranja)}
.ideias-texto{flex:1;min-width:0;font-size:var(--t-denso);color:var(--ink-3);line-height:1.4}
.ideias-texto b{color:var(--ink);font-weight:600}
.ideias-seta{flex:none;font-size:var(--t-denso);font-weight:600;color:var(--verde-forte)}
@media (max-width:560px){
  a.ideias-linha{flex-wrap:wrap;gap:6px 12px;padding:14px 18px}
  .ideias-texto{flex-basis:100%}
}
/* ---- Filtros e grupos das notícias por setor (08/09) ---- */
.not-filtros{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.not-filtros button{font:inherit;font-size:var(--t-nota);font-weight:600;border:1px solid var(--linha,var(--hairline-forte));background:var(--papel);color:var(--ink-3);
  border-radius:999px;padding:6px 12px;cursor:pointer;min-height:34px}
.not-filtros button.on{background:var(--ink);color:var(--sobre-ink);border-color:var(--ink)}
.not-sub{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-4);font-size:var(--t-nota);margin-left:8px}
@media (max-width:760px){
  .not-filtros button{min-height:40px}
}
/* ---- Descartar uma ideia (08/09): o × no canto, some só para quem descartou ---- */
.data-tile{position:relative}
.not-item{position:relative}
form.descarte{position:absolute;top:6px;right:0;margin:0}
.data-tile form.descarte{top:8px}
form.descarte button.descartar{font:inherit;font-size:1.05rem;line-height:1;width:28px;height:28px;border:0;border-radius:50%;
  background:transparent;color:var(--ink-4);cursor:pointer;opacity:.55;display:grid;place-items:center}
form.descarte button.descartar:hover{opacity:1;background:rgba(var(--ink-rgb),.06);color:var(--ink)}
form.descarte button.recuperar{font:inherit;font-size:var(--t-legenda);font-weight:600;border:1px solid var(--linha,var(--hairline-forte));background:var(--papel);
  color:var(--ink-3);border-radius:999px;padding:4px 10px;cursor:pointer}
.data-tile.descartada,.not-item.descartada{opacity:.45}
.data-tile.descartada .dt-demanda,.not-item.descartada .dt-demanda{display:none}
.data-tile .dt-nome{padding-right:30px}
.not-item .not-linha{padding-right:30px}
.descartadas-linha a{font-weight:600}
@media (max-width:760px){
  form.descarte button.descartar{width:44px;height:44px;top:0}
  form.descarte{top:0}
  .data-tile form.descarte{top:0}
}
/* ---- Agenda do cliente: pedir arte/campanha e a data dele (08/09) ---- */
.dt-pedir{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dt-pedir .btn.pequeno{font-size:var(--t-nota);padding:7px 12px;min-height:34px}
@media (max-width:760px){
  .dt-pedir .btn.pequeno{min-height:44px}
}
.data-sua summary{font-size:var(--t-denso)}
.data-sua form{position:static!important;width:auto!important;box-shadow:none!important;border:1px solid var(--linha,var(--hairline-forte))!important;max-width:420px}
.data-sua label.linha-caixa{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink)}
.data-sua label.linha-caixa input{width:16px;height:16px;padding:0;border:0;margin:0}
/* ---- O ramo do cliente: busca digitada, vários, fichas (08/09) ---- */
.ramos-escolha{display:grid;gap:8px;position:relative;max-width:640px}
.ramos-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:22px}
.ramo-chip{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--sobre-ink);border-radius:999px;padding:5px 6px 5px 12px;font-size:var(--t-nota);font-weight:600}
.ramo-chip button{font:inherit;line-height:1;width:22px;height:22px;border:0;border-radius:50%;background:rgba(var(--papel-rgb),.18);color:#fff;cursor:pointer;display:grid;place-items:center}
.ramo-chip button:hover{background:rgba(var(--papel-rgb),.32)}
.ramo-vazio{font-size:var(--t-nota);color:var(--ink-4);align-self:center}
.ramos-busca{font:inherit;font-size:var(--t-denso);padding:10px 12px;border:1px solid var(--linha,#d9dce3);border-radius:12px;background:var(--papel);width:100%;box-sizing:border-box}
.ramos-lista{display:grid;gap:0;border:1px solid var(--linha,var(--hairline-forte));border-radius:12px;background:var(--papel);box-shadow:0 12px 30px rgba(var(--sombra-rgb),.12);
  max-height:300px;overflow:auto;padding:4px;position:absolute;left:0;right:0;top:100%;z-index:7}
.ramos-escolha:not(.com-js) .ramos-lista{position:static;box-shadow:none;max-height:none}
.ramos-escolha:not(.com-js) .ramos-chips,.ramos-escolha:not(.com-js) .ramos-busca{display:none}
.ramo-opcao{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;font-size:var(--t-denso);font-weight:400;color:var(--ink);cursor:pointer;min-height:40px}
.ramo-opcao:hover{background:rgba(var(--ink-rgb),.05)}
.ramo-opcao i{font-style:normal;font-size:var(--t-legenda);color:var(--ink-4);margin-left:auto;white-space:nowrap}
.ramos-escolha.com-js .ramo-opcao input{display:none}
.ramo-nada{margin:0;padding:10px;font-size:var(--t-nota);color:var(--ink-4)}
@media (max-width:760px){
  .ramo-opcao{min-height:44px}
}
/* ---- A equipe do cliente (08/09): cliente travado no lançamento ---- */
.campo-fixo{display:block;font-size:var(--t-corpo);font-weight:600;color:var(--ink);padding:8px 0 0}
.campo-publicador[hidden]{display:none}
/* ---- A conta da agência no seletor (08/09) ---- */
.trocador-item.trocador-agencia{font-weight:700}
.trocador-item.trocador-agencia i{font-style:normal;font-weight:500;color:var(--ink-4);font-size:var(--t-nota);margin-left:8px}
/* ---------- a agenda da semana (08/09) ---------- */
.agenda{padding:18px 18px 14px}
.ag-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ag-topo h2{margin:0;font-size:1.25rem;letter-spacing:-.02em}
.ag-topo h2 small{font-size:var(--t-nota);font-weight:500;color:var(--ink-3);margin-left:6px;letter-spacing:0}
.ag-nav{display:flex;align-items:center;gap:6px}
.ag-seta{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--fio);
  color:var(--ink-2);text-decoration:none;font-size:1.2rem;line-height:1;background:rgba(var(--papel-rgb),.7)}
.ag-hoje-link{font-size:var(--t-nota);font-weight:600;color:var(--verde-forte);text-decoration:none;padding:0 6px}
.ag-novo{padding:9px 16px;font-size:var(--t-denso);margin-left:6px}
.ag-aviso{margin:0 0 12px}
.ag-aviso.erro{border-left:3px solid var(--vermelho)}
.ag-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:0 0 14px}
.ag-dia{border-radius:14px;background:rgba(var(--ink-rgb),.05);min-width:0;display:flex;flex-direction:column}
.ag-dia.fim{opacity:.6}
.ag-dia.on{background:var(--ink);color:var(--sobre-ink);opacity:1}
.ag-dia.alvo{outline:2px dashed var(--verde);outline-offset:2px}
.ag-dia-cabeca{all:unset;cursor:pointer;display:block;text-align:center;padding:8px 0 7px;min-height:44px;box-sizing:border-box;width:100%}
.ag-dia-cabeca i{display:block;font-style:normal;font-family:var(--display);font-weight:600;font-size:var(--t-legenda);letter-spacing:.08em;color:var(--ink-4)}
.ag-dia.on .ag-dia-cabeca i{color:rgba(255,255,255,.7)}
.ag-dia-cabeca b{display:block;font-size:1.1rem;font-weight:600;letter-spacing:-.02em;margin-top:2px;line-height:1.1}
.ag-dia.hoje:not(.on) .ag-dia-cabeca b{color:var(--verde-forte)}
.ag-pontos{display:flex;justify-content:center;gap:3px;margin-top:5px;height:5px}
.ag-pontos s{width:5px;height:5px;border-radius:50%;display:block;text-decoration:none;background:var(--ink-4)}
.ag-pontos s.c{background:var(--azul-vivo)}
.ag-pontos s.r{background:var(--verde)}
.ag-pontos s.a{background:var(--vermelho)}
.ag-dia.on .ag-pontos s{background:rgba(var(--papel-rgb),.85)}
/* Os cartões dentro do dia: só no computador. No celular a faixa é só a faixa. */
.ag-mini{display:none}
.ag-dia-nome{font-family:var(--display);font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:2px 0 4px}
.ag-vazio{margin:6px 0 10px}
.ag-vazio .ag-link{margin-left:6px}
.ag-item{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 10px;padding:11px 0;border-top:1px solid var(--hairline)}
.ag-item:first-of-type{border-top:0}
.ag-hora{font-family:var(--mono,ui-monospace,monospace);font-size:var(--t-nota);color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:2px}
.ag-hora small{font-size:var(--t-rotulo);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.ag-corpo{min-width:0}
.ag-titulo{display:block;font-weight:650;font-size:var(--t-denso);letter-spacing:-.01em;line-height:1.25}
.ag-item.feito .ag-titulo,.ag-item.dispensado .ag-titulo{text-decoration:line-through;color:var(--ink-4)}
.ag-sub{display:block;font-size:var(--t-nota);color:var(--ink-3);margin-top:3px;line-height:1.4}
.ag-tag{font-family:var(--display);font-weight:600;font-size:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;font-style:normal;
  padding:2px 6px;border-radius:6px;background:rgba(var(--ink-rgb),.06);color:var(--ink-3);margin-right:6px;vertical-align:1px}
.ag-tag.reuniao,.ag-tag.visita{background:rgba(47,111,237,.12);color:var(--azul-vivo)}
.ag-tag.ligacao{background:rgba(62,142,36,.12);color:var(--verde-forte)}
.ag-tag.p{background:rgba(194,90,20,.12);color:var(--laranja)}
.ag-tag.g{background:rgba(var(--ink-rgb),.06);color:var(--ink-3)}
.ag-nota{display:block;font-size:var(--t-nota);color:var(--ink-4);margin-top:3px}
.ag-nota.atrasado{color:var(--vermelho)}
.ag-convidados{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ag-conv{font-size:var(--t-legenda);padding:2px 8px;border-radius:999px;background:rgba(var(--ink-rgb),.06);color:var(--ink-3)}
.ag-conv.sim{background:rgba(62,142,36,.14);color:var(--verde-forte)}
.ag-conv.nao{background:rgba(198,43,69,.12);color:var(--vermelho);text-decoration:line-through}
.ag-conv.talvez{background:rgba(194,90,20,.12);color:var(--laranja)}
.ag-anot{margin-top:4px;font-size:var(--t-nota)}
.ag-anot summary{cursor:pointer;color:var(--ink-3);list-style:none}
.ag-anot summary::-webkit-details-marker{display:none}
.ag-anot p{margin:4px 0 0;color:var(--ink-2)}
.ag-acoes{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:2px}
.ag-inline{display:inline-flex;gap:8px;align-items:center}
.ag-link{all:unset;cursor:pointer;font-size:var(--t-nota);font-weight:600;color:var(--verde-forte);min-height:36px;display:inline-flex;align-items:center;text-decoration:none}
.ag-link.vermelho{color:var(--vermelho)}
.ag-feito{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 6px;border-radius:999px;
  border:1.6px solid var(--fio-forte,rgba(var(--ink-rgb),.2));font-size:var(--t-nota);font-weight:600;color:var(--ink-2)}
.ag-feito span{width:22px;height:22px;border-radius:50%;background:var(--verde-claro);color:var(--texto-verde-escuro);display:grid;place-items:center;font-size:var(--t-nota)}
.ag-feito:hover{border-color:var(--verde)}
.ag-chamada{background:var(--azul-vivo);border-color:var(--azul-vivo)}
.ag-dobrada{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-top:6px;padding:10px;border-radius:12px;background:rgba(var(--ink-rgb),.04)}
.ag-dobrada label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-legenda);color:var(--ink-3)}
.ag-dobrada input[type=text]{flex:1 1 180px;min-width:0}
.ag-rotinas{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 0 2px;border-top:1px solid var(--hairline);text-decoration:none;color:var(--ink);font-weight:600;font-size:var(--t-denso)}
.ag-rotinas small{font-weight:500;color:var(--ink-3);font-size:var(--t-nota)}
.ag-rotinas em{font-style:normal;color:var(--vermelho)}
.ag-seta-baixo{margin-left:auto;width:7px;height:7px;border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);transform:rotate(45deg)}
/* a folha */
.ag-folha{--pw:560px;display:block}
.ag-folha:not([open]) > summary{display:none}
.ag-folha .popup-corpo{padding:0}
.ag-form{display:flex;flex-direction:column;gap:12px;padding:18px 18px 22px}
.ag-form-topo{display:flex;justify-content:space-between;align-items:baseline}
.ag-form-topo h3{margin:0;font-size:1.2rem;letter-spacing:-.02em}
.ag-campo{display:flex;flex-direction:column;gap:6px;margin:0}
/* Rótulo em caixa alta é da família do painel, como .kicker: as duas
   variáveis usadas aqui (--mono, --corpo) não existiam e tudo caía na
   máquina de escrever, inclusive frase inteira (09/09). Monoespaçada
   ficou só onde há hora, que se alinha em coluna. */
.ag-rotulo{font-family:var(--display);font-weight:600;font-size:var(--t-rotulo);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ag-rotulo small{font-family:var(--corpo);font-weight:400;text-transform:none;letter-spacing:0;font-size:var(--t-legenda);color:var(--ink-4);margin-left:6px}
.ag-form input[type=text],.ag-form input[type=url],.ag-form input[type=date],.ag-form input[type=time],.ag-form textarea{width:100%;box-sizing:border-box}
/* url e time não estão na regra geral dos campos: ganham o mesmo desenho. */
.ag-form input[type=url],.ag-form input[type=time],.ag-dobrada input[type=time],.ag-dobrada input[type=date],.ag-dobrada input[type=text]{
  font-family:var(--body);font-size:var(--t-denso);color:var(--ink);background:rgba(var(--papel-rgb),.72);border:1px solid rgba(var(--ink-rgb),.13);
  border-radius:12px;padding:9px 12px;-webkit-appearance:none;appearance:none;box-shadow:inset 0 1px 2px rgba(var(--sombra-rgb),.04);min-height:44px}
.ag-apagar{display:flex;justify-content:center;padding:0 18px 18px}
.ag-dois{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ag-seg{display:flex;background:rgba(var(--ink-rgb),.06);border-radius:999px;padding:3px;gap:2px}
.ag-seg label{flex:1;position:relative;margin:0}
.ag-seg input{position:absolute;opacity:0;width:0;height:0}
.ag-seg span{display:block;text-align:center;padding:9px 4px;border-radius:999px;font-size:var(--t-nota);font-weight:600;color:var(--ink-3);cursor:pointer;min-height:36px;box-sizing:border-box}
.ag-seg input:checked + span{background:var(--papel);color:var(--ink);box-shadow:0 1px 4px rgba(var(--sombra-rgb),.14)}
.ag-seg input:focus-visible + span{outline:2px solid var(--verde);outline-offset:1px}
.ag-seg.pequena span{font-size:var(--t-nota);padding:7px 2px}
.ag-marcas{display:flex;flex-wrap:wrap;gap:8px}
.ag-marcas label{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:var(--t-denso);color:var(--ink-2);min-height:36px;padding:0 12px 0 8px;border:1px solid var(--fio);border-radius:999px;cursor:pointer}
.ag-marcas label:has(input:checked){border-color:var(--verde);color:var(--ink);background:rgba(62,142,36,.08)}
.ag-marcas input{width:auto;margin:0}
.ag-marcas-fim{margin-top:2px}
.ag-escolha{position:relative}
.ag-opcoes{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--papel);border:1px solid var(--fio);border-radius:14px;
  box-shadow:0 12px 34px rgba(var(--sombra-rgb),.14);padding:6px;max-height:240px;overflow:auto;margin-top:4px}
.ag-opcao{all:unset;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;border-radius:9px;font-size:var(--t-denso);min-height:40px}
.ag-opcao b{font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-opcao small{color:var(--ink-4);font-size:var(--t-legenda);white-space:nowrap}
.ag-opcao:hover,.ag-opcao.on{background:rgba(var(--ink-rgb),.06)}
.ag-opcao.nova b{color:var(--verde-forte)}
.ag-chips{display:flex;flex-wrap:wrap;gap:6px}
.ag-chips:empty{display:none}
.ag-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 11px;border-radius:999px;background:rgba(var(--ink-rgb),.06);font-size:var(--t-nota)}
.ag-chip b{font-weight:600}
.ag-chip small{color:var(--ink-4);font-size:var(--t-legenda)}
.ag-chip.app small{color:var(--verde-forte)}
.ag-chip button{all:unset;cursor:pointer;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--ink-4);font-size:var(--t-legenda)}
.ag-chip button:hover{background:rgba(var(--ink-rgb),.08);color:var(--ink)}
.ag-form-pe{display:flex;justify-content:flex-end;margin-top:4px}
.ag-form-pe .btn{min-width:180px}
/* o computador: a faixa vira sete colunas com os cartões dentro */
@media (min-width:900px){
  .ag-semana{gap:8px}
  .ag-dia{min-height:170px;background:rgba(var(--ink-rgb),.04);padding:0 0 8px}
  .ag-dia.on{background:rgba(var(--ink-rgb),.04);color:inherit;outline:2px solid var(--ink)}
  .ag-dia.on .ag-dia-cabeca i{color:var(--ink-4)}
  .ag-dia.on .ag-pontos s{background:var(--ink-4)}
  .ag-dia.on .ag-pontos s.c{background:var(--azul-vivo)}
  .ag-dia.on .ag-pontos s.r{background:var(--verde)}
  .ag-dia.on .ag-pontos s.a{background:var(--vermelho)}
  .ag-dia-cabeca{display:flex;align-items:baseline;justify-content:space-between;padding:8px 10px 4px;text-align:left}
  .ag-dia-cabeca b{margin:0;font-size:1.05rem}
  .ag-pontos{margin:0;height:auto;align-self:center}
  .ag-mini{display:flex;flex-direction:column;gap:5px;padding:0 6px;flex:1}
  .ag-card{display:block;text-decoration:none;color:inherit;background:var(--papel);border-radius:9px;padding:6px 8px;font-size:var(--t-legenda);line-height:1.3;
    border-left:3px solid var(--ink-4);cursor:grab;min-width:0}
  .ag-card b{display:block;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ag-card span{display:block;color:var(--ink-3);font-size:var(--t-legenda);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ag-card.reuniao,.ag-card.visita{border-left-color:var(--azul-vivo)}
  .ag-card.ligacao{border-left-color:var(--verde)}
  .ag-card.tarefa{border-left-color:var(--laranja)}
  .ag-card.encerrado{opacity:.5}
  .ag-card.encerrado b{text-decoration:line-through}
  .ag-card.atrasado{border-left-color:var(--vermelho)}
  .ag-mais{font-size:var(--t-legenda);color:var(--ink-4);padding:0 4px}
  .ag-rot{margin-top:auto;padding:6px 4px 0;border-top:1px solid var(--hairline);font-size:var(--t-legenda);color:var(--ink-3)}
  .ag-rot b{color:var(--ink)}
  .ag-rot em{font-style:normal;color:var(--vermelho)}
  .ag-item{grid-template-columns:64px minmax(0,1fr) auto;align-items:start}
  .ag-acoes{grid-column:3;justify-content:flex-end;margin-top:0}
  .ag-dobrada{grid-column:1 / -1}
}
@media (max-width:560px){
  .ag-dois{grid-template-columns:1fr 1fr}
  .ag-seg span{font-size:var(--t-nota);padding:9px 2px}
  .ag-acoes{gap:4px 10px}
}
.ag-alerta{color:var(--laranja)}
.ag-marcas label small.fino{font-size:var(--t-legenda);color:var(--ink-4);margin-left:4px}
/* NOVE ABAS NO ALTO (08/09, com Vendas): entre 1121 e 1440px a linha não
   cabia mais e "Redes sociais" caía para uma segunda linha dentro da
   pílula. Aqui as abas apertam um pouco e nunca quebram — se faltar,
   rolam de lado, como já fazem entre 861 e 1120. */
@media (min-width:1121px) and (max-width:1680px){
  body.novo .nav-abas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px;justify-content:flex-start}
  /* CENTRO SEGURO. Centrada por justify-content, a fileira que não cabe
     transborda dos DOIS lados e a primeira aba some por baixo do logo —
     foi assim que "Meu dia" virou "u dia" com a décima aba (09/09). Com
     a margem automática nas pontas ela centraliza quando cabe e encosta
     à esquerda, rolando, quando não cabe. */
  body.novo .nav-abas > :first-child{margin-left:auto}
  body.novo .nav-abas > :last-child{margin-right:auto}
  body.novo .nav-abas::-webkit-scrollbar{display:none}
  /* Dez abas (com Referências, 09/09) cabem em 1180px com 9px de lado. */
  body.novo .nav-aba{padding:8px 8px;font-size:var(--t-nota)}
  body.novo .trocador summary{max-width:180px}
}
/* O CELULAR: toque de 44px em tudo que se toca na agenda, e campo com
   16px para o iPhone não dar zoom (revisão de 08/09). */
@media (max-width:760px){
  .ag-link,.ag-feito,.ag-opcao,.ag-seta,.ag-hoje-link{min-height:44px}
  .ag-seta{width:44px;height:44px}
  .ag-form input[type=text],.ag-form input[type=url],.ag-form input[type=date],.ag-form input[type=time],.ag-form textarea,
  .ag-dobrada input[type=text],.ag-dobrada input[type=date],.ag-dobrada input[type=time]{font-size:var(--t-corpo)}
  .ag-marcas label,.ag-seg span{min-height:44px}
  .ag-chip button{width:32px;height:32px}
}
.ag-item.cancelado .ag-titulo{color:var(--ink-3)}
.ag-item.cancelado .ag-hora{color:var(--ink-4)}
.btn.vermelho{background:var(--vermelho);border-color:var(--vermelho)}
/* O erro do formulário nasce ao lado do botão, em vermelho: em texto
   preto ele parecia mais uma linha de explicação. */
form[data-com-form] p.erro{color:var(--vermelho);font-weight:600;font-size:var(--t-denso)}
/* Encerrados do dia (08/09): concluído e "não vou" somem da lista, como as
   rotinas, e ficam dobrados aqui com o "desfazer". */
.ag-encerrados{margin-top:6px;border-top:1px solid var(--hairline);padding-top:8px}
.ag-encerrados > summary{cursor:pointer;list-style:none;font-size:var(--t-nota);color:var(--ink-3);min-height:36px;display:flex;align-items:center;gap:6px}
.ag-encerrados > summary::-webkit-details-marker{display:none}
.ag-encerrados > summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.ag-encerrados[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.ag-enc{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:var(--t-denso)}
.ag-enc-hora{font-family:var(--mono,ui-monospace,monospace);font-size:var(--t-nota);color:var(--ink-4);width:44px;flex:none}
.ag-enc-texto{flex:1;min-width:0;color:var(--ink-3)}
.ag-enc-texto small{display:block;font-size:var(--t-nota);color:var(--ink-4)}
.tarefa-nova{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.tarefa-nova input[type=text]{flex:1 1 240px;min-width:0}
.tarefa-nova label.fino{display:inline-flex;align-items:center;gap:6px}
/* min-height só no computador: a regra do celular (44px) mora numa media
   query ACIMA desta, e .hoje-titulo .ag-link tem mais peso — a linha
   passava por cima dela e o botão ficava com 32px no telefone (09/09). */
@media (min-width:761px){
  .hoje-titulo .ag-link{min-height:32px}
}
.hoje-titulo .ag-link{margin-left:10px;font-size:var(--t-nota)}
.tarefa.avulsa .tarefa-dispensar label.fino{display:inline-flex;align-items:center;gap:6px}
/* TODA LISTA SE ESCREVE (08/09): a caixa que o escreve.js põe por cima
   do <select>. O select fica escondido no mesmo lugar, para o envio. */
.esc{position:relative;display:inline-block;vertical-align:middle;max-width:100%}
.esc.esc-bloco{display:block;width:100%}
.esc .esc-caixa{width:100%;box-sizing:border-box;padding-right:40px;text-overflow:ellipsis}
.esc-oculto{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;min-height:0!important;opacity:0;pointer-events:none;margin:0!important;padding:0!important;border:0!important}
.esc-seta{all:unset;position:absolute;right:4px;top:0;bottom:0;width:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#666E82}
.esc-seta::after{content:"";width:7px;height:7px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.esc.aberta .esc-seta::after{transform:rotate(-135deg) translateY(2px)}
.esc-opcoes{position:absolute;left:0;right:0;top:100%;z-index:7;background:var(--papel);border:1px solid var(--fio);border-radius:14px;
  box-shadow:0 12px 34px rgba(var(--sombra-rgb),.14);padding:6px;max-height:min(46vh,300px);overflow:auto;margin-top:4px;min-width:min(240px,90vw);text-align:left}
.esc-opcao{all:unset;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;border-radius:9px;font-size:var(--t-denso);min-height:40px;line-height:1.3}
.esc-opcao b{font-weight:500;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.esc-opcao small{color:var(--ink-4);font-size:var(--t-legenda);white-space:nowrap}
.esc-opcao:hover,.esc-opcao.on{background:rgba(var(--ink-rgb),.06)}
.esc-nada{padding:10px;font-size:var(--t-nota);color:var(--ink-4)}
@media (max-width:760px){
  .esc-opcao{min-height:44px}
}
/* A volta da ficha da peça é um alvo de dedo, não uma linha de texto.
   Com o seletor solto (.kicker a) isto engordava em 26px o topo de vinte
   telas de administração, que também têm link no kicker (09/09). */
@media (max-width:760px){
  .kicker a.voltar{display:inline-flex;align-items:center;min-height:44px}
}
/* Data que já passou: o nome é a informação, "passou" é o estado (09/09).
   A ORDEM NÃO MUDA — nome em cima, estado embaixo, como nas outras —,
   senão a fileira serrilha: a linha grande de um azulejo ficaria na
   altura da linha miúda do vizinho. Só os tamanhos se invertem. */
.data-tile.passou .dt-nome{font-size:var(--t-corpo);line-height:1.25;font-weight:700;color:var(--ink)}
.data-tile.passou .dt-grande{font-size:.68rem;font-weight:600;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
/* O nome da área no lugar do seletor de empresa, nas telas de administração. */
.nav-area{font-weight:600;font-size:var(--t-denso);color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:52vw;margin-right:auto}
/* A TELA QUE VEIO PELA METADE (15/09). Segunda tentativa também cortada:
   o painel para de insistir e mostra esta faixa, acima da barra de abas,
   com o botão para tentar de novo quando a internet melhorar. */
.tela-cortada{
  position:fixed;left:14px;right:14px;bottom:calc(96px + env(safe-area-inset-bottom) * .45);z-index:60;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;
  padding:12px 14px;border-radius:18px;background:var(--papel);border:1px solid var(--hairline);
  box-shadow:0 12px 34px rgba(var(--sombra-rgb),.14);font-size:var(--t-denso);color:var(--ink);
}
@media (min-width:761px){
  .tela-cortada{left:auto;right:22px;bottom:22px;max-width:420px}
}
/* =====================================================================
   REFERÊNCIAS (09/09): a grade de vídeos que funcionaram, com os filtros
   em cima e o player que entra no lugar da capa. Desenho aprovado em
   06/09 (o mock _trend.php): capa alta, selo do formato, "novo", o selo
   do ramo vizinho, o gancho, a linha do por quê, os números, e o botão.
   ===================================================================== */
.ref-bombando{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 6px}
.ref-bombando-rotulo{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin-right:4px}
.ref-bombando .chip{margin:0;text-decoration:none;font-weight:600;padding:5px 11px;font-size:var(--t-nota);color:var(--ink-2);background:rgba(var(--ink-rgb),.06)}
.ref-bombando .chip small{font-weight:500;color:var(--ink-4);font-size:var(--t-legenda)}
.ref-bombando a.chip:hover{background:rgba(var(--ink-rgb),.1);color:var(--ink)}
.ref-filtros{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.ref-filtros .chip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border-radius:999px;font-size:var(--t-denso);font-weight:600;color:var(--ink-2);
  background:var(--papel);border:1px solid var(--hairline);min-height:38px;box-sizing:border-box;white-space:nowrap}
.ref-filtros .chip b{font-weight:600;color:var(--ink-4);font-size:var(--t-nota)}
.ref-filtros .chip:hover{border-color:var(--fio-forte,rgba(var(--ink-rgb),.2))}
.ref-filtros .chip.on{background:var(--ink);color:var(--sobre-ink);border-color:var(--ink)}
.ref-filtros .chip.on b{color:rgba(255,255,255,.7)}
.ref-filtros .chip:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.ref-grade{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.ref-cartao{display:flex;flex-direction:column;background:var(--papel);border-radius:20px;overflow:hidden;
  box-shadow:0 1px 2px rgba(var(--sombra-rgb),.05),0 10px 30px rgba(var(--sombra-rgb),.06)}
.ref-cartao[hidden]{display:none}
/* A CAPA É UM BOTÃO: toca aqui dentro. O YouTube entrega a capa em 4:3
   com faixas pretas; o corte (cover) tira as faixas — de lado no short,
   em cima e embaixo no vídeo. */
.ref-arte{all:unset;cursor:pointer;position:relative;display:block;width:100%;aspect-ratio:16/10;
  background:#0E101D;overflow:hidden}
.ref-cartao.curta .ref-arte{aspect-ratio:4/5}
.ref-arte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ref-arte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:3}
.ref-arte.tocando img,.ref-arte.tocando .ref-play,.ref-arte.tocando .ref-selo,
.ref-arte.tocando .ref-novo,.ref-arte.tocando .ref-outro{display:none}
.ref-arte:focus-visible{outline:3px solid var(--verde);outline-offset:-3px}
.ref-selo,.ref-novo,.ref-outro{position:absolute;z-index:2;font-size:var(--t-rotulo);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;line-height:1}
.ref-selo{top:12px;left:12px;background:rgba(var(--papel-rgb),.94);color:var(--ink)}
.ref-novo{top:12px;right:12px;background:var(--laranja);color:#fff}
.ref-outro{bottom:12px;left:12px;background:rgba(var(--ink-rgb),.72);color:#fff;text-transform:none;letter-spacing:0;font-size:var(--t-legenda);font-weight:600}
.ref-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:rgba(var(--papel-rgb),.9);box-shadow:0 8px 24px rgba(var(--sombra-rgb),.3);z-index:2;
  transition:transform .15s}
.ref-play::after{content:"";position:absolute;left:23px;top:18px;border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--ink)}
.ref-arte:hover .ref-play{transform:scale(1.06)}
.ref-corpo{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.ref-gancho{margin:0;font-family:var(--display);font-weight:700;font-size:var(--t-corpo);line-height:1.3;color:var(--ink);
  overflow-wrap:anywhere}
.ref-porque{margin:0;font-size:var(--t-denso);line-height:1.45;color:var(--ink-2)}
.ref-porque b{color:var(--ink)}
.ref-onde{margin:0;font-size:var(--t-nota);color:var(--ink-4)}
.ref-pe{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:auto;padding-top:8px}
.ref-ver{font-size:var(--t-denso);font-weight:600;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.ref-ver:hover{color:var(--ink);text-decoration:underline}
.ref-anotar{margin-top:4px}
.ref-anotar > summary{cursor:pointer;list-style:none;font-size:var(--t-nota);font-weight:600;color:var(--verde-forte);
  display:inline-flex;align-items:center;min-height:32px}
.ref-anotar > summary::-webkit-details-marker{display:none}
.ref-form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:var(--t-denso);padding:9px 11px;border-radius:12px;
  border:1px solid var(--hairline);background:var(--chao,#F2F4F7);resize:vertical;min-height:58px}
.ref-form-pe{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ref-nada{margin:14px 0;font-size:var(--t-denso);color:var(--ink-4)}
.ref-colar{display:grid;gap:12px 14px;grid-template-columns:2fr 1fr;align-items:end}
.ref-colar label{display:flex;flex-direction:column;gap:4px;min-width:0}
.ref-colar label > span{font-size:var(--t-nota);color:var(--ink-3)}
.ref-colar label > span .fino{display:inline;font-style:normal}
.ref-colar input,.ref-colar select{min-width:0;width:100%;box-sizing:border-box}
.ref-colar .ref-colar-porque{grid-column:1 / -1}
@media (max-width:760px){
  .ref-grade{grid-template-columns:1fr;gap:14px}
  .ref-filtros{margin:10px -4px 12px;padding:0 4px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .ref-filtros::-webkit-scrollbar{display:none}
  .ref-filtros .chip{min-height:44px;flex:none}
  .ref-colar{grid-template-columns:1fr}
  .ref-anotar > summary,.ref-ver{min-height:44px;display:inline-flex;align-items:center}
  /* 44px como tudo o que se toca: são links para fora, no alto da tela. */
  .ref-bombando .chip{min-height:44px}
}
/* A GAVETA DAS TIRADAS: fechada por padrão, porque quase nunca se abre. */
.ref-tiradas{margin-top:18px}
.ref-tiradas > summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:700;
  font-size:1.05rem;display:flex;align-items:center;gap:8px;min-height:44px}
.ref-tiradas > summary::-webkit-details-marker{display:none}
.ref-tiradas-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ref-tiradas-lista li{display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:10px 0;border-top:1px solid var(--hairline);font-size:var(--t-denso);color:var(--ink-2)}
.ref-tiradas-lista li span{min-width:0;overflow-wrap:anywhere}
.ref-tiradas-lista li i{display:block;font-style:normal;font-size:var(--t-nota);color:var(--ink-4)}
.ref-tiradas-lista form{flex:none}
/* ---------- baixar o material aprovado (v296) ----------

   O botão é um link; o baixar.js muda o texto conforme anda (Baixando ·
   45% → Pronto — toque para salvar → Pronto). O estado mora na classe,
   e cada estado tem cara própria: quem está esperando um vídeo de 60 MB
   precisa ver que algo acontece. */
.baixar{white-space:nowrap}
.baixar svg{flex:none}
.baixar.baixando{pointer-events:none;position:relative;padding-right:40px!important}
.baixar.baixando::after{content:"";position:absolute;right:14px;top:50%;width:14px;height:14px;margin-top:-7px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gm-gira .8s linear infinite}
.baixar.pronto{background:var(--verde-forte)!important;color:#fff!important;border-color:transparent!important;
  animation:gm-pulsa 1.4s ease-in-out infinite}
.baixar.feito{background:var(--verde-forte)!important;color:#fff!important;border-color:transparent!important}
.baixar.erro{background:var(--vermelho)!important;color:#fff!important;border-color:transparent!important}
@keyframes gm-pulsa{50%{box-shadow:0 0 0 7px rgba(62,142,36,.18)}}
@media (prefers-reduced-motion:reduce){
  .baixar.baixando::after,.baixar.pronto{animation:none}
}
/* Embaixo do cartão na prateleira: quem aprovou à esquerda, Baixar à
   direita. Numa linha só enquanto cabe; no cartão estreito, o botão desce. */
.peca-pe-aprovada{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-top:8px}
.peca-pe-aprovada .peca-quem-ok{margin:0 2px;flex:1 1 150px}
.peca-pe-aprovada .baixar{margin-left:auto}
/* Na ficha: o "Baixar tudo" logo abaixo do material, com a dica do celular. */
.peca-baixar-tudo{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-top:14px}
.peca-baixar-tudo .fino{margin:0}
/* Atualizar do Drive (v374): no pé do material, separado da arte por um
   fio — é ferramenta de quem faz a peça, não parte dela. */
.drive-reler{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--hairline)}
.drive-reler form{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:0}
.drive-reler .fino{margin:0}
.drive-reler-empresa{flex:0 1 420px;display:flex;flex-direction:column;align-items:flex-end;margin-bottom:6px}
.drive-reler-empresa form{margin:0}
.drive-reler-empresa .aviso-junto{margin:0 0 8px;text-align:right;justify-content:flex-end}
/* No celular o botão desce para baixo do título, e o texto alinhado à
   direita numa coluna estreita fica serrilhado: volta para a esquerda. */
@media (max-width:759px){
  /* body.novo .topo-linha > div é a regra do bloco do título, e pega este
     também: sem o seletor longo, ela centraliza o botão. */
  .drive-reler-empresa,body.novo .topo-linha > div.drive-reler-empresa{flex-basis:100%;align-items:flex-start}
  .drive-reler-empresa .aviso-junto{text-align:left;justify-content:flex-start}
}
/* Em cada arquivo da ficha, um "baixar" miúdo embaixo do nome — para o
   carrossel em que só uma lâmina interessa. Fora da legenda, que corta em
   duas linhas (ver arquivo_com_visor). */
.drive-item .drive-baixar{display:inline-flex;align-items:center;gap:4px;margin:6px 0 0;padding:2px 10px;font-size:var(--t-legenda);line-height:1.3;text-decoration:none;
  border:1px solid var(--glass-edge);border-radius:999px;color:var(--ink-2);font-weight:600;white-space:nowrap;
  vertical-align:middle;transition:border-color .16s,color .16s}
.drive-item .drive-baixar:hover{border-color:var(--laranja);color:var(--ink)}
.drive-item .drive-baixar svg{width:11px;height:11px}
.drive-item .drive-baixar.baixando{padding-right:26px}
.drive-item .drive-baixar.baixando::after{right:8px;width:10px;height:10px;margin-top:-5px}
@media (max-width:760px){
  .baixar.btn{min-height:44px}
  .drive-item .drive-baixar{min-height:36px;padding:4px 14px;font-size:var(--t-nota)}
}
/* ---------- o ajudante no lançamento (v299) ---------- */
.ajudante .ajudante-linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ajudante .ajudante-linha .fino{margin:0;flex:1 1 260px}
.ajudante-saida{margin-top:10px;padding:12px 14px;border-radius:14px;background:rgba(var(--ink-rgb),.04);font-size:var(--t-denso)}
.ajudante-saida p{margin:0 0 6px}
.ajudante-saida p:last-child{margin-bottom:0}
.ajudante-erro{color:var(--vermelho);font-weight:600;margin:0}
.ajudante-custo{font-size:var(--t-nota);color:var(--ink-3);margin-left:6px;font-variant-numeric:tabular-nums}
.ajudante-lista{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:3px}
.ajudante-lista li{padding-left:20px;position:relative}
.ajudante-lista li::before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--verde-forte)}
.ajudante-lista li.falta{color:var(--vermelho)}
.ajudante-lista li.falta::before{content:"!";color:var(--vermelho)}
.ajudante-alerta{margin-top:10px;padding:12px 14px;border-radius:12px;background:#FFF1E8;border-left:3px solid var(--laranja)}
.ajudante-alerta b{color:var(--ink)}
.ajudante-alerta ul{margin:6px 0 10px 18px;padding:0}
.ajudante-alerta li{margin:2px 0}
.ajudante-alerta s{color:var(--vermelho)}
.ajudante-conferi{display:flex;align-items:flex-start;gap:8px;font-weight:600;cursor:pointer}
.ajudante-conferi input{margin-top:4px}
@media (max-width:760px){
  .ajudante .btn{min-height:44px}
}
/* Botão travado (o Lançar enquanto o ajudante espera o "Conferi o vídeo"):
   tem de PARECER travado, senão o clique que não faz nada vira defeito. */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
/* ---- Fileira grande (14/09/2026): chips por cliente e "ver mais" — ver fileira.js ---- */
.fileira-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.fileira-chips button{font:inherit;font-size:var(--t-nota);font-weight:600;border:1px solid var(--linha,var(--hairline-forte));background:var(--papel);color:var(--ink-3);
  border-radius:999px;padding:6px 12px;cursor:pointer;min-height:34px}
.fileira-chips button b{font-weight:600;color:var(--ink-4);margin-left:5px}
.fileira-chips button.on{background:var(--ink);color:var(--sobre-ink);border-color:var(--ink)}
.fileira-chips button.on b{color:rgba(255,255,255,.7)}
.fileira-mais{display:flex;justify-content:center;padding:4px 0 8px}
@media (max-width:760px){
  .fileira-chips button{min-height:40px}
}
/* ---- Pauta do mês na aba Ideias (v305) — ver inc/pauta.php ---- */
.pauta-pedido{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin:0}
.pauta-pedido label{display:grid;gap:4px;font-size:var(--t-nota);font-weight:600;color:var(--ink-4);flex:1 1 220px;max-width:340px}
.pauta-pedido label:nth-of-type(2){flex:0 1 200px}
.pauta-pedido select{font:inherit;font-size:var(--t-denso);font-weight:400;padding:9px 10px;border-radius:10px;border:1px solid var(--linha,var(--hairline-forte));background:var(--papel);color:var(--ink)}
.pauta-pedido .pauta-espera{flex-basis:100%;margin:0}
.pauta-cliente{border-top:1px solid var(--linha,var(--hairline-forte));padding:12px 0 4px}
.pauta-cliente > summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-height:32px}
.pauta-cliente > summary::-webkit-details-marker{display:none}
.pauta-cliente > summary::after{content:"›";margin-left:auto;color:var(--ink-4);font-size:1.1rem;transition:transform .15s}
.pauta-cliente[open] > summary::after{transform:rotate(90deg)}
.pauta-cliente > summary b{font-weight:700;color:var(--ink)}
.pauta-cliente > summary span{font-size:var(--t-denso);color:var(--ink-3)}
.pauta-cliente > summary small{font-size:var(--t-nota);color:var(--ink-4)}
.pauta-grade{margin-top:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pauta-tile .dt-nome{text-transform:none}
.pauta-tile .dt-grande{font-size:var(--t-corpo);line-height:1.25;padding-right:22px}
.pauta-tile .pauta-gancho{font-size:var(--t-nota);color:var(--ink);line-height:1.4;margin-top:3px;font-style:italic}
.pauta-tile.virou{opacity:.62}
@media (max-width:760px){
  .pauta-cliente > summary{min-height:44px}
  .pauta-pedido label,.pauta-pedido label:nth-of-type(2){flex:1 1 100%;max-width:none}
  .pauta-pedido select,.pauta-pedido .btn{min-height:44px}
}
@media (max-width:560px){
  .pauta-grade{grid-template-columns:1fr}
}
.pauta-tile .pauta-cuidado{font-size:var(--t-nota);line-height:1.35;color:var(--laranja-forte);font-weight:600;margin-top:3px}
.pauta-secao{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin:18px 0 4px}
.pauta-campanhas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px 24px;margin-top:4px}
.pauta-campanha{position:relative;border-top:2px solid var(--linha,var(--hairline-forte));padding-top:10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.pauta-campanha.principal{border-top-color:var(--laranja)}
.pauta-campanha.virou{opacity:.62}
.pauta-campanha .dt-nome{font-size:var(--t-nota);font-weight:600;color:var(--ink-3)}
.pauta-campanha .pc-nome{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink);padding-right:22px}
.pauta-campanha .pc-objetivo{font-size:var(--t-denso);color:var(--ink);line-height:1.4}
.pauta-campanha .dt-dica{font-size:var(--t-nota);color:var(--ink-3);line-height:1.4}
.pauta-campanha .dt-sub{font-size:var(--t-nota);color:var(--ink-4);line-height:1.35}
.pauta-campanha .dt-sub b{color:var(--ink-3);font-weight:600}
.pc-acoes{margin:4px 0 2px;padding-left:18px;font-size:var(--t-nota);color:var(--ink-2);line-height:1.4;display:flex;flex-direction:column;gap:2px}
.pc-canais{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0}
.pc-canais i{font-style:normal;font-size:var(--t-legenda);font-weight:600;color:var(--ink-3);background:rgba(var(--ink-rgb),.06);border-radius:999px;padding:2px 8px}
.pauta-campanha .pauta-cuidado{font-size:var(--t-nota);line-height:1.35;color:var(--laranja-forte);font-weight:600;margin-top:3px}
.pauta-campanha form.descarte{position:absolute;top:6px;right:0;margin:0}
.pauta-campanha .dt-demanda{margin-top:auto}
@media (max-width:560px){
  .pauta-campanhas{grid-template-columns:1fr}
}
.pauta-andamento{font-size:var(--t-denso);color:var(--ink-2);background:rgba(255,145,77,.10);border-radius:12px;padding:10px 14px;margin:0 0 10px;line-height:1.45}
.pauta-andamento.erro{background:rgba(198,43,69,.08);color:var(--vermelho)}
.pauta-andamento[data-pauta-escrevendo]::before{content:"";display:inline-block;width:.7em;height:.7em;margin-right:8px;border-radius:50%;
  border:2px solid var(--laranja-forte);border-right-color:transparent;animation:pauta-gira .9s linear infinite;vertical-align:-1px}
@keyframes pauta-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .pauta-andamento[data-pauta-escrevendo]::before{animation:none}
}
/* ---- A aprovação da pauta (v305) — ver inc/pauta.php e pauta.php ---- */
.pauta-envio-resumo{display:flex;flex-wrap:wrap;gap:4px;flex-basis:100%}
.pauta-envio-resumo i,.pauta-estado{font-style:normal;font-size:var(--t-legenda);font-weight:600;border-radius:999px;padding:2px 9px;align-self:flex-start}
.pauta-envio-resumo .espera,.pauta-estado.espera{background:rgba(31,111,178,.12);color:var(--azul)}
.pauta-envio-resumo .ok,.pauta-estado.ok{background:rgba(62,142,36,.12);color:var(--verde-forte,var(--verde-forte))}
.pauta-envio-resumo .mudar,.pauta-estado.mudar{background:rgba(255,145,77,.16);color:var(--laranja-forte)}
.pauta-estado{margin-top:5px}
.pauta-pedido-cliente{display:block;font-size:var(--t-nota);color:var(--ink);background:rgba(255,145,77,.10);border-radius:10px;padding:6px 10px;margin-top:4px;quotes:"“" "”"}
.pede-mudanca{border-top-color:var(--laranja)!important;border-top-width:2px!important}
.pauta-acoes-envio{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:12px 0 4px}
.pauta-mandar{position:relative}
.pauta-mandar > summary{list-style:none;cursor:pointer}
.pauta-mandar > summary::-webkit-details-marker{display:none}
.pauta-mandar[open] > form{position:absolute;left:0;top:calc(100% + 6px);z-index:7;width:min(420px,calc(100vw - 48px));background:var(--papel);
  border:1px solid var(--linha,var(--hairline-forte));border-radius:14px;box-shadow:0 16px 40px rgba(var(--sombra-rgb),.14);padding:14px;display:grid;gap:8px}
.pauta-mandar-lista{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto;border-top:1px solid var(--linha,var(--hairline-forte));padding-top:6px}
.pauta-mandar-lista label{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-nota);padding:4px 2px;cursor:pointer}
.pauta-mandar-lista input{margin-top:3px;flex:none}
.pauta-mandar .btn[type=submit]{justify-self:start}
.pauta-demandas{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.pauta-demandas label{display:grid;gap:3px;font-size:var(--t-nota);font-weight:600;color:var(--ink-4)}
.pauta-demandas select{font:inherit;font-size:var(--t-denso);padding:8px 10px;border-radius:10px;border:1px solid var(--linha,var(--hairline-forte));background:var(--papel)}
.pauta-editar{margin-top:6px}
.pauta-editar > summary{cursor:pointer;font-size:var(--t-nota);font-weight:600;color:var(--ink-4);text-decoration:underline;text-underline-offset:3px;list-style:none;display:inline-flex}
.pauta-editar > summary::-webkit-details-marker{display:none}
.pauta-editar[data-pede-ajuste] > summary{color:var(--laranja-forte)}
.pauta-editar form{display:grid;gap:8px;margin-top:8px;padding:12px;background:rgba(var(--ink-rgb),.03);border-radius:12px}
.pauta-editar label{display:grid;gap:3px;font-size:var(--t-legenda);font-weight:600;color:var(--ink-4)}
.pauta-editar input[type=text],.pauta-editar input[type=date],.pauta-editar select,.pauta-editar textarea{font:inherit;font-size:var(--t-denso);font-weight:400;padding:7px 9px;
  border-radius:9px;border:1px solid var(--linha,var(--hairline-forte));background:var(--papel);color:var(--ink);width:100%;box-sizing:border-box}
.pauta-editar .linha-caixa{display:flex;gap:6px;align-items:center;font-size:var(--t-nota);color:var(--ink)}
.pauta-editar .btn{justify-self:start}
.pauta-duas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pauta-chamada .ideias-rotulo{color:var(--laranja-forte)}
/* a tela de quem aprova */
.pauta-pagina .pauta-resumo-cliente{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:16px 20px;margin-bottom:18px}
.pauta-pagina .pauta-resumo-cliente p{margin:0}
.pauta-titulo-secao{font-size:1.1rem;margin:22px 0 10px}
.pauta-cliente-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.pc-item{display:flex;flex-direction:column;gap:6px;padding:18px 20px;margin:0}
.pc-item h3{margin:0;font-size:1.08rem;letter-spacing:-.02em;line-height:1.25}
.pc-item p{margin:0;font-size:var(--t-denso);line-height:1.45;color:var(--ink-2)}
.pc-item .pc-quando{font-size:var(--t-nota);font-weight:600;color:var(--ink-4);text-transform:none}
.pc-item .pc-obj{color:var(--ink);font-weight:500}
.pc-item .pc-gancho{font-style:italic;color:var(--ink)}
.pc-resposta{font-size:var(--t-nota)!important;font-weight:600;border-radius:10px;padding:8px 10px;margin-top:4px!important}
.pc-resposta.ok{background:rgba(62,142,36,.10);color:var(--verde-forte,var(--verde-forte))!important}
.pc-resposta.mudar{background:rgba(255,145,77,.12);color:var(--laranja-forte)!important}
.pc-resposta.espera{background:rgba(31,111,178,.10);color:var(--azul)!important}
.pc-botoes{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin-top:auto;padding-top:8px}
.pc-botoes.depois .btn{font-size:var(--t-nota)}
.pc-mudar > summary{list-style:none;cursor:pointer}
.pc-mudar > summary::-webkit-details-marker{display:none}
.pc-mudar[open]{flex-basis:100%}
.pc-mudar form{display:grid;gap:8px;margin-top:8px}
.pc-mudar label{display:grid;gap:4px;font-size:var(--t-nota);font-weight:600;color:var(--ink-3)}
.pc-mudar textarea{font:inherit;font-size:var(--t-denso);padding:9px 10px;border-radius:10px;border:1px solid var(--linha,var(--hairline-forte));width:100%;box-sizing:border-box}
.pc-mudar .btn[type=submit]{justify-self:start}
@media (max-width:760px){
  .pauta-cliente-lista{grid-template-columns:1fr}
  .pc-botoes .btn,.pauta-editar > summary,.pauta-demandas select,.pauta-demandas .btn{min-height:44px}
  .pauta-duas{grid-template-columns:1fr}
}
.pauta-campanha .pauta-editar,.pauta-tile .pauta-editar{margin-top:auto;padding-top:8px}
.pauta-editar + .dt-demanda{margin-top:2px;padding-top:0}
/* O BALÃO QUE SOME ATRÁS DO BLOCO SEGUINTE (14/09). O "virar demanda" das
   datas, das notícias e da pauta, e o "mandar ao cliente", abrem por cima
   da página — mas moram dentro de um .bloco.glass, e o backdrop-filter faz
   de cada bloco uma camada própria. O bloco seguinte, desenhado depois,
   cobria o pedaço do balão que passava da borda. Com um balão aberto, o
   bloco dele vem para a frente dos irmãos (abaixo da barra de cima, 120,
   e da de baixo, 125). A classe .balao-aberto é o plano B do demanda-lote.js
   para navegador sem :has. */
.bloco:has(details.dt-demanda[open]),.bloco:has(details.pauta-mandar[open]),.bloco.balao-aberto{position:relative;z-index:30}
.dt-demanda.para-esquerda[open] form,.pauta-mandar.para-esquerda[open] > form{left:auto;right:0}
/* no painel do cliente, em Resultados */
.resumo-do-mes{padding:18px 22px;margin:0 0 16px}
.resumo-do-mes .ideias-rotulo{display:block;margin-bottom:6px}
.resumo-do-mes p{margin:0;font-size:var(--t-corpo);line-height:1.55;color:var(--ink);max-width:70ch}
.resumo-do-mes small{display:block;margin-top:8px;font-size:var(--t-nota);color:var(--ink-4)}
.organizar-larga,.organizar-texto{grid-column:1/-1;display:flex;flex-direction:column;gap:5px}
.organizar-texto > span{font-size:var(--t-nota);font-weight:600;color:var(--ink-3)}
.organizar-texto i{font-style:normal;font-weight:400;color:var(--ink-4)}
.organizar-saida{margin-top:12px}
.organizar-saida > .fino,.organizar-saida > .ajudante-erro{padding:12px 14px;border-radius:14px;background:rgba(var(--ink-rgb),.04);margin:0}
.organizar-form{display:flex;flex-direction:column;gap:12px;margin:0}
.organizar-cabeca{margin:0;font-size:var(--t-denso);color:var(--ink-2)}
.organizar-item{margin:0;padding:14px 16px;border:1px solid var(--glass-edge);border-radius:16px;background:rgba(var(--papel-rgb),.72);
  display:flex;flex-direction:column;gap:10px;min-width:0;transition:opacity .15s}
.organizar-item.fora{opacity:.5}
.organizar-marca{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-denso);font-weight:600;color:var(--ink);cursor:pointer}
.organizar-marca input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.organizar-campos{margin-top:0;align-items:start}
.organizar-nota{margin:0;font-size:var(--t-nota);color:var(--ink-3)}
.organizar-conferir{margin:0;padding:8px 11px;border-radius:10px;background:rgba(255,145,77,.12);font-size:var(--t-nota);color:var(--ink-2)}
.organizar-conferir b{color:var(--laranja-forte)}
.organizar-resposta{padding:14px 16px;border-radius:16px;background:rgba(62,142,36,.07);border:1px solid rgba(62,142,36,.2);display:flex;flex-direction:column;gap:10px}
.organizar-resposta-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.organizar-resposta-acoes .fino{margin:0}
.organizar-obs{margin:0}
.organizar-fim{display:flex;flex-wrap:wrap;gap:10px}
.organizar-fim .btn[disabled]{opacity:.5}
@media (max-width:760px){
  .organizar .btn,.organizar-marca{min-height:44px}
  .organizar-fim .btn,.organizar-resposta-acoes .btn,.organizar-botao{width:100%;justify-content:center}
  .organizar-marca input{width:22px;height:22px}
}
/* Os quatro campos da sugestão em duas colunas no celular: um embaixo do
   outro, três demandas davam três telas de rolagem. */
@media (max-width:560px){
  .organizar-campos{grid-template-columns:1fr 1fr}
}
/* =====================================================================
   A conversa do WhatsApp na ficha de Vendas (23/09) — vendas.php,
   pros_conversa(). As dele à esquerda, as nossas à direita, como no
   celular. O rolo abre no fim sem JavaScript: column-reverse no rolo
   põe o fim da lista à vista, e a lista dentro continua na ordem certa.
   ===================================================================== */
/* A volta do Responder cai em #conversa: sem a margem, o título fica
   escondido atrás da barra fixa do alto. */
#conversa{scroll-margin-top:96px}
/* =====================================================================
   LISTAS AGRUPADAS NO LUGAR DE CARTÃO DENTRO DE CARTÃO (25/09/2026, régua
   da Apple). O vidro e a sombra ficam só no que flutua — as barras, o
   sino, os menus. O bloco de conteúdo vira superfície lisa, fio fino e
   canto de 16px, o "inset grouped" do iOS; o filtro de contas e período
   deixa de ser cartão; os produtos da vitrine viram linhas de lista, com
   o preço à direita e um botão por linha; os planos perdem borda e sombra.
   ===================================================================== */
body.novo .bloco.glass{
  background:var(--papel);-webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid var(--hairline);box-shadow:none;border-radius:16px;
}
body.novo .filtro.glass{background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:0;border-radius:0}
body.novo .vitrine{display:flex;flex-direction:column;gap:0;margin:8px 0 14px;border-top:1px solid var(--hairline)}
body.novo .vitrine-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"nome preco pedir" "desc preco pedir";
  column-gap:16px;row-gap:2px;align-items:center;padding:12px 2px;
  border:0;border-bottom:1px solid var(--hairline);border-radius:0;background:transparent;
}
body.novo .vitrine-item h3{grid-area:nome}
body.novo .vitrine-item .fino{grid-area:desc;margin:0}
body.novo .vitrine-preco{grid-area:preco;margin:0;padding:0;white-space:nowrap}
body.novo .vitrine-item > .vitrine-pedir{grid-area:pedir;margin:0}
body.novo .vitrine-item > .vitrine-pedir[open]{grid-column:1/-1;grid-row:3;margin-top:6px}
@media (max-width:560px){
  body.novo .vitrine-item{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nome preco" "desc desc" "pedir pedir";row-gap:6px}
  body.novo .vitrine-item > .vitrine-pedir[open]{grid-row:auto}
}
body.novo .plano-item{border:0;box-shadow:none;border-radius:16px}
/* =====================================================================
   O MODO ESCURO (25/09/2026, régua da Apple). Segue o sistema; desde
   02/10, a pedido do Rafael, também se escolhe em Aparência, no menu
   da pessoa e no Mais (Automático é o padrão). É uma segunda paleta nos mesmos
   nomes: fundo, papel, tinta e os quatro cinzas, os acentos de texto,
   o vidro e os fios. Contraste conferido: --ink-4 dá 6,4:1 no fundo e
   5,6:1 no papel; laranja 9:1, verde 12:1, vermelho 7:1.
   ===================================================================== */
/* ---------------------------------------------------------------------
   PUBLICAR PELO PAINEL (v341): o bloco na ficha da peça — os lugares
   como linhas com chave, o estado de cada rede depois do toque, o erro
   em português, e o caminho manual dobrado embaixo.
   --------------------------------------------------------------------- */
.pub-intro{font-size:var(--t-denso);color:var(--ink-3);margin:-4px 0 14px}
.pub-lugares{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column}
.pub-lugar{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--hairline);min-height:54px}
.pub-lugar:first-child{border-top:0;padding-top:2px}
.pub-lugar .bolinha-caixa{margin-left:0;width:36px;height:36px;font-size:var(--t-legenda)}
.pub-lugar .bolinha-caixa.ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7);color:#fff;border-color:transparent}
.pub-lugar .bolinha-caixa.fb{background:#1877F2;color:#fff;border-color:transparent}
.pub-lugar .bolinha-caixa.li{background:#0A66C2;color:#fff;border-color:transparent;font-weight:800}
.pub-lugar .bolinha-caixa.yt{background:#FF0000;color:#fff;border-color:transparent;font-size:13px}
.pub-lugar .bolinha-caixa.tt{background:#010101;color:#fff;border-color:transparent;font-weight:800;font-size:11px;letter-spacing:.02em}
.pub-lugar .bolinha-caixa.th{background:#101010;color:#fff;border-color:transparent;font-weight:700;font-size:16px}
/* o bloco do TikTok, aberto pela chave: as escolhas que a auditoria do TikTok exige */
.pub-tiktok{list-style:none;margin:-2px 0 10px 48px;padding:12px 14px 4px;border-radius:12px;background:var(--chao);border:1px solid var(--hairline)}
.pub-tiktok .campo{margin:8px 0 10px;font-size:var(--t-denso)}
.pub-tiktok .fino{margin:0 0 8px}
.pub-tt-chaves{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 6px}
.pub-tiktok .peca-check{margin:0 0 6px;min-height:36px}
.pub-tiktok .peca-check.fora{opacity:.5}
.pub-tt-marca{margin:0 0 4px 26px}
.pub-tt-capa{display:block}
.pub-tt-capa input[type=number]{display:inline-block;width:5.5em;margin:0 6px;padding:8px 10px;text-align:center}
.pub-tt-capa i{display:block;margin-top:4px}
.pub-tt-termos{font-size:var(--t-legenda);color:var(--ink-3)}
@media (max-width:560px){
  .pub-tiktok{margin-left:0}
}
.peca-titulo-video{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--chao)}
.peca-titulo-video span{font-size:var(--t-legenda);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.peca-titulo-video b{font-size:var(--t-corpo);color:var(--ink);font-weight:600}
.pub-nome{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pub-nome b{font-size:var(--t-corpo);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-nome span{font-size:var(--t-legenda);color:var(--ink-3)}
.pub-lugar.fora{opacity:.55}
.pub-lugar.fora .chave{cursor:default}
.pub-legenda{font-size:var(--t-denso);color:var(--ink-2);margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.pub-legenda-acao{font-size:var(--t-legenda);color:var(--ink-3);margin:0 0 16px}
.pub-estado{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;font-size:var(--t-legenda);font-weight:600;color:var(--ink-3);white-space:nowrap;flex:none}
.pub-estado::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-4);flex:none}
.pub-estado.fila::before{background:var(--laranja)}
.pub-estado.ok::before{background:var(--verde-forte)}
.pub-estado.erro::before{background:var(--vermelho)}
.pub-ver{font-size:var(--t-legenda);font-weight:600;flex:none;white-space:nowrap}
.pub-erro{margin:0 0 6px;padding:10px 12px;border-radius:10px;background:rgba(255,145,77,.10);border-left:3px solid var(--laranja);font-size:var(--t-legenda);color:var(--ink-2);list-style:none}
.pub-erro-acao{margin:8px 0 0}
.pub-manual{font-size:var(--t-legenda);color:var(--ink-3);margin:12px 0 0}
.pub-quem{font-size:var(--t-legenda);color:var(--ink-3);margin:4px 0 0}
/* AGENDAR (08/10/2026): recolhido embaixo do "Publicar agora"; aberto,
   o dia e a hora lado a lado e o botão embaixo. A agendada ganha a cor
   azul — não é espera (laranja) nem "no ar" (verde). */
.pub-agendar{margin:16px 0 0;border-top:1px solid var(--hairline);padding-top:12px}
.pub-agendar > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:var(--t-denso);font-weight:600;color:var(--ink)}
.pub-agendar > summary::-webkit-details-marker{display:none}
.pub-agendar > summary::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--ink-4);border-bottom:1.6px solid var(--ink-4);
  transform:rotate(45deg);margin:-3px 0 0 2px}
.pub-agendar[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
.pub-agendar-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 12px;margin:6px 0 12px}
.pub-agendar-campos label{display:flex;flex-direction:column;gap:5px;font-size:var(--t-nota);font-weight:600;color:var(--ink-3)}
.pub-agendar-campos input{width:100%;min-height:44px;font-size:var(--t-corpo)}
.pub-estado.agendada::before{background:var(--azul)}
.pub-agendada-caixa{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:rgba(var(--ink-rgb),.04);border:1px solid var(--hairline)}
.pub-agendada-caixa > p{margin:0;font-size:var(--t-denso);color:var(--ink-2)}
.pub-agendada-caixa .pub-agendar{margin-top:8px;padding-top:6px}
.pub-agendada-cancelar{margin:10px 0 0}
.btn.claro.pub-cancelar{color:var(--vermelho)}
.selo-agendada{background:rgba(var(--papel-rgb),.94);color:var(--azul)}
body.novo .selo-agendada{background:#DCEBFF;color:#123E7A}
.pub-manual-caixa summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:44px;justify-content:center}
.pub-manual-caixa summary::-webkit-details-marker{display:none}
.pub-manual-caixa summary h2{margin:0;display:inline;padding-right:28px;position:relative}
.pub-manual-caixa summary h2::after{content:"›";position:absolute;right:4px;top:-2px;font-weight:400;color:var(--ink-4);transform:rotate(90deg);transition:transform .18s ease}
.pub-manual-caixa[open] summary h2::after{transform:rotate(-90deg)}
.pub-manual-caixa summary .fino{margin:0}
.pub-manual-caixa[open] summary{margin-bottom:14px}
@media (max-width:560px){
  .pub-nome b{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
  .pub-lugar{flex-wrap:wrap;row-gap:4px}
  .pub-lugar .pub-estado,.pub-lugar .pub-ver{flex-basis:100%;margin-left:48px}
}
/* AUTOMÁTICO OU ESCOLHIDO (02/10/2026). Sem escolha, a paleta escura
   segue o aparelho; quem tocou em Claro no menu (data-tema="claro") fica
   no claro mesmo com o aparelho escuro, e quem tocou em Escuro ganha a
   mesma paleta pelo segundo bloco. AS DUAS LISTAS SÃO A MESMA, cor por
   cor: mudou uma, muda a outra. O :where() deixa as regras de body e de
   imagem com o peso que sempre tiveram — o body.novo continua ganhando
   do degradê, como antes. */
:root[data-tema="claro"]{color-scheme:light}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --fundo:#0E101D;
    --fundo-rgb:14,16,29;
    --papel:#181B2A;
    --papel-rgb:24,27,42;
    --ink:#F3F4F8;
    --ink-2:#C7CAD6;
    --ink-3:#A3A9BA;
    --ink-4:#9096A8;
    --ink-rgb:243,244,248;
    --sombra-rgb:0,0,0;
    --sobre-ink:#0E101D;
    --raso:#262A3B;
    --trilha:#3A4054;
    --chave-on:#4CAF3A;
    --hairline-forte:#2A2E40;
    --hairline:rgba(255,255,255,.12);
    --fio:rgba(255,255,255,.14);
    --glass:linear-gradient(158deg,rgba(30,33,48,.94),rgba(30,33,48,.84));
    --glass-strong:linear-gradient(158deg,rgba(34,37,52,.98),rgba(34,37,52,.92));
    --glass-edge:rgba(255,255,255,.08);
    --glass-shadow:0 10px 42px rgba(0,0,0,.5);
    --glass-inset:inset 0 1px 0 rgba(255,255,255,.06);
    --laranja-forte:#FFA36B;
    --verde-forte:#8FE06A;
    --vermelho:#FF7A8E;
    --meta-fundo:#1B2B44;  --meta-tinta:#8FBCFF;
    --google-fundo:#3A1F1D; --google-tinta:#FFA099;
    --tinta-vermelha:#3A1A22; --tinta-verde:#1B3120; --tinta-verde-clara:#182A1C;
    --texto-verde-escuro:#B8EFA0; --texto-amarelo-escuro:#F0D36B; --texto-laranja-escuro:#FFC39A;
    --azul:#8FBCFF; --azul-vivo:#8FBCFF;
  }
  :where(:root:not([data-tema="claro"])) body{background-color:var(--fundo);
    background-image:radial-gradient(46vw 62vh at -6% 2%,rgba(255,145,77,.10),transparent 66%),
                     radial-gradient(42vw 56vh at 104% 14%,rgba(126,217,87,.08),transparent 66%)}
  /* Imagem com fundo branco não brilha no meio da tela escura. */
  :where(:root:not([data-tema="claro"])) main img,:where(:root:not([data-tema="claro"])) .bolinha{filter:brightness(.88)}
  :where(:root:not([data-tema="claro"])) .brand img{filter:none}
}
:root[data-tema="escuro"]{
  color-scheme:dark;
    --fundo:#0E101D;
    --fundo-rgb:14,16,29;
    --papel:#181B2A;
    --papel-rgb:24,27,42;
    --ink:#F3F4F8;
    --ink-2:#C7CAD6;
    --ink-3:#A3A9BA;
    --ink-4:#9096A8;
    --ink-rgb:243,244,248;
    --sombra-rgb:0,0,0;
    --sobre-ink:#0E101D;
    --raso:#262A3B;
    --trilha:#3A4054;
    --chave-on:#4CAF3A;
    --hairline-forte:#2A2E40;
    --hairline:rgba(255,255,255,.12);
    --fio:rgba(255,255,255,.14);
    --glass:linear-gradient(158deg,rgba(30,33,48,.94),rgba(30,33,48,.84));
    --glass-strong:linear-gradient(158deg,rgba(34,37,52,.98),rgba(34,37,52,.92));
    --glass-edge:rgba(255,255,255,.08);
    --glass-shadow:0 10px 42px rgba(0,0,0,.5);
    --glass-inset:inset 0 1px 0 rgba(255,255,255,.06);
    --laranja-forte:#FFA36B;
    --verde-forte:#8FE06A;
    --vermelho:#FF7A8E;
    --meta-fundo:#1B2B44;  --meta-tinta:#8FBCFF;
    --google-fundo:#3A1F1D; --google-tinta:#FFA099;
    --tinta-vermelha:#3A1A22; --tinta-verde:#1B3120; --tinta-verde-clara:#182A1C;
    --texto-verde-escuro:#B8EFA0; --texto-amarelo-escuro:#F0D36B; --texto-laranja-escuro:#FFC39A;
    --azul:#8FBCFF; --azul-vivo:#8FBCFF;
}
:where(:root[data-tema="escuro"]) body{background-color:var(--fundo);
    background-image:radial-gradient(46vw 62vh at -6% 2%,rgba(255,145,77,.10),transparent 66%),
                     radial-gradient(42vw 56vh at 104% 14%,rgba(126,217,87,.08),transparent 66%)}
:where(:root[data-tema="escuro"]) main img,:where(:root[data-tema="escuro"]) .bolinha{filter:brightness(.88)}
:where(:root[data-tema="escuro"]) .brand img{filter:none}
/* O APP NA LOJA, na tela de entrar (02/10/2026): o ícone do próprio app e
   uma linha — sem o selo da Google, que tem regra de uso própria e
   pesaria mais que o botão Entrar. Só aparece no Android. */
.entrar-play{display:flex;align-items:center;gap:12px;margin:22px 0 4px;padding:12px 14px;min-height:44px;text-align:left;
  border-radius:16px;background:rgba(var(--ink-rgb),.05);color:var(--ink);text-decoration:none}
.entrar-play[hidden]{display:none}
.entrar-play img{flex:none;width:44px;height:44px;border-radius:11px}
.entrar-play span{display:flex;flex-direction:column;gap:2px;min-width:0}
.entrar-play b{font-weight:600;font-size:var(--t-denso)}
.entrar-play small{font-size:var(--t-nota);color:var(--ink-3);line-height:1.35}
.entrar-play::after{content:"›";margin-left:auto;padding-left:6px;font-size:1.4rem;line-height:1;color:var(--ink-4)}