/* [dono: nucleo] */
/* A folha do painel.
   =========================================================================

   O QUE MUDOU E POR QUÊ. Antes havia cor com nome ("--papel") e mais nada:
   cada espaço, cada raio e cada tamanho de letra era escolhido na hora, dentro
   da regra. Deu 91 estilos escritos à mão no HTML e nenhuma medida que se
   repetisse de propósito. Agora existe UM sistema, aqui em cima, e o resto da
   folha deriva dele. Medida nova se escolhe aqui, não lá embaixo.

   A MARCA DECOLAADS (28/10/2026, manual em Orbita - videos/06-laboratorio/
   2026-10-28-estudio-de-marca): Onix #0B0B0C no fundo (60%), Papel #F4F1EA
   no texto (30%), Lava #FF4D1A so no que precisa ser visto (10%, uma coisa
   por tela), sempre com a letra Onix por cima; Grafite #151517 nos cartoes.
   Lava nunca e erro: o erro e o rosa #F0466E. A letra e a Fustat. Os tokens
   abaixo sao os de sempre, com os valores da marca; o texto que segue conta
   de onde a estrutura veio.

   A PALETA DO PAINEL (redesenho de 27/10/2026, a linguagem do painel da
   AbacatePay): fundo neutro azulado, cartoes por cima, UM acento verde claro
   (#9EEA6C) sempre com letra escura por cima, nos dois temas. O acento cheio
   nao se le sobre o branco (1,4:1): para LER em verde o claro usa o verde
   fechado #3A7A14 (5,3:1), e o anel do foco tambem. Ate 27/10 o painel era a
   direcao B, o oliva da primeira marca (#5DA91F sobre #1B2016). A arte de
   cada marca continua usando as cores do marca.yaml dela; o painel, nao.

   A FONTE é a própria Archivo do projeto, servida daqui, para o app funcionar
   sem internet. Desde a direção B (decisao #50) ela e a UNICA familia da casa:
   titulo, corpo e numero -- a IBM Plex e o Google Fonts sairam.
   ========================================================================= */

@font-face {
  font-family: "Archivo";
  src: url("/fonte/Archivo.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* A FUSTAT, a letra da marca DecolaAds (28/10/2026, OFL), servida daqui. */
@font-face {
  font-family: "Fustat";
  src: url("/fonte/Fustat.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-display: swap;
}

/* --- o sistema ----------------------------------------------------------- */

/* O REDESENHO (27/10/2026, fase 1): a linguagem do painel da AbacatePay,
   medida no painel dela (scratchpad redesenho/LINGUAGEM-ABACATEPAY.md) --
   o ESTILO, nunca a marca. O casco em dois niveis (a pagina no fundo, a
   barra lateral e o conteudo como dois cartoes por cima), tudo arredondado,
   uma cor de destaque so, e titulo tingido em vez de branco puro.

   O ESCURO CONTINUA O PADRAO (decisao #50, N1 em testes/test_direcao_b.py):
   `:root` sem atributo e o escuro, para todo mundo; o claro e escolha,
   `:root[data-tema="claro"]`, gravado pelo botao do tema na chave
   `estudio-tema-b` (ver web/paginas/base.html). Nenhuma consulta ao tema do
   sistema decide cor nesta folha.

   OS NOMES SAO OS DE SEMPRE (ha `var()` escrito a mao nos templates), e o
   que cada um quer dizer mudou assim:
     --chao      o FUNDO DA PAGINA, atras dos dois cartoes do casco (no
                 telefone, o chao da barra de baixo e da folha)
     --papel     o CARTAO DO CASCO: a barra lateral e o cartao grande do
                 conteudo; o campo de digitar
     --papel-2   o cartao de dentro do conteudo (um degrau acima, com o fio)
     --papel-3   o botao secundario, o selo neutro, o que levanta um degrau
     --papel-4   o escolhido, o pressionado
     --poco      atras de toda arte, um degrau acima do cartao
   Quem separa uma caixa da outra continua sendo o fio de 1px: os degraus
   sao fracos de proposito. */
:root {
  color-scheme: dark;

  /* COR, o escuro (medido: fundo #0D0F12, cartao #1A1D24, botao #272C37) */
  --chao: #0B0B0C;
  --papel: #151517;
  --papel-2: #1A1A1D;
  --papel-3: #242427;
  --papel-4: #303034;
  --poco: #222225;
  --borda: #28282C;
  --borda-forte: #3A3A3F;
  /* o contorno de 1px em volta de cada arte: a arte deixa de flutuar */
  --aro-arte: rgba(244, 241, 234, .12);

  /* o texto: o forte, o de apoio e o apagado (o muted deles, #A3ACBA) */
  --tinta: #F4F1EA;
  --tinta-2: #CFCAC0;
  --neutro: #A29D92;
  /* O TITULO TINGIDO: o titulo da tela nao e branco puro, e um verde-agua
     claro no escuro e um verde-petroleo no claro (como o "heading" deles). */
  --tinta-titulo: #F4F1EA;

  /* O ACENTO, um so. CHEIO: o botao da decisao, o item ativo do menu, a
     luz, o trecho andado das barras -- sempre com a letra escura por cima
     (`--tinta-do-acento`), nos dois temas. PARA LER (link, selo bom, icone
     marcado) e `--acento-texto`, que no claro e um verde fechado: o acento
     cheio sobre o branco da 1,4:1 e nao se le. O FOCO tem token proprio
     pelo mesmo motivo: no claro o anel e o verde fechado.
     WHITELABEL: e aqui, e so aqui, que o acento de um produto muda; o verde
     e a referencia de tom do padrao. */
  --acento: #FF4D1A;
  --acento-forte: #FF6A3D;
  --acento-texto: var(--tinta);
  --tinta-do-acento: #0B0B0C;
  --acento-fraco: rgba(255, 77, 26, .14);
  --foco: var(--acento);

  /* A PALHA ("olhe para mim": esperando voce, travado) e o TIJOLO (reprovou,
     apagar). O veu e o fio de cada tom desenham o aviso e o selo do mesmo
     tom. */
  --alerta: #FFB020;
  --alerta-fraco: rgba(255, 176, 32, .12);
  --alerta-fio: rgba(255, 176, 32, .40);
  --falha: #F25A7E;
  --falha-fraco: rgba(240, 70, 110, .10);
  --falha-fio: rgba(240, 70, 110, .38);
  --falha-forte: #F56E8F;

  /* A SOMBRA so do que flutua (a gaveta, o "por que?", o menu). `--sombra`
     e o anel de 1px da arte (cinco regras a leem com esse nome). */
  --veu: rgba(5, 6, 8, .64);
  --sombra: 0 0 0 1px var(--aro-arte);
  --sombra-pop: 0 0 0 1px var(--borda-forte), 0 28px 56px -18px rgba(0, 0, 0, .70);

  /* O QUADRADINHO DO LOGOTIPO DA MARCA (acabamento, 29/10/2026): o logotipo
     da marca e branco (o `logotipo-branco.png` do modelo), e por isso o
     quadradinho dele e Onix nos dois temas -- so o quadradinho, e nao o selo
     inteiro. Constante: nao muda no claro. Eram `--marca-superficie` e
     `--marca-apoio`, dois verdes de fora da paleta. */
  --logo-fundo: #0B0B0C;

  /* A FAIXA DE AMBIENTE ("Demonstracao local"): o amarelo da faixa de modo
     teste deles, igual nos dois temas -- ela diz "isto nao e o de verdade". */
  --faixa-fundo: #F8C01D;
  --faixa-tinta: #381800;

  /* OS GRAFICOS: a serie principal e o acento; as outras, na ordem; a grade
     bem clara e o eixo apagado. */
  --grafico-1: var(--tinta-2);
  --grafico-2: #2BD47D;
  --grafico-3: #4FA3A5;
  --grafico-4: #5B9BEA;
  --grafico-5: #EAB308;
  --grafico-6: #A78BFA;
  --grafico-grade: #222225;
  --grafico-eixo: var(--neutro);

  /* ESPACO. Uma escala so, de 4 em 4 no comeco. */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 22px;
  --espaco-6: 30px;
  --espaco-7: 44px;
  /* A margem de dentro do cartao do conteudo (16px no celular). */
  --margem-lateral: 40px;
  /* O RESPIRO DO CASCO: o fundo da pagina que aparece entre a barra lateral
     e o cartao do conteudo, e em volta dele (medido: ~20px). */
  --respiro-casco: 20px;
  /* A MEDIDA DO CONTEUDO: o cartao para em 1.760px mais as margens. */
  --conteudo-max: 1760px;

  /* RAIO. Tudo macio: o campo 12px, o cartao 16px, o cartao do conteudo
     24px, a barra lateral 32px (so a esquerda), e botao, selo e filtro em
     pilula. */
  --raio-1: 12px;       /* campo, controle pequeno */
  --raio-2: 16px;       /* o cartao */
  --raio-3: 16px;       /* o cartao de Anuncios, que era outro */
  --raio-selo: 999px;
  --raio-botao: 999px;
  --raio-chamada: 999px; /* o botao grande da decisao */
  --raio-palco: 20px;   /* o cartao da decisao, a bandeja do Laboratorio */
  --raio-pilula: 999px;
  --raio-conteudo: 24px;
  --raio-casco: 32px;

  /* O que continua existindo para uma regra so servir as duas frentes. */
  --anu-controle: var(--papel-3);
  --anu-elev-1: none;
  --anu-elev-2: none;

  /* AS MEDIDAS DA FRENTE DE ANUNCIOS (so as regras `anu-` as leem). */
  --anu-numero: 32px;
  --anu-medida: 68ch;
  --anu-medida-nota: 44ch;
  --anu-rotulo-coluna: 156px;
  --anu-trilho: 320px;

  /* A LETRA: UMA FAMILIA SO, servida por /fonte/ (sem Google, sem CDN: N9).
     A referencia e a Fustat deles; o produto serve a fonte daqui, e a casa
     continua na Archivo variavel, que esta no disco. Archivo e mais larga
     que a Fustat: por isso o corpo fica em 15px (o 16px deles) e o menu em
     14px. O numero alinha por `tabular-nums`, escrito logo depois de cada
     `font-family: var(--fonte-numero)` desta folha. */
  --fonte: "Fustat", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --fonte-titulo: var(--fonte);
  --fonte-texto: var(--fonte);
  --fonte-numero: var(--fonte);
  /* O ALGARISMO (DecolaAds): a Fustat com `tabular-nums` alarga tambem o
     espaco e a virgula ("472 , 72"); o algarismo dela fica no normal. */
  --algarismos: normal;
  --letra-1: 12.5px;   /* o selo */
  --letra-2: 12.5px;   /* a nota miuda */
  --letra-3: 13.5px;   /* o rotulo, a legenda */
  --letra-4: 15px;     /* o texto do corpo */
  --letra-5: 18px;     /* titulo de secao dentro da tela */
  --letra-6: 30px;     /* titulo da tela, dentro do cartao -- 26px no celular */
  --letra-botao: 14px;
  --letra-momento: 26px;   /* o titulo do cartao da decisao -- 22px no celular */
  --largura-numero: 108%;
  --largura-miuda: 92%;
  --rastreio-titulo: -.02em;

  /* A ALTURA DA BARRA DO ALTO, a do "onde voce esta": 56px, MEDIDA. Quem le
     daqui: a ancora e as faixas das telas que grudam logo abaixo dela. No
     telefone a barra se desfaz, e isto e zero (ver o bloco de 720px). */
  --topo-altura: 56px;

  /* A LARGURA DO TRILHO (a barra lateral), no computador. SE ESTE NUMERO
     MUDAR, OS CORTES MUDAM JUNTO: o do calendario e o do roteiro do
     carrossel (fim da folha) e a faixa estreita de Anuncios sao filhos dele,
     e os testes caem de proposito para mandar medir de novo. */
  --lateral-largura: 244px;

  /* O QUANTO A BARRA DE BAIXO COBRE: zero no computador. Ver o bloco de
     `max-width: 720px`. */
  --rodape-altura: 0px;
}

/* O CLARO, POR ESCOLHA (medido: fundo #F5F7FA, cartao #FFFFFF, fio
   #E2E8F0, apagado #5F7089). Um bloco so, e nenhuma consulta ao tema do
   sistema. O acento cheio e o mesmo verde claro, com a letra escura por
   cima; quem le em verde e o verde fechado. */
:root[data-tema="claro"] {
  color-scheme: light;
  --chao: #F4F1EA;
  --papel: #FBF9F5;
  --papel-2: #FFFFFF;
  --papel-3: #ECE8DF;
  --papel-4: #E0DBD0;
  --poco: #ECE8DF;
  --borda: #E2DDD2;
  --borda-forte: #CBC5B8;
  --aro-arte: rgba(11, 11, 12, .10);
  --tinta: #0B0B0C;
  --tinta-2: #4A4740;
  --neutro: #6B675E;
  --tinta-titulo: #0B0B0C;
  --acento: #FF4D1A;
  --acento-forte: #F03E0B;
  --acento-texto: var(--tinta);
  --tinta-do-acento: #0B0B0C;
  --acento-fraco: rgba(255, 77, 26, .14);
  --foco: #C2380F;
  --alerta: #8A5A00;
  --alerta-fraco: rgba(255, 176, 32, .16);
  --alerta-fio: rgba(138, 90, 0, .35);
  --falha: #C21F4A;
  --falha-fraco: rgba(240, 70, 110, .08);
  --falha-fio: rgba(194, 31, 74, .30);
  --falha-forte: #9E1839;
  --veu: rgba(11, 11, 12, .32);
  --sombra-pop: 0 0 0 1px var(--borda), 0 24px 48px -18px rgba(15, 23, 42, .22);
  --grafico-grade: #E2DDD2;
  --grafico-eixo: #6B675E;
  --grafico-2: #1A9E5A;
  --grafico-3: #104D50;
  --grafico-4: #2F7EDB;
}

* { box-sizing: border-box; }

/* O FUNDO DA PAGINA e o chao: os dois cartoes do casco (a barra lateral e o
   conteudo) moram por cima dele. No telefone a pagina inteira e o cartao
   (ver o bloco de 720px do casco). */
body {
  margin: 0;
  background: var(--chao);
  color: var(--tinta);
  font: 400 var(--letra-4)/1.55 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento-texto); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* O CODIGO NAO E MAIS LETRA DE MAQUINA. `<code>` e `<pre>` continuam
   existindo (os testes e a entrega os leem), mas saem na Archivo, na largura
   miuda (92%), e o `<code>` solto num paragrafo ganha o fundo do selo. Sem
   esta regra o navegador os escreveria na monoespacada dele, que e a unica
   fonte de maquina que sobraria no painel. Quem tem regra propria
   (`.anu-campo-valor`, `.segredo code`, os do Laboratorio) continua mandando. */
code, kbd, samp, pre {
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-stretch: var(--largura-miuda);
}
code { padding: 1px 5px; border-radius: var(--raio-selo); background: var(--papel-3); }

/* A ÂNCORA NÃO PODE PARAR DEBAIXO DO CABEÇALHO. Salvar uma tela do carrossel
   volta para `#tela-3`, e o navegador rola essa tela até o topo da janela --
   que é justamente onde a barra do alto gruda, no computador (56px desde a
   direção B; eram os 80px do cabeçalho). Sem isto, o que se acabou de editar
   chega escondido. */
[id] { scroll-margin-top: calc(var(--topo-altura) + var(--espaco-3)); }

/* SO PARA O LEITOR DE TELA: o rotulo que o olho dispensa (a caixa do Gerente
   ja diz o que e) e que quem nao enxerga precisa ouvir.

   O ESCONDIDO VENCE SEMPRE (acabamento, 29/10/2026), com `!important`: a
   regra dos campos (`input[type=file]`, mais adiante) tem forca maior que
   uma classe so, e dava ao campo de arquivo escondido a largura inteira e
   48px de altura. Ele ficava absoluto e largo: MEDIDO no Cerebro, a pagina
   rolava de lado ate 2.162px numa janela de 1.440, e 422px no telefone de
   390. Utilitaria de esconder e a unica coisa desta folha que nao cede. */
.so-leitor {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* [/dono: nucleo] */

/* [dono: casco] */
/* --- o casco: o trilho, a barra do alto e a pagina ----------------------

   A DIRECAO B (decisao #50, 25/09/2026): TUDO O QUE E DO ESTUDIO MORA NUMA
   COLUNA SO, a esquerda -- o logotipo, a marca em que se trabalha, a frente,
   as abas, o estado do Estudio, o tema e o sair --, e a area da direita ganha
   uma barra fina com "onde voce esta". O conteudo comeca no alto da janela,
   sem cabecalho por cima dele.

   O CABECALHO CONTINUA NO HTML, INTEIRO. `<header class="topo">` ainda guarda
   o logotipo, a frente, o estado, o tema e o sair (e os testes seguram isso),
   e o menu das abas continua fora dele, IRMAO (o cabecalho nao volta a
   carregar menu: palavra do dono, 23/09). O que o faz "sumir" dentro do
   trilho e `display: contents`: os filhos dele entram direto na coluna, e
   `order` os poe na ordem do desenho -- logo 0, marca 1, frente 2, abas 3,
   estado 4, tema e sair 5.

   NO TELEFONE O MESMO TRILHO VIRA A FILEIRA DE CIMA (o botao da conta e a
   frente), e ela ROLA JUNTO com a pagina, como o cabecalho de antes: faixa
   grudada come tela em toda pagina, e isso foi medido e decidido. Ver o
   bloco de `max-width: 720px`.

   AS CAMADAS (plano da B, secao 4.2), e elas sao a razao de tres regras
   desta folha: o trilho gruda com `z-index: 1` so no computador (no
   telefone ele e `z-index: auto` e NAO cria contexto, senao a barra de baixo,
   que mora dentro dele, ficaria presa num contexto de 1 e a pilha do
   carrossel de Posts pintaria por cima dela); a barra do alto gruda com 20; e
   a gaveta de ajuda e 21. `main`, `.area` e `.casco` nao criam contexto
   nenhum -- sem `z-index`, `transform`, `opacity`, `filter`, `isolation` nem
   `contain` --, senao a gaveta e a barra de baixo ficariam presas num
   contexto baixo. Um teste segura isso (test_direcao_b.py). */

.casco {
  position: relative;
  display: grid;
  grid-template-columns: var(--lateral-largura) minmax(0, 1fr);
  min-height: 100vh;
}
/* O CASCO EM DOIS NIVEIS (redesenho, 27/10/2026): a coluna da esquerda nao
   e mais pintada inteira -- o trilho e um CARTAO colado no alto e no pe da
   janela, e o que sobra em volta dele e o fundo da pagina. Nada aqui. */
.casco::before { content: none; }

/* O TRILHO GRUDA NO ALTO DA JANELA, com a altura dela, e o que passa disso
   rola POR DENTRO (uma janela baixa, de notebook, com o estado no pe). E um
   CARTAO: o canto grande so a esquerda, encostado no alto e no pe, como a
   barra lateral deles (264px la; 244px aqui, a largura medida das abas). */
.trilho {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 14px 14px;
  background: var(--papel);
  border-radius: var(--raio-casco) 0 0 var(--raio-casco);
  box-shadow: inset -1px 0 0 var(--borda);
  overflow-y: auto;
  /* O TRANSBORDO QUE SOBRAR E DISCRETO. Numa janela mais baixa que o trilho
     (ver o bloco `max-height: 700px`, logo abaixo das abas) aparece a barra
     de rolagem dele, e a do sistema e cinza-clara e larga: MEDIDO no Chrome
     do Windows, 15px comidos da coluna. Fina e na cor do fio. */
  scrollbar-width: thin;
  scrollbar-color: var(--borda-forte) transparent;
}

/* Os filhos do cabecalho e da folha da conta entram direto no trilho. A
   FOLHA DA CONTA E UM `popover`, e o navegador pinta todo `popover` com a
   cor de texto do sistema: como caixa ela so existe no telefone, e aqui ela
   so passa adiante a cor da casa (`color: inherit`). */
.topo, .topo-linha, .conta-folha { display: contents; color: inherit; }
/* O botao da conta e a frase de cima da folha so existem no telefone. */
.conta-botao, .conta-cabeca { display: none; }
/* A caixa da folha se desfaz junto com ela; o veu que fecha a folha so existe
   com ela aberta, no telefone (ver base.html e o bloco de 720px). */
.conta-caixa { display: contents; }
.conta-veu { display: none; }

.topo .logo {
  order: 0;
  flex: none;
  margin: 0;
  padding: 2px 8px 0;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.03em;
}
/* [/dono: casco] */

/* [dono: nucleo] */
.logo {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 800;
  font-size: 17px;
  letter-spacing: -.02em;
  margin-right: var(--espaco-2);
  white-space: nowrap;
  color: var(--tinta);
  text-decoration: none;
}
.logo span { color: var(--acento-texto); }
/* O LOGO DESENHADO (DecolaAds): o Tuca com o nome, uma versao por tema. A
   altura manda; a largura sai do desenho. */
.logo-img { display: block; height: 26px; width: auto; }
.logo-claro { display: none; }
:root[data-tema="claro"] .logo-escuro { display: none; }
:root[data-tema="claro"] .logo-claro { display: block; }
.portaria .logo-img, .vitrine .logo-img { height: 32px; }
/* [/dono: nucleo] */

/* [dono: casco] */
/* A MARCA EM QUE SE TRABALHA, como o seletor de workspace deles (redesenho,
   27/10/2026): uma CAIXA com o fio de 1px, o quadradinho da marca (a
   inicial) e o nome em 600 -- e, quando ha mais de uma, a seta de trocar.
   COM LOGOTIPO (acabamento, 29/10/2026) e a mesma caixa, nos dois temas: o
   logotipo vai DENTRO do quadradinho, inteiro, e o nome continua ao lado.
   Era a imagem sozinha a 15px de altura, num bloco verde-escuro: um logo
   quadrado virava um "P" sem nome. */
/* NADA NO TRILHO ENCOLHE (`flex: none` em cada peca): numa janela baixa ele
   rola por dentro, e nao espreme o selo. MEDIDO a 721x600: sem isto o selo
   da marca caia de 40 para 15px de altura, esmagado sobre o logotipo. */
.marca-atual {
  order: 1;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin: 18px 0 14px;
  padding: 0 12px 0 6px;
  border-radius: var(--raio-1);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--borda);
}
/* O LOGOTIPO DENTRO DO QUADRADINHO: inteiro (`contain`), seja ele quadrado
   ou comprido. */
.marca-inicial img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* O QUADRADINHO DA MARCA: a inicial do nome, no degrau neutro. Era o veu do
   acento: a Lava e uma coisa so por tela, e o selo esta em toda tela. */
.marca-inicial {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--papel-3);
  color: var(--tinta);
  font-family: var(--fonte-titulo);
  font-weight: 750;
  font-size: 15px;
  line-height: 1;
}
.marca-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--fonte-titulo);
  font-weight: 650;
  font-size: 14.5px;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--tinta);
}
/* A TROCA DE WORKSPACE NA PROPRIA MARCA-ATUAL (modo saas, 27/10/2026): o
   selo e o `summary` de um `<details>`; aberto, a lista dos workspaces logo
   abaixo, no fluxo do trilho (nada flutua: o trilho rola por dentro). */
.marca-troca { order: 1; flex: none; min-width: 0; }
.marca-troca > summary { list-style: none; cursor: pointer; gap: 8px; }
.marca-troca > summary::-webkit-details-marker { display: none; }
.marca-troca > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.marca-troca .marca-nome { flex: 1; }
.marca-seta {
  flex: none;
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--neutro);
  border-bottom: 2px solid var(--neutro);
  transform: translateY(-2px) rotate(45deg);
}
.marca-troca[open] .marca-seta { transform: translateY(2px) rotate(-135deg); }
.marca-troca[open] > summary { margin-bottom: 6px; }
.marca-lista { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; }
.marca-lista form { margin: 0; }
.marca-opcao {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--raio-1);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marca-opcao:hover:not(:disabled) { background: var(--papel-3); }
/* A MARCA ATUAL SE VE (27/10/2026): o degrau da aba ativa e o visto, e nao
   so a palavra "aqui" a 60% de opacidade. As outras ganham o fundo ao passar
   o mouse, como botao. */
.marca-opcao.atual { cursor: default; font-weight: 700; opacity: 1; background: var(--papel-3); color: var(--tinta); }
.marca-opcao-aqui { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 500; color: var(--acento-texto); }
.marca-opcao-aqui .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* AS TELAS DE CONTA (27/10/2026, o pente fino). Contas e chaves em grupos,
   com o avancado fechado; Membros com o "Tirar" que pede confirmacao e a
   explicacao dos papeis embaixo do seletor. */
.contas-secao { max-width: none; }
.contas-secao .lista-desempenho { margin: 0; }
.chave-onde { color: var(--neutro); }
.chaves-avancado { margin: 0; }
.chaves-avancado > summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); padding: 8px 0; }
.chaves-avancado[open] > summary { margin-bottom: var(--espaco-3); }
.chaves-avancado > .texto-apoio { margin: 0 0 var(--espaco-3); }
.membros-secao { margin-top: var(--espaco-6); }
.membro-tirar > summary { list-style: none; }
.membro-tirar > summary::-webkit-details-marker { display: none; }
.membro-tirar[open] > form { display: grid; gap: 8px; margin-top: 8px; max-width: 260px; }
.membro-tirar[open] > form .texto-mini { margin: 0; }
.membro-papeis { margin: 4px 0 8px; padding-left: 18px; display: grid; gap: 2px; color: var(--neutro); }
/* O seletor de marca, que so existe com duas marcas: logo abaixo do selo. */
.marca-escolha { order: 1; margin: -6px 0 14px; min-width: 0; }
/* `max-width` e `min-width: 0`: sem eles a caixa de escolha toma a largura do
   nome mais longo da lista (um workspace de nome comprido: 351px MEDIDOS numa
   coluna de 216), e o trilho rolava de lado (26/10/2026). O nome que nao cabe
   e cortado dentro da caixa, como em toda caixa de escolha. */
.marca-escolha select { width: 100%; max-width: 100%; min-width: 0; }

/* O seletor de frente. Duas abas só, porque são duas frentes: o que vai ao
   perfil e o que roda como mídia paga. Ver motor/frente.py.
   Chamava-se `.chave`, o mesmo nome da chave de fato ([preco]) que o cérebro,
   os pedidos e o relatório do post escrevem -- e todas elas herdavam a moldura
   deste seletor, em volta de um nome de receita ou de uma chave de fato.
   Ver Decisões #14.

   NA B, DUAS METADES IGUAIS com um icone cada, no trilho: o trilho tem a
   largura fixa, e metade dele e o que cabe "Conteudo" com o icone ao lado. */
.seletor-frente {
  order: 2;
  flex: none;
  display: grid;
  /* TRÊS FRENTES desde 29/09/2026 (Conteúdo, Anúncios, Estúdio). No trilho
     do computador (244px) três rótulos não cabem lado a lado -- "Estúdio"
     saía cortado --, então a pílula empilha: uma frente por linha. No
     telefone ela volta a ser uma fileira, no bloco de 720px. */
  /* DUAS FRENTES DE NOVO, LADO A LADO (27/10/2026): o Estudio saiu do
     seletor, e "Conteudo" com o icone pede 92px de uma metade de 105. Empilhar
     custava 36px de altura num trilho que nao cabia a 1366x730. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: var(--raio-pilula);
  background: var(--chao);
  box-shadow: inset 0 0 0 1px var(--borda);
}
/* [/dono: casco] */
/* [dono: nucleo] */
/* A chave de um fato, onde quer que apareça. */
.chave {
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--acento-texto);
}
/* [/dono: nucleo] */
/* [dono: casco] */
.seletor-frente a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 6px;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--neutro);
  white-space: nowrap;
}
.seletor-frente a:hover { color: var(--tinta); }
.seletor-frente a .ico { width: 16px; height: 16px; }
/* A PASTILHA ATIVA E O CARTAO SOBRE O FUNDO (redesenho, 27/10/2026): a
   trilha e o fundo da pagina, afundado na barra lateral, e a ativa sobe
   para o cartao com o fio -- o controle segmentado deles. A letra fica
   cheia e o icone vira o verde de ler. O verde cheio, no menu, e do item
   ativo da lista de telas, logo abaixo. */
.seletor-frente a.atual {
  background: var(--papel-2);
  color: var(--tinta);
  box-shadow: 0 0 0 1px var(--borda);
}
.seletor-frente a.atual .ico { color: var(--acento-texto); }

/* O ESTADO DO ESTUDIO: tres linhas de ficha, coladas no pe do trilho. Eram
   uma linha so em fonte de numero, no cabecalho; na B e a ficha da casa, na
   letra do painel, com o numero alinhado a direita. */
.topo .estado {
  order: 4;
  flex: none;
  display: grid;
  /* `minmax(0, 1fr)`: a coluna e a do trilho, e nao a da palavra mais longa
     do motivo do Claude fora (o nome de uma variavel de ambiente). */
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: auto 0 0;
  padding: 12px 10px 10px;
  border-top: 1px solid var(--borda);
  font-family: var(--fonte-texto);
}
/* O NUMERO NUNCA QUEBRA, nem o nome dele. MEDIDO a 1366x657, com a barra de
   rolagem do sistema comendo 15px da coluna: "Gasto de producao US$ 1,8309"
   virava quatro linhas ("Gasto de / producao", "US$ / 1,8309"). Hoje os dois
   cabem numa linha: sobram 13px sem barra e 3px com a barra fina (MEDIDO,
   195 e 185px de linha). Quando o gasto ganhar um digito e nao couber, quem
   desce e o numero INTEIRO, para a linha de baixo, a direita (`flex-wrap` e
   a margem automatica do `b`) -- e nunca a coluna rolando de lado. */
.estado-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 8px;
  margin: 0;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--neutro);
}
.estado-linha b { margin-left: auto; color: var(--tinta-2); font-weight: 600; font-variant-numeric: var(--algarismos); }
.estado-linha b, .estado-linha > span { white-space: nowrap; }
/* O MOTIVO DE O CLAUDE ESTAR FORA, escrito: morava so no `title` da linha,
   que o telefone nao mostra. So existe quando ele cai. Fica num "por que?"
   FECHADO, no fluxo do trilho: e texto de terminal (o comando, o nome da
   variavel de ambiente), e aberto ele tomava o pe da coluna em toda tela --
   MEDIDO, 8 linhas em tijolo, e a 1536x730 o tema e o Sair saiam da janela.
   Nao e a `.porque-caixa` da casa: ela flutua, e o trilho, que rola por
   dentro, a cortaria. Abrir e gesto do dono, e ai rolar a coluna e aceito.
   O reset primeiro: `details` e `summary` da casa tem fio, respiro e letra
   de titulo. */
.estado-porque {
  margin: -3px 0 0;
  padding: 0;
  border: 0;
}
.estado-porque > summary {
  list-style: none;
  /* bloco do tamanho do texto: inline, ele herdava a linha alta do trilho
     e o trilho crescia 7px (MEDIDO, 611 -> 604px no ritmo apertado) */
  display: block;
  width: fit-content;
  /* alinhado com "Claude", depois da luz (7px + 7px) */
  margin-left: 14px;
  padding: 0;
  font-family: var(--fonte-texto);
  font-variation-settings: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: var(--neutro);
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--neutro) 60%, transparent);
  text-underline-offset: 3px;
}
.estado-porque > summary::-webkit-details-marker { display: none; }
.estado-porque > summary:hover, .estado-porque[open] > summary { color: var(--tinta-2); }
/* `break-word`, e nao `anywhere`: so parte a palavra que nao cabe numa linha
   inteira, e nao deixa o motivo encolher a coluna ate uma letra. */
.estado-motivo {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--falha);
  overflow-wrap: break-word;
}
/* A LUZ DO CLAUDE: verde quando ele responde, tijolo quando cai. No telefone
   ela e o UNICO sinal dele com a folha da conta fechada, e o mockup so tinha
   desenhado a verde. */
.luz {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--acento);
}
.luz.fora, .claude-fora .luz { background: var(--falha); }

/* O PE DO TRILHO DO CLIENTE (27/10/2026, o pente fino): o item
   Configuracoes, uma linha inteira com o icone, como as abas -- e, so quando
   a escrita automatica cai, um recado curto em cima dele. Na instalacao
   unica o estado de quem opera continua (o `.estado`, acima), e o item vem
   logo depois dele. */
.topo .config-link {
  order: 4;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  margin: auto 0 0;
  padding: 0 12px;
  border-top: 0;
  border-radius: var(--raio-1);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: var(--neutro);
  text-decoration: none;
}
.topo .config-link .ico { width: 18px; height: 18px; color: currentColor; }
.topo .config-link:hover { background: var(--papel-3); color: var(--tinta); }
/* aberta, Configuracoes e um item do menu como os outros: a pilula cheia */
.topo .config-link.atual { background: var(--papel-4); color: var(--tinta); font-weight: 650; }
.topo .config-link.atual .ico { color: currentColor; }
.topo .estado + .config-link, .topo .estado-aviso + .config-link { margin-top: 8px; }
.topo .estado-aviso {
  order: 4;
  flex: none;
  margin: auto 0 0;
  padding: 10px 10px 0;
  border-top: 1px solid var(--borda);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--falha);
}

/* O "MAIS" DA BARRA DE BAIXO so existe no telefone (bloco de 720px). No
   computador as abas dele entram direto na coluna, na ordem: a folha e a
   caixa dela se desfazem, como a folha da conta. */
.aba-mais, .abas-mais-veu { display: none; }
.abas-mais, .abas-mais-caixa { display: contents; color: inherit; }

/* O tema e o sair, no pe do trilho. O nome continua `.acoes`, e ele e so
   desta fileira: a barra de curtir/comentar da prévia virou `.feed-acoes`. */
.topo .acoes {
  order: 5;
  display: flex;
  /* A FILEIRA QUEBRA EM LINHAS (26/10/2026, "da para rolar a sidebar para o
     lado"). No modo SaaS o dono ganha seis links aqui (Contas e chaves,
     Membros, Tarefas, Primeiros passos, Plano e cobranca, Meu Telegram), cada
     um sem quebra de texto: numa fileira so, ela pedia 764px numa coluna de
     216, e o trilho, que rola por dentro (`overflow-y: auto` leva o x junto),
     rolava de lado. No telefone, a mesma fileira passava da folha da conta.
     MEDIDO: testes/test_trilho_nao_rola_de_lado.py. */
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: none;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--borda);
}

/* O interruptor de tema. Existia a folha inteira preparada para o tema escolhido
   a mão (`[data-tema]`) e nenhum botão que escolhesse -- quem quisesse trocar
   tinha que mexer no sistema operacional. O botão liga isso, e o que ele
   escolhe fica gravado no navegador. */
.tema {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  /* o botao da casa tem 40px de altura minima; este e um circulo medido */
  min-height: 0;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-2);
  cursor: pointer;
  line-height: 1;
}
.tema:hover { background: var(--papel-3); color: var(--tinta); }
.tema svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Um icone para cada tema, e so um aparece de cada vez: o do tema em que se
   ESTA -- a lua no escuro, que e o padrao, e o sol no claro, que e escolha.
   Nenhuma consulta ao tema do sistema: ele nao decide mais nada aqui. */
.tema .sol { display: none; }
:root[data-tema="claro"] .tema .lua { display: none; }
:root[data-tema="claro"] .tema .sol { display: block; }

/* A ÚNICA ação de texto desta fileira, com o ícone de sair ao lado: sem ele
   "Sair" se lê como rótulo, e a pessoa não descobre que dá para sair. */
.topo .sair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--raio-pilula);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  color: var(--neutro);
  text-decoration: none;
  white-space: nowrap;
}
/* No modo SaaS o Sair é um botão de formulário (POST com o CSRF): o mesmo
   desenho do link. */
.topo .sair-form { display: contents; }
.topo button.sair { background: none; font-family: inherit; cursor: pointer; }
.topo .sair .ico { width: 16px; height: 16px; }
.topo .sair:hover { color: var(--tinta); background: var(--papel-3); }

.topo select {
  font: inherit;
  font-family: var(--fonte-texto);
  font-size: var(--letra-3);
  min-height: 0;
  padding: 5px var(--espaco-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  background: var(--papel-2);
  color: var(--tinta);
  width: auto;
}

/* O CONTADOR DE PEDIDOS, na palha: e a unica coisa do menu que pede atencao.
   A letra e a da pagina, e nao um verde-oliva fixo como no mockup -- no claro
   aquele dava 2,65:1 (SISTEMA 2.2). */
.selo-contador {
  display: inline-block;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--raio-pilula);
  background: var(--alerta);
  color: var(--papel);
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-weight: 750;
  font-size: 11.5px;
  line-height: 20px;
  text-align: center;
}

/* --- as abas: coluna no trilho no computador, barra de baixo no telefone ---

   UM `<nav>` SÓ, DUAS FORMAS. O HTML é um só (ver web/paginas/base.html): é
   esta folha que decide se ele é uma coluna no trilho ou uma barra no pé da
   tela. Não existe duplicata escondida com `display: none`, e é de propósito:
   duas listas separadas seriam duas verdades sobre quais destinos existem, e
   uma delas ficaria para trás no dia em que nascesse a oitava aba.

   O QUE UMA LISTA DE LINKS NÃO TEM, e esta barra tem:

     ONDE VOCÊ ESTÁ. No computador a aba atual sobe um degrau de cor, com a
     letra mais pesada e o ícone no verde de ler; no telefone, onde não há
     fundo, a sobrancelha verde em cima dela.

     O QUE CADA ITEM É. Um ícone por destino, desenhado aqui no projeto, e uma
     frase de uma linha no `title`. "Cérebro" e "Pedidos" são os dois nomes
     que ninguém adivinha de primeira.

     ONDE UM GRUPO COMEÇA. Um fio fino antes de Desempenho e de Cérebro, no
     computador (`data-grupo`, ver base.html).

     O QUE PEDE ATENÇÃO. O contador de Pedidos (`.selo-contador`) continua
     onde sempre esteve. Na coluna ele vai para a ponta direita da linha; na
     barra de baixo, para o canto do ícone, como o aviso de um aplicativo.

   NENHUMA GAVETA. Os oito destinos estão à vista nos dois tamanhos, o tempo
   todo. O menu de três riscos foi recusado por escrito quando a grade de sete
   abas foi construída, e continua recusado com oito: o dono não descobre o que está
   atrás de um botão que ele nunca abriu.

   QUEM GRUDA NO COMPUTADOR E O TRILHO INTEIRO, e nao a barra: ela e um filho
   dele, entre a frente e o estado. */
.lateral {
  order: 3;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
}

.lateral a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--raio-1);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--neutro);
  min-width: 0;
  /* A ORDEM DO MENU NA COLUNA (acabamento, 29/10/2026): no HTML as abas da
     barra do telefone vem primeiro (motor/frente.py::NO_CELULAR), e cada
     aba leva a posicao dela no menu em `--ordem`. No computador a coluna
     volta a ordem do menu; no telefone (bloco de 720px) vale a do HTML. */
  order: var(--ordem, 0);
}
.lateral a:hover { background: var(--papel-3); color: var(--tinta); }
/* A ABA ATUAL E A PILULA CHEIA NO ACENTO (redesenho, 27/10/2026, como o item
   ativo deles), com a letra escura por cima. Era o degrau `--papel-3`: na B
   o verde cheio era so a decisao. Agora o verde cheio tem dois lugares, o
   "onde estou" do menu e o botao da decisao, e continua sem pintar cartao,
   selo nem faixa (N6). No telefone a celula nao ganha fundo: quem acende e
   o icone (ver o bloco de 720px). */
.lateral a.atual {
  background: var(--papel-4);
  color: var(--tinta);
  font-weight: 650;
}
/* DecolaAds: a Lava e uma coisa so por tela (o botao da decisao); no menu
   o "onde estou" e o degrau de cima, e so o icone acende em Lava (logo
   abaixo, junto do hover). */
.lateral a.atual::before { content: none; }
/* O FIO ENTRE GRUPOS: um traço de 1px no vao antes da aba que abre o grupo.
   Fica no `::after` do link, e nao num elemento entre dois links, para a
   barra de baixo continuar com oito filhos e nada escondido. */
.lateral a[data-grupo] { margin-top: 19px; }
.lateral a[data-grupo]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: -11px;
  height: 1px;
  background: var(--borda);
}

.aba-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O ÍCONE. `flex: none` para ele não encolher quando o rótulo é longo. Linha
   fina de 18px na cor do rótulo (redesenho, 27/10/2026): apagado parado, e
   escuro dentro da pílula verde da aba atual. */
.aba-icone {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: currentColor;
}
.lateral a:hover .aba-icone { color: currentColor; }
/* A ABA ATUAL SEM LAVA (acabamento, 29/10/2026): o icone e o nome na tinta,
   no degrau de cima. A Lava e uma coisa so por tela, e ela e o botao da
   decisao; o icone aceso do menu era a segunda mancha em toda tela. */
.lateral a.atual .aba-icone { color: currentColor; }

/* O contador vai para a ponta da linha, longe do rótulo: na coluna há
   largura sobrando, e número colado na palavra parece parte do nome. */
.lateral a .selo-contador { margin-left: auto; }

/* A JANELA BAIXA, DE NOTEBOOK: O TRILHO APERTA O RITMO. Com o Claude ok o
   trilho pede 664px de altura (o logotipo, o selo, a frente, as oito abas,
   o estado, o tema e o Sair), e o notebook de 1366x768 com o Chrome deixa
   uns 625 a 657px de janela. MEDIDO com a barra de rolagem de verdade (o
   Playwright a esconde por padrao): a 1366x657 sobravam 22px, a barra cinza
   aparecia dentro da coluna, o gasto quebrava em quatro linhas e o Sair
   terminava em y=665, fora da janela; a 1366x625, 54px.

   Aqui as margens do selo, a altura das abas e os fios encolhem, e o trilho
   inteiro cabe em 578px -- a ALTURA MINIMA, MEDIDA; 600px com o Claude fora
   e o "por que?" fechado. A 1366x657, 1366x625 e 1280x600, com as barras de
   verdade, as oito abas e o pe ficam a vista e nenhuma barra aparece (o Sair
   termina em y=647, 615 e 590). Numa janela mais baixa que isso -- o telefone
   deitado, 844x390, e o exemplo: faltam 188px -- o trilho ainda rola por
   dentro, com a barra fina (10px, MEDIDA); as abas vem primeiro, e as duas
   ultimas, o estado, o tema e o Sair ficam a uma rolada da coluna. A 700px
   ou mais nada muda: ali o ritmo do retrato aprovado cabe inteiro (ele pede
   664px, e 688px com o Claude fora). A aba de 32px e para o mouse (isto so
   vale acima de 720px de largura; o dedo do telefone usa a barra de baixo,
   com a medida dela). */
@media (min-width: 721px) and (max-height: 820px) {
  .trilho { padding-top: 12px; padding-bottom: 10px; }
  /* a caixa da marca volta aos 40px de antes do redesenho: com os 44px
     dela o trilho pedia 601px a 1280x600 (MEDIDO, 27/10/2026) */
  .marca-atual { height: 40px; margin: 12px 0 10px; }
  .lateral { margin-top: 12px; }
  .lateral a { height: 32px; }
  /* COM NOVE ABAS (Anúncios, desde a Linha, 26/09/2026) a coluna tem onze
     itens, e a 1280x600 o trilho passava a pedir 612px (MEDIDO): o Sair
     terminava em y=602 e a barra fina aparecia. A 29px por aba ainda sobrava
     7px com o Claude fora (607px, MEDIDO); a 28px a coluna devolve 44px e o
     trilho cabe -- MEDIDO a 1280x600, 1366x625 e 1366x657, com o Claude ok e
     com o Claude fora. Oito abas ficam com os 32px de sempre.

     COM DEZ ABAS (Anúncios, desde o WhatsApp, 05/10/2026) a coluna ganharia
     mais 28px. A 25px por aba ela fica com 294px, 2px MENOS que a de nove a
     28px e que a de oito a 32px (296px) -- MEDIDO no Playwright a 1280x600 e
     1366x657, 05/10/2026. A regra de dez substitui a de nove: nenhuma frente
     tem nove abas desde então. */
  :root[data-abas="9"] .lateral a { height: 30px; }
  .lateral a[data-grupo] { margin-top: 13px; }
  .lateral a[data-grupo]::after { top: -8px; }
  .topo .estado { gap: 6px; padding: 10px 10px 8px; }
  .topo .acoes { margin-top: 6px; padding-top: 6px; }
}

/* --- a barra do alto e a pagina ------------------------------------------ */

/* A AREA E O FUNDO DA PAGINA EM VOLTA DO CARTAO DO CONTEUDO: o respiro de
   20px a esquerda (entre a barra lateral e o cartao), a direita e no pe. No
   alto quem da o respiro e a barra do "onde voce esta". */
.area {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--respiro-casco) var(--respiro-casco);
}
/* A BARRA DO ALTO: "onde voce esta", grudada no alto da area, FINA e sobre o
   fundo da pagina, acima do cartao do conteudo -- so a trilha, e a direita o
   botao redondo da gaveta. A altura dela e `--topo-altura`, e e esse numero
   que a ancora e as faixas grudadas das telas descontam para nao nascer
   atras dela. */
.barra-alta {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--topo-altura);
  padding: 0 var(--espaco-2);
  border-bottom: 0;
  background: var(--chao);
}
.trilha {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--neutro);
}
.trilha a { color: inherit; text-decoration: none; white-space: nowrap; }
.trilha a:hover { color: var(--tinta); }
.trilha .ico { width: 14px; height: 14px; }
.trilha [aria-current] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta-2);
}

/* --- estrutura ---------------------------------------------------------- */

/* O PÉ DE `main` CONTA COM A BARRA DE BAIXO. No computador `--rodape-altura`
   é zero e isto são os 88px de sempre; no telefone ele cresce o quanto a
   barra fixa cobre, mais a faixa do gesto do aparelho (`safe-area-inset`),
   para o último botão da tela nunca nascer debaixo dela.

   ENCOSTADA NO TRILHO, e nao no meio: `main` comeca onde o trilho acaba, com
   a margem de 40px, e para em `--conteudo-max`. Em tela muito larga o
   que sobra fica a direita, como no retrato aprovado -- centralizada, a
   pagina se afastava do menu e o olho ia e voltava. SEM `position`, sem
   `z-index`, sem nada que crie contexto (ver o comentario do casco). */
main {
  /* `width: 100%` NÃO É ENFEITE. `main` é item de uma coluna flex (`.area`),
     e o `max-width` o limita; sem a largura inteira ele encolheria até o
     tamanho do conteúdo. */
  width: 100%;
  max-width: calc(var(--conteudo-max) + 2 * var(--margem-lateral));
  flex: 1 0 auto;
  margin: 0;
  padding: 36px var(--margem-lateral)
           calc(88px + var(--rodape-altura) + env(safe-area-inset-bottom, 0px));
  /* O CARTAO GRANDE DO CONTEUDO (redesenho, 27/10/2026): canto de 24px, o
     fio de 1px e o cartao por cima do fundo da pagina. Fundo, borda e raio
     nao criam contexto; `overflow` fica de fora de proposito (cortaria o que
     gruda dentro da tela, e a caixa do "por que?"). */
  border: 1px solid var(--borda);
  border-radius: var(--raio-conteudo);
  background: var(--papel);
}
/* [/dono: casco] */

/* [dono: casco] */
/* --- a gaveta "Como esta tela funciona" (SISTEMA 5.14) -----------------

   E PARA ONDE VAI A EXPLICACAO LONGA DE CADA TELA, sem apagar uma palavra.
   Mora no HTML como ULTIMO filho de `<main>` (ver base.html), e quem a poe
   no canto da barra do alto e esta folha: `position: fixed` no computador,
   `absolute` no canto da area no telefone.

   AS CAMADAS (plano da B, 4.2). O `details` cria o contexto da gaveta, com
   21: acima da barra do alto (20), das faixas grudadas de Anuncios (5) e do
   palco do Laboratorio (3). Dentro dele, o veu vale 1 e o painel 2 -- o
   painel fica sobre o veu, entao tocar dentro da gaveta nao a fecha, e tocar
   no veu fecha (o veu e o `::after` do `summary`: tocar nele e tocar no
   `summary`). No telefone a barra de baixo (30) fica POR CIMA da gaveta, de
   proposito: o dono sai dela pela navegacao, e o pe da gaveta reserva a
   altura da barra para a ultima frase nao morar atras dela. */
details.ajuda {
  position: fixed;
  /* no meio da barra do alto: (56 - 32) / 2, com o botao pequeno de 32px */
  top: calc((var(--topo-altura) - 32px) / 2);
  right: calc(var(--respiro-casco) + var(--espaco-2));
  z-index: 21;
  margin: 0;
  padding: 0;
  border: 0;
}
/* o botao da gaveta e uma pilula com o fio, sobre o fundo da pagina */
.ajuda > summary { list-style: none; font-variation-settings: normal; border: 1px solid var(--borda); background: var(--papel); color: var(--tinta-2); }
.ajuda > summary::-webkit-details-marker { display: none; }
/* O BOTAO DA GAVETA NAO AFUNDA NO TOQUE. O botao da casa desce 1px quando
   apertado (`transform`), e `transform` faz do `summary` a caixa de
   referencia do veu, que e `fixed` e mora dentro dele: no instante do toque
   o veu encolhia para o tamanho do botao, o dedo soltava fora dele, e o
   toque no veu nao fechava a gaveta. MEDIDO pela bancada (M7), a 1440 e a
   390: o veu nao fechava em ponto nenhum; sem o afundar, fecha em todos. */
.ajuda > summary:active { transform: none; }
.ajuda > summary .ico { width: 16px; height: 16px; }
.ajuda[open] > summary::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--veu);
  cursor: default;
}
.ajuda-painel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: min(440px, 100vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 28px 40px;
  border-left: 1px solid var(--borda-forte);
  border-radius: var(--raio-conteudo) 0 0 var(--raio-conteudo);
  background: var(--papel-2);
  box-shadow: var(--sombra-pop);
  color: var(--tinta);
  text-align: left;
  cursor: auto;
}
.ajuda-cabeca {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
  margin: 0 -28px 8px;
  padding: 0 20px 0 28px;
  border-bottom: 1px solid var(--borda);
  background: var(--papel-2);
}
.ajuda-cabeca h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 750;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.fechar-ajuda { flex: none; width: 36px; min-height: 36px; padding: 0; }
.ajuda-secao { padding: 18px 0; }
.ajuda-secao + .ajuda-secao { border-top: 1px solid var(--borda); }
.ajuda-secao h3 {
  margin: 0 0 8px;
  font-family: var(--fonte-titulo);
  font-weight: 650;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--tinta);
}
.ajuda-secao p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta-2); max-width: none; }
.ajuda-secao p + p { margin-top: 10px; }
.ajuda-secao b { color: var(--tinta); }
/* O "ONDE VOCE ESTA" NAO CORRE POR BAIXO DO BOTAO DA GAVETA: com gaveta na
   tela, a barra do alto guarda o canto dela. MEDIDO a 1440, 1280, 1000 e
   721: o botao "Como esta tela funciona" tem 194px (e 32 de alto, no meio
   dos 56 da barra); a trilha para 16px antes dele. */
.area:has(> main > .ajuda) .barra-alta { padding-right: calc(var(--espaco-2) + 210px); }
/* [/dono: casco] */

/* [dono: nucleo] */
/* O TITULO DA TELA E A MUDANCA QUE MAIS SE VE: 40px (32px no celular), 800,
   apertado. Com ele falando alto, a tela dispensa a sobrelinha em caixa alta.
   `font-weight`, e nao `font-variation-settings`: esta segunda HERDA e nao se
   soma, e prenderia o peso de tudo o que morasse dentro do titulo. */
/* REDESENHO (27/10/2026): o titulo mora DENTRO do cartao do conteudo, e
   fala mais baixo -- 30px a 700, TINGIDO (`--tinta-titulo`), e nao branco
   puro. Eram 40px a 800. */
.titulo-tela {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--letra-6);
  line-height: 1.12;
  letter-spacing: var(--rastreio-titulo);
  text-wrap: balance;
  color: var(--tinta-titulo);
  margin: 0 0 10px;
}
.abaixo { color: var(--tinta-2); margin: 0 0 var(--espaco-5); max-width: 60ch; }

/* O ROTULO EM FRASE COMUM. Era 11px, espacado, em caixa alta e verde: na B
   nao existe rotulo em caixa alta em lugar nenhum -- o titulo da tela fala
   sozinho -- e o verde de ler ficou para o que e estado bom. */
.rotulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-3);
  color: var(--tinta-2);
  margin: 0 0 10px;
}

/* --- as pecas da B que mais de uma tela usa (SISTEMA 5, plano 4.1) ------

   Escritas aqui, no nucleo, ANTES das frentes vestirem as telas: nenhuma
   frente cria peca compartilhada (plano 2.3). Cada nome esta em
   `VOCABULARIO_DA_CASA` (testes/_casa.py), e um teste confere que todo nome
   do vocabulario tem regra nesta folha. */

/* O ICONE DA CASA: `<svg class="ico"><use href="#i-..."/></svg>`, com o
   desenho em `<symbol>` dentro de base.html -- o mesmo traco das abas. A
   caixa dos simbolos nao ocupa lugar nenhum na pagina. */
.ico {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* A CABECA DA TELA (SISTEMA 5.5): o titulo, UMA linha de apoio ou a de
   pendencia, e o botao da tela a direita. O resto do paragrafo de hoje vai
   para a gaveta. */
.cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}
.cabeca-texto { min-width: 0; }
.cabeca-acoes { display: flex; align-items: center; gap: 10px; flex: none; }
.cabeca .titulo-tela { margin: 0; }
.cabeca .abaixo { margin: 10px 0 0; max-width: 66ch; }
/* O nome de campanha como titulo: pode ter 120 letras, e 40px nao cabe. */
.titulo-tela.longo { font-size: 28px; line-height: 1.14; }
/* "2 esperam por voce · 4 posts": a pendencia no lugar da linha de apoio. */
.pendencia {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  color: var(--neutro);
}
.pendencia b { color: var(--alerta); font-weight: 650; }
.pendencia .ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--alerta); }
/* A PENDENCIA QUE E LINK (Etapa 7: em Posts ela leva a lista so com os que
   esperam voce). Fica na cor palha do numero, com o fio fino embaixo, e nao
   no verde de link: na B o verde e a decisao, e isto e o aviso. */
.pendencia a { color: var(--alerta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pendencia a:hover { text-decoration-thickness: 2px; }
/* A PENDENCIA ACESA, com a lista so com os que esperam voce: ela e o filtro
   daquela pagina, e ganha o fundo do filtro atual (`.filtros a.atual`). Na
   conferencia da rodada 7 so o fio passava de 1px para 2px, e a fileira
   ficava sem nada aceso sobre 3 cartoes de 24. A margem negativa devolve
   os 3px de cima e de baixo (a linha nao cresce) e 2px de cada lado: a 320px
   sobram 13px na linha, e com 18px a mais o "· 24 posts" descia para uma
   segunda linha (MEDIDO); com 8px, cabe. O redesenho (27/10/2026) levou o
   filtro atual para `--acento-fraco`, e a pendencia acesa vai junto: palha
   sobre ele, 7,0:1 no escuro e 6,2:1 no claro. */
.pendencia a[aria-current] {
  margin: -3px -2px;
  padding: 3px 6px;
  border-radius: 7px;
  background: var(--acento-fraco);
  text-decoration: none;
}
/* "Campanhas", com a seta: a volta de uma tela filha, no lugar da sobrelinha
   em caixa alta. 36px de alto: e alvo de dedo. */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin: -6px 0 6px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  color: var(--neutro);
  text-decoration: none;
}
.voltar:hover { color: var(--tinta); }
.voltar .ico { width: 16px; height: 16px; }

/* O "POR QUE?" (SISTEMA 5.15): a explicacao de UMA decisao, ao lado dela --
   um `<details>` pequeno que abre uma caixa flutuante. `name="porque"` no
   HTML faz o grupo virar acordeao sem JavaScript: abrir um fecha o outro.

   O RESET, e ele e a primeira coisa: `details` e `summary` da casa tem borda,
   respiro e um peso de letra que HERDA (o do relatorio de procedencia, la
   embaixo), e vestiriam o "por que?" de caixa. */
details.porque {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
}
.porque > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-family: var(--fonte-texto);
  font-variation-settings: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  color: var(--neutro);
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--neutro) 60%, transparent);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.porque > summary::-webkit-details-marker { display: none; }
.porque > summary:hover, .porque[open] > summary { color: var(--acento-texto); }
.porque > summary .ico { width: 15px; height: 15px; }
/* A CAIXA NAO PODE MORAR DENTRO DE QUEM CORTA (`overflow: hidden`): seria
   cortada. E por isso que o `.momento` nao tem. */
.porque-caixa {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  z-index: 30;
  width: min(380px, 86vw);
  padding: 16px 18px;
  border-radius: var(--raio-2);
  background: var(--papel-3);
  box-shadow: var(--sombra-pop);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-2);
  white-space: normal;
  text-align: left;
}
.porque-caixa.a-direita { left: auto; right: -12px; }
.porque-caixa.acima { top: auto; bottom: calc(100% + 10px); }
.porque-caixa p { margin: 0; }
.porque-caixa p + p { margin-top: 8px; }
.porque-caixa b { color: var(--tinta); }
/* No corpo de uma tela longa, onde empurrar o texto e melhor que cobrir: a
   caixa entra na linha. */
.porque.em-linha { display: block; }
.porque.em-linha .porque-caixa {
  position: static;
  width: auto;
  margin-top: 10px;
  border: 1px solid var(--borda);
  background: var(--papel-2);
  box-shadow: none;
}
/* O "?" PEQUENO AO LADO DE UM CAMPO e o mesmo componente, com o `summary`
   virado circulo. Nunca `data-dica` nem `title`: o telefone nao tem mouse. */
.porque.q > summary {
  width: 17px;
  height: 17px;
  justify-content: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.3px var(--borda-forte);
  text-decoration: none;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1;
}
.porque.q > summary:hover, .porque.q[open] > summary { box-shadow: inset 0 0 0 1.3px var(--acento-texto); }

/* A NOTA DO POCO ("Previa de graca · 5 telas"): em `--tinta-2`, e nunca no
   verde -- no claro o verde de ler da 4,35:1 sobre o poco (SISTEMA 2.5). */
.poco-nota {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  color: var(--tinta-2);
}
.poco-nota .ico { width: 14px; height: 14px; }

@media (max-width: 720px) {
  .cabeca { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 20px; }
  .cabeca .abaixo { margin-top: 6px; font-size: 14.5px; }
  .titulo-tela.longo { font-size: 24px; line-height: 1.14; }

  /* NO TELEFONE A CAIXA DO "POR QUE?" VIRA FOLHA, logo acima da barra de
     baixo: uma caixa flutuante de 380px sairia da tela de 320. A que abre
     para cima (`.acima`) tambem: com o peso de duas classes, a regra do
     computador ganhava desta, e a caixa ia para fora da tela (MEDIDO na
     5.2-r1: topo em -302px a 390, na Campanha). Ate a Etapa 7 so o momento
     da Campanha tinha o conserto; agora ele e da casa. */
  .porque-caixa, .porque-caixa.a-direita, .porque-caixa.acima {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(var(--rodape-altura) + 12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    width: auto;
  }

  /* A CAIXA DE TOQUE DE 44x44, SEM MUDAR O DESENHO (plano 4.4, C29). O
     "por que?" e texto de 13px, com uns 16px de altura, e o "?" de campo e um
     circulo de 17px -- a casa mede o dedo em 44px. Um `::before`
     transparente estende o alvo: em cada lado, o que faltar para 44 (metade
     de um lado, metade do outro), e zero onde o `summary` ja passa disso. O
     `summary` ganha `position: relative` SEM `z-index`, para nao criar
     contexto. Onde a caixa cobrir outro alvo, quem muda e o desenho da tela
     (o "?" vai para depois do rotulo, a 8px), e nao esta regra. */
  .porque > summary { position: relative; }
  .porque > summary::before {
    content: "";
    position: absolute;
    top: min(0px, calc(50% - 22px));
    right: min(0px, calc(50% - 22px));
    bottom: min(0px, calc(50% - 22px));
    left: min(0px, calc(50% - 22px));
  }
}

.duas { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: var(--espaco-6); align-items: start; }
@media (max-width: 900px) {
  .duas { grid-template-columns: 1fr; }
}
/* [/dono: nucleo] */

/* [dono: conteudo] */
@media (max-width: 900px) {
  /* A PRÉVIA SOBE NO TELEFONE.

     MEDIDO em 390x844, na tela de Criar com um post escrito: a prévia
     começava em 1.598px de uma página de 2.678px. Quase duas telas de polegar
     entre "salvar" e ver o que se escreveu -- e a prévia é o motivo de a tela
     existir ("a prévia da tipografia é de graça").

     Em coluna única a ordem do HTML vira a ordem da tela, e no HTML a prévia é
     o segundo filho porque no computador ela é a coluna da direita. `order`
     desfaz isso SÓ aqui: a folha não muda o desenho de 1280px, onde a prévia
     já está ao lado e subir não significaria nada.

     `.previa-caixa` só existe na tela de Criar (web/paginas/criar.html), e é
     por isso que a regra é por ela, e não por "o segundo filho de `.duas`":
     o Cérebro e o Carrossel também são `.duas`, e neles a segunda coluna tem
     que continuar embaixo. */
  .duas > .previa-caixa { order: -1; }
  /* SEM POST NAO HA PREVIA, so a caixa que diz "Escreva a copy e o post
     aparece aqui": ela nao sobe, e o formulario (com o verde) fica no alto.
     MEDIDO a 390x844: o verde "Escrever a copy" descia a 774px com a caixa
     vazia na frente. */
  .duas > .previa-caixa:has(> .vazio) { order: 0; }
}
/* [/dono: conteudo] */

/* [dono: nucleo] */
.bloco {
  background: var(--papel-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  padding: var(--espaco-5);
  margin-bottom: var(--espaco-4);
}
/* O TITULO DE SECAO (SISTEMA 5.10): 700 a 19px, o mesmo em `.subtitulo`,
   `.titulo-secao` e no titulo do painel de Anuncios. */
.bloco h2 {
  color: var(--tinta-titulo);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--letra-5);
  line-height: 1.25;
  margin: 0 0 var(--espaco-3);
  letter-spacing: -.01em;
}
/* [/dono: nucleo] */

/* [dono: casco] */
/* --- os recados ----------------------------------------------------------

   TODA AÇÃO QUE DÁ CERTO DIZ QUE DEU CERTO. Antes, responder uma pergunta
   recarregava a página e pronto: a única pista de que tinha funcionado era o
   cartão ter sumido da lista -- e se a resposta destravasse um post, ninguém
   contava, embora a tela tivesse PROMETIDO antes ("esta resposta vai sustentar:
   post #12").

   O recado é UM mecanismo: web/app.py monta, base.html desenha, e toda tela
   herda sem escrever uma linha. Ver `recado()` e `voltar()` em web/app.py. */

.recados { display: grid; gap: var(--espaco-2); margin: 0 0 var(--espaco-5); }

.recado {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  /* O TOM, E NAO O FIO ESQUERDO. Na B o aviso e o selo em tamanho de caixa:
     o veu do tom e o fio de 1px do tom. O fio grosso de 3px so aparece no
     painel como marca de "voce mexeu aqui". */
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
.recado .sinal {
  flex: none;
  margin-top: 2px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--neutro);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.recado p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta);
  max-width: 72ch;
  white-space: pre-line;
}
.recado .ir {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 650;
  font-size: var(--letra-3);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.recado-bom { border-color: transparent; background: var(--acento-fraco); }
.recado-bom .sinal { stroke: var(--acento-texto); }
.recado-aviso { border-color: var(--alerta-fio); background: var(--alerta-fraco); }
.recado-aviso .sinal { stroke: var(--alerta); }
.recado-erro { border-color: var(--falha-fio); background: var(--falha-fraco); }
.recado-erro .sinal { stroke: var(--falha); }

/* --- a tela que explica o erro -------------------------------------------

   Eram 14 páginas brancas: texto solto no canto de cima, sem cabeçalho, sem
   menu e sem link de volta -- no telefone, uma linha de oito palavras no vazio.
   Agora todo erro sai como tela: o mesmo cabeçalho de sempre, o motivo em
   português e o caminho de volta. Desenhada pelo bloco padrão de base.html.

   NA B ELA E UM CARTAO DE DECISAO, como o "Proximo passo" da campanha: o
   codigo num selo de tijolo, o titulo no tamanho do titulo da tela (e o h1
   da pagina), o que aconteceu na linha de apoio, e a volta em verde -- e a
   unica saida, entao e a decisao da tela. */

.erro-tela {
  max-width: 62ch;
  margin: var(--espaco-6) 0;
  padding: 30px 32px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-palco);
  background: var(--papel-2);
}
.erro-tela h1 {
  margin: 14px 0 10px;
  color: var(--tinta-titulo);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--letra-6);
  line-height: 1.04;
  letter-spacing: var(--rastreio-titulo);
  text-wrap: balance;
}
.erro-tela p {
  margin: 0 0 var(--espaco-5);
  color: var(--tinta-2);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-line;
}
.erro-tela .codigo {
  display: inline-block;
  padding: 5px 9px;
  border-radius: var(--raio-selo);
  background: var(--falha-fraco);
  box-shadow: inset 0 0 0 1px var(--falha-fio);
  color: var(--falha);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-1);
  line-height: 1;
}
.erro-tela .codigo::first-letter { text-transform: uppercase; }
/* [/dono: casco] */

/* [dono: nucleo] */
/* --- formulários -------------------------------------------------------- */

/* O NOME DO CAMPO EM FRASE COMUM (SISTEMA 5.18). `display: block` fica, e
   nao o `flex` do mockup: ha rotulo com `<b>` e `<small>` no meio da frase, e
   em flex cada pedaco viraria um item separado. */
label {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-3);
  line-height: 1.2;
  color: var(--tinta-2);
  margin: 0 0 7px;
}

/* `input[type=password]` ESTÁ NA LISTA, e ficou de fora até aqui. Ele era o
   único campo do painel sem estilo nenhum: caixa do sistema, com outra fonte,
   outra altura e outra borda, bem ao lado de um campo de texto estilizado. E
   ele aparece em entrar.html e cadastro.html -- as duas primeiras telas que
   qualquer pessoa vê, antes de qualquer outra coisa. */
/* O CAMPO AFUNDA (SISTEMA 5.18): a cor da pagina, um degrau abaixo do cartao
   que o contem, com o fio forte -- e o fio que diz "aqui cabe o que voce
   escreve", porque o degrau sozinho e fraco de proposito. O foco e verde,
   que e o verde de marcar, e nao o de decidir.
   `padding: 12px 14px` E LITERAL: o teste do campo de senha procura este texto
   para saber que a senha tem o mesmo desenho dos outros campos. */
/* O CAMPO DELES (redesenho, 27/10/2026): 48px de alto, canto de 12px, o
   fio de 1px e o fundo do cartao; o rotulo acima (`label`) e a ajuda abaixo
   (`.campo small`). Os tipos de digitar que faltavam (e-mail, numero, busca,
   data, hora, endereco) entram na mesma regra. */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=url], input[type=date], input[type=time], input[type=file], select, textarea {
  width: 100%;
  min-height: 48px;
  font: 400 15px/1.3 var(--fonte-texto);
  padding: 12px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--papel);
  color: var(--tinta);
  transition: border-color 150ms, box-shadow 150ms;
}
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--neutro); }
/* O ANEL VERDE E DO CAMPO DE DIGITAR, E NAO DO RADIO NEM DA CAIXINHA. Escrito
   como `input:focus`, este reset (0,1,1) vencia o `:focus-visible` global
   (0,1,0) tambem nos 5 radios e nas 6 caixinhas dos templates (a conta da
   Meta no Automatico de Anuncios, "Subi este anuncio" na Entrega, os dias do
   Automatico, a do Cerebro, as do Laboratorio). MEDIDO na conferencia 1+2, com o foco pelo teclado no radio
   "Pos-paga": antes, contorno verde de 2px; com o reset, contorno nenhum e so
   a sombra de 3px a 13% -- quadrada em volta de um radio redondo, e quase
   invisivel no escuro. O `:where` tira os dois da lista sem mudar o peso da
   regra: um (0,1,1) mais pesado passaria a vencer regras de campo que hoje
   ganham dela (ex.: `.anu-teto-campo input[type=text]`). Sem `:not(a, b)`
   com virgula de proposito: os testes cortam a lista de seletores na virgula.
   O radio e a caixinha voltam ao contorno global, que so acende no teclado,
   como antes da B. */
input:where(:not([type=radio]):not([type=checkbox])):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--foco);
  box-shadow: 0 0 0 3px var(--acento-fraco);
}

/* O CAMPO DE ANUNCIOS NAO TEM MAIS REGRA PROPRIA. Ele subia para o controle
   branco com o fio forte porque la o cartao era mais claro que a pagina; na B
   as duas frentes tem a mesma escada, e o campo de toda a casa ja nasce com o
   fio forte e afundado (a regra logo acima). */
.campo { margin-bottom: var(--espaco-3); }
.campo small { display: block; color: var(--neutro); font-size: var(--letra-2); margin-top: 6px; }

.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--espaco-3); }

/* O BOTAO NEUTRO (SISTEMA 5.7): um degrau acima do cartao, fio forte, raio de
   10px, 600 a 14px. O fundo continua saindo de `--anu-controle`, que na B vale
   `--papel-3` nas duas frentes -- a regra e uma so para as duas.

   `min-height`, e nao `height`: botao de rotulo longo QUEBRA no celular, e
   por isso tambem nao ha `nowrap` aqui (o mockup tinha, e a 320px um rotulo
   de quatro palavras sairia pela borda da tela).

   `inline-flex` para o icone e o texto alinharem pelo meio quando as telas
   puserem icone; nenhum botao de hoje tem mais de um pedaco de texto dentro,
   conferido nos 79 dos templates. */
button, .botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 20px;
  border: 1px solid transparent;
  border-radius: var(--raio-botao);
  background: var(--anu-controle);
  box-shadow: var(--anu-elev-1);
  color: var(--tinta);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-botao);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms cubic-bezier(.2, .7, .2, 1), transform 150ms cubic-bezier(.2, .7, .2, 1);
}
button:hover, .botao:hover { background: var(--papel-4); }
button:active, .botao:active { transform: translateY(1px); }
button .ico, .botao .ico { width: 17px; height: 17px; }

/* O BOTAO DA DECISAO (SISTEMA 5.6): o UNICO verde cheio de cada lugar -- um
   por tela, e numa lista um por cartao que espera o dono. Na B o verde e a
   decisao nas DUAS frentes; o dinheiro se distingue pelo tamanho, pela
   largura e pelo lugar, e nao pela cor. `.botao.forte` e o link que decide
   (ele leva para onde se decide), com a mesma cara. */
button.forte, .botao.forte {
  border-color: transparent;
  background: var(--acento);
  color: var(--tinta-do-acento);
  font-weight: 700;
}
button.forte:hover, .botao.forte:hover { background: var(--acento-forte); }
button[disabled]:hover { background: var(--papel-3); }
button.forte .ico, .botao.forte .ico { stroke-width: 2.1; }
/* DESABILITADO: o mesmo cinza do secundario, com a letra apagada -- e nao
   o botao inteiro a meia luz (o verde a 45% parecia um verde fraco, e nao
   "ainda nao"). */
button[disabled] { opacity: 1; border-color: transparent; background: var(--papel-3); color: var(--neutro); box-shadow: none; cursor: not-allowed; }
button.largo { width: 100%; }
/* A decisao da tela quando ela e o momento: gorda, como o botao da arte. */
.grande {
  min-height: 48px;
  padding: 0 26px;
  gap: 10px;
  font-size: 16.5px;
  border-radius: var(--raio-chamada);
}
/* O que nao precisa de caixa: "Limpar", "Corrigir". */
.fantasma { background: transparent; border-color: transparent; color: var(--tinta-2); }
.fantasma:hover { background: var(--papel-3); color: var(--tinta); }
.pequeno { min-height: 32px; padding: 6px 14px; font-size: var(--letra-3); border-radius: var(--raio-botao); }
/* O link de acao que nao e botao; e o de apagar, em tijolo. */
.link-acento { display: inline-flex; align-items: center; gap: 6px; color: var(--acento-texto); font-weight: 600; }
.link-acento:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-tijolo { color: var(--falha); font-weight: 600; }
/* O botão que apaga. Vermelho e só ele: se todo botão perigoso fosse
   vermelho, o vermelho pararia de querer dizer alguma coisa. */
button.perigo {
  background: var(--falha);
  border-color: var(--falha);
  color: var(--papel);
}
button.perigo:hover { background: var(--falha-forte); border-color: var(--falha-forte); }

/* --- avisos ------------------------------------------------------------- */

/* O AVISO E O SELO EM TAMANHO DE CAIXA (SISTEMA 5.16): o veu do tom e o fio
   de 1px do tom, sem o fio esquerdo de 3px, com o raio do cartao. */
.aviso {
  border: 1px solid var(--borda);
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-2);
  margin-bottom: var(--espaco-4);
  background: var(--papel-2);
}
.aviso.trava { border-color: var(--alerta-fio); background: var(--alerta-fraco); }
.aviso.erro { border-color: var(--falha-fio); background: var(--falha-fraco); }
.aviso.bom { border-color: transparent; background: var(--acento-fraco); }
.aviso h3 {
  font-family: var(--fonte-titulo);
  font-weight: 650;
  font-size: 14px;
  line-height: 1.3;
  margin: 0 0 6px;
}
.aviso.erro h3 { color: var(--falha); }
/* Medida de leitura. MEDIDO na revisão da Tarefa 9: em 1280 px o parágrafo do
   aviso corria a página toda, cerca de 170 caracteres por linha. */
.aviso p { margin: 0 0 6px; font-size: 14px; color: var(--tinta-2); max-width: 75ch; }
.aviso p:last-child { margin-bottom: 0; }

/* A caixa da ação que não tem volta. Ela existe para ser lida antes de o dedo
   encostar no botão, então tem o estrago escrito dentro. */
.perigo-caixa {
  /* Medida de leitura: o estrago é uma lista de linhas curtas, e a 1280px a
     caixa vermelha corria a tela inteira para mostrar oito palavras. */
  max-width: 76ch;
  border: 1px solid var(--falha-fio);
  border-radius: var(--raio-2);
  background: var(--falha-fraco);
  padding: var(--espaco-4) var(--espaco-5);
  margin-bottom: var(--espaco-5);
}
.perigo-caixa h2 {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-5);
  margin: 0 0 var(--espaco-2);
  color: var(--falha-forte);
}
.perigo-caixa .estrago {
  margin: 0 0 var(--espaco-4);
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  line-height: 1.7;
  color: var(--tinta-2);
  white-space: pre-line;
}
.perigo-caixa form { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }

/* --- listas ------------------------------------------------------------- */

.fichas { display: grid; gap: 10px; }

.ficha {
  background: var(--papel-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  padding: var(--espaco-4) var(--espaco-5);
}
.ficha .chave {
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--acento-texto);
}
.ficha .afirmacao {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 600;
  font-size: 15.5px;
  line-height: 1.35;
  margin: 5px 0 var(--espaco-2);
}
.ficha .procedencia {
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--neutro);
}
/* O SELO DE ESTADO (SISTEMA 5.8): canto quase vivo, como os selos da arte,
   frase comum e 12,5px. A caixa alta saiu; a primeira letra sobe sozinha
   ("esperando voce" vira "Esperando voce") pelo `::first-letter` logo abaixo,
   e nao no template -- ha teste que le o texto do jeito que a rota escreve.

   `inline-block`, e nao o `inline-flex` do mockup, POR CAUSA DA PRIMEIRA
   LETRA: `::first-letter` nao vale dentro de um `inline-flex`. Quando uma
   tela puser um icone ou o ponto dentro do selo, ele vira `inline-flex`
   sozinho (a regra do `:has` abaixo), e o texto vai num `.selo-texto`. */
.etiqueta {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-1);
  line-height: 16px;
  padding: 4px 10px;
  border-radius: var(--raio-selo);
  background: var(--papel-3);
  box-shadow: none;
  color: var(--tinta-2);
  /* SEM nowrap aqui: etiqueta também mostra chave de fato e termo do
     glossário, que podem ser longos, e sem quebra estouravam o cartão e
     davam rolagem lateral (MEDIDO na revisão de qualidade da Tarefa 9). A de
     texto fixo que não pode partir leva .sem-quebra no template. */
}
.etiqueta::first-letter { text-transform: uppercase; }
.etiqueta:has(> .ponto, > .ico) { display: inline-flex; align-items: center; gap: 7px; }
.etiqueta .ico { width: 14px; height: 14px; stroke-width: 1.9; }
.etiqueta .ponto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* "em montagem": um quarto cheio -- comecou e esta longe do fim */
.etiqueta .ponto.andando {
  width: 9px;
  height: 9px;
  background: conic-gradient(currentColor 0 25%, transparent 0);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.selo-texto { display: inline-block; }
.selo-texto::first-letter { text-transform: uppercase; }
/* Os tres tons sobre o proprio veu, no cartao escuro: 6,7:1 (ok), 6,5:1
   (esperando), 6,0:1 (falha). */
.etiqueta.acento { color: var(--acento-texto); background: var(--acento-fraco); box-shadow: none; }
.etiqueta.alerta { color: var(--alerta); background: var(--alerta-fraco); box-shadow: none; }
/* Dentro do aviso de trava, o fundo da etiqueta de alerta era o MESMO do
   aviso (--alerta-fraco), e ela sumia: sobrava só a palavra. Visto nas
   capturas da revisão da Tarefa 9. */
.aviso.trava .etiqueta.alerta {
  background: var(--papel);
  box-shadow: inset 0 0 0 1px var(--alerta);
}
.etiqueta.falha { color: var(--falha); background: var(--falha-fraco); box-shadow: inset 0 0 0 1px var(--falha-fio); }

/* O VAZIO (SISTEMA 5.17): uma caixa que diz o que falta e oferece o
   primeiro passo. Sem tracejado -- a superficie e lisa. */
.vazio {
  display: block;
  padding: 18px 22px 20px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
  color: var(--neutro);
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}
/* O VAZIO QUE CONVIDA (redesenho, 27/10/2026, o estado vazio deles): no
   meio do cartao, o icone de linha grande num disco com o brilho suave do
   acento, o titulo, uma frase e o botao da decisao. Para a lista que ainda
   nao tem nada. O desenho:
     <div class="vazio convite">
       <span class="vazio-disco"><svg class="ico"><use href="#i-..."/></svg></span>
       <h2 class="vazio-titulo">Voce ainda nao tem nenhuma campanha</h2>
       <p>Uma frase curta.</p>
       <a class="botao forte" href="...">+ Nova campanha</a>
     </div> */
.vazio.convite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px 52px;
  border: 0;
  background: none;
  text-align: center;
}
.vazio.convite p { margin: 0; max-width: 46ch; }
.vazio.convite .botao, .vazio.convite button { margin-top: 14px; }
.vazio-disco {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--acento-fraco) 0, transparent 70%);
  box-shadow: inset 0 0 0 1px var(--borda);
  color: var(--acento-texto);
}
.vazio-disco .ico { width: 38px; height: 38px; stroke-width: 1.4; }
.vazio-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--tinta-titulo);
}
/* O `<b>` do vazio fica NA frase: ha vazio que escreve o estado no meio dela. */
.vazio b { color: var(--tinta); font-weight: 600; }
/* com acao: o desenho, o texto e o botao numa fileira */
.vazio.com-acao { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.molduras { display: flex; }
.molduras span { width: 28px; height: 35px; border-radius: 4px; background: var(--papel-3); box-shadow: inset 0 0 0 1.2px var(--borda-forte); }
.molduras span + span { margin-left: -12px; transform: translateY(-3px); }
.molduras span:nth-child(3) { transform: translateY(-6px); }

/* --- a lista que não mente: contador, filtro e páginas -------------------

   A galeria de posts mostrava 50 e não dizia que tinha cortado. O dono foi
   procurar "os posts antigos" e eles simplesmente não estavam lá -- sem
   contador, sem filtro, sem página seguinte e sem uma linha explicando.
   Os dados vêm prontos da rota (web/app.py::ver_pecas). */

/* AS ABAS COM CONTAGEM (SISTEMA 5.9): um trilho fundo, e a atual sobe um
   degrau. Sem verde -- "o que estou vendo" nao e decisao. Uma regra so para
   as duas frentes: Anuncios tinha a pilula propria, e ela saiu.

   QUEBRA, NAO ROLA (N4): com `flex-wrap` os filtros descem para uma segunda
   fileira no celular, todos a vista. O mockup os fazia rolar de lado com um
   esmaecido, e quem nao ve nao sabe que ha o que rolar -- e o mesmo argumento
   da barra de abas. E a recomendacao da pergunta P3 ao dono. */
/* OS CHIPS DE FILTRO (redesenho, 27/10/2026): cada um uma pilula com o fio
   de 1px, soltos, e o atual cheio do veu do acento com a letra forte --
   como os filtros de periodo deles. O veu e `--acento-fraco`, e nao o
   acento cheio: o verde cheio fica para a decisao e o item do menu. */
.filtros {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.filtros a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--neutro);
  text-decoration: none;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.2;
  white-space: nowrap;
}
.filtros a:hover { color: var(--tinta); border-color: var(--borda-forte); }
.filtros a.atual { border-color: transparent; background: var(--acento-fraco); color: var(--tinta); }
.filtros a i {
  font-style: normal;
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: inherit;
  font-weight: 600;
  color: var(--neutro);
}
/* a contagem do filtro atual sobe para `--tinta-2`: `--neutro` sobre o
   degrau escolhido fica raspando os 4,5:1 (ARMADILHAS em test_direcao_b) */
.filtros a.atual i { color: var(--tinta-2); }
/* "esperando voce", quando a tela marcar */
.filtros a .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--alerta); }

.paginas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3) var(--espaco-4);
  margin-top: var(--espaco-6);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--borda);
}
.paginas .conta {
  font-family: var(--fonte-numero);
  font-size: var(--letra-2);
  color: var(--neutro);
  font-variant-numeric: var(--algarismos);
}
.paginas .andar { display: flex; gap: var(--espaco-2); }
.paginas .andar a, .paginas .andar span {
  padding: 8px var(--espaco-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 650;
  font-size: var(--letra-3);
  text-decoration: none;
  color: var(--tinta);
  background: var(--papel-2);
  white-space: nowrap;
}
.paginas .andar a:hover { border-color: var(--borda-forte); }
.paginas .andar span { opacity: .4; }
/* [/dono: nucleo] */

/* [dono: conteudo] */
/* --- prévia ------------------------------------------------------------- */

/* A PRÉVIA NÃO GRUDA, E É DE PROPÓSITO.

   Ela era `position: sticky; top: calc(var(--topo-altura) + var(--espaco-2))`,
   e a promessa do grude é "fico à vista enquanto você mexe na outra coluna".
   MEDIDO em 1280x900, na tela de Criar com um post escrito: a caixa tem
   1.029px e a área em que ela pode deslizar tem 1.073px. São 44px de grude --
   meio centímetro, e depois ela sobe junto com o resto, como se não houvesse
   regra nenhuma.

   E mesmo numa página mais longa o grude não funcionaria aqui: com os 80px
   de cabeçalho de hoje sobram 820px de janela, e a caixa tem 1.029px -- a
   conta era a mesma quando o cabeçalho media 140px. Grudada pelo
   topo, o fim dela -- que é justamente onde estão os três campos de
   experimentar -- ficaria fora da tela o tempo todo, sem jeito de chegar lá
   rolando. `position: sticky` é a ferramenta de caixa MENOR que a janela.

   Encurtar a caixa era a outra saída, e custa caro: o que encurta é a arte, e
   a prévia existe para dizer "é assim que vai ao ar". Uma prévia menor que o
   post não diz isso.

   Então some o grude, e fica a promessa que a folha cumpre. No telefone ela
   já sobe para antes do formulário -- ver `@media (max-width: 900px)` lá em
   cima, que é o conserto de verdade do "não vejo o que escrevi". */
.previa-caixa { position: static; }
.previa-caixa img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: var(--raio-1);
  box-shadow: var(--sombra);
}
/* --- posts -------------------------------------------------------------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px,1fr));
  gap: var(--espaco-5) var(--espaco-4);
  align-items: start;
}
.galeria figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}

/* A CAIXA DA ARTE É SEMPRE A MESMA, em todo cartão.
   Story, quadrado e feed têm proporções diferentes. Quando cada cartão tinha a
   altura da própria arte, as legendas de uma mesma fileira começavam em cinco
   alturas diferentes e a grade virava um serrote -- e cartão sem arte, mais
   alto que os outros, abria buraco ao lado. A arte cabe INTEIRA aqui dentro,
   centralizada e sem corte: o formato de verdade continua dito na etiqueta,
   então não há por que deformar a fileira para mostrá-lo. */
/* O POCO DA ARTE (SISTEMA 5.11). A arte mora num poco um degrau ACIMA do
   cartao (`--poco`), com respiro em volta: no escuro, a arte escura do post
   sumia no fundo do mesmo tom. */
.galeria .moldura {
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-1);
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  background: var(--poco);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--aro-arte);
}
/* `object-fit` e nao `max-height`. Com max-height a arte 9:16 nao encolhia --
   a altura em porcentagem nao resolvia contra a linha da grade -- e o story
   saia cortado no pe, comendo a ultima palavra do titulo. MEDIDO.
   CONFERIDO DE NOVO NA B (Etapa 2): o poco do mockup volta para `max-height`,
   e aqui a saida medida continua a de hoje -- a arte INTEIRA, contida, com
   12px de poco em volta. O anel de 1px da B vai para o poco, e nao para a
   imagem: com `contain` a caixa da imagem nao e a arte (sobra faixa nos
   lados do story), e um anel nela desenharia um retangulo vazio. */
.galeria .moldura img {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: contain;
  display: block;
}
.galeria .moldura.vazia { box-shadow: none; }
.galeria figcaption { font-size: var(--letra-3); color: var(--tinta-2); padding: 12px 6px 4px; line-height: 1.4; }
/* Título com DUAS linhas sempre, cheias ou não. Sem isto, um título que vira
   duas linhas empurra só aquele cartão para baixo e a fileira perde a base
   comum -- que é justamente o defeito que a moldura única veio consertar. */
.galeria figcaption strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  color: var(--tinta);
  margin-bottom: 2px;
}
.galeria .cartao-etiquetas { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.galeria .cartao-rodape {
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--neutro);
}

/* --- posts na B (Etapa 5.1, retratos `conteudo-posts` e `celular-posts`) --

   O CARTAO DEIXOU DE SER UM LINK SO. O poco e o titulo levam ao post; os
   fatos abrem num "por que?"; o verde e um terceiro link, so no que espera o
   dono decidir (plano 4.1, C5). Um `<details>` dentro de um `<a>` e HTML
   quebrado, e o toque nele abriria o post em vez dos fatos. */
.posts-filtros-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 24px;
}
.posts-filtros-linha .filtros { margin: 0; }
.posts-ordem { font-size: 13px; font-weight: 500; color: var(--neutro); }
/* O PONTO PALHA dos estados que esperam o dono, no filtro. `::before` e
   atributo, e nao um elemento: o link marcado continua abrindo com
   `class="atual"` e o rotulo. So Posts escreve `data-espera`. */
.filtros a[data-espera]::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--alerta);
}

.posts-cartao {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
/* O cartao que espera o dono tem o fio palha, como o `.anu-cartao-pede`. */
.posts-cartao.pede { border-color: var(--alerta-fio); }
.posts-cartao .moldura { margin: 8px 8px 0; color: inherit; text-decoration: none; }
.posts-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 14px 16px 16px; }
.posts-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.posts-n { font-size: 12.5px; font-weight: 500; color: var(--neutro); font-variant-numeric: var(--algarismos); }
.posts-titulo {
  margin: 10px 0 0;
  font-family: var(--fonte-titulo);
  font-weight: 650;
  font-size: 15.5px;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-wrap: pretty;
  overflow-wrap: break-word;
  /* NO COMPUTADOR O TITULO OCUPA DUAS LINHAS SEMPRE, cheias ou nao: sem isto
     o titulo de uma linha sobe a linha de meta so daquele cartao, e a
     fileira perde a base comum (o serrote que a moldura unica veio
     consertar). Sem corte: o titulo inteiro continua a vista -- o mais longo
     da casa cabe em duas linhas a 1440 (MEDIDO: todo titulo da bancada com
     40,3px). No telefone volta a zero. */
  min-height: 2.6em;
}
/* A primeira letra sobe na folha: o tema do post e escrito em minuscula
   ("o garimpo de segunda"), e o titulo do cartao e titulo. */
.posts-titulo::first-letter { text-transform: uppercase; }
.posts-titulo a { color: var(--tinta); text-decoration: none; }
.posts-titulo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.posts-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--neutro);
  font-variant-numeric: var(--algarismos);
}
/* O custo na ponta: o dinheiro e o que se compara de um cartao para o outro. */
.posts-meta b { flex: none; color: var(--tinta-2); font-weight: 600; white-space: nowrap; }
/* A etiqueta "carrossel" continua no HTML (e o gancho da galeria), vestida
   de texto da linha de meta: a maiuscula sai do `::first-letter` dela. */
.posts-meta .etiqueta {
  padding: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
}
/* `details.` junto: o reset do "por que?" (`details.porque`, no nucleo) zera
   a margem com peso (0,1,1), e uma classe sozinha perdia dele. */
details.posts-fatos { margin-top: 10px; align-self: flex-start; }
.posts-fatos > summary { font-weight: 600; font-size: 12.5px; color: var(--tinta-2); }
.posts-fatos-lista { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.posts-fatos-lista li { position: relative; padding-left: 14px; color: var(--tinta); }
.posts-fatos-lista li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acento-texto);
}
.posts-fatos-lista li span { color: var(--tinta-2); }
.posts-fatos-lista li.posts-fato-sem::before { background: var(--falha); }
/* "SEM LASTRO" FICA A VISTA, em tijolo: e o que prende o post. */
.posts-sem-lastro { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--falha); }
.posts-acao { padding: 0 16px 16px; }
.posts-espera { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--alerta); }
/* O verde na largura inteira do cartao, 42px: o `.largo` da casa e so de
   `button`, e este e o link que leva a decisao. */
.posts-agir { width: 100%; min-height: 42px; }

/* A PILHA DO CARROSSEL EM ROTEIRO (C7): as primeiras telas da previa de
   graca, uma atras da outra, e a frase "nenhuma imagem foi paga" embaixo,
   no proprio poco. A nota aqui e FLUXO, e nao a nota absoluta do nucleo: a
   frase inteira tem de caber tambem no poco de 104px do celular. */
.galeria .moldura.posts-roteiro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px 14px 14px;
}
.galeria .moldura .posts-pilha { position: relative; flex: none; width: 62%; aspect-ratio: 1; }
.galeria .moldura .posts-pilha img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--aro-arte);
}
.galeria .moldura .posts-pilha img:nth-last-child(2) { transform: translate(7px, -7px); filter: brightness(.75); }
.galeria .moldura .posts-pilha img:nth-last-child(3) { transform: translate(14px, -14px); filter: brightness(.55); }
.galeria .moldura.posts-roteiro .poco-nota {
  position: static;
  display: block;
  text-align: center;
  line-height: 1.35;
}
/* A CAIXA DOS FATOS ROLA POR DENTRO. O fato e a frase inteira do Cerebro, e
   o post #3 da bancada tem quatro: a caixa teria 570px a 1440, 591px a 390
   e 717px a 320 (MEDIDO), mais alta que a janela de 740 menos a barra -- e a
   M8 pede a caixa inteira dentro dela. */
.posts-fatos .porque-caixa { max-height: min(440px, 70vh); overflow-y: auto; overscroll-behavior: contain; }

/* --- criar na B (Etapa 5.1) ------------------------------------------------

   POST OU CARROSSEL: dois `<details>` com o mesmo `name` (acordeao
   exclusivo, sem JavaScript), e os dois `summary` desenhados como o segmento
   dos filtros -- um trilho fundo, e o escolhido um degrau acima, sem verde.
   Os `summary` saem do fluxo e sentam lado a lado no alto; o formulario
   aberto ocupa o lugar logo abaixo. O fechado continua no HTML e a um toque:
   nada some com `display: none` (M3). */
.criar-escolha { position: relative; padding-top: 52px; }
.criar-escolha::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 410px;
  height: 42px;
  border-radius: 10px;
  background: var(--chao);
  box-shadow: inset 0 0 0 1px var(--borda);
}
details.criar-tipo { margin: 0; padding: 0; border: 0; }
.criar-tipo > summary {
  position: absolute;
  top: 3px;
  left: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 133px;
  height: 36px;
  padding: 0;
  border-radius: 7px;
  list-style: none;
  color: var(--neutro);
  font-family: var(--fonte-titulo);
  font-variation-settings: normal;
  font-weight: 600;
  font-size: 13.5px;
}
.criar-tipo + .criar-tipo > summary { left: 136px; }
/* O TERCEIRO CAMINHO, "Escrever eu mesmo" (27/10/2026). */
.criar-tipo + .criar-tipo + .criar-tipo > summary { left: 269px; width: 138px; }
.criar-tipo > summary::-webkit-details-marker { display: none; }
.criar-tipo > summary:hover { color: var(--tinta); }
.criar-tipo[open] > summary { background: var(--papel-4); color: var(--tinta); }
.criar-tipo > .bloco { margin-bottom: 0; }
/* O ESTILO DA ARTE com miniatura (era "Receita", 27/10/2026): cada estilo é
   um cartão com o desenho de onde o título fica. */
fieldset.criar-estilos { border: 0; padding: 0; margin: 0 0 var(--espaco-4); min-width: 0; }
.criar-estilos legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.criar-estilos-lista { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.criar-estilo { display: flex; align-items: center; gap: var(--espaco-2);
  padding: 8px 12px 8px 8px; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1); cursor: pointer; font-size: 14px; }
.criar-estilo:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.criar-estilo input { width: auto; margin: 0; }
.criar-estilo span { display: flex; flex-direction: column; line-height: 1.25; }
.criar-estilo small { color: var(--neutro); font-size: 12px; }
.criar-estilo-mini { width: 32px; height: 40px; flex: none; }
.criar-estilo-mini .fundo { fill: var(--papel-4); stroke: var(--borda-forte); }
.criar-estilo-mini .titulo { fill: var(--tinta); }
.criar-estilo-mini .apoio { fill: var(--neutro); }
details.criar-mais { margin: 0 0 var(--espaco-4); }
details.criar-mais > summary { cursor: pointer; font-size: 14px; color: var(--tinta-2); }
details.criar-mais[open] > summary { margin-bottom: var(--espaco-3); }
.criar-sem-ia { margin-bottom: var(--espaco-4); }

/* Os subtitulos do formulario longo ("No post", "O que vai no Gerenciador da
   Meta"): um fio em cima e o nome do grupo, no lugar dos 7 a 12 campos
   seguidos de antes. */
.criar-grupo {
  margin: var(--espaco-5) 0 var(--espaco-3);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--borda);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--tinta);
}
/* A decisao que paga, sob a previa; e o verde do travado que destrava
   respondendo, dentro do aviso. */
.criar-fundo { margin-top: var(--espaco-5); }
.criar-fundo h2 { margin-bottom: var(--espaco-2); }
.criar-fundo .texto-apoio { margin-bottom: var(--espaco-4); }
.criar-responder { margin-top: var(--espaco-2); }
/* O tamanho de cada modelo, no "por que?" logo embaixo do campo. */
details.criar-medidos { margin-top: 6px; }

/* OS FATOS DO CARTAO ENTRE 721 E 1219px: A CAIXA SE ALINHA PELO CARTAO. O
   lado da caixa sai do indice do cartao (`a-direita` nas duas ultimas de
   cada fileira de QUATRO), e a galeria so tem quatro colunas de 1220px para
   cima -- MEDIDO: uma coluna a 721, duas de 800 a 964, tres de 1000 a 1219.
   Nessa faixa a caixa aberta do cartao da direita saia pela borda da janela
   (conferencia da 5.1: 130px cortados a 1000, 97 a 1100, 115 a 800) e a
   pagina ganhava rolagem de lado. Aqui ela se prende ao CARTAO, que nunca
   sai da janela: o `details` deixa de ser a referencia (`position: static`),
   o cartao vira a referencia, e a caixa ocupa a largura dele, a 8px de cada
   borda, ate 380px. `top: auto` a deixa na altura em que nasceria, logo
   embaixo do "N fatos com lastro". O cartao nao ganha `z-index`: a caixa
   continua na camada 30 da pagina.
   A ORDEM DAS DUAS CONDICOES E DE PROPOSITO (o teto antes do piso): a
   `_faixa()` de testes/test_telas_na_moldura_nova.py le a PRIMEIRA consulta
   "min-width ... and max-width" da folha como a faixa de Anuncios, e esta
   vem antes dela -- escrita ao contrario, ela tomava o lugar da faixa e o
   teste das grades cravadas caia (MEDIDO na bateria desta rodada). */
@media (max-width: 1219px) and (min-width: 721px) {
  .posts-cartao { position: relative; }
  details.posts-fatos { position: static; }
  .posts-fatos .porque-caixa,
  .posts-fatos .porque-caixa.a-direita {
    top: auto;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: 380px;
    margin-top: 10px;
  }
}
/* [/dono: conteudo] */
/* [dono: nucleo] */
/* O texto de "por que não há arte", já dentro da moldura de sempre. */
.sem-arte {
  color: var(--neutro);
  font-size: 12.5px;
  text-align: center;
  padding: var(--espaco-4);
  line-height: 1.45;
}

/* A TABELA (SISTEMA 5.12): cabecalho em frase comum e miudo, fio de 1px
   entre as linhas, o numero a direita em `tabular-nums`. A celula e tinta de
   apoio; o que e dado forte vai em `<b>`. */
table { border-collapse: collapse; width: 100%; font-size: 13.5px; line-height: 1.3; }
/* [/dono: nucleo] */
/* [dono: conteudo] */
/* A tabela que não cabe rola dentro da própria caixa, e não leva a página
   inteira para o lado. */
.rolagem { overflow-x: auto; }
/* [/dono: conteudo] */
/* [dono: nucleo] */
/* A data "2026-09-16 12:41" quebrava em três linhas no celular. */
.sem-quebra { white-space: nowrap; }
th, td { text-align: left; padding: 9px var(--espaco-3) 9px 0; border-bottom: 1px solid var(--borda); color: var(--tinta-2); }
td b { color: var(--tinta); font-weight: 650; font-variant-numeric: var(--algarismos); }
/* O cabecalho da tabela em frase comum e miudo (SISTEMA 5.12): a tabela e
   assunto, e o cabecalho so diz de que coluna e. */
thead th {
  padding-bottom: 8px;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  color: var(--neutro);
}
/* A TABELA QUE E O ASSUNTO (o "que este ajuste muda"): dentro de um cartao,
   linha alta. Com dono: `.depois` sozinho ja existe (`.explica.depois`). */
.cartao-tabela { background: var(--papel-2); border: 1px solid var(--borda); border-radius: var(--raio-2); }
.cartao-tabela th[scope=row] { padding: 14px 20px; font-size: 14px; font-weight: 500; color: var(--tinta-2); }
.cartao-tabela td { padding: 14px 8px; font-size: 15px; font-weight: 650; line-height: 1; font-variant-numeric: var(--algarismos); }
.cartao-tabela tr:last-child > * { border-bottom: 0; }
.cartao-tabela .antes { color: var(--neutro); font-weight: 500; text-align: right; }
.cartao-tabela .depois { color: var(--tinta); }
.cartao-tabela .mexido .depois { color: var(--acento-texto); }
.cartao-tabela .ruim { color: var(--falha); font-weight: 600; font-size: 13.5px; }
/* [/dono: nucleo] */
/* [dono: conteudo] */
td.n { text-align: right; font-variant-numeric: var(--algarismos); font-family: var(--fonte-numero); }
/* [/dono: conteudo] */

/* [dono: nucleo] */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* [/dono: nucleo] */

/* [dono: conteudo] */
/* --- o preview em React: o post dentro de um feed falso ------------------ */

.mvp { display: grid; gap: var(--espaco-3); }

.mvp .barra { display: flex; gap: 2px; }
.mvp .aba {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 600;
  font-size: var(--letra-2);
  padding: 6px var(--espaco-3);
  border: 1px solid var(--borda);
  background: var(--papel-2);
  color: var(--neutro);
  border-radius: var(--raio-1);
  cursor: pointer;
}
.mvp .aba.atual { background: var(--papel-3); color: var(--tinta); border-color: var(--borda-forte); }

.mvp .palco { display: flex; justify-content: center; }

/* O VISUALIZADOR DO REEL (29/09/2026), na pagina do post. O video saia com
   `class="arte"` -- a largura da coluna inteira --, e um 9:16 de 700px de
   largura tem 1.244px de altura: o dono nao conseguia ver. O quadro tem a
   altura de um celular na tela (ate 70% da janela, teto de 640px), e
   centrado, e a troca 9:16 / 4:5 e por radio + irmao `~`, sem JavaScript,
   como a tira de formatos do Laboratorio. Um video escondido para de ser
   exibido, nao de tocar: por isso `display: none` e nao `visibility`. */
.reel-palco { position: relative; display: grid; gap: var(--espaco-3); justify-items: center; }
.reel-palco > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.reel-abas { display: flex; gap: 6px; }
.reel-abas label {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 600;
  font-size: var(--letra-2);
  padding: 6px var(--espaco-3);
  border: 1px solid var(--borda);
  background: var(--papel-2);
  color: var(--neutro);
  border-radius: var(--raio-1);
  cursor: pointer;
}
#reel-9x16:checked ~ .reel-abas label[for="reel-9x16"],
#reel-4x5:checked ~ .reel-abas label[for="reel-4x5"] {
  background: var(--papel-3); color: var(--tinta); border-color: var(--borda-forte);
}
.reel-quadro { display: none; max-width: 100%; background: #000; border: 1px solid var(--borda); border-radius: var(--raio-2); overflow: hidden; }
.reel-quadro video { display: block; height: min(70vh, 640px); width: auto; max-width: 100%; background: #000; }
.reel-quadro.reel-9x16 video { aspect-ratio: 9 / 16; }
.reel-quadro.reel-4x5 video { aspect-ratio: 4 / 5; }
#reel-9x16:checked ~ .reel-quadro.reel-9x16,
#reel-4x5:checked ~ .reel-quadro.reel-4x5 { display: block; }

/* o post de feed */
.post {
  width: 100%;
  max-width: 380px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  overflow: hidden;
}
.post .arte, .story .arte { width: 100%; height: auto; display: block; max-width: 100%; }

.perfil { display: flex; align-items: center; gap: 9px; padding: 10px var(--espaco-3); }
.perfil .quem { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.perfil .quem strong { font-size: var(--letra-3); font-weight: 600; }
.perfil .quem span { font-size: 11.5px; color: var(--neutro); }
.perfil .tres { margin-left: auto; color: var(--neutro); letter-spacing: .1em; }
/* O AVATAR DO INSTAGRAM DE MENTIRA NAO E VERDE: na B o verde cheio e so a
   decisao, e o avatar verde era o primeiro "verde" da pagina do post -- a
   sonda da decisao (M4) o achava no lugar do "Aprovar", MEDIDO na bancada. */
.av {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 50%;
  background: var(--papel-4);
  color: var(--tinta);
  display: grid; place-items: center;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 800;
  font-size: 14px;
  text-transform: uppercase;
}

/* A BARRA DE CURTIR, COMENTAR E SALVAR -- a do post falso, e não a do painel.

   Ela se chamava `.acoes`, que é também o nome da fileira de ações do
   CABEÇALHO (web/paginas/base.html). Duas coisas sem nada em comum com o
   mesmo nome na mesma folha: funcionava por sorte, e a sorte já tinha
   acabado uma vez -- a regra abaixo é declarada sem prefixo, então o
   `padding: 10px 12px 6px` dela caía também no cabeçalho, onde `.topo .acoes`
   não o desfazia. Resultado: a borda direita do cabeçalho ficava 12px mais
   para dentro do que a esquerda, sem ninguém ter pedido.

   É a mesma armadilha do `.quando`, que já quebrou o calendário uma vez. Ver
   testes/test_folha_de_estilo.py.

   Ícones desenhados, não glifos de fonte: o de salvar era `U+2337`, que não
   existe nas fontes do sistema e saía como quadrado vazio, e o de comentário
   era emoji colorido ao lado de dois glifos pretos. Numa prévia que existe
   para dizer "é assim que vai ao ar", isso entrega a prévia. */
.feed-acoes { display: flex; gap: 15px; padding: 10px var(--espaco-3) 6px; align-items: center; }
.feed-acoes svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feed-acoes .direita { margin-left: auto; }

.legenda { padding: 2px var(--espaco-3) var(--espaco-1); font-size: var(--letra-3); line-height: 1.45; color: var(--tinta-2); }
.legenda strong { color: var(--tinta); font-weight: 600; }
.legenda .mais { color: var(--neutro); }
.quando { padding: var(--espaco-1) var(--espaco-3) var(--espaco-3); font-size: 11px; color: var(--neutro); text-transform: uppercase; letter-spacing: .04em; }

/* o story, com as faixas que a interface cobre */
.story {
  position: relative;
  width: 100%;
  max-width: 300px;
  border-radius: var(--raio-3);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.story .cobre {
  position: absolute;
  left: 0; right: 0;
  background: rgba(10,12,8,.42);
  backdrop-filter: blur(1px);
  display: flex;
  flex-direction: column;
  color: #F2F1E9;
}
.story .cobre.topo { top: 0; justify-content: flex-start; gap: 10px; padding: 10px var(--espaco-3); }
.story .cobre.base { bottom: 0; justify-content: flex-end; padding: var(--espaco-3); }
.story .barrinhas { display: flex; gap: var(--espaco-1); }
.story .barrinhas i { flex: 1; height: 2px; background: rgba(255,255,255,.55); border-radius: 2px; }
.story .perfil.claro { padding: 0; gap: var(--espaco-2); }
.story .perfil.claro strong { font-size: var(--letra-2); color: #F2F1E9; }
.story .responder {
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 18px;
  padding: var(--espaco-2) var(--espaco-3);
  font-size: var(--letra-2);
  color: rgba(255,255,255,.85);
}

.mvp .nota { margin: 0; font-size: var(--letra-2); line-height: 1.5; color: var(--neutro); }
.mvp .controles { display: grid; gap: 10px; }
.mvp .controles .campo { margin: 0; }
/* [/dono: conteudo] */

/* [dono: casco] */
.estado-linha.claude-fora, .estado-linha.claude-fora b { color: var(--falha); }
/* [/dono: casco] */


/* [dono: nucleo] */
/* --- o relatório de procedência ----------------------------------------- */

details {
  border-top: 1px solid var(--borda);
  padding: var(--espaco-3) 0 0;
  margin-top: var(--espaco-3);
}
details:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
summary {
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 600;
  font-size: 13.5px;
  color: var(--tinta-2);
  padding: var(--espaco-1) 0;
}
summary:hover { color: var(--tinta); }
/* [/dono: nucleo] */

/* [dono: conteudo] */
pre.prompt {
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--papel-3);
  border-radius: var(--raio-1);
  padding: var(--espaco-3) var(--espaco-4);
  margin: var(--espaco-2) 0 0;
  max-height: 420px;
  overflow-y: auto;
  color: var(--tinta-2);
}
/* [/dono: conteudo] */

/* [dono: casa] */
/* --- a portaria --------------------------------------------------------- */

/* A PORTARIA NA B (plano da B, 5.3): o cartao `--papel-2` sobre a pagina,
   fio de 1px, raio de 12 e SEM sombra -- a B so da sombra ao que flutua.
   Continua cartao no telefone, com 16px de calha: e o degrau pagina-cartao
   que a medida da cara (M10) le, e o que o dono ve em toda outra tela. */
body.porta {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background: var(--papel);
}

/* `position: relative` para a gaveta morar no canto do cartao, e SEM
   `z-index`: o cartao nao cria contexto, e a gaveta (21) sobe para a raiz. */
.portaria {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--papel-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  padding: 26px 28px 28px;
}
.portaria.larga { max-width: 720px; }
.portaria .aviso { margin-bottom: var(--espaco-4); }
/* O logotipo em texto da portaria e o do trilho: 800 a 21px, o ponto verde. Eram
   tres `style` escritos a mao no HTML (o logotipo, o titulo e a linha). */
.portaria .logo { display: block; margin: 0 0 18px; font-size: 21px; line-height: 1.2; }
.portaria .titulo-tela { margin: 0 0 8px; }
.portaria-apoio { margin: 0 0 20px; max-width: 52ch; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
/* O convite de uso unico: um aviso neutro, de quem entrou por fora. */
.portaria-convite {
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  background: var(--papel);
  font-size: 13px;
  line-height: 1.45;
  color: var(--tinta-2);
}

/* A PORTARIA EM DUAS COLUNAS (24/10/2026, para o dono aprovar): a tela de
   entrar, o convite e a entrada publica. A esquerda, a VITRINE: o nome do
   painel, a frase em letra grande, no chao da moldura, com os aneis em fio
   de 1px e o ponto verde que corre neles. A direita, o cartao de sempre,
   com o formulario. Tudo vem do produto.yaml (o nome) e dos tokens (a cor):
   nada de marca escrita aqui. No telefone a vitrine vira o cabecalho curto,
   com o nome e uma linha, e o cartao vem logo abaixo. Os aneis, a frase
   longa e a lista curta so existem a partir de 960px: no telefone eles nao
   sao informacao, sao enfeite. */
body.porta:has(> .vitrine) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  place-items: initial;
  align-items: start;
  justify-items: stretch;
  padding: 0;
}
body.porta:has(> .vitrine):has(> .demo-faixa) { grid-template-rows: auto auto minmax(0, 1fr); }
.vitrine {
  position: relative;
  overflow: hidden;
  padding: 28px 16px 20px;
  color: var(--tinta);
}
.vitrine .logo {
  display: inline-block;
  margin: 0;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.035em;
  white-space: normal;
  overflow-wrap: anywhere;
}
.vitrine-titulo {
  margin: 10px 0 0;
  max-width: 30ch;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tinta-2);
}
.vitrine-apoio, .vitrine-fatos, .vitrine-orbita, .vitrine-tuca { display: none; }
.vitrine ~ main.portaria.portaria-entrada {
  justify-self: center;
  width: calc(100% - 32px);
  margin: 0 16px 32px;
  animation: portaria-chega 420ms cubic-bezier(.2, .7, .2, 1) both;
}

/* O CARTAO DA ENTRADA: o selo de cima, o titulo, os campos de 46px e o
   rodape com a linha de quem chega pela primeira vez. */
.portaria-entrada { max-width: 420px; padding: 30px 30px 26px; }
.portaria-entrada .titulo-tela { font-size: 34px; margin: 0 0 8px; }
.portaria-selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pilula);
  background: var(--papel-3);
  font-size: var(--letra-1);
  font-weight: 600;
  color: var(--tinta-2);
}
.portaria-selo .ico { width: 14px; height: 14px; }
.portaria-entrada .campo { margin-bottom: var(--espaco-4); }
.portaria-entrada input[type=email], .portaria-entrada input[type=text],
.portaria-entrada input[type=password] {
  width: 100%;
  min-height: 46px;
  font: 400 15px/1.3 var(--fonte-texto);
  padding: 11px 13px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--papel);
  color: var(--tinta);
  transition: border-color 150ms, box-shadow 150ms;
}
.portaria-entrada input[type=email]:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fraco);
}
.portaria-entrada input[aria-invalid=true] { border-color: var(--falha-fio); }
.portaria-entrada input.digitos { font-size: 22px; }
.portaria-entrada .aviso.erro { margin: 0 0 var(--espaco-4); }
.portaria-entrada .aviso.erro p { color: var(--tinta); }
.portaria-entrada button.grande, .portaria-entrada .botao.grande { margin-top: var(--espaco-2); }
.portaria-entrada .portaria-apoio { margin-bottom: var(--espaco-5); }
/* A SENHA COM O "MOSTRAR" DENTRO DO CAMPO: o botao so aparece com
   JavaScript (o `hidden` sai no script da tela). */
.campo-senha { position: relative; }
.campo-senha .mostrar-senha[hidden] { display: none; }
.portaria-entrada .campo-senha input { padding-right: 96px; }
.campo-senha .mostrar-senha {
  position: absolute;
  top: 7px;
  right: 7px;
  min-height: 32px;
}
.portaria-rodape {
  margin: var(--espaco-5) 0 0;
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--borda);
  font-size: var(--letra-3);
  line-height: 1.5;
  color: var(--tinta-2);
}

@keyframes portaria-chega { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes orbita-gira { to { transform: rotate(360deg); } }

/* A VITRINE NO COMPUTADOR: a coluna da esquerda, no chao, com o fio de 1px
   que a separa do cartao. A frase grande (o rastreio fechado do titulo), a
   linha de apoio, a lista curta embaixo e os aneis atras de tudo, no canto. */
@media (min-width: 960px) {
  body.porta:has(> .vitrine) {
    grid-template-columns: minmax(0, 1.08fr) minmax(480px, 1fr);
    grid-template-rows: minmax(100vh, auto);
  }
  body.porta:has(> .vitrine):has(> .demo-faixa) { grid-template-rows: auto minmax(calc(100vh - 52px), auto); }
  body.porta:has(> .vitrine) > .demo-faixa { grid-column: 1 / -1; }
  .vitrine {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 52px 64px 48px;
    background: var(--chao);
    border-right: 1px solid var(--borda);
  }
  .vitrine-meio { position: relative; z-index: 1; max-width: 560px; }
  .vitrine-titulo {
    margin: 0 0 20px;
    max-width: 13ch;
    font-weight: 800;
    font-size: clamp(44px, 4.6vw, 68px);
    line-height: 1;
    letter-spacing: var(--rastreio-titulo);
    color: var(--tinta);
    text-wrap: balance;
  }
  .vitrine-apoio {
    display: block;
    margin: 0;
    max-width: 40ch;
    font-size: 16px;
    line-height: 1.55;
    color: var(--tinta-2);
  }
  .vitrine-fatos {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--letra-3);
    color: var(--tinta-2);
  }
  .vitrine-fatos li { display: flex; align-items: center; gap: 10px; }
  .vitrine-fatos .ico { flex: none; width: 16px; height: 16px; color: var(--acento-texto); }
  .vitrine-tuca {
    position: absolute;
    right: 48px;
    bottom: 120px;
    width: 300px;
    height: auto;
    pointer-events: none;
  }
  .vitrine-tuca.logo-escuro { display: block; }
  :root[data-tema="claro"] .vitrine-tuca.logo-escuro { display: none; }
  :root[data-tema="claro"] .vitrine-tuca.logo-claro { display: block; }
  .vitrine-orbita {
    display: block;
    position: absolute;
    right: -180px;
    bottom: -170px;
    width: 640px;
    height: 640px;
    pointer-events: none;
  }
  .vitrine ~ main.portaria.portaria-entrada {
    align-self: center;
    width: 100%;
    margin: 48px auto;
  }
}
.vitrine-orbita .anel { fill: none; stroke: var(--borda-forte); stroke-width: 1; }
.vitrine-orbita .anel-fraco { fill: none; stroke: var(--borda); stroke-width: 1; }
.vitrine-orbita .centro { fill: var(--papel-3); stroke: var(--borda-forte); stroke-width: 1; }
.vitrine-orbita .astro { fill: var(--acento); }
.vitrine-orbita .astro-fraco { fill: var(--tinta-2); }
.vitrine-orbita .giro { transform-origin: 320px 320px; animation: orbita-gira 90s linear infinite; }
.vitrine-orbita .giro-lento { transform-origin: 320px 320px; animation: orbita-gira 160s linear infinite reverse; }
@media (prefers-reduced-motion: reduce) {
  .vitrine-orbita .giro, .vitrine-orbita .giro-lento,
  .vitrine ~ main.portaria.portaria-entrada { animation: none; }
}

/* A FAIXA DA DEMONSTRACAO LOCAL (web/modo_demo.py): so existe com
   ESTUDIO_DEMO=1, nesta maquina. No alto de toda tela: o aviso, o seletor
   de quem esta vendo e o Sair. Na moldura e na portaria de duas colunas ela
   entra no fluxo; na portaria de uma coluna ela fica por cima do alto da
   pagina, que desce para dar lugar.
   REDESENHO (27/10/2026): o desenho da faixa de ambiente deles ("modo
   teste"): amarela cheia, letra marrom-escura, e o botao em pilula escura.
   Igual nos dois temas, opaca (no computador ela gruda). */
.demo-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 16px;
  background: var(--faixa-fundo);
  border-bottom: 0;
  color-scheme: light;
  font-size: var(--letra-3);
  color: var(--faixa-tinta);
}
.demo-faixa-texto { margin: 0; flex: 1 1 260px; }
.demo-faixa-trocar, .demo-faixa-sair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; min-width: 0; max-width: 100%; }
.demo-faixa-trocar label { margin: 0; color: var(--faixa-tinta); }
/* o rotulo de cada pessoa e comprido: no telefone o seletor encolhe e
   corta, e a pagina nao rola de lado */
.demo-faixa-trocar select { flex: 1 1 220px; width: auto; min-width: 0; max-width: 100%; min-height: 32px; padding: 4px 12px; border-color: rgba(56, 24, 0, .28); border-radius: var(--raio-pilula); background: rgba(255, 255, 255, .55); color: var(--faixa-tinta); font-size: var(--letra-3); }
.demo-faixa button { border: 0; background: var(--faixa-tinta); color: var(--faixa-fundo); }
.demo-faixa button:hover { background: #4D2400; }
.demo-faixa .fantasma { background: transparent; color: var(--faixa-tinta); text-decoration: underline; text-underline-offset: 3px; }
.demo-faixa .fantasma:hover { background: rgba(56, 24, 0, .10); }
body.porta:not(:has(> .vitrine)) > .demo-faixa { position: absolute; top: 0; left: 0; right: 0; }
body.porta:not(:has(> .vitrine)):has(> .demo-faixa) { padding-top: 140px; }
/* NA MOLDURA DO COMPUTADOR a faixa gruda no alto, numa linha de 48px, e o
   trilho, a barra do alto e o "?" da gaveta descem a altura dela: sem isso
   o "?", que e fixo, ficava por cima do Sair da faixa. No telefone ela entra
   no fluxo, e la a gaveta mora na area. */
@media (min-width: 721px) {
  body:not(.porta) > .demo-faixa { position: sticky; top: 0; z-index: 25; height: 48px; flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
  body:not(.porta) > .demo-faixa .demo-faixa-texto { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:not(.porta) > .demo-faixa .demo-faixa-trocar { flex-wrap: nowrap; }
  body:not(.porta):has(> .demo-faixa) .trilho { top: 48px; height: calc(100vh - 48px); }
  body:not(.porta):has(> .demo-faixa) .barra-alta { top: 48px; }
  body:not(.porta):has(> .demo-faixa) details.ajuda { top: calc(48px + (var(--topo-altura) - 32px) / 2); }
}

/* A GAVETA DA PORTARIA: o "?" de 36px no canto do cartao, em QUALQUER
   largura -- no computador o botao da moldura mora na barra do alto, e a
   portaria nao tem barra. O rotulo sai da vista por recorte, e nao por
   `display: none`, como no telefone (o leitor de tela continua lendo). */
.portaria > details.ajuda { position: absolute; top: 20px; right: 20px; }
.portaria > .ajuda > summary {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-botao);
}
.portaria > .ajuda > summary .ico { width: 18px; height: 18px; }
.portaria > .ajuda > summary .ajuda-rotulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* O CODIGO DE SEIS DIGITOS NA LETRA DA CASA: Archivo larga (116%) e com
   algarismos de mesma largura. Ele era a monoespacada do navegador. O
   espaco entre os digitos e legibilidade, e nao caixa alta espacada. O
   recuo do tamanho do espaco devolve o centro: o espaco tambem sobra
   depois do ultimo digito. */
input.digitos {
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-stretch: var(--largura-numero);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .2em;
  text-indent: .2em;
  text-align: center;
}

/* OS TRES PASSOS pelo numero, num circulo, ao lado do titulo: era a
   sobrelinha "PASSO 1" em caixa alta. */
.passos { display: grid; gap: var(--espaco-6); }
.passos section { border-top: 1px solid var(--borda); padding-top: 24px; }
.passos section:first-child { border-top: 0; padding-top: 0; }
.passos h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--fonte-titulo);
  font-variation-settings: normal;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.passo-numero {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--papel-3);
  box-shadow: inset 0 0 0 1px var(--borda-forte);
  font-weight: 750;
  font-size: 15px;
  font-stretch: var(--largura-numero);
  font-variant-numeric: var(--algarismos);
  color: var(--tinta);
}
.passos p { margin: 0 0 var(--espaco-3); font-size: 14px; color: var(--tinta-2); }

/* O QR MANTEM O FUNDO BRANCO, tambem no escuro: o leitor do celular precisa
   do contraste (SISTEMA 0: um dos tres lugares com cor escrita a mao). */
.qr {
  display: block;
  background: #fff;
  padding: var(--espaco-3);
  border-radius: var(--raio-2);
  image-rendering: pixelated;
}

/* O segredo e o aviso de "so agora" em miudo, SEM `!important`: o seletor
   com `.passos` ja vence `.passos p`. O aviso de que os codigos so aparecem
   agora sai em palha -- e perda que nao volta. */
.passos .segredo { margin: var(--espaco-3) 0 0; font-size: 12.5px; color: var(--neutro); }
.passos .portaria-unica { margin: var(--espaco-2) 0 0; font-size: 13px; color: var(--alerta); }
.segredo code, .resgates code {
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  background: var(--papel-3);
  padding: 2px 6px;
  border-radius: var(--raio-selo);
  color: var(--tinta);
  user-select: all;
}
/* O SEGREDO QUEBRA A LINHA. Na letra proporcional da B os 32 caracteres do
   segredo medem de 249 a 272px, conforme o sorteio (W e M sao largos), e sem
   ponto de quebra o `<code>` empurrava o cartao para fora da janela. MEDIDO a
   320px, em 12 aberturas: ate 30px de rolagem lateral e o cartao a -28px da
   borda direita (antes da B, com a letra de maquina, eram 10px). O segredo e
   base32 (sem 0 nem 1), entao cortar em qualquer ponto nao confunde caractere,
   e o `user-select: all` copia os 32 inteiros. `anywhere`, e nao
   `break-word`: so ele entra na largura minima do cartao. */
.segredo code { overflow-wrap: anywhere; }

.resgates {
  list-style: none;
  margin: 0 0 var(--espaco-2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--espaco-2);
}
.resgates code {
  display: block;
  padding: var(--espaco-2);
  border-radius: var(--raio-1);
  font-size: var(--letra-3);
  text-align: center;
}

/* NO TELEFONE o cartao continua cartao, com 16px de calha dos dois lados, e
   o pe da gaveta nao reserva a barra de baixo: a portaria nao tem barra. */
@media (max-width: 720px) {
  body.porta { padding: 16px; }
  .portaria { padding: 22px 20px 24px; }
  .portaria .ajuda-painel { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
}
/* [/dono: casa] */

/* [dono: conteudo] */
/* --- o calendário editorial ---------------------------------------------
   POR SEMANA, e não por mês. A pauta é semanal e são umas sete marcações: uma
   grade de mês seriam 42 células para mostrar 7, e a primeira versão entregou
   exatamente isso -- 85% de vazio, quatro linhas inteiras sem nada.

   As classes levam prefixo `cal-`. A primeira versão usou `.quando`, que JÁ
   EXISTIA no post falso com padding de 12px e caixa alta, e a grade saiu
   torta. Nome genérico em folha única colide, e a colisão não avisa. */

/* O PEDIDO DA PAUTA mora na cabeca da casa (direcao B): o numero de dias e o
   verde numa fileira, e embaixo, em miudo, o que isso custa -- nada. */
.cal-pedir {
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px var(--espaco-2);
  align-items: center;
}
.cal-pedir select { width: auto; }
.cal-custo { grid-column: 1 / -1; justify-self: end; font-size: var(--letra-2); color: var(--neutro); }
/* A faixa "esperando" subiu para logo depois da contagem: o respiro dela. */
.cal-esperando { margin-top: var(--espaco-5); }
/* A PAUTA COMO AJUDA (27/10/2026): fechada, embaixo do título. */
details.cal-sugerir { margin: 0 0 var(--espaco-4); }
details.cal-sugerir, details.bloco.post-detalhes { padding-top: var(--espaco-3);
  padding-bottom: var(--espaco-3); }
details.cal-sugerir > summary { cursor: pointer; font-weight: 650; }
details.cal-sugerir .cal-pedir { margin-top: var(--espaco-3); justify-content: start; }
.cal-pedir .texto-apoio, .cal-pedir .texto-mini { grid-column: 1 / -1; margin: 0; }
/* MARCAR, MUDAR E TIRAR em cada dia (27/10/2026). */
.cal-item { display: flex; flex-direction: column; gap: 2px; }
.cal-mudar > summary, .cal-novo > summary { cursor: pointer; font-size: 12px;
  color: var(--neutro); list-style: none; }
.cal-mudar > summary::-webkit-details-marker,
.cal-novo > summary::-webkit-details-marker { display: none; }
.cal-novo > summary { color: var(--acento-texto); font-weight: 600; }
.cal-marcar { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cal-marcar label { display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: var(--tinta-2); }
.cal-marcar input, .cal-marcar select { width: 100%; min-width: 0; }
.cal-tirar { margin-top: 6px; }

.cal-placar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
  padding: var(--espaco-3) 0 var(--espaco-1);
  font-size: var(--letra-3);
  color: var(--tinta-2);
}
.cal-conta { display: flex; align-items: center; gap: 7px; }
.cal-conta b { color: var(--tinta); font-variant-numeric: var(--algarismos); }

/* A COR DE CADA ESTADO E A DO SELO DE POSTS (plano 4.1, SELO_PALHA e
   SELO_VERDE em posts.html): palha o que espera o dono ou esta preso, verde
   de ler (o do texto, e nao o cheio da decisao) o que ja andou, neutro o
   resto. Era o mapa de antes: o roteiro e o "no ar" em cinza, o "pronto" em
   verde cheio e o travado em tijolo -- o carrossel #4 da bancada saia palha
   em Posts e cinza aqui (conferencia da 5.1). Um teste compara os dois mapas
   (test_telas_de_conteudo.py). */
.cal-ponto {
  width: var(--espaco-2); height: var(--espaco-2); border-radius: 50%;
  display: inline-block;
  background: var(--neutro);
  flex: 0 0 var(--espaco-2);
}
.cal-ponto.aguardando { background: var(--alerta); }
.cal-ponto.roteiro    { background: var(--alerta); }
.cal-ponto.alteracao  { background: var(--alerta); }
.cal-ponto.travada    { background: var(--alerta); }
.cal-ponto.aprovada   { background: var(--acento-texto); }
.cal-ponto.publicada  { background: var(--acento-texto); }

.cal-semana { margin-top: var(--espaco-6); }
.cal-semana h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-4);
  color: var(--tinta);
  margin: 0 0 var(--espaco-2);
}
.cal-semana h2 span {
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  letter-spacing: 0;
  text-transform: none;
  color: var(--neutro);
}
.cal-semana h2 em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--fonte-texto);
  font-size: var(--letra-2);
  letter-spacing: 0;
  text-transform: none;
  color: var(--neutro);
}

.cal-faixa {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--espaco-2);
  align-items: start;
}

.cal-dia {
  background: var(--papel-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  padding: var(--espaco-2) 9px 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 62px;
}
/* Dia sem nada não merece altura: ele só marca o ritmo da semana. */
.cal-dia.vazio { min-height: 0; background: transparent; border-style: solid; }
/* MEDIDO: a .4 o rótulo do dia ficava a 1,63:1 -- praticamente
   invisível. Passado merece recuar, não sumir. */
.cal-dia.passado { opacity: .62; }
/* Hoje ganha borda cheia mesmo estando vazio: a regra de dia vazio vem antes
   e tracejaria justamente o dia que mais importa. */
.cal-dia.hoje {
  border: 1px solid var(--acento);
  border-style: solid;
  background: var(--acento-fraco);
}
.cal-dia.hoje .cal-numero-dia {
  color: var(--tinta);
  font-variation-settings: "wght" 700;
}
.cal-hoje {
  margin-left: auto;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-2);
  color: var(--acento-texto);
}

.cal-numero { display: flex; align-items: baseline; gap: 6px; }
.cal-semana-dia {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 600;
  font-size: var(--letra-2);
  color: var(--tinta-2);
}
.cal-numero-dia {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: 16px;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: var(--algarismos);
}
.cal-dia.vazio .cal-numero-dia {
  font-variation-settings: "wght" 500;
  color: var(--neutro);
}
.cal-virou-mes {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-2);
  color: var(--acento-texto);
}

.cal-slot {
  display: block;
  text-decoration: none;
  border-left: 3px solid var(--neutro);
  background: var(--papel);
  border-radius: 0 var(--raio-1) var(--raio-1) 0;
  padding: 6px var(--espaco-2);
  color: var(--tinta-2);
}
/* SÓ O SLOT QUE LEVA A ALGUM LUGAR ACENDE. O dia com post é `<a>`; o dia só
   planejado virou `<div>`, porque não há post para abrir. Pintar o fundo dos
   dois no passar do mouse promete clique onde não há nenhum -- e o dedo, que
   não tem "passar por cima", descobre isso clicando. */
a.cal-slot:hover { background: var(--papel-3); }
/* O fio do slot segue o mesmo mapa do ponto, logo acima. */
.cal-slot.aguardando { border-left-color: var(--alerta); }
.cal-slot.roteiro    { border-left-color: var(--alerta); }
.cal-slot.alteracao  { border-left-color: var(--alerta); }
.cal-slot.travada    { border-left-color: var(--alerta); }
.cal-slot.aprovada   { border-left-color: var(--acento-texto); }
.cal-slot.publicada  { border-left-color: var(--acento-texto); }

.cal-linha-um { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-hora {
  font-family: var(--fonte-numero);
  font-size: 11px;
  color: var(--neutro);
  font-variant-numeric: var(--algarismos);
}
.cal-tipo {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: 11.5px;
  color: var(--tinta);
}
.cal-tema {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.35;
}
.cal-seu {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 600;
  font-size: 11px;
  color: var(--tinta-2);
  border: 1px solid var(--borda);
  border-radius: 2px;
  padding: 0 var(--espaco-1);
}

/* No celular sete colunas nao cabem. Vira lista. O DIA SEM NADA NAO SOME
   MAIS (direcao B, "nada escondido no celular"): ele vira uma linha fina, so
   com o dia da semana e o numero -- a semana continua com os sete dias, e o
   ritmo dela fica a vista. MEDIDO a 390x844: as duas semanas da bancada tem
   9 dias vazios, cada um uma linha de 26px (32 com o vao); a pagina vai de
   1.562 para 1.854px. A classe `vazio` vem do servidor, e nao de :has(). */
@media (max-width: 860px) {
  .cal-faixa { grid-template-columns: 1fr; gap: 6px; }
  .cal-dia.vazio { padding-top: 3px; padding-bottom: 3px; }
  .cal-numero { gap: var(--espaco-2); }
}
/* [/dono: conteudo] */

/* [dono: anuncios] */
/* --- anúncios ----------------------------------------------------------- */
/* O placar, a ficha, a lista de linhas e o briefing da tela antiga de
   Anuncios moravam aqui, e sairam na Etapa 7 da B: nenhum template os
   escrevia mais. Fica a volta, que e do vocabulario da casa. */
.volta { margin: 0 0 var(--espaco-2); font-size: var(--letra-3); }
.volta a { text-decoration: none; }
/* O ACRESCENTAR ANUNCIO na ficha (19/10/2026): a lista do que falta subir */
.anu-acrescentar { display: grid; gap: 8px; margin: 12px 0; }
/* O PLANO (20/10/2026): a linha do planejamento estrategico, no lugar da
   Linha. A cor da regra de verba e o unico destaque da tela; o resto e tinta. */
.pla-regra { position: relative; padding-left: 22px; }
.pla-regra::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--raio-2) 0 0 var(--raio-2); background: var(--borda-forte); }
.pla-regra.pla-verde::before { background: var(--acento); }
.pla-regra.pla-amarelo::before { background: var(--alerta); }
.pla-regra.pla-vermelho::before { background: var(--falha); }
.pla-regra-rot { margin: 0; font-size: var(--letra-3); color: var(--neutro); }
.pla-regra-cor { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; font: 750 var(--letra-6, 26px)/1.1 var(--fonte-titulo); }
.pla-luz { width: 12px; height: 12px; border-radius: 50%; background: var(--borda-forte); flex: none; }
.pla-verde .pla-luz { background: var(--acento); }
.pla-amarelo .pla-luz { background: var(--alerta); }
.pla-vermelho .pla-luz { background: var(--falha); }
.pla-regra-frase { margin: 0 0 12px; max-width: 70ch; color: var(--tinta-2); }
.pla-faixas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: var(--letra-3); color: var(--neutro); }
.pla-faixas li { display: flex; align-items: baseline; gap: 6px; }
.pla-faixas li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.pla-f-verde::before { background: var(--acento); }
.pla-f-amarelo::before { background: var(--alerta); }
.pla-f-vermelho::before { background: var(--falha); }
.pla-faixas b { color: var(--tinta-2); }

.pla-sub { margin: 0 0 2px; font: 700 var(--letra-5)/1.25 var(--fonte-titulo); letter-spacing: -.01em; }
.pla-sub-nota { margin: 0 0 var(--espaco-4); color: var(--neutro); font-size: var(--letra-3); max-width: 80ch; }
.pla-linha-secao { margin: var(--espaco-7) 0 var(--espaco-6); }
.pla-linha { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pla-fase { position: relative; display: grid; gap: 2px; padding: 0 10px 0 0; }
.pla-fase::before { content: ""; position: absolute; left: 30px; right: 0; top: 14px; height: 2px; background: var(--borda); }
.pla-fase:last-child::before { content: none; }
.pla-fase.pla-feita::before { background: var(--acento); }
.pla-no { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 750 13px/1 var(--fonte-titulo); background: var(--papel-3); color: var(--neutro); box-shadow: inset 0 0 0 1px var(--borda-forte); margin-bottom: 6px; }
.pla-feita .pla-no { background: var(--acento); color: var(--tinta-do-acento); box-shadow: none; }
.pla-agora .pla-no { background: var(--papel); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--acento); }
.pla-atrasada .pla-no { box-shadow: inset 0 0 0 2px var(--alerta); color: var(--tinta); }
.pla-fase-nome { font-weight: 700; color: var(--tinta); }
.pla-depois .pla-fase-nome { color: var(--tinta-2); }
.pla-fase-quando, .pla-fase-conta { font-size: var(--letra-3); color: var(--neutro); }
.pla-agora .pla-fase-conta { color: var(--acento-texto); }

.pla-fase-caixa { margin-bottom: var(--espaco-3); }
.pla-fase-caixa > summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; cursor: pointer; list-style: none; }
.pla-fase-caixa > summary::-webkit-details-marker { display: none; }
.pla-caixa-titulo { font: 700 var(--letra-4, 17px)/1.3 var(--fonte-titulo); }
.pla-caixa-quando { font-size: var(--letra-3); color: var(--neutro); }
.pla-fase-caixa.pla-depois { background: var(--papel); }
.pla-porque { margin: 10px 0 4px; color: var(--tinta-2); }
.pla-marcos { margin: 8px 0 0; padding: 0; list-style: none; }
.pla-marco { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--borda); }
.pla-m-estado { font-size: 12.5px; font-weight: 650; color: var(--neutro); }
.pla-m-feito .pla-m-estado { color: var(--acento-texto); }
.pla-m-em_curso .pla-m-estado { color: var(--alerta); }
.pla-m-texto { display: grid; gap: 2px; }
.pla-m-feito .pla-m-texto b { color: var(--tinta-2); text-decoration: line-through; text-decoration-color: var(--borda-forte); }
.pla-m-fecha { font-size: var(--letra-3); color: var(--neutro); }
.pla-m-quem { font-size: var(--letra-3); color: var(--neutro); text-align: right; }

.pla-metas { margin-top: var(--espaco-6); }
.pla-tabela-rola { overflow-x: auto; }
.pla-tabela { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: var(--algarismos); }
.pla-tabela th, .pla-tabela td { padding: 9px 10px; text-align: left; border-top: 1px solid var(--borda); white-space: nowrap; }
.pla-tabela thead th { border-top: 0; font-size: var(--letra-3); font-weight: 600; color: var(--neutro); }
.pla-tabela tbody th { font-weight: 600; color: var(--tinta); white-space: normal; }
.pla-tabela td { color: var(--tinta-2); }
.pla-hoje b { color: var(--tinta); }
.pla-sem { color: var(--neutro); font-size: 12.5px; }
.pla-fim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4); margin-top: var(--espaco-4); }
.pla-fim .anu-painel { margin: 0; }
.pla-visao p { margin: 6px 0 0; color: var(--tinta-2); }
.pla-decisoes ol { margin: 8px 0 0; padding-left: 20px; color: var(--tinta-2); }
.pla-decisoes li + li { margin-top: 4px; }
.pla-pe { margin: var(--espaco-5) 0 0; }
@media (max-width: 720px) {
  .pla-linha { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pla-fase { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 0 0 14px; }
  .pla-fase::before { left: 14px; right: auto; top: 30px; bottom: 0; width: 2px; height: auto; }
  .pla-no { grid-row: span 3; margin: 0; }
  .pla-marco { grid-template-columns: minmax(0, 1fr); }
  .pla-m-quem { text-align: left; }
  .pla-fim { grid-template-columns: minmax(0, 1fr); }
}
/* [/dono: anuncios] */

/* [dono: conteudo] */
.rotulo-lado {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-3);
  color: var(--tinta-2);
  margin-bottom: 3px;
}

.titulo-secao {
  color: var(--tinta-titulo);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--letra-5);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 var(--espaco-3);
}
/* [/dono: conteudo] */

/* [dono: nucleo] */
/* --- a dobra: formulário que só abre quando alguém quer ------------------ */

/* Fechada, é um botão modesto -- não uma faixa da largura da tela para um
   rótulo de duas palavras. Criar campanha e criativo é ação ocasional: ela não
   pode competir com o que a tela existe para mostrar. */
.dobra { margin-top: 40px; }
/* O `summary` da dobra e o BOTAO NEUTRO da casa (SISTEMA 5.7), nas duas
   frentes: abrir um formulario nao e a decisao, e o "+" nao e verde. */
.dobra > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  cursor: pointer;
  min-height: 38px;
  padding: 9px 15px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-botao);
  background: var(--anu-controle);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-botao);
  line-height: 1.2;
  color: var(--tinta);
  list-style: none;
}
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > summary::before {
  content: "+";
  color: var(--tinta-2);
  font-weight: 700;
}
.dobra > summary:hover { background: var(--papel-4); }
.dobra[open] > summary { margin-bottom: var(--espaco-3); }
.dobra[open] > summary::before { content: "\2212"; }

.dobra-corpo {
  padding: var(--espaco-5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
.dobra-corpo .campo:last-of-type { margin-bottom: var(--espaco-4); }

/* O MOMENTO (SISTEMA 5.10): o cartao da decisao, quando a tela inteira gira
   em torno dela ("Esta campanha ainda nao tem plano de midia"). Um por tela,
   no maximo. SEM `overflow: hidden`: o "por que?" que mora dentro dele e uma
   caixa flutuante, e seria cortada -- por isso a volta repete o raio. */
.momento {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  margin-bottom: 52px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-palco);
  background: var(--papel-2);
}
.momento h2 {
  margin-top: 18px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: var(--letra-momento);
  line-height: 1.1;
  letter-spacing: -.018em;
  max-width: 21ch;
  text-wrap: balance;
}
.momento-volta {
  padding: 30px 32px;
  background: var(--papel);
  border-left: 1px solid var(--borda);
  border-radius: 0 var(--raio-palco) var(--raio-palco) 0;
}
/* [/dono: nucleo] */

/* [dono: anuncios] */
.mudar-estado > div { display: flex; gap: var(--espaco-2); align-items: center; }
.mudar-estado select { max-width: 220px; }
.mudar-estado small {
  display: block;
  margin-top: var(--espaco-2);
  font-size: var(--letra-2);
  color: var(--neutro);
  max-width: 52ch;
}

.limites ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  /* 12,5px era o último literal de tamanho desta tela. */
  font-size: var(--letra-2);
  color: var(--neutro);
}
.limites li { margin-bottom: 3px; }
.limites b { color: var(--tinta-2); }
/* [/dono: anuncios] */

/* [dono: conteudo] */
.no-ar { display: flex; align-items: center; gap: var(--espaco-2); margin: 0 0 var(--espaco-2); font-size: 14px; color: var(--tinta-2); }

/* --- aviso de área em construção -----------------------------------------
   Diz o que JÁ funciona e o que não existe, em vez de só pendurar um rótulo:
   rótulo sozinho não informa o que esperar. */
.em-obras {
  display: flex;
  gap: var(--espaco-3);
  align-items: flex-start;
  padding: var(--espaco-3) var(--espaco-4);
  margin: 0 0 var(--espaco-5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--alerta-fraco);
}
.em-obras p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 76ch;
}
.em-obras .etiqueta { flex: none; margin-top: 1px; }

/* --- desempenho --------------------------------------------------------- */

/* Os três números que o dono olha primeiro. Tile de número grande só se
   justifica quando o número É o assunto da tela -- aqui é. */
.numerao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espaco-3) 40px;
  padding: var(--espaco-4) var(--espaco-5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
  margin-bottom: var(--espaco-5);
}
.numerao > div { display: flex; flex-direction: column; }
/* O NUMERO GRANDE (SISTEMA 5.13): LARGO (116%), pesado, e se le de longe. */
.numerao b {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 36px;
  font-stretch: var(--largura-numero);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--tinta-titulo);
  font-variant-numeric: var(--algarismos) lining-nums;
}
.numerao span {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-3);
  color: var(--tinta-2);
  margin-top: 6px;
}
.numerao .quando-coletou {
  margin-left: auto;
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--neutro);
  align-self: flex-end;
}

/* A curva é desenhada com os pontos que existem, e só com eles: dia sem coleta
   não vira zero, então a linha simplesmente não passa por ali. */
.curva {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  margin-bottom: var(--espaco-2);
}
.curva svg {
  flex: 1;
  height: 60px;
  min-width: 0;
  overflow: visible;
}
.curva polyline {
  fill: none;
  stroke: var(--acento-texto);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.curva .rotulo-lado { flex: none; margin: 0; max-width: 14ch; }
.curva .extremos {
  flex: none;
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--neutro);
}
.curva .extremos b { color: var(--tinta-2); }

.sem-numero { font-size: var(--letra-2); color: var(--neutro); font-style: italic; }

/* A linha de desempenho tem forma PRÓPRIA, e não a da campanha: ali são três
   contadores fixos e uma etiqueta; aqui é um número de métricas que muda com o
   que a Meta devolveu naquele dia. Emprestar a grade de lá jogava a quarta
   métrica para uma segunda fileira, fora de qualquer coluna. */
.lista-desempenho { display: flex; flex-direction: column; gap: var(--espaco-2); }

.peca-desempenho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3) var(--espaco-5);
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
.peca-nome { min-width: 0; flex: 1 1 22ch; }
.peca-nome strong {
  display: block;
  font-size: var(--letra-4);
  color: var(--tinta);
  margin-bottom: 2px;
}
.peca-nome small {
  display: block;
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--neutro);
}

.numeros { display: flex; flex-wrap: wrap; gap: 10px var(--espaco-5); }
.numero { min-width: 76px; text-align: right; }
.numero b {
  display: block;
  font-family: var(--fonte-numero);
  font-size: 14px;
  color: var(--tinta);
  font-variant-numeric: var(--algarismos);
}
.numero small {
  display: block;
  font-size: var(--letra-2);
  color: var(--neutro);
}
/* DESEMPENHO NA B (Etapa 5.1): o apoio na cabeca da casa, e o titulo da
   secao com o "por que?" da metrica ausente ao lado -- eram dois `style=`
   escritos a mao no HTML (a margem do titulo e a da secao). */
.cabeca-texto > .texto-apoio { margin-top: 10px; }
.desempenho-secao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--espaco-4);
  margin: var(--espaco-6) 0 var(--espaco-3);
}
.desempenho-secao .titulo-secao { margin: 0; }

/* --- carrossel ---------------------------------------------------------- */

.explica { margin: 0 0 var(--espaco-3); font-size: 14px; color: var(--tinta-2); max-width: 62ch; }
.explica.depois { margin: var(--espaco-3) 0 0; font-size: var(--letra-3); color: var(--neutro); }

/* O próximo passo e o botão dele na mesma faixa: o estado do carrossel diz o
   que falta, e quem lê não precisa procurar onde clicar. */
.proximo-passo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3) var(--espaco-5);
}
.proximo-passo > div { flex: 1 1 36ch; min-width: 0; }
.proximo-passo form { flex: none; }

.roteiro-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-1) var(--espaco-4);
}
.roteiro-cabeca h2 { margin: 0; }
.roteiro-cabeca .rotulo-lado { margin: 0; }

/* Uma tela por linha, na ordem em que o carrossel é lido: a arte de um lado, o
   texto dela do outro. Separadas por fio, e não por cartão -- são partes de uma
   mesma coisa, e dez cartões empilhados diriam o contrário. */
.tela-roteiro {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--espaco-5);
  padding: var(--espaco-5) 0;
  border-top: 1px solid var(--borda);
}
.roteiro-cabeca + .tela-roteiro { margin-top: var(--espaco-3); }
.tela-roteiro:last-of-type { padding-bottom: var(--espaco-1); }
.tela-imagem { margin: 0; }
.tela-imagem img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--raio-1);
  background: var(--papel-3);
  box-shadow: var(--sombra);
}
.tela-imagem figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--espaco-2);
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--neutro);
}
.tela-texto { min-width: 0; }
.tela-papel {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0 0 3px;
  font-family: var(--fonte-titulo);
  font-size: var(--letra-4);
}
.tela-papel b { font-variation-settings: "wght" 700; }
.tela-funcao { margin: 0 0 var(--espaco-4); font-size: var(--letra-3); color: var(--neutro); max-width: 60ch; }

.refazer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-3);
  margin-top: var(--espaco-3);
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--borda);
}
.refazer small { font-size: var(--letra-2); color: var(--neutro); flex: 1 1 24ch; }

.tela-lida {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--espaco-2) var(--espaco-4);
  margin: 0;
  font-size: 14px;
}
.tela-lida dt {
  padding-top: 1px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-3);
  color: var(--tinta-2);
}
.tela-lida dd { margin: 0; color: var(--tinta); }

.texto-lido { margin: 0 0 10px; font-size: 14px; color: var(--tinta-2); white-space: pre-line; }
.texto-lido:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .tela-roteiro { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-3); }
  .tela-imagem { max-width: 320px; }
}

/* O sinal de carrossel no canto da galeria, como o próprio Instagram marca. Fica
   sobre a ARTE, e não sobre o papel: por isso o véu escuro fixo nos dois temas. */
.galeria .pilha {
  position: absolute;
  top: var(--espaco-2);
  right: var(--espaco-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: 3px 7px;
  border-radius: 2px;
  background: rgba(16, 19, 9, .74);
  color: #F1F0E6;
  font-family: var(--fonte-numero);
  font-size: 11px;
  font-variant-numeric: var(--algarismos);
}
.galeria .pilha svg {
  width: var(--espaco-3);
  height: var(--espaco-3);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
/* [/dono: conteudo] */

/* [dono: casa] */
/* A prova que o dono mandou, na lista do Cerebro e na aba de ja respondidos.
   Antes so o nome aparecia, em texto puro, e o arquivo sumia de vista depois
   de gravado: nao havia link nenhum para ele em tela nenhuma.
   NA B A MINIATURA MORA NUM POCO (SISTEMA 5.11), como a arte na galeria de
   posts: um degrau ACIMA do cartao, com o aro de 1px, e a imagem INTEIRA
   dentro (`contain`) -- um print cortado ao meio nao prova nada. */
.prova-mini {
  display: block;
  width: 72px;
  height: 72px;
  padding: 5px;
  object-fit: contain;
  border: 0;
  border-radius: var(--raio-1);
  background: var(--poco);
  box-shadow: 0 0 0 1px var(--aro-arte);
}

/* "Nao resolveu", nos ja respondidos: a linha e estreita, entao o campo da
   critica e curto e o botao nao quebra. O botao e o pequeno da casa. */
.reabrir { display: flex; gap: var(--espaco-2); align-items: center; }
.reabrir input[type=text] { width: 16ch; min-height: 32px; font-size: var(--letra-3); padding: 5px var(--espaco-2); }
.reabrir button { white-space: nowrap; }
/* [/dono: casa] */

/* [dono: nucleo] */
/* --- as utilidades -------------------------------------------------------

   São 91 estilos escritos à mão dentro do HTML, e quase todos são a MESMA
   meia dúzia de coisas repetidas: um parágrafo de apoio, uma fileira de
   etiquetas, um link sem sublinhado. Estas classes existem para que as telas
   da fase seguinte troquem `style="..."` por um nome -- e para que mudar a cor
   do texto de apoio volte a ser uma linha, e não 24. */

/* O parágrafo de apoio: o que explica a caixa em que está. */
.texto-apoio { margin: 0; font-size: 14px; color: var(--tinta-2); max-width: 74ch; }
/* A nota miúda embaixo de um campo ou de um botão. */
.texto-mini { display: block; margin-top: var(--espaco-2); font-size: var(--letra-2); color: var(--neutro); }
/* A CÉLULA DE RÓTULO de uma tabela de ficha ("tema", "modelo", "estado").
   Faltava, e por isso sobraram quatro `style="color:var(--neutro)"` no
   carrossel: `.texto-apoio` e `.texto-mini` não servem para um `<td>` --
   a segunda é `display: block`, e num `<td>` isso arrebenta a linha da
   tabela. A largura de 1% com `nowrap` é o jeito de dizer "esta coluna é do
   tamanho da palavra": a outra fica com todo o resto. */
.celula-rotulo { width: 1%; white-space: nowrap; color: var(--neutro); }
/* A mesma nota, quando ela é má notícia. */
.texto-falha { display: block; margin-top: var(--espaco-2); font-size: var(--letra-2); color: var(--falha); }
/* Texto do Python com quebra de linha dentro: a quebra tem que aparecer. */
.pre-linha { white-space: pre-line; }
/* O link que envolve um cartão inteiro e não quer parecer link. */
.limpo { text-decoration: none; color: inherit; }
/* Uma fileira de coisas pequenas (etiquetas, botões) que quebra sozinha. */
.itens { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); }
/* A mesma fileira, com o que está na ponta empurrado para a outra margem. */
.itens-aberto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
}
/* O título de uma seção dentro da tela, abaixo do título da tela. */
.subtitulo {
  color: var(--tinta-titulo);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--letra-5);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: var(--espaco-7) 0 var(--espaco-3);
}
.subtitulo small { font-size: 13px; font-weight: 500; color: var(--neutro); letter-spacing: 0; }
/* Espaço em cima, quando o que separa é só o ar. */
.folga { margin-top: var(--espaco-5); }
.sem-margem { margin: 0; }
/* A unidade do numero grande ("por dia"): miuda, e na largura do texto, para
   o numero largo nao arrastar a palavra junto (SISTEMA 5.13). */
.unidade { margin-left: 4px; font-size: .5em; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--neutro); }
/* [/dono: nucleo] */

/* [dono: casco] */
/* --- celular -------------------------------------------------------------

   MEDIDO a 390 x 844 (iPhone 12/13/14), que é o telefone do dono. */

@media (max-width: 720px) {
  :root {
    --margem-lateral: 16px;
    /* o titulo da tela e o do cartao da decisao, no celular (SISTEMA 3.2) */
    --letra-6: 26px;
    --letra-momento: 22px;

    /* AQUI NÃO HÁ CABEÇALHO GRUDADO, ENTÃO A ALTURA DELE É ZERO.

       `--topo-altura` não é a altura do cabeçalho: é o quanto de tela está
       COBERTO por ele o tempo todo. No computador são os 56px da barra do
       alto, a do "onde você está" (eram os 80px do cabeçalho, até a direção
       B). No telefone a barra do alto se desfaz, e o trilho vira a fileira
       de cima, que rola junto -- é a regra `.trilho` logo abaixo -- e nada
       fica coberto. O cabeçalho de antes chegou a medir 173px aqui, que era
       MAIS do que no computador; a fileira de hoje mede 58px.

       Quem lia daqui pagava por isso: a regra de `scroll-margin-top`, lá em
       cima, empurrava TODA âncora 152px para baixo. Salvar a tela 3 de um
       carrossel volta para `#tela-3`, e no telefone ela chegava com 152px de
       nada em cima -- espaço reservado para uma barra que ali não existe. */
    --topo-altura: 0px;

    /* AQUI, SIM, HÁ UMA BARRA FIXA: a das abas, no pé. MEDIDA: 58,6px (27/10/2026, cinco celulas, letra de 11px, o icone da atual numa pilula), mais a
       faixa do gesto do aparelho. É `main` quem reserva esse espaço, para o
       último elemento de toda tela não nascer debaixo dela. */
    --rodape-altura: 59px;
  }

  /* NO TELEFONE O CARTAO E A PAGINA INTEIRA (redesenho, 27/10/2026): nao
     ha respiro em volta -- 16px de cada lado sao a margem do texto, e um
     cartao dentro deles so comeria largura. O fundo e o do cartao, e a
     fileira de cima, o conteudo e a barra de baixo moram nele. */
  body { background: var(--papel); }
  .area { padding: 0; }

  /* O TRILHO VIRA A FILEIRA DE CIMA, E ELA ROLA JUNTO. No telefone isto sao
     o botao da conta (o selo da marca, a luz do Claude e uma seta) e a troca
     de frente; o resto do trilho vai para a folha da conta, e as abas para a
     barra de baixo. Faixa grudada come tela em toda pagina: por isso ela NAO
     gruda, e o conteudo comeca logo abaixo dela (a barra volta com um gesto
     que todo mundo ja conhece). Ver `--topo-altura: 0px`, acima.

     `z-index: auto` E NAO 1 (plano 4.2, C22): no computador o trilho gruda e
     cria contexto; aqui ele NAO pode criar, porque a barra de baixo mora
     dentro dele -- presa num contexto de 1, qualquer coisa de `z-index` 1 da
     pagina (a pilha do carrossel de Posts) pintaria por cima dela e roubaria
     o toque. MEDIDO a 58px de altura, como no retrato aprovado. */
  /* DUAS FILEIRAS, e a de cima do tamanho do que leva: sem `auto 1fr`, numa
     pagina curta (a tela de erro) a grade repartia a sobra dos 100vh entre
     as duas, e a fileira de cima crescia para 207px, MEDIDO a 390x844. */
  .casco { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .casco::before { content: none; }
  .trilho {
    position: static;
    z-index: auto;
    height: auto;
    min-height: 58px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 11px var(--margem-lateral) 10px;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--borda);
    overflow: visible;
  }
  /* O logotipo em texto sai da fileira: no telefone o selo da marca, no
     botao da conta, ocupa o lugar dele (e o que o retrato aprovado mostra). */
  .topo .logo { display: none; }

  /* O BOTAO DA CONTA. Encolhe antes da troca de frente, e o nome da marca
     (quando e texto) corta com reticencias: o nome inteiro esta no
     `aria-label` e na folha da conta (plano 4.1, C30). `flex: 1 1 0` com
     `max-width: max-content` e o jeito de ele ter o tamanho do que leva
     quando cabe, encolher quando nao cabe, e NUNCA empurrar a troca de frente
     para uma segunda fileira. */
  .conta-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    max-width: max-content;
    height: 38px;
    min-height: 0;
    padding: 0 10px 0 4px;
    border: 0;
    border-radius: var(--raio-1);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--borda);
    color: var(--neutro);
    overflow: hidden;
  }
  .conta-botao:hover { background: var(--papel-3); }
  /* NO TELEFONE O BOTAO LEVA SO O QUADRADINHO (acabamento, 29/10/2026): o
     nome cortava em "Padari...", e o nome inteiro mora na folha que o botao
     abre (e no `aria-label` dele). Com logotipo ou sem, a mesma caixa. */
  .conta-botao .marca-inicial { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
  .conta-botao .luz { margin: 0; }
  .conta-botao .ico { width: 15px; height: 15px; }

  /* A TROCA DE FRENTE NAO ENCOLHE: "Conteudo" e "Anuncios" dizem em qual
     metade da ferramenta o dono esta, e espremer um nome de navegacao para
     caber e trocar um defeito que se ve por um que nao se ve. */
  .seletor-frente { flex: none; width: 208px; margin-left: auto; padding: 2px; }
  .seletor-frente a { height: 32px; gap: 6px; font-size: 13px; }
  .seletor-frente a .ico { width: 15px; height: 15px; }

  /* A FOLHA DA CONTA: o selo da marca, o estado do Estudio, o tema e sair.
     `revert` devolve a caixa ao navegador -- escondida ate o botao abrir, e
     aberta por cima de tudo, com o veu do proprio navegador. Num navegador
     que nao conhece `popover`, `revert` a deixa um bloco comum, que desce
     para uma fileira so dela (`flex-basis: 100%`) logo abaixo do botao: o
     estado continua a vista, so que sem a folha. */
  .conta-folha { display: revert; flex: 1 0 100%; order: 9; }
  .conta-folha:popover-open {
    position: fixed;
    inset: 64px 10px auto;
    width: auto;
    height: auto;
    max-height: calc(100vh - 80px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--papel-2);
    color: var(--tinta);
    box-shadow: var(--sombra-pop);
    overflow: auto;
  }
  .conta-folha::backdrop { background: var(--veu); }
  /* O TOQUE FORA DA FOLHA NAO ATRAVESSA PARA A PAGINA. O `::backdrop` do
     `popover` nao segura o toque: o "fecha ao tocar fora" do navegador
     fechava a folha e o MESMO toque acionava o que estava debaixo dela --
     MEDIDO a 390x844, em /post/4 ele mandava o POST de "Aprovar e gerar as 5
     telas", no Chrome, no Safari e no Firefox. O veu e um botao da propria
     folha (`popovertargetaction="hide"`, ver base.html), transparente, a
     tela inteira, ATRAS da caixa (`z-index: -1` no contexto da folha, que
     esta na camada de cima de tudo): tocar fora e tocar nele, e ele so
     fecha. O escuro continua sendo o do `::backdrop`. A caixa e posicionada
     para ficar na frente dele: tocar no respiro dela nao fecha a folha.
     `pointer-events: none` na pagina nao bastava: no toque o navegador
     fecha a folha no fim do toque e decide o clique DEPOIS, com a pagina de
     volta (MEDIDO: o POST saiu do mesmo jeito no Chrome). */
  .conta-folha:popover-open > .conta-veu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    cursor: default;
  }
  .conta-folha:popover-open > .conta-caixa {
    display: block;
    position: relative;
    padding: 6px 16px 14px;
  }
  .conta-cabeca {
    display: block;
    margin: 0;
    padding: 12px 0 4px;
    font-family: var(--fonte-titulo);
    font-weight: 650;
    font-size: 13px;
    line-height: 1.2;
    color: var(--neutro);
  }
  .marca-atual { margin: 8px 0 12px; }
  .marca-escolha { margin: -4px 0 12px; }
  .topo .estado { margin: 0; padding: 12px 2px; gap: 11px; }
  /* as mesmas cores do pe do trilho, sobre o degrau da folha: `--neutro`
     sobre `--papel-3` da 4,94:1 no escuro e 6,17:1 no claro (MEDIDO pela
     conta de test_direcao_b.py) */
  .estado-linha { font-size: 14px; }
  .estado-motivo { font-size: 13px; }
  /* o "por que?" do motivo, com a caixa de toque de 44px da casa (plano 4.4):
     acima e abaixo dele so ha texto, nenhum outro alvo */
  .estado-porque > summary { position: relative; font-size: 13px; }
  .estado-porque > summary::before {
    content: "";
    position: absolute;
    top: min(0px, calc(50% - 22px));
    right: min(0px, calc(50% - 22px));
    bottom: min(0px, calc(50% - 22px));
    left: min(0px, calc(50% - 22px));
  }
  .topo .acoes { margin: 10px 0 0; padding-top: 12px; }

  /* A BARRA DO ALTO SE DESFAZ: o "onde voce esta" some (a aba marcada na
     barra de baixo e o titulo da tela dizem o mesmo), e o botao da gaveta
     vira um "?" no canto do titulo -- ver `details.ajuda` logo abaixo. */
  .barra-alta {
    position: static;
    z-index: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
  }
  .trilha { display: none; }

  /* A BARRA DE BAIXO, COMO NUM APLICATIVO. Escolha do dono, com a razão dele:
     é onde o polegar alcança sem trocar a mão de posição.

     A CONTA, E ELA É APERTADA -- é aqui que uma barra de baixo fica feia, e
     por isso a medida está escrita. São OITO destinos, e a célula é a largura
     da tela dividida por oito, menos 2px de respiro de cada lado. O rótulo
     mais largo do menu inteiro é "Desempenho", e ele é o mesmo nas DUAS
     frentes. Esconder um destino numa gaveta resolveria a conta e é
     justamente o que este projeto já recusou por escrito, duas vezes.

     O QUE DÁ PARA NEGOCIAR É A LARGURA DA LETRA, E NÃO SÓ O CORPO DELA.
     Archivo é fonte variável, com eixo de largura de 62% a 125% (ver o
     `@font-face` no topo desta folha). MEDIDO com um Range no Playwright, em
     390px, a palavra mais larga do menu inteiro, em 44,75px de célula útil:

       "Desempenho"  10px a 70% de largura .... 46,42px   NÃO COUBE (cortou)
       "Desempenho"  10px a 66% de largura .... 44,39px   sobraram 0,36px
       "Desempenho"  10px a 62% de largura .... 42,38px   sobraram 2,38px

     Ou seja: com sete abas a 70% bastava, e com oito ela corta em
     "Desempen...". VISTO na captura, não só medido. A 62% -- o fim do eixo --
     os oito rótulos saem inteiros, e o vão entre os dois mais largos vizinhos
     ("Desempenho" e "Automático") é de 9,0px, praticamente o mesmo de antes.
     A 66% caberia por 0,36px, que é folga de planilha e não de tela.

     O ALVO DO DEDO tem 48,75 x 45,5px, MEDIDO: acima dos 44x44 que são o
     mínimo confortável nos dois sistemas, e agora com pouca sobra na largura.

     ===== E ESTA CONTA FECHAVA A 390px E SÓ A 390px ========================

     Isso era um defeito, e ele foi medido em 24/09/2026. A célula encolhe
     junto com a tela, e o rótulo não: MEDIDO no mesmo Range, com a Archivo
     de verdade, a 10px e 62% de largura ("Desempenho" = 42,38px sempre):

       tela     célula    útil    sobra
       390px    48,75    44,75    +2,38px   ok  (o telefone do dono)
       375px    46,88    42,88    +0,50px   folga de planilha (iPhone SE)
       371px    46,38    42,38     0,00px   O LIMITE EXATO
       360px    45,00    41,00    -1,38px   "Desempen..." VISTO na captura

     E 360px NÃO É CASO RARO. É a largura de quase todo Android de entrada, e
     é também o que sobra do telefone de 390px do dono quando ele usa o Zoom
     de Página do Safari: 105% deixa 371px, 110% deixa 354px. Rótulo cortado
     num menu de oito destinos é o começo do "não acho onde fica".

     ===== O CONSERTO, EM DOIS DEGRAUS, TAMBÉM MEDIDO ======================

     1) ABAIXO DE 390px A LETRA DÁ UM PASSO ATRÁS -- o CORPO dela, porque a
        LARGURA já acabou (62% é o fim do eixo da Archivo). MEDIDO em 360px,
        que é o pior caso desta faixa, em 41,00px de célula útil:

          "Desempenho"  9,5px a 62% .... 40,25px   sobraram 0,75px
          "Desempenho"  9px   a 62% .... 38,12px   sobraram 2,88px

        9,5px caberia por 0,75px, que é planilha de novo -- e este projeto já
        recusou 0,36px pelo mesmo motivo. 9px devolve a MESMA folga que os
        2,38px de 390px, e o alvo do dedo fica em 45,00 x 45,34px, ainda
        acima de 44x44. O corte fica em 389px de propósito: o telefone do
        dono tem 390px e ele aprovou a barra VENDO ela assim -- a tela dele
        não muda um pixel.

     2) ABAIXO DE 360px A FILEIRA SE PARTE EM DUAS, de quatro. E aqui quem
        manda NÃO é a letra, é o DEDO: oito colunas em 320px dão célula de
        40px, e 40px é MENOS que os 44px mínimos dos dois sistemas. Nenhum
        corpo de letra conserta isso -- a conta do piso é direta, 44 x 8 =
        352px. MEDIDO em 320px com quatro colunas: célula de 80 x 45,5px, e
        "Desempenho" volta à largura NORMAL da fonte (100%), com 61,72px num
        vão de 76px -- sobraram 14,28px, e o rótulo fica mais legível do que
        em qualquer telefone maior. O PREÇO TAMBÉM ESTÁ MEDIDO: a barra sai
        de 55,5px para 101px, que numa tela de 568px são 18% comidos o tempo
        todo. É caro, e continua sendo melhor do que esconder um destino.

     O QUE FOI RECUSADO, E O CUSTO DE CADA UM:
       gaveta / "ver mais" ...... decisão escrita duas vezes no projeto: o
                                  dono não descobre o que está atrás de um
                                  botão que ele nunca abriu.
       barra que rola de lado ... quem não vê não sabe que há o que rolar.
       só o ícone, sem rótulo ... "Cérebro" e "Pedidos" ninguém adivinha pelo
                                  desenho; seria esconder o nome do destino.
       8,5px numa fileira só .... MEDIDO em 320px: 36,02px num vão de 36,00px
                                  -- não cabe, e o alvo do dedo continuaria
                                  em 40px, abaixo do mínimo.
       encurtar "Desempenho" .... o rótulo é palavra do dono e mora em
                                  motor/frente.py; não é assunto da folha.

     SE UMA NONA ABA NASCER: a fileira de oito não tem mais para onde ir --
     nem eixo de largura (62% é o fim), nem corpo de letra. A nona aba manda
     a barra para duas fileiras em TODA largura de telefone, e o desenho já
     está pronto no bloco de `max-width: 359px` logo abaixo deste `@media`:
     basta subir o corte. Refaça a medida antes de mexer no número de
     colunas. */
  .lateral {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 30;
    /* A COLUNA VIRA FILEIRA. As sete células são iguais (eram oito até o
       Laboratório sair, em 19/10/2026): item de largura
       própria faria "Criar" ficar minúsculo e "Desempenho" gordo, e o dedo
       aprende a posição do alvo antes de aprender o nome dele. */
    display: grid;
    /* CINCO CELULAS, SEMPRE (27/10/2026): as quatro primeiras abas e o
       "Mais" (ver base.html). Eram sete, e dez em Anuncios. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    min-height: 0;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 4px 0 calc(5px + env(safe-area-inset-bottom, 0px));
    border-right: 0;
    border-top: 1px solid var(--borda);
    /* A barra passa POR CIMA do conteúdo que rola atrás dela. Sem fundo
       opaco, o texto da página atravessa os rótulos. E o cartao da pagina. */
    background: var(--papel);
    transition: transform .18s ease;
  }

  .lateral a {
    flex-direction: column;
    justify-content: flex-start;
    gap: 3px;
    /* `height: auto`, E NAO OS 36px DA COLUNA DO COMPUTADOR (C24 do plano da
       B). Sem esta linha a altura da regra de cima vaza para ca, a celula
       fica em 36px, a barra cai de 55,5 para 46px e o rotulo some por baixo
       do icone. E a PRIMEIRA regra da aba neste bloco: e ela que o teste da
       barra le. */
    height: auto;
    padding: 5px 2px 4px;
    border-radius: var(--raio-1);
    /* no telefone vale a ordem do HTML: a da barra (NO_CELULAR) e, na folha
       do "Mais", a do menu (ver a regra da coluna) */
    order: 0;
    /* 11px E A LARGURA INTEIRA DA LETRA (27/10/2026): com cinco celulas a
       letra nao precisa mais ser espremida a 62%, que era o fim do eixo da
       Archivo para caber oito e dez abas. De 389px para baixo ela cai para
       10px (o `@media` logo depois deste bloco). A conta MEDIDA esta em
       testes/test_barra_de_abas.py. */
    font-size: 11px;
    font-stretch: 100%;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.15;
    text-align: center;
    color: var(--neutro);
  }
  .lateral a:hover { background: none; }
  /* O fio entre grupos e da coluna do computador: numa fileira de celulas
     iguais ele nao separa nada. `content: none`, e nao `display: none` --
     nada da barra se esconde por regra. */
  .lateral a[data-grupo] { margin-top: 0; }
  .lateral a[data-grupo]::after { content: none; }
  .aba-icone { width: 18px; height: 18px; }
  .aba-nome { max-width: 100%; }

  /* A ABA ATUAL NO TELEFONE: a celula nao ganha fundo, e quem acende e o
     ICONE, numa pilula com o desenho por cima -- a mesma pilula do item
     ativo do computador, no tamanho do polegar (redesenho, 27/10/2026). Era
     uma sobrancelha verde de 2,5px em cima da celula. DESDE O ACABAMENTO
     (29/10/2026) a pilula e o degrau `--papel-4`, e nao a Lava: no Inicio
     ela ficava ao lado do botao principal, duas manchas Lava na mesma
     tela. */
  .lateral a.atual::before { content: none; }
  .lateral a.atual { background: none; color: var(--tinta); font-weight: 700; }
  .lateral a.atual .aba-icone {
    box-sizing: content-box;
    padding: 3px 14px;
    border-radius: var(--raio-pilula);
    background: var(--papel-4);
    color: var(--tinta);
  }

  /* O "MAIS" (27/10/2026): a quinta celula, com a mesma cara das outras
     quatro. Ele fica marcado (a sobrancelha) quando a tela aberta mora na
     folha dele, e leva o contador das perguntas quando elas moram la. */
  .lateral .aba-mais {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 5px 2px 4px;
    border: 0;
    border-radius: var(--raio-1);
    background: none;
    box-shadow: none;
    font-family: var(--fonte-titulo);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--neutro);
    cursor: pointer;
  }
  .lateral .aba-mais .aba-icone { fill: currentColor; stroke: none; }
  .lateral .aba-mais.atual { color: var(--tinta); font-weight: 700; }
  .lateral .aba-mais.atual .aba-icone {
    box-sizing: content-box;
    padding: 3px 14px;
    border-radius: var(--raio-pilula);
    background: var(--papel-4);
    color: var(--tinta);
  }

  /* A FOLHA DO "MAIS": um `popover`, como a folha da conta -- escondida ate
     o toque, por cima de tudo, logo acima da barra. O veu e um botao da
     propria folha, pelo mesmo motivo da folha da conta: o toque fora so
     fecha, e nada debaixo dela e acionado. */
  .abas-mais { display: revert; }
  .abas-mais:popover-open {
    position: fixed;
    inset: auto 10px calc(var(--rodape-altura) + 8px + env(safe-area-inset-bottom, 0px)) 10px;
    width: auto;
    height: auto;
    max-height: calc(100vh - var(--rodape-altura) - 40px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--papel-2);
    color: var(--tinta);
    box-shadow: var(--sombra-pop);
    overflow: auto;
  }
  .abas-mais::backdrop { background: var(--veu); }
  .abas-mais:popover-open > .abas-mais-veu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: default;
  }
  .abas-mais:popover-open > .abas-mais-caixa {
    display: grid;
    gap: 2px;
    position: relative;
    padding: 8px;
  }
  /* Na folha a aba volta a ser LINHA, com o icone a esquerda e o nome
     inteiro, como na coluna do computador: ali ha largura. */
  .lateral .abas-mais a {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: var(--raio-1);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    color: var(--tinta-2);
  }
  /* na folha a atual e a pilula cheia do computador, e o icone volta ao
     desenho simples dentro dela */
  .lateral .abas-mais a.atual { background: var(--papel-4); color: var(--tinta); font-weight: 650; }
  .lateral .abas-mais a.atual::before { content: none; }
  .lateral .abas-mais a.atual .aba-icone { padding: 0; border-radius: 0; background: none; color: currentColor; }
  .lateral .abas-mais a .selo-contador {
    position: static;
    margin-left: auto;
    transform: none;
    min-width: 22px;
    height: 20px;
    font-size: 11.5px;
    line-height: 20px;
    box-shadow: none;
  }

  /* A BARRA DE DUAS FILEIRAS (dez abas, Anuncios, 26/09 a 27/10/2026) e a de
     seis (o modo Simples) SAIRAM: desde o "Mais" a barra tem cinco celulas
     em toda frente e em toda largura de telefone, numa fileira so. */

  /* O contador sai da linha e vira aviso de canto de ícone, como em qualquer
     aplicativo: na vertical não há "ponta direita" para ele ocupar. */
  .lateral a .selo-contador {
    position: absolute;
    margin: 0;
    top: 2px;
    left: 50%;
    transform: translateX(3px);
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    font-size: 9.5px;
    line-height: 15px;
    box-shadow: 0 0 0 2px var(--papel);
  }
  .lateral .aba-mais .selo-contador {
    position: absolute;
    margin: 0;
    top: 2px;
    left: 50%;
    transform: translateX(3px);
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    font-size: 9.5px;
    line-height: 15px;
    box-shadow: 0 0 0 2px var(--papel);
  }

  /* A BARRA FIXA NAO COBRE O QUE SE ROLA ATE ELA (27/10/2026): o botao que
     o navegador traz para a vista (uma ancora, o foco de um campo) parava
     debaixo da barra. */
  html { scroll-padding-bottom: calc(var(--rodape-altura) + 16px + env(safe-area-inset-bottom, 0px)); }

  /* A ARMADILHA DO TECLADO, e ela é real: no Android o teclado encolhe a
     janela, e uma barra `fixed` no pé sobe junto e senta EM CIMA do campo que
     a pessoa está preenchendo. As telas de Criar e de Automático são longas e
     cheias de campo -- é lá que doeria.

     Enquanto um campo de digitação está com o foco, a barra desce para fora
     da tela. Ela volta sozinha assim que o foco sai, e continua não sendo uma
     gaveta: ninguém precisa descobrir como abri-la.

     Caixa de marcar, botão e arquivo ficam de fora da regra de propósito:
     eles não abrem teclado, e marcar um dia da semana no Automático não pode
     fazer a barra piscar. Navegador sem `:has()` simplesmente mantém a barra
     onde está, que é o comportamento de antes -- não fica pior. */
  body:has(textarea:focus) .lateral,
  body:has(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]):focus) .lateral {
    transform: translateY(110%);
  }
}
/* [/dono: casco] */

/* [dono: conteudo] */
@media (max-width: 720px) {
  /* DUAS COLUNAS, e não uma. A moldura da arte é 4:5, então em coluna única
     cada cartão reservava 447px de altura -- oito posts viravam uma página de
     quatro mil pixels, e o dono rolava o polegar inteiro para ver o quarto.
     Em duas colunas a moldura cai para 170px e a galeria volta a ser
     galeria. */
  .galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-4) 10px;
  }
  .galeria figcaption { font-size: 12.5px; padding: 8px 2px 2px; }

  /* POSTS NO CELULAR SEGUE O RETRATO APROVADO (`celular-posts`, C6): uma
     coluna, cada post uma LINHA COMPACTA -- o poco de 104px a esquerda, o
     texto a direita, e o verde na largura inteira embaixo. A pagina fica
     mais longa que as duas colunas de antes (o custo da coluna unica esta
     escrito acima), e e de proposito: a decisao de cada cartao fica a vista
     sem abrir o post. Posts no celular e isenta da M5 (plano 4.1). A faixa
     "esperando" do Calendario ganha a mesma linha compacta, no fim deste
     bloco. */
  .galeria:has(> .posts-cartao) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .posts-cartao {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    gap: 12px 14px;
    padding: 10px;
  }
  .posts-cartao .moldura { margin: 0; padding: 7px; border-radius: 7px; }
  .posts-cartao .moldura img { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
  /* O POCO SEM ARTE CRESCE COM A FRASE, em vez de corta-la: "Travado, sem
     pergunta em aberto..." tem 88 letras, e no poco de 104px sao seis
     linhas. O 4:5 fica como altura minima (130px). */
  .posts-cartao .moldura.vazia, .galeria .moldura.posts-roteiro { aspect-ratio: auto; min-height: 130px; }
  .posts-cartao .sem-arte { padding: 2px; font-size: 11.5px; line-height: 1.35; }
  .galeria .moldura.posts-roteiro { gap: 10px; padding: 12px 7px 8px; }
  .galeria .moldura .posts-pilha { width: 70%; }
  .galeria .moldura .posts-pilha img:nth-last-child(2) { transform: translate(3.5px, -3.5px); }
  .galeria .moldura .posts-pilha img:nth-last-child(3) { transform: translate(7px, -7px); }
  .galeria .moldura.posts-roteiro .poco-nota { font-size: 11px; }
  .posts-texto { padding: 0; }
  .posts-titulo { margin-top: 8px; font-size: 14.5px; }
  .posts-meta { margin-top: 4px; font-size: 12px; }
  details.posts-fatos { margin-top: 6px; }
  /* 8px ENTRE DOIS ALVOS (plano 4.4): a caixa de toque de 44px do "por que?"
     desce 14,5px abaixo do texto dele, e o verde vinha 15px abaixo dele no
     cartao em que o texto e mais alto que o poco (MEDIDO a 360 e a 320) --
     o toque do "por que?" encostava no verde. Com o verde 10px mais abaixo,
     sobram 10,5px entre os dois alvos. */
  .posts-acao { grid-column: 1 / -1; padding: 0; margin-top: 10px; }
  .posts-titulo { min-height: 0; }
  /* No telefone a caixa e folha, logo acima da barra de baixo (nucleo): ela
     cresce para cima, e o teto deixa a fileira de cima e um respiro. */
  .posts-fatos .porque-caixa { max-height: calc(100vh - var(--rodape-altura) - 96px); }
  /* "CRIAR POST" CONTINUA A VISTA NO TELEFONE (o retrato o escondia: nada
     some no celular sem motivo, N3), mas no tamanho pequeno -- o Criar
     tambem esta na barra de baixo, e o botao nao pode empurrar a lista. */
  .posts-criar { min-height: 34px; padding: 6px 12px; font-size: var(--letra-3); }

  /* O QUE SUSTENTOU CADA AFIRMACAO, no telefone, vira lista: a frase, onde
     ela esta e o fato, um embaixo do outro, com o fio entre as afirmacoes.
     MEDIDO a 320x740 no post #3: na coluna de 109px do fato, o mais longo
     descia 510px (umas 29 linhas); em lista, 179px. O cabecalho fica, numa
     linha so. */
  .afirmacoes-tabela, .afirmacoes-tabela tbody, .afirmacoes-tabela tr,
  .afirmacoes-tabela td { display: block; }
  .afirmacoes-tabela thead tr { display: flex; gap: var(--espaco-3); }
  .afirmacoes-tabela thead th { padding-right: 0; border-bottom: 0; }
  .afirmacoes-tabela tbody tr { padding: var(--espaco-3) 0; border-top: 1px solid var(--borda); }
  .afirmacoes-tabela td { padding: 2px 0; border-bottom: 0; }

  /* O segmento de Criar no telefone: 44px de alvo, e as duas metades dividem
     a largura. */
  .criar-escolha { padding-top: 62px; }
  .criar-escolha::before { right: 0; width: auto; height: 50px; }
  /* O rotulo longo ("Escrever eu mesmo") quebra em duas linhas dentro do
     alvo, e nao encosta na borda (acabamento, 29/10/2026). */
  .criar-tipo > summary { width: calc(33.33% - 3px); height: 44px; padding: 0 6px;
    font-size: 12.5px; line-height: 1.15; text-align: center; }
  .criar-tipo + .criar-tipo > summary { left: 33.33%; }
  .criar-tipo + .criar-tipo + .criar-tipo > summary { left: 66.66%; width: calc(33.33% - 3px); }
  /* 8px entre dois alvos (plano 4.4): a caixa de toque do "por que?" passa
     14px acima e abaixo do texto dele, e em cima esta o campo do modelo e
     embaixo o verde. */
  details.criar-medidos { margin: 22px 0 10px; }

  /* A FAIXA "ESPERANDO" DO CALENDARIO NO CELULAR E A LINHA COMPACTA DE POSTS
     (INVENTARIO-conteudo 4.6): uma coluna, o poco de 104px a esquerda, o
     selo, o titulo e a data a direita. Era o cartao de meia largura de antes
     -- MEDIDO na conferencia da 5.1 a 390x844: 174px de largura numa faixa
     de 358, de y=436 a 788, e a semana so comecava em 818, atras da barra de
     baixo; o selo quebrava em duas linhas. */
  .cal-esperando + .galeria { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cal-esperando + .galeria figure { padding: 10px; }
  .cal-esperando + .galeria figure > a {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }
  .cal-esperando + .galeria .moldura { padding: 7px; border-radius: 7px; }
  .cal-esperando + .galeria .moldura img { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
  .cal-esperando + .galeria figcaption { padding: 0; }
  .cal-esperando + .galeria .cartao-etiquetas { min-height: 0; }

  /* 8px ENTRE DOIS ALVOS (plano 4.4) na pagina do criativo: o "por que?" de
     "Isto e midia paga" vinha 2,7px acima de "Baixar a arte", e a caixa de
     toque de 44px dele (14px abaixo do texto) cobria o alto do botao --
     MEDIDO na conferencia da 5.1 a 390: o toque nos primeiros 10px do botao
     abria o "por que?". Com 22px embaixo, sobram uns 10px entre os dois. */
  details.post-porque { margin-bottom: 22px; }
}
/* [/dono: conteudo] */

/* [dono: nucleo] */
@media (max-width: 720px) {
  /* 16px NO CAMPO, E NAO 15. Abaixo de 16px o Safari do iPhone amplia a tela
     inteira quando o dedo toca o campo, e a pagina fica torta ate alguem
     beliscar de volta. */
  input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=url], input[type=date], input[type=time], input[type=file], select, textarea { font-size: 16px; }
  /* Uma coluna nos pares de campo. MEDIDO em 390px: com `minmax(150px,1fr)`
     cabiam dois seletores de 163px, e "editorial-silencioso" saía cortado por
     baixo da setinha. Com 170px de mínimo o auto-fit desiste da segunda
     coluna sozinho, e o campo volta a caber inteiro. */
  .linha { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
/* [/dono: nucleo] */

/* [dono: casco] */
@media (max-width: 720px) {
  /* A GAVETA NO TELEFONE: o botao vira um "?" de 36px no canto de cima da
     area, na altura do titulo (20px, o respiro de cima de `main`), e a gaveta
     sobe de baixo, com 86% da altura. O rotulo "Como esta tela funciona" sai
     da vista por recorte, e nao por `display: none`: o leitor de tela
     continua lendo. */
  details.ajuda { position: absolute; top: 20px; right: var(--margem-lateral); }
  .ajuda > summary {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-botao);
  }
  .ajuda > summary .ico { width: 18px; height: 18px; }
  .ajuda > summary .ajuda-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* O PE DA GAVETA RESERVA A BARRA DE BAIXO: ela fica por cima da gaveta (30
     contra 21), e sem esta reserva a ultima frase morava atras de "Campanhas
     ... Pedidos" -- e o que o retrato `extra-celular-ajuda` mostra, e o que
     esta folha nao repete. */
  .ajuda-painel {
    top: auto;
    left: 0;
    width: auto;
    max-height: 86vh;
    padding: 0 20px calc(var(--rodape-altura) + 32px + env(safe-area-inset-bottom, 0px));
    border-left: 0;
    border-top: 1px solid var(--borda-forte);
    border-radius: 16px 16px 0 0;
  }
  .ajuda-cabeca { margin: 0 -20px 4px; padding: 0 12px 0 20px; }

  /* O CANTO DO "?" E RESERVADO AQUI, no casco, para nenhuma tela precisar
     lembrar (plano 4.3, C3 e C25). O "?" mora onde `<main>` comeca, e ali
     moram o fim do titulo, os recados, a tela de erro e as faixas do alto
     de Anuncios: cada uma dessas pecas deixa 48px a direita (os 36 do botao
     e 12 de ar) quando a tela tem gaveta. So a de fora leva o respiro -- um
     titulo dentro de uma cabeca da lista nao soma 48 com ela. A medida M12
     da bancada e a rede: o retangulo do "?" nao cruza texto nenhum. */
  main:has(> .ajuda) :is(.recados, .erro-tela, .cabeca, .cabeca-tela,
      .titulo-tela, .anu-cabeca, .anu-esteira, .anu-ia-espera):not(:is(.recados, .erro-tela, .cabeca, .cabeca-tela,
      .titulo-tela, .anu-cabeca, .anu-esteira, .anu-ia-espera) *) {
    padding-right: 48px;
  }
}
/* [/dono: casco] */

/* [dono: nucleo] */
@media (max-width: 720px) {
  /* Botão de tela cheia: no telefone, botão de 110px no meio do nada é alvo
     pequeno e desperdiça a largura que existe. */
  .bloco button.forte, .dobra-corpo button.forte { width: 100%; }
}
/* [/dono: nucleo] */

/* [dono: conteudo] */
@media (max-width: 720px) {
  /* O rótulo "EM CONSTRUÇÃO" ao lado do texto comia 40% da largura, e o
     parágrafo saía numa coluna de 200px. Empilhado, o texto fica inteiro. */
  .em-obras { flex-direction: column; gap: var(--espaco-2); }
}
/* [/dono: conteudo] */

/* [dono: casco] */
@media (max-width: 720px) {
  /* O PÉ CRESCE O TAMANHO DA BARRA DE BAIXO. Sem isto o último botão de toda
     tela longa (salvar, aprovar, gerar) nasce debaixo dela -- e a pessoa rola
     até o fim, vê o botão pela metade e acha que a página quebrou. */
  main {
    /* 20px EM CIMA, e nao 22: e a altura do "?" da gaveta, que mora no canto
       de cima da area (ver `details.ajuda`), alinhado com o titulo. */
    padding: 20px var(--margem-lateral)
             calc(60px + var(--rodape-altura) + env(safe-area-inset-bottom, 0px));
    /* o cartao do conteudo se desfaz: no telefone a pagina ja e o cartao */
    border: 0;
    border-radius: 0;
  }
  .erro-tela { padding: 22px 20px; }
}
/* [/dono: casco] */
/* [dono: nucleo] */
@media (max-width: 720px) {
  .bloco { padding: var(--espaco-4); }
}
/* [/dono: nucleo] */
/* [dono: conteudo] */
@media (max-width: 720px) {
  /* A galeria não precisa de regra aqui: com a moldura única, o auto-fill já
     cai para uma coluna sozinho quando a tela não comporta duas. */
  .numerao { gap: var(--espaco-3) var(--espaco-5); padding: var(--espaco-4); }
  .numerao b { font-size: 26px; }
}
/* [/dono: conteudo] */
/* [dono: nucleo] */
@media (max-width: 720px) {
  /* O FILTRO VIRA ALVO DE DEDO, nas duas frentes. 30px e altura de controle de
     mouse; 40px e de polegar, e era o que Anuncios ja tinha medido para a
     pilula dela. */
  .filtros a { min-height: 40px; }
  .paginas { flex-direction: column; align-items: stretch; }
  .paginas .andar { justify-content: space-between; }
  .paginas .andar a, .paginas .andar span { flex: 1; text-align: center; }
}
/* [/dono: nucleo] */

/* [dono: casco] */
/* --- telefone estreito: o primeiro degrau da barra de baixo ---------------

   ESTES DOIS BLOCOS SÃO A CONTINUAÇÃO DA CONTA que está escrita por extenso
   no `@media (max-width: 720px)` acima, em `.lateral`. Eles vêm DEPOIS dele
   de propósito: mesma força de seletor, e quem vem por último ganha.

   O PRIMEIRO DEGRAU, de 389px para baixo: a célula encolhe junto com a tela,
   e "Desempenho" não. A 390px sobram 2,38px; a 371px sobra zero; a 360px
   faltam 1,38px e o navegador escreve "Desempen...". MEDIDO em 360px, o pior
   caso desta faixa: 9px a 62% dão 38,12px num vão de 41,00px -- sobram
   2,88px, a mesma folga de 390px. O alvo do dedo fica em 45,00 x 45,34px,
   ainda acima dos 44x44 mínimos.

   E 360px NÃO É CASO RARO: é a largura de quase todo Android de entrada, e é
   o que sobra do telefone de 390px do dono com o Zoom de Página do Safari em
   105% (371px) ou 110% (354px). */
@media (max-width: 389px) {
  .lateral .aba-mais { font-size: 10px; }
  .lateral a {
    /* 10px, a largura inteira (27/10/2026): a barra de cinco celulas */
    font-size: 10px;
    /* 1px A MAIS EMBAIXO. Letra menor encolhe a linha junto, e sem isto o
       alvo do dedo caía de 45,5px para 44,34px -- passava nos 44px por
       0,34px, que é a folga de planilha que este arquivo inteiro recusa. */
    padding: 5px 2px 5px;
  }

  /* A FILEIRA DE CIMA APERTA NO MESMO DEGRAU. MEDIDO a 360: o botao da conta
     inteiro (124px) e a troca de frente (208px) pedem 342px em 328 uteis, e
     o selo da marca vazava do botao. Aqui o selo desce para 11px de altura
     (59px de largura), o respiro e os vaos do botao encolhem, o vao da
     fileira vai a 8px -- e ela pede 325px. A troca de frente nao encolhe. */
  .trilho { gap: 8px; }
  .conta-botao { gap: 6px; padding: 0 8px 0 4px; }
}

/* --- telefone muito estreito: a fileira se parte em duas ------------------

   O SEGUNDO DEGRAU, de 359px para baixo, e aqui quem manda NÃO é a letra, é
   o DEDO: oito colunas em 320px dão célula de 40px, e 40px é MENOS que os
   44px mínimos dos dois sistemas. Nenhum corpo de letra conserta isso -- a
   conta do piso é direta, 44 x 8 = 352px, então a fileira de oito acaba ali.

   NENHUM DESTINO SUMIU, e é isto que separa esta saída da gaveta que o
   projeto recusou duas vezes: os oito continuam à vista, o tempo todo, só
   que em duas fileiras de quatro. MEDIDO em 320px: célula de 80 x 45,5px, e
   "Desempenho" volta à largura NORMAL da fonte, com 61,72px num vão de 76px
   -- sobram 14,28px, e o rótulo fica mais legível do que em telefone maior.

   O PREÇO ESTÁ MEDIDO TAMBÉM: a barra sai de 55,5px para 101px de altura. No
   iPhone SE de primeira geração (320 x 568) são 18% da tela comidos o tempo
   todo. É caro, e continua sendo melhor do que esconder um destino. */
@media (max-width: 359px) {
  /* A FILEIRA NAO SE PARTE MAIS (27/10/2026): com cinco celulas, 320px dao
     64px por celula, acima dos 44px do dedo, e a letra de 10px cabe (a conta
     MEDIDA esta em testes/test_barra_de_abas.py). A barra fica numa fileira
     so, com a reserva do pe de sempre. */

  /* A TROCA DE FRENTE ENCOLHE SO AQUI, e sem perder o nome: MEDIDO a 320, o
     botao da conta compacto (111px) e a fileira de 288px uteis deixam 169px
     para ela. Com 164px cada metade tem 79px, e "Conteudo" com o icone pede
     80 -- por isso o icone sai, e o nome fica com 20px de folga. O icone e
     enfeite: o nome da frente continua escrito. */
  .seletor-frente { width: 164px; }
  .seletor-frente a .ico { display: none; }
}
/* [/dono: casco] */

/* [dono: conteudo] */
/* =========================================================================
   === telas: posts e post ===
   Reservado para quem for desenhar a galeria de posts e a página de um post.
   Escreva SÓ aqui dentro, para dois agentes não se atropelarem no mesmo
   arquivo. Os tokens acima já estão prontos; não invente cor nova.
   ========================================================================= */

/* --- a página de UM post -------------------------------------------------

   A GRADE, E O PORQUÊ DELA. Isto era `.duas`: dois filhos, com a coluna da
   direita INTEIRA como segundo. Abaixo de 900px `.duas` vira coluna única, e
   aquela coluna descia inteira para depois da arte, da tabela de afirmações e
   do histórico de alterações -- "Mandar no Telegram" ficava a quase uma
   página de rolagem do alto, no telefone, que é justamente onde o dono
   aprova post.

   São TRÊS regiões, e a ordem do HTML é a ordem do TELEFONE:
   arte -> ação -> dossiê. No computador a folha recoloca: a arte em cima à
   esquerda, o dossiê embaixo dela, e a coluna da ação à direita atravessando
   as duas fileiras. É o desenho de antes, sem a dívida de antes. */
.post-grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  /* AS DUAS FILEIRAS SÃO DECLARADAS, e a de baixo é `1fr`, por um motivo
     medido: `.post-lado` atravessa as duas, e quando ele é mais alto do que
     arte + dossiê juntos (o post travado, que não tem arte) o navegador
     reparte a sobra ENTRE as duas fileiras -- abriam-se 116px de nada entre a
     caixa da arte e o dossiê. Fileira flexível embaixo tira o item que
     atravessa da conta de quem dimensiona a de cima, e a sobra toda desce. */
  grid-template-rows: min-content 1fr;
  column-gap: var(--espaco-6);
  align-items: start;
}
.post-arte { grid-column: 1; grid-row: 1; }
.post-lado { grid-column: 2; grid-row: 1 / span 2; }
.post-resto { grid-column: 1; grid-row: 2; }
/* EM TELA LARGA A ARTE PARA EM 680px, a largura que ela tem a 1440 (7 de 12
   partes). Sem isso, a 1920 a previa do feed passava de 900px e o post virava
   cartaz; a sobra vai para o lado das acoes. */
@media (min-width: 1600px) {
  .post-grade { grid-template-columns: minmax(0, 680px) minmax(0, 1fr); }
}

/* A LINHA DE META DO ALTO (direcao B): o selo do estado e, em texto miudo, o
   formato, o dia e o numero -- como "Em montagem · 24/09 a 08/10" da
   Campanha. Ela substituiu a fileira de duas etiquetas. */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 var(--espaco-4);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--neutro);
  font-variant-numeric: var(--algarismos);
}

/* Aqui a prévia não é um cartão perdido num feed falso: é a coisa que se veio
   ver. Ela ocupa a caixa inteira, e não os 380px do feed de mentira. */
.post-arte .post { max-width: 100%; }
.legenda.post-comentario {
  border-top: 1px solid var(--borda);
  margin-top: var(--espaco-2);
  padding-top: 10px;
}

/* O rótulo da ficha "O pedido": coluna estreita e cinza, sem partir "formato"
   em duas linhas dentro de uma coluna de 130px. */
/* `.texto-apoio` nasce com margem zero, de propósito. Quando o que vem logo
   abaixo dele é a AÇÃO que ele explica, o ar volta. */
.post-acao .texto-apoio { margin-bottom: var(--espaco-3); }
/* PEDIR ALTERAÇÃO mora dentro da caixa de aprovar: é a outra resposta à mesma
   pergunta, e uma caixa só para ela custaria mais uma dobra de rolagem no
   telefone. A regra geral apaga a linha do primeiro `details` de cada pai --
   ela existe para separar um prompt do outro, no dossiê --, e aqui a linha é
   justamente o que diz que começou outra coisa.

   O seletor leva o `details` junto de propósito: `details:first-of-type` zera
   a linha e o ar, e uma classe sozinha perde dele por especificidade -- a
   regra existia e não aparecia na tela. */
details.post-alterar {
  border-top: 1px solid var(--borda);
  margin-top: var(--espaco-4);
  padding-top: var(--espaco-3);
}
.post-alterar textarea { margin-bottom: var(--espaco-3); }
/* A CAIXA "trocar também a imagem", no lugar das frases mágicas. */
.post-trocar-imagem { display: flex; gap: var(--espaco-2); align-items: center;
  margin-bottom: var(--espaco-3); font-size: 14px; }
.post-trocar-imagem input { width: auto; margin: 0; }
/* QUANDO VAI AO AR (27/10/2026): o dia, a hora e o botão numa linha que
   quebra no telefone. */
.post-quando-campos { display: flex; flex-wrap: wrap; gap: var(--espaco-2);
  align-items: flex-end; }
.post-quando-campos label { display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--tinta-2); }
.post-quando-campos input { width: auto; }
.post-quando-campos button { min-height: 42px; }
.post-quando-tirar { margin-top: var(--espaco-2); }
.post-quando-tirar button, .cal-tirar button { padding: 0; min-height: 0;
  background: none; border: 0; color: var(--falha); font-weight: 600;
  font-size: 13px; text-decoration: underline; }
.post-quando-tirar button:hover, .cal-tirar button:hover { background: none; }
.post-telegram-ligar { margin: 0 0 var(--espaco-4); }
/* OS DETALHES FECHADOS: régua, ficha, custo e o dossiê, para quem confere. */
details.post-detalhes > summary { cursor: pointer; font-weight: 650; }
details.post-detalhes[open] > summary { margin-bottom: var(--espaco-3); }
details.post-dossie { margin-top: var(--espaco-2); }
/* A data do preview em caixa normal, como o Instagram escreve hoje. */
.post-arte .quando { text-transform: none; letter-spacing: 0; }
/* [/dono: conteudo] */
/* [dono: nucleo] */
.bloco .texto-apoio + form { margin-top: var(--espaco-3); }
/* [/dono: nucleo] */
/* [dono: conteudo] */
/* O aviso que mora DENTRO de um bloco não repete a margem do bloco. */
.aviso.embutido { margin: 0 0 var(--espaco-3); }
.post-nota { margin-top: var(--espaco-2); }
/* A frase de uma ficha do dossiê é citação, e não título: a 15,5px do padrão
   ela competia com o <h2> da própria caixa que a contém. */
.post-resto .ficha .afirmacao { font-size: 14.5px; }
.post-revisao { margin-bottom: var(--espaco-2); }

/* A PORTA DE APAGAR fica no fim, em uma linha, e é link -- não botão. Um
   botão vermelho aqui embaixo ficaria à mesma distância do dedo que "Mandar
   no Telegram", e não está à mesma distância da consequência. O vermelho de
   verdade só aparece na caixa que já escreveu o estrago (`.perigo-caixa`). */
.post-apagar {
  margin-top: var(--espaco-6);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--borda);
}
.post-apagar a {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 650;
  font-size: var(--letra-3);
  color: var(--falha);
}
.post-apagar .texto-mini { max-width: 68ch; }

/* O fato que sustenta a frase, embaixo da chave dele, na tabela de lastro. */
.fato-dito { color: var(--tinta-2); }

/* --- post na B (Etapa 5.1) -------------------------------------------------

   A volta ("Posts", com a seta) mora no `<p class="rotulo">` de sempre -- e
   nele que o teste do voltar procura o endereco --, sem a margem de rotulo. */
p.rotulo:has(> .voltar) { margin: -6px 0 0; }
/* O VERDE DO TRAVADO E A SAIDA, dentro do aviso: responder, ou editar o
   texto. */
.post-saida { margin-top: var(--espaco-2); }
/* O CARTAO DA DECISAO abre com o verde, e a frase do que ele provoca vem
   colada embaixo, no mesmo cartao. */
.post-decide > form + .texto-apoio { margin: var(--espaco-3) 0 0; }
.post-receita { margin: 0; font-weight: 650; font-size: 15px; color: var(--tinta); }
/* O "por que?" que tambem e nota da ficha: o reset do nucleo zerava a margem. */
details.porque.post-nota, details.post-porque { margin-top: var(--espaco-2); }
.post-nasceu { margin: 0; }
.post-nasceu + .abaixo { margin: 4px 0 var(--espaco-4); font-size: 14px; }
/* O caminho de cada frase sem lastro, sempre na linha de baixo: era um
   `style="display:block"` escrito a mao no HTML. */
.sem-lastro-caminho { display: block; }

@media (max-width: 900px) {
  /* Uma coluna, e a ordem passa a ser a do HTML: arte, ação, dossiê. */
  .post-grade { grid-template-columns: minmax(0, 1fr); }
  .post-arte, .post-lado, .post-resto { grid-column: 1; grid-row: auto; }
}

@media (max-width: 720px) {
  /* DUAS LINHAS DE ETIQUETA, SEMPRE. MEDIDO em 390px: na coluna de 170px,
     "ESPERANDO VOCÊ" e "ALTERAÇÃO PEDIDA" não deixam o formato caber ao lado,
     e a etiqueta de formato desce sozinha -- a caixa passa de 20px para 45px
     e o título daquele cartão começa 25px abaixo do vizinho. É o mesmo defeito
     que `figcaption strong` já conserta no título: a fileira perde a base
     comum. Reservar a segunda linha custa 25px por cartão e devolve a grade. */
  .galeria .cartao-etiquetas { min-height: 45px; align-content: flex-start; }
}
/* [/dono: conteudo] */


/* [dono: casa] */
/* =========================================================================
   === telas: pedidos, cerebro, criar e calendario ===
   Reservado para quem for desenhar a caixa de pedidos, o cérebro, a tela de
   criar e o calendário. Mesma regra: só aqui dentro.
   ========================================================================= */

/* --- a caixa de pedidos --------------------------------------------------

   O QUE ESTAVA ERRADO. A caixa chegava na ordem em que as perguntas
   nasceram, sem contador e sem filtro, e a lista de já respondidos era uma
   TABELA DE SEIS COLUNAS -- número, pergunta, resposta, miniatura de 72px,
   data e um formulário com campo e botão. MEDIDO: isso pede mais de 500px, e
   a área útil do telefone do dono, a 390px com as margens de 16px, é 358px.
   O resultado era arrastar de lado DENTRO da tabela para ler a própria
   resposta e para alcançar o botão.

   O contador e o filtro reusam `.filtros`, que a fundação já desenhou e
   fotografou para a galeria de posts: é a mesma pergunta ("quantos, e de que
   tipo?") e não merece um segundo componente.

   NA B (plano da B, 5.3) a caixa e a irma da lista de Posts: a cabeca com a
   pendencia em palha, o filtro segmentado, o titulo de secao com a contagem,
   e o cartao com o selo palha em cima e a pergunta como titulo. */

/* O nome do grupo, quando a caixa tem dos dois tipos: e ele que explica por
   que as perguntas que seguram post vieram para cima. NA B E TITULO DE
   SECAO (700 a 19px, como `.subtitulo`), com a contagem em miudo: era um fio
   com rotulo de 13px, e a contagem so estava no filtro. */
.pedidos-grupo {
  margin: var(--espaco-7) 0 var(--espaco-3);
  font-family: var(--fonte-titulo);
  font-variation-settings: normal;
  font-weight: 700;
  font-size: var(--letra-5);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--tinta);
}
.pedidos-grupo small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--neutro); font-variant-numeric: var(--algarismos); }
/* O primeiro vem logo abaixo dos botoes de filtro, que ja sao uma divisao. */
.filtros + .pedidos-grupo { margin-top: 0; }

/* O CARTAO DA PERGUNTA. O que segura post leva o fio palha, como o cartao de
   Posts que espera o dono (`.post.pede`). A LARGURA PARA NA DA LEITURA: o
   texto e o campo param em 74ch, e com o cartao na largura inteira (1.116px
   a 1440) o numero da pergunta ia parar a 400px do resto do cartao (OLHADO
   no retrato). */
.pedido-cartao { max-width: 920px; padding: 16px 20px 20px; }
/* EM TELA LARGA, DUAS COLUNAS DE CARTOES. Um so cartao de 920px deixava
   metade da tela vazia a 1920 (o dono reclamou, 26/09); lado a lado, cada um
   fica com uns 780px, perto da largura de leitura de sempre. */
@media (min-width: 1600px) {
  .fichas:has(> .pedido-cartao) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4); align-items: start; }
  .pedido-cartao { max-width: none; }
  .respondidos { max-width: none; }
}
.pedido-cartao.pedido-segura { border-color: var(--alerta-fio); }
/* O BOTÃO DO ARQUIVO EM PORTUGUÊS (27/10/2026): o rótulo é o botão, e o nome
   do arquivo escolhido aparece ao lado. */
.pedido-arquivo label.botao { display: inline-flex; gap: var(--espaco-2);
  align-items: center; cursor: pointer; }
.pedido-arquivo label.botao .texto-mini { font-weight: 400; }
.pedido-arquivo input[type=file]:focus-visible + label { outline: 2px solid var(--foco); }
/* PRIMEIROS PASSOS (27/10/2026): o essencial em blocos, a cor com seletor, e
   o respiro entre o formulário da identidade e o do local, no Avançado. */
.pp-essencial { margin-bottom: var(--espaco-4); }
.pp-cor input[type=color] { width: 72px; height: 42px; padding: 3px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-1);
  background: var(--papel); cursor: pointer; }
.pp-respiro { border: 0; border-top: 1px solid var(--borda); margin: var(--espaco-5) 0; }
details.pp-avancado { margin-top: var(--espaco-5); }
details.pp-avancado > details { margin-left: var(--espaco-3); }
/* AS QUE PODEM ESPERAR, COM RESPIRO: o resto numa dobra fechada. */
details.pedidos-mais { margin-top: var(--espaco-4); }
/* A linha de cima: o tipo a esquerda; o "por que?" e o numero a direita. */
.pedido-topo {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin: 0 0 var(--espaco-2);
}
.pedido-topo .porque, .pedido-topo .etiqueta + .pedido-n { margin-left: auto; }
.pedido-n {
  font-weight: 500;
  font-size: var(--letra-2);
  font-variant-numeric: var(--algarismos);
  color: var(--neutro);
}
/* A PERGUNTA E O TITULO DO CARTAO (650 a 16px). `font-variation-settings`
   volta ao normal: o da ficha (`"wght" 600`) venceria o peso. */
.pedido-cartao .afirmacao {
  max-width: 74ch;
  margin: 0 0 var(--espaco-3);
  font-variation-settings: normal;
  font-weight: 650;
  font-size: 16px;
  line-height: 1.35;
}

/* As linhas que explicam a pergunta. Eram quatro margens escritas à mão no
   HTML, uma delas NEGATIVA para desfazer a anterior. */
.pedido-porque {
  display: grid;
  gap: var(--espaco-2);
  margin: 0 0 var(--espaco-4);
}
/* O que responder faz, JUNTO do que a pergunta segura: em verde de ler
   quando destrava, em palha quando nao destrava -- e essa segunda muda a
   decisao, porque responder nao solta o post. */
.pedido-destrava { margin: 0; max-width: 74ch; font-size: 14px; line-height: 1.5; color: var(--acento-texto); }
.pedido-nao-destrava { margin: 0; max-width: 74ch; font-size: 14px; line-height: 1.5; color: var(--alerta); }
.pedido-nao-destrava a { color: inherit; }
.pedido-sustenta {
  margin: var(--espaco-1) 0 0;
  padding-left: var(--espaco-5);
}

.pedido-botoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }

/* A caixa da resposta tem a MESMA medida do texto que se lê ao lado dela. A
   1280px o cartão tem 1200px, e um campo dessa largura para escrever "R$ 97
   por mês" pede um parágrafo que o estúdio não quer -- a resposta vira lastro,
   e lastro é uma frase. */
.pedido-cartao .campo { max-width: 74ch; }

/* O QUE A RESPOSTA VIRA, logo abaixo do botao: era "vira o fato [...]" na
   linha de cima, em letra de maquina e no verde de ler. O codigo e o mesmo
   que o pe de cada fato do Cerebro mostra, e sai no tom do texto.
   O CODIGO DESCE INTEIRO para a linha de baixo, e so parte quando e maior
   que a linha toda: partido no hifen ele parecia duas coisas, justo o texto
   que o dono bate com o do Cerebro (MEDIDO a 320: "[horas-de-garimpo-por-"
   numa linha e "dia]" na outra). Ver `.cerebro-pe .chave`. */
.pedido-vira { margin: var(--espaco-3) 0 0; font-size: var(--letra-2); line-height: 1.45; color: var(--neutro); }
.pedido-vira .chave { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: inherit; color: var(--tinta-2); }
.pedido-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); }

/* --- ja respondidos: uma lista so, uma linha por resposta ----------------

   NA B E A LISTA DE LINHAS SEPARADAS POR FIO, como "O que volta do Claude"
   no desenho da campanha: um cartao so, e nao um cartao por resposta. A
   dobra continua a dobra da casa (`<details class="dobra" id="respondidos">`
   e literal: um teste le). */
#respondidos > summary .pedidos-conta { font-weight: 600; font-variant-numeric: var(--algarismos); color: var(--tinta-2); }
.respondidos {
  display: grid;
  max-width: 920px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}

.respondido {
  display: grid;
  /* Duas trilhas: o que se lê, e a prova. A segunda é `auto`, então some
     sozinha quando não há arquivo nenhum -- sem regra a mais.
     A primeira para na medida de leitura em vez de comer a linha inteira: com
     `1fr` a 1280px, a miniatura ia parar a novecentos pixels da resposta a que
     ela pertence. No telefone o teto é maior que a tela, e a trilha
     simplesmente ocupa o que existe. */
  grid-template-columns: minmax(0, 76ch) auto;
  gap: var(--espaco-2) var(--espaco-4);
  align-items: start;
  padding: 14px 20px;
}
.respondido + .respondido { border-top: 1px solid var(--borda); }
.respondido-troca { grid-column: 1; min-width: 0; }
/* A miniatura acompanha as duas linhas do bloco, e não só a primeira. */
/* O nome do arquivo fica escrito embaixo dela: morava so no `title`. */
.respondido-prova {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  gap: var(--espaco-1);
  justify-items: start;
  max-width: 132px;
  font-size: var(--letra-2);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.respondido-prova-nome { color: var(--neutro); }
/* A PERGUNTA É O CONTEXTO, A RESPOSTA É O ASSUNTO: quem olha esta lista quer
   conferir o que ELE disse ao estúdio. Na tabela as duas tinham o mesmo peso,
   e nenhuma das duas cabia. */
.respondido-pergunta { margin: 0; font-size: var(--letra-3); color: var(--neutro); }
.respondido-pergunta .pedido-n { margin-right: var(--espaco-1); }
.respondido-resposta {
  margin: 3px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--tinta);
}
/* A data e o "não resolveu" andam JUNTOS, encostados na margem. Empurrados
   para as duas pontas, a 1280px ficavam novecentos pixels um do outro e
   paravam de parecer a mesma linha. */
.respondido-pe {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-4);
}
/* A data em algarismos de mesma largura, SO nela: os campos herdam a fonte de
   quem os cerca (`font: inherit`), e o que se digita no "o que faltou" e
   frase. */
.respondido-pe > span {
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--neutro);
}

/* --- o cérebro -----------------------------------------------------------

   NO TELEFONE, A PORTA ANTES DO ARMÁRIO. A tela tinha duas colunas: os fatos
   à esquerda, três formulários à direita. Empilhada, a lista de fatos vem
   primeiro -- e MEDIDO com 35 fatos, "Alimentar o cérebro", que é a razão de
   abrir esta tela no telefone, ficava a 7.000px de rolagem do topo.

   NO COMPUTADOR NADA MUDA: a coluna das ferramentas é uma caixa só, com a
   porta de alimentar em cima das duas ferramentas de mão. No telefone essa
   caixa some com `display: contents` -- os dois blocos passam a ser itens da
   própria grade -- e só então `order` consegue subir a porta para antes da
   lista.

   POR QUE NÃO ATRAVESSAR FILEIRA. A primeira tentativa foi deixar os fatos
   ocupando as duas fileiras da direita. Não funciona: o item que atravessa
   fileiras de tamanho automático reparte a altura dele entre as duas, e a de
   cima cresceu com a lista -- MEDIDO, 1.715px de buraco entre "Alimentar o
   cérebro" e "Acrescentar fato à mão". Nem `max-content` resolve, porque a
   fileira continua intrínseca e o item que atravessa continua contando para
   ela. */
.cerebro-fatos { min-width: 0; }
.cerebro-mais { min-width: 0; }
/* O titulo de secao da primeira lista encosta no alto da coluna, na altura
   do cartao de alimentar ao lado. */
.cerebro-fatos > .subtitulo:first-child { margin-top: 0; }

/* O mesmo ponto em que `.duas` desiste da segunda coluna. */
@media (max-width: 900px) {
  .cerebro-ferramentas { display: contents; }
  .cerebro-digerir { order: -1; margin-bottom: 0; }
}

/* O CARTAO DO FATO (plano da B, 5.3): os selos em cima, a AFIRMACAO COMO
   TITULO, o detalhe em apoio, e o pe miudo com a procedencia e o codigo. O
   titulo e 600 a 15,5px, e nao os 650 a 16px do cartao de post: ha fato de
   cinco linhas no Cerebro da VPS, e cinco linhas em 650 viravam um bloco
   de negrito (OLHADO a 1440 e a 390). O codigo sai no tom do texto, e nao
   no verde de ler: e para conferir, e nao para clicar.
   NO COMPUTADOR AS DUAS ACOES SOBEM PARA A LINHA DOS SELOS, a direita:
   numa fileira propria, embaixo, cada um dos 32 fatos da VPS crescia uns
   40px, e a pagina 22% (MEDIDO a 1440: 7.346 antes da B, 8.938 com a
   fileira). Ate 1.060px elas voltam para o fim do cartao: ali a linha dos
   selos nao tem largura para elas (ver o bloco de 1.060px, no fim deste
   trecho). */
.cerebro-fato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "selos acoes" "titulo titulo" "apoio apoio" "pe pe";
  column-gap: var(--espaco-4);
  align-items: start;
}
.cerebro-fato > .itens:first-child { grid-area: selos; margin: 0 0 10px; }
.cerebro-fato > .fato-acoes { grid-area: acoes; justify-content: flex-end; }
.cerebro-fato .afirmacao {
  grid-area: titulo;
  max-width: 74ch;
  margin: 0 0 6px;
  font-variation-settings: normal;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.4;
}
.cerebro-fato > .texto-apoio { grid-area: apoio; margin: 0 0 var(--espaco-1); }
.cerebro-pe {
  grid-area: pe;
  margin: var(--espaco-1) 0 0;
  font-size: var(--letra-2);
  line-height: 1.5;
  color: var(--neutro);
}
/* O CODIGO DESCE INTEIRO para a linha de baixo, e so parte quando e maior
   que a linha toda. Partido no hifen ele parecia duas coisas, e e o texto
   que o dono bate com o "[filtro-cidade]" de Pedidos e do aviso de post
   travado -- e o que ele copia (`user-select: all`). MEDIDO antes: 7 dos 32
   codigos partidos em duas linhas a 1440, 4 a 1280, 8 a 390 e 6 a 320;
   depois, nenhum, nem a 320, e a M1 continua zero. */
.cerebro-fato .cerebro-pe .chave { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: inherit; color: var(--tinta-2); user-select: all; }
/* O SELO DO FATO NAO PARTE: "Com prova" em duas linhas, dentro do selo,
   virava duas palavras soltas (MEDIDO: 11 a 13 dos 13 selos "Com prova"
   partiam, de 721 a 736px e de 901 a 1.060px). So dentro do cartao do fato,
   onde o selo e texto fixo curto -- a categoria (a mais longa,
   "Resultado"), "com prova" e "so para responder"; a `.etiqueta` da casa
   continua quebrando, porque em outras telas ela mostra termo longo. */
.cerebro-fato .etiqueta { white-space: nowrap; }
/* As duas ações do fato são secundárias: a tela existe para mostrar o que o
   estúdio sabe, não para desfazer. */
/* Na B, o botao pequeno da casa, e as duas sem caixa (`fantasma`): com a
   borda, "Marcar so para responder" era a coisa mais pesada da linha dos
   selos, em cada um dos 32 fatos, e disputava o olho com a afirmacao. */
.fato-acoes form { margin: 0; }

/* O "E se o arquivo contradisser?" abre no lugar, abaixo do verde. A folga
   de cima e a do dedo: a caixa de toque do "por que?" tem 44px, e ela fica a
   pelo menos 8px do botao (plano da B, 4.4). */
.cerebro-digerir .porque { margin-top: 24px; }

/* ATE 1.060PX AS ACOES DO FATO DESCEM PARA O FIM DO CARTAO, como no
   telefone. Nessa faixa a coluna dos fatos nao tem largura para os selos e
   os dois botoes na mesma linha: MEDIDO varrendo de 10 em 10px, de 931 a
   1.001px o "Marcar so para responder" cobria o selo da categoria em 27 a
   30 dos 32 fatos (ate 56px por cima dele; a 964 lia-se "Produ"), e de
   1.011 a 1.024 (o iPad deitado) ainda em 4. Depois deste bloco: zero, de
   721 a 1.100px. A partir de 1.061px a linha dos selos cabe tudo, e a M5 a
   1.280 e a 1.440 nao muda. O bloco de 720px, mais abaixo, so poe a
   fileira e o alvo do dedo. */
@media (max-width: 1060px) {
  .cerebro-fato {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "selos" "titulo" "apoio" "pe" "acoes";
  }
  .cerebro-fato > .fato-acoes { justify-content: flex-start; margin-top: 10px; }
}
/* [/dono: casa] */

/* [dono: nucleo] */
/* O parágrafo que explica uma caixa de formulário. `.texto-apoio` não carrega
   margem de baixo -- dentro de um cartão quem separa é o grid --, e aqui ele
   encostava no campo seguinte. */
.bloco .texto-apoio { margin-bottom: var(--espaco-3); }
/* [/dono: nucleo] */

/* [dono: casa] */
/* A caixinha de marcar, que é um rótulo que NÃO é rótulo de campo: sem isto
   ela herda a caixa alta, o espaçamento de letra e o cinza de `label`, e "é
   capacidade do produto" vira etiqueta em vez de frase. */
.campo-caixinha {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--letra-3);
  font-variation-settings: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
  cursor: pointer;
}
.campo-caixinha input { width: auto; margin: 0; }
/* A caixinha e o "por que?" dela na mesma fileira. A FOLGA E A DO DEDO: a
   caixa de toque do "por que?" tem 44px e passa 14px acima e abaixo do texto
   dele, e dois alvos ficam a 8px um do outro (plano da B, 4.4) -- 22px ate o
   campo de cima e o de baixo, e 22px entre as fileiras quando o "por que?"
   desce para a de baixo, no telefone. */
.cerebro-capacidade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 24px;
  margin: 22px 0;
}

/* As provas guardadas. Era uma tabela de três colunas para o que é, no fundo,
   um mural: no telefone a miniatura de 72px espremia a descrição numa coluna
   de cem e pouco pixels. Na B, cartao a cartao, com a miniatura no poco. */
.provas { display: grid; gap: 10px; }
.prova-linha {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--espaco-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
.prova-alvo { flex: none; line-height: 0; border-radius: var(--raio-1); }
.prova-texto { min-width: 0; }
.prova-descricao { margin: 6px 0 0; font-size: 14px; color: var(--tinta); }
/* O caminho no disco é longo e não tem espaço nenhum para quebrar: sem isto
   ele empurra a largura da tela e a página inteira anda para o lado. */
.prova-arquivo {
  display: inline-block;
  margin-top: var(--espaco-1);
  font-size: var(--letra-2);
  font-variant-numeric: var(--algarismos);
  word-break: break-all;
}

/* --- celular, MEDIDO a 390 x 844 ----------------------------------------- */

@media (max-width: 720px) {
  /* Decisão que muda o cérebro merece alvo de dedo inteiro: três botões
     picados numa fileira de 358px viram três linhas tortas, e a escolha
     errada fica a um milímetro da certa. */
  /* 44px de altura: a medida do dedo da casa. */
  .pedido-botoes { display: grid; grid-template-columns: 1fr; }
  .pedido-botoes button { min-height: 44px; }
  /* O "Responder" na largura inteira, como o verde de Posts no telefone, e o
     "Nao se aplica" logo abaixo, com a mesma altura de dedo. */
  .pedido-acoes { display: grid; grid-template-columns: 1fr; }
  .pedido-acoes button { min-height: 44px; }
  .pedido-cartao { padding: 16px; }

  /* A prova desce para baixo do texto em vez de disputar a largura com ele. */
  .respondido { grid-template-columns: minmax(0, 100%); padding: 14px 16px; }
  .respondido-prova { grid-column: 1; grid-row: auto; max-width: none; }
  .reabrir input[type=text] { min-height: 40px; }
  .reabrir button { min-height: 40px; }

  /* As acoes do fato, ja no fim do cartao (o bloco de 1.060px), com alvo
     de 36px: sao secundarias, mas sao dedo (a faixa de 36 a 40px do
     inventario).
     NUMA FILEIRA SO, tambem a 320px: ali "Marcar so para responder" e
     "Desativar" nao cabem lado a lado (254px de cartao), e a fileira partia
     em duas -- 80px por fato, e a pagina 11% mais alta que antes da B
     (MEDIDO: 14.939 -> 16.608). Agora o primeiro botao encolhe e o rotulo
     dele quebra em duas linhas dentro do botao, so nessa largura. */
  .cerebro-fato > .fato-acoes { flex-wrap: nowrap; }
  .fato-acoes form { flex: 0 1 auto; min-width: 0; }
  .fato-acoes button { max-width: 100%; min-height: 36px; }
}
/* [/dono: casa] */

/* [dono: conteudo] */
/* =========================================================================
   === tela: automático ===
   O que o estúdio faz sozinho: ritmo, pausa, carrossel, teto e o sinal de
   vida dos serviços. Tudo prefixado com `auto-`, pelo mesmo motivo do `cal-`
   do calendário -- ver a nota sobre `.quando` em testes/test_folha_de_estilo.py.
   Nenhuma cor nova: só os tokens do topo desta folha.
   ========================================================================= */
/* [/dono: conteudo] */

/* [dono: nucleo] */
/* O GASTO DE HOJE, dos dois lados.

   DOIS CARTÕES, E NÃO UMA SOMA. Imagem é dinheiro de verdade no OpenRouter;
   texto roda na assinatura do Claude Code e é só equivalente de API. Somar os
   dois num número só esconderia exatamente a diferença que importa para quem
   paga a conta. */
.auto-gastos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-4);
}
/* NO SAAS, O LIMITE DO PLANO numa frase so, no lugar dos dois cartoes: o
   mesmo respiro embaixo, para a secao seguinte nao colar nela. */
.auto-plano { margin-bottom: var(--espaco-4); }

/* O CARTAO DO GASTO: fio e degrau, sem o fio verde de 3px -- gasto nao e
   decisao, e a barra logo abaixo ja e o sinal de quanto andou. */
.auto-gasto {
  background: var(--papel-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  padding: var(--espaco-4);
}
/* Batido, o cartão muda de cor -- e o texto embaixo dele muda de frase. A cor
   sozinha não conta nada a quem não a distingue. */
.auto-gasto.bateu { border-color: var(--alerta-fio); background: var(--alerta-fraco); }

.auto-gasto-nome {
  margin: 0 0 var(--espaco-2);
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-4);
}
.auto-gasto-nome span {
  display: block;
  font-family: var(--fonte-texto);
  font-variation-settings: normal;
  font-size: var(--letra-2);
  font-weight: 400;
  color: var(--neutro);
  margin-top: 2px;
}
.auto-gasto-conta { margin: 0 0 var(--espaco-2); font-size: 14px; color: var(--tinta-2); }
.auto-gasto-conta b {
  font-family: var(--fonte-numero);
  font-size: var(--letra-5);
  color: var(--tinta);
  font-variant-numeric: var(--algarismos);
}

/* A barra é ilustração do número que já está escrito em cima: `aria-hidden` no
   HTML, para o leitor de tela não dizer a mesma coisa duas vezes. */
.auto-barra {
  height: 6px;
  border-radius: var(--raio-pilula);
  background: var(--papel-3);
  overflow: hidden;
}
.auto-barra i { display: block; height: 100%; background: var(--acento); }
.auto-gasto.bateu .auto-barra i { background: var(--alerta); }
/* [/dono: nucleo] */

/* [dono: conteudo] */
/* O SINAL DE VIDA DOS SERVIÇOS. Não é enfeite de administrador: enquanto o
   serviço que escuta os botões está parado, tocar em Aprovar no Telegram não
   faz nada -- o botão gira e o post não sobe. Ver motor/vigia.py. */
.auto-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--espaco-2) var(--espaco-4);
  margin-top: var(--espaco-4);
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
}
.auto-servico { display: flex; align-items: flex-start; gap: var(--espaco-2); }
.auto-servico b {
  display: block;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 650;
  font-size: var(--letra-3);
}
.auto-servico small {
  display: block;
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--neutro);
}
.auto-sinal {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--raio-pilula);
  background: var(--acento);
}
.auto-sinal.calado { background: var(--falha); }
/* Quem ainda não deu sinal nenhum não é "parado": é um serviço em que a
   batida ainda não foi instalada. Pintar isso de vermelho é ensinar o dono a
   ignorar vermelho. Ver SO_DEPOIS_DO_PRIMEIRO_SINAL em motor/vigia.py. */
.auto-sinal.mudo { background: var(--borda-forte); }

/* OS DIAS DA SEMANA. Sete caixas de marcar, e no telefone elas precisam ser
   ALVO DE DEDO: a caixa nativa tem 13px, e sozinha ela é um alvo que erra.
   Envolver cada uma num rótulo com borda dá 44px de altura sem inventar
   componente novo -- e clicar no nome do dia passa a marcar o dia. */
.auto-dias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px;
}
.auto-dia {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  padding: 10px var(--espaco-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  background: var(--papel);
  cursor: pointer;
  /* `label` global é rótulo de campo: caixa alta, 11px e cor de apoio. Aqui o
     texto é o nome do dia, e ele precisa se ler como texto. */
  font-family: var(--fonte-texto);
  font-size: var(--letra-3);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-2);
}
.auto-dia:hover { border-color: var(--borda-forte); }
.auto-dia input { width: 17px; height: 17px; margin: 0; accent-color: var(--acento); }
/* O dia escolhido se distingue pela borda e pelo peso da letra, e não por
   elevação: no tema escuro dois fundos vizinhos chegam a diferir 1,06:1, e a
   pastilha ativa fica literalmente invisível. Mesma lição de `.seletor-frente`. */
.auto-dia:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-fraco);
  color: var(--tinta);
}

/* O CAMPO TEM A LARGURA DO QUE SE ESCREVE NELE. Em grade de `1fr` o campo de
   hora ficava com 350px em 1280px de tela, para guardar cinco caracteres -- e
   campo gigante com quatro dígitos dentro parece defeito, não folga. Aqui eles
   têm tamanho próprio e quebram a linha sozinhos quando não couberem. */
.auto-horas { display: flex; flex-wrap: wrap; gap: 6px; }
.auto-horas input { flex: 0 1 150px; }
.auto-quantos input { max-width: 120px; }
/* "Como esta indo" virou titulo de secao (era a sobrelinha): logo depois da
   cabeca da tela, ele nao repete o ar grande do `.subtitulo`. */
.auto-secao { margin-top: var(--espaco-5); }
/* A HORA E O "QUANTOS POR DIA" VESTEM A PELE DOS OUTROS CAMPOS (SISTEMA
   5.18). A regra dos campos, no nucleo, so pega texto, senha, arquivo, lista
   e caixa de texto, e estes dois ficavam com a cara do navegador ao lado do
   Teto -- MEDIDO na conferencia da 5.1: 24px de altura (21 no numero), letra
   de maquina de 13,3px, fundo cinza rgb(59,59,59) e canto reto, contra 42px,
   Archivo 15px, canto de 8px e o fundo da pagina. As mesmas declaracoes da
   regra do nucleo; a largura continua a de cada um (`flex` e `max-width`,
   logo acima). */
.auto-horas input[type=time], .auto-quantos input[type=number],
input[type=date], .post-quando-campos input[type=time], .cal-marcar input[type=time] {
  min-height: 42px;
  font: 400 15px/1.3 var(--fonte-texto);
  padding: 9px 11px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--papel);
  color: var(--tinta);
  transition: border-color 150ms, box-shadow 150ms;
}
.auto-quantos input[type=number] { width: 100%; }
/* O "POR QUE?" DE CADA AJUSTE (INVENTARIO-conteudo 8.3): a frase inteira
   saiu da frente e mora aqui, na linha de baixo da frase curta. Em linha
   propria, e nao ao lado do texto: a caixa de toque de 44px dele nao pode
   encostar no botao nem no campo vizinho (plano 4.4). */
details.auto-porque { display: block; width: fit-content; margin-top: 6px; }
/* O botao de voltar a produzir desce um pouco SO quando o "por que?" da
   pausa mora logo acima dele (com post aprovado marcado): sem ele, o verde
   fica onde estava (MEDIDO a 390: 374px; com a margem sempre, 380). */
details.auto-porque + .auto-voltar { margin-top: var(--espaco-3); }
/* O NUMERO QUE NAO E ZERO E LINK para o que ele conta (INVENTARIO-conteudo
   8.2, item 6). O desenho do numero grande e o mesmo; o nome embaixo ganha o
   sublinhado, que e o que diz "da para tocar". */
.auto-numero { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.auto-numero span {
  text-decoration: underline;
  text-decoration-color: var(--borda-forte);
  text-underline-offset: 3px;
}
.auto-numero:hover span { color: var(--tinta); text-decoration-color: currentColor; }
/* [/dono: conteudo] */
/* [dono: nucleo] */
.auto-dinheiro input { max-width: 200px; }
/* [/dono: nucleo] */

/* [dono: conteudo] */
@media (max-width: 720px) {
  /* OS SETE DIAS EM DUAS FILEIRAS EXATAS, pela mesma conta do menu lá em
     cima: quatro colunas, e o último (domingo) valendo por duas. Em três
     colunas sobrava um dia sozinho numa terceira fileira -- o mesmo defeito
     que a sétima aba do menu tinha. MEDIDO em 390px: 88px por coluna, e
     "segunda", que é a palavra mais larga, cabe com a caixa de marcar ao
     lado quando o vão interno encolhe. */
  .auto-dias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .auto-dia { padding: 10px 6px; gap: 5px; font-size: 12.5px; }
  .auto-dia:last-child { grid-column: span 2; }
  .auto-dia input { width: 15px; height: 15px; }
  /* METADE DA LARGURA, e sem crescer: com `flex-grow` o campo de horário que
     sobrava sozinho na última fileira esticava para os 358px inteiros -- um
     campo vazio do tamanho da tela para escrever cinco caracteres. */
  .auto-horas input { flex: 0 1 calc(50% - 3px); }
  /* 16px, como a regra dos campos do nucleo: abaixo disso o Safari do
     iPhone amplia a tela inteira quando o dedo toca a hora. */
  .auto-horas input[type=time], .auto-quantos input[type=number],
  input[type=date], .post-quando-campos input[type=time], .cal-marcar input[type=time] { font-size: 16px; }
  /* 8px ENTRE DOIS ALVOS (plano 4.4): a caixa de toque do "por que?" desce
     14px abaixo do texto dele, e embaixo moram o campo "Quantos por dia" e o
     botao Pausar. Enchimento, e nao margem: a margem se juntava com a do
     `.campo` (12px) e nao somava nada. MEDIDO a 390, 360 e 320: sem ele,
     0,5px entre os dois alvos. */
  details.auto-porque { padding-bottom: 10px; }
}
/* [/dono: conteudo] */

/* [dono: anuncios] */
/* =========================================================================
   === frente: anúncios ===

   POR QUE ESTA FRENTE TEM TRATAMENTO PRÓPRIO, e por que isso não é uma
   segunda marca. Conteúdo é utilitária de propósito: o dono a usa em pé, no
   telefone, para aprovar post. Anúncios é onde ele senta para decidir gastar
   dinheiro de mídia -- e decisão de dinheiro pede tempo de leitura, hierarquia
   e superfície. A cor e a tipografia continuam sendo as do painel, sem
   um token novo: o que muda é DENSIDADE, ESPAÇO e SUPERFÍCIE.

   As três diferenças, e elas são as únicas:

     1. PAINEL, e não lista corrida. Cada assunto da tela (o que a campanha
        quer, quanto custa, quem vai ver) mora numa caixa própria, com raio
        maior (--raio-3) do que o resto da ferramenta usa. Caixa custa espaço,
        e por isso Conteúdo não as tem: lá o dono rola, aqui ele compara.

     2. O NÚMERO É O ASSUNTO. Verba, período e quantidade viram medida com
        rótulo em caixa alta e valor grande em Archivo -- a mesma ideia do
        `.numerao` de Desempenho, aplicada dentro do painel.

     3. AS DUAS MOEDAS NÃO SE ENCOSTAM. Ver a seção "as duas moedas" mais
        abaixo: é a regra mais importante desta folha inteira.

   Prefixo `anu-` em tudo, pelo mesmo motivo do `cal-` e do `auto-`: a folha é
   uma só e nome genérico colide sem avisar. Ver a nota sobre `.quando` no
   topo de testes/test_folha_de_estilo.py.
   ========================================================================= */

/* --- o painel: a superfície desta frente --------------------------------- */

/* O PAINEL É UM CARTÃO SOBRE UMA MESA, e não uma caixa desenhada no papel.
   Ele já era `--papel-2`. O que mudou está no bloco de superfície lá em cima:
   nesta frente `--papel-2` passou a ser mais CLARO que a página, e não mais
   escuro. Some a isso 1px de sombra e o painel deixa de ser buraco cavado no
   papel para virar objeto pousado na mesa. Dois degraus de nada -- 1,17:1 de
   fundo e uma sombra que ninguém consegue apontar -- são o que separa
   "montado" de "impresso".

   E O VÃO ENTRE PAINÉIS SUBIU PARA 30px. Era 22px: o MESMO valor do respiro
   interno. Com o vão entre grupos igual ao vão dentro do grupo, não há grupo
   -- o olho lê a tela inteira como uma pilha só, e foi isso que produziu o
   "nenhuma respiração entre assuntos diferentes". */
.anu-painel {
  background: var(--papel-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  box-shadow: var(--anu-elev-1);
  padding: var(--espaco-5);
  margin-bottom: var(--espaco-6);
}

/* O SUBTÍTULO FICA EMBAIXO DO TÍTULO, e não ao lado dele. Lado a lado com
   `space-between`, numa tela de 1.280px, a frase explicativa acabava colada
   na borda direita, a um palmo do título que ela explica -- e a linha do
   olho tinha que atravessar a tela vazia para ligar as duas. */
.anu-painel-cabeca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: var(--espaco-4);
}
.anu-painel-cabeca h2 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--letra-5);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
}
.anu-painel-cabeca p { margin: 0; font-size: var(--letra-3); color: var(--neutro); max-width: 62ch; }

/* --- a medida: rótulo em caixa alta, valor grande, nota miúda ------------ */

.anu-medidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--espaco-4) 0;
}
/* O RESUMO DA LISTA NÃO REPARTE A LARGURA EM PARTES IGUAIS. Contagem cabe em
   duas palavras; a verba carrega o número, o total do período e a frase que
   diz para quem esse dinheiro vai. Em três trilhas de 1fr a contagem ficava
   com 380px de vazio e a explicação da verba quebrava em quatro linhas. */
.anu-resumo { grid-template-columns: minmax(0, 170px) minmax(0, 220px) minmax(0, 1fr); }
/* O fio entre as medidas, e não uma caixa por medida. Elas são quatro leituras
   do MESMO objeto -- separá-las em cartões sugeriria quatro coisas.

   AQUI JÁ HOUVE UM `subgrid`, e ele foi TIRADO em 24/09/2026. A ideia era boa
   (alinhar os valores das quatro medidas na mesma linha de base, para o fio
   vertical ter contra o que alinhar), e a execução tinha um furo medido: ela
   dava `grid-row: span 3` a toda medida, e a medida da verba tem QUATRO filhos
   -- rótulo, valor, nota, e o total do período. O quarto caía POR CIMA do
   terceiro, e na tela de campanhas o "R$ 900,00 nos períodos já escritos"
   ficava ilegível, escrito em cima da explicação.

   Quem for tentar de novo: o `span` tem que ser o número real de filhos da
   medida mais alta, e não um número escrito à mão. */
.anu-medida {
  padding: 0 var(--espaco-5);
  border-left: 1px solid var(--borda);
  min-width: 0;
}
.anu-medida:first-child { padding-left: 0; border-left: 0; }

/* O NOME DA MEDIDA EM FRASE COMUM (SISTEMA 5.13): 13px, 600, tinta de apoio.
   Era 10,5px espacado em caixa alta -- a letra mais fraca da tela em cima do
   numero que a tela existe para mostrar. */
.anu-rotulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-3);
  color: var(--tinta-2);
  line-height: 1.2;
  margin-bottom: 6px;
}

/* O NUMERO DE FICHA (SISTEMA 5.13): largo, pesado, em tinta cheia. */
.anu-valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 750;
  font-size: var(--anu-numero);
  font-stretch: var(--largura-numero);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--tinta);
  font-variant-numeric: var(--algarismos) lining-nums;
}
/* O valor que ainda não existe não pode pesar como um que existe. O PESO 500
   SAIU: `--neutro` já distingue o travessão do número, e um peso intermediário
   que aparecia duas vezes na folha inteira é um degrau que ninguém mais ia
   lembrar de manter. */
.anu-valor.anu-vazio { color: var(--neutro); font-weight: 600; }

.anu-nota {
  display: block;
  margin-top: var(--espaco-1);
  font-size: var(--letra-2);
  line-height: 1.45;
  color: var(--neutro);
  /* 44ch, e não 34ch. A nota mora numa coluna de medida, ao lado de outras
     três -- mas a 34ch uma frase de duas linhas virava quatro, e quatro
     linhas de nota embaixo de um número de uma linha é parte do que fazia as
     quatro medidas terminarem em quatro alturas diferentes. */
  max-width: var(--anu-medida-nota);
}
/* A MEDIDA LARGA NAO ESTA NUMA COLUNA, e por isso a nota dela nao usa a medida
   de coluna (44ch) e sim a do corpo (68ch). MEDIDO na lista de criativos: a
   terceira trilha tem 592px e a nota parava em 317px -- 275px de trilha que
   nada podia ocupar, com a frase de 99 caracteres quebrando em tres linhas do
   lado de um vazio. */
.anu-medida-larga .anu-nota { max-width: var(--anu-medida); }

/* =========================================================================
   AS DUAS MOEDAS. A regra mais importante desta folha.

   A tela mostrava `gasto US$ 0,0144` ao lado de `R$ 50,00 por dia`, na mesma
   linha e no mesmo tamanho. São dois mundos:

     VERBA DE MÍDIA, em reais, que o dono vai pagar à Meta, na mão, quando
     subir a campanha no Gerenciador. É a decisão que esta tela existe para
     apoiar.

     CUSTO DE PRODUÇÃO, em dólar de centavo, que o Estúdio JÁ gastou de IA
     para escrever e compor os criativos. É contabilidade da ferramenta.

   O desenho separa os dois em TRÊS eixos ao mesmo tempo, porque um só falha:

     lugar    a verba mora no alto, dentro do painel da campanha; a produção
              mora no rodapé da tela, depois de um fio. Nunca na mesma linha.
     peso     a verba é Archivo grande; a produção é mono pequena e neutra --
              a mesma fonte e o mesmo tom do resto da contabilidade.
     palavra  a verba vem sob o rótulo VERBA DE MÍDIA, e nunca aparece sem a
              frase de VERBA_EXPLICA por perto; nenhum "US$" aparece nesta
              frente sem a palavra "produção" colada nele.

   Quem escreve as duas frases é motor/campanha.py (CUSTO_IA_EXPLICA e
   VERBA_EXPLICA), para as duas telas não inventarem explicações diferentes
   para o mesmo número.
   ========================================================================= */

/* A VERBA NAO E MAIS VERDE (decisao #50). Na B o verde cheio e a DECISAO
   nas duas frentes, e o dinheiro se distingue pelo TAMANHO, pela LARGURA e
   pelo LUGAR -- o retrato aprovado mostra "R$ 30,00" em tinta cheia e o
   "Pedir o plano ao Claude" verde. Quem ler "verde quer dizer verba" num
   comentario antigo desta folha: e a doutrina de antes da B. */
.anu-verba .anu-valor { color: var(--tinta); font-size: var(--anu-numero); }
/* A verba no resumo de Campanhas e de Criativos -- e SO la: em Desempenho o
   `.anu-agenda` desliga o destaque, porque verba grande numa tela de
   desempenho se le como resultado (test_desempenho_nao_e_placar.py). */
.anu-resumo:not(.anu-agenda) .anu-verba .anu-valor { font-size: 40px; }
/* O travessao de "nao ha verba escrita" nao e dinheiro: fica neutro, para
   nao pesar como um valor dizendo justamente que nao ha valor nenhum. */
.anu-verba .anu-valor.anu-vazio { color: var(--neutro); }
.anu-verba .anu-nota { max-width: var(--anu-medida-nota); }

/* O total do período, logo abaixo da diária. É o número que decide de verdade
   -- R$ 50 por dia não assusta ninguém; R$ 800 no mês, sim. Só aparece com
   cronograma escrito: multiplicar por um número de dias que ninguém escreveu
   seria inventar um total que o dono leria como promessa. */
.anu-verba-total {
  display: block;
  margin-top: var(--espaco-2);
  font-family: var(--fonte-numero);
  font-size: var(--letra-3);
  color: var(--tinta-2);
  font-variant-numeric: var(--algarismos);
}
.anu-verba-total b { color: var(--tinta); font-variation-settings: normal; }

/* O custo de produção, no rodapé da tela e num registro visual que não se
   confunde com dinheiro de anúncio: mono, miúdo, neutro, atrás de um fio. */
.anu-producao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--espaco-3);
  margin: var(--espaco-5) 0 0;
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--borda);
  font-size: var(--letra-2);
  line-height: 1.5;
  color: var(--neutro);
}
/* O FIO ATRAVESSA A TELA INTEIRA; a frase, não. Com `max-width` no próprio
   bloco, a borda de cima parava no meio da página e parecia defeito. */
.anu-producao span { max-width: 72ch; }
.anu-producao b {
  font-family: var(--fonte-numero);
  font-size: var(--letra-3);
  color: var(--tinta-2);
  font-variant-numeric: var(--algarismos);
}

/* --- o que pede atenção -------------------------------------------------- */

/* NÃO É UM AVISO DE ERRO. São as campanhas que estão esperando uma decisão
   do dono -- por isso o tom de alerta, e não o de falha, e por isso cada
   linha diz o que fazer em vez de só apontar. */
.anu-atencao {
  /* o cartao que pede o dono: fio de palha em volta (SISTEMA 5.10) */
  border: 1px solid var(--alerta-fio);
  /* O RAIO DA FRENTE E UM SO PARA BLOCO: `--raio-3`. `--raio-2` era o degrau
     do meio, e degrau do meio entre 3px e 10px nao se enxerga -- so produz
     caixas que quase combinam. */
  border-radius: var(--raio-3);
  background: var(--alerta-fraco);
  /* O MESMO RESPIRO DO PAINEL, E O MESMO VAO ATE O PROXIMO BLOCO. Ela era
     12px/16px de respiro contra os 22px do painel que fica logo abaixo dela:
     duas caixas do mesmo tamanho na tela, com molduras de tamanhos
     diferentes. E ela e um cartao sobre a mesa como os outros, entao levanta
     o mesmo tanto. */
  padding: var(--espaco-4) var(--espaco-5);
  margin-bottom: var(--espaco-6);
  box-shadow: var(--anu-elev-1);
}
/* O ROTULO DESTE BLOCO E AMBAR, e e o unico rotulo da frente que nao e
   neutro. Ambar nesta casa quer dizer "espera uma decisao sua" -- e este
   bloco e literalmente isso. Em cinza de 10,5px, o titulo da unica coisa da
   tela que pede acao do dono era a linha mais fraca dela. MEDIDO sobre
   `--alerta-fraco`: 5,43:1 no claro e 7,00:1 no escuro. */
.anu-atencao .anu-rotulo { color: var(--alerta); }
.anu-atencao ul { margin: var(--espaco-2) 0 0; padding-left: var(--espaco-4); }
.anu-atencao li { font-size: var(--letra-3); line-height: 1.55; color: var(--tinta-2); }
.anu-atencao li b { color: var(--tinta); font-weight: 600; }
/* A LINHA QUE APONTA O PROBLEMA AGORA LEVA ATE ELE. A tira dizia "pronta e
   vazia nao tem criativo nenhum escrito" e parava ali: o dono lia o nome da
   campanha e tinha que descer a lista procurando o cartao daquele nome --
   casar duas listas com o dedo, que e o contrario de uma tela que diz o que
   fazer. Sem sublinhado em repouso porque sao tres ou quatro linhas seguidas
   e quatro sublinhados viram cerca; o alvo e a LINHA inteira, que num
   telefone e o que o dedo acerta.
   Em Desempenho, onde a mesma tira nao tem link, esta regra nao alcanca
   nada. */
.anu-atencao li a { display: block; color: inherit; text-decoration: none; }
.anu-atencao li a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- a nota honesta: o Estúdio não publica anúncio ----------------------- */

/* Ela não é um aviso de obra. É a descrição do que esta frente É: uma mesa de
   planejamento. Por isso fica em tom de nota, e não de alerta -- alerta que
   aparece em toda tela, todo dia, o dono aprende a não ler. */
.anu-aviso {
  display: flex;
  gap: var(--espaco-3);
  align-items: flex-start;
  padding: var(--espaco-3) var(--espaco-4);
  margin: 0 0 var(--espaco-6);
  border: 1px solid var(--borda);
  /* O RAIO DA FRENTE É UM SÓ PARA CARTÃO: `--raio-3`. `--raio-2` (5px) era o
     degrau do meio, e degrau do meio entre 3px e 10px não se enxerga -- só
     produz caixas que quase combinam. Nesta frente ele não existe mais:
     controle usa `--raio-1`, cartão usa `--raio-3`. */
  border-radius: var(--raio-3);
  background: var(--papel-2);
  box-shadow: var(--anu-elev-1);
}
.anu-aviso p { margin: 0; font-size: var(--letra-3); line-height: 1.55; color: var(--tinta-2); max-width: var(--anu-medida); }
.anu-aviso p b { color: var(--tinta); font-weight: 600; }
.anu-aviso .etiqueta { flex: none; margin-top: 2px; }

/* --- a lista de campanhas: um cartão por campanha ------------------------ */

/* O VAO ATE "NOVA CAMPANHA" SAI DAQUI, e passa a ser o vao de bloco para
   bloco, escrito uma vez so na regra escopada da dobra, no fim deste bloco.
   Eram 22px daqui mais os 40px de `.dobra`: 62px entre a ultima campanha e o
   unico controle da tela, num degrau (40px) que nao existe na escala de
   espaco desta frente -- 4 / 8 / 16 / 22 / 30. */
.anu-cartoes { display: grid; gap: var(--espaco-3); margin-bottom: 0; }

.anu-cartao {
  display: block;
  /* O RESPIRO MORA NAS TRES FAIXAS DE DENTRO (a cabeca, o caminho e o pe),
     cada uma com o fio dela: o cartao da B nao e mais um link inteiro. */
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--papel-2);
  box-shadow: var(--anu-elev-1);
  text-decoration: none;
  color: inherit;
  /* A sombra ja subia no dedo; sem transicao ela PULA, e pulo le-se como
     defeito de desenho, e nao como resposta. 120ms e o tempo de um dedo. Nao
     e animacao de entrada -- nada se move ao carregar -- e a folha ja desliga
     toda transicao em `prefers-reduced-motion`. */
  transition: box-shadow .12s ease, border-color .12s ease;
}
/* O CARTAO RESPONDE AO DEDO COM O FIO FORTE, e nao acende: passar o mouse
   nao e decisao, e na B o verde cheio e so a decisao. */
.anu-cartao:hover { border-color: var(--borda-forte); box-shadow: var(--anu-elev-2); }
/* A campanha pronta ja se distingue na lista, antes de ler a etiqueta: o
   fio forte. O verde fica na `.etiqueta.acento` ao lado do nome. */
.anu-cartao-pronta { border-color: var(--borda-forte); }
/* AMBAR E "ESPERA UMA DECISAO SUA", e e regra da casa inteira -- a mesma cor
   da tira la em cima, agora no cartao que a tira nomeia. Quem decide e a
   macro `pendencia()` do template: uma regra so para os dois lugares, e a
   tira continua sendo o unico lugar em que a FRASE aparece.

   POR QUE NAO VERDE: na B o verde cheio e o BOTAO da decisao, e nao a moldura
   do cartao que a pede. E por que nao em toda campanha pronta: "pronta" sem
   pendencia nao espera nada alem da mao dele no Gerenciador, e cor que pinta
   metade da lista para de significar.

   DEPOIS de `.anu-cartao-pronta` de proposito: uma campanha pronta e vazia
   tem as duas classes, e quem tem que ganhar e a que diz que falta algo. */
.anu-cartao-pede { border-color: var(--alerta-fio); }
/* A ENCERRADA RECUA O DINHEIRO. Numa campanha encerrada aquele numero e
   historia, e lido na mesma tinta cheia das ativas ele entraria na conta do
   mes que o dono esta fazendo de cabeca. */
.anu-cartao-encerrada .anu-valor { color: var(--tinta-2); }

/* O CARTÃO TEM DOIS LADOS, e não uma pilha. À esquerda quem a campanha é
   (nome, estado, objetivo, público); à direita as três medidas, em trilhas de
   mesma largura em TODOS os cartões -- número que não alinha de linha para
   linha não se compara, que é a mesma lição da lista antiga. Sem os dois
   lados, um cartão de 1.150px ficava com texto só no terço da esquerda. */
.anu-cartao-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: var(--espaco-4) var(--espaco-6);
  align-items: start;
}
.anu-cartao-quem { min-width: 0; }

/* TRÊS TRILHAS FIXAS, e não `auto-fit`: com auto-fit o cartão de verba longa
   caía para duas colunas e o de verba curta ficava com três, e os números
   pararam de alinhar de uma linha para a outra -- que é a mesma lição da
   lista antiga. A primeira é a mais larga porque é a que leva o total do
   período embaixo ("R$ 2.480,00 no período"). */
.anu-cartao .anu-medidas { grid-template-columns: 1.3fr 1fr 0.8fr; }
.anu-cartao .anu-medida { padding: 0 var(--espaco-3); }
.anu-cartao .anu-medida:first-child { padding-left: 0; }

/* Dentro do cartão o número é de LISTA, e não de ficha: 27px aqui empilhados
   quatro vezes na tela viram quatro manchetes disputando a mesma leitura. */
/* DENTRO DE UM CARTÃO DE LISTA, VERBA É NÚMERO DE LISTA. O 20px literal era
   um degrau só para ela, entre o 18px das outras medidas do cartão e o 24px
   da ficha -- três tamanhos de número numa frente que tem dois assuntos. */
.anu-cartao .anu-valor { font-size: var(--letra-5); }
.anu-cartao .anu-verba .anu-valor { font-size: var(--letra-5); }

.anu-cartao-nome {
  margin: 12px 0 0;
  font-family: var(--fonte-titulo);
  font-variation-settings: normal;
  font-weight: 750;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--tinta);
  min-width: 0;
  /* O NOME QUEM ESCREVE E O DONO, e um nome sem espaco nenhum
     ("prospeccao-fria-setembro-remarketing") transbordaria a trilha da grade
     e empurraria o selo para fora do cartao. Ele parte dentro da propria
     caixa; o selo nao sai do lugar. */
  overflow-wrap: anywhere;
}
.anu-cartao-sub {
  margin: 6px 0 0;
  font-size: var(--letra-3);
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 78ch;
}
.anu-cartao-sub b { color: var(--tinta); font-weight: 600; }

/* O rodapé do cartão é onde o custo de IA pode aparecer sem se confundir com
   a verba: depois de um fio, em mono miúda, e sempre com a palavra produção. */
.anu-cartao-pe {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--espaco-4);
  margin-top: 0;
  padding: 10px 24px 12px;
  border-top: 1px solid var(--borda);
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--neutro);
}
.anu-cartao-pe b { color: var(--tinta-2); font-variant-numeric: var(--algarismos); }

/* O alerta de uma campanha, dentro do cartão dela. Fica ao lado do número que
   o causou, e não numa lista longe: quem lê "R$ 80,00 por dia" precisa ler
   ali mesmo que isso é mais que o teste inicial. */
.anu-alerta {
  display: block;
  margin-top: var(--espaco-1);
  font-size: var(--letra-2);
  line-height: 1.45;
  color: var(--alerta);
  max-width: 34ch;
}

/* =========================================================================
   A CAMPANHA POR DENTRO, NA B (Etapa 5.2, decisao #50).

   O QUE MUDOU DO DESENHO DE ANTES (o trilho com estado, proximo passo, a
   porta e os numeros): o retrato aprovado desmonta aquele cartao em tres
   lugares. O estado e o periodo subiram para a cabeca da tela; o proximo
   passo virou o MOMENTO, largo, antes das colunas, com o unico verde; e a
   FICHA grudada ficou so com a verba e a grade (objetivo, periodo, publicos,
   criativos). E ela e o ULTIMO filho da coluna dela (C4 do plano): o que
   viesse depois passaria por baixo dela ao rolar.

   O GRUDE CONTINUA, e pela mesma razao medida antes: a verba a vista em 100%
   da rolagem. O teto de altura e a rolagem propria tambem continuam (numa
   janela de notebook de 720px a ficha nao cabe inteira, e grudada pelo topo
   sem rede o pe dela sumiria para sempre).

   A FICHA VEM ANTES NO HTML: abaixo do corte nao ha duas colunas, e no
   telefone ela vem logo depois do momento. Em duas colunas a folha troca a
   ordem com `grid-column` explicito, e nao com `order` -- a ordem do teclado
   e a do HTML.

   O CORTE CONTINUA EM 1080px, como antes da B, e o grude com ele. A 5.2 o
   tinha subido para 1200 (na B `main` tem 244px de trilho e 40 de margem de
   cada lado, e a 1080 a coluna do trabalho caia para 404px com a ficha de
   320 e o vao de 32), mas a conferencia mediu o preco: numa janela de 1100
   a verba sumia ao rolar, e o grude existe para ela ficar a vista em 100% da
   rolagem (C4 do plano). Entre 1080 e 1199 a ficha estreita para 288px e o
   vao para 24, e a coluna do trabalho (444px a 1080) empilha o que ficava
   espremido: a verba do publico embaixo do nome, e o formulario do novo
   criativo numa coluna. A 1200 ela tem 524px, e a 1440, 764px (a do
   retrato).
   ========================================================================= */

.anu-campanha { display: block; }
.anu-campanha-trabalho { min-width: 0; }
.anu-campanha-trilho { min-width: 0; margin-bottom: var(--espaco-7); }

@media (min-width: 1080px) {
  .anu-campanha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--anu-trilho);
    gap: 32px;
    align-items: start;
  }
  /* AS DUAS CELULAS SAO DA MESMA FILEIRA, e as colunas sao explicitas porque
     a ficha vem ANTES no HTML e vai DEPOIS na tela. */
  .anu-campanha-trabalho { grid-column: 1; grid-row: 1; }
  /* O GRUDE SO VALE SE ELE CUMPRIR: teto de altura e rolagem propria, para o
     pe da ficha nunca ficar escondido numa janela baixa. O "por que?" que
     mora nela e `em-linha` (entra no fluxo): uma caixa flutuante seria
     cortada por esta rolagem. */
  .anu-campanha-trilho {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--topo-altura) + var(--espaco-4));
    max-height: calc(100vh - var(--topo-altura) - var(--espaco-5));
    overflow-y: auto;
    margin-bottom: 0;
  }
  .anu-campanha-trilho .anu-nota { max-width: none; }
  /* O vao de painel (30px) embaixo da ficha nao tem o que separar dentro do
     trilho, e no pe da pagina ele empurrava a verba para fora da janela:
     MEDIDO a 1100x800, rolada ate o fim, o numero ficava a -12px. */
  .anu-campanha-trilho > .anu-ficha { margin-bottom: 0; }
}

/* --- a campanha: o painel de cima --------------------------------------- */

/* A FICHA É O QUE O DONO VEIO DECIDIR, e por isso ela é o único painel da
   campanha que recebe a SEGUNDA elevação -- uma por tela, e nesta tela é
   esta. Ela é também a que vai para o trilho grudado acima de 1080px: a
   verba, o período e a contagem ficam à vista enquanto ele rola o plano.

   O FIO DE ACENTO NO TOPO SAIU. Ele existia para dizer "esta caixa é o objeto
   da tela" numa frente que não tinha superfície nenhuma. Na B (decisao #50)
   o verde cheio e so a DECISAO da tela, e a verba se distingue pelo tamanho,
   pela largura e pelo lugar -- um fio verde aqui seria verde sem decisao. */
.anu-ficha { box-shadow: var(--anu-elev-2); }


/* --- o que a campanha quer ---------------------------------------------- */

/* `min(280px, 100%)`: a 320 o painel tem 256px uteis, e a trilha minima de
   280 empurrava o texto para 10px da borda da tela (M13, MEDIDO; a calha da
   casa e 16). Onde cabem duas de 280, nada muda. */
.anu-quer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--espaco-5); }
.anu-quer-item { min-width: 0; }
.anu-quer-item p { margin: 0; font-size: var(--letra-4); line-height: 1.55; color: var(--tinta-2); max-width: 62ch; }

/* --- os públicos: o andar que a Meta chama de conjunto ------------------- */

/* O LUGAR JÁ ESTÁ FEITO, e é de propósito. A Meta organiza em campanha >
   conjunto > anúncio, e é o CONJUNTO que carrega o público e a verba dele --
   é lá que se testa um público contra o outro. O Estúdio ainda tem dois
   andares (campanha > criativo), e o planejamento vai trazer o terceiro (ver
   motor/estrategista.py, tabelas `plano`, `conjunto` e `anuncio`).

   Então a tela já desenha o andar: hoje ela mostra UM público -- o que o dono
   escreveu na campanha -- com os criativos dentro. Quando a rota passar os
   conjuntos do plano, o mesmo bloco se repete, um por público, e nada aqui
   muda de forma. A alternativa era pendurar os criativos direto na campanha e
   refazer a tela depois. */
.anu-publicos { display: grid; gap: var(--espaco-4); }

/* O PÚBLICO NÃO É UMA CAIXA DENTRO DE OUTRA CAIXA. Ele era `--papel` -- a cor
   da PÁGINA -- dentro de um painel `--papel-2`: um filho pintado com o fundo
   do avô, e no tema claro antigo isso o deixava mais claro que o pai que o
   continha. Somando a cabeça em `--papel-3`, o caminho mais fundo desta tela
   empilhava cinco superfícies pintadas na ordem 0 -> 2 -> 0 -> 3 -> 2: sobe e
   desce sem regra, e nenhuma delas dizendo nada.

   Agora ele é o que sempre foi: uma DIVISÃO do painel, marcada por um fio
   forte embaixo do cabeçalho e pelo recuo do corpo. Menos cinco superfícies
   pintadas em `campanha`, e o painel volta a ser um objeto só. */
/* NA B (Etapa 5.2) O PUBLICO VOLTA A SER CARTAO, como no retrato: a
   cabeca (quem e, o que testa, a verba dele) e o corpo (o que o plano manda
   escrever e os criativos) dentro de uma superficie so, um degrau acima da
   pagina. O painel que o continha saiu -- a secao agora e titulo e cartoes,
   e nao caixa dentro de caixa. */
.anu-publico {
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--papel-2);
}

.anu-publico-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espaco-2) var(--espaco-4);
  padding: 20px var(--espaco-5) 18px;
  /* A CABEÇA NÃO É MAIS UMA FAIXA PINTADA. Ela era `--papel-3` para se separar
     do painel; o que separa agora é o fio forte embaixo dela, que é o mesmo
     recurso e custa uma superfície a menos. Um fio de 1px em `--borda-forte`
     se enxerga melhor do que 1,09:1 de diferença de fundo -- e foi medido. */
  background: none;
  border-bottom: 1px solid var(--borda);
}
.anu-publico-quem { min-width: 0; flex: 1 1 26ch; }
.anu-publico-nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-4);
  color: var(--tinta);
}
.anu-publico-texto {
  margin: 2px 0 0;
  font-size: var(--letra-3);
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 68ch;
}
.anu-publico-verba { flex: none; text-align: right; }
/* A VERBA DO PUBLICO E MENOR QUE A DA CAMPANHA, e e so isso que a distingue:
   ela e a SUBDIVISAO do numero grande do alto da tela. Na B nenhuma verba e
   verde (o verde cheio e a decisao); o que separa o total da parte e o
   tamanho. O rotulo ao lado continua dizendo verba de midia. */
.anu-publico-verba b {
  display: block;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-4);
  color: var(--tinta);
  font-variant-numeric: var(--algarismos);
}
.anu-publico-corpo { padding: var(--espaco-4) var(--espaco-5) var(--espaco-5); }

/* O lugar reservado, escrito. Área vazia sem explicação é área que parece
   quebrada; e prometer "em breve" sem nada por trás é pior ainda. Esta caixa
   diz o que vai morar aqui e quem a preenche. */
/* NA B ELE E UMA LINHA (o retrato): o que vai morar aqui, e o paragrafo
   inteiro de antes no "por que?" logo ao lado, dentro do mesmo elemento. */
.anu-reservado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: var(--espaco-3) 0 0;
  padding: 0 4px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--neutro);
}
.anu-reservado b { color: var(--tinta-2); font-weight: 600; }

/* --- o criativo: o cartão dentro do público ----------------------------- */

.anu-criativos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--espaco-5) var(--espaco-4);
  /* A FILEIRA FICA RETA, e isso e consequencia direta da linha de baixo.
     Enquanto o cartao nao tinha superficie, alturas diferentes na fileira eram
     invisiveis -- cada cartao simplesmente acabava. Com superficie, o cartao
     sem arte ao lado de um cartao com arte deixa um buraco embaixo dele, e a
     grade passa a parecer quebrada. Esticando, os pes sentam todos na mesma
     linha e o ar sobra DENTRO do cartao, onde se le como folga. */
  align-items: stretch;
}

/* O CARTAO DO CRIATIVO E UM CARTAO, e ate agora ele nao era nenhum: fundo
   transparente, sem fio, sem raio e sem elevacao -- `display:flex` e mais
   nada. MEDIDO a 1280px no tema claro desta frente, com onze criativos: a mesa
   e #ECEBE0, o cartao era rgba(0,0,0,0) e a MOLDURA VAZIA era #F1F0E5. A unica
   coisa que levantava desta tela era o retangulo que existe para dizer que nao
   ha nada ali. E a etiqueta de estado tinha exatamente o fundo dele: o "em que
   pe isto esta" pintado com a cor do "aqui nao tem".

   E a mesma inversao de escada que a fundacao acabou de curar no painel e no
   botao, sobrevivendo um nivel abaixo, no item da lista. Agora quem levanta e
   o que se aperta, com a receita de `.anu-cartao` -- nao ha um segundo jeito
   de fazer cartao nesta frente. E o cartao e o alvo INTEIRO: nenhum segundo
   alvo dentro dele. Um cartao, uma acao. */
.anu-criativo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  padding: var(--espaco-4);
  background: var(--papel-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  box-shadow: var(--anu-elev-1);
  overflow: hidden;
}
/* O CARTAO RESPONDE AO DEDO COM O FIO FORTE, E NAO ACENDE -- a mesma regra de
   `.anu-cartao`. Passar o mouse nao e decisao, e na B o verde cheio e so a
   decisao. */
.anu-criativo:hover { border-color: var(--borda-forte); box-shadow: var(--anu-elev-2); }

/* A mesma moldura única da galeria de posts, e pelo mesmo motivo: story,
   quadrado e feed têm proporções diferentes, e sem caixa comum a fileira vira
   serrote. Ver `.galeria .moldura` lá em cima -- a regra é repetida em vez de
   compartilhada porque esta frente pode mudar de proporção sem arrastar a
   galeria de Conteúdo junto. */
.anu-moldura {
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-2);
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  /* O POCO DA B (SISTEMA 5.11): um degrau ACIMA do cartao, e nao abaixo.
     A arte escura do post sumia num fundo do mesmo tom. */
  background: var(--poco);
  border: 1px solid var(--borda);
}
.anu-moldura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* A ARTE E A TAMPA DO CARTAO, e nao uma caixa dentro de outra caixa. Ela sangra
   ate o fio (as margens negativas sao o respiro do proprio cartao, desfeito) e
   perde fio e raio proprios, porque quem os desenha agora e o cartao.

   E ELA E 16/10, E NAO 4/5. MEDIDO a 1280px: em 4/5 a miniatura tem 306px e o
   cartao com arte fica 2,4 vezes mais alto que o vizinho sem arte -- um buraco
   no meio da fileira. Em 16/10 sao 153px e a diferenca cai para 1,65. E 16/10 e
   a MESMA proporcao que a especificacao ja escolheu para a moldura vazia: com
   ou sem arte, a lista tem uma forma so. Aqui a arte e reconhecimento -- quem
   diz o que o criativo E e o titulo logo abaixo --, e nao previa; a previa e a
   tela do post, a um toque daqui.

   ISTO ALCANCA `campanha.html`, que usa o mesmo cartao, e de proposito: e o
   mesmo componente com o mesmo defeito. */
.anu-criativo > .anu-moldura {
  aspect-ratio: 16 / 10;
  margin: calc(var(--espaco-4) * -1) calc(var(--espaco-4) * -1) var(--espaco-3);
  border: 0;
  border-bottom: 1px solid var(--borda);
  border-radius: 0;
}
/* AUSÊNCIA NÃO MERECE O ESPAÇO DA PRESENÇA. A moldura vazia reservava 4:5 --
   uns 300px de altura por cartão, MEDIDO a 1280px -- para escrever "Sem arte.
   Só a copy foi escrita.". Em `criativos.png` eram duas delas, e 60% da
   janela era espaço gasto em dizer que não há nada ali. É o mesmo conserto
   que `.anu-entrega-sem-arte` já tinha recebido na entrega, pelo mesmo
   motivo. A frase dentro não muda uma letra. */
/* A MOLDURA VAZIA NAO EXISTE MAIS NA LISTA DE CRIATIVOS -- la a frase virou
   linha do cartao (`.anu-criativo-porque`). Ela continua viva nas DUAS grades
   de `campanha.html`, onde a frase ainda mora dentro dela, e por isso continua
   sendo uma caixa encaixada no cartao (o poco, com fio -- o tracejado saiu
   com a B), e nao uma tampa sangrada.
   O SELETOR GANHOU O PAI de proposito: sem ele, `.anu-criativo > .anu-moldura`
   logo acima (0,2,0) vencia `.anu-moldura-vazia` (0,1,0) e a caixa de la
   perderia o fio e o raio sem ninguem pedir. */
.anu-criativo > .anu-moldura-vazia {
  aspect-ratio: 16 / 10;
  margin: 0;
  background: var(--poco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
}
.anu-criativo:hover .anu-moldura { border-color: var(--borda-forte); }

/* O VAO DE CIMA SAIU: quem afasta a etiqueta da arte agora e a margem da
   propria moldura, e no cartao sem arte e o respiro do cartao. 10px e 6px nao
   existem na escala desta frente. */
.anu-etiquetas { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin: 0 0 var(--espaco-2); }

.anu-criativo-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  /* O TITULO E O QUE ELE VEIO LER, e era a TERCEIRA coisa do cartao, em 13px,
     embaixo de 153px de moldura vazia. MEDIDO: 153px de ausencia para 36px de
     titulo, 4,25 para 1, numa tela cuja primeira frase e "aqui se procura pelo
     que ja existe". Identidade nao pode ser menor que ausencia.
     E E `--letra-4`, E NAO `--letra-5`: 18px e o degrau de titulo de BLOCO, e
     numa grade que pode ter vinte e quatro deles seriam vinte e quatro
     manchetes brigando -- o estrago que o comentario de `.anu-cartao-nome` ja
     registra. Archivo 700 da o peso sem dar o tamanho.
     O corte em duas linhas e o `min-height` ficam: e a regua que faz a campanha
     de todos os cartoes da fileira comecar na mesma altura. */
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-4);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--tinta);
}

/* O PORQUE SAIU DE DENTRO DA MOLDURA. A frase e a mesma, letra por letra. O que
   mudou e o lugar: ela era o conteudo de um retangulo de 153px que so existia
   para conte-la, e agora e uma linha do cartao, no MESMO lugar em todo cartao
   -- que e a regra de "ele sabe em que pe esta".
   Duas coisas de uma vez: a ausencia deixa de ter o tamanho da presenca, e a
   razao da trava passa a aparecer TAMBEM no criativo que tem arte, onde ela
   nunca aparecia porque morava no ramo `else` do template.
   `.sem-arte` nao serve aqui: aquela classe e da casa, nasceu centrada dentro
   de uma moldura, e e assim que ela continua na galeria de Conteudo, no
   calendario e em `campanha.html`. */
.anu-criativo-porque {
  /* O RESPIRO DE BAIXO E MAIOR QUE O DE CIMA, e isto foi MEDIDO no retrato:
     com 8px dos dois lados o fio do pe passava a 4px da frase e parecia
     sublinhar a ausencia em vez de abrir o rodape. O fio pertence ao PE, e tem
     que estar mais perto do pe do que da frase que vem antes dele. */
  margin: var(--espaco-2) 0 var(--espaco-3);
  font-size: var(--letra-2);
  line-height: 1.45;
  color: var(--neutro);
}
/* O PE FECHA O CARTAO COM UM FIO. Sem ele o numero, o formato e o dolar de
   producao ficavam soltos embaixo da campanha, e as tres linhas miudas se liam
   como um bloco cinza so. O fio diz "daqui para baixo e referencia".
   `margin-top: auto` e o que faz a fileira esticada valer alguma coisa: com os
   cartoes na mesma altura, o pe de todos senta na mesma linha e o fio vira uma
   regua atravessando a fileira. Sem isso, esticar so produziria cartoes altos
   com o pe solto no meio.
   `tabular-nums` entra porque `#2` e `#14` precisam comecar na mesma coluna de
   cartao para cartao. */
.anu-criativo-pe {
  margin-top: auto;
  padding-top: var(--espaco-2);
  border-top: 1px solid var(--borda);
  font-family: var(--fonte-numero);
  font-size: var(--letra-2);
  color: var(--neutro);
  font-variant-numeric: var(--algarismos);
}
/* O CUSTO DE IA EM LINHA PRÓPRIA, sempre. Junto do número e do formato, a
   linha tinha 35 caracteres e quebrava só em alguns cartões -- e o cartão que
   quebrava ficava um degrau mais alto que o vizinho. Em linha própria ela
   quebra em todos ou em nenhum, e o dólar ganha o afastamento que ele precisa
   ter do resto. */
.anu-criativo-pe span { display: block; }

/* --- o rodapé da tela: controle raro e referência ------------------------ */

.anu-pe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--espaco-6);
  margin-top: var(--espaco-6);
  padding-top: var(--espaco-5);
  border-top: 1px solid var(--borda);
}
.anu-pe-bloco { min-width: 0; }
/* O RÓTULO DO RODAPÉ VEM COM MARGEM ESCRITA. `.anu-rotulo` só zera a de baixo,
   e um `<p>` sem margem de topo declarada herda a do navegador -- esta folha
   não tem reinício global de `p`. Sem esta linha, a troca de `.rotulo` (que é
   verde da casa, e saiu desta tela) por `.anu-rotulo` abriria um vão de 15px
   no rodapé de Desempenho. */
.anu-pe .anu-rotulo { margin: 0 0 var(--espaco-2); }

/* --- o plano de mídia ---------------------------------------------------- */

/* O PLANO É O ASSUNTO DA TELA quando existe, e o desenho diz isso do mesmo
   jeito que a ficha da campanha: fio de acento no topo. Os dois nunca
   aparecem juntos no mesmo lugar -- a ficha é quem a campanha é, o plano é o
   que se vai fazer com ela. */
/* Mesmo motivo da ficha: o fio verde de 3px saiu. Dois painéis com fio verde
   no topo, na mesma rolagem, davam a mesma ênfase a "quanto isto custa" e a
   "como isto foi dividido" -- e um deles é dinheiro e o outro não. */
.anu-plano .anu-medidas { margin-bottom: var(--espaco-5); }

/* Como o dono vai saber se deu certo. Caixa própria, e não mais um parágrafo:
   é a única parte do plano que fala do DEPOIS, e é a que ele vai reler daqui
   a uma semana com o Gerenciador aberto do lado. */
.anu-medicao {
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel);
}
.anu-medicao p {
  margin: var(--espaco-1) 0 0;
  font-size: var(--letra-3);
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: 74ch;
}
.anu-medicao p b { color: var(--tinta); font-weight: 600; }

/* O QUE O ESTÚDIO CONFERIU. Tom de alerta, e nunca de falha: não deu errado
   nada -- foi o código barrando o que o modelo propôs, e é isso que prova que
   alguém olhou antes de o plano virar dinheiro de mídia. */
.anu-conferido,
.anu-falta {
  margin-top: var(--espaco-4);
  padding: var(--espaco-3) var(--espaco-4);
  /* CARTAO DE TOM (SISTEMA 5.16): veu e fio de 1px da palha, e nao mais o
     fio esquerdo de 3px -- na B ele so marca o ajuste mexido. */
  border: 1px solid var(--alerta-fio);
  border-radius: var(--raio-2);
  background: var(--alerta-fraco);
}
/* A PERGUNTA SEM RESPOSTA NÃO É COISA BOA. Ela era verde sobre verde-fraco --
   a cor que nesta frente quer dizer dinheiro de mídia --, e o que ela é de
   verdade é TRABALHO PARADO: o plano não soube alguma coisa e está esperando
   o dono responder. Âmbar é a cor do que espera uma decisão dele, e é a
   mesma regra do `.anu-conferido` logo acima. O que muda entre os dois é o
   fundo: o conferido é informação, e este é uma tarefa. */
.anu-falta { background: var(--papel); }
.anu-conferido ul,
.anu-falta ul { margin: var(--espaco-1) 0 0; padding-left: var(--espaco-4); }
.anu-conferido li,
.anu-falta li { font-size: var(--letra-3); line-height: 1.55; color: var(--tinta-2); }
/* dobrado (29/10/2026): o resumo e o rotulo, e abre ao tocar */
details.anu-conferido > summary { cursor: pointer; }
/* o roteiro tecnico da Meta, dobrado dentro dos Detalhes da Meta */
.anu-tecnico { margin-top: var(--espaco-3); }
.anu-tecnico > summary { cursor: pointer; font-size: var(--letra-3); color: var(--neutro); }
.anu-falta p {
  margin: var(--espaco-1) 0 0;
  font-size: var(--letra-3);
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: 74ch;
}
.anu-falta a { display: inline-block; margin-top: var(--espaco-2); font-size: var(--letra-3); }

.anu-plano-acoes { margin-top: var(--espaco-5); }
.anu-plano-trocar small,
.anu-plano-preso {
  display: block;
  margin: var(--espaco-2) 0 0;
  font-size: var(--letra-2);
  line-height: 1.55;
  color: var(--neutro);
  max-width: 74ch;
}
.anu-plano-preso b { color: var(--tinta-2); font-weight: 600; }

/* O CONVITE A PLANEJAR. LUGAR VAZIO NAO LEVANTA: este painel e um convite --
   nao ha plano ainda --, e por isso ele fica sem elevacao, com o fio forte. O
   tracejado que dizia "aqui caberia alguma coisa" saiu com a B, que e
   superficie lisa; quem diz isso agora e a frase de dentro. */
.anu-plano-pedir { border: 1px solid var(--borda-forte); box-shadow: none; }

/* A porta para o outro monitor. Fica no alto, logo abaixo da nota do que esta
   frente é, porque montar no Gerenciador é o que o dono vem fazer aqui. */
.anu-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-4);
  margin: 0 0 var(--espaco-5);
}
.anu-acoes .texto-mini { max-width: 46ch; }
/* A porta do Gerenciador e um LINK que decide: ela leva para a tela onde se
   monta a campanha. Desde a B a regra geral `.botao.forte` ja a pinta; esta
   fica escrita aqui porque um teste de Anuncios a procura por nome (a porta
   nao pode sair com o peso de um botao secundario). Mesmos valores da geral. */
.anu-acoes .botao.forte {
  background: var(--acento);
  border-color: transparent;
  color: var(--tinta-do-acento);
}
.anu-acoes .botao.forte:hover { background: var(--acento-forte); }

/* --- os anúncios planejados, dentro do público -------------------------- */

/* O anúncio planejado ainda NÃO CUSTOU NADA: ele é uma linha de lista, e não
   um cartão com moldura como o criativo escrito. A diferença de peso é o que
   diz, sem legenda nenhuma, o que já existe e o que é só intenção. */
.anu-planejado-feito { text-decoration: none; flex: none; }
/* LINHAS COM FIO, e não o truque do fundo aparecendo por um vão de 1px. O
   truque (`gap: 1px` sobre `background: var(--borda)`) desenha o mesmo fio
   com DUAS superfícies pintadas a mais -- a da lista e a de cada linha -- e
   obriga cada linha a repintar o fundo do painel em que ela já está. */
.anu-planejados {
  list-style: none;
  margin: var(--espaco-1) 0 var(--espaco-4);
  padding: 0;
  display: grid;
  border-top: 1px solid var(--borda);
}
.anu-planejado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2) var(--espaco-4);
  padding: var(--espaco-3) 0;
  border-bottom: 1px solid var(--borda);
}
.anu-planejado-quem { min-width: 0; flex: 1 1 28ch; }
.anu-planejado-angulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 600;
  font-size: var(--letra-4);
  color: var(--tinta);
}
.anu-planejado-texto {
  margin: 2px 0 0;
  font-size: var(--letra-2);
  line-height: 1.5;
  color: var(--neutro);
  max-width: 68ch;
}
.anu-planejado-agir { flex: none; }

/* --- os criativos que o plano não reclama ------------------------------- */

/* Mesmo desenho do bloco de público, e de propósito: é a mesma coisa vista
   pelo dono (uma caixa de criativos). O que muda é que ISTO NÃO É UM PÚBLICO
   -- por isso a classe é outra, e o placar de públicos não o conta. */
.anu-soltos {
  border: 0;
  border-top: 1px solid var(--borda-forte);
  padding-top: var(--espaco-4);
  background: none;
  margin-top: var(--espaco-4);
}
/* Acompanha `.anu-publico-cabeca`: o que marca o bloco é o fio, não o fundo.
   O fio forte do topo (era tracejado, e a B e superficie lisa) continua
   dizendo que isto NAO e um publico: e o que sobrou fora do plano. */
.anu-soltos .anu-publico-cabeca { background: none; }

/* --- apagar a campanha --------------------------------------------------- */

/* O link mora no pé, sozinho e longe do que se clica todo dia. Ele não apaga:
   leva para a tela que mostra o estrago. */
.anu-apagar {
  margin: var(--espaco-5) 0 0;
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--borda);
}
.anu-apagar a { color: var(--falha); font-size: var(--letra-3); }
.anu-apagar .texto-mini { display: block; margin-top: 4px; max-width: 74ch; }
/* O estrago é mono e pré-formatado, como o de apagar post: são linhas curtas
   alinhadas, e não um parágrafo. */
.anu-estrago { white-space: pre-line; }

/* =========================================================================
   A ENTREGA PARA O GERENCIADOR.

   Esta tela não é para ler: é para EXECUTAR, com o Gerenciador aberto no
   outro monitor. Por isso ela é a única da frente em que o desenho serve a
   uma tarefa longa e interrompida, e não a uma decisão.

     O PASSO É UM PAINEL. Cada andar da Meta (campanha, conjunto, anúncio)
     ganha uma caixa com número, porque é assim que a tarefa se divide do
     outro lado -- e é assim que ele acha onde parou.

     O VALOR É MONO, E O BOTÃO ESTÁ COLADO NELE. O que se copia tem que
     parecer o que se copia: fundo próprio, fonte de número, e o botão dentro
     da mesma linha.

     O QUE JÁ FOI FEITO NÃO SE APAGA DA VISTA, e este parágrafo dizia o
     contrário: "a caixa marcada baixa a opacidade do passo inteiro". A folha
     NUNCA fez isso -- não há regra de opacidade em `.anu-passo` nem em
     `.anu-feito-sim`, e não havia em 24/09/2026, quando isto foi conferido
     linha a linha. Comentário que promete comportamento que não existe é pior
     que comentário nenhum: o próximo a mexer aqui procura o defeito que
     apagou o efeito, e não existe efeito.

     E ELE NÃO DEVE PASSAR A EXISTIR. "Criei o conjunto Síndicos" NÃO quer
     dizer que este painel acabou: os anúncios dentro dele têm caixas próprias,
     e apagar o passo inteiro na primeira marca esconderia justamente o que
     ainda falta subir. O que marca o feito é o verde da própria caixa.
   ========================================================================= */

.anu-passo { position: relative; }
.anu-passo .anu-painel-cabeca h2 {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
}
.anu-passo-numero {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* NUMERAR E ESTRUTURA, E NAO DECISAO. O circulo era `--acento`, e nesta
     tela sao CINCO deles (1, 2.1, 3.1, 2.2, 3.2). Na B o verde cheio e so a
     decisao da tela; verde repetido cinco vezes vira textura, e textura
     verde tira o sentido do unico verde que decide.
     `tabular-nums` porque ele passou a carregar "2.1" e "3.1": algarismo de
     largura variavel descentraliza o numero dentro do disco. */
  background: var(--tinta);
  color: var(--papel-2);
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-2);
  letter-spacing: 0;
  font-variant-numeric: var(--algarismos);
}

/* A ESTEIRA: O UNICO PEDACO DESTA TELA QUE NAO ROLA.

   MEDIDO a 1280x900, na entrega com dois conjuntos: a pagina tem 3.132px e a
   conta "0 de 3 feitos" morava no canto do cabecalho da ficha, a 161px do
   topo -- 5% da rolagem. Numa tarefa de uma hora, com o Gerenciador aberto na
   outra janela, o dono passava 95% do trabalho sem ver quantos passos faltam.

   ELA CARREGA A SAIDA, e nao uma copia do nome. O link de volta para a
   campanha ficava solto no alto da pagina e sumia nos primeiros 80px de
   rolagem: dali em diante esta era uma tela sem saida, e tela sem saida e
   onde ele fecha o navegador. Posto aqui dentro, o nome da campanha responde
   "em qual das duas abas eu estou" E continua sendo a porta de volta -- uma
   coisa so, no lugar de duas. Um <span> com o nome ao lado de um <a> com o
   nome seria o nome da campanha QUATRO vezes na mesma tela.

   O FUNDO E `--papel`, A MESA, e nao a cor do cartao: assim os paineis
   deslizam POR BAIXO dela como fichas passando sob uma regua. Cartao aqui
   faria a regua sumir dentro do que ela mede -- e regua nao se aperta, por
   isso ela tambem nao levanta.

   `z-index: 5` fica abaixo do 20 do `.topo`, que gruda em `top: 0`. E o `top`
   e `--topo-altura`, que no telefone vale 0px porque la o cabecalho rola
   embora -- a mesma conta que a barra lateral ja faz. */
.anu-esteira {
  position: sticky;
  top: var(--topo-altura);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2) var(--espaco-4);
  margin: 0 0 var(--espaco-5);
  padding: var(--espaco-2) 0;
  border-bottom: 1px solid var(--borda);
  background: var(--papel);
}
/* O nome corta com reticencias em vez de quebrar em duas linhas: a esteira
   tem que ter a MESMA altura o tempo todo, senao o conteudo de baixo pula
   quando ela cresce. */
.anu-esteira .volta { margin: 0; min-width: 0; overflow: hidden; }
/* NA B A VOLTA E A DA CASA: a seta e o nome, em cinza de apoio, e o nome
   cortado com reticencias dentro do `span` (a esteira gruda, e um nome de
   120 letras nao pode empurrar a conta). */
.anu-esteira .volta a {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--neutro);
  text-decoration: none;
}

.anu-progresso {
  flex: none;
  font-family: var(--fonte-numero);
  font-size: var(--letra-2);
  color: var(--neutro);
  white-space: nowrap;
  padding: var(--espaco-1) var(--espaco-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  background: var(--papel-2);
  font-variant-numeric: var(--algarismos);
}
.anu-progresso b { color: var(--tinta); font-variant-numeric: var(--algarismos); }
/* TERMINOU NAO E VERDE: agora que a esteira GRUDA, uma pilula verde ficaria
   na tela para sempre depois do ultimo passo -- e verde permanente e papel de
   parede, e na B o verde cheio e so a decisao. O "acabou" se diz com tinta
   cheia e fio forte, e le-se igual nos dois temas. */
.anu-progresso-cheio { border-color: var(--tinta); color: var(--tinta); }
.anu-progresso-cheio b { color: var(--tinta); }

/* --- o campo que se copia ------------------------------------------------ */

/* QUEM SEPARA UM CAMPO DO OUTRO E UM FIO, e nao mais um vao de 16px. Com o
   rotulo virando coluna, o vao sozinho deixava de dizer onde uma ficha acaba e
   a outra comeca. (O Gerente tem `gap` proprio -- `.anu-ia-acao .anu-campos` --
   entao ele nao sente esta linha.) */
.anu-campos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

/* O CAMPO E UMA LINHA DE FICHA, e nao um formulario empilhado.

   MEDIDO a 1280x900, com dois conjuntos e um anuncio escrito: dezesseis
   campos, cada um com o rotulo numa linha inteira so dele (10,5px de letra
   mais 6px de margem), a linha do valor, a nota, e 16px de vao ate o proximo
   -- de 60 a 137px por campo para 5 a 40 caracteres de dado. E a caixa do
   valor tinha `flex: 1 1 26ch`, quer dizer: ela ESTICAVA ate o fim da linha. A
   caixa de `15,00` media 775px; a de `26/09/2026`, 913px. Novecentos pixels de
   superficie pintada para mostrar dez caracteres, onze vezes na mesma tela.

   E O BOTAO IA PARAR NA BORDA DIREITA. Medido o percurso entre o fim do texto
   do valor e o comeco do botao que o copia: 705px no nome da campanha, 731px
   no orcamento diario, 830px nas duas datas. Treze vezes, com o Gerenciador
   esperando na outra janela.

   Agora o rotulo e a COLUNA da esquerda, de largura fixa na tela inteira -- e
   e essa regua vertical que faz o olho descer de campo em campo sem reler. O
   valor, o botao e a nota moram na coluna da direita, e o botao fica COLADO no
   valor DE PROPOSITO: com ele alinhado numa coluna a direita, o olho iria do
   rotulo direto ao botao e pularia o dado -- e quem copia sem ler cola erro num
   anuncio pago, que e a doutrina escrita no cabecalho de entrega.html.

   O QUE NAO SAI DA VISTA: rotulo, valor, botao, o "= R$ 15,00 por dia" e o
   "Sem o R$" continuam todos visiveis no instante em que ele copia. Nota que
   evita erro caro nao vai para tras de um clique -- e nem para a coluna do
   rotulo: ela pertence ao VALOR, e fica embaixo dele. */
.anu-campo-copia {
  display: grid;
  grid-template-columns: var(--anu-rotulo-coluna) minmax(0, 1fr);
  gap: var(--espaco-1) var(--espaco-4);
  align-items: start;
  padding: var(--espaco-3) 0;
  border-top: 1px solid var(--borda);
  min-width: 0;
}
/* O primeiro campo da lista dispensa o fio: quem o separa do cabecalho do
   passo e o respiro do painel. Dentro do anuncio escrito ele NAO e o primeiro
   filho -- o angulo vem antes --, e ali o fio e justamente o que separa o nome
   do anuncio do primeiro campo dele. */
.anu-campo-copia:first-child { border-top: 0; padding-top: 0; }
/* 9px alinha a linha de base do rotulo de 10,5px com a do valor de 13px, que
   nasce 1px de fio mais 8px de respiro abaixo do topo da caixa dele. */
.anu-campo-copia > .anu-rotulo { margin: 0; padding-top: 9px; }
/* O BOTAO TEM UM ENDERECO SO, E ELE E "COLADO NO VALOR". MEDIDO a 1280x900: o
   "Copiar" morava em DOIS lugares na mesma tela -- ao lado do valor em onze
   campos e numa linha so dele em tres (o publico de cada conjunto e o texto
   principal), porque `.anu-campo-longo` dava ao valor a linha inteira. O
   publico saiu de `.anu-campo-longo` (ver o HTML) e com isso onze viraram
   treze: sobram como excecao os DOIS campos cuja razao de existir e serem
   lidos inteiros antes de copiados, e neles o botao logo abaixo do texto e a
   regra -- a mesma que o telefone ja tinha, travada por teste.
   TENTEI `flex-wrap: nowrap` aqui, para fechar em treze de treze, e MEDI que
   nao serve: com a linha travada, o valor longo encolhe ate o piso de 12ch e a
   1000px ou menos o texto principal vira uma coluna de 94px com doze linhas de
   duas palavras -- e a 721px a linha estourava a largura da pagina
   (scrollWidth 735 contra 721). Quebrar e mais honesto que espremer. */
.anu-campo-copia > .anu-campo-linha {
  grid-column: 2;
  margin-top: 0;
}
.anu-campo-copia > .anu-nota,
.anu-campo-copia > .anu-limite { grid-column: 2; }
/* O VALOR TEM O TAMANHO DO QUE ELE DIZ. Os 12ch de piso nao sao gosto: sao a
   medida que faz `15,00` (5 caracteres), `Cadastros` (9) e `26/09/2026` (10)
   sairem todos com a MESMA largura -- e portanto com o botao de copiar deles
   na mesma coluna, que e o que o dedo procura. Acima disso a caixa acompanha o
   texto. O `flex-basis` fica de fora de proposito: e ele que
   `.anu-campo-longo` troca por 100%, e uma abreviacao `flex:` aqui apagaria
   aquela regra. */
.anu-campo-copia .anu-campo-valor { flex-grow: 0; min-width: 12ch; max-width: 100%; }

.anu-campo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  margin-top: 4px;
}
/* O VALOR AFUNDA: isto nao se clica. `--papel-3` e o ENCAIXE, um degrau ABAIXO
   do cartao; o botao ao lado e um degrau ACIMA. Os dois em lados opostos da
   superficie -- que e o contrario de como estavam, e isso MEDIDO em hex: o
   botao era `--papel-2` dentro de um painel `--papel-2` (1,00:1) e o dado era
   `--papel-3`, preenchimento mais forte que o do botao.
   `tabular-nums` porque as duas datas e as duas verbas sao lidas uma contra a
   outra, e algarismo de largura variavel desalinha a coluna. */
.anu-campo-valor {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px var(--espaco-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  background: var(--papel);
  font-family: var(--fonte-numero);
  font-size: var(--letra-3);
  line-height: 1.5;
  color: var(--tinta);
  font-variant-numeric: var(--algarismos);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* O texto principal de um anúncio tem 125 caracteres, e o link de destino é o
   que o Gerenciador recusa se vier errado: os dois precisam ser lidos INTEIROS
   antes de serem copiados, então ficam com a linha toda para si. O PÚBLICO SAIU
   DAQUI: com o valor do tamanho do dado ele já cabe ao lado do botão, e era ele
   que dava um segundo endereço ao "Copiar" em todo conjunto. */
.anu-campo-longo { flex-basis: 100%; }
.anu-campo-nota {
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--neutro);
}
/* A NOTA DO CAMPO É LARGA. `.anu-nota` tem 34ch porque ela mora numa coluna
   de medida, ao lado de outras três; aqui ela mora embaixo de um campo que
   ocupa a largura toda, e a 34ch uma frase de duas linhas virava quatro,
   deixando o resto da linha vazio. */
.anu-campo-copia .anu-nota { max-width: 74ch; }

/* O BOTAO PRECISA PARECER BOTAO. Este tinha `background: var(--papel-2)`
   DENTRO de um painel `--papel-2` -- MEDIDO no navegador: rgb(253,252,248) dos
   dois lados, 1,00:1, zero degrau, e um fio de 1px como unica prova de que ali
   havia o que apertar. E a letra dele era `--tinta-2`, mais fraca que o
   `--tinta` do `<code>` morto ao lado: o que afundava era o botao, o que subia
   era o texto que nao se clica. Sao onze deles nesta tela, e copiar e a UNICA
   coisa que se faz aqui.

   Agora ele sobe: `--anu-controle` (branco puro no claro), fio `--borda-forte`,
   a sombra de 1px da frente, e a letra em `--tinta` cheia. 34px de altura e a
   altura da caixa do valor ao lado, para a linha ler como UM objeto e nao dois;
   no telefone ele vira 40px, na regra la embaixo.

   E ELE NAO GANHA VERDE. Sao onze. Acao primaria repetida onze vezes nao se
   marca com cor -- se marca com POSICAO (sempre colado no valor) e com MATERIA
   (o unico objeto da linha que levanta). Na B o verde cheio e UM por tela, e
   onze deles virariam textura. */
.anu-copiar {
  flex: none;
  padding: var(--espaco-2) var(--espaco-4);
  min-height: 34px;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-2);
  letter-spacing: .04em;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--anu-controle);
  box-shadow: var(--anu-elev-1);
  color: var(--tinta);
  cursor: pointer;
}
/* O HOVER TROCA O FIO, E NAO A LETRA. No escuro `--acento` sobre
   `--anu-controle` passa de 4,5:1 por pouco; trocar o fio custa menos e le-se
   igual nos dois temas. */
.anu-copiar:hover { border-color: var(--acento); }
/* COPIADO E O BOTAO AFUNDANDO, e nao ficando verde. Ele desce para o degrau do
   encaixe e perde a sombra -- para de parecer apertavel durante o segundo e
   meio em que nao ha o que apertar -- e a palavra dele ja trocou de "Copiar"
   para "copiado". Tres sinais, nenhum deles caro. */
.anu-copiado { background: var(--papel); border-color: var(--borda); box-shadow: none; color: var(--tinta-2); }

/* Quanto do texto a rede deixa aparecer. Verde não: caber é o normal, e o
   normal não merece cor. O que merece é o que vai ser cortado. */
.anu-limite {
  display: block;
  margin-top: var(--espaco-1);
  font-family: var(--fonte-numero);
  font-size: var(--letra-2);
  color: var(--neutro);
  font-variant-numeric: var(--algarismos);
}
.anu-limite-estourou { color: var(--alerta); }

/* --- a marca do que já foi feito ---------------------------------------- */

/* A CAIXA DE MARCAR E A UNICA COISA DESTA TELA QUE SOBREVIVE A FECHAR O
   NAVEGADOR, e era o objeto mais fraco do painel: fundo `--papel` -- a cor da
   MESA -- dentro de um cartao. O maior alvo de dedo da tela era a unica coisa
   cavada ABAIXO da superficie em que ela estava. Agora ela sobe como todo
   controle da frente, e `--raio-1` porque nesta frente cartao e `--raio-3` e
   controle e `--raio-1` -- e isto e controle.

   E AS QUATRO LINHAS DE TIPOGRAFIA NAO SAO ENFEITE -- este e o achado que so
   apareceu MEDINDO o elemento no navegador. Esta caixa e um <label>, e a regra
   global `label` (la em cima, na secao de formularios) veste TODO <label> como
   rotulo de campo de formulario. Medido: Archivo 600, 13px, CAIXA ALTA, 1,43px
   de espaco entre letras, e 5px de margem embaixo. A unica coisa que o dono FAZ
   nesta tela, alem de copiar, saia assim: `CRIEI O CONJUNTO "SINDICOS"` -- a
   confirmacao mais importante do painel gritada, no tipo errado, com o nome
   proprio do conjunto perdendo a maiuscula que o distinguia. Caixa alta e mais
   lenta de ler e apaga a altura de letra em que o olho se apoia. Isto aqui e
   uma SENTENCA que ele le e assina, e volta a ser tipografada como uma. */
.anu-feito {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin: var(--espaco-5) 0 0;
  padding: var(--espaco-2) var(--espaco-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--anu-controle);
  box-shadow: var(--anu-elev-1);
  font-family: var(--fonte-texto);
  font-variation-settings: normal;
  font-size: var(--letra-4);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
  cursor: pointer;
  /* Alvo de dedo, e não de mouse: no telefone ele marca isto com o polegar,
     de pé, com o Gerenciador aberto na outra aba. */
  min-height: 44px;
}
.anu-feito input { width: 18px; height: 18px; flex: none; accent-color: var(--acento); }
/* O VERDE DO MARCADO FICA como VEU e fio, e nao como preenchimento: ali verde
   quer dizer "ligado", que e o mesmo sentido do `accent-color` da caixinha
   nativa colada nele. E A SOMBRA SAI: controle apertado assenta. */
.anu-feito-sim { border-color: var(--acento); background: var(--acento-fraco); color: var(--tinta); box-shadow: none; }

/* --- os anúncios, dentro do passo do conjunto --------------------------- */

.anu-entrega-anuncios { margin-top: var(--espaco-5); padding-top: var(--espaco-4); border-top: 1px solid var(--borda); }
/* "OS ANUNCIOS DESTE CONJUNTO" E UM PASSO, do mesmo tipo dos outros dois: tem
   circulo numerado e abre trabalho. Entao tem a forma de passo -- `--letra-5`,
   a mesma do <h2> do painel. Estava em `--letra-4`, MEDIDO empatado com o nome
   do anuncio (`.anu-entrega-angulo`, 15px) que vem logo abaixo dele, e dois
   papeis diferentes no mesmo tamanho e o olho tendo que decidir sozinho qual e
   o titulo de que. */
.anu-entrega-titulo {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin: 0 0 var(--espaco-4);
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-5);
  color: var(--tinta);
}

/* A COLUNA DA ARTE COMECA NO TOPO, E NAO ESTICA. Esta e a linha que faltava
   para o conserto do `.anu-entrega-sem-arte` valer de verdade: o comentario
   dele promete que "quem nao tem arte ocupa uma faixa", e a promessa nao se
   cumpria porque celula de grade ESTICA por padrao -- a moldura tracejada
   crescia junto com o corpo do anuncio. MEDIDO a 1280x900 num anuncio com a
   copy escrita: 120 x 340px de faixa tracejada para dizer que nao ha arte, e o
   mesmo estica ARRUINA o 4:5 da moldura de quem TEM arte. Com `start`, a
   moldura vazia fica nos 66px que ela pede e a cheia mantem a proporcao. */
.anu-entrega-anuncio {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: start;
  gap: var(--espaco-4);
  padding: var(--espaco-4) 0;
  border-top: 1px solid var(--borda);
}
.anu-entrega-anuncio:first-of-type { border-top: 0; padding-top: 0; }
/* O anúncio sem copy escrita não sobe, e o desenho não pode fingir que sobe. */
.anu-pendente { opacity: .72; }

.anu-entrega-arte {
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-2);
  border: 1px solid var(--borda);
  background: var(--papel-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.anu-pendente .anu-entrega-arte { border-style: solid; background: transparent; }
/* A MOLDURA VAZIA NÃO RESERVA O TAMANHO DE UMA ARTE. Com a proporção 4:5 (ou
   16:9 no telefone), o "sem arte" virava um retângulo tracejado de meia tela
   para dizer que não há nada -- e empurrava o próximo anúncio para fora da
   vista. Quem não tem arte ocupa uma faixa. */
.anu-entrega-sem-arte { aspect-ratio: auto; min-height: 66px; }
.anu-entrega-arte img { width: 100%; height: 100%; object-fit: contain; display: block; }
.anu-entrega-corpo { min-width: 0; }
/* OS CAMPOS DO ANÚNCIO SÃO SEPARADOS PELO MESMO FIO dos campos do conjunto.
   Eram irmãos soltos com 12px de margem enquanto os de cima tinham 16px de
   `gap` -- dois ritmos para o mesmo componente na mesma tela, e o rótulo TÍTULO
   nascia colado na contagem de caracteres do campo de cima. Agora quem separa é
   o `border-top` de `.anu-campo-copia`, e a régua não muda de regra no meio da
   página. */
.anu-entrega-corpo .anu-campo-copia { margin-top: 0; }
.anu-entrega-angulo {
  display: block;
  margin-bottom: var(--espaco-2);
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-4);
  line-height: 1.3;
  color: var(--tinta);
}

.anu-entrega-falta {
  margin: var(--espaco-2) 0 0;
  font-size: var(--letra-2);
  line-height: 1.55;
  color: var(--neutro);
  max-width: 74ch;
}

/* O QUE FALTA PARA ESTE ANÚNCIO SUBIR. Tom de alerta, e não de falha: não
   quebrou nada -- é trabalho que ainda tem dono, e o Gerenciador vai cobrar do
   outro lado se ninguém cobrar deste. */
.anu-entrega-pendencia {
  margin-top: var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-3);
  /* NA B (Etapa 5.2): cartao de tom, com o fio de 1px em volta -- o fio
     esquerdo de 3px ficou so para o ajuste mexido (SISTEMA 5.10 e 5.16). */
  border: 1px solid var(--alerta-fio);
  border-radius: var(--raio-2);
  background: var(--alerta-fraco);
}
.anu-entrega-pendencia ul { margin: var(--espaco-1) 0 0; padding-left: var(--espaco-4); }
.anu-entrega-pendencia li { font-size: var(--letra-2); line-height: 1.55; color: var(--tinta-2); }
.anu-entrega-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
}

.anu-fim { margin-top: var(--espaco-6); }

.anu-marcas-locais {
  margin: var(--espaco-5) 0 0;
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--borda);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-4);
}
.anu-marcas-locais .texto-mini { max-width: 68ch; }
/* LIMPAR AS MARCACOES NAO E UM CONTROLE DE TRABALHO: e a saida de um engano, e
   apagar uma hora de marcacao nao tem volta. Ele herdava
   `box-shadow: var(--anu-elev-1)` da regra global de `button` porque so
   redeclarava o fundo -- MEDIDO no navegador: o botao destrutivo levantava
   exatamente a mesma altura que os onze "Copiar". Aqui ele desce para o nivel
   da mesa: fio fraco, letra `--neutro`, nenhuma elevacao. Continua clicavel, e
   para de convidar -- ele fica de fora do vocabulario de controle DE PROPOSITO,
   para o dedo nao o achar enquanto procura um "Copiar". */
.anu-limpar {
  flex: none;
  padding: 7px var(--espaco-3);
  font-size: var(--letra-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  background: var(--papel-2);
  box-shadow: none;
  color: var(--neutro);
  cursor: pointer;
}
.anu-limpar:hover { border-color: var(--borda-forte); color: var(--tinta-2); }

/* =========================================================================
   AS QUATRO ABAS NOVAS DA FRENTE (23/09/2026).

   A frente tinha UMA aba e Conteúdo tem cinco. Estas classes desenham as
   quatro que faltavam, e todas ficam dentro do sistema que já existe: painel,
   medida, etiqueta, fio. Nenhum token novo, nenhuma cor nova.

     .anu-criativo-de   a campanha, no cartão da lista de criativos
     .anu-atalho        o caminho mais curto, na aba Criar
     .anu-leitura       o combinado de medição de uma campanha, em Desempenho
     .anu-contrato      os quatro campos desse combinado
   ========================================================================= */

/* --- a lista de criativos: de que campanha este é ------------------------ */

/* A CAMPANHA É O QUE ESTA LISTA TEM E A DE POSTS NÃO TEM, e por isso ela fica
   ENTRE o título e o rodapé de número: mais perto do título do que o custo,
   porque é a pergunta que traz o dono até aqui ("de que campanha era?").
   Uma linha só, cortada com reticência: nome de campanha é frase do dono, e
   duas linhas empurrariam o rodapé de um cartão e não o do vizinho.

   E ELA É `--tinta-2`, E NÃO `--neutro`: em neutro ela ficava da cor exata do
   rodapé de número logo abaixo, e as três linhas se liam como um bloco cinza
   só -- justamente a informação que trouxe o dono até aqui desaparecendo
   dentro da miudeza. Em tinta-2 o cartão tem três degraus: o título (tinta), a
   campanha (tinta-2) e o que é só referência (neutro). OLHADO a 1280 e a 390,
   nos dois temas. */
.anu-criativo-de {
  display: block;
  /* O 4px literal virou token, e entrou o respiro de baixo: o pe foi para o fim
     do cartao com `margin-top: auto`, e sem esta margem a campanha ficava
     colada no fio do pe quando o cartao nao tinha ar sobrando. */
  margin-top: var(--espaco-1);
  margin-bottom: var(--espaco-3);
  font-size: var(--letra-2);
  line-height: 1.3;
  color: var(--tinta-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- a barra de cortar a lista ------------------------------------------ */

/* O FILTRO E A UNICA FERRAMENTA DE PROCURAR QUE ESTA TELA TEM, e ele estava
   embaixo do resumo. MEDIDO a 1280x918, com onze criativos: a primeira pilula
   comecava a 487px do topo, atras de um bloco de numeros que nao se clicam.
   Subindo para cima do painel ela vira a primeira coisa depois do nome da tela.
   A ordem passa a ser a da mao: o que e isto, como eu corto, quanto tem, aqui
   esta.
   E ELA GANHA UM ROTULO. Tres pilulas soltas debaixo de um paragrafo nao dizem
   o que fazem; "VER SO" diz, e custa uma linha de 10,5px. */
.anu-corte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-3);
  margin: 0 0 var(--espaco-4);
}
.anu-corte .anu-rotulo { flex: none; margin: 0; }
.anu-corte .filtros { flex: 1 1 auto; margin: 0; }

/* O FILTRO DE ANUNCIOS NAO TEM MAIS PILULA PROPRIA: a regra global de
   `.filtros` (o trilho fundo, a atual um degrau acima e sem verde) vale para
   as duas frentes. */

/* --- a aba Criar: o caminho, e não o formulário -------------------------- */

/* A TELA DE CRIAR É UMA COLUNA, E NÃO UMA FOLHA INTEIRA.

   MEDIDO a 1.280px: o painel tinha 1.028px de largura e o formulário parava
   em 702px -- 326px de vazio DENTRO da borda do cartão, em toda fileira de
   campo, do primeiro rótulo até o botão. Caixa com um terço de vazio à
   direita é o que faz um formulário parecer documento largo em vez de ficha.
   Fora da caixa, esses mesmos pixels viram MARGEM, que é o que toda tela
   desta casa já tem e ninguém estranha.

   A conta: 78ch do formulário, mais os dois respiros de 22px do painel, mais
   os dois fios de 1px. E o atalho, que também para em 78ch, passa a ocupar a
   largura inteira do cartão: a seta deixa de acabar sozinha a um palmo do
   nome que ela aponta.

   O CABEÇALHO DA TELA FICA FORA desta coluna, de propósito -- ele já está bom
   e o texto dele já para em 74ch, antes da borda do painel. */
.anu-criar { max-width: calc(78ch + 2 * var(--espaco-5) + 2px); }
/* EM TELA LARGA, DUAS COLUNAS: os caminhos (o que falta escrever, o que falta
   planejar) a esquerda, a campanha nova a direita. Numa coluna so, a 1920
   sobravam 900px vazios ao lado. */
@media (min-width: 1600px) {
  .anu-criar:has(> .anu-caminhos) {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* a campanha nova e mais alta que os dois caminhos juntos: a sobra vai
       para baixo do segundo, e nao para o meio dos dois */
    grid-template-rows: auto 1fr;
    gap: var(--espaco-5);
    align-items: start;
  }
  .anu-criar:has(> .anu-caminhos) > * { margin: 0; }
  .anu-criar:has(> .anu-caminhos) > .anu-painel:not(.anu-caminhos) { grid-column: 2; grid-row: 1 / span 2; }
}

/* O FORMULÁRIO NÃO OCUPA A LARGURA DO PAINEL. Num monitor de 1.280px o campo
   "Nome" ficava com 980px para caber trinta caracteres, e o olho perdia a
   ligação entre o rótulo e o campo que ele nomeia. */
.anu-forma { max-width: 78ch; }

/* O PAINEL DE CAMINHOS É O ÚNICO DA TELA QUE LEVANTA DE VERDADE.

   `--anu-elev-2` aparece UMA vez por tela, e aqui ela vai para o cartão que
   guarda a ação primária: a campanha que já tem trabalho esperando. É assim
   que a tela diz "por aqui" SEM GASTAR VERDE -- na B o verde cheio e a
   decisao da tela, um so, e ele mora no botao de criar.

   QUAL É A AÇÃO PRIMÁRIA DESTA TELA depende do DADO, e é isso que a ordem dos
   três blocos já dizia sem nunca mostrar: no dia em que há atalho, o atalho é
   o que ele veio fazer; no dia em que não há nenhum, este painel não nasce e
   o formulário fica sozinho, primário por eliminação. Nunca são dois ao mesmo
   tempo -- e duas ações primárias seriam nenhuma.

   E QUANDO OS DOIS BLOCOS DE CAMINHO EXISTEM, só o primeiro levanta: o
   segundo volta para a elevação de todo painel. Dois cartões flutuando ao
   mesmo tempo é o mesmo que nenhum flutuar, e o primeiro é o caminho mais
   curto (escrever o que já foi decidido) enquanto o segundo ainda cobra um
   passo (planejar, que custa uma chamada). */
.anu-caminhos { box-shadow: var(--anu-elev-2); }
.anu-caminhos + .anu-caminhos { box-shadow: var(--anu-elev-1); }

/* O PORQUÊ VEM DEPOIS DO QUÊ.

   MEDIDO no primeiro bloco, a 1.280px: 109px de título e parágrafo em cima
   de uma linha de 68px que é a única coisa clicável dali. Quase metade do
   painel (223px) era texto sobre o que estava embaixo dele: o dono chegava,
   lia três frases, e só então via o caminho. Com o porquê embaixo são 44px
   até o atalho, e ele aparece 66px mais alto na tela.

   NÃO É DOBRAR E NÃO É APAGAR: é descer. `<details>` aqui seria esconder, e
   esconder só vale para doutrina. O texto continua na tela, inteiro, todo
   dia, sem clique -- o que mudou é a ordem em que o olho encontra as duas
   coisas. Quem já sabe, clica; quem se perguntar de onde aquilo saiu, lê.

   O fio de cima é o que diz "daqui para baixo é nota, e não mais um item da
   lista": sem ele o parágrafo viraria um atalho sem borda. */
.anu-painel-pe {
  margin: var(--espaco-4) 0 0;
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--borda);
  font-size: var(--letra-3);
  line-height: 1.6;
  color: var(--neutro);
  max-width: var(--anu-medida);
}

/* A MESMA MEDIDA DO FORMULÁRIO, de propósito: a coluna de leitura da tela é
   uma só, e agora o painel inteiro para nela.

   O VÃO CAIU DE 12px PARA 8px. Estes atalhos são irmãos do mesmo grupo, e a
   escala desta frente diz 8px para irmão e 16px para grupo. Com 12px entre as
   linhas e 16px entre a lista e a nota, a razão era 1,3:1 -- e 1,3:1 não
   separa nada. Agora é 2:1. */
.anu-atalhos { display: grid; gap: var(--espaco-2); max-width: 78ch; }

/* O ATALHO É UMA LINHA, E NÃO UM CARTÃO. Ele não tem o que comparar -- é um
   destino. Cartão lado a lado convidaria a comparar campanhas, que é o que a
   lista de Campanhas já faz, e melhor.

   E ELE É UM CONTROLE, que é o que faltava e o que sozinho muda esta tela.
   Era `background: var(--papel)` -- a cor da MESA -- dentro de um painel
   `--papel-2`: 1,17:1 ABAIXO do que o contém, sem sombra. O único alvo de
   clique do bloco era o buraco mais fundo dele. E na tela do Gerente, onde
   `.anu-ia-topo .anu-atalho` mora direto na página, dava 1,00:1: a linha
   inteira pintada da cor exata do fundo atrás dela.

   Agora ele tem a matéria de controle da frente, a mesma de `button` e de
   `.anu-copiar`: `--anu-controle`, fio forte e a elevação de 1px. `--raio-1`
   e não `--raio-2`, porque nesta frente o raio de 3px é o de tudo que se
   aperta -- o mesmo dos campos e do botão que estão logo abaixo na tela.

   E 16px de respiro em vez de 12/16: MEDIDO, a linha passa de 68px para 76px
   de altura. Alvo de dedo sem virar cartão. No telefone ela volta a 12px, na
   regra que já existe no `@media`. */
.anu-atalho {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espaco-4);
  padding: var(--espaco-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--anu-controle);
  box-shadow: var(--anu-elev-1);
  text-decoration: none;
  color: inherit;
}
/* O DEDO LEVANTA A LINHA, E NAO A ACENDE. Verde no hover e verde gasto: na B
   o verde cheio e a decisao da tela, e passar o mouse nao decide nada. O fio
   ja e `--borda-forte` parado, entao o degrau que sobra e `--tinta-2` -- que
   se le igual nos dois temas. */
.anu-atalho:hover { border-color: var(--tinta-2); box-shadow: var(--anu-elev-2); }
/* SEM NÚMERO, quando não há contagem que decida. O número grande deste
   componente quer dizer "quantos faltam escrever"; num bloco em que ele
   significaria outra coisa, ele simplesmente não existe. */
.anu-atalho-sem-numero { grid-template-columns: minmax(0, 1fr) auto; }
/* A CONTAGEM NAO E DECISAO. Ela era 22px em `--acento`, acima da dobra, na
   mesma tela de um botao verde preenchido -- e dois verdes com dois
   significados fazem o de baixo parar de significar. Na B o verde cheio e
   o botao que decide, e so ele.

   O 22px literal some junto: `--anu-numero` (24px) é o número de ficha desta
   frente inteira. Um tamanho de número, e não quatro. */
.anu-atalho-numero {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--anu-numero);
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: var(--algarismos);
  min-width: 1.2em;
  text-align: center;
}
/* O `"wght" 500` sai: `--neutro` já distingue o que não existe do que existe,
   e um quinto peso de Archivo é um peso que ninguém consegue apontar. */
.anu-atalho-numero.anu-vazio { color: var(--neutro); }
.anu-atalho-quem { min-width: 0; }
.anu-atalho-quem b { display: block; font-weight: 600; color: var(--tinta); }
.anu-atalho-quem small {
  display: block;
  margin-top: 2px;
  font-size: var(--letra-2);
  line-height: 1.4;
  color: var(--neutro);
}
.anu-atalho-seta { color: var(--neutro); font-size: var(--letra-4); }
/* A seta escurece junto com o fio, e não vira verde: mesma conta do hover. */
.anu-atalho:hover .anu-atalho-seta { color: var(--tinta-2); }

/* O NOME OCUPA DUAS TRILHAS. Isto estava escrito à mão no HTML
   (`style="grid-column:span 2"`) e era o último estilo solto desta tela.
   Medida que mora no HTML é medida que ninguém encontra no dia de mudar --
   foi de 91 delas que esta folha nasceu. O valor é o MESMO, de propósito:
   MEDIDO a 1.280, 390 e 320px, antes e depois, o campo Nome tem exatamente a
   mesma largura (464, 324 e 254px). Trocar por `1 / -1` foi tentado e MEDIU
   ZERO nas três larguras -- então não entrou. */
.anu-forma-nome { grid-column: span 2; }

/* O PERÍODO É DO TAMANHO DE UMA DATA. MEDIDO: cada campo tinha 227px para
   caber "30/09/2026" -- dez caracteres que ocupam 105px com a folga do campo.
   É o mesmo defeito que a entrega tinha no valor que se copia: caixa esticada
   até o fim da linha para mostrar dez caracteres.

   18ch dão 162px: sobra para a data por extenso e para o dedo, e o par passa
   a se ler como um par -- duas datas, uma decisão -- em vez de duas caixas
   grandes soltas. */
.anu-forma-quando { grid-template-columns: repeat(2, minmax(0, 18ch)); }

/* A NOTA DA VERBA FICA AO LADO DO CAMPO, E NÃO EMBAIXO DELE.

   MEDIDO: ela era a terceira coluna de uma fileira de três -- 227px de
   largura para 150 caracteres, quatro linhas de altura. As quatro linhas
   empurravam o botão de criar 70px para baixo e deixavam 465px de nada à
   esquerda delas. A nota mais cara da tela estava na coluna mais estreita.

   E A VERBA SAI DA FILEIRA DAS DATAS: período e dinheiro são duas decisões, e
   lado a lado com o mesmo peso liam-se como uma só.

   ELA NÃO DOBRA E NÃO ENCOLHE. Diz em que moeda se escreve ("em reais") e o
   que acontece acima do teste inicial -- nota que evita erro em anúncio pago
   fica visível, ao lado do campo, no instante em que ele digita.

   `--anu-medida-nota` (44ch) e não a largura que sobra: em 44ch a nota é um
   bloco de três linhas da altura do campo; solta, viraria uma fita de 72
   caracteres atravessando a tela. */
.anu-forma-verba {
  display: grid;
  grid-template-columns: minmax(0, 18ch) minmax(0, 1fr);
  align-items: center;
  gap: var(--espaco-1) var(--espaco-4);
}
.anu-forma-verba label { grid-column: 1 / -1; }
.anu-forma-verba input { font-variant-numeric: var(--algarismos); }
.anu-forma-verba small { margin-top: 0; max-width: var(--anu-medida-nota); }

/* A AÇÃO FICA NUM PÉ SÓ DELA. O botão que cria estava solto no fim do
   formulário, com a frase que fala do PRÓXIMO passo pendurada embaixo -- e
   ler depois de agir é ler tarde.

   O fio é a fronteira entre "o que você preenche" e "o que você aperta", e a
   frase passa para o lado, na altura do olho que já está no botão.

   44px É O ALVO DE DEDO das duas plataformas, e este botão tinha 37px: era o
   alvo mais importante da tela e o menor dela. No telefone ele já virava
   largura inteira pela regra do `@media`; agora ele tem altura também.

   O VERDE FICA SOZINHO NESTA FAIXA. Com a contagem do atalho saindo de
   `--acento`, esta e a unica declaracao de verde em Criar -- e na B e isso
   que o verde e: a decisao da tela, uma so. */
.anu-forma-agir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-4);
  margin-top: var(--espaco-5);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--borda);
}
.anu-forma-agir button.forte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-left: var(--espaco-5);
  padding-right: var(--espaco-5);
}
.anu-forma-agir .texto-mini { flex: 1 1 30ch; margin-top: 0; max-width: var(--anu-medida-nota); }

/* --- a aba Desempenho: o combinado de medição --------------------------- */

/* --- a ordem do dia: o bloco que responde "tenho o que olhar hoje?" ------

   A PERGUNTA QUE TRAZ O DONO A ESTA TELA TINHA DUAS RESPOSTAS EM DOIS LUGARES.
   A caixa âmbar só aparecia depois de o dia JÁ ter passado; a medida "Próxima
   leitura" ficava a 607px do topo, dentro de um painel chamado "O que o
   Estúdio sabe". E quando nada vencia, a tela não dizia NADA sobre hoje -- a
   resposta era a AUSÊNCIA de uma caixa, e ausência não se lê, muito menos para
   quem não é programador.

   Agora é um bloco só, sempre no mesmo ponto, com os dois estados escritos:
   `.anu-hoje` sozinha é o estado calmo, `.anu-hoje.anu-atencao` é o que cobra.
   A pele âmbar continua sendo a de `.anu-atencao`, que é a mesma da lista de
   campanhas -- uma segunda cor de cobrança nesta casa seria uma segunda coisa
   para aprender. E `.anu-atencao` NÃO SE TOCA: ela também desenha outra tela,
   e tudo o que esta precisa mudar está escrito aqui, depois dela no arquivo.

   O FIO ESQUERDO É DE 3px NOS DOIS ESTADOS, e só a cor muda. Com 1px no calmo
   e 3px no âmbar, o conteúdo do bloco nasceria 2px mais à direita justamente
   no dia em que ele cobra alguma coisa.

   A REGRA COMPOSTA EXISTE PARA NÃO DEPENDER DA ORDEM DO ARQUIVO: `.anu-hoje` e
   `.anu-atencao` têm o mesmo peso (0,1,0), e empate se resolve por ordem. */
.anu-hoje {
  /* NA B (Etapa 5.2): cartao de tom, com o fio de 1px em volta -- o fio
     esquerdo de 3px ficou so para o ajuste mexido (SISTEMA 5.10 e 5.16). */
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--papel-2);
  box-shadow: var(--anu-elev-1);
  padding: var(--espaco-4) var(--espaco-5);
  margin-bottom: var(--espaco-6);
}
.anu-hoje.anu-atencao { background: var(--alerta-fraco); border-color: var(--alerta-fio); }
.anu-hoje > .anu-rotulo { margin-bottom: var(--espaco-2); }
/* A LISTA PERDE O PONTO E O RECUO. Ela continua sendo uma `<ul>` porque é uma
   lista -- pode ter uma campanha ou cinco --, mas cada item aqui é uma linha de
   trabalho com um controle, e não um marcador de texto corrido. Os dois níveis
   do seletor são para ganhar de `.anu-atencao ul`, que é a forma da outra
   tela. */
.anu-hoje > .anu-hoje-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espaco-3);
}
/* A FRASE À ESQUERDA, O CONTROLE À DIREITA, na mesma linha do olho. Em pilha o
   botão nasceria embaixo de uma frase de duas linhas, e numa lista de três
   campanhas vencidas o olho teria que contar de cima para baixo para saber
   qual botão é de qual nome. */
.anu-hoje .anu-hoje-caso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-4);
  font-size: var(--letra-4);
  line-height: 1.55;
  color: var(--tinta-2);
}
.anu-hoje .anu-hoje-caso + .anu-hoje-caso { border-top: 1px solid var(--borda); padding-top: var(--espaco-3); }
.anu-hoje-frase { margin: 0; min-width: 0; max-width: var(--anu-medida); }
.anu-hoje-frase b { color: var(--tinta); font-weight: 600; }
.anu-hoje-nada { margin: 0; max-width: var(--anu-medida); font-size: var(--letra-4); line-height: 1.55; color: var(--tinta-2); }
.anu-hoje-nada b { color: var(--tinta); font-weight: 600; }

/* O ÚNICO CONTROLE DESTA TELA, E ELE NÃO É VERDE.

   Na B (decisao #50) o verde cheio e a decisao da tela, e IR OLHAR nao decide
   nada. Nos dias de cobranca a decisao do dia ganha o verde (b-aplicar,
   PLANO-v2 secao 4.1); o desenho disso e da frente de Anuncios.

   Ele é o controle da casa, o mesmo tratamento de `.anu-copiar` na entrega: um
   degrau ACIMA do cartão (`--anu-controle`), fio forte, sombra e a letra
   `--tinta` cheia. Afordância por superfície, e não por cor -- lê-se igual nos
   dois temas.

   E É UM LINK, E NÃO UM `<button>`: aqui nada é submetido, o dono vai para
   outro lugar, e botão que navega é botão que mente sobre o que faz. */
.anu-ir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 36px;
  padding: 0 var(--espaco-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--anu-controle);
  box-shadow: var(--anu-elev-1);
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-3);
  letter-spacing: .02em;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}
/* O FIO E A SOMBRA RESPONDEM AO DEDO, e não a letra: trocar a cor da letra
   gastaria verde num lugar que não gasta dinheiro nenhum. Levantar é o que um
   objeto pousado faz quando alguém o encosta. */
.anu-ir:hover { border-color: var(--tinta-2); box-shadow: var(--anu-elev-2); }

.anu-leituras { display: grid; gap: var(--espaco-4); }

/* =========================================================================
   OS NÚMEROS DA META NA ABA DESEMPENHO (decisão #66, 02/10/2026).

   Um cartão por campanha no ar, com a mesma pele da ficha de leitura
   (`.anu-leitura`): fio de 1px, raio de cartão, um degrau de elevação. A COR
   DO FIO É O VEREDITO -- âmbar para "falta otimizar", vermelho para
   "problema aqui", o fio comum para "tudo ok" -- e só a cor muda, pela mesma
   razão de `.anu-leitura-cobra`: a espessura igual mantém o conteúdo dos
   cartões na mesma linha. O selo no canto repete o veredito em palavra.

   AS MEDIDAS SÃO AS DA CASA (`.anu-medida`), em trilhas mais estreitas que
   as do painel de baixo: são seis leituras do mesmo objeto (as pessoas e a
   frequência moram na nota das impressões, para não haver uma sétima), e a
   150px cabem as seis em 1.280px e duas por fileira no telefone.

   O VEREDITO É UMA LISTA SEM MARCADOR DE TEXTO: um ponto redondo pintado na
   cor do nível, como o `.ponto` do selo. Não é gráfico -- é a cor do selo
   descendo para a frase que a explica. ========================================================================= */
.anu-metas { display: grid; gap: var(--espaco-4); margin-bottom: var(--espaco-6); }
.anu-meta {
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--papel-2);
  box-shadow: var(--anu-elev-1);
  padding: var(--espaco-4) var(--espaco-5);
}
.anu-meta-ok.anu-meta { border-color: var(--borda); }
.anu-meta-otimizar.anu-meta, .anu-meta-fora.anu-meta { border-color: var(--alerta-fio); }
.anu-meta-problema.anu-meta { border-color: var(--falha-fio); }
/* O cartão sem leitura (a Meta não respondeu e não há leitura guardada): só o aviso. */
.anu-meta-sem { padding-bottom: var(--espaco-4); }
.anu-meta-sem .anu-meta-aviso { margin-bottom: 0; }
.anu-meta-topo { margin-bottom: var(--espaco-1); }
/* A LINHA DA LEITURA: a hora à esquerda, o único botão da tela à direita. */
.anu-meta-lido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2) var(--espaco-4);
  margin-bottom: var(--espaco-4);
  font-size: var(--letra-2);
  color: var(--neutro);
}
.anu-meta-lido b { color: var(--tinta-2); font-weight: 600; }
.anu-meta-ler { margin: 0; }
.anu-meta-aviso {
  margin: 0 0 var(--espaco-4);
  padding: var(--espaco-2) var(--espaco-3);
  border-left: 3px solid var(--alerta);
  background: var(--alerta-fraco);
  border-radius: var(--raio-1);
  font-size: var(--letra-3);
  line-height: 1.5;
  color: var(--tinta-2);
}
.anu-meta-medidas { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--espaco-4) 0; }
.anu-meta-medidas .anu-medida { padding: 0 var(--espaco-4); }
.anu-meta-medidas .anu-medida:first-child { padding-left: 0; }
/* "R$ 369,76" numa linha só (15/10/2026, desenho do dinheiro). */
.anu-meta-medidas .anu-valor { font-size: 26px; white-space: nowrap; }
.anu-meta-veredito {
  list-style: none;
  margin: var(--espaco-5) 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.anu-meta-veredito li {
  position: relative;
  padding-left: 20px;
  font-size: var(--letra-3);
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: var(--anu-medida);
}
.anu-meta-veredito li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neutro);
}
.anu-meta-veredito li.anu-meta-problema { color: var(--tinta); }
.anu-meta-veredito li.anu-meta-problema::before { background: var(--falha); }
.anu-meta-veredito li.anu-meta-otimizar::before { background: var(--alerta); }
.anu-meta-veredito li.anu-meta-bem::before { background: var(--acento-texto); }
.anu-meta-veredito li.anu-meta-nota::before { background: var(--neutro); }
/* A DOBRA DOS CONJUNTOS E ANÚNCIOS: fechada por padrão. O cartão responde
   "como está indo" sem ela; ela responde "e cada um?". */
.anu-meta-detalhe { margin-top: var(--espaco-4); }
.anu-meta-detalhe > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-3);
  color: var(--tinta-2);
}
.anu-meta-detalhe > summary::-webkit-details-marker { display: none; }
.anu-meta-detalhe > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 150ms;
}
.anu-meta-detalhe[open] > summary::before { transform: rotate(45deg); }
.anu-meta-detalhe > summary:hover { color: var(--tinta); }
/* A tabela que não cabe rola dentro da própria caixa (o `.rolagem` da casa, com o prefixo da frente). */
.anu-rolagem { overflow-x: auto; }
.anu-meta-detalhe .anu-rolagem + .anu-rolagem { margin-top: var(--espaco-4); }
.anu-meta-tabela { margin-top: var(--espaco-2); }
.anu-meta-tabela td, .anu-meta-tabela th { white-space: nowrap; }
.anu-meta-tabela tr.anu-meta-parado td { color: var(--neutro); }
.anu-meta-tabela tr.anu-meta-parado td b { color: var(--neutro); font-weight: 600; }
.anu-meta .anu-leitura-pe { margin-top: var(--espaco-4); }
@media (max-width: 720px) {
  .anu-meta-medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4) 0; }
  .anu-meta-medidas .anu-medida:nth-child(odd) { padding-left: 0; border-left: 0; }
  .anu-meta-medidas .anu-valor { font-size: 24px; }
}

/* =========================================================================
   O DINHEIRO DO ANÚNCIO (15/10/2026). A seção "O anúncio está se pagando?"
   do alto da aba Desempenho, igual ao desenho final que o dono aprovou.

   DOIS TONS DE DADO, E SÓ DOIS: o que SAIU (oliva neutro) e o que VOLTOU (o
   verde da marca). A cor não muda quando passa do empate: com três vendas,
   nada aqui é veredito. A palha (`--alerta`) marca o passo onde mais gente
   para depois da conversa. Nenhum vermelho.

   O "VOLTOU" É O ÚNICO VERDE DE FUNDO FORA DA DECISÃO, e está registrado em
   testes/test_direcao_b.py (VERDE_DE_FUNDO_PERMITIDO): é a marca do dinheiro
   que voltou, pequena, em barra, ponto e medidor -- não um cartão pintado.

   SEM TRACEJADO (N8 da B): o desenho tinha o pé "O que estes números não
   dizem" e a fileira dos que quase não gastaram com fio tracejado; aqui os
   dois são fio cheio, que é a separação da casa.
   ========================================================================= */
/* DecolaAds (28/10/2026): o que saiu e o cinza neutro e o que voltou e o
   verde de "deu certo" da marca; a Lava fica so para o botao da tela. */
.anu-jor {
  --jor-saiu: var(--neutro);
  --jor-voltou: var(--grafico-2);
  --jor-trilho: var(--borda-forte);
  margin: 0 0 var(--espaco-7);
}
.anu-jor-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.anu-jor-listra-fundo { fill: var(--jor-saiu); opacity: .35; }
.anu-jor-listra-fio { fill: var(--jor-saiu); }

.anu-jor-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espaco-3) var(--espaco-4);
  margin-bottom: var(--espaco-2);
}
.anu-jor-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
}

/* O seletor de período: três radios, a troca é só CSS. */
.anu-jor-periodo {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--raio-botao);
  background: var(--papel-2);
  box-shadow: inset 0 0 0 1px var(--borda);
}
.anu-jor-periodo input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.anu-jor-periodo label {
  font: 600 var(--letra-botao)/1 var(--fonte-titulo);
  color: var(--tinta-2);
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}
.anu-jor-periodo label:hover { color: var(--tinta); }
.anu-jor-periodo input:checked + label {
  color: var(--tinta);
  background: var(--papel-4);
  box-shadow: inset 0 0 0 1px var(--borda-forte);
}
.anu-jor-periodo input:focus-visible + label { outline: 2px solid var(--acento); outline-offset: 1px; }
.anu-jor-per { display: none; }
.anu-jor:has(#jor-p-inicio:checked) .anu-jor-per[data-p="inicio"],
.anu-jor:has(#jor-p-7d:checked) .anu-jor-per[data-p="7d"],
.anu-jor:has(#jor-p-hoje:checked) .anu-jor-per[data-p="hoje"] { display: block; }

.anu-jor-corte { margin: 0 0 var(--espaco-4); font-size: var(--letra-2); color: var(--neutro); }

/* --- 1. a resposta ------------------------------------------------------- */
.anu-jor-heroi {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  grid-template-areas: "a lado" "fichas fichas";
  align-items: start;
  gap: var(--espaco-5) var(--espaco-6);
  padding: var(--espaco-5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
.anu-jor-heroi-a { grid-area: a; min-width: 0; }
.anu-jor-lado { grid-area: lado; min-width: 0; display: grid; align-content: start; gap: var(--espaco-3); }

.anu-jor-resposta {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 6px;
  text-wrap: balance;
}
.anu-jor-resposta-sub { margin: 0 0 2px; color: var(--tinta-2); max-width: 62ch; }
.anu-jor-resposta-sub b { font-variant-numeric: var(--algarismos); color: var(--tinta); }
.anu-jor-imp { margin: 0 0 var(--espaco-4); color: var(--neutro); font-size: var(--letra-3); }

/* Qual campanha vende: saiu e voltou na mesma régua para as campanhas. */
.anu-jq { border-top: 1px solid var(--borda); padding-top: var(--espaco-3); }
.anu-jq-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.anu-jq-cab h3 { margin: 0; font: 700 var(--letra-4)/1.25 var(--fonte-titulo); color: var(--tinta); }
.anu-jq-cab-col { font: 600 var(--letra-3)/1.2 var(--fonte-titulo); color: var(--neutro); text-align: right; }
.anu-jq-lista { list-style: none; margin: 0; padding: 0; }
.anu-jq-linha {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr) 156px;
  grid-template-areas: "nome barras res" "nome barras sorte";
  align-items: center;
  gap: 2px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}
.anu-jq-linha.anu-jor-vazia { grid-template-columns: 158px minmax(0, 1fr); grid-template-areas: "nome vazio"; }
.anu-jq-nome { grid-area: nome; display: block; color: var(--tinta); text-decoration: none; font: 650 var(--letra-4)/1.25 var(--fonte-titulo); }
.anu-jq-nome:hover { text-decoration: underline; }
.anu-jq-nome b { font-weight: 800; font-variant-numeric: var(--algarismos); }
.anu-jq-estado { display: block; font: 500 var(--letra-2)/1.3 var(--fonte-texto); color: var(--acento-texto); }
.anu-jq-estado.anu-jor-parado { color: var(--neutro); }
.anu-jq-vazio { grid-area: vazio; color: var(--neutro); font-size: var(--letra-3); }
.anu-jq-barras { grid-area: barras; display: grid; gap: 4px; min-width: 0; }
.anu-jq-b { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 8px; }
.anu-jq-trilho { display: block; height: 12px; min-width: 0; }
.anu-jq-trilho i { display: block; height: 100%; border-radius: 3px; }
.anu-jq-trilho i.anu-jor-saiu { background: var(--jor-saiu); }
.anu-jq-trilho i.anu-jor-voltou { background: var(--jor-voltou); }
.anu-jq-val { font: 600 var(--letra-3)/1.2 var(--fonte-titulo); font-variant-numeric: var(--algarismos); color: var(--tinta-2); white-space: nowrap; }
.anu-jq-val.anu-jor-nada { color: var(--neutro); font-weight: 500; }
.anu-jq-res {
  grid-area: res;
  align-self: end;
  text-align: right;
  font: 780 24px/1.05 var(--fonte-titulo);
  font-stretch: var(--largura-numero);
  letter-spacing: -.015em;
  font-variant-numeric: var(--algarismos) lining-nums;
}
.anu-jq-res.anu-jor-txt { font-size: 15px; font-weight: 700; font-stretch: 100%; letter-spacing: 0; color: var(--tinta-2); }
.anu-jq-sorte { grid-area: sorte; align-self: start; text-align: right; font-size: var(--letra-2); line-height: 1.3; color: var(--neutro); }
.anu-jq-linha:not(:has(.anu-jq-sorte:not(:empty))) .anu-jq-res { grid-row: 1 / span 2; align-self: center; }
.anu-jq-nota { margin: 6px 0 0; font-size: var(--letra-3); line-height: 1.5; color: var(--neutro); max-width: 70ch; }

.anu-jor-fichas { grid-area: fichas; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-3); }
.anu-jor-ficha { padding: 12px 14px; border-radius: var(--raio-1); background: var(--papel); border: 1px solid var(--borda); min-width: 0; container-type: inline-size; }
.anu-jor-ficha-rot { display: block; font: 600 var(--letra-3)/1.25 var(--fonte-titulo); color: var(--tinta-2); margin-bottom: 4px; }
.anu-jor-ficha-valor {
  display: block;
  font: 750 26px/1.1 var(--fonte-titulo);
  font-size: min(26px, var(--jor-cabe, 26px));   /* ver O VALOR QUE NÃO CABE ENCOLHE */
  font-stretch: var(--largura-numero);
  letter-spacing: -.015em;
  font-variant-numeric: var(--algarismos) lining-nums;
}
.anu-jor-ficha-valor.anu-jor-mudo { font-size: 15px; font-weight: 600; font-stretch: 100%; color: var(--neutro); padding-top: 6px; }
/* O VALOR QUE NÃO CABE ENCOLHE (revisão do ramo, 15/10/2026). No celular os
   dois quadros de baixo dividem a fileira: com 128px de conteúdo em 390,
   "R$ 2.338,74" (o "falta para empatar" depois de 8 dias sem venda) passava
   da borda, e em 320 a página rolava de lado. O quadro é um container, e a
   letra é a menor entre o tamanho do desenho e a que cabe no quadro com
   aquele número de caracteres (a classe vem de web/dinheiro_na_tela.py; cada
   caractere desta letra mede uns 0,6 da altura dela; o quadro tem
   `container-type`, e o valor, o `min()`). Com os números de hoje, nada
   muda em 390 nem no computador. */
.anu-jor-ficha-c7 { --jor-cabe: 23cqi; }
.anu-jor-ficha-c8 { --jor-cabe: 20.5cqi; }
.anu-jor-ficha-c9 { --jor-cabe: 18cqi; }
.anu-jor-ficha-c10 { --jor-cabe: 16cqi; }
.anu-jor-ficha-c11 { --jor-cabe: 14.7cqi; }
.anu-jor-ficha-c12 { --jor-cabe: 13.5cqi; }
.anu-jor-ficha-c13 { --jor-cabe: 12.4cqi; }
.anu-jor-ficha-c14 { --jor-cabe: 11cqi; }
.anu-jor-ficha-nota { display: block; margin-top: 6px; font-size: var(--letra-3); line-height: 1.4; color: var(--neutro); }

/* O medidor: de R$ 0 a R$ 2, a marca do empate em R$ 1. */
.anu-jor-medidor { position: relative; margin-top: 8px; }
.anu-jor-medidor-trilho { display: block; height: 8px; border-radius: 4px; background: var(--jor-trilho); overflow: hidden; }
.anu-jor-medidor-trilho i { display: block; height: 100%; background: var(--jor-voltou); }
.anu-jor-medidor-empate { position: absolute; left: calc(50% - 1px); top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--tinta); }
.anu-jor-medidor-escala { display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: var(--neutro); font-variant-numeric: var(--algarismos); }
.anu-jor-medidor-escala span:nth-child(2) { color: var(--tinta-2); font-weight: 600; }

.anu-jor-lado h3 { margin: 0; font: 700 var(--letra-3)/1.2 var(--fonte-titulo); color: var(--tinta-2); }
.anu-jor-vendas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.anu-jor-venda {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: baseline;
  padding: 9px 12px;
  border-radius: var(--raio-1);
  background: var(--papel);
  border: 1px solid var(--borda);
}
.anu-jor-venda .anu-jor-dia { font: 700 13px/1.2 var(--fonte-titulo); font-variant-numeric: var(--algarismos); color: var(--tinta-2); }
.anu-jor-venda .anu-jor-o-que { font-weight: 600; }
.anu-jor-venda .anu-jor-valor { font: 750 15px/1.2 var(--fonte-titulo); font-stretch: var(--largura-numero); font-variant-numeric: var(--algarismos); }
.anu-jor-venda .anu-jor-de { grid-column: 2 / -1; font-size: var(--letra-3); color: var(--neutro); }
.anu-jor-vendas-nada { margin: 0; color: var(--neutro); font-size: var(--letra-3); }
.anu-jor-cautela {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--raio-1);
  background: var(--papel-3);
  border: 1px solid var(--borda);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta-2);
}
.anu-jor-cautela b { color: var(--tinta); }

/* --- 2. as campanhas lado a lado ----------------------------------------
   As linhas das duas colunas se alinham (subgrid): deixa ler "conversas:
   59 | 34" de lado a lado. */
.anu-jor-sub { margin: var(--espaco-7) 0 var(--espaco-1); font: 700 var(--letra-5)/1.25 var(--fonte-titulo); letter-spacing: -.01em; }
.anu-jor-sub-nota { margin: 0 0 var(--espaco-4); color: var(--neutro); font-size: var(--letra-3); max-width: 80ch; }
.anu-jor-campanhas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: var(--espaco-4);
  row-gap: 0;
}
.anu-jor-campanhas.anu-jor-uma { grid-template-columns: minmax(0, 1fr); }
.anu-jor-camp {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  padding: 16px 18px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
  min-width: 0;
  scroll-margin-top: 80px;
}
.anu-jor-camp.anu-jor-parada { background: var(--papel); }
.anu-jor-camp > * { min-width: 0; }

.anu-jor-c-cabeca { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.anu-jor-c-num {
  flex: none;
  font: 750 13px/1 var(--fonte-titulo);
  font-variant-numeric: var(--algarismos);
  padding: 6px 7px;
  border-radius: var(--raio-selo);
  background: var(--papel-3);
  box-shadow: inset 0 0 0 1px var(--borda-forte);
  color: var(--tinta-2);
}
.anu-jor-c-nomes { flex: 1; min-width: 0; }
.anu-jor-c-nome { display: block; font: 750 17px/1.2 var(--fonte-titulo); color: var(--tinta); text-decoration: none; }
.anu-jor-c-nome:hover { text-decoration: underline; }
.anu-jor-c-sub { display: block; font-size: var(--letra-3); color: var(--neutro); }
.anu-jor-c-nomes .etiqueta { margin-top: 8px; }

.anu-jor-c-res { padding: 14px 0; border-bottom: 1px solid var(--borda); }
.anu-jor-c-rot { display: block; font: 600 var(--letra-3)/1.2 var(--fonte-titulo); color: var(--tinta-2); }
.anu-jor-c-valor {
  display: block;
  margin: 2px 0 4px;
  font: 780 32px/1.05 var(--fonte-titulo);
  font-stretch: var(--largura-numero);
  letter-spacing: -.02em;
  font-variant-numeric: var(--algarismos) lining-nums;
}
.anu-jor-c-valor.anu-jor-texto { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.anu-jor-c-linha { display: block; font-size: 13.5px; color: var(--tinta-2); font-variant-numeric: var(--algarismos); }
.anu-jor-c-linha.anu-jor-fraca { color: var(--neutro); margin-top: 2px; }
.anu-jor-selo-sorte {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: var(--raio-selo);
  font: 600 var(--letra-1)/16px var(--fonte-titulo);
  color: var(--tinta-2);
  box-shadow: inset 0 0 0 1px var(--borda-forte);
}

/* A JORNADA: à esquerda as pessoas, à direita quanto custou cada uma. */
.anu-jor-passos-caixa { padding: 14px 0 6px; }
.anu-jor-passos-cab { display: flex; justify-content: space-between; font-size: var(--letra-2); color: var(--neutro); margin: 0 0 6px 26px; }
.anu-jor-passos { list-style: none; margin: 0; padding: 0; position: relative; }
.anu-jor-passos::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: var(--jor-trilho);
}
.anu-jor-passo {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: start;
  padding: 3px 0;
}
.anu-jor-no {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--papel-2);
  box-shadow: inset 0 0 0 2px var(--jor-saiu);
}
.anu-jor-camp.anu-jor-parada .anu-jor-no { background: var(--papel); }
.anu-jor-passo.anu-jor-saiu .anu-jor-no { background: var(--jor-saiu); box-shadow: 0 0 0 3px var(--papel-2); border-radius: 4px; }
.anu-jor-passo.anu-jor-voltou .anu-jor-no { background: var(--jor-voltou); box-shadow: 0 0 0 3px var(--papel-2); border-radius: 4px; }
.anu-jor-passo.anu-jor-voltou.anu-jor-zero .anu-jor-no { background: var(--papel-2); box-shadow: inset 0 0 0 2px var(--jor-trilho); }
.anu-jor-num {
  display: block;
  font: 750 21px/1.2 var(--fonte-titulo);
  font-stretch: var(--largura-numero);
  font-variant-numeric: var(--algarismos) lining-nums;
  letter-spacing: -.01em;
}
.anu-jor-passo.anu-jor-zero .anu-jor-num { color: var(--neutro); }
.anu-jor-rot { display: block; font-size: 13.5px; line-height: 1.3; color: var(--tinta-2); }
.anu-jor-rot small { display: block; font-size: var(--letra-3); color: var(--neutro); }
.anu-jor-custo { text-align: right; padding-left: 10px; padding-top: 4px; }
.anu-jor-custo b { display: block; font: 700 14px/1.2 var(--fonte-titulo); font-variant-numeric: var(--algarismos); white-space: nowrap; }
.anu-jor-custo span { display: block; font-size: var(--letra-3); color: var(--neutro); }
.anu-jor-custo.anu-jor-nada b { color: var(--neutro); font-weight: 600; }

.anu-jor-elo {
  position: relative;
  margin: 0 0 0 26px;
  padding: 2px 0 4px;
  font-size: var(--letra-3);
  line-height: 1.35;
  color: var(--neutro);
  font-variant-numeric: var(--algarismos);
}
.anu-jor-elo.anu-jor-perde { color: var(--alerta); font-weight: 600; }
.anu-jor-elo.anu-jor-perde::before {
  content: "";
  position: absolute;
  left: -21px;
  top: -6px;
  bottom: -6px;
  width: 4px;
  border-radius: 2px;
  background: var(--alerta);
}
.anu-jor-elo .anu-jor-marca { display: block; font-weight: 500; color: var(--alerta); }
.anu-jor-teste { margin: 8px 0 0 26px; font-size: var(--letra-3); color: var(--neutro); }

.anu-jor-aviso-caixa { padding: 8px 0 14px; border-bottom: 1px solid var(--borda); }
.anu-jor-aviso {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--raio-1);
  background: var(--alerta-fraco);
  box-shadow: inset 0 0 0 1px var(--alerta-fio);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tinta-2);
}
.anu-jor-aviso b { color: var(--tinta); }
/* o primeiro gargalo que o piloto achou (19/10/2026): uma linha discreta,
   abaixo do aviso; o aviso amarelo continua sendo o alarme */
.anu-jor-gargalo { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tinta-2); }
.anu-jor-gargalo:first-child { margin-top: 0; }
.anu-jor-gargalo b { color: var(--tinta); }

/* O dia a dia: gasto em barra, venda em ponto, uma régua só. */
.anu-jor-dia-caixa { position: relative; padding: 14px 0 0; }
.anu-jor-bloco-rot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin: 0 0 6px; font: 700 var(--letra-3)/1.3 var(--fonte-titulo); color: var(--tinta-2); }
.anu-jor-legenda { display: inline-flex; gap: 10px; font: 500 var(--letra-2)/1.3 var(--fonte-texto); color: var(--neutro); }
.anu-jor-legenda i { display: inline-block; vertical-align: -1px; margin-right: 4px; }
.anu-jor-legenda .anu-jor-l-gasto { width: 7px; height: 11px; border-radius: 2px; background: var(--jor-saiu); }
.anu-jor-legenda .anu-jor-l-venda { width: 9px; height: 9px; border-radius: 50%; background: var(--jor-voltou); }
.anu-jor-grafico { display: block; width: 100%; height: auto; overflow: visible; }
.anu-jor-grafico .anu-jor-barra { fill: var(--jor-saiu); }
.anu-jor-grafico .anu-jor-barra.anu-jor-fora-janela { opacity: .28; }
.anu-jor-grafico .anu-jor-barra.anu-jor-parcial { fill: url(#jor-listra); }
.anu-jor-grafico .anu-jor-grade { stroke: var(--borda); stroke-width: 1; stroke-dasharray: 2 3; }
.anu-jor-grafico .anu-jor-base { stroke: var(--borda-forte); stroke-width: 1; }
.anu-jor-grafico .anu-jor-txt { fill: var(--neutro); font: 500 11.5px var(--fonte-texto); font-variant-numeric: var(--algarismos); }
.anu-jor-grafico .anu-jor-txt-venda { fill: var(--tinta-2); font: 650 11.5px var(--fonte-titulo); font-variant-numeric: var(--algarismos); }
.anu-jor-grafico .anu-jor-ponto-venda { fill: var(--jor-voltou); stroke: var(--papel-2); stroke-width: 2; }
.anu-jor-camp.anu-jor-parada .anu-jor-grafico .anu-jor-ponto-venda { stroke: var(--papel); }
.anu-jor-grafico .anu-jor-ponto-venda.anu-jor-fora-janela { opacity: .35; }
.anu-jor-grafico .anu-jor-alvo { fill: transparent; cursor: pointer; }
.anu-jor-grafico .anu-jor-alvo:hover, .anu-jor-grafico .anu-jor-alvo.anu-jor-ativo { fill: var(--acento-fraco); }
.anu-jor-dica {
  position: absolute;
  z-index: 4;
  top: 4px;
  max-width: 230px;
  padding: 8px 10px;
  border-radius: var(--raio-1);
  background: var(--papel-3);
  box-shadow: var(--sombra-pop);
  font-size: var(--letra-3);
  line-height: 1.4;
  color: var(--tinta-2);
  pointer-events: none;
  white-space: nowrap;
}
.anu-jor-dica b { color: var(--tinta); }
.anu-jor-vazio-linha { margin: 0; padding: 12px 0; color: var(--neutro); font-size: 13.5px; }
.anu-jor-vazio-linha b { color: var(--tinta-2); }

/* --- 3. anúncio a anúncio ----------------------------------------------- */
.anu-jor-ads { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borda); }
.anu-ja {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-areas: "id barras txt" "id barras extra";
  align-items: center;
  gap: 2px 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--borda);
}
.anu-ja-id { grid-area: id; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; align-items: baseline; }
.anu-ja-id b { font: 800 17px/1.2 var(--fonte-titulo); font-variant-numeric: var(--algarismos); color: var(--tinta); grid-row: span 2; }
.anu-ja-camp { font: 600 var(--letra-3)/1.3 var(--fonte-titulo); color: var(--tinta-2); }
.anu-ja-estado { grid-column: 2; font-size: var(--letra-2); line-height: 1.3; color: var(--acento-texto); }
.anu-ja.anu-jor-parado .anu-ja-estado { color: var(--neutro); }
.anu-ja.anu-jor-parado .anu-ja-id b { color: var(--tinta-2); }
.anu-ja-barras { grid-area: barras; display: grid; gap: 4px; min-width: 0; }
.anu-ja-txt { grid-area: txt; margin: 0; font-size: var(--letra-3); line-height: 1.45; color: var(--neutro); font-variant-numeric: var(--algarismos); }
.anu-ja-txt b { color: var(--tinta-2); font-weight: 650; }
.anu-ja-extra { grid-area: extra; margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.anu-ja-extra .anu-jor-selo-sorte { margin-top: 0; }
.anu-ja-alerta { font-size: var(--letra-3); color: var(--alerta); }
.anu-jor-ads-resto { margin-top: var(--espaco-3); }
.anu-ja-mais { border-bottom: 1px solid var(--borda); }
.anu-ja-mais > summary {
  display: block;
  padding: 12px 0 12px 22px;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-size: var(--letra-3);
  line-height: 1.45;
  color: var(--neutro);
}
.anu-ja-mais > summary::-webkit-details-marker { display: none; }
.anu-ja-mais > summary::before { content: "+"; position: absolute; left: 4px; top: 11px; font-weight: 800; color: var(--tinta); }
.anu-ja-mais[open] > summary::before { content: "\2212"; }
.anu-ja-mais > summary b { color: var(--tinta-2); font-weight: 650; }
.anu-ja-mais > summary:hover b { color: var(--tinta); }
.anu-ja-mais .anu-jor-ads { border-top: 0; }
.anu-ja-mais .anu-ja:last-child { border-bottom: 0; }
.anu-ja.anu-jor-resto .anu-ja-id b { color: var(--neutro); font-size: 15px; }
.anu-jor-ads-nota { margin: var(--espaco-3) 0 0; font-size: var(--letra-3); line-height: 1.5; color: var(--neutro); max-width: 92ch; }

/* --- 4. o que estes números não dizem ----------------------------------- */
.anu-jor-pe {
  margin: var(--espaco-6) 0 0;
  padding: 14px 18px;
  border-radius: var(--raio-2);
  border: 1px solid var(--borda);
}
.anu-jor-pe h3 { margin: 0 0 6px; font: 700 var(--letra-3)/1.3 var(--fonte-titulo); color: var(--tinta-2); }
.anu-jor-pe ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; font-size: var(--letra-3); line-height: 1.45; color: var(--neutro); max-width: 100ch; }

/* --- o resto da aba, com três consertos do desenho ---------------------- */
.anu-jor-meta-titulo { margin-top: var(--espaco-7); }
/* a tabela larga da Meta rola dentro do cartão, e não a página inteira */
.anu-metas > *, .anu-meta > *, .anu-meta-detalhe { min-width: 0; }
/* o combinado de cada campanha fica a um toque */
.anu-jor-recolhe { margin: 0 0 var(--espaco-6); }
.anu-jor-recolhe > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--raio-botao);
  background: var(--papel-2);
  box-shadow: inset 0 0 0 1px var(--borda);
  font: 600 var(--letra-3)/1.35 var(--fonte-titulo);
  color: var(--tinta-2);
  cursor: pointer;
  list-style: none;
}
.anu-jor-recolhe > summary::-webkit-details-marker { display: none; }
.anu-jor-recolhe > summary::before { content: "+"; font-weight: 800; color: var(--tinta); }
.anu-jor-recolhe[open] > summary::before { content: "\2212"; }
.anu-jor-recolhe[open] > summary { margin-bottom: var(--espaco-4); }

/* --- larguras ------------------------------------------------------------
   O DESENHO MEDIA A SEÇÃO (container query de 860px); aqui é a janela, que
   dá o mesmo: `main` tem a janela menos o trilho e as duas margens (324px),
   então 860px de seção são 1184px de janela. Abaixo de 860px de janela a
   fileira "qual campanha vende" vira a do telefone: com a barra lateral, as
   duas trilhas cravadas (158 + 156) não deixariam lugar para a barra. */
@media (max-width: 1184px) {
  .anu-jor-heroi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "fichas" "lado"; }
  .anu-jor-campanhas { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--espaco-4); }
  .anu-jor-camp { display: block; grid-row: auto; }
  .anu-ja { grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "id barras" "txt txt" "extra extra"; gap: 6px 14px; }
}
@media (max-width: 860px) {
  .anu-jq-linha {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nome res" "sorte res" "barras barras";
    gap: 0 10px;
    padding: 9px 0;
  }
  .anu-jq-linha.anu-jor-vazia { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nome" "vazio"; }
  .anu-jq-barras { margin-top: 6px; }
  .anu-jq-res { align-self: center; grid-row: 1 / span 2; font-size: 22px; }
  .anu-jq-sorte { text-align: left; }
  .anu-jq-nome .anu-jq-estado { display: inline; margin-left: 6px; }
  .anu-jq-b { grid-template-columns: minmax(0, 1fr) 104px; }
  /* os três quadros: o do retorno por real ocupa a fileira, os outros dois dividem a de baixo */
  .anu-jor-fichas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .anu-jor-fichas .anu-jor-ficha:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .anu-jor-titulo { font-size: 22px; }
  .anu-jor-topo { margin-bottom: 6px; }
  .anu-jor-corte { margin-bottom: var(--espaco-3); }
  .anu-jor-heroi { padding: 14px; gap: var(--espaco-4); }
  .anu-jor-resposta { font-size: 26px; margin-bottom: 4px; }
  .anu-jor-resposta-sub { margin-bottom: var(--espaco-3); }
  .anu-jor-imp { margin-bottom: var(--espaco-3); }
  .anu-jor-periodo { width: 100%; }
  .anu-jor-periodo label { flex: 1; padding: 9px 6px; }
  .anu-jq-nome { font-size: 14.5px; }
  .anu-jq-trilho { height: 10px; }
  .anu-jor-ficha-valor { font-size: min(23px, var(--jor-cabe, 23px)); }
  .anu-jor-camp { padding: 14px 14px 14px; }
  .anu-jor-c-valor { font-size: 29px; }
  /* A caixa do gráfico tem 400 de largura; no celular ela encolhe para uns
     330px, e a letra precisa de 15 para sair com uns 12px. */
  .anu-jor-grafico .anu-jor-txt, .anu-jor-grafico .anu-jor-txt-venda { font-size: 15px; }
  .anu-ja { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "barras" "txt" "extra"; gap: 6px; }
  .anu-ja-id { grid-template-columns: auto auto minmax(0, 1fr); }
  .anu-ja-id b { grid-row: auto; }
  .anu-ja-estado { grid-column: auto; }
  .anu-jor-pe { padding: 12px 14px; }
}

/* O CARTÃO POUSA NA MESA, como os outros desta frente: raio de cartão
   (`--raio-3` -- o `--raio-2` do meio saiu da frente inteira) e um degrau de
   elevação. Sem a sombra ele era a única superfície da tela desenhada só com
   fio, e fio sozinho é a moldura impressa de que o dono reclamou.

   E O FIO ESQUERDO PASSA A EXISTIR SEMPRE, em `--borda`. MEDIDO: com
   `border-left: 1px` e a variante `cobra` em 3px, o conteúdo do cartão que
   cobra decisão nascia 2px à direita do dos vizinhos. Numa pilha de cartões, o
   único que importa era o único torto. É o mesmo arranjo de `.anu-cartao`, de
   propósito. */
.anu-leitura {
  /* NA B (Etapa 5.2): cartao de tom, com o fio de 1px em volta -- o fio
     esquerdo de 3px ficou so para o ajuste mexido (SISTEMA 5.10 e 5.16). */
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--papel-2);
  box-shadow: var(--anu-elev-1);
  padding: var(--espaco-4) var(--espaco-5);
}
/* O QUE JÁ PASSOU DO DIA DE DECIDIR É A ÚNICA COISA QUE ESTA TELA COBRA, e o
   fio de alerta é o único acento dela. Pintar mais do que isso seria a tela
   inventando urgência sobre números que ela não tem. Só a COR muda: a
   espessura já é a mesma em toda linha. */
.anu-leitura-cobra { border-color: var(--alerta-fio); }

.anu-leitura-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-3);
  margin-bottom: var(--espaco-3);
}
/* O SELO FICA NO CANTO DIREITO, SEMPRE. Ele é a resposta a "em que pé está
   ESTA leitura?", e resposta que muda de lugar conforme o tamanho do nome da
   campanha é resposta que se procura. `margin-left: auto` empurra sem brigar
   com a quebra: num nome comprido ele desce para a linha de baixo, ainda à
   direita, em vez de espremer o nome. */
.anu-leitura-topo .etiqueta { margin-left: auto; }

/* O NOME É UM LINK E PRECISA PARECER UM, sem gastar verde. Ele não tinha marca
   nenhuma de elo: era só uma palavra em negrito. O fio fraco embaixo diz "isto
   leva a algum lugar" nos dois temas sem pintar nada, e o hover só o escurece
   -- ver §2.3 da especificação, que tira `.anu-leitura-nome:hover` da lista do
   acento.

   E ELE É O ÚNICO ALVO DE DEDO DO CARTÃO: tinha a altura da letra, 23px de
   linha, sem folga nenhuma acima nem abaixo. Os 5px de cada lado o levam a
   33px no computador, e o telefone o leva a 44px. */
.anu-leitura-nome {
  display: inline-block;
  padding: 5px 0;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 600;
  font-size: var(--letra-5);
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--borda-forte);
  text-underline-offset: 4px;
}
.anu-leitura-nome:hover { text-decoration-color: var(--tinta); }
.anu-leitura-venceu { color: var(--alerta); }

.anu-leitura-pe {
  margin: var(--espaco-3) 0 0;
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--borda);
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: var(--letra-2);
  color: var(--neutro);
}

/* O QUE O PILOTO DECIDIU (28/09/2026): uma linha por campanha, acima do pé,
   na medida de leitura da frente. O dia, em negrito, é o que se varre. */
.anu-piloto {
  margin: var(--espaco-3) 0 0;
  max-width: var(--anu-medida);
  color: var(--tinta-2);
}
.anu-piloto b { color: var(--tinta); }

/* O QUE ESTAVA SOLTO DENTRO DO CARTÃO. A nota do que o planejamento não soube e
   o parágrafo da campanha sem plano corriam a largura inteira do cartão --
   982px para uma frase de sessenta caracteres. Ganham a medida de leitura da
   frente, que é a mesma do resto dela. */
.anu-leitura .texto-apoio { max-width: var(--anu-medida); }
/* E A NOTA DO QUE O PLANO NÃO SOUBE GANHA UM RESPIRO. Com os 8px de
   `.texto-mini`, ela nascia colada na regra de corte e, do tamanho de legenda e
   começando na coluna do RÓTULO, lia-se como se fosse continuação dela -- uma
   pergunta aberta do estrategista para o dono passando por letra miúda da
   regra que o Estúdio escreveu. */
.anu-leitura .texto-mini { max-width: var(--anu-medida); margin-top: var(--espaco-4); }
/* O PRÓXIMO PASSO DA CAMPANHA TRAVADA. Sem plano não há combinado nenhum para
   ler, e a única coisa que o dono pode fazer nesse cartão é ir planejar. O elo
   estava dentro do parágrafo, do mesmo tamanho e do mesmo tom do texto em
   volta -- e verde, porque `a` da casa é `--acento`.

   ELE NÃO VIRA CONTROLE PREENCHIDO: o controle desta tela é UM, e ele está na
   ordem do dia, lá em cima. Dois controles com o mesmo peso são nenhum. Aqui o
   elo ganha peso de elo que se vê -- tinta cheia, Archivo, e o fio de baixo
   afastado da letra. O ponto final da frase continua FORA dele, que é o que um
   botão não deixaria fazer sem sobrar lixo visual. */
.anu-leitura .texto-apoio a {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 600;
  color: var(--tinta);
  text-decoration-color: var(--borda-forte);
  text-underline-offset: 3px;
}
.anu-leitura .texto-apoio a:hover { text-decoration-color: var(--tinta); }

/* OS QUATRO CAMPOS DO COMBINADO, em `dl` porque é exatamente isso: rótulo e
   valor. E ELES SÃO UMA FICHA, E NÃO UMA FILEIRA DE COLUNAS.

   A RAZÃO NÃO É PIXEL, É FORMA. Três colunas de rótulo-em-caixa-alta com um
   valor embaixo TÊM A FORMA de um painel de métrica -- e esta tela inteira
   existe para dizer que o Estúdio não tem métrica nenhuma da Meta. O desenho
   estava contando, calado, a mentira que o texto passa a página inteira
   negando. Ver testes/test_desempenho_nao_e_placar.py.

   E A CONTA FECHA JUNTO. MEDIDO a 1280px: `auto-fit` de 190px abria QUATRO
   trilhas de 229px dentro de um cartão de 982px, e os três campos curtos caíam
   em três delas. A quarta ficava vazia na primeira fileira -- e não colapsava,
   porque `.anu-contrato-largo` atravessava a grade e a ocupava na segunda. O
   olho pousava no primeiro valor, saltava 251px à direita, mais 251px à
   direita, e voltava mil pixels à esquerda e uma fileira abaixo para ler a
   regra de corte: mais de um metro de tela para recolher quatro frases de duas
   a sete palavras.

   Agora são quatro linhas contra a MESMA régua de rótulo da entrega
   (`--anu-rotulo-coluna`): o olho desce uma coluna só, todo valor começa no
   mesmo x, e a ficha se lê como a frase que o dono leva para o Gerenciador. Ela
   custa cerca de 30px por cartão, e não adianta fingir que a tela encurtou --
   o que encurtou foi o caminho, e caminho é o que cansa.

   `subgrid` é o que faz o rótulo de cada par nascer na régua do CARTÃO e não na
   do próprio par. Onde não houver (Chrome 117+, Safari 16+, Firefox 71+), cada
   par volta a ser rótulo em cima e valor embaixo -- que é exatamente o desenho
   do telefone: degrada, não quebra. */
.anu-contrato {
  display: grid;
  grid-template-columns: var(--anu-rotulo-coluna) minmax(0, 1fr);
  gap: var(--espaco-2) var(--espaco-4);
  margin: 0;
  max-width: var(--anu-medida);
}
.anu-contrato > div {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  min-width: 0;
}
/* A REGRA DE CORTE É A ÚNICA DAS QUATRO QUE NÃO É LEITURA: as três de cima
   dizem o que olhar, onde e quando, e esta diz o que FAZER com o que se leu.
   Um fio acima dela separa a pergunta do "e então?". Era ela que ocupava a
   fileira inteira na grade antiga; aqui a fileira inteira é o normal, e o que
   a distingue passou a ser o fio -- a classe continua com trabalho de verdade,
   que é o que o teste de classes cobra. */
.anu-contrato-largo {
  border-top: 1px solid var(--borda);
  padding-top: var(--espaco-3);
  margin-top: var(--espaco-1);
}
/* O RÓTULO CONTINUA SENDO ESCRITO AQUI, e não trocado por `.anu-rotulo` no
   HTML. Os dois dizem a mesma coisa, mas esta régua precisa de `margin: 0` no
   computador (rótulo e valor ficam LADO A LADO) e de 3px no telefone (a linha
   vira pilha) -- e `.anu-rotulo` carrega 6px fixos. É diferença de
   comportamento, e não duplicação por descuido. */
.anu-contrato dt {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-3);
  color: var(--tinta-2);
  margin: 0;
}
/* O VALOR SOBE PARA O CORPO (15px). Ele é o conteúdo desta tela -- o número que
   decide, o lugar onde se lê, a regra de desligar -- e saía em 13px, tamanho de
   legenda, MENOR que o parágrafo de doutrina logo acima dele. E o rótulo, em
   caixa alta com .11em de entreletra, se lia como TÍTULO mesmo a 10,5px: numa
   tela cujo trabalho inteiro é entregar esse valor, o rótulo estava ganhando a
   página. */
.anu-contrato dd {
  margin: 0;
  font-size: var(--letra-4);
  line-height: 1.5;
  color: var(--tinta);
}

/* --- a aba Automático da frente ----------------------------------------- */

/* UMA BARRA DE GASTO SOZINHA NÃO PODE OCUPAR A TELA INTEIRA. `.auto-gastos` é
   `auto-fit`, e com um filho só ela estica a fileira: o teto de imagem virava
   um fio de 1.250px, e a fatia gasta deixava de ser legível. No telefone isto
   não tem efeito -- a tela toda é mais estreita que o limite. */
.anu-gasto-so { max-width: 560px; }

/* A lista fechada de onde o número pode ser lido. `ul` de frases, e não de
   selos: `.itens` é uma fileira em linha, e aqui cada item é uma oração. */
.anu-onde {
  margin: 0 0 var(--espaco-2);
  padding-left: var(--espaco-4);
  font-size: var(--letra-3);
  line-height: 1.6;
  color: var(--tinta-2);
}

/* =========== COMPARTILHADO COM MAIS TRÊS TELAS: ESCREVER UMA VEZ SÓ ========
   A DOUTRINA DOBRA; A AFIRMAÇÃO, NÃO.

   O `<summary>` leva a frase que a tela AFIRMA, inteira -- e nunca um "ver
   mais". O que fica atrás do toque é o PORQUÊ, que o dono já leu. Nota que
   evita erro nos próximos cinco segundos nunca entra aqui: ela mora ao lado
   do campo, visível, todo dia.

   `display: block` desfaz o `flex` de `.anu-aviso`, e por isso esta regra
   PRECISA vir depois dele: as duas têm a mesma especificidade e quem ganha é
   a última.

   E O `<summary>` NÃO GANHA `display: flex`, ao contrário do que a
   especificação escreveu. Medido no Chrome: o triângulo do `<details>` vem de
   `display: list-item` na UA, e trocar o display do `summary` APAGA o
   marcador -- a dobra fica sem nenhuma pista de que abre, e a tela de
   Desempenho proíbe desenhar um ícone no lugar. Sem flex nada se perde: a
   `.etiqueta` das outras telas é `inline-block` e senta na linha sozinha. */
.anu-porque { display: block; }
.anu-porque > summary {
  cursor: pointer;
  font-size: var(--letra-3);
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: var(--anu-medida);
}
.anu-porque > summary .etiqueta { margin-right: var(--espaco-3); }
.anu-porque > summary h3 {
  display: inline;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-4);
  color: var(--tinta);
  margin: 0;
}
.anu-porque > summary b { color: var(--tinta); font-weight: 600; }
.anu-porque[open] > summary { margin-bottom: var(--espaco-3); }
.anu-porque > p { margin: 0 0 var(--espaco-3); max-width: var(--anu-medida); }
.anu-porque > p:last-child { margin-bottom: 0; }
/* ================== fim do bloco compartilhado ========================== */

/* O PAINEL DE TETO. `.anu-teto` não desenha nada sozinho: ele existe para
   ESCOPAR. As barras de gasto são as mesmas de Conteúdo de propósito (estão
   na lista de emprestadas de test_abas_de_anuncios.py), e sem um escopo
   próprio qualquer regra escrita aqui mudaria a aba Automático de CONTEÚDO
   junto. `min-width: 0` para o número tabular não empurrar a grade. */
.anu-teto { min-width: 0; }

/* A LINHA DA TELA, E ELA SE REPETE NOS DOIS PAINÉIS: à esquerda o que se LÊ,
   à direita o que se FAZ. No painel de texto a direita é o campo; no painel
   de imagem a direita é o LUGAR ONDE O CAMPO NÃO ESTÁ, dizendo por quê.

   É esse paralelo, e não mais um parágrafo, que ensina a diferença que esta
   tela existe para ensinar. Antes, "equivalente de API" contra "dinheiro de
   verdade" era carregado por quatro parágrafos de corpo enquanto os três
   medidores eram fisicamente idênticos: o que diferia estava escrito e o que
   era igual estava desenhado.

   MEDIDO a 1280px: `main` tem 1.028px, o painel come 46px de moldura e sobram
   982px. 340px de coluna de ação e 30px de vão deixam 612px de leitura -- que
   é onde `.auto-gastos` (auto-fit de 240px) ainda abre em DUAS colunas, e os
   dois tetos de texto continuam lado a lado. Essa vizinhança é decisão de
   22/09/2026: o vizinho existe para provar que "conta separada" tem outro
   lado.

   A COLUNA NASCE A 940px, e não a 1080px como o trilho de `campanha`. MEDIDO:
   940px é a janela em que ainda sobram ~292px de leitura ao lado dos 340px de
   ação, e é o limite de baixo porque o dono usa esta tela com o Gerenciador
   da Meta aberto ao lado -- meia tela de um monitor de 1920 dá 960px, e essa
   é a largura real de trabalho dele, não um caso de laboratório. Abaixo dele
   empilha na ordem do HTML: leitura, depois ação, que é a ordem em que se
   decide um teto -- vê-se o gasto de hoje e só então se digita. */
.anu-teto-linha { display: grid; gap: var(--espaco-5) var(--espaco-6); align-items: start; }
.anu-teto-leitura { min-width: 0; }

/* A MEDIDA DE TETO É UM ENCAIXE, e as três são iguais porque as três são
   leitura. MEDIDO a 1280px, antes: `.auto-gasto` era `--papel-2` dentro de
   uma caixa `--papel-2` -- 1,00:1, o mesmo defeito de afordância que a
   fundação acabou de matar um andar acima, repetido três vezes na mesma tela.

   Agora ela desce para `--papel-3` (o ENCAIXE, "o dado que se lê", palavra da
   própria fundação): 1,12:1 contra o painel no claro e 1,13:1 no escuro -- o
   ÚNICO degrau que se lê igual nos dois temas, porque `--anu-elev-1` é `none`
   no escuro e uma sombra de 1px não separa dois fundos iguais no claro.

   É por isso que eu NÃO dou elevação aos dois cartões de teto, que é o que a
   especificação pede em §2.5: elevação ali mantém 1,00:1 de fundo e pede que
   1px de sombra faça sozinho o trabalho de uma escada. Esta é a única coisa
   em que eu me afasto da especificação, e é pelo argumento do §0 dela.

   NA B (decisao #50) O ENCAIXE E `--papel`: a cor da pagina, um degrau abaixo
   do cartao (SISTEMA 2.4). E O CARTAO DO GASTO NAO TEM MAIS FIO ESQUERDO --
   gasto nao e decisao, e a barra ja diz quanto andou. */
.anu-teto .auto-gasto {
  background: var(--papel);
  border-color: var(--borda);
  border-radius: var(--raio-3);
  box-shadow: none;
}
/* O FIO FORTE MARCA O ÚNICO DOS TRÊS QUE ESTA TELA MUDA. Ele é o terceiro
   sinal da mesma coisa -- o campo ao lado e a frase "Só este teto muda por
   aqui" são os outros dois -- e é o que sobrevive à passada de olho. Precisa
   dos dois níveis porque `.anu-teto .auto-gasto` acima é (0,2,0) e uma classe
   sozinha perderia dele. */
.anu-teto .anu-teto-daqui { border-color: var(--borda-forte); }
/* BATIDO, O ENCAIXE VIRA ÂMBAR -- e esta regra existe só por causa da conta
   de especificidade: `.auto-gasto.bateu` é (0,2,0) e está ANTES na folha, e
   as duas regras acima também são (0,2,0). Sem repetir aqui, o redesenho
   apagaria o aviso de porta fechada, que é a informação mais cara desta tela.
   Âmbar é "isto espera uma decisão sua". */
.anu-teto .auto-gasto.bateu {
  background: var(--alerta-fraco);
  border-color: var(--alerta-fio);
}
/* O NÚMERO É O NÚMERO DE FICHA DA FRENTE. 18px é o tamanho do TÍTULO do
   painel: o gasto de hoje empatava com o nome da seção, e num painel cujo
   conteúdo é uma leitura quem tem que ganhar é a leitura. `--anu-numero` é o
   mesmo 24px de `.anu-valor` nas outras sete telas. */
.anu-teto .auto-gasto-conta b { font-size: var(--anu-numero); line-height: 1.25; }
/* A PISTA DA BARRA PRECISA DE UM FUNDO QUE EXISTA. `.auto-barra` é
   `--papel-3` -- em Conteúdo um degrau abaixo do cartão, aqui a cor do
   PRÓPRIO encaixe. A pista sumia: as medidas zeradas ficavam sem barra
   nenhuma e a de 10% virava um sublinhado solto. É a única coisa que esta
   tela muda no componente emprestado, e muda só dentro de `.anu-teto`: a
   barra de Conteúdo continua sendo a mesma barra de sempre, e o `i` que
   cresce não se toca. */
.anu-teto .auto-barra { background: var(--borda); }
/* SOBRE O ENCAIXE, O SELO CINZA DA CASA SUMIRIA: `.etiqueta` é `--papel-3`, a
   mesma cor que o encaixe passou a ter. Ele sobe para a superfície do cartão
   e ganha um fio -- mesmo motivo e mesmo remédio de `.aviso.trava
   .etiqueta.alerta`, que já fazia isto lá em cima. */
.anu-teto .etiqueta { background: var(--papel-2); box-shadow: inset 0 0 0 1px var(--borda); }
.anu-teto .etiqueta.alerta { background: var(--alerta-fraco); box-shadow: inset 0 0 0 1px var(--alerta); }
/* A ÊNFASE DENTRO DA DESCRIÇÃO DO PAINEL: sem isto o `<b>` sai em `--neutro`
   e a ênfase vira só um peso, que a 13px não se enxerga. O par é o mesmo de
   `.anu-aviso p b`. */
.anu-teto .anu-painel-cabeca p b { color: var(--tinta); font-weight: 600; }

/* O ESTADO FICA SEMPRE NO MESMO LUGAR: primeira linha da medida, antes do
   nome, nas TRÊS. Um selo diz de que dinheiro se trata -- e é a distinção que
   esta tela inteira existe para fazer, dita onde o olho bate primeiro em vez
   de no fim do quarto parágrafo. O outro só aparece quando a porta fechou:
   selo que só existe quando há o que dizer é selo que se lê. */
.anu-teto-selos { display: flex; flex-wrap: wrap; gap: var(--espaco-1) var(--espaco-2); margin: 0 0 var(--espaco-2); }

/* A EXPLICAÇÃO DO PAR fica EMBAIXO do par, e não em cima dele: ela fala dos
   DOIS tetos ("a conta é outra"), e uma frase sobre dois números só quer
   dizer alguma coisa depois que os dois estão à vista. */
.anu-teto-porque { margin-top: var(--espaco-4); max-width: var(--anu-medida); }

/* O CAMPO: A ÚNICA COISA DESTA TELA QUE ESCREVE ALGUMA COISA.

   MEDIDO a 1280px, antes: o campo estava em y=825 e o botão em y=903, numa
   página de 1.828px -- os dois ABAIXO da dobra de 900px, e o botão era o
   único objeto clicável da tela. Pior: o `<input>` era `background:
   var(--papel)`, que nesta frente é a MESA. O campo de digitar era a
   superfície mais ESCURA da tela dentro da mais clara -- um buraco cavado até
   a mesa, no lugar exato onde se digita.

   Ele é um encaixe com controles BRANCOS dentro, e a escada faz o trabalho
   sozinha: o que se lê afunda, o que se aperta sobe. Num painel em que tudo é
   leitura, o único bloco com coisas brancas dentro é o único bloco em que se
   mexe -- e isso se enxerga de longe, sem cor nenhuma, igual nos dois temas.

   O fundo do `input` vai escopado aqui de propósito. A regra da frente
   inteira (`html[data-frente="anuncio"] input, select, textarea`) é
   necessária e vale para a tela de Criar também -- ela é da varredura global,
   e escrevê-la aqui seria a mesma linha entregue por dois agentes.

   OS 360px SÃO PARA A FAIXA DO MEIO, e só para ela. Acima de 940px a coluna
   já tem 340px e o teto é inerte; no telefone a tela inteira é mais estreita
   e ele é inerte também. Entre 720 e 940px, sem ele, MEDIDO a 939px: o bloco
   esticava para 781px e o botão preenchido virava uma barra preta de 747px
   atravessando a tela. Alvo de dedo é altura, não largura. */
.anu-teto-campo {
  max-width: 360px;
  padding: var(--espaco-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--papel);
}
.anu-teto-campo .campo { margin-bottom: var(--espaco-4); }
.anu-teto-campo input[type=text] { background: var(--anu-controle); border-color: var(--borda-forte); }
.anu-teto-campo .texto-mini { max-width: var(--anu-medida-nota); }

/* A AÇÃO PRIMÁRIA -- E ELA NÃO GASTA DINHEIRO NENHUM.

   ESTE BOTAO CHEIO DE TINTA E DA DOUTRINA DE ANTES DA B, em que verde queria
   dizer verba. Na B (decisao #50) o verde cheio e a DECISAO da tela, e a
   decisao desta tela e o teto -- ou, enquanto faltar o endereco da pagina ou
   o WhatsApp, o "Guardar" da porta do destino (PLANO-v2, secao 4.1). A troca
   e da frente de Anuncios (Etapa 5.2), que redesenha a tela inteira; ate la
   ele fica como esta, para nao haver dois verdes na mesma tela.

   Então ele é CHEIO DE TINTA, que é a mesma saída de `.anu-passo-numero` na
   especificação e pelo mesmo motivo. Cheio de tinta ele é o objeto mais forte
   da tela nos dois temas: no escuro `--tinta` é quase branco e ele vira o
   único bloco claro do painel. `--anu-elev-2` aparece UMA vez por tela, e
   nesta tela é aqui: a especificação reserva a segunda elevação para o que
   decide.

   LARGURA CHEIA E 44px porque ele media 192px por 37px numa fileira de 982px:
   era o alvo mais importante da tela e o menor objeto dela, e o dono também
   usa isto no telefone. */
/* NA B O "GUARDAR" E O BOTAO NEUTRO DA CASA, na largura da coluna, e so UM
   deles e verde por vez (`.forte`, escolhido no template): o dos enderecos
   enquanto falta a pagina ou o WhatsApp, e o do teto depois. Os tres eram
   cheios de tinta branca, com a mesma elevacao -- tres "aperte aqui" iguais
   numa tela que tem uma decisao. */
.anu-guardar {
  width: 100%;
  min-height: 44px;
}

/* O LUGAR ONDE O CAMPO NÃO ESTÁ. Ele fica na MESMA coluna em que o campo do
   painel de cima está, com a mesma superfície e a mesma moldura -- e é ISSO
   que responde, sem uma palavra a mais, a pergunta desta tela: o teto de
   texto é desta frente e muda aqui; o de imagem é da marca inteira e muda num
   lugar só. A ausência ganhou a forma e a posição exatas do campo que não
   existe, no lugar onde o dono ia procurá-lo.

   Afundado e sem nada claro dentro, pela mesma regra de `.anu-plano-pedir`:
   lugar vazio não levanta, e o que não tem controle dentro não se aperta. O
   tracejado saiu com a B (superficie lisa); fica o fio forte. */
.anu-teto-sem-campo {
  max-width: 360px;
  padding: var(--espaco-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-3);
  background: var(--papel);
  box-shadow: none;
}
.anu-teto-sem-campo .texto-apoio { max-width: none; }

@media (min-width: 940px) {
  /* MEDIDO nos dois lados deste degrau: a 940px o campo nasce em y=438 e o
     botão em y=557; a 939px eles caem para 758 e 877, porque a ação vai para
     baixo da leitura. Abaixo daqui a coluna de ação não cabe sem espremer as
     medidas de texto abaixo de 240px, que é o piso da grade emprestada.
     É a PRIMEIRA `min-width` desta folha. Se a casa preferir só `max-width`,
     a mesma coluna sai com `grid-template-columns: minmax(0,1fr) 340px` no
     topo e `grid-template-columns: minmax(0,100%)` dentro de um
     `@media (max-width: 939px)`. */
  .anu-teto-linha { grid-template-columns: minmax(0, 1fr) 340px; }
}


/* --- o que a frente empresta da casa, e que sobe um degrau --------------- */

/* A DOBRA DE ANUNCIOS NAO TEM MAIS DESENHO PROPRIO: o `summary` da casa ja e
   o botao neutro (um degrau acima do cartao, fio forte), nas duas frentes. So
   o vao fica, porque e medida da frente: 30px entre blocos, e nao os 40px da
   dobra de Conteudo -- ver `.anu-cartoes`. */
html[data-frente="anuncio"] .dobra { margin-top: var(--espaco-6); }

/* A REGRA DO CAMPO DE DIGITAR (`html[data-frente="anuncio"] input/select/
   textarea`) SAIU DAQUI NA INTEGRACAO: ela e a mesma da aba Criar, e a aba
   Criar chegou primeiro -- com `border-color: var(--borda-forte)` junto, que
   e o que desenha o campo no tema claro, onde o branco sobre o cartao da
   1,03:1. Ela vale para as oito telas, e ali ela ja vale para esta. */

/* --- celular, MEDIDO a 390 x 844 ----------------------------------------- */

@media (max-width: 720px) {
  /* O painel encolhe a moldura: 22px de cada lado, dentro de 358px de tela,
     são 44px gastos em borda antes de qualquer conteúdo. */
  .anu-painel { padding: var(--espaco-4); border-radius: var(--raio-2); }
  .anu-cartao { padding: var(--espaco-4); border-radius: var(--raio-2); }

  /* A tira acompanha o painel: 22px de cada lado, dentro de 358px de tela,
     sao 44px gastos em moldura antes de qualquer palavra. */
  .anu-atencao { padding: var(--espaco-4); }

  /* AS MEDIDAS EM DUAS COLUNAS, sem o fio entre elas. Em coluna única, quatro
     medidas viram quatro linhas e o painel come meia tela; com o fio, a
     segunda coluna ganha uma borda solta no meio do nada quando a fileira tem
     um item só. */
  .anu-medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4) var(--espaco-3); }
  .anu-medida { padding: 0; border-left: 0; }
  .anu-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A VERBA OCUPA A FILEIRA INTEIRA. Ela é o número que decide, carrega duas
     frases embaixo, e numa coluna de 170px a explicação virava seis linhas
     com a coluna vizinha vazia ao lado. */
  .anu-medidas .anu-verba { grid-column: 1 / -1; }
  /* O cartão fica em pilha, e as medidas dele seguem a mesma regra de duas
     colunas. As duas linhas precisam do seletor com dois níveis porque é
     assim que elas estão declaradas lá em cima -- sem isso a trilha de três
     do computador continuaria valendo em 390px, com 100px por número. */
  .anu-cartao-grade { grid-template-columns: minmax(0, 100%); gap: var(--espaco-4); }
  .anu-cartao .anu-medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anu-cartao .anu-medida { padding: 0; }
  .anu-valor { font-size: 20px; }
  .anu-verba .anu-valor { font-size: 22px; }
  .anu-resumo:not(.anu-agenda) .anu-verba .anu-valor { font-size: 28px; }
  .anu-nota { max-width: none; }

  /* DUAS COLUNAS DE CRIATIVO, pela mesma conta da galeria de Conteúdo: com a
     moldura 4:5 em coluna única, cada cartão reservaria 377px de altura e
     três criativos virariam mil e cem pixels de rolagem. */
  .anu-criativos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4) 10px; }
  /* O RESPIRO DO CARTAO ENCOLHE NO TELEFONE. MEDIDO a 390px: em duas colunas o
     cartao tem 174px, e 16px de cada lado comem 32px do titulo -- que e o texto
     pelo qual ele procura. Com 12px sobram 150px de leitura. O raio acompanha
     `.anu-painel` e `.anu-cartao`, que ja encolhem aqui. */
  .anu-criativo { padding: var(--espaco-3); border-radius: var(--raio-2); }
  .anu-criativo > .anu-moldura { margin: calc(var(--espaco-3) * -1) calc(var(--espaco-3) * -1) var(--espaco-3); }
  .anu-publico-corpo { padding: var(--espaco-3); }
  .anu-publico-cabeca { padding: var(--espaco-3); }
  /* A verba do público desce para baixo do nome em vez de espremer os dois. */
  .anu-publico-verba { text-align: left; }

  .anu-pe { grid-template-columns: 1fr; gap: var(--espaco-5); }
  /* O ENCAIXE ENCOLHE JUNTO COM O PAINEL. Em 358px de tela util, 22px de
     moldura de painel mais 16px de moldura de encaixe deixariam 282px para um
     numero de 24px com uma frase de 54 caracteres embaixo. */
  .anu-teto-campo,
  .anu-teto-sem-campo { padding: var(--espaco-3); border-radius: var(--raio-2); }
  .anu-teto .auto-gasto { border-radius: 0 var(--raio-2) var(--raio-2) 0; }
  .anu-quer { gap: var(--espaco-4); }
  .anu-aviso { flex-direction: column; gap: var(--espaco-2); }

  /* O ANÚNCIO PLANEJADO VIRA PILHA. Em 358px de largura útil, o ângulo e o
     botão lado a lado deixavam 120px para uma frase de sessenta caracteres --
     e o botão, que é o que se toca, ficava do tamanho de um selo.

     E O `flex` DO TEXTO PRECISA SER DESLIGADO JUNTO, que é a parte que só se
     descobre olhando: `flex: 1 1 28ch` no computador é uma LARGURA mínima,
     mas em direção de coluna o mesmo `28ch` vira ALTURA -- e o bloco do
     ângulo passava a ter 360px de altura, com a etiqueta “escrito” lá no fim,
     longe do ângulo a que ela pertence. MEDIDO a 390x844. */
  .anu-planejado {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
  }
  .anu-planejado-quem { flex: none; }
  .anu-planejado-agir button { width: 100%; min-height: 44px; }

  /* A ENTREGA NO TELEFONE. A arte sai da coluna da esquerda e vira uma faixa
     em cima do texto: com 120px de miniatura sobravam 190px para o texto
     principal, que tem 125 caracteres -- oito linhas de duas palavras. */
  .anu-entrega-anuncio { grid-template-columns: minmax(0, 100%); gap: var(--espaco-3); }
  .anu-entrega-arte { aspect-ratio: 16 / 9; }
  .anu-entrega-sem-arte { aspect-ratio: auto; }

  /* O BOTÃO DE COPIAR CONTINUA NA LINHA DO VALOR, e só cai para baixo quando
     o valor é longo (o texto principal, o público). Em largura total ele virava
     uma barra por campo -- seis barras iguais numa tela, e a página passava a
     parecer um formulário em vez de uma lista para conferir. O que ele ganha
     no telefone é ALTURA de dedo, não largura. */
  .anu-copiar { min-height: 40px; padding-left: var(--espaco-4); padding-right: var(--espaco-4); }
  .anu-campo-longo + .anu-copiar { width: 100%; }

  /* O passo continua tendo número, mas o círculo encolhe: em 20px de círculo
     mais 8px de folga, o título de duas palavras ainda cabe numa linha. */
  .anu-passo-numero { width: 26px; height: 26px; }

  /* A LINHA DE FICHA VOLTA A SER PILHA. Em 358px de util, 156px de rotulo
     deixariam 190px para o valor -- e ai a coluna deixa de ser regua e vira
     aperto, numa tela onde nao ha para onde o olho correr de lado. MEDIDO a
     390x844, 360x800 e 320x720. */
  .anu-campo-copia { grid-template-columns: minmax(0, 100%); padding: var(--espaco-2) 0; }
  .anu-campo-copia > .anu-rotulo { padding-top: 0; }
  .anu-campo-copia > .anu-campo-linha,
  .anu-campo-copia > .anu-nota,
  .anu-campo-copia > .anu-limite { grid-column: 1; }

  /* E AQUI O VALOR VOLTA A TER PISO BAIXO E A CRESCER, que e o contrario do
     computador. A razao e uma regra de flexbox que so se ve MEDINDO: numa
     linha que quebra, o navegador decide a quebra pelo tamanho BASE dos itens,
     e so depois encolhe o que sobrou na linha. Com o valor do tamanho do texto
     -- `prospecção fria — setembro` da 229px -- a conta 229 + 8 + 72 nao cabe
     nos 296px uteis de um telefone de 360, e o botao caia para uma segunda
     linha em campos que antes cabiam numa so: MEDIDO a 360x800, o campo do
     nome ia de 79px para 114px. Com base de 12ch ele cabe, cresce para ocupar
     o que sobra, e o texto quebra DENTRO da caixa -- que e exatamente o que
     acontecia antes deste redesenho.
     `.anu-campo-longo` reafirma os 100% na linha de baixo porque a regra acima
     tem a mesma forca e viria depois: o texto principal e o link CONTINUAM
     empurrando o botao para a linha seguinte, que e o que faz
     `.anu-campo-longo + .anu-copiar { width: 100% }` existir. */
  .anu-campo-copia .anu-campo-valor { flex: 1 1 12ch; }
  .anu-campo-copia .anu-campo-longo { flex-basis: 100%; }

  /* A ESTEIRA ENCOLHE, MAS NAO SAI. No telefone, de pe, com o Gerenciador em
     outro aplicativo, saber quanto falta e como voltar vale mais e nao menos.
     O que ela perde e o respiro, e nao a informacao -- e ali o cabecalho ja
     rolou embora (`--topo-altura: 0px`), entao ela gruda no topo da janela. */
  .anu-esteira { gap: var(--espaco-1) var(--espaco-3); }
  .anu-esteira .volta { flex: 1 1 auto; }
  .anu-acoes .botao { width: 100%; text-align: center; }

  /* AS QUATRO ABAS NOVAS, no telefone. MEDIDO a 390x844.

     A SETA DO ATALHO FICA, MAS ENCOLHE (Etapa 5.2). Ela sumia por
     `display: none` -- e na B nada some no celular sem motivo escrito (N3).
     Os vaos apertam para 12px, e a seta fica com a largura dela (~12px): o
     nome perde 24px, e nao os 92 de antes. */
  .anu-atalho { gap: var(--espaco-3); padding: var(--espaco-3); }

  /* O botão principal do formulário desta frente vira alvo de dedo, como já
     acontece dentro de `.bloco` e de `.dobra-corpo`. */
  .anu-forma button.forte { width: 100%; }

  /* O PAR DE DATAS VOLTA A DIVIDIR A LINHA EM DUAS PARTES IGUAIS. 18ch fixos
     em 358px de útil deixariam 34px de sobra à direita -- vazio sem razão
     numa tela em que cada pixel de largura é disputado. */
  .anu-forma-quando { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* A NOTA DA VERBA VOLTA PARA BAIXO DO CAMPO. Com 18ch de campo sobrariam
     190px para 150 caracteres -- oito linhas de duas palavras, que é o mesmo
     erro que a nota tinha no computador, só que ao contrário. */
  .anu-forma-verba { grid-template-columns: minmax(0, 100%); }
  .anu-forma-verba small { margin-top: var(--espaco-1); max-width: none; }

  /* O BOTÃO DE DEDO EM CIMA, A FRASE EMBAIXO. Empilhar é o que impede a frase
     de espremer o alvo agora que ele tem a largura da tela. */
  .anu-forma-agir { flex-direction: column; align-items: stretch; }
  .anu-forma-agir .texto-mini { flex: none; max-width: none; }

  /* A MEDIDA LARGA OCUPA A FILEIRA, pelo mesmo motivo da verba: ela carrega
     uma frase, e numa coluna de 170px a frase virava cinco linhas com a
     coluna vizinha vazia ao lado. */
  .anu-medidas .anu-medida-larga { grid-column: 1 / -1; }

  /* O COMBINADO EM COLUNA ÚNICA. Em duas colunas de 155px, "o número que
     decide" (o rótulo) quebrava em três linhas em cima de um valor de duas
     palavras, e as quatro caixas ficavam de alturas diferentes. */
  .anu-contrato { grid-template-columns: minmax(0, 100%); gap: var(--espaco-3); }
  /* Em coluna única a régua não existe: o rótulo volta a ficar EM CIMA do
     valor, e é ele que precisa da folga de volta. E o fio da regra de corte já
     separa sem o respiro extra de cima. */
  .anu-contrato > div { display: block; }
  .anu-contrato-largo { margin-top: 0; }
  .anu-contrato dt { margin-bottom: 3px; }
  /* O raio acompanha `.anu-painel` e `.anu-cartao`, que já caem para
     `--raio-2` no telefone. */
  .anu-leitura { padding: var(--espaco-4); border-radius: var(--raio-2); }
  /* 44px de alvo, que é a conta de dedo que a barra de abas já usa. */
  .anu-leitura-nome { font-size: var(--letra-4); display: inline-flex; align-items: center; min-height: 44px; }

  /* A ORDEM DO DIA EM PILHA, com o controle na largura da tela: em 358px o
     botão ao lado de uma frase de sessenta caracteres deixaria 150px para a
     frase. Mesma saída que `.anu-acoes .botao` e `.anu-forma button.forte` já
     usam nesta frente. */
  .anu-hoje { padding: var(--espaco-4); border-radius: var(--raio-2); }
  .anu-hoje .anu-hoje-caso { grid-template-columns: minmax(0, 100%); }
  .anu-ir { width: 100%; min-height: 44px; }
}

/* =========================================================================
   AS DUAS ABAS QUE FALAM DE NÚMERO (23/09/2026): Desempenho e Automático.

   Escrito no FIM do bloco, e só aqui: outro agente desenhava as abas Criar e
   Criativos ao mesmo tempo, e escrever cada um na sua ponta é o que faz as
   duas mãos caberem no mesmo arquivo sem se apagarem.
   ========================================================================= */

/* O PAINEL DE DESEMPENHO É UMA AGENDA DE LEITURA, E NÃO O PLACAR DA LISTA.

   Ele nasceu com as três medidas da aba Campanhas -- criativos, campanhas,
   verba -- e ainda com as duas primeiras colunas trocadas de lugar entre as
   duas telas. Quem clicava de uma para a outra via a mesma caixa duas vezes,
   com o olho pousando no número errado. Aqui ele responde o que só esta tela
   pergunta: QUANDO ir olhar, e em quantas campanhas há o que olhar.

   DUAS COISAS MUDAM JUNTO COM ISSO, e são as duas que esta classe carrega.

   1. AS TRILHAS. `.anu-resumo` reparte 170px / 220px / 1fr porque lá as duas
      primeiras medidas são contagem de uma palavra. As daqui carregam data e
      frase, e em 220px a nota do meio quebrava em quatro linhas de três
      palavras.

   2. A VERBA NÃO SAI EM VERDE E EM 27px. Na lista o destaque é honesto: a
      verba É o assunto daquela tela. Numa tela chamada "Desempenho" o MESMO
      número tem a forma exata de um RESULTADO, e cor e tamanho se leem antes
      do rótulo -- "R$ 80,00" grande e verde ali em cima se lê como o que
      ENTROU, que é justamente o número que este projeto decidiu nunca fingir
      ter, porque o Estúdio não fala com a API de anúncios da Meta.

      O valor continua inteiro, em reais, com o rótulo que diz o que ele é. O
      que sai é o destaque que o dado não sustenta -- o mesmo critério do
      resto da casa, em que precisão falsa é pior que número nenhum porque
      parece informação. Ver testes/test_desempenho_nao_e_placar.py. */
.anu-agenda { grid-template-columns: minmax(0, 200px) minmax(0, 270px) minmax(0, 1fr); }
.anu-agenda .anu-verba .anu-valor {
  color: var(--tinta);
  /* E NA LARGURA DO TEXTO: numero largo e grande e justamente a forma de
     placar que esta tela recusa (SISTEMA 5.13). */
  font-stretch: 100%;
  /* O TAMANHO DE `.anu-valor`, e não o de destaque da verba. Era `23px`
     literal, e era verdade enquanto `.anu-valor` também era 23px literal: a
     fundação levou `.anu-valor` para `--anu-numero` (24px) e este literal ficou
     para trás. Numa fileira de três números, o de dinheiro virou o único 1px
     menor -- pequeno demais para alguém apontar, grande o bastante para a
     fileira parecer torta. É o defeito que esta regra existe para consertar,
     pelo avesso. O que ela DESLIGA continua desligado: a cor. */
  font-size: var(--anu-numero);
}
/* O travessão de "não há verba escrita" continua neutro. Sem esta linha ele
   herdaria a tinta cheia da regra acima e passaria a pesar como um valor,
   para dizer justamente que não há valor nenhum. */
.anu-agenda .anu-verba .anu-valor.anu-vazio { color: var(--neutro); }

@media (max-width: 720px) {
  /* AS DUAS COLUNAS DO TELEFONE VALEM AQUI TAMBÉM. `.anu-resumo` já as
     declara lá em cima, mas esta classe vem depois na folha e com o mesmo
     peso -- sem repetir a regra, a trilha de 200px/270px/1fr do computador
     voltaria a valer em 358px de tela. */
  .anu-agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* E a verba acompanha `.anu-valor`, que cai para 20px no telefone: sem
     isto a regra de cima segurava 23px, e a única medida fora de tamanho da
     fileira era justamente a de dinheiro. */
  .anu-agenda .anu-verba .anu-valor { font-size: 20px; }
}
/* [/dono: anuncios] */


/* [dono: conteudo] */
/* =========================================================================
   AS TELAS DE CONTEÚDO DEPOIS QUE O MENU VIROU BARRA LATERAL (23/09/2026)

   Escrito no FIM da folha, e só aqui: outro agente desenha as telas de
   Anúncios ao mesmo tempo, e cada um na sua ponta é o que faz as duas mãos
   caberem no mesmo arquivo sem se apagarem.

   É UM DEFEITO SÓ, COM DUAS VÍTIMAS -- e ele não aparece a 1280px.

   A barra lateral tirou 208px de `main` no computador: é `--lateral-largura`.
   Nenhuma tela de Conteúdo ficou mais LARGA com a mudança; o que mudou foi
   que TODO corte de `@media` desta folha mede a JANELA, e quem encolheu foi o
   CONTEÚDO. Um corte medido a 860px de janela protegia 816px de conteúdo;
   hoje 860px de janela são 608px de conteúdo. Ou seja: cada corte passou a
   disparar 208px tarde demais, e o estrago mora na FAIXA DO MEIO -- entre o
   corte antigo e ~1070px. A 1280px está tudo certo, e foi por isso que quase
   passou batido.

   O CRITÉRIO, uma vez para as duas: o corte novo é a janela em que aquele
   desenho volta a ter A MESMA LARGURA DE CONTEÚDO que a medida original
   aprovou. Não é arredondamento nem chute, e não é "mais 208" mecânico: um
   dos dois cortes atravessa os 720px, onde `--margem-lateral` e o respiro de
   `.bloco` trocam de valor, e lá a conta muda. Cada regra traz a sua, feita
   até o fim. Se um dia `--lateral-largura` mudar, é aqui que se refaz.

   E ELA MUDOU, NA DIRECAO B (Etapa 3, 26/09/2026): o trilho tem 244px e a
   margem de `main` passou de 22 para 40px, entao cada corte foi MEDIDO de
   novo no Playwright, com o mesmo criterio -- a mesma largura de conteudo
   que a medida original aprovou. As contas estao em cada regra.
   ========================================================================= */

/* 1. O CALENDÁRIO: AS SETE COLUNAS DESISTEM 208px ANTES.

   O corte era 860px de janela, e ali cada dia tinha 110px. Com a barra
   lateral, 860px de janela dão 80px por dia -- MEDIDO em 880x900, antes
   desta regra:

     "HOJE" saía cortado na borda da caixa de quarta ("HOJ|");
     a etiqueta "A PRODUZIR" vazava para fora do cartão do dia;
     "vídeo ainda não é feito aqui" caía em cinco linhas de uma palavra.

   860 + 208 = 1068 (com a barra de 208px). NA B: 816 + 244 (o trilho) + 80
   (as duas margens de 40px) = 1140. MEDIDO: a 1.141px de janela o dia tem
   109,8px, os mesmos 110px que o corte antigo protegia; a 1.100px teria
   104px, e a 1.069px, 99,6px. Abaixo do corte a semana vira a lista que o
   telefone já usa -- que é o desenho certo para coluna estreita, e não uma
   grade espremida. As três declarações são as mesmas de `@media (max-width:
   860px)`, lá em cima, de propósito: esta regra só ESTENDE a faixa em que
   aquele desenho vale. */
@media (max-width: 1140px) {
  .cal-faixa { grid-template-columns: 1fr; gap: 6px; }
  .cal-dia.vazio { padding-top: 3px; padding-bottom: 3px; }
  .cal-numero { gap: var(--espaco-2); }
}

/* 2. O CARROSSEL, TELA A TELA: MESMA CONTA, MAIS 24px QUE QUASE PASSARAM.

   `.tela-roteiro` é a prévia de 260px à esquerda e os quatro campos daquela
   tela à direita. A coluna dos campos é o que sobra -- e com a barra lateral
   ela virou o que sobra de 208px a menos. MEDIDO, antes desta regra:

     janela  721px ....  141px de campo
     janela  760px ....  180px de campo   "Você conhece essa rotina de
                                           segunda-feira." em três linhas,
                                           cortada pelo textarea de 2 linhas
     janela  880px ....  300px de campo   (é aqui que ainda estava bom)

   O corte era 640px, e ali a coluna dos campos ficava em 293px. Mas o corte
   novo NÃO é 640 + 208: é 640 + 232. Os 24px de diferença são reais e quase
   passaram batido -- o corte antigo caía ABAIXO de 720px, onde
   `--margem-lateral` e o respiro de `.bloco` valem 16px cada, e o novo cai
   ACIMA, onde os dois valem 22px. São quatro vãos que engordam 6px cada.

     largura da coluna dos campos, acima de 720px:  janela - 580
     para os mesmos 293px:                          janela = 873

   Daí 872px, com a barra de 208px. NA B, MEDIDO: a coluna dos campos e
   `janela - 652` (348px a 1.000 de janela, 448 a 1.100): os 244 do trilho,
   as duas margens de 40, o respiro de `.bloco` (22 de cada lado), os 260 da
   previa e o vao de 22. Para os mesmos 293px, janela = 945 -- daí 944px,
   e nao os ~980 que a conta de cabeca previa (ela contava o respiro do
   bloco como 40). Abaixo disso a prévia sobe e os campos ficam com a largura
   inteira, como já acontece no telefone. As duas declarações repetem
   `@media (max-width: 640px)` pelo mesmo motivo da regra de cima: estender a
   faixa em que aquele desenho vale, e não inventar desenho novo. */
@media (max-width: 944px) {
  .tela-roteiro { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-3); }
  .tela-imagem { max-width: 320px; }
}

/* [/dono: conteudo] */

/* [dono: anuncios] */
/* =========================================================================
   AS TELAS DA FRENTE DE ANÚNCIOS DEPOIS QUE O MENU VIROU COLUNA (23/09/2026)

   A JANELA QUE A BARRA LATERAL COMEU. Enquanto o menu morava no cabeçalho,
   `main` tinha a janela inteira menos as duas margens: numa janela de 721px
   -- o primeiro pixel em que a folha deixa de ser telefone -- sobravam 677px
   de conteúdo, e é com esses 677px que as trilhas destas telas foram medidas
   e escritas.

   A barra lateral tem 208px (`--lateral-largura`), e a partir de 721px ela é
   uma coluna. Então `main` passou a receber `janela - 208 - 44`, e os mesmos
   677px só voltam a existir numa janela de 929px. Tudo o que estas telas
   mediram "a partir de 721px" passou a valer, na prática, a partir de 929px
   -- e entre um número e o outro há uma faixa inteira de janela em que as
   trilhas fixas não cabem mais. Uma janela de meia tela num monitor de
   1.920px tem 960px: é dentro desta faixa que o dono cai.

   O QUE QUEBROU DE VERDADE, MEDIDO no Playwright, com a barra no lugar:

     janela 721px  `.anu-agenda` (200 + 270 + 1fr) não cabe em 425px de painel:
                   a terceira trilha vai a zero, "R$ 1.975,00" é uma palavra
                   de máquina de escrever que não quebra, e A PÁGINA INTEIRA
                   PASSA A ROLAR DE LADO -- 80px em Desempenho, 47px na lista.
     janela 768px  a mesma trilha em 35px: o rótulo "Verba de mídia
                   comprometida" vira uma coluna de 400px de altura, uma
                   palavra por linha.
     janela 900px  `.anu-cartao-grade` (1fr + 520px) deixa 50px para o nome da
                   campanha: "prospecção fria — setembro" sai em vertical POR
                   CIMA do rótulo "VERBA DE MÍDIA" da coluna vizinha. O cartão
                   da lista, que é a tela inteira, fica ilegível.

   O CONSERTO É A MESMA SAÍDA QUE O TELEFONE JÁ USA, e não um desenho novo:
   as três medidas do painel viram duas colunas com a que carrega a frase
   ocupando a fileira, e o cartão vira pilha. Não há classe nova, não há cor
   nova e nenhuma tela mudou de HTML -- o que muda é em que largura cada
   desenho começa.

   O TETO DA FAIXA É 1.211px, E ELE É MEDIDO, não arredondado. Quem pede o
   número maior é o cartão. Com a barra de 208px a coluna do nome era
   `janela - 850`, e o teto era 1.000px. NA B (o trilho de 244px e a margem de
   40), MEDIDO no Playwright: a coluna de quem a campanha e passou a ser
   `janela - 920` (152px a 1.072 de janela), e dentro dela o nome divide a
   linha com o selo do estado, cravado ao lado (`.anu-cartao-topo`): o selo
   mais largo, "Pronta para subir", tem 116px, e o vao 16. A 1.073px isso
   deixava 21px para o nome -- uma letra por linha, OLHADO. O nome precisa de
   160px ao lado do selo: e onde cabe inteira uma palavra de quinze letras
   ("Administradoras", 148px a 19px, MEDIDA -- com 140px ela partia no meio,
   OLHADO a 1.192). Janela = 920 + 16 + 116 + 160 = 1.212: daí 1.211px.
   Abaixo dele o cartão é pilha, como no telefone.
   Abaixo de 721px nada disto vale: lá a barra já está no pé e `main` tem a
   tela toda de volta.
   ========================================================================= */

@media (min-width: 721px) and (max-width: 1211px) {
  /* AS TRÊS MEDIDAS DO PAINEL VIRAM DUAS COLUNAS. `.anu-resumo` reparte
     170/220/1fr e `.anu-agenda` reparte 200/270/1fr: as duas primeiras são
     trilhas FIXAS, então tudo o que falta sai da terceira -- que é justamente
     a que carrega a frase e o total do período. Em partes iguais ninguém fica
     com o resto. */
  .anu-resumo,
  .anu-agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* O FIO ENTRE AS MEDIDAS SAI JUNTO. Ele separa uma medida da vizinha na
     MESMA fileira; com duas colunas nasce uma segunda fileira, e a terceira
     medida apareceria com um fio à esquerda encostado em nada. É o mesmo
     motivo pelo qual o telefone já o remove. */
  .anu-resumo .anu-medida,
  .anu-agenda .anu-medida { padding: 0; border-left: 0; }

  /* A MEDIDA QUE CARREGA A FRASE OCUPA A FILEIRA INTEIRA. Nas três telas ela
     é a terceira: a verba na lista e em Desempenho, "o que pede você" na de
     criativos. Numa coluna de metade do painel a frase virava cinco linhas
     com a coluna vizinha vazia ao lado. */
  .anu-resumo .anu-verba,
  .anu-agenda .anu-verba,
  .anu-resumo .anu-medida-larga { grid-column: 1 / -1; }

  /* O CARTÃO DA LISTA VIRA PILHA: quem a campanha é em cima, as três medidas
     embaixo, na largura inteira. A trilha da direita é de 520px cravados, e
     cravado não encolhe -- o que encolhe é o nome, que é o que se lê. */
  .anu-cartao-grade { grid-template-columns: minmax(0, 100%); gap: var(--espaco-4); }
}
/* [/dono: anuncios] */

/* [dono: anuncios] */
/* =========================================================================
   O GERENTE DE ANÚNCIOS: a aba onde se conversa e o Estúdio age (23/09/2026)

   O PEDIDO DO DONO: "em anúncios crie 1 aba para gerenciar as coisas e tudo
   mais com IA". E, nas duas escolhas seguintes: "Executa, com sua
   confirmação" e "Opus sempre, e mostra o custo". As três viraram desenho:

     "executa"             o card de confirmação, e ele é o centro da tela
     "com sua confirmação" risco, custo e avisos ACIMA do fio; botões abaixo
     "mostra o custo"      em cada fala e somado no alto

   NENHUM TOKEN NOVO, NENHUMA COR NOVA, e nenhum componente duplicado: o
   painel, a medida, o rótulo em caixa alta, os campos e o atalho já existem
   nesta frente, e o que está aqui é o que ela ainda não tinha -- uma conversa
   e uma decisão.

   O PREFIXO É `anu-ia-` porque a folha é uma só e nome genérico colide sem
   avisar. Ver a nota sobre `.quando` no topo de testes/test_folha_de_estilo.py.

   --- 24/09/2026: A ESCADA APONTA PARA UM LADO SO -------------------------

   MEDIDO com a fundacao ja no disco, cores computadas no navegador. O caminho
   de superficie ate a decisao era:

     mesa            #ECEBE0
     .anu-ia-gerente #FDFCF8   1,17:1 ACIMA da mesa
     .anu-ia-acao    #ECEBE0   1,17:1 ABAIXO do pai, e 1,00:1 contra a pagina
     .anu-ia-pesos   #FDFCF8   1,17:1 acima de novo
     .anu-campo-valor#F1F0E5   1,04:1 -- quase invisivel

   Sobe, desce, sobe. O centro da tela era um buraco aberto no cartao ate a
   mesa, e o `box-shadow` dele era `none` nos dois temas. No escuro era a
   mesma coisa: #1B2016 -> #0D100A -> #1B2016.

   AGORA A ESCADA TEM QUATRO DEGRAUS E APONTA TODA PARA O MESMO LADO:

     --papel         a mesa, onde a conversa acontece
     --papel-2       o CARTAO: a fala do gerente, a porta, a caixa de responder
     --anu-controle  o CONTROLE: o que se aperta -- e a proposta que ESPERA,
                     porque aquele card inteiro e a coisa que se aperta
     --papel-3       o ENCAIXE: o que ja esta gravado e so se le -- a fala do
                     dono, as duas procedencias, risco/custo, o dado do campo,
                     a acao que ficou para tras e a acao encerrada

   E A TELA PASSA A TER TRES FORMAS PARA TRES SITUACOES QUE O MOTOR JA SEPARA
   e a folha pintava iguais:

     .anu-ia-acao          a proposta que ficou para tras -- encaixe, quieta
     .anu-ia-proposta      a que ainda espera -- controle, flutuando
     .anu-ia-acao-fechada  o que acabou -- encaixe, com o estado escrito

   Antes, uma proposta antiga sem botao era desenhada IDENTICA a que espera: o
   dono tinha que reparar num botao que nao estava la.

   O VERDE CAI DE SEIS PARA TRES. Saem o fio e o rotulo da fala do gerente, o
   fio de topo do card e o fio de topo da porta. Ficam: o "Sim, pode fazer" (o
   botao que gasta), o fio de `.anu-ia-conferido` (procedencia -- a excecao
   deliberada, e a unica) e `.anu-ia-acao-feita`. O fio verde da fala estava a
   20px do fio verde do conferido: dois verdes para dois assuntos dentro do
   mesmo bloco fazem o importante parar de significar.
   ========================================================================= */

/* --- o cabeçalho: o que esta conversa já custou -------------------------- */

/* "PRODUÇÃO", e não "gasto": dólar de IA já pago aqui dentro, e não verba de
   mídia. É a regra das duas moedas, e o rótulo é o mesmo de base.html. */
.anu-ia-conta {
  flex: none;
  min-width: 0;
  padding-left: var(--espaco-5);
  border-left: 1px solid var(--borda);
}
/* 30ch, E NAO `--anu-medida-nota`. Esta nao e medida de leitura: e a largura
   da COLUNA direita do cabecalho, em pe de igualdade com o `flex: 1 1 32ch` de
   `.anu-cabeca-texto` ao lado. A 44ch ela empurraria o titulo da tela. E a
   primeira das tres excecoes nomeadas de medida desta tela. */
.anu-ia-conta .anu-nota { max-width: 30ch; }

/* --- o estado vazio: a parte mais importante desta tela ------------------ */

/* EM 22/09/2026 A FRENTE FOI ENTREGUE COM O BANCO VAZIO, e o dono disse que
   "a página não mudou nada". Ele estava certo: tinha sido construída a casa e
   mostrada a porta fechada. Aqui, sem conversa nenhuma, a tela explica o que
   este gerente é antes de custar o primeiro centavo.

   ELA LEVANTA EM VEZ DE ACENDER. O fio de acento de 3px no topo saiu, pelo
   mesmo motivo de `.anu-ficha`: na B o verde cheio e a decisao da tela, e
   aqui ele competia com "Falar com o gerente" a 400px de distancia. Quem diz que esta caixa e o objeto da tela agora e a
   SEGUNDA elevacao.

   A SEGUNDA ELEVACAO APARECE UMA VEZ POR TELA, e esta tela tem dois estados
   que nunca dividem a mesma pagina: sem conversa e este painel; com conversa
   e a proposta que espera. E o mesmo `{% if %}` que decide.

   88ch E A COLUNA DESTA TELA. Eram 84ch aqui, com o contrato logo abaixo
   correndo a largura toda e o painel de conversas antigas idem -- tres bordas
   direitas empilhadas. Agora e a mesma largura da porta, do contrato, das
   conversas de antes, da conversa, da caixa de responder e do rodape de
   apagar: SETE blocos, uma borda direita. Quem carrega a medida de LEITURA e
   o paragrafo la dentro, e nao a coluna. */
.anu-ia-porta {
  max-width: 88ch;
  box-shadow: var(--anu-elev-2);
}

/* O formulario nao se estreita sozinho: quem o limita e o painel em que ele
   mora. Eram 78ch aqui e 74ch na nota dentro dele -- tres margens direitas
   empilhadas numa coluna so. */
.anu-ia-form { display: grid; gap: var(--espaco-2); }
/* 44px DE ALTURA, QUE E O MINIMO CONFORTAVEL PARA UM DEDO -- e a folha ja
   dizia isso no `@media` la embaixo sem nunca ter entregado: MEDIDOS, os
   botoes desta tela tinham 37px nos dois tamanhos de tela. Quando nao ha
   proposta esperando, este e o botao primario da tela, e alvo primario nao
   tem 37px. `inline-flex` porque `min-height` em `inline-block` deixa a letra
   colada em cima. */
.anu-ia-form button {
  justify-self: start;
  margin-top: var(--espaco-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px var(--espaco-5);
}
.anu-ia-form .anu-campo-nota { max-width: var(--anu-medida); }

/* O rótulo do campo é o mesmo rótulo em caixa alta do resto da frente, com
   menos espaço embaixo: aqui ele encosta no campo que nomeia. O `4px` virou
   `--espaco-1`, que e o mesmo numero e passa a ser o mesmo nome. */
.anu-ia-rotulo {
  display: block;
  margin: var(--espaco-3) 0 var(--espaco-1);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-3);
  color: var(--tinta-2);
}
.anu-ia-rotulo:first-of-type { margin-top: 0; }

.anu-ia-escrever { min-height: 76px; font-size: var(--letra-4); }
/* O seletor não ocupa a largura toda: nome de campanha é curto, e um `select`
   de 780px com quatro palavras dentro parece um campo quebrado. O numero nao
   mudou -- 44ch ja era exatamente `--anu-medida-nota`, e escreve-lo como token
   e uma medida a menos para alguem desencontrar um dia. */
.anu-ia-escolher { max-width: var(--anu-medida-nota); }

/* O CONTRATO EM TRÊS COLUNAS: o que ele enxerga, o que ele pode fazer e o que
   ele nunca faz. `auto-fit` de propósito -- numa janela estreita a terceira
   desce sozinha, e nenhuma delas some.

   `align-items: start` E O CONSERTO. Sem ele as tres caixas esticavam ate a
   altura da mais alta, e a primeira terminava o texto a 187px do proprio pe
   (MEDIDO a 1280px). Ausencia nao merece o espaco da presenca -- e o mesmo
   conserto que `.anu-moldura-vazia` recebeu nos criativos.

   240px, e nao 260px: dentro da coluna de 88ch (792px a 1.280px) sobram 253px
   por cartao, e a 260px o `auto-fit` desistia da terceira coluna e jogava "o
   que ele nunca faz" sozinho numa segunda fileira. */
.anu-ia-contrato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
  gap: var(--espaco-4);
  max-width: 1200px;
  margin-bottom: var(--espaco-6);
}
/* OS TRES SAO CARTOES SOBRE A MESA, e nao caixas desenhadas no papel: o mesmo
   degrau e a mesma elevacao do painel da casa. A porta continua acima deles,
   porque ela leva a SEGUNDA elevacao e eles a primeira. O respiro fica em
   16px e nao nos 22px do painel: numa caixa de 253px, 22px de cada lado gastam
   17% da largura antes de qualquer letra. `--raio-2` sai da frente: caixa e
   cartao, e cartao e `--raio-3`. */
.anu-ia-lado {
  min-width: 0;
  padding: var(--espaco-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--papel-2);
  box-shadow: var(--anu-elev-1);
}
.anu-ia-lado h3 {
  margin: 0 0 var(--espaco-3);
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-4);
}
/* A LISTA VIRA UMA COLUNA DENTRO DA CAIXA. `.anu-quer` é uma grade de 280px
   por item, feita para a largura inteira da tela da campanha; dentro de uma
   coluna de 253px ela desenharia um item por fileira com o vão de 22px entre
   eles, e a caixa ficaria três vezes mais alta que a vizinha. */
.anu-ia-lado .anu-quer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.anu-ia-lado .anu-quer-item {
  font-size: var(--letra-3);
  line-height: 1.55;
  color: var(--tinta-2);
}
.anu-ia-lado .anu-quer-item b { color: var(--tinta); font-weight: 600; }
.anu-ia-lado .anu-campo-nota { display: block; margin-top: var(--espaco-3); }
/* O QUE ELE NUNCA FAZ é a única das três que muda de cor. As duas primeiras
   são promessa; esta é limite -- e limite lido como promessa é o que faz o
   dono esperar a integração com a Meta que não existe. */
.anu-ia-nunca { border-color: var(--alerta-fio); background: var(--alerta-fraco); }

/* --- as conversas de antes ----------------------------------------------- */

/* A MESMA COLUNA DOS BLOCOS DE CIMA. Sem esta classe o painel era o unico da
   tela sem medida: ele corria ate 1.258px enquanto tudo acima dele parava em
   1.022px, e a margem direita voltava a ser um serrote no ultimo bloco.

   E ELE SOBE NO HTML, para logo abaixo da porta: quem ja conversou aqui vem
   buscar a conversa de ontem, e nao o contrato, que ele ja leu. Ver a nota 5
   no alto de web/paginas/anuncios_ia.html. */
.anu-ia-antes { max-width: 880px; }

.anu-ia-antigas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.anu-ia-antiga { display: block; padding: 0; border-top: 1px solid var(--borda); }
.anu-ia-antiga:first-child { border-top: 0; padding-top: 0; }
.anu-ia-antiga a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: var(--espaco-3);
  padding: 10px 6px;
  border-radius: 10px;
  font-size: var(--letra-4);
  color: var(--tinta);
  text-decoration: none;
}
.anu-ia-antiga .anu-nota { flex: none; margin: 0; font-family: var(--fonte-numero); font-variant-numeric: var(--algarismos); }

/* --- a conversa aberta --------------------------------------------------- */

.anu-ia-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-3);
  max-width: 88ch;
  margin-bottom: var(--espaco-4);
}
/* 32ch e a base do flex do atalho, e nao uma medida de leitura: e a segunda
   das tres excecoes nomeadas. */
.anu-ia-topo .anu-atalho { flex: 1 1 32ch; }

/* --- EM QUE PE ESTA ESTA CONVERSA ---------------------------------------- */

/* A FAIXA DE ESTADO, e ela nasceu de uma pergunta que a tela nao respondia:
   "tem alguma coisa esperando por mim?".

   MEDIDO nos retratos de 24/09/2026. A 1.280x800 o card de confirmacao
   comecava a 792px -- abaixo da dobra -- e "Sim, pode fazer" ficava a
   1.308px de uma pagina de 1.857px. No telefone (390x844) o botao ficava a
   1.777px de uma pagina de 2.486px: quase duas telas de rolagem depois da
   dobra. E a unica frase que dizia que havia decisao esperando morava 250px
   ABAIXO do botao, no pe do formulario de responder: o dono so lia o aviso
   depois de ter passado pela coisa avisada.

   A faixa diz TRES coisas -- que ha uma decisao, QUAL e, e por onde se chega
   nela -- e nasce e some com a proposta. Ela nao e enfeite permanente: numa
   conversa sem proposta aberta ela nao existe, e uma faixa dizendo "nada
   esperando" seria um bloco que ocupa tela para nao dizer nada.

   ELA NAO LEVA BOTAO, E ISSO E A REGRA. Por "Sim, pode fazer" aqui seria
   oferecer o sim ACIMA do risco e do custo, que e exatamente a ordem que o
   card de confirmacao existe para impedir. O caminho curto desta faixa e o do
   OLHO; o do dedo continua passando pela leitura.

   AMBAR porque e a regra da casa: ambar e o que espera uma decisao sua. Verde
   nao entra -- na B o verde cheio e o botao que decide, e a faixa so leva o
   olho ate ele.

   E ELA GRUDA, porque e UMA LINHA: `position: sticky` e a ferramenta de caixa
   MENOR que a janela, e essa regra esta escrita por inteiro na nota de
   `.previa`, que deixou de grudar por ter 1.029px numa janela de 820px.
   `z-index: 5` fica abaixo dos 20 do cabecalho. No telefone `--topo-altura`
   vale 0px porque la o cabecalho rola embora, e ela encosta no alto da janela
   -- que e onde ela tem que estar. Com a barra de oito abas nao ha briga: ela
   e `fixed` no PE da tela, e esta gruda pelo topo. */
.anu-ia-espera {
  position: sticky;
  top: var(--topo-altura);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espaco-2) var(--espaco-3);
  max-width: 88ch;
  margin-bottom: var(--espaco-5);
  padding: var(--espaco-3) var(--espaco-4);
  /* CARTAO DE TOM (SISTEMA 5.16): fio de 1px da palha em volta, e nao mais o
     fio esquerdo de 3px (na B ele so marca o ajuste mexido). */
  border: 1px solid var(--alerta-fio);
  border-radius: var(--raio-3);
  /* O TOM POR CIMA DO PAPEL, e nao sozinho: `--alerta-fraco` e 12% de
     opacidade, e a faixa gruda -- a fala do gerente passava por baixo e se
     lia atraves dela (VISTO no retrato da chegada por #proposta, 5.2, a
     390px: "com o teste de dois anuncios" escrito em cima de "Criar a
     campanha"). A esteira da Entrega gruda sobre `--papel` pelo mesmo
     motivo. */
  background: linear-gradient(var(--alerta-fraco), var(--alerta-fraco)) var(--papel);
}
.anu-ia-espera .anu-rotulo { flex: none; margin: 0; color: var(--alerta); }
/* O QUE ESPERA, PELO NOME. Dizer "uma proposta espera voce" custa a mesma
   linha e responde metade da pergunta; dizer "Criar a campanha" responde ela
   inteira antes de qualquer rolagem. */
.anu-ia-espera-o-que {
  min-width: 0;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-4);
  color: var(--tinta);
}
/* O ATALHO E UM LINK, E NAO UM BOTAO. Ele nao decide nada: so leva o olho ate
   onde se decide. Botao aqui seria a segunda acao primaria da tela, que e
   justamente o defeito que esta reforma veio consertar. */
.anu-ia-espera-ir {
  flex: none;
  margin-left: auto;
  font-size: var(--letra-3);
  color: var(--tinta-2);
}

/* A COLUNA DA CONVERSA. 88ch e a mesma dos outros seis blocos da tela, e ela e
   de CARTAO e nao de paragrafo: quem mora nela sao a fala, o card de decisao e
   a linha de campo com rotulo e caixa lado a lado. Quem para na medida de
   leitura e o paragrafo, la dentro.

   E O VAO ENTRE FALAS SOBE PARA 30px. Era 22px, o MESMO respiro interno de um
   painel: com o vao ENTRE turnos igual ao vao DENTRO de um turno, nao ha
   turno. Contra os 4px de dentro da fala, a razao passa de 5,5:1 para 7,5:1. */
.anu-ia-conversa {
  display: grid;
  gap: var(--espaco-6);
  max-width: 88ch;
  margin-bottom: var(--espaco-6);
}

/* QUEM FALOU SE LÊ ANTES DO TEXTO, e por dois caminhos ao mesmo tempo: o
   rótulo em cima, e a forma da caixa.

   O FIO VERDE DA FALA DO GERENTE SAIU, e com ele o rotulo verde. Ele estava a
   20px do fio verde de `.anu-ia-conferido`, que e a trava mais cara desta tela
   -- "isto o Estudio conferiu" --, e quando o verde barato encosta no verde
   caro quem paga e o caro. Quem diz de quem e a fala agora sao QUATRO sinais,
   e nenhum deles custa cor: a superficie (a dele levanta, a sua afunda), o
   lado, a largura e o rotulo.

   O `6px` do vao era o unico valor da tela na faixa proibida entre 4 e 8. E um
   par rotulo/coisa-que-ele-nomeia, e par rotulo/coisa e `--espaco-1`. */
.anu-ia-fala { min-width: 0; display: grid; gap: var(--espaco-1); }
/* Archivo 600, e nao 700: e o MESMO papel de `.anu-ia-rotulo` e de
   `.anu-rotulo`, e o mesmo papel nao tem dois pesos. */
.anu-ia-quem {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--letra-3);
  color: var(--tinta-2);
}
/* A COLUNA E DE CARTAO; A MEDIDA E DO PARAGRAFO. MEDIDO a 1.280px: a fala do
   gerente corria os 756px de dentro do cartao, cerca de 95 caracteres por
   linha, acima das 45 a 75 em que o olho acha o comeco da linha seguinte sem
   se perder. E 88ch nao sao 88 caracteres: `ch` e a largura do algarismo zero,
   que na Plex Sans e ~30% mais largo que a letra media -- a folha achava que
   ja tinha consertado isso com os 88ch, e tinha consertado metade. */
.anu-ia-texto {
  margin: 0;
  font-size: var(--letra-4);
  line-height: 1.6;
  color: var(--tinta);
  max-width: var(--anu-medida);
}
.anu-ia-texto p { margin: 0 0 var(--espaco-2); }
.anu-ia-texto p:last-child { margin-bottom: 0; }

/* A SUA FALA AFUNDA (encaixe) porque e o que voce ja disse e ja sabe; a dele
   sobe (cartao, com elevacao) porque e o que chegou. 1,05:1 abaixo da mesa
   contra 1,17:1 acima dela, no claro.

   A LARGURA E O CORPO MENOS UM DEGRAU GRANDE: esses 44px de recuo sao a prova
   visivel, em toda mensagem sua por mais longa que seja, de que aquela linha e
   sua -- e ela sai de 58ch literais para uma conta em cima da medida da casa,
   que e uma medida a menos para manter. `--raio-2` vira `--raio-3`: e cartao. */
.anu-ia-dono {
  justify-self: end;
  max-width: calc(var(--anu-medida) - var(--espaco-7));
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--papel);
}
/* SÓ O RÓTULO ALINHA À DIREITA, e não o texto: parágrafo alinhado à direita
   troca a margem de entrada de cada linha, e o olho perde o começo da
   seguinte. Quem diz de que lado é a fala é a caixa, não o alinhamento. */
.anu-ia-dono .anu-ia-quem { text-align: right; }

/* O respiro vai de 16px para os 22px do painel da casa, e cai de volta a 16px
   no telefone (ver o `@media` la embaixo). */
.anu-ia-gerente {
  padding: var(--espaco-5);
  /* NA B (Etapa 5.2): cartao de tom, com o fio de 1px em volta -- o fio
     esquerdo de 3px ficou so para o ajuste mexido (SISTEMA 5.10 e 5.16). */
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--papel-2);
  box-shadow: var(--anu-elev-1);
}
.anu-ia-gerente .anu-ia-quem { color: var(--tinta-2); }

/* --- de onde veio o que ele disse ---------------------------------------- */

/* AS DUAS PROCEDÊNCIAS NÃO SE PARECEM, e é a trava mais cara desta tela em
   forma de cor: o que saiu do Estúdio é verdade conferida (acento, o verde de
   casa); o que ele lembrou da Meta é datado (alerta, a cor do cuidado). Este
   projeto já se queimou exatamente assim -- `profile_views` morreu em
   08/01/2025 e o código continuou pedindo. Ver motor/conversa.py.

   AQUI O VERDE E DE LER, e nao de decidir: o fio e o rotulo em `--acento`
   dizem procedencia, e nenhum deles e preenchimento. Na B o verde cheio e so
   a decisao; o verde de marcar (fio, icone, selo) continua valendo.

   O FUNDO ERA `--papel`, A COR DA PAGINA, dentro de um cartao: uma lasca do
   fundo do mundo aparecendo dentro do bloco. Agora e o encaixe -- o que ja
   esta gravado e so se le, que e exatamente o que um fato citado e. O fio vai
   de 2px para 3px, que e o fio de marcacao da casa (`.aviso`,
   `.anu-ia-nunca`). */
.anu-ia-fonte {
  margin-top: var(--espaco-4);
  padding: var(--espaco-2) var(--espaco-3);
  border-left: 3px solid var(--borda);
  border-radius: 0 var(--raio-1) var(--raio-1) 0;
  background: var(--papel);
}
/* 16px e o vao entre GRUPOS e 8px o vao entre IRMAOS. Antes os dois eram o
   mesmo, e por isso os dois blocos de procedencia liam como um so. */
.anu-ia-fonte + .anu-ia-fonte { margin-top: var(--espaco-2); }
.anu-ia-fonte .anu-rotulo { margin-bottom: var(--espaco-1); }
.anu-ia-fonte ul { margin: 0; padding-left: var(--espaco-4); }
.anu-ia-fonte li {
  font-size: var(--letra-3);
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: var(--anu-medida);
}
.anu-ia-conferido { border-left-color: var(--acento); }
.anu-ia-memoria { border-left-color: var(--alerta); background: var(--alerta-fraco); }
.anu-ia-memoria .anu-rotulo { color: var(--alerta); }
/* A ressalva de conferir no Gerenciador. Ela vem PRONTA DO MOTOR e nunca é
   escrita no template -- se fosse uma frase que o modelo precisa lembrar de
   pôr, o dia em que ele esquecesse seria o dia em que o dono leria regra
   inventada como se fosse conferida. */
.anu-ia-ressalva {
  margin: var(--espaco-2) 0 0;
  font-size: var(--letra-2);
  line-height: 1.5;
  color: var(--alerta);
  max-width: var(--anu-medida);
}

/* O CUSTO DE CADA FALA, que o dono pediu com todas as letras. Miúdo e no pé
   da fala: ele tem que estar sempre lá e nunca competir com o que foi dito.

   ELE E O RECIBO DO QUE O GERENTE ACABOU DE DIZER, e nao a legenda do card que
   vem depois. MEDIDO: a linha ficava a 32px do card, com `margin-top: 12px`
   contra os 16px do card -- razao de 1,33:1, que nao separa nada, e dois
   numeros de dinheiro de MOEDAS DIFERENTES a 32px um do outro sao a armadilha
   das duas moedas em miniatura. Colado ao texto (8px) contra os 22px do card,
   a razao vira 2,75:1. `tabular-nums` porque e numero. */
.anu-ia-custo {
  display: block;
  margin-top: var(--espaco-2);
  font-family: var(--fonte-numero);
  font-size: var(--letra-2);
  color: var(--neutro);
  font-variant-numeric: var(--algarismos);
}

/* --- O CARD DE CONFIRMAÇÃO: o centro da tela ----------------------------- */

/* É AQUI QUE O DONO AUTORIZA UMA COISA QUE MEXE NAS CAMPANHAS DELE, e o
   desenho tem uma ordem que não é decoração:

     1. o que é          título e o que a ação faz
     2. por quê          a frase do gerente
     3. com o quê        os campos, com o que muda em destaque
     4. o que arrisca    risco e custo, numa caixa própria
     5. o que avisar     o que depende do banco de agora
     -------------------------------------------- o fio
     6. os dois botões

   O FIO ANTES DOS BOTÕES É A PEÇA PRINCIPAL. Tudo acima dele é para LER;
   abaixo dele alguma coisa acontece. Sem a separação, o "sim" fica na mesma
   massa de texto do risco, e o dedo chega antes do olho.

   ESTA REGRA E A DA PROPOSTA QUE FICOU PARA TRAS: encaixe, quieta, sem
   elevacao. Ela existe porque duas propostas podem ficar de pe na mesma
   conversa por um instante (ver PASSOU_A_VEZ e `_so_a_mais_nova_fica` em
   motor/conversa.py), e ate aqui ela era desenhada IDENTICA a que espera -- o
   dono tinha que reparar num botao que nao estava la. Quem flutua e
   `.anu-ia-proposta`, logo abaixo. */
.anu-ia-acao {
  margin-top: var(--espaco-5);
  padding: var(--espaco-5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--papel);
}

/* A PROPOSTA QUE AINDA ESPERA E O UNICO OBJETO FLUTUANTE DESTE ESTADO, e e a
   SEGUNDA elevacao -- uma por tela, e com conversa aberta nesta tela e esta.

   ELA SOBE ATE O TOPO DA ESCADA, para `--anu-controle`. Nao e licenca
   poetica: o card inteiro E a coisa que se aperta, e a superficie do que se
   aperta nesta frente e essa.

   MEDIDO, e as duas metades trabalham em temas diferentes -- e por isso sao
   duas:
     CLARO   o degrau de fundo quase nao existe (cartao -> controle, 1,03:1).
             Quem levanta e a SOMBRA e o FIO: `--borda-forte` sobre controle
             da 2,46:1 contra os 1,66:1 de `--borda` sobre cartao.
     ESCURO  o degrau de fundo vale 1,18:1 e a sombra de `--anu-elev-2`
             acompanha.

   O FIO DE ACENTO NO TOPO SAIU daqui tambem: na B o verde cheio e a decisao,
   e a decisao e o botao que ela carrega -- ele continua verde.

   A ANCORA NAO PODE PARAR DEBAIXO DA FAIXA QUE GRUDA: sao os 44px medidos da
   faixa mais um respiro, em cima da altura do cabecalho. O `[id]` global
   reserva so o cabecalho. */
.anu-ia-proposta {
  border-color: var(--borda-forte);
  background: var(--anu-controle);
  box-shadow: var(--anu-elev-2);
  scroll-margin-top: calc(var(--topo-altura) + var(--espaco-7) + var(--espaco-3));
}

/* O `2px` era o unico valor da folha abaixo da escala. E par rotulo/titulo. */
.anu-ia-acao-topo { display: grid; gap: var(--espaco-1); margin-bottom: var(--espaco-3); }
.anu-ia-acao-topo .anu-rotulo { margin-bottom: 0; }
.anu-ia-acao-titulo {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-5);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--tinta);
}
.anu-ia-acao-faz {
  margin: 0 0 var(--espaco-2);
  font-size: var(--letra-4);
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: var(--anu-medida);
}
/* MESMO TAMANHO DO PARAGRAFO DE CIMA. Eram 15px e 13px em dois paragrafos
   coladinhos, e 2px de diferenca nao hierarquizam nada -- leem-se como
   desalinho. Quem separa e o "Por que:" em negrito, que ja estava la. */
.anu-ia-acao-porque {
  margin: 0 0 var(--espaco-3);
  font-size: var(--letra-4);
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: var(--anu-medida);
}
.anu-ia-acao-porque b { color: var(--tinta); font-weight: 600; }

/* Os campos são os MESMOS da entrega para o Gerenciador (`.anu-campos`), com
   o vão menor: ali cada campo é um texto para copiar, aqui são seis linhas de
   parâmetro que se leem juntas. O `dd` perde o recuo que o navegador dá de
   graça às listas de definição.

   O DADO VOLTOU A APARECER sem nenhuma regra nova: `.anu-campo-valor` e
   `--papel-3`, e dentro de um card que TAMBEM era `--papel` a caixa dele ficava
   a 1,04:1 do fundo -- quase invisivel a 1.280px, e e justamente a lista que o
   dono confere antes de autorizar. Dentro do card de controle ela passa a
   1,15:1 no claro e 1,28:1 no escuro. */
.anu-ia-acao .anu-campos { gap: var(--espaco-2); margin-bottom: var(--espaco-3); }
.anu-ia-acao .anu-campos dt { margin-bottom: 0; }
.anu-ia-acao .anu-campos dd { margin: 0; }
/* O QUE MUDA, EM DESTAQUE. `editar_campanha` vem com a campanha inteira
   preenchida -- é o que prova que o resto fica como está --, e sem isto o
   dono leria sete campos iguais sem saber em qual mexeram. O VERDE FICA, e e
   decisao consciente contra a regra geral: tira-lo custaria a unica marca que
   separa "isto vai mudar" de "isto continua como esta", numa tela em que o
   erro se paga com verba. */
.anu-ia-muda {
  border-color: var(--acento);
  background: var(--acento-fraco);
  color: var(--tinta);
}

/* RISCO E CUSTO NUMA CAIXA SÓ, acima do fio e impossível de pular. Os dois
   são a resposta de "o que acontece se eu apertar" -- e o custo aparece mesmo
   quando é zero, porque esconder a linha nas três ações gratuitas ensinaria o
   dono a não procurá-la na quarta, que é a paga.

   ELA DESCE, e antes subia: era `--papel-2` dentro de um card `--papel`, ou
   seja 1,17:1 ACIMA do proprio pai depois de o pai ter descido 1,17:1 -- o
   passo do meio do zigue-zague. Agora e encaixe, como todo o resto do que so
   se le nesta tela, e ganha o fio de 1px que a mantem sendo um grupo tambem
   dentro da proposta que ficou para tras, onde o fundo e o mesmo. */
.anu-ia-pesos {
  display: grid;
  gap: var(--espaco-2);
  margin: 0 0 var(--espaco-3);
  padding: var(--espaco-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  background: var(--papel);
}
.anu-ia-peso {
  font-size: var(--letra-3);
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: var(--anu-medida);
}
/* O `<b>` continua inline e continua em Archivo 700: risco e custo sao
   FRASES, e nao valores de ficha. Alinhar "Risco:" numa coluna de rotulo os
   transformaria em mais dois campos do formulario e faria a frase mais
   importante do card ficar em 10,5px cinza. */
.anu-ia-peso b {
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  color: var(--tinta);
}
/* O AVISO DEPENDE DO BANCO DE AGORA -- "isto ja nao esta de pe", "esta
   campanha ja tem plano, e planejar de novo o substitui inteiro". Ele e a
   ULTIMA coisa entre ler e apertar, e era a mais fraca da caixa: 12px de letra
   ambar solta, do tamanho de uma legenda. Vira bloco, com o fio ambar da casa
   -- ambar e o que espera uma decisao sua, e e disto que ele trata. O
   `max-width` explicito continua existindo porque ele DESFAZ os 34ch de
   `.anu-alerta`, que nasceu numa coluna de cartao de campanha. */
.anu-ia-acao .anu-alerta {
  max-width: var(--anu-medida);
  margin: var(--espaco-3) 0 0;
  padding: var(--espaco-2) var(--espaco-3);
  /* NA B (Etapa 5.2): cartao de tom, com o fio de 1px em volta -- o fio
     esquerdo de 3px ficou so para o ajuste mexido (SISTEMA 5.10 e 5.16). */
  border: 1px solid var(--alerta-fio);
  border-radius: var(--raio-1);
  background: var(--alerta-fraco);
  font-size: var(--letra-3);
  line-height: 1.55;
}

/* O FIO QUE SEPARA LER DE DECIDIR E O MAIS FORTE DA TELA, e passou de
   `--borda` para `--borda-forte` porque ganhou um irmao: a caixa de risco e
   custo agora tem fio proprio, e dois fios iguais deixariam de separar ler de
   fazer. E 16px entre os dois botoes, e nao 12: no telefone eles ficam
   empilhados e de largura inteira, e 12px entre "Sim, pode fazer" e "Nao" e
   meio milimetro de polegar. */
.anu-ia-botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-4);
  margin-top: var(--espaco-5);
  padding-top: var(--espaco-5);
  border-top: 1px solid var(--borda-forte);
}
.anu-ia-botoes form { margin: 0; }
/* 44px, o mesmo alvo do botao do formulario, e pelo mesmo motivo: a folha
   prometia no comentario do `@media` e entregava 37. */
.anu-ia-botoes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px var(--espaco-5);
}
/* O FIO FORTE NO "NAO". Ele mora EM CIMA da superficie de controle (o card
   inteiro e dela), e fundo igual ao fundo com fio de 1px claro e a mesma
   1,00:1 que a fundacao acabou de consertar no resto da frente: MEDIDO,
   `--anu-controle` sobre `--anu-controle` nao e degrau nenhum, e sobra o fio,
   que comum da 1,64:1 e forte da 2,38:1. No escuro, onde nao ha sombra
   nenhuma, e so o fio que diz que ali ha o que apertar. Este e o unico lugar
   da tela onde apertar o botao errado custa, e os dois caminhos tem que
   parecer caminhos.

   O `:not(.forte)` e obrigatorio: `.anu-ia-botoes button` sozinho tem a mesma
   especificidade de `button.forte` e, vindo depois na folha, apagaria o fio
   verde do "Sim". */
.anu-ia-botoes button:not(.forte) { border-color: var(--borda-forte); }

/* --- a ação já fechada: e os quatro finais não são iguais ----------------- */

/* Ela vira histórico: sem botão, e com o estado escrito por extenso. O
   `border` completo aqui existe para DESFAZER, na mesma caixa, o que
   `.anu-ia-acao` pos. Era `--papel-2` dentro de um cartao `--papel-2` --
   1,00:1, nenhum degrau, e um fio de 1px como unica prova de que ali havia um
   bloco. Agora e encaixe, e fica sendo o oposto fisico da proposta que espera:
   uma afunda porque acabou, a outra flutua porque ainda espera. */
.anu-ia-acao-fechada {
  padding: var(--espaco-3) var(--espaco-4);
  /* NA B (Etapa 5.2): cartao de tom, com o fio de 1px em volta -- o fio
     esquerdo de 3px ficou so para o ajuste mexido (SISTEMA 5.10 e 5.16). */
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--papel);
}
.anu-ia-acao-estado {
  display: block;
  font-family: var(--fonte-titulo);
  font-variation-settings: "wght" 700;
  font-size: var(--letra-4);
  color: var(--neutro);
}
.anu-ia-acao-feito { margin-top: var(--espaco-2); }
.anu-ia-acao-feito p {
  margin: 0 0 var(--espaco-1);
  font-size: var(--letra-3);
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: var(--anu-medida);
}
.anu-ia-acao-feito p:last-child { margin-bottom: 0; }
.anu-ia-acao-fechada .anu-campo-nota {
  display: block;
  margin-top: var(--espaco-2);
  max-width: var(--anu-medida);
}

/* FEITA: aconteceu, e o acento é o que esta frente usa para dizer isso. */
.anu-ia-acao-feita { border-color: var(--borda-forte); background: var(--acento-fraco); }
.anu-ia-acao-feita .anu-ia-acao-estado { color: var(--acento-texto); }
/* BARRADA: o ESTÚDIO recusou, e a proposta era inválida. É a única das três
   que muda de cor, e é de propósito -- "o Estúdio barrou" e "você disse que
   não" pintados igual ensinariam o dono que o gerente errou quando quem
   decidiu foi ele. O motor separa os dois estados pelo mesmo motivo. */
.anu-ia-acao-barrada { border-color: var(--alerta-fio); background: var(--alerta-fraco); }
.anu-ia-acao-barrada .anu-ia-acao-estado { color: var(--alerta); }

/* --- responder, e apagar ------------------------------------------------- */

/* A caixa de responder e um cartao QUIETO: a PRIMEIRA elevacao, nunca a
   segunda. Quando ha proposta aberta, o botao dela nem verde e -- e ai a tela
   inteira tem UMA sombra funda e UM botao verde, no mesmo objeto. */
.anu-ia-responder {
  max-width: 88ch;
  padding: var(--espaco-5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--papel-2);
  box-shadow: var(--anu-elev-1);
}
.anu-ia-apagar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-3);
  max-width: 88ch;
  margin-top: var(--espaco-6);
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--borda);
}
/* Vermelho SÓ no que apaga, e nem aqui: este botão some com o histórico da
   conversa e não desfaz nada do que já foi feito. Ele é discreto, no pé,
   longe do que se clica todo dia -- mesma regra de `.anu-apagar`.

   E DISCRETO NAO QUER DIZER ESCONDIDO: o fundo proprio (`--papel-2`, a cor do
   CARTAO) saiu, porque todo botao desta ferramenta e `--anu-controle` e este
   nao mora em cartao nenhum, mora na mesa. O discreto dele vem do tamanho, da
   letra vermelha e do lugar -- e ele e o UNICO botao da tela que nao recebe os
   44px, de proposito: e o unico que a gente nao quer que o polegar ache por
   acaso. O `7px` (faixa proibida entre 4 e 8) vira `--espaco-2`. */
.anu-ia-apagar button {
  font-size: var(--letra-2);
  padding: var(--espaco-2) var(--espaco-3);
  background: var(--anu-controle);
  color: var(--falha);
}
/* 34ch e a base do flex da nota ao lado do botao, e nao uma medida de leitura:
   e a terceira e ultima excecao nomeada desta tela. */
.anu-ia-apagar .anu-campo-nota { flex: 1 1 34ch; min-width: 0; }

@media (max-width: 720px) {
  /* NO TELEFONE A BOLHA DO DONO NÃO ENCOLHE ATÉ VIRAR COLUNA. A medida dela
     nao prende numa tela de 358px, e o que diz "este lado é o seu" passa a ser
     só a margem esquerda -- que é o que esta regra faz. */
  .anu-ia-dono { margin-left: var(--espaco-5); }

  /* A caixa de produção do cabeçalho perde o fio e a margem: empilhada
     debaixo do título, "à esquerda" deixa de querer dizer alguma coisa. */
  .anu-ia-conta { padding-left: 0; border-left: 0; }

  /* O RESPIRO DE 22px VOLTA A 16px NOS TRES CARTOES, pela mesma conta de
     `.anu-painel`: 22px de cada lado dentro de 358px sao 44px gastos em borda
     antes de qualquer conteudo, e no card de decisao a caixa de valor de um
     campo ficaria com meia duzia de letras por linha. Declarar de novo aqui
     dentro e permitido: `test_folha_de_estilo.py` so conta seletor repetido
     FORA de `@media`. */
  .anu-ia-gerente, .anu-ia-responder, .anu-ia-acao { padding: var(--espaco-4); }

  /* A FAIXA DE ESTADO EMPILHA: `margin-left: auto` num item que ja esta
     sozinho na fileira nao empurra nada, e mantido ele jogaria o atalho para
     uma terceira linha. */
  .anu-ia-espera-ir { margin-left: 0; }

  /* E COMO ELA EMPILHA, A ANCORA PRECISA RESERVAR AS DUAS LINHAS. MEDIDO a
     390px: a faixa tem 75px aqui contra 47px no computador, e com a reserva de
     la o card aterrissava 20px DEBAIXO dela -- o dono tocava "ler e decidir" e
     o comeco da decisao ficava escondido atras do proprio aviso que o mandou
     ate ela. Aqui `--topo-altura` vale 0px, entao a conta e so a faixa. */
  .anu-ia-proposta { scroll-margin-top: calc(var(--espaco-7) + var(--espaco-7)); }

  /* Os botões da decisão ficam de largura inteira, e o "sim" em cima: é o
     alvo do polegar, e alvo de 44px é o mínimo confortável -- que agora a
     regra do topo entrega de verdade. */
  .anu-ia-botoes { display: grid; }
  .anu-ia-botoes form { display: grid; }
  .anu-ia-botoes button { width: 100%; }
  .anu-ia-form button { justify-self: stretch; width: 100%; }
}

/* OS CAMPOS DENTRO DO CARD DE CONFIRMAÇÃO SE ALINHAM NUMA COLUNA SÓ.
   `.anu-campo-linha` é flex com o rótulo do tamanho da palavra, e nasceu numa
   tela onde cada linha vive sozinha. Aqui são até sete, empilhadas, e o
   rótulo variável fazia cada caixa começar num ponto diferente -- uma escada
   que o olho lê como desalinho antes de ler o conteúdo. E é justamente esta a
   lista que o dono confere antes de autorizar: ela tem que ser varrida de
   cima a baixo, não decifrada campo a campo.

   O RÓTULO TEM MEDIDA FIXA. São 15ch, e não os 13 que "verba por dia" tem de
   letras: o rótulo é desenhado em caixa alta e com espacejamento, e a 13ch
   ele quebrava em duas linhas -- medido em 23/09/2026.
   No telefone a regra some, porque a 358px de conteúdo um rótulo de 15ch
   deixaria a caixa com meia dúzia de letras por linha. */
.anu-ia-acao .anu-campo-linha { flex-wrap: nowrap; align-items: baseline; }
.anu-ia-acao .anu-campo-linha dt { flex: 0 0 15ch; }
/* A CAIXA TEM O TAMANHO DO QUE ELA DIZ, e esta linha desfazia, so aqui, o
   conserto que a entrega ja tinha recebido. MEDIDO a 1.280px: `flex: 1 1 auto`
   esticava a caixa ate o fim da linha -- 625px de encaixe cinza para mostrar
   `cadastros`, nove caracteres, e outros 625px para `R$ 20,00`, oito. Quatro
   retangulos identicos para quatro dados de tamanhos completamente diferentes:
   o tamanho da caixa passava a ser uma informacao falsa, e era isso que fazia
   a lista de conferencia parecer um formulario em branco. Os 12ch de piso sao
   para um valor de tres letras nao virar uma lasca; o `flex-shrink: 1` com o
   `overflow-wrap: anywhere` que a classe base ja tem faz o briefing longo
   quebrar em vez de estourar. */
.anu-ia-acao .anu-campo-valor { flex: 0 1 auto; min-width: 12ch; max-width: 100%; }

@media (max-width: 720px) {
  /* A COLUNA VIRA DUAS LINHAS: rótulo em cima, caixa embaixo, largura toda. */
  .anu-ia-acao .anu-campo-linha { flex-wrap: wrap; }
  .anu-ia-acao .anu-campo-linha dt { flex: 1 1 100%; }
}

/* =========================================================================
   AS TELAS DE ANUNCIOS NA DIRECAO B (Etapa 5.2, decisao #50).

   Tudo o que a B acrescentou nas oito telas da frente mora aqui, no fim do
   ultimo trecho de Anuncios: vem depois de tudo, entao ganha os empates, e
   as consultas de 389 e 359px daqui ficam depois dos blocos globais (C19).
   As pecas da casa (`.cabeca`, `.momento`, `.porque`, `.voltar`...) sao do
   nucleo; o que so Anuncios usa leva o prefixo `anu-`.
   ========================================================================= */

/* --- a campanha: a cabeca, o "..." e o caminho -------------------------- */

/* A TRILHA ganha o nome da campanha; o corte com reticencias e da casa
   (`.trilha [aria-current]`), e este teto so impede um nome de 120 letras
   de empurrar o "Como esta tela funciona" para fora da barra. */
.anu-trilha-nome { min-width: 0; max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* O NOME DA CAMPANHA LEVA A LARGURA, e as acoes sentam no alto, e nao no
   pe: com o nome em tres linhas, `flex-end` punha os botoes ao lado da
   ultima linha. */
.anu-cabeca-campanha { align-items: flex-start; }
.anu-cabeca-campanha .titulo-tela { max-width: 780px; }
.anu-cabeca-campanha .cabeca-acoes { padding-top: 4px; }
/* O NOME COMPRIDO (mais de 60 letras, marcado no template) desce um degrau:
   MEDIDO na conferencia 5.2, o de 120 letras a 38px partia em 3 linhas a
   1.280 e o verde do momento ficava a 454px (antes da B, 422). A 32px sao 2
   linhas e o verde vai a 401 -- e o titulo continua acima dos 30px do
   titulo do momento. */
.titulo-tela.longo.anu-nome-comprido { font-size: 32px; }
/* Em que pe ela esta: o selo do estado, o periodo e o numero, numa linha. */
.anu-cabeca-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 14px 0 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--neutro);
  font-variant-numeric: var(--algarismos);
}
.anu-cabeca-linha b { color: var(--tinta-2); font-weight: 600; }

/* O "...": um `<details>` com o botao neutro da casa. O reset e porque o
   `details` da casa (o do relatorio de procedencia) tem fio, respiro e peso
   de letra que herdam. Camada 19: acima da pagina, ABAIXO da barra do alto
   (20), da gaveta (21) e da barra de baixo (30) -- secao 4.2 do plano. */
details.anu-menu { position: relative; margin: 0; padding: 0; border: 0; }
.anu-menu > .anu-menu-botao {
  list-style: none;
  width: 38px;
  padding: 0;
  justify-content: center;
  font-variation-settings: normal;
  font-weight: 700;
  letter-spacing: .04em;
}
.anu-menu > summary::-webkit-details-marker { display: none; }
.anu-menu-lista {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 19;
  width: 250px;
  padding: 6px;
  border-radius: var(--raio-2);
  background: var(--papel-3);
  box-shadow: var(--sombra-pop);
}
.anu-menu-lista a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--raio-1);
  font-weight: 500;
  font-size: 14px;
  color: var(--tinta-2);
  text-decoration: none;
}
.anu-menu-lista a:hover { background: var(--papel-4); color: var(--tinta); }
.anu-menu-lista a.link-tijolo { color: var(--falha); }
.anu-menu-lista hr { height: 1px; margin: 6px 4px; border: 0; background: var(--borda); }

/* O CAMINHO: por onde a campanha anda, em quatro passos, com a linha fina do
   carrossel da marca por cima de cada um (o retrato). O passo de agora tem
   a linha comecada e a nota em verde de ler; o feito, a linha inteira. */
.anu-caminho {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--espaco-4);
  margin: 0 0 var(--espaco-6);
  padding: 0;
  list-style: none;
}
.anu-caminho li { position: relative; min-width: 0; padding-top: 14px; }
.anu-caminho li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--borda-forte);
}
.anu-caminho .anu-caminho-agora::before { background: linear-gradient(90deg, var(--acento) 0 30%, var(--borda-forte) 30%); }
.anu-caminho .anu-caminho-feito::before { background: var(--acento); }
.anu-caminho-passo { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.25; color: var(--neutro); }
.anu-caminho-nota { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--neutro); }
.anu-caminho .anu-caminho-agora .anu-caminho-passo { color: var(--tinta); }
.anu-caminho .anu-caminho-agora .anu-caminho-nota { color: var(--acento-texto); }
.anu-caminho .anu-caminho-feito .anu-caminho-passo { color: var(--tinta-2); }

/* --- a campanha: o momento ---------------------------------------------- */

/* O MOMENTO E DA CASA (`.momento`, nucleo); aqui mora o recheio dele, como
   no retrato: o selo "Proximo passo", o titulo da decisao, uma linha de
   apoio, e o botao com a conta colada ao lado. */
.anu-momento-texto { min-width: 0; padding: 28px 40px 30px; align-self: center; }
/* O selo "Proximo passo" e o `.etiqueta.acento` da casa, na altura do
   retrato (26px). */
.anu-momento-sobre { min-height: 26px; }
.anu-momento-texto > p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--tinta-2); max-width: 46ch; }
.anu-momento-texto > .texto-falha { display: block; margin-top: var(--espaco-3); }
.anu-momento-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: 20px 0 0;
}
.anu-momento-acao form { margin: 0; }
.anu-momento-custo {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--neutro);
}
.anu-momento-custo b { color: var(--tinta-2); font-weight: 600; }
.momento .momento-volta .anu-rotulo { margin: 0; }
.anu-volta-lista { margin: 10px 0 0; padding: 0; list-style: none; }
.anu-volta-lista li { padding: 12px 0; }
.anu-volta-lista li + li { border-top: 1px solid var(--borda); }
.anu-volta-lista b { display: block; font-weight: 650; font-size: 14.5px; line-height: 1.3; color: var(--tinta); }
.anu-volta-lista span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--neutro); }
.anu-volta-lista a { color: inherit; }

/* --- a campanha: a ficha e a grade ------------------------------------- */

/* A GRADE DA FICHA (o retrato): objetivo, periodo, publicos e criativos,
   dois a dois, com o fio entre as fileiras. Numero de ficha, e nao de
   placar: 650, na largura do texto. */
.anu-ficha-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--espaco-4);
  margin-top: 18px;
  border-top: 1px solid var(--borda);
}
/* A verba abre a ficha sem o recuo nem o fio de medida de fileira. */
.anu-ficha > .anu-verba { padding: 0; border-left: 0; }
.anu-ficha-grade > .anu-medida { padding: 12px 0 0; border-left: 0; }
.anu-ficha-grade > .anu-medida:nth-child(n+3) { margin-top: 12px; border-top: 1px solid var(--borda); }
.anu-ficha-grade .anu-rotulo { margin-bottom: 6px; font-weight: 500; font-size: 12px; color: var(--neutro); }
.anu-ficha-grade .anu-valor { font-weight: 650; font-size: 15px; font-stretch: 100%; line-height: 1.25; letter-spacing: 0; }
.anu-ficha-grade .anu-nota { margin-top: 3px; font-size: 12px; }
/* A PORTA DO GERENCIADOR NO PE DA FICHA, quando ela nao e o passo: o botao
   neutro da casa na largura da ficha, separado da grade pelo fio. */
.anu-ficha-porta {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}
/* O objetivo que a Meta aposentou: o marcador em palha, e o aviso inteiro
   no "por que?" que entra na linha (a caixa flutuante seria cortada pela
   rolagem da ficha). */
.anu-ficha-aviso {
  display: block;
  margin-top: 5px;
  font-weight: 550;
  font-size: 12px;
  line-height: 1.3;
  color: var(--alerta);
}

/* --- a campanha: os blocos da coluna do trabalho ------------------------ */

/* O BLOCO (o retrato): um titulo de secao com o "?" ao lado, e o conteudo em
   cartoes logo abaixo -- e nao mais um painel com o titulo dentro. */
.anu-bloco { margin: 0 0 var(--espaco-7); }
.anu-bloco-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 18px;
}
.anu-bloco-cabeca h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--letra-5);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.anu-bloco-direita { margin-left: auto; }
.anu-bloco .anu-painel { margin-bottom: 0; }
.anu-plano-corpo .anu-medidas { margin-bottom: var(--espaco-5); }
/* Os numeros do plano sao de ficha, e nao o numero da tela: a 32px "22/09 a
   06/10" partia em duas linhas na coluna de 250px (OLHADO a 1440). */
.anu-plano-corpo .anu-valor { font-size: 24px; }

/* OS LIMITES DO GERENCIADOR, campo a campo: uma linha por campo, com o fio
   entre elas; os numeros de cada rede, miudos, embaixo. Dois niveis no
   seletor porque `.limites ul` (o pe de antes) ja pinta a lista. */
.limites .anu-limites {
  margin: 0;
  padding: 6px var(--espaco-5);
  list-style: none;
  font-family: var(--fonte-texto);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-2);
}
.limites .anu-limites li { margin: 0; padding: 12px 0; }
.limites .anu-limites li + li { border-top: 1px solid var(--borda); }
.limites .anu-limites b { color: var(--tinta); font-weight: 650; }
.limites .anu-limites span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--neutro); font-variant-numeric: var(--algarismos); }

/* O NOVO CRIATIVO, sempre aberto: tres campos na mesma linha (receita,
   formato, modelo), e o botao com a conta colada. */
.anu-forma-criativo { display: grid; gap: 18px; }
.anu-forma-criativo .campo { margin-bottom: 0; }
.anu-forma-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--espaco-4);
  align-items: start;
}
/* O FORMATO E O SEGMENTO DO RETRATO, feito de `radio` de verdade: e o que a
   rota recebe. O `radio` fica transparente (nunca `display: none`, que o
   tiraria do teclado), e o rotulo inteiro e o alvo. */
fieldset.anu-segmento-campo { min-width: 0; margin: 0; padding: 0; border: 0; }
.anu-segmento-campo legend {
  margin: 0 0 7px;
  padding: 0;
  font-weight: 600;
  font-size: var(--letra-3);
  line-height: 1.2;
  color: var(--tinta-2);
}
.anu-segmento {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--raio-botao);
  background: var(--chao);
  box-shadow: inset 0 0 0 1px var(--borda);
}
.anu-segmento label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0;
  padding: 0 12px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--neutro);
  white-space: nowrap;
  cursor: pointer;
}
.anu-segmento input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.anu-segmento label:has(input:checked) { background: var(--papel-4); color: var(--tinta); }
.anu-segmento label:has(input:focus-visible) { outline: 2px solid var(--acento-texto); outline-offset: 1px; }
.anu-forma-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.anu-forma-pe .texto-mini { max-width: 52ch; }

/* OS AJUSTES DA CAMPANHA, no pe da coluna do trabalho: e para ca que o
   "..." da cabeca leva. */
.anu-ajustes > details.dobra { margin-top: 0; }
.anu-ajustes .mudar-estado { margin-top: var(--espaco-5); }

/* --- a lista de campanhas: a faixa e o cartao da B ---------------------- */

/* A FAIXA DA LISTA COM A VERBA PRIMEIRO, E MAIS LARGA (o retrato): ela
   carrega o numero maior e as linhas embaixo dele. So acima da faixa
   estreita: la e no telefone valem as duas colunas de sempre, com a verba na
   fileira inteira. */
@media (min-width: 1212px) {
  .anu-resumo.anu-faixa { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.anu-faixa .anu-verba .anu-rotulo { display: flex; align-items: center; gap: 7px; }

/* "Todas as campanhas 4": o titulo da lista, com a contagem miuda. */
.anu-lista-titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: var(--espaco-6) 0 14px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--letra-5);
  line-height: 1.25;
}
.anu-lista-titulo span { font-weight: 500; font-size: 13px; color: var(--neutro); font-variant-numeric: var(--algarismos); }

/* A CABECA DO CARTAO: quem a campanha e, a esquerda; o proximo passo, a
   direita. Quando a coluna aperta (a faixa estreita), o passo desce para a
   linha de baixo em vez de espremer o nome. */
.anu-cartao-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4) 32px;
  padding: 22px 24px 20px;
}
.anu-cartao-cabeca > .anu-cartao-quem { flex: 1 1 320px; }
.anu-cartao-selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.anu-cartao-nome a { color: inherit; text-decoration: none; }
.anu-cartao-nome a:hover { text-decoration: underline; text-underline-offset: 4px; }
.anu-cartao-nome .ico { width: 18px; height: 18px; margin-left: 4px; vertical-align: -3px; color: var(--neutro); }
.anu-cartao-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 0;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--neutro);
  font-variant-numeric: var(--algarismos);
}
.anu-cartao-meta b { color: var(--tinta-2); font-weight: 600; }
.anu-cartao-proximo { display: grid; flex: none; justify-items: end; gap: 8px; }
.anu-cartao-proximo-nome { font-weight: 500; font-size: 12.5px; color: var(--neutro); }
/* O caminho do cartao: a mesma peca da campanha, numa faixa com fio. */
.anu-cartao-caminho { margin: 0; padding: 18px 24px 22px; border-top: 1px solid var(--borda); }
.anu-cartao-encerrada .anu-cartao-nome { color: var(--tinta-2); }

/* O NOME DA CAMPANHA NOVA OCUPA DUAS COLUNAS da linha (era um `style` no
   HTML). */
.anu-campo-largo { grid-column: span 2; }

/* --- a entrega: a cabeca da casa e a esteira ---------------------------- */

/* A linha de quem sobe, embaixo da instrucao: a mesma letra do apoio. */
.anu-cabeca-entrega { margin-bottom: var(--espaco-5); }
.abaixo.anu-entrega-quem { margin-top: 6px; }
/* A volta da esteira com a seta da casa, e o nome cortado com reticencias
   (a esteira gruda, e o nome de 120 letras nao pode empurrar a conta). */
.anu-esteira .volta a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* --- o gerente: a cabeca da casa ---------------------------------------- */

/* O total da conversa mora a direita da cabeca, pequeno e com a palavra
   "producao" colada (a regra das duas moedas). */
.anu-cabeca-gerente .cabeca-acoes { align-self: flex-end; }
.anu-ia-topo .voltar { margin: 0; }

/* --- o automatico: a porta do destino, a conta e as barras -------------- */

/* A afirmacao do alto ("nao tem rotina das 6h") com o "por que?" na linha. */
/* A LINHA CORRE COMO TEXTO, e "6h · por que?" vao grudados (`.sem-quebra`
   no template): em `flex` a frase inteira virava um item e, quando quebrava,
   o "por que?" descia sozinho e o "·" ficava pendurado (OLHADO na
   conferencia 5.2, a 390 e a 320). A caixa do "por que?" volta a quebrar
   linha. */
.abaixo.anu-sem-rotina { margin-top: 6px; }
.anu-sem-rotina .porque { margin-left: 2px; white-space: normal; }
/* O titulo do cartao com o "?" ao lado, dentro da cabeca do painel. O "?"
   FICA PRESO A ULTIMA PALAVRA: em `flex` o `h2` inteiro era um item, e
   quando o titulo quebrava ele levava a largura toda e o "?" descia sozinho
   para uma linha propria (OLHADO na conferencia 5.2, a 390 e a 320, nos tres
   cartoes do Automatico). O titulo corre em linha; a cabeca nao quebra entre
   o fim dele e o "?" (quem decide a quebra na fronteira e o ancestral comum,
   a cabeca), e o `h2` quebra normalmente por dentro. */
.anu-painel-cabeca > .anu-bloco-cabeca { display: block; margin-bottom: 0; white-space: nowrap; }
.anu-painel-cabeca > .anu-bloco-cabeca > h2 { display: inline; white-space: normal; }
.anu-painel-cabeca > .anu-bloco-cabeca > .porque { margin-left: 8px; vertical-align: 2px; white-space: normal; }
/* A PORTA DO DESTINO: o cartao da decisao enquanto falta endereco. Os dois
   campos e o botao numa coluna de leitura, e nao esticados na tela inteira. */
.anu-porta form { max-width: 62ch; }
.anu-porta .campo small { max-width: none; }
/* AS BARRAS NAO SAO VERDES (plano 4.1): medida de gasto nao e decisao. A
   fatia gasta em tinta de apoio sobre o trilho; batido, em palha. */
.anu-teto .auto-barra i { background: var(--tinta-2); }
.anu-teto .bateu .auto-barra i { background: var(--alerta); }
/* O GASTO SEM ROTULO E UM CARTAO DE TOM PALHA: e gasto esperando alguem dar
   nome a ele. O rotulo interno vai num selo neutro miudo, sem o mono verde
   (ele nao tem nome humano, por definicao). */
.anu-sem-rotulo { border-color: var(--alerta-fio); background: var(--alerta-fraco); }
.anu-sem-rotulo ul { margin: 0 0 var(--espaco-3); padding-left: var(--espaco-4); }
.anu-sem-rotulo li { font-size: 14px; line-height: 1.55; color: var(--tinta-2); }
.anu-sem-rotulo .chave {
  padding: 1px 6px;
  border-radius: var(--raio-selo);
  background: var(--papel-3);
  font-family: var(--fonte-texto);
  font-size: 12.5px;
  color: var(--tinta-2);
}
/* A RESPOSTA DA CONTA E O ALVO INTEIRO, na letra do corpo: era um `label` da
   casa, em caixa alta de 11px (defeito de antes, secao 8b.2 do acrescimo). */
.anu-conta-form { max-width: 70ch; }
.anu-conta-form .campo { margin-bottom: var(--espaco-2); }
label.anu-resposta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--tinta-2);
  cursor: pointer;
}
.anu-resposta input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--tinta); }
.anu-resposta b { color: var(--tinta); font-weight: 650; }
.anu-resposta:has(input:checked) { border-color: var(--borda-forte); background: var(--papel-3); color: var(--tinta); }
.anu-conta-form .anu-guardar { margin-top: var(--espaco-2); }

/* --- a aba criar: o verde no primeiro atalho ---------------------------- */

/* O PRIMEIRO ATALHO E A DECISAO DA TELA quando ha trabalho esperando: ele
   ganha o botao verde a direita, no lugar da seta (o atalho inteiro e o
   link; o botao e o sinal de onde apertar). */
.anu-atalho-primeiro { border-color: var(--borda-forte); }
.anu-atalho-acao { flex: none; pointer-events: none; }

/* --- criativos: a saida da lista vazia ---------------------------------- */

/* Sem criativo nenhum, "Criar anuncio" e a unica saida da tela, e o verde. */
.anu-vazio-acao { margin: var(--espaco-3) 0 0; }

/* --- a campanha, segunda mao: o verde mais perto do alto (M4) ----------- */

/* A CABECA POE AS ACOES NA LINHA DO ESTADO, no computador, e o nome ganha a
   largura inteira: MEDIDO na rodada 5.2-r1, com os botoes ao lado do nome
   ele partia em duas linhas ja a 1440 ("Teste de setembro -- o tempo que
   some garimpando"), e o verde descia 40px com ele. */
@media (min-width: 721px) {
  .anu-cabeca-campanha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 32px;
    align-items: center;
  }
  .anu-cabeca-campanha > .cabeca-texto { display: contents; }
  .anu-cabeca-campanha .titulo-tela { grid-column: 1 / -1; grid-row: 1; max-width: none; }
  .anu-cabeca-campanha .anu-cabeca-linha { grid-column: 1; grid-row: 2; }
  .anu-cabeca-campanha .cabeca-acoes { grid-column: 2; grid-row: 2; margin-top: 14px; padding-top: 0; }
  .anu-cabeca-campanha .anu-cabeca-passo { grid-column: 1 / -1; grid-row: 3; }
}
.abaixo.anu-cabeca-passo { margin: 12px 0 0; }
/* O MOMENTO MAIS JUSTO que o do retrato no respiro de dentro (36 -> 28 em
   cima, os vaos de 18/12/28 -> 10/8/20, escritos nas regras do momento la
   em cima): MEDIDO, 28px a menos ate o verde, sem mudar o desenho. */
.anu-momento .momento-volta { padding-top: 26px; padding-bottom: 26px; }
.momento.anu-momento h2 { margin-top: 10px; }
/* A frase inteira do passo, depois do botao (so no momento com plano). */
.anu-momento-texto > p.anu-momento-depois { margin-top: 18px; font-size: 15px; }
/* O caminho agora vem depois do momento: o vao entre os dois e o de bloco
   (30px), e nao os 52 que o momento deixa antes das colunas. */
.momento.anu-momento { margin-bottom: 30px; }

@media (max-width: 720px) {
  /* O "POR QUE?" DE CIMA NO TELEFONE e folha acima da barra de baixo pela
     regra da casa (`.porque-caixa.acima`, no nucleo, desde a Etapa 7). */
  .momento.anu-momento { margin-bottom: 24px; }
  /* O NOME DA CAMPANHA NA ESTEIRA DA ENTREGA QUEBRA EM ATE DUAS LINHAS, e nao
     corre por baixo do "?" da gaveta: com reticencias numa linha so, o texto
     inteiro continuava la, escondido embaixo do canto (M12, 5.2-r1, a
     320px). */
  .anu-esteira .volta a { white-space: normal; }
  .anu-esteira .volta a span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 720px) {
  /* O CARTAO NO TELEFONE: o passo desce e ocupa a largura (alvo de dedo). */
  .anu-cartao { padding: 0; }
  .anu-cartao-cabeca { flex-direction: column; align-items: stretch; gap: var(--espaco-4); padding: 18px var(--espaco-4); }
  .anu-cartao-cabeca > .anu-cartao-quem { flex: none; }
  .anu-cartao-proximo { justify-items: stretch; }
  .anu-cartao-proximo .botao { width: 100%; min-height: 44px; }
  .anu-cartao-caminho { padding: var(--espaco-4); }
  .anu-cartao-pe { padding: 10px var(--espaco-4) 12px; }
  .anu-cartao-nome { font-size: 19px; }
  .anu-campo-largo { grid-column: auto; }
  /* O botao do primeiro atalho desce para baixo do nome, na largura
     inteira: ao lado do nome ele deixava 120px para ele a 360px. */
  .anu-atalho-primeiro { grid-template-columns: auto minmax(0, 1fr); }
  .anu-atalho-acao { grid-column: 1 / -1; width: 100%; min-height: 44px; }
}

@media (max-width: 720px) {
  /* A CABECA DA CAMPANHA NO TELEFONE: a linha de estado encolhe, e a porta
     do Gerenciador, quando e o passo (o verde), ocupa a fileira inteira. */
  .anu-cabeca-linha { margin-top: 10px; font-size: 13.5px; }
  .anu-cabeca-campanha .cabeca-acoes { flex-wrap: wrap; padding-top: 0; }
  .anu-cabeca-campanha .cabeca-acoes > .botao { flex: 1 1 auto; }
  .anu-cabeca-campanha .cabeca-acoes > form > .botao { flex: 1 1 auto; }
  /* O "..." SOBE PARA O CANTO, ao lado do "?" da gaveta, como no retrato
     `celular-campanha.png`: na fileira da volta "Campanhas", e nao numa
     fileira propria embaixo do titulo. MEDIDO na conferencia 5.2 (com plano,
     a 390): a fileira "Levar" + "..." ia de 241 a 279px, e o momento so
     comecava em 299. O "?" mora a 20px do alto da `.area` (78 a 114px), e a
     cabeca comeca 36px abaixo disso (a volta tem 36 de alto, com -6/+6 de
     margem): `top: -36px` alinha os dois. `right: 44px` sao os 36 do "?"
     mais 8 de ar, contados da borda da cabeca, que e a mesma do "?". So a
     cabeca ganha `position` (nunca `main` nem `.area`, regra 5 do plano), e
     sem `z-index`: a folha do "..." continua na camada 19 da raiz. */
  .cabeca.anu-cabeca-campanha { position: relative; }
  /* A porta verde, quando e o passo, na largura inteira, como o verde do
     momento no telefone. */
  .anu-cabeca-campanha .cabeca-acoes { align-self: stretch; }
  /* O NOME COMPRIDO A 24px NO TELEFONE: MEDIDO, a 27px o de 120 letras dava
     7 linhas a 390 e o verde do momento ficava a 499px (440 antes da B); a
     24px sao 5 linhas e o verde vai a 423 (476 a 360, 502 a 320). */
  .titulo-tela.longo.anu-nome-comprido { font-size: 24px; }
  .anu-cabeca-campanha details.anu-menu { position: absolute; top: -36px; right: 44px; }
  .anu-cabeca-campanha .anu-menu > .anu-menu-botao { width: 36px; height: 36px; min-height: 36px; }
  /* Sem a porta verde, a caixa das acoes so guardava o "..." (que agora e
     absoluto) e deixava o vao da cabeca (10px) vazio: ela sai da conta. */
  .anu-cabeca-campanha .cabeca-acoes.anu-so-menu { display: contents; }
  /* Com a caixa de apagar aberta, ela fica entre a volta e a cabeca, e o
     canto seria o pe dela: ai o "..." volta para a fileira da cabeca. */
  .perigo-caixa + .anu-cabeca-campanha details.anu-menu { position: relative; top: auto; right: auto; align-self: flex-start; }
  /* O "..." VIRA FOLHA acima da barra de baixo, como o "por que?" da casa:
     encostado no botao, ele sairia da tela de 320px (MEDIDO: o botao cai
     numa segunda fileira, na esquerda, e a lista de 250px ancorada pela
     direita comecava fora da tela). */
  .anu-menu-lista {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(var(--rodape-altura) + 12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    width: auto;
  }
  .anu-menu-lista a { min-height: 44px; }

  /* O CAMINHO EM DUAS FILEIRAS: quatro colunas de 70px partiam "No
     Gerenciador" e a nota em cinco linhas. Nada some: a nota continua. */
  .anu-caminho { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4) var(--espaco-3); margin-bottom: var(--espaco-5); }

  /* O MOMENTO EM PILHA: o texto e o botao em cima, o que volta embaixo, no
     mesmo cartao. O botao na largura inteira. */
  .momento.anu-momento { grid-template-columns: minmax(0, 1fr); margin-bottom: 36px; }
  /* NO TELEFONE A CABECA E O MOMENTO APERTAM MAIS UM POUCO: MEDIDO na
     5.2-r2, o verde da campanha com plano ficava 18px abaixo do de antes a
     390 (408 contra 390). A cabeca da casa separa as pecas com 14px, e o
     momento abria com 22px de respiro: 10 e 16 aqui, e o botao a 16px da
     frase. */
  .cabeca.anu-cabeca-campanha { gap: 10px; }
  .anu-momento-texto { padding: 16px 18px 22px; }
  .anu-momento .momento-volta {
    padding: 18px;
    border-top: 1px solid var(--borda);
    border-left: 0;
    border-radius: 0 0 var(--raio-palco) var(--raio-palco);
  }
  .anu-momento-texto > p { font-size: 15px; margin-top: 8px; }
  .anu-momento-acao { gap: var(--espaco-3); margin-top: 16px; }
  .anu-momento-acao form,
  .anu-momento-acao form button,
  .anu-momento-acao > .botao { width: 100%; }

  .anu-bloco { margin-bottom: 36px; }
  /* O VAZIO COM SAIDA EM DUAS FILEIRAS: o desenho e a frase em cima, o botao
     embaixo na largura inteira. Em tres colunas a frase ficava com 60px, uma
     palavra por linha (OLHADO a 390px). */
  .anu-publico .vazio.com-acao { grid-template-columns: auto minmax(0, 1fr); }
  .anu-publico .vazio.com-acao .botao { grid-column: 1 / -1; }
  .anu-bloco-cabeca { row-gap: 6px; }
  .limites .anu-limites { padding: 4px var(--espaco-4); }
  .anu-forma-linha { grid-template-columns: minmax(0, 1fr); }
  .anu-segmento { display: flex; }
  .anu-segmento label { flex: 1 1 0; min-height: 40px; }
  .anu-forma-pe { flex-direction: column; align-items: stretch; }
  .anu-forma-pe button { width: 100%; min-height: 44px; }

  /* A LETRA DO CAMPO COM 16px NO TELEFONE, nas oito telas da frente: abaixo
     de 16px o iPhone aproxima a tela ao tocar no campo, e o dono perde o
     resto da pagina de vista no meio de digitar uma verba. */
  html[data-frente="anuncio"] main :is(input[type=text], select, textarea) { font-size: 16px; }
}

/* --- a campanha: a verba acima do teste (conserto da conferencia 5.2) --- */

/* A VERBA ACIMA DO TESTE, A VISTA NA CAMPANHA: a lista manda "Rever a verba"
   e a pagina da campanha nao dizia nada. Uma linha em tom palha (o cartao de
   tom da casa: o fio e o fundo do alerta, a letra de apoio), com o valor em
   palha e o link neutro para o "Corrigir". Dentro do momento ela vem logo
   depois do botao, e o peso de `.anu-momento-texto > p` (16px, 46ch) nao
   vale para ela. */
.anu-verba-aviso,
.anu-momento-texto > p.anu-verba-aviso {
  max-width: none;
  margin: 18px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--alerta-fio);
  border-radius: var(--raio-1);
  background: var(--alerta-fraco);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta-2);
}
.anu-verba-aviso b { color: var(--alerta); font-weight: 650; }
.anu-verba-aviso a { color: var(--tinta); text-underline-offset: 3px; }
/* Sem momento, ela mora entre a cabeca e o caminho. */
main > .anu-verba-aviso { margin: 0 0 var(--espaco-6); }

/* --- a entrega: o vao entre "O Estudio conferiu" e "O que a Meta cobra" -- */

/* OS DOIS CARTOES DE TOM COLADOS PARECIAM UM SO, com duas cores de fio
   (palha em cima, neutra embaixo). MEDIDO na conferencia 5.2 a 1440: o
   conferido ia de 576 a 845 e o aviso comecava em 845 -- vao de 0px, contra
   22 a 30 entre os outros cartoes da tela. O conferido nao tem margem de
   baixo (na Campanha ele mora dentro do plano, colado no que vem depois). */
.anu-conferido + .anu-aviso { margin-top: var(--espaco-6); }
/* --- a campanha: a faixa de 1080 a 1199px (conserto da conferencia 5.2) --- */

/* A FAIXA DE 1080 A 1199px: a ficha de 288px, e a coluna do trabalho empilha
   o que nao cabe lado a lado nos 444px dela (a 1080). As duas colunas e o
   grude comecam a 1080 (la em cima, em "A CAMPANHA POR DENTRO, NA B"). Este
   bloco mora aqui, no fim, e nao ao lado delas: a primeira consulta
   `min-width and max-width` da folha tem de ser a da faixa de 721px, que
   test_telas_na_moldura_nova.py le pela ordem. */
@media (min-width: 1080px) and (max-width: 1199px) {
  .anu-campanha { --anu-trilho: 288px; gap: 24px; }
  /* A verba do publico desce para a linha de baixo do nome (como no
     telefone): o nome leva a fileira inteira, e a cabeca ja quebra linha. */
  .anu-campanha-trabalho .anu-publico-quem { flex-basis: 100%; }
  .anu-campanha-trabalho .anu-publico-verba { text-align: left; }
  .anu-campanha-trabalho .anu-forma-linha { grid-template-columns: minmax(0, 1fr); }
  /* OS TRES NUMEROS DO PLANO EM DUAS FILEIRAS, como a faixa apertada faz com
     o resumo: a verba do plano (que carrega a frase) na fileira inteira, e
     "Quando roda" e "Anuncios" lado a lado embaixo, sem o fio -- em
     `auto-fit` de 180px a terceira medida caia sozinha na segunda fileira
     com o fio encostado em nada (OLHADO a 1100). */
  .anu-campanha-trabalho .anu-plano-corpo .anu-medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4) var(--espaco-4); }
  .anu-campanha-trabalho .anu-plano-corpo .anu-medida { padding: 0; border-left: 0; }
  .anu-campanha-trabalho .anu-plano-corpo .anu-medida:first-child { grid-column: 1 / -1; }
  /* OS CRIATIVOS EM DUAS COLUNAS, como no telefone: o `auto-fill` de 196px
     so cabia uma nos ~400px do publico, e o cartao de um criativo so virava
     uma arte de 398px de largura (OLHADO a 1080). */
  .anu-campanha-trabalho .anu-criativos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* =========================================================================
   O GERENTE NA CARA DOS TRES COMPONENTES QUE O DONO ESCOLHEU (26/09/2026)

   "a parte ali de gerente de ia adapte esses componentes la": ai-chat-input,
   message-thread e ai-task-list, do 21st.dev. Eles sao React e Tailwind; aqui
   viraram HTML, esta folha e um script curto, na cara da B:

     .anu-ia-compor   a caixa de escrever (ai-chat-input): arredondada, as
                      fichas embaixo, o botao redondo de mandar. A de
                      responder nasce numa pilula e abre com o dedo.
     .anu-ia-fio      a conversa (message-thread): o dono a direita, num
                      balao; o gerente a esquerda, com o brilho; o que ele leu
                      do Estudio numa linha que abre, antes da resposta; a
                      hora e o custo embaixo; tres pontos enquanto pensa.
     .anu-ia-plano    o que ele propos (ai-task-list): cada acao com a sua
                      marca e a conta das feitas; ao lado da conversa no
                      computador, antes dela no celular. O contrato da
                      primeira tela usa a mesma lista.

   VEM DEPOIS DAS REGRAS ANTIGAS DO GERENTE e ganha delas nos empates; onde a
   antiga pesa mais (`.anu-ia-form button`, 0,1,1), a daqui leva o prefixo da
   caixa. NENHUM FUNDO VERDE NOVO: as marcas do plano e das procedencias sao
   icones pintados pela cor do traco, e o unico verde cheio continua sendo o
   botao da decisao (o N6 do test_direcao_b).
   ========================================================================= */

/* --- as pecas pequenas: o avatar e a ficha -------------------------------- */

.anu-ia-avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: var(--papel-3);
  color: var(--tinta-2);
}
.anu-ia-avatar .ico { width: 17px; height: 17px; }
.anu-ia-avatar-gerente { background: var(--papel); color: var(--acento-texto); }
.anu-ia-avatar-dono { background: var(--papel-4); color: var(--tinta); }
.anu-ia-avatar-grande { width: 52px; height: 52px; }
.anu-ia-avatar-grande .ico { width: 26px; height: 26px; }

.anu-ia-ficha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--letra-3);
  font-weight: 600;
  color: var(--tinta-2);
  white-space: nowrap;
}
.anu-ia-ficha .ico { width: 15px; height: 15px; }

/* --- a caixa de escrever (ai-chat-input) --------------------------------- */

.anu-ia-compor { display: grid; gap: var(--espaco-2); max-width: 880px; }
.anu-ia-caixa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--borda-forte);
  border-radius: 22px;
  background: var(--papel);
  box-shadow: var(--sombra);
  transition: border-color 160ms, box-shadow 160ms,
              border-radius 420ms cubic-bezier(.34, 1.56, .64, 1);
}
/* O foco e o verde de marcar, o mesmo anel de todo campo da casa. */
.anu-ia-caixa:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fraco); }
.anu-ia-caixa .anu-ia-escrever,
.anu-ia-caixa .anu-ia-escrever:focus {
  width: 100%;
  min-height: 0;
  max-height: 40vh;
  padding: 15px 18px 6px;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  resize: none;
  overflow-y: auto;
  font-size: var(--letra-4);
  line-height: 1.55;
  field-sizing: content;
}
.anu-ia-compor-aberta .anu-ia-escrever { min-height: 76px; }
.anu-ia-caixa-pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-3);
  padding: 4px 8px 8px 10px;
}
.anu-ia-fichas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.anu-ia-ficha-campanha { min-width: 0; max-width: 100%; border-color: var(--borda); background: var(--papel-2); padding-right: 2px; }
.anu-ia-ficha-rotulo { font-weight: 500; color: var(--neutro); }
.anu-ia-ficha-campanha select,
.anu-ia-ficha-campanha select:focus {
  width: auto;
  max-width: 34ch;
  min-height: 30px;
  padding: 0 26px 0 2px;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  font-size: var(--letra-3);
  font-weight: 600;
  color: var(--tinta);
  text-overflow: ellipsis;
}
.anu-ia-ficha-campanha:focus-within { border-color: var(--acento); }
.anu-ia-atalho-teclado { font-weight: 500; color: var(--neutro); }
.anu-ia-caixa-custo {
  flex: 1 1 24ch;
  min-width: 0;
  margin: 0;
  font-size: var(--letra-2);
  line-height: 1.4;
  color: var(--neutro);
  text-align: right;
}
.anu-ia-compor .anu-ia-mandar {
  flex: none;
  justify-self: auto;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
}
.anu-ia-mandar .ico { width: 20px; height: 20px; stroke-width: 2.2; }
/* O SEGUNDO TOQUE NAO SAI: seriam duas chamadas pagas ao Opus. */
.anu-ia-mandando .anu-ia-mandar { opacity: .5; pointer-events: none; }

/* A PILULA. A caixa de responder nasce fechada -- uma linha, o botao ao lado
   -- e abre quando recebe o dedo ou tem texto. O custo e as fichas so
   aparecem aberta; e nao da para mandar fechada, porque vazia o `required`
   segura e com texto ela ja esta aberta: o custo esta sempre a vista quando
   o botao pode cobrar. */
.anu-ia-responder .anu-ia-caixa:not(:focus-within):has(.anu-ia-escrever:placeholder-shown) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: 28px;
}
.anu-ia-responder .anu-ia-caixa:not(:focus-within):has(.anu-ia-escrever:placeholder-shown) .anu-ia-escrever {
  padding: 15px 4px 15px 20px;
  border-radius: 28px 0 0 28px;
}
.anu-ia-responder .anu-ia-caixa:not(:focus-within):has(.anu-ia-escrever:placeholder-shown) .anu-ia-caixa-pe { padding: 6px; }
.anu-ia-responder .anu-ia-caixa:not(:focus-within):has(.anu-ia-escrever:placeholder-shown) :is(.anu-ia-fichas, .anu-ia-caixa-custo) { display: none; }
.anu-ia-caixa:focus-within .anu-ia-fichas,
.anu-ia-caixa:focus-within .anu-ia-caixa-custo { animation: anu-ia-surge 380ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes anu-ia-surge { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* As primeiras perguntas prontas: tocar so escreve na caixa. */
.anu-ia-sugestoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.anu-ia-compor .anu-ia-sugestao {
  display: inline-flex;
  align-items: center;
  justify-self: auto;
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 6px 14px;
  text-decoration: none;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--papel-2);
  font-size: var(--letra-3);
  font-weight: 500;
  color: var(--tinta-2);
}
.anu-ia-compor .anu-ia-sugestao:hover { border-color: var(--borda-forte); color: var(--tinta); }

/* --- a primeira tela: a porta, as conversas de antes, o contrato --------- */

.anu-ia-inicio { display: grid; gap: var(--espaco-4); max-width: 880px; }

/* O CONTROLE: a primeira tela em duas colunas no computador -- o que se manda
   a esquerda, as campanhas a direita --, e uma embaixo da outra no celular. */
.anu-ia-comando { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--espaco-6) var(--espaco-5); margin-bottom: var(--espaco-6); }
.anu-ia-comando-mandar { display: grid; gap: var(--espaco-5); min-width: 0; }
@media (min-width: 1180px) {
  .anu-ia-comando { grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); }
  .anu-ia-painel { position: sticky; top: calc(var(--topo-altura) + var(--espaco-4)); }
}
.anu-ia-painel .texto-apoio { margin: var(--espaco-2) 0; }
.anu-ia-campanha {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 10px;
  padding: 10px 8px;
  border-top: 1px solid var(--borda);
}
.anu-ia-campanha:first-child { border-top: 0; }
.anu-ia-campanha-texto { display: grid; gap: 2px; min-width: 0; }
.anu-ia-campanha .anu-ia-item-nome { font-size: var(--letra-3); font-weight: 700; line-height: 1.4; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.anu-ia-campanha .anu-ia-item-nome:hover { text-decoration: underline; }
.anu-ia-campanha-passo { font-size: var(--letra-2); line-height: 1.45; color: var(--tinta-2); }
.anu-ia-campanha-passo b { font-weight: 600; color: var(--tinta); }
.anu-ia-campanha-pede { font-size: var(--letra-2); line-height: 1.45; color: var(--alerta); }
.anu-ia-mandar-gerente {
  align-self: center;
  min-height: 36px;
  padding: 6px 12px;
  font-size: var(--letra-3);
  white-space: nowrap;
}
.anu-ia-painel-pe { margin: var(--espaco-3) 0 0; padding-top: var(--espaco-3); border-top: 1px solid var(--borda); font-size: var(--letra-2); color: var(--neutro); }
@media (max-width: 720px) {
  .anu-ia-campanha { grid-template-columns: 18px minmax(0, 1fr); }
  .anu-ia-mandar-gerente { grid-column: 2; justify-self: start; }
}
.anu-ia-boas-vindas {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--espaco-3);
}
.anu-ia-boas-vindas .anu-ia-avatar { grid-row: 1 / span 2; }
.anu-ia-boas-vindas h2 { margin: 0; font-size: var(--letra-5); }
.anu-ia-boas-vindas .texto-apoio { margin: 2px 0 0; }

.anu-ia-antiga a:hover { background: var(--papel-3); }
.anu-ia-antiga a > .ico { color: var(--neutro); }
/* O TITULO DA CONVERSA EM ATE DUAS LINHAS (29/10/2026): numa linha so ele
   cortava em "Qual campan...", e as conversas nao se distinguiam. */
.anu-ia-antiga-nome { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow-wrap: anywhere; font-weight: 600; }


/* --- a conversa (message-thread) ----------------------------------------- */

.anu-ia-mesa { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--espaco-5); }
.anu-ia-fio {
  min-width: 0;
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--papel-2);
}
.anu-ia-fio-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px var(--espaco-4);
  padding: 12px 20px;
  border-bottom: 1px solid var(--borda);
}
.anu-ia-fio-titulo { min-width: 0; font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--letra-4); color: var(--tinta); }
.anu-ia-fio-quem { display: inline-flex; align-items: center; gap: 6px; font-size: var(--letra-3); color: var(--neutro); }
.anu-ia-fio-quem .ico { width: 15px; height: 15px; color: var(--acento-texto); }

.anu-ia-fio .anu-ia-conversa { max-width: none; margin: 0; padding: 24px 20px; gap: 28px; }
.anu-ia-fio .anu-ia-fala {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: var(--espaco-3);
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.anu-ia-fio .anu-ia-dono { grid-template-columns: minmax(0, 1fr) 32px; justify-self: stretch; }
.anu-ia-corpo { display: grid; gap: 10px; min-width: 0; }
.anu-ia-dono .anu-ia-corpo { justify-items: end; gap: 4px; }
.anu-ia-fio .anu-ia-quem { font-size: var(--letra-3); font-weight: 700; color: var(--tinta); }
.anu-ia-fio .anu-ia-texto { max-width: 72ch; line-height: 1.65; }
.anu-ia-bolha {
  max-width: min(62ch, 88%);
  padding: 10px 16px;
  border-radius: 18px 18px 6px 18px;
  background: var(--papel-4);
  color: var(--tinta);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* O QUE ELE LEU, E O QUE E DE MEMORIA: a linha da ferramenta, que abre. */
.anu-ia-fio .anu-ia-fonte {
  max-width: 72ch;
  margin: 0;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--papel);
}
.anu-ia-fio .anu-ia-memoria { border-color: var(--alerta-fio); background: var(--alerta-fraco); }
.anu-ia-ferramenta > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
  font-size: var(--letra-3);
}
.anu-ia-ferramenta > summary::-webkit-details-marker { display: none; }
.anu-ia-ferramenta > summary .anu-rotulo { margin: 0; }
.anu-ia-ferramenta-nota { min-width: 0; color: var(--neutro); }
.anu-ia-abre { margin-left: auto; color: var(--neutro); transition: transform 200ms; }
.anu-ia-ferramenta[open] .anu-ia-abre { transform: rotate(180deg); }
.anu-ia-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--acento-texto); }
.anu-ia-memoria .anu-ia-ponto { border-color: var(--alerta); }
.anu-ia-fontes { display: grid; gap: 8px; margin: 0; padding: 2px 12px 12px; list-style: none; }
.anu-ia-fontes li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  font-size: var(--letra-3);
  line-height: 1.55;
  color: var(--tinta-2);
}
.anu-ia-n {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--papel-4);
  font-family: var(--fonte-numero);
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta-2);
}
.anu-ia-fio .anu-ia-ressalva { margin: 0; padding: 0 12px 12px; }
/* "O Estudio conferiu" nao fecha: e a correcao, lida junto com a frase. */
.anu-ia-fio div.anu-ia-fonte { padding: 10px 14px; border-color: var(--borda-forte); }
.anu-ia-fio div.anu-ia-fonte ul { margin: 4px 0 0; }

/* A hora, o custo e o copiar, embaixo de cada fala. */
.anu-ia-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--espaco-3); min-height: 28px; }
.anu-ia-quando { font-family: var(--fonte-numero); font-size: var(--letra-2); color: var(--neutro); font-variant-numeric: var(--algarismos); }
.anu-ia-fio .anu-ia-custo { display: inline; margin: 0; }
.anu-ia-copiar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: var(--letra-2);
  color: var(--neutro);
  opacity: 0;
  transition: opacity 150ms;
}
.anu-ia-copiar[hidden] { display: none; }
.anu-ia-copiar .ico { width: 14px; height: 14px; }
.anu-ia-gerente:hover .anu-ia-copiar, .anu-ia-copiar:focus-visible { opacity: 1; }
.anu-ia-copiar:hover { color: var(--tinta); background: var(--papel-3); }
@media (hover: none) { .anu-ia-copiar { opacity: 1; } }

.anu-ia-fio .anu-ia-acao { max-width: 72ch; margin-top: 4px; padding: 18px 20px; border-radius: 14px; }

/* OS TRES PONTOS, enquanto o Opus pensa (o script os poe no toque). */
.anu-ia-pontos { display: inline-flex; align-items: center; gap: 5px; height: 26px; }
.anu-ia-pontos i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tinta-2);
  animation: anu-ia-ponto 1.2s infinite ease-in-out;
}
.anu-ia-pontos i:nth-child(2) { animation-delay: .15s; }
.anu-ia-pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes anu-ia-ponto {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.anu-ia-pensando-texto { font-size: var(--letra-3); color: var(--neutro); }
/* A acao que roda fora do toque: os mesmos tres pontos, no card. */
.anu-ia-trabalhando { display: flex; align-items: center; gap: var(--espaco-2); margin: var(--espaco-2) 0 0; font-size: var(--letra-3); color: var(--tinta-2); }
.anu-ia-botoes .anu-ia-mandando button { opacity: .7; pointer-events: none; }

/* A caixa de responder mora no pe da conversa, dentro do mesmo cartao. */
.anu-ia-fio .anu-ia-responder {
  max-width: none;
  margin: 0;
  padding: 0 20px 20px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.anu-ia-fio .anu-ia-responder .anu-ia-caixa { max-width: 880px; }
.anu-ia-aviso-proposta { max-width: 72ch; margin: 0; }

/* --- o plano (ai-task-list) ---------------------------------------------- */

.anu-ia-plano {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--papel-2);
}
.anu-ia-plano-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin-bottom: 8px;
}
.anu-ia-plano-cabeca :is(h2, h3) { margin: 0; font-family: var(--fonte-titulo); font-size: var(--letra-4); font-weight: 700; }
.anu-ia-plano-conta { flex: none; font-family: var(--fonte-numero); font-size: var(--letra-3); color: var(--neutro); font-variant-numeric: var(--algarismos); }
.anu-ia-lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* So o link da linha do plano vira grade; o "Mandar o gerente" do painel
   tambem e filho direto da linha, e e um botao. */
.anu-ia-item > a:not(.botao),
.anu-ia-contrato .anu-ia-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: var(--letra-3);
  line-height: 1.5;
  color: var(--tinta);
  text-decoration: none;
}
.anu-ia-contrato .anu-ia-item { grid-template-columns: 18px minmax(0, 1fr); padding: 6px 0; color: var(--tinta-2); line-height: 1.55; }
.anu-ia-contrato .anu-ia-item b { color: var(--tinta); font-weight: 600; }
.anu-ia-item > a:not(.botao):hover { background: var(--papel-3); }
.anu-ia-marca { width: 18px; height: 18px; margin-top: 1px; color: var(--neutro); }
.anu-ia-item-nota { font-size: var(--letra-2); line-height: 1.7; color: var(--neutro); white-space: nowrap; }
.anu-ia-item[data-estado="feita"] .anu-ia-marca { color: var(--acento-texto); }
.anu-ia-plano .anu-ia-item[data-estado="feita"] .anu-ia-item-nome { color: var(--tinta-2); }
.anu-ia-item:is([data-estado="proposta"], [data-estado="executando"]) .anu-ia-marca { color: var(--alerta); }
.anu-ia-plano .anu-ia-item:is([data-estado="proposta"], [data-estado="executando"]) .anu-ia-item-nome { font-weight: 700; }
.anu-ia-plano .anu-ia-item[data-estado="proposta"] .anu-ia-item-nota { color: var(--alerta); }
.anu-ia-plano .anu-ia-item[data-estado="proposta"] .anu-ia-marca { animation: anu-ia-espera 1.8s ease-in-out infinite; }
@keyframes anu-ia-espera { 50% { opacity: .45; } }
.anu-ia-item[data-estado="barrada"] .anu-ia-marca,
.anu-ia-item[data-estado="nunca"] .anu-ia-marca { color: var(--alerta); }
.anu-ia-item:is([data-estado="recusada"], [data-estado="caducou"]) .anu-ia-item-nome {
  color: var(--neutro);
  text-decoration: line-through;
  text-decoration-color: var(--borda-forte);
}
.anu-ia-contrato .anu-ia-item[data-estado="proposta"] .anu-ia-marca { color: var(--neutro); }

/* NO COMPUTADOR, O PLANO AO LADO, E GRUDADO; abaixo da faixa "Esperando
   voce" quando ela existe (ela tambem gruda). */
@media (min-width: 1180px) {
  .anu-ia-mesa-com-plano { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
  .anu-ia-mesa-com-plano .anu-ia-plano { position: sticky; top: calc(var(--topo-altura) + var(--espaco-4)); }
  .anu-ia-espera ~ .anu-ia-mesa-com-plano .anu-ia-plano { top: calc(var(--topo-altura) + 84px); }
}
/* NO CELULAR E NO TABLET, O PLANO VEM ANTES DA CONVERSA: e o resumo dela. */
@media (max-width: 1179.98px) {
  .anu-ia-plano { order: -1; }
}

@media (max-width: 720px) {
  .anu-ia-fio-cabeca { padding: 10px 14px; }
  .anu-ia-fio .anu-ia-conversa { padding: 18px 12px; gap: 22px; }
  .anu-ia-fio .anu-ia-fala { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .anu-ia-fio .anu-ia-dono { grid-template-columns: minmax(0, 1fr) 28px; }
  .anu-ia-fio .anu-ia-avatar { width: 28px; height: 28px; }
  .anu-ia-bolha { max-width: 92%; }
  .anu-ia-fio .anu-ia-responder { padding: 0 10px 10px; }
  /* A FICHA DA CAMPANHA OCUPA A LINHA, e o nome longo corta com
     reticencias: a 390 "nenhuma campanha — do comeco" passava 5px da janela
     e a pagina rolava de lado. */
  .anu-ia-ficha-campanha { flex: 1 1 100%; }
  .anu-ia-ficha-campanha select, .anu-ia-ficha-campanha select:focus { flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; }
  /* O custo sobe para a primeira linha do pe: sempre ANTES do botao. */
  .anu-ia-caixa-custo { flex-basis: 100%; order: -1; text-align: left; }
  .anu-ia-caixa-pe .anu-ia-mandar { margin-left: auto; }
  .anu-ia-antiga a { grid-template-columns: 28px minmax(0, 1fr) 18px; }
  .anu-ia-antiga a .anu-nota { grid-column: 2; grid-row: 2; }
  .anu-ia-antiga a > .ico { grid-column: 3; grid-row: 1 / span 2; }
}

/* --- o acabamento (26/09/2026): "ja arruma o visual junto" ---------------- */

/* A PRIMEIRA TELA: a coluna do que se manda vai ate o painel, sem o vao que
   sobrava a 1920 entre os 880px da caixa e as campanhas. */
.anu-ia-comando .anu-ia-inicio,
.anu-ia-comando .anu-ia-compor,
.anu-ia-comando .anu-ia-antes { max-width: none; }

/* O CONTRATO VIRA UMA LINHA QUE ABRE: a tela e o controle, e a explicacao
   continua inteira, um toque atras. */
.anu-ia-regras { margin-bottom: var(--espaco-6); border: 1px solid var(--borda); border-radius: 14px; background: var(--papel-2); }
.anu-ia-regras > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--espaco-3);
  min-height: 52px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
}
.anu-ia-regras > summary::-webkit-details-marker { display: none; }
.anu-ia-regras > summary > .ico:first-child { color: var(--neutro); }
.anu-ia-regras-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--letra-4); color: var(--tinta); }
.anu-ia-regras[open] .anu-ia-abre { transform: rotate(180deg); }
.anu-ia-regras .anu-ia-contrato { max-width: none; margin: 0; padding: 4px 16px 16px; gap: 0; }
/* DENTRO DO BLOCO, AS TRES LISTAS SAO COLUNAS, e nao cartoes: cartao dentro
   de cartao pesava. Um fio separa uma da outra. */
.anu-ia-regras .anu-ia-lado { padding: 8px 20px; border: 0; border-left: 1px solid var(--borda); border-radius: 0; background: none; box-shadow: none; }
.anu-ia-regras .anu-ia-lado:first-child { border-left: 0; padding-left: 4px; }
@media (max-width: 720px) {
  .anu-ia-regras .anu-ia-lado { padding: 12px 0; border-left: 0; border-top: 1px solid var(--borda); }
  .anu-ia-regras .anu-ia-lado:first-child { border-top: 0; }
}

/* A PROPOSTA QUE ESPERA leva o fio palha, o mesmo da faixa "Esperando voce"
   do alto: o olho liga uma a outra. */
.anu-ia-fio .anu-ia-proposta { border-color: var(--alerta-fio); box-shadow: 0 0 0 3px var(--alerta-fraco); }
.anu-ia-fio .anu-ia-proposta .anu-ia-acao-topo .anu-rotulo { color: var(--alerta); }

/* =========================================================================
   O GERENTE COMO PAGINA DE IA (28/09/2026). O dono: "n gosto do jeito que
   esta, deixe tipo pagina de ia tipo a do gpt". Mockup aprovado nas fotos da
   bancada. Tudo aqui e ESCOPADO em `.anu-ia-gpt`: a folha de cima continua
   valendo onde nao for desfeita, e nenhuma classe simples e declarada de
   novo (test_folha_de_estilo). O que a pagina de IA tem que a de antes nao
   tinha: um trilho a esquerda, a conversa numa coluna de 760px no centro
   sem cartao em volta, a caixa fixa no rodape, o cumprimento no centro da
   tela vazia. O que continua igual e o que importa: o custo antes do botao
   que cobra, o "Sim, pode fazer" como unico verde quando ha proposta, e
   nada mandado sem o dedo dele.
   ========================================================================= */
.anu-ia-gpt {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 0 var(--espaco-6);
  min-height: calc(100vh - var(--topo-altura) - 200px);
}
/* --- o trilho ---------------------------------------------------------- */
.anu-ia-trilho {
  position: sticky;
  top: calc(var(--topo-altura) + var(--espaco-4));
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  min-width: 0;
  padding-right: var(--espaco-4);
  border-right: 1px solid var(--borda);
  max-height: calc(100vh - var(--topo-altura) - var(--espaco-6));
  overflow-y: auto;
}
.anu-ia-nova {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 12px;
  color: var(--tinta);
  font-size: var(--letra-3);
  font-weight: 600;
  text-decoration: none;
}
.anu-ia-nova:hover { background: var(--papel-2); }
.anu-ia-nova .ico { width: 16px; height: 16px; }
.anu-ia-trilho-grupo {
  margin: var(--espaco-2) 8px 4px;
  font-size: var(--letra-2);
  font-weight: 600;
  color: var(--neutro);
}
.anu-ia-gpt .anu-ia-antes { max-width: none; }
.anu-ia-gpt .anu-ia-antiga { border-top: 0; }
.anu-ia-gpt .anu-ia-antiga a {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--espaco-2);
  padding: 8px 10px;
  font-size: var(--letra-3);
}
.anu-ia-gpt .anu-ia-antiga a .anu-ia-avatar,
.anu-ia-gpt .anu-ia-antiga a > .ico { display: none; }
.anu-ia-gpt .anu-ia-antiga-nome { font-weight: 500; }
.anu-ia-gpt .anu-ia-antiga-ativa a { background: var(--papel-3); }
.anu-ia-gpt .anu-ia-antiga-ativa .anu-ia-antiga-nome { font-weight: 600; }
/* as campanhas no trilho: o mesmo painel, sem cartao, com a lista compacta */
.anu-ia-gpt .anu-ia-painel {
  position: static;
  margin-top: auto;
  padding: var(--espaco-3) 0 0;
  border: 0;
  border-top: 1px solid var(--borda);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.anu-ia-gpt .anu-ia-painel .anu-ia-plano-cabeca { margin-bottom: 4px; }
.anu-ia-gpt .anu-ia-painel .anu-ia-plano-cabeca h2 { font-size: var(--letra-2); color: var(--neutro); }
.anu-ia-gpt .anu-ia-painel .anu-ia-plano-conta { font-size: 12px; color: var(--alerta); }
.anu-ia-gpt .anu-ia-campanha { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 8px 10px; border-top: 0; }
.anu-ia-gpt .anu-ia-campanha .anu-ia-marca { display: none; }
.anu-ia-gpt .anu-ia-campanha .anu-ia-item-nome { font-weight: 600; }
.anu-ia-gpt .anu-ia-campanha-pede { display: none; }
.anu-ia-gpt .anu-ia-mandar-gerente {
  justify-self: start;
  min-height: 30px;
  padding: 4px 10px;
  font-size: var(--letra-2);
}
.anu-ia-gpt .anu-ia-painel-pe { font-size: var(--letra-2); }
.anu-ia-gpt .anu-ia-painel form.anu-ia-painel-pe button {
  min-height: 0;
  margin: 0 0 4px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--neutro);
  font-size: var(--letra-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* --- o centro ----------------------------------------------------------- */
.anu-ia-centro { min-width: 0; display: grid; gap: var(--espaco-5); }
.anu-ia-gpt .anu-ia-comando { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-5); margin: 0; }
.anu-ia-gpt .anu-ia-inicio { max-width: 760px; margin: 0 auto; gap: var(--espaco-4); }
.anu-ia-ola { text-align: center; margin: 12vh 0 var(--espaco-2); display: grid; gap: 6px; }
.anu-ia-ola h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: var(--rastreio-titulo);
  color: var(--tinta);
  text-wrap: balance;
}
.anu-ia-ola .texto-apoio { margin: 0; max-width: 62ch; justify-self: center; }
/* a caixa: pilula funda, com a segunda elevacao -- e o objeto da tela vazia */
.anu-ia-gpt .anu-ia-compor { max-width: none; }
.anu-ia-gpt .anu-ia-caixa {
  border-radius: 26px;
  background: var(--papel-2);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8), var(--sombra);
}
.anu-ia-gpt .anu-ia-compor-aberta .anu-ia-escrever { min-height: 56px; }
.anu-ia-gpt .anu-ia-caixa-pe { padding: 4px 8px 8px 12px; }
.anu-ia-gpt .anu-ia-ficha { border-color: var(--borda); background: var(--papel); font-weight: 500; }
.anu-ia-gpt .anu-ia-caixa-custo { flex: 1 1 18ch; }
.anu-ia-gpt .anu-ia-compor .anu-ia-mandar { width: 40px; height: 40px; min-height: 40px; }
.anu-ia-gpt .anu-ia-sugestoes { justify-content: center; }
.anu-ia-gpt .anu-ia-compor .anu-ia-sugestao { background: transparent; }
.anu-ia-gpt .anu-ia-compor .anu-ia-sugestao:hover { background: var(--papel-2); }
.anu-ia-gpt .anu-ia-compor > .anu-campo-nota { display: none; }
/* o contrato: uma linha discreta, um toque atras */
.anu-ia-gpt .anu-ia-regras { max-width: 760px; margin: 0 auto; width: 100%; border: 0; background: none; }
.anu-ia-gpt .anu-ia-regras > summary { justify-content: center; min-height: 36px; padding: 6px 0; }
.anu-ia-gpt .anu-ia-regras > summary > .ico:first-child { display: none; }
.anu-ia-gpt .anu-ia-regras-titulo { font-size: var(--letra-2); font-weight: 500; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px; }
.anu-ia-gpt .anu-ia-regras .anu-ia-ferramenta-nota { font-size: var(--letra-2); }
.anu-ia-gpt .anu-ia-regras .anu-ia-abre { margin-left: 0; }
.anu-ia-gpt .anu-ia-regras .anu-ia-contrato { padding: var(--espaco-3) 0 0; }
.anu-ia-gpt .anu-ia-regras .anu-ia-lado { padding: 4px 16px; }
.anu-ia-gpt .anu-ia-regras .anu-ia-lado h3 { font-size: var(--letra-3); }
.anu-ia-gpt .anu-ia-regras .anu-ia-contrato .anu-ia-item { font-size: var(--letra-2); padding: 3px 0; }
.anu-ia-gpt .anu-ia-regras .anu-campo-nota { font-size: var(--letra-2); }

/* --- o redesenho da versao produto (29/10/2026) ------------------------------
   O Tuca e o rosto do Gerente; a tela vazia ganha os atalhos em dois grupos
   (entender e mudar) e as campanhas em fichas, no lugar da coluna com um
   "Mandar o gerente" igual em cada uma. A Lava continua so no botao de mandar
   e no "Sim, pode fazer". */
.anu-ia-avatar img { display: block; width: 72%; height: auto; }
:root[data-tema="claro"] .anu-ia-avatar img.logo-escuro { display: none; }
.anu-ia-gpt .anu-ia-avatar-gerente { background: var(--papel-3); border-color: var(--borda-forte); }
.anu-ia-ola-tuca {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--espaco-2);
  border: 1px solid var(--borda-forte);
  border-radius: 20px;
  background: var(--papel-3);
}
.anu-ia-ola-tuca img { width: 70%; height: auto; }
:root[data-tema="claro"] .anu-ia-ola-tuca img.logo-escuro,
:root[data-tema="claro"] .anu-ia-fio-tuca img.logo-escuro { display: none; }
.anu-ia-fio-tuca { display: inline-grid; width: 18px; height: 18px; }
.anu-ia-fio-tuca img { width: 100%; height: auto; }
.anu-ia-gpt .anu-ia-ola { margin-top: var(--espaco-4); }
.anu-ia-trilho-vazio { margin: var(--espaco-2) 8px 0; font-size: var(--letra-2); color: var(--neutro); line-height: 1.5; }

.anu-ia-atalhos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-4);
  margin-top: var(--espaco-3);
}
.anu-ia-atalhos-grupo h3,
.anu-ia-lado-bloco h3 {
  margin: 0 0 var(--espaco-2);
  font-size: var(--letra-2);
  font-weight: 600;
  color: var(--neutro);
}
.anu-ia-cartoes { display: grid; gap: var(--espaco-2); }
.anu-ia-cartao {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  background: var(--papel-2);
  color: var(--tinta);
  text-decoration: none;
}
.anu-ia-cartao:hover { border-color: var(--borda-forte); background: var(--papel-3); }
.anu-ia-cartao b { font-size: var(--letra-3); font-weight: 600; }
.anu-ia-cartao small { font-size: var(--letra-2); color: var(--neutro); }

.anu-ia-fichas-campanha { display: grid; gap: var(--espaco-2); }
.anu-ia-campanha-ficha {
  display: grid;
  gap: 2px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  color: var(--tinta);
  text-decoration: none;
}
.anu-ia-campanha-ficha:hover { border-color: var(--borda-forte); background: var(--papel-2); }
.anu-ia-campanha-ficha > b, .anu-ia-ficha-nome { font-size: var(--letra-3); font-weight: 600; }
.anu-ia-campanha-ficha small b { font-weight: 500; }
.anu-ia-campanha-ficha small { font-size: var(--letra-2); color: var(--neutro); }
.anu-ia-espera-voce { color: var(--alerta); font-weight: 600; }
.anu-ia-campanhas .anu-ia-painel-pe { margin: var(--espaco-3) 0 0; font-size: var(--letra-2); color: var(--neutro); }
.anu-ia-contrato-curto { text-align: center; }

/* a tela vazia em duas colunas (29/10/2026, "pode usar melhor o espaco"): a
   conversa que nasce a esquerda, e a direita os numeros dos ultimos 7 dias e
   as campanhas. Abaixo de 1180px a coluna da direita desce. */
.anu-ia-gpt .anu-ia-comando-mandar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: var(--espaco-6);
}
.anu-ia-gpt .anu-ia-comando-mandar .anu-ia-inicio { max-width: none; margin: 0; }
.anu-ia-coluna {
  position: sticky;
  top: calc(var(--topo-altura) + var(--espaco-4));
  display: grid;
  gap: var(--espaco-4);
}
.anu-ia-lado-bloco {
  padding: var(--espaco-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
.anu-ia-lado-bloco h3 small { margin-left: 4px; font-weight: 400; }
.anu-ia-semana { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-3); margin: 0 0 var(--espaco-3); }
.anu-ia-semana div { display: grid; gap: 2px; }
.anu-ia-semana dt { font-size: var(--letra-2); color: var(--neutro); }
.anu-ia-semana dd { margin: 0; font-size: 20px; font-weight: 700; color: var(--tinta); font-variant-numeric: var(--algarismos); }
.anu-ia-semana dd small { font-size: 12px; font-weight: 500; color: var(--neutro); }
.anu-ia-lado-link { font-size: var(--letra-2); color: var(--tinta-2); }
.anu-ia-coluna .anu-ia-campanha-ficha { background: var(--papel); }
@media (max-width: 1180px) {
  .anu-ia-gpt .anu-ia-comando-mandar { grid-template-columns: minmax(0, 1fr); }
  .anu-ia-coluna { position: static; }
}

/* a escolha da campanha, desenhada (era o <select> do navegador) */
.anu-ia-sobre { position: relative; min-width: 0; max-width: 100%; }
.anu-ia-sobre > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.anu-ia-sobre > summary::-webkit-details-marker { display: none; }
.anu-ia-sobre > summary .ico { width: 14px; height: 14px; color: var(--neutro); transition: transform .15s; }
.anu-ia-sobre[open] > summary .ico { transform: rotate(180deg); }
.anu-ia-sobre-atual { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; font-weight: 600; color: var(--tinta); }
.anu-ia-gpt .anu-ia-sobre .anu-ia-ficha-campanha:focus-within { border-color: var(--borda); }
.anu-ia-sobre-lista {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 2px;
  width: min(360px, 80vw);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--papel-2);
  box-shadow: var(--sombra-pop);
}
.anu-ia-sobre-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.anu-ia-sobre-item:hover { background: var(--papel-3); }
.anu-ia-sobre-item input { position: absolute; opacity: 0; pointer-events: none; }
.anu-ia-sobre-item > span { display: grid; gap: 1px; min-width: 0; }
.anu-ia-sobre-item b { font-size: var(--letra-3); font-weight: 600; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anu-ia-sobre-item small { font-size: var(--letra-2); color: var(--neutro); }
.anu-ia-sobre-item:has(input:checked) { background: var(--papel-4); }
.anu-ia-sobre-item:has(input:checked) b::after { content: " ✓"; color: var(--acento); }
.anu-ia-sobre-item:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: -2px; }
@media (max-width: 720px) {
  .anu-ia-atalhos { grid-template-columns: minmax(0, 1fr); }
}
/* --- a conversa: sem cartao, a coluna de 760 ----------------------------- */
.anu-ia-gpt .anu-ia-topo { max-width: 760px; margin: 0 auto; width: 100%; }
.anu-ia-gpt .anu-ia-espera { max-width: 760px; margin: 0 auto var(--espaco-2); width: 100%; }
.anu-ia-gpt .anu-ia-mesa { max-width: 760px; margin: 0 auto; width: 100%; }
.anu-ia-gpt .anu-ia-fio { border: 0; border-radius: 0; background: none; }
.anu-ia-gpt .anu-ia-fio-cabeca { padding: 0 0 var(--espaco-3); }
.anu-ia-gpt .anu-ia-fio .anu-ia-conversa { padding: var(--espaco-5) 0; gap: var(--espaco-6); }
.anu-ia-gpt .anu-ia-fio .anu-ia-fala { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-2); }
.anu-ia-gpt .anu-ia-fio .anu-ia-avatar { display: none; }
.anu-ia-gpt .anu-ia-fio .anu-ia-dono { grid-template-columns: minmax(0, 1fr); }
.anu-ia-gpt .anu-ia-fio .anu-ia-quem { font-size: var(--letra-2); font-weight: 500; color: var(--tinta-2); }
.anu-ia-gpt .anu-ia-bolha { max-width: min(62ch, 76%); border-radius: 20px 20px 4px 20px; background: var(--papel-3); }
.anu-ia-gpt .anu-ia-fio .anu-ia-texto { max-width: 68ch; }
.anu-ia-gpt .anu-ia-fio .anu-ia-fonte { max-width: max-content; border-radius: 999px; background: var(--papel-2); }
.anu-ia-gpt .anu-ia-ferramenta > summary { min-height: 32px; padding: 0 12px 0 10px; font-size: var(--letra-2); }
.anu-ia-gpt .anu-ia-ferramenta[open] { max-width: 68ch; border-radius: 14px; }
.anu-ia-gpt .anu-ia-fio div.anu-ia-fonte { max-width: 68ch; border-radius: 12px; }
.anu-ia-gpt .anu-ia-fio .anu-ia-acao-fechada { max-width: max-content; padding: 8px 12px; border-radius: 12px; }
.anu-ia-gpt .anu-ia-acao-fechada .anu-ia-acao-linha { display: flex; align-items: center; gap: 8px; }
.anu-ia-gpt .anu-ia-acao-fechada .anu-ia-acao-estado { display: inline; font-size: var(--letra-3); }
.anu-ia-gpt .anu-ia-fio .anu-ia-acao-feito { max-width: 60ch; }
.anu-ia-gpt .anu-ia-fio .anu-ia-proposta { border-radius: 18px; }
/* a caixa de responder gruda no rodape, com um veu por tras -- e, no
   telefone, ACIMA da barra de baixo (29/10/2026): com `bottom: 0` ela nascia
   atras da barra fixa de 59px. A altura da barra e zero no computador. */
.anu-ia-gpt .anu-ia-fio .anu-ia-responder {
  position: sticky;
  bottom: var(--rodape-altura, 0px);
  z-index: 4;
  margin: 0;
  padding: var(--espaco-2) 0 var(--espaco-4);
  background: linear-gradient(to bottom, transparent, var(--papel) 30%);
}
.anu-ia-gpt .anu-ia-responder .anu-ia-caixa { max-width: none; }
.anu-ia-gpt .anu-ia-aviso-proposta { padding: 0 8px; }
/* "O que ele propos": o painel a direita a 1600+, uma faixa acima antes disso */
.anu-ia-gpt .anu-ia-mesa-com-plano { grid-template-columns: minmax(0, 1fr); }
.anu-ia-gpt .anu-ia-mesa-com-plano .anu-ia-plano { position: static; order: -1; padding: 10px 14px; border-radius: 14px; }
.anu-ia-gpt .anu-ia-mesa-com-plano .anu-ia-plano .anu-ia-lista { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.anu-ia-gpt .anu-ia-mesa-com-plano .anu-ia-plano .anu-ia-item > a { padding: 4px 6px; grid-template-columns: 16px minmax(0, 1fr) auto; }
@media (min-width: 1600px) {
  .anu-ia-gpt-com-conversa { grid-template-columns: 248px minmax(0, 1fr) 260px; }
  .anu-ia-gpt .anu-ia-mesa-com-plano { grid-template-columns: minmax(0, 1fr); }
  .anu-ia-gpt .anu-ia-mesa-com-plano .anu-ia-plano {
    grid-column: 3;
    grid-row: 1 / span 6;
    position: sticky;
    top: calc(var(--topo-altura) + var(--espaco-4));
    order: 0;
    padding: 0 0 0 var(--espaco-4);
    border: 0;
    border-left: 1px solid var(--borda);
    border-radius: 0;
    background: none;
  }
  .anu-ia-gpt .anu-ia-mesa-com-plano .anu-ia-plano .anu-ia-lista { display: grid; gap: 2px; }
  .anu-ia-gpt .anu-ia-mesa-com-plano .anu-ia-plano .anu-ia-item > a { grid-template-columns: 18px minmax(0, 1fr); }
  .anu-ia-gpt .anu-ia-mesa-com-plano .anu-ia-plano .anu-ia-item-nota { grid-column: 2; white-space: normal; }
}
.anu-ia-gpt .anu-ia-apagar { max-width: 760px; margin: 0 auto; width: 100%; border-top: 0; padding-top: 0; }
/* o cabecalho da tela encolhe: numa pagina de IA o titulo grande e a conversa */
.anu-cabeca-gerente { margin-bottom: var(--espaco-3); }
.anu-cabeca-gerente .titulo-tela { font-size: var(--letra-5); }
.anu-cabeca-gerente .abaixo { display: none; }
@media (max-width: 1100px) {
  .anu-ia-gpt, .anu-ia-gpt-com-conversa { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-6); }
  .anu-ia-trilho { position: static; order: 2; max-height: none; padding-right: 0; border-right: 0; border-top: 1px solid var(--borda); padding-top: var(--espaco-4); }
  .anu-ia-gpt .anu-ia-mesa-com-plano .anu-ia-plano { grid-column: auto; grid-row: auto; }
  .anu-ia-ola { margin-top: 6vh; }
  .anu-ia-ola h2 { font-size: 26px; }
}
@media (max-width: 720px) {
  .anu-ia-gpt .anu-ia-bolha { max-width: 90%; }
  .anu-ia-gpt .anu-ia-fio .anu-ia-responder { padding: var(--espaco-2) 0 var(--espaco-3); }
  .anu-ia-ola { margin-top: 3vh; }
}

/* OS DADOS DA ACAO NUMA TABELA LIMPA: rotulo a esquerda, valor a direita,
   um fio entre as linhas. As caixas escuras de antes pareciam campo de
   digitar, e aqui nada se digita. O que a acao troca ganha o fundo do verde
   fraco de marcar. */
.anu-ia-fio .anu-ia-acao .anu-campos { margin: 14px 0; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.anu-ia-fio .anu-ia-acao .anu-campo-linha {
  display: grid;
  grid-template-columns: minmax(10ch, 16ch) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--espaco-3);
  margin: 0;
  padding: 9px 12px;
  border-top: 1px solid var(--borda);
}
.anu-ia-fio .anu-ia-acao .anu-campo-linha:first-child { border-top: 0; }
.anu-ia-fio .anu-ia-acao .anu-campo-linha:has(.anu-ia-muda) { background: var(--acento-fraco); }
.anu-ia-fio .anu-ia-acao .anu-campo-linha dt { font-weight: 500; color: var(--tinta-2); }
.anu-ia-fio .anu-ia-acao .anu-campo-valor {
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: 600;
  color: var(--tinta);
}

/* RISCO E CUSTO LADO A LADO, cada um no seu quadro -- e os dois ainda acima
   dos botoes. */
.anu-ia-fio .anu-ia-pesos {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
}
.anu-ia-fio .anu-ia-peso { max-width: none; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--papel); }
.anu-ia-fio .anu-ia-acao .anu-alerta { max-width: none; border-radius: 10px; }
.anu-ia-fio .anu-ia-botoes { margin-top: 16px; padding-top: 16px; border-top-color: var(--borda); }

/* A ACAO QUE JA FECHOU E UMA LINHA, com a marca do plano: feita, barrada,
   recusada ou que ficou para tras. O resultado vem embaixo, quando ha. */
.anu-ia-fio .anu-ia-acao-fechada { padding: 10px 14px; border-radius: 12px; }
.anu-ia-acao-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.anu-ia-acao-linha .anu-rotulo { margin: 0; font-size: var(--letra-3); font-weight: 700; color: var(--tinta); }
.anu-ia-fio .anu-ia-acao-linha .anu-ia-acao-estado { font-size: var(--letra-3); font-weight: 500; }
.anu-ia-acao-fechada[data-estado="feita"] .anu-ia-marca { color: var(--acento-texto); }
.anu-ia-acao-fechada[data-estado="barrada"] .anu-ia-marca { color: var(--alerta); }
.anu-ia-acao-fechada:is([data-estado="recusada"], [data-estado="caducou"]) .anu-rotulo { color: var(--neutro); text-decoration: line-through; text-decoration-color: var(--borda-forte); }
.anu-ia-fio .anu-ia-acao-feito { margin: 6px 0 0 28px; }
.anu-ia-fio .anu-ia-acao-fechada .anu-campo-nota { margin-left: 28px; }
.anu-ia-fio .anu-ia-trabalhando { margin-left: 28px; }

/* O aviso da proposta, antes da caixa: um fio palha, e nao um paragrafo solto. */
.anu-ia-fio .anu-ia-aviso-proposta { padding-left: 10px; border-left: 2px solid var(--alerta-fio); color: var(--tinta-2); }

@media (max-width: 720px) {
  .anu-ia-fio .anu-ia-acao { padding: 14px; }
  .anu-ia-fio .anu-ia-acao .anu-campo-linha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .anu-ia-pontos i, .anu-ia-plano .anu-ia-item[data-estado="proposta"] .anu-ia-marca { animation: none; }
  .anu-ia-caixa, .anu-ia-abre { transition: none; }
  .anu-ia-caixa:focus-within .anu-ia-fichas, .anu-ia-caixa:focus-within .anu-ia-caixa-custo { animation: none; }
}

/* =========================================================================
   A LINHA DE ANUNCIOS (26/09/2026): a aba /anuncios/linha

   "crie um pipeline/ um fluxo de automacoes mostrando toda a linha das
   demandas no anuncios". Tres partes, e quase tudo e peca que ja existia:

     a linha de cada campanha  `.anu-painel` com o `.anu-caminho` da lista de
                               campanhas em OITO passos (`.anu-linha-caminho`)
                               e, embaixo, a lista do plano do Gerente
                               (`.anu-ia-lista`, `.anu-ia-item` com
                               data-estado e os icones do sprite) etapa por
                               etapa
     onde melhorar             um `.anu-painel` com uma fileira por etapa
     o diario                  o `.anu-ia-plano` do Gerente, um evento por
                               linha, com a hora na frente

   NENHUM VERDE NOVO: a tela so le, e nao tem decisao. O trecho andado do
   caminho e o verde que o caminho ja tinha; o passo parado leva o palha do
   alerta, que e a cor de "espera voce" desta frente. Todo "US$" mora num
   `.anu-linha-custo` ou num `.anu-producao`, com a palavra "producao" colada.
   ========================================================================= */

.anu-linha-resumo .anu-medidas { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.anu-linha-campanha { scroll-margin-top: calc(var(--topo-altura) + 12px); }
.anu-linha-parada { border-color: var(--alerta-fio); }
.anu-linha-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-3);
}
.anu-linha-quem { display: grid; gap: 3px; min-width: 0; }
.anu-linha-quem h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--letra-5);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.anu-linha-quem h2 a { color: var(--tinta); text-decoration: none; }
.anu-linha-quem h2 a:hover { text-decoration: underline; }
.anu-linha-estado { font-size: var(--letra-2); color: var(--neutro); }
.anu-linha-agora { max-width: 92ch; margin: 0 0 var(--espaco-4); font-size: var(--letra-3); line-height: 1.5; color: var(--tinta-2); }
.anu-linha-agora b { font-weight: 650; color: var(--tinta); }
.anu-linha-agora-parada, .anu-linha-agora-parada b { color: var(--alerta); }
.anu-linha-passo { display: block; margin-top: 2px; font-size: var(--letra-2); color: var(--neutro); }

/* O CAMINHO EM OITO PASSOS. `.anu-caminho` tem quatro colunas (a lista de
   campanhas); aqui sao as oito etapas numa fileira no computador largo, duas
   fileiras de quatro na janela media e quatro de duas no telefone. A forca de
   dois seletores e de proposito: a regra de quatro e a de duas do telefone
   sao de um so. */
.anu-caminho.anu-linha-caminho { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--espaco-4) var(--espaco-3); margin-bottom: var(--espaco-4); }
.anu-caminho .anu-linha-caminho-parada::before { background: var(--alerta); }
.anu-caminho .anu-linha-caminho-parada .anu-caminho-passo { color: var(--tinta); }
.anu-caminho .anu-linha-caminho-parada .anu-caminho-nota { color: var(--alerta); }

/* ETAPA POR ETAPA: a lista do plano do Gerente, com o fato embaixo do nome e
   a producao na ponta direita. */
.anu-linha-etapas { border-top: 1px solid var(--borda); }
.anu-linha-etapas > summary,
.anu-linha-encerradas > summary {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.anu-linha-etapas > summary::-webkit-details-marker,
.anu-linha-encerradas > summary::-webkit-details-marker { display: none; }
.anu-linha-etapas[open] .anu-ia-abre,
.anu-linha-encerradas[open] .anu-ia-abre { transform: rotate(180deg); }
.anu-linha-etapas-titulo { font-family: var(--fonte-titulo); font-size: var(--letra-3); font-weight: 650; color: var(--tinta-2); }
.anu-linha-etapa,
.anu-linha-evento {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 9px 4px;
  font-size: var(--letra-3);
  line-height: 1.5;
}
.anu-linha-etapa + .anu-linha-etapa,
.anu-linha-evento + .anu-linha-evento { border-top: 1px solid var(--borda); }
.anu-linha-etapa-texto { display: grid; gap: 2px; min-width: 0; }
.anu-linha-etapa .anu-ia-item-nome,
.anu-linha-evento .anu-ia-item-nome { font-weight: 600; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.anu-linha-etapa[data-estado="neutra"] .anu-ia-item-nome { font-weight: 500; color: var(--tinta-2); }
.anu-linha-fato { font-size: var(--letra-2); color: var(--tinta-2); overflow-wrap: anywhere; }
.anu-linha-falta { font-size: var(--letra-2); color: var(--alerta); }
.anu-linha-custo {
  font-family: var(--fonte-numero);
  font-size: var(--letra-2);
  line-height: 1.7;
  color: var(--neutro);
  white-space: nowrap;
  font-variant-numeric: var(--algarismos);
}
.anu-producao.anu-linha-pe { margin-top: var(--espaco-3); }
.anu-linha-encerradas .anu-ia-lista { margin-top: var(--espaco-2); }

/* ONDE MELHORAR: uma fileira por etapa -- o nome, o tempo medio, quantas
   estao paradas nela agora e a producao. */
.anu-linha-melhor { display: grid; margin: 0 0 var(--espaco-4); padding: 0; list-style: none; }
.anu-linha-melhor-etapa {
  display: grid;
  grid-template-columns: minmax(10ch, 1fr) minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, auto);
  align-items: baseline;
  gap: 4px var(--espaco-4);
  padding: 10px 0;
  border-top: 1px solid var(--borda);
  font-size: var(--letra-3);
  line-height: 1.45;
}
.anu-linha-melhor-etapa:first-child { border-top: 0; }
.anu-linha-melhor-nome { font-weight: 650; color: var(--tinta); }
.anu-linha-melhor-tempo { color: var(--tinta-2); }
.anu-linha-melhor-agora { color: var(--neutro); }
.anu-linha-numeros { display: grid; gap: 6px; margin: 0; padding: 0 0 0 18px; font-size: var(--letra-3); line-height: 1.5; color: var(--tinta-2); }
.anu-linha-numeros b { font-weight: 650; color: var(--tinta); }
/* O pe de producao do bloco desce um degrau: ele fecha as contas de cima, e
   nao e mais uma delas. */
.anu-linha-melhorar .anu-producao { margin-top: var(--espaco-4); }

/* O DIARIO: a hora na frente de cada evento, a campanha embaixo dele. */
.anu-linha-diario { margin-bottom: var(--espaco-6); }
.anu-linha-desde { max-width: 92ch; margin: 0 0 var(--espaco-3); }
.anu-linha-quando { font-family: var(--fonte-numero); font-size: var(--letra-2); color: var(--neutro); font-variant-numeric: var(--algarismos); }
.anu-linha-onde { font-size: var(--letra-2); color: var(--tinta-2); }

@media (max-width: 1179.98px) {
  .anu-caminho.anu-linha-caminho { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .anu-linha-resumo .anu-medidas { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-3); }
  .anu-linha-resumo .anu-medida { padding: 0; border-left: 0; }
  .anu-caminho.anu-linha-caminho { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A PRODUCAO DESCE PARA BAIXO DO TEXTO: na ponta direita ela espremia o
     fato numa coluna de dez letras. */
  .anu-linha-etapa, .anu-linha-evento { grid-template-columns: 18px minmax(0, 1fr); }
  .anu-linha-etapa .anu-linha-custo, .anu-linha-evento .anu-linha-custo { grid-column: 2; }
  .anu-linha-melhor-etapa { grid-template-columns: minmax(0, 1fr) auto; }
  .anu-linha-melhor-etapa .anu-linha-custo { grid-column: 2; grid-row: 1; }
  .anu-linha-melhor-tempo, .anu-linha-melhor-agora { grid-column: 1 / -1; }
}

/* [/dono: anuncios] */

/* [dono: estudio] */
/* A TERCEIRA FRENTE (29/09/2026): as telas do Estúdio de vídeo -- Vídeos,
   Criativos (a biblioteca), Bancada e Busca. A mesma pele da B: um verde por
   tela, cartões só onde há cartão, a medida de leitura da casa. As classes
   têm o prefixo `est-`. O dono aprovou o mockup antes. */
.est-vazio { max-width: var(--anu-medida, 62ch); }
.est-vazio a { color: var(--tinta); }
/* AS SUB-ABAS DE ANÚNCIOS > CRIATIVOS (29/09/2026 à noite): o dono não
   queria uma frente nova ("algo apenas pro anúncios poder gerar criativos");
   o que era o Estúdio vira quatro sub-abas dentro da aba Criativos --
   Anúncios (a lista de sempre), Elenco, Vídeos e Laboratório. Pílulas, como o
   filtro da lista; a ativa leva o verde. */
/* REDESENHO (27/10/2026): as abas de secao deles, com o SUBLINHADO de 2px no
   acento sob a ativa e o fio de 1px embaixo da fileira. Eram pilulas. */
.subabas { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0 0 var(--espaco-5); border-bottom: 1px solid var(--borda); }
.subabas a { margin-bottom: -1px; padding: 10px 2px 11px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--neutro); }
.subabas a.ativa { border-bottom-color: var(--acento); color: var(--tinta); font-weight: 650; }
.subabas a:hover { color: var(--tinta); }
.est-secao { display: grid; gap: var(--espaco-3); margin-top: var(--espaco-5); }
.est-secao-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-3); flex-wrap: wrap; }
.est-secao-cabeca h2 { margin: 0; font-size: 17px; }
.est-secao-cabeca span { color: var(--neutro); font-size: 13px; }
.est-vazio-secao { margin: 0; }
.est-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--espaco-3); }
.est-cartao { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); align-content: start; }
.est-cartao b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.est-cartao small { color: var(--neutro); font-size: 12px; line-height: 1.35; }
.est-mini { aspect-ratio: 4 / 5; border-radius: var(--raio-1); background: var(--papel-3); display: grid; place-items: center; color: var(--neutro); font-size: 12px; text-align: center; padding: 8px; overflow: hidden; }
.est-mini.est-larga { aspect-ratio: 16 / 10; }
.est-mini.est-som { aspect-ratio: 16 / 7; }
.est-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.est-pe { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-2); }
.est-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.est-mini audio { width: 100%; max-width: 100%; }
.est-andando { color: var(--tinta-2); }
/* as gavetas que pagam: uma por porta, com o formulario dentro */
.est-porta.est-porta-paga { align-items: flex-start; }
.est-nova { flex: 1 1 300px; max-width: 460px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); }
.est-nova > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.est-nova > summary::-webkit-details-marker { display: none; }
.est-nova > summary small { font-weight: 400; color: var(--tinta-2); }
.est-nova[open] > summary { border-bottom: 1px solid var(--borda); }
.est-form { display: grid; gap: 10px; padding: 12px; }
.est-form label { display: grid; gap: 4px; font-size: 13px; color: var(--tinta-2); }
.est-form input[type="text"], .est-form textarea { width: 100%; }
.est-estilos { display: flex; gap: 12px; flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.est-estilos legend { font-size: 13px; color: var(--tinta-2); margin-bottom: 4px; padding: 0; }
.est-estilos label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--tinta); }
.est-form-pe { display: grid; gap: 6px; }
.est-form select { width: 100%; }
a.est-cartao.est-link { color: inherit; text-decoration: none; }
a.est-cartao.est-link:hover { border-color: var(--acento); }
/* a ficha do video: o storyboard em tabela, que rola no telefone */
.est-rolavel { overflow-x: auto; }
.est-tabela { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.est-tabela th, .est-tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.est-tabela th { color: var(--tinta-2); font-weight: 600; white-space: nowrap; }
/* a Busca: os rotulos do jev, a leitura do Claude, o resumo e o filtro */
.est-rotulos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.est-rotulos li { display: grid; gap: 1px; padding: 5px 9px; border: 1px solid var(--borda); border-radius: var(--raio-1); background: var(--papel-3); font-size: 12px; }
.est-rotulos li small { color: var(--tinta-2); font-size: 11px; }
.est-leitura { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; font-size: 13px; }
.est-leitura dt { color: var(--tinta-2); }
.est-leitura dd { margin: 0; }
.est-referencia-titulo { margin: 0; font-weight: 600; }
.est-resumo .est-cartao { gap: 6px; }
.est-contagem { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.est-contagem li { display: flex; justify-content: space-between; gap: 8px; }
.est-contagem li b { font-variant-numeric: var(--algarismos); }
.est-filtro { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--espaco-4) 0; }
.est-filtro a { padding: 4px 10px; border: 1px solid var(--borda); border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--tinta); }
.est-filtro a.ativo { border-color: var(--acento); color: var(--acento-texto); }
.est-quadro-mini { width: 36px; height: 64px; object-fit: cover; border-radius: 4px; vertical-align: middle; border: 1px solid var(--borda); }
.est-porta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-3); margin-top: var(--espaco-5); }
.est-porta .texto-mini { max-width: 48ch; }
.est-busca { margin-bottom: var(--espaco-4); }
.est-busca-forma { display: grid; gap: 6px; max-width: 760px; }
.est-busca-forma label { font-size: 13px; color: var(--tinta-2); }
.est-busca-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.est-busca-linha input { flex: 1 1 320px; min-width: 0; }
.est-lista { display: grid; gap: var(--espaco-3); }
.est-referencia { display: grid; gap: 8px; padding: var(--espaco-4); border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); max-width: var(--anu-medida, 72ch); }
.est-referencia-cabeca { display: flex; justify-content: space-between; gap: var(--espaco-3); flex-wrap: wrap; align-items: baseline; }
.est-referencia-texto { margin: 0; white-space: pre-line; line-height: 1.5; }
@media (max-width: 720px) {
  .est-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A BANCADA DO CRIATIVO (30/09/2026 à noite): a ficha do vídeo em cinco
   estações -- roteiro editável, quadro e vídeo por cena com o preço antes do
   botão, montagem, aprovar. O dono viu o mockup antes. Classes com o
   prefixo `bc-`. */
.bc-conta { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.bc-conta div { display: grid; gap: 2px; }
.bc-conta small { font-size: 12px; color: var(--neutro); }
.bc-conta b { font-size: 18px; font-variant-numeric: var(--algarismos); }
.bc-conta b span { font-size: 13px; color: var(--tinta-2); font-weight: 400; }
.bc-trilha { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 var(--espaco-3); padding: 0; }
.bc-trilha li { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--borda); border-radius: 999px; font-size: 13px; color: var(--tinta-2); background: var(--papel-2); }
.bc-trilha li i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--papel-3); color: var(--tinta); }
.bc-trilha li.feita i { border: 2px solid var(--acento); color: var(--acento-texto); }
.bc-trilha li.agora { border-color: var(--acento); color: var(--tinta); }
.bc-trilha li small { color: var(--neutro); }
.bc-estacao { padding-top: var(--espaco-4); border-top: 1px solid var(--borda); }
.bc-planos { display: grid; gap: 8px; }
.bc-linha { display: grid; grid-template-columns: 28px 120px 1.2fr 1.6fr 1.4fr 1fr 44px 70px; gap: 8px; align-items: start; padding: 10px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); }
.bc-linha.bc-rotulos { background: transparent; border-color: transparent; padding-top: 0; padding-bottom: 0; color: var(--tinta-2); font-size: 12px; font-weight: 600; }
.bc-linha > span:first-child { font-variant-numeric: var(--algarismos); color: var(--neutro); padding-top: 6px; }
.bc-campo, .bc-linha select, .bc-linha input, .bc-linha textarea, .bc-modelo select, .bc-modelo input[type="number"] { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; color: var(--tinta); background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio-1); padding: 6px 8px; }
.bc-linha textarea { min-height: 58px; resize: vertical; line-height: 1.35; }
.bc-linha .bc-mini { display: grid; gap: 6px; }
.bc-linha .bc-ordem { display: flex; gap: 4px; justify-content: flex-end; }
.bc-linha .bc-ordem button { width: 22px; height: 22px; padding: 0; border: 1px solid var(--borda); border-radius: 6px; background: var(--papel); color: var(--tinta-2); font-size: 12px; cursor: pointer; }
.bc-linha .bc-tipo { font-size: 13px; padding-top: 6px; }
.bc-linha .bc-tipo small { display: block; color: var(--neutro); font-size: 11.5px; }
.bc-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bc-acoes form { display: contents; }
.bc-acoes .texto-mini { margin: 0; max-width: 52ch; }
.bc-b2 { font: inherit; font-size: 13.5px; padding: 8px 14px; border-radius: var(--raio-botao, 10px); border: 1px solid var(--borda-forte, var(--borda)); background: var(--papel-2); color: var(--tinta); cursor: pointer; }
.bc-b3 { font: inherit; font-size: 13.5px; padding: 8px 14px; border-radius: var(--raio-botao, 10px); border: 1px solid var(--borda-forte, var(--borda)); background: var(--papel-2); color: var(--tinta-2); cursor: pointer; }
.bc-b2:disabled, .bc-b3:disabled, .bc-estacao .botao:disabled { opacity: .45; cursor: not-allowed; }
.bc-pedido { display: flex; gap: 8px; flex: 1 1 320px; }
.bc-pedido input { flex: 1; }
.bc-enviar { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--tinta-2); flex-wrap: wrap; }
.bc-enviar input[type="file"] { max-width: 210px; font-size: 12px; }
.bc-cena { border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); overflow: hidden; }
.bc-cena + .bc-cena { margin-top: var(--espaco-3); }
.bc-cena > header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borda); font-size: 14px; }
.bc-cena > header em { color: var(--tinta-2); font-style: italic; }
.bc-cena > header .etiqueta { margin-left: auto; }
.bc-cena-corpo { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--espaco-4); padding: 14px; }
.bc-cena-mudo .bc-cena-corpo { grid-template-columns: 120px 1fr; align-items: center; }
.bc-cena h3 { margin: 0 0 8px; font-size: 13px; color: var(--tinta-2); font-weight: 600; }
.bc-quadro img, .bc-versoes video, .bc-cena-mudo img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--raio-1); border: 1px solid var(--borda); background: #000; display: block; }
.bc-quadro img { max-width: 200px; }
.bc-quadros { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bc-quadros figure { margin: 0; width: 72px; display: grid; gap: 3px; font-size: 11px; color: var(--tinta-2); text-align: center; }
.bc-quadros figure img { width: 72px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; border: 1px solid var(--borda); display: block; }
.bc-quadros figure.escolhido img { outline: 2px solid var(--acento); outline-offset: 1px; }
.bc-quadros button { font: inherit; font-size: 11px; padding: 2px 6px; border: 1px solid var(--borda); border-radius: 6px; background: var(--papel); color: var(--tinta-2); cursor: pointer; }
.bc-vazio { display: grid; place-items: center; width: 100%; max-width: 200px; aspect-ratio: 9 / 16; box-sizing: border-box; padding: 12px; color: var(--neutro); font-size: 12.5px; text-align: center; border: 1px solid var(--borda); border-radius: var(--raio-1); background: var(--papel-3); }
.bc-video .bc-vazio { max-width: 160px; }
.bc-versoes { display: flex; gap: 12px; flex-wrap: wrap; }
.bc-versoes figure { margin: 0; width: 150px; display: grid; gap: 6px; }
.bc-versoes figure.escolhida video { outline: 2px solid var(--acento); outline-offset: 2px; }
.bc-versoes figcaption { font-size: 12.5px; line-height: 1.35; }
.bc-versoes figcaption small { color: var(--neutro); display: block; }
.bc-versoes figcaption form { display: inline; }
.bc-versoes figcaption button { font: inherit; font-size: 12px; padding: 0; border: 0; background: none; color: var(--acento-texto); cursor: pointer; text-decoration: underline; }
.bc-versoes .bc-nota { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--borda); border-radius: 6px; background: var(--papel); color: var(--tinta); }
.bc-modelo { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin: 12px 0; }
.bc-modelo label { display: grid; gap: 4px; font-size: 12px; color: var(--tinta-2); }
.bc-modelo label.bc-marcar { grid-template-columns: auto 1fr; align-items: center; gap: 6px; padding-bottom: 7px; }
.bc-cena details { margin: 10px 0; }
.bc-cena summary { font-size: 12.5px; color: var(--acento-texto); cursor: pointer; }
.bc-cena details textarea { width: 100%; box-sizing: border-box; margin-top: 6px; min-height: 84px; font: inherit; font-size: 12.5px; line-height: 1.4; color: var(--tinta-2); background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio-1); padding: 8px; }
.bc-cena .texto-mini { margin: 6px 0 0; max-width: 46ch; }
.bc-montagem { display: grid; grid-template-columns: 1fr minmax(180px, 220px); gap: var(--espaco-4); align-items: start; }
.bc-ajustes { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; align-items: end; }
.bc-ajustes label { display: grid; gap: 4px; font-size: 12px; color: var(--tinta-2); }
.bc-ajustes select { font: inherit; font-size: 13px; color: var(--tinta); background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio-1); padding: 6px 8px; }
.bc-extrato { margin-top: var(--espaco-5); font-size: 13px; }
.bc-extrato summary { color: var(--tinta-2); cursor: pointer; }
.bc-extrato table { margin-top: 8px; border-collapse: collapse; font-variant-numeric: var(--algarismos); }
.bc-extrato td { padding: 5px 14px 5px 0; border-bottom: 1px solid var(--borda); color: var(--tinta-2); }
.bc-extrato td:last-child { text-align: right; color: var(--tinta); }
.bc-conferencia { display: grid; gap: 8px; margin-top: var(--espaco-3); }
.bc-provas { display: flex; gap: 8px; flex-wrap: wrap; }
.bc-provas img { width: 90px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--raio-1); border: 1px solid var(--borda); display: block; }
.bc-antigo { margin-top: var(--espaco-4); }
.bc-antigo summary { font-size: 13px; color: var(--tinta-2); cursor: pointer; }
@media (max-width: 760px) {
  .bc-conta { justify-content: space-between; }
  .bc-conta b { font-size: 15px; }
  .bc-linha { grid-template-columns: 1fr 1fr; }
  .bc-linha.bc-rotulos { display: none; }
  .bc-linha > * { grid-column: span 2; }
  .bc-linha > span:first-child, .bc-linha .bc-tipo, .bc-linha .bc-s, .bc-linha .bc-ordem { grid-column: span 1; }
  .bc-linha > span:first-child { display: none; }
  .bc-linha .bc-ordem { justify-content: flex-end; }
  .bc-linha [data-r]::before { content: attr(data-r); display: block; font-size: 11px; color: var(--neutro); margin-bottom: 3px; }
  .bc-cena-corpo, .bc-cena-mudo .bc-cena-corpo, .bc-montagem { grid-template-columns: 1fr; }
  .bc-quadro img, .bc-vazio { max-width: 160px; }
  .bc-cena > header .etiqueta { margin-left: 0; }
  .bc-pedido { flex-direction: column; }
}
/* [/dono: estudio] */

/* [dono: anuncios] */
/* --- Anúncios › WhatsApp (05/10/2026; como o WhatsApp Web desde 09/10/2026)
   A conexão por QR, o robô e as conversas. O prefixo `anu-wa-` é desta tela
   só; o resto é o vocabulário da casa (anu-painel, filtros, etiqueta, as
   barras de gasto).

   COMO O WHATSAPP WEB (pedido do dono, 09/10/2026: "deixe as conversas e
   tudo mais estilo whats para facilitar o uso"). Dois painéis: a lista à
   esquerda, a conversa à direita, com rolagem própria cada um e a barra de
   escrever presa embaixo. No celular, um painel por vez (ver o @media).

   OS TONS DA CONVERSA SÃO TOKENS DESTA TELA, declarados em `.anu-wa-app` e
   trocados no tema claro logo abaixo -- nenhuma cor solta pelas regras. O
   balão de quem manda (robô e você) é o verde-claro do WhatsApp: não é o
   `--acento`, que continua sendo só o botão da decisão (`.forte`). MEDIDO
   (WCAG): `--tinta` sobre o balão meu 10,5:1 no escuro e 15:1 no claro;
   `--tinta-2` (a hora, o "você") 5,8:1 e 7,7:1; `--acento-texto` (o
   "robô") 5,7:1 e 5,2:1. O `--neutro` NÃO senta no balão escuro (3,8:1).
   Superfície lisa, como toda a B: sem sombra de texto e sem tracejado. A
   fala que não saiu se separa pelo fio vermelho e pelo texto riscado. */
.anu-wa-app {
  --anu-wa-fundo: #101012;
  --anu-wa-pinta: rgba(244, 241, 234, .035);
  --anu-wa-balao: #1F1F22;
  --anu-wa-balao-meu: #1C3A2A;
  --anu-wa-avatar: #2A2A2E;
  /* as seis cores das etiquetas (10/10/2026): o ponto e o veu do selo */
  --anu-wa-tag-verde: #6CCB5F;
  --anu-wa-tag-azul: #6AA8E8;
  --anu-wa-tag-amarelo: #E3B341;
  --anu-wa-tag-vermelho: #EF6B5E;
  --anu-wa-tag-cinza: #A29D92;
  --anu-wa-tag-roxo: #B48CE6;
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  /* 228px = os 176px de antes (o pé de `main` e a cabeça da tela) mais os
     52px da fileira das sub-abas Conversas e Funil (15/10/2026): 36px da
     pílula e 16px de margem. Sem eles a página ganha rolagem própria. */
  height: max(540px, calc(100vh - var(--topo-altura) - 228px));
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  overflow: hidden;
  background: var(--papel-2);
}
:root[data-tema="claro"] .anu-wa-app {
  --anu-wa-fundo: #ECE8DF;
  --anu-wa-pinta: rgba(11, 11, 12, .045);
  --anu-wa-balao: #FFFFFF;
  --anu-wa-balao-meu: #D9FDD3;
  --anu-wa-avatar: #E0DBD0;
  --anu-wa-tag-verde: #2F8A2A;
  --anu-wa-tag-azul: #2C6DB5;
  --anu-wa-tag-amarelo: #A87400;
  --anu-wa-tag-vermelho: #C2382B;
  --anu-wa-tag-cinza: #6B675E;
  --anu-wa-tag-roxo: #7B4FC0;
}
.anu-wa-cabeca { margin-bottom: var(--espaco-4); }
.anu-wa-situacao { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; }
.anu-wa-fora { color: var(--falha); background: var(--falha-fraco); box-shadow: inset 0 0 0 1px var(--falha-fio); }

/* o avatar: as iniciais, ou o boneco quando não há nome */
.anu-wa-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--anu-wa-avatar);
  color: var(--tinta-2);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 15px;
}
.anu-wa-avatar .ico { width: 24px; height: 24px; }

/* --- à esquerda: a lista ---------------------------------------------------- */
.anu-wa-lado {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--borda);
  background: var(--papel-2);
}
.anu-wa-lado-topo { flex: none; padding: 14px 14px 10px; border-bottom: 1px solid var(--borda); }
.anu-wa-lado-topo h2 { margin: 0 0 10px; font-family: var(--fonte-titulo); font-size: var(--letra-5); }
.anu-wa-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--papel);
  color: var(--neutro);
}
.anu-wa-busca[hidden] { display: none; }
.anu-wa-busca:focus-within { outline: 2px solid var(--acento); outline-offset: 1px; }
.anu-wa-busca input[type=search] {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--tinta);
}
.anu-wa-busca input[type=search]:focus, .anu-wa-busca input[type=search]:focus-visible { outline: none; box-shadow: none; }
.anu-wa-filtros { margin: 0; }
.anu-wa-filtros a { padding: 0 9px; }
.anu-wa-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.anu-wa-item[hidden] { display: none; }
.anu-wa-item-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borda);
  color: var(--tinta);
  text-decoration: none;
}
.anu-wa-item-link:hover { background: var(--papel-3); }
.anu-wa-item-link:focus-visible { outline-offset: -2px; }
.anu-wa-aqui .anu-wa-item-link { background: var(--papel-4); }
.anu-wa-item-miolo { flex: 1; min-width: 0; display: grid; gap: 3px; }
.anu-wa-item-cabeca { display: flex; align-items: baseline; gap: 8px; }
.anu-wa-item-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.anu-wa-item-hora { flex: none; font-size: 12px; color: var(--neutro); font-variant-numeric: var(--algarismos); }
.anu-wa-item-ultima { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--letra-3); color: var(--tinta-2); }
.anu-wa-autor { flex: none; display: inline-flex; align-items: center; gap: 3px; color: var(--neutro); }
.anu-wa-autor .ico { width: 15px; height: 15px; }
.anu-wa-previa { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A QUE ESPERA RESPOSTA: a última fala é do cliente. Hora e prévia acesas e
   um ponto, como a conversa não lida do WhatsApp. O ponto é marca pequena,
   no verde de ler (`--acento-texto`), e não o verde da decisão. */
.anu-wa-espera .anu-wa-item-hora { color: var(--acento-texto); font-weight: 600; }
.anu-wa-espera .anu-wa-previa { color: var(--tinta); }
.anu-wa-novo { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--acento-texto); }
.anu-wa-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; font-size: 12px; color: var(--neutro); }
.anu-wa-item-meta .etiqueta { padding: 1px 7px; }
.anu-wa-item-origem { min-width: 0; }
.anu-wa-numero { font-variant-numeric: var(--algarismos); }
.anu-wa-item-motivo { font-size: 12px; color: var(--alerta); }
.anu-wa-sem-busca, .anu-wa-lista-vazia { margin: 14px; }
.anu-wa-sem-busca[hidden] { display: none; }

/* AS ETIQUETAS (10/10/2026), como as do WhatsApp Business: o ponto na cor da
   etiqueta e o nome, sobre um veu fraco da mesma cor. O texto e o `--tinta`
   de sempre: a cor nunca carrega a leitura sozinha. */
.anu-wa-tag {
  --anu-wa-tag: var(--anu-wa-tag-cinza);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 20px;
  padding: 1px 8px 1px 7px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--anu-wa-tag) 16%, transparent);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}
.anu-wa-tag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--anu-wa-tag); }
.anu-wa-tag-verde { --anu-wa-tag: var(--anu-wa-tag-verde); }
.anu-wa-tag-azul { --anu-wa-tag: var(--anu-wa-tag-azul); }
.anu-wa-tag-amarelo { --anu-wa-tag: var(--anu-wa-tag-amarelo); }
.anu-wa-tag-vermelho { --anu-wa-tag: var(--anu-wa-tag-vermelho); }
.anu-wa-tag-cinza { --anu-wa-tag: var(--anu-wa-tag-cinza); }
.anu-wa-tag-roxo { --anu-wa-tag: var(--anu-wa-tag-roxo); }
.anu-wa-item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
/* o filtro por etiqueta, embaixo dos filtros de estado */
.anu-wa-filtro-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; font-size: 13px; color: var(--tinta-2); }
.anu-wa-filtro-tag select { flex: 1 1 160px; min-width: 0; max-width: 260px; min-height: 32px; padding: 4px 10px; font-size: 13px; }
.anu-wa-filtro-tag label { margin: 0; }
.anu-wa-filtro-tag button[hidden] { display: none; }

/* --- à direita: a conversa -------------------------------------------------- */
.anu-wa-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background-color: var(--anu-wa-fundo);
}
.anu-wa-chat-cabeca {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--borda);
  background: var(--papel-2);
}
/* A SETA DE VOLTAR SÓ EXISTE NO CELULAR: no computador a lista está ao lado. */
.anu-wa-volta { display: none; }
.anu-wa-chat-quem { flex: 1 1 220px; min-width: 0; }
.anu-wa-chat-quem h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--fonte-titulo); font-size: var(--letra-4); }
.anu-wa-chat-quem p { margin: 2px 0 0; font-size: 12.5px; color: var(--neutro); }
.anu-wa-chat-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.anu-wa-chat-acoes form { margin: 0; }
.anu-wa-chat-etiquetas { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.anu-wa-venda { position: relative; }
.anu-wa-venda > summary { list-style: none; cursor: pointer; }
.anu-wa-venda > summary::-webkit-details-marker { display: none; }
.anu-wa-venda-caixa {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  width: 290px;
  padding: 12px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-2);
  background: var(--papel-3);
  box-shadow: var(--sombra-pop);
}
.anu-wa-venda-caixa form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.anu-wa-venda-caixa .anu-rotulo { width: 100%; margin: 0; }
.anu-wa-venda-caixa .texto-mini { margin: 10px 0 0; }
.anu-wa-vendida { margin: 0; }
/* a faixa das etiquetas da conversa aberta, logo abaixo da cabeca */
.anu-wa-chat-tags {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--borda);
  background: var(--papel-2);
  font-size: 12.5px;
}
.anu-wa-chat-tags-nome { color: var(--neutro); }
.anu-wa-sem-tag { color: var(--neutro); }
.anu-wa-tags { display: contents; list-style: none; margin: 0; padding: 0; }
.anu-wa-tags .anu-wa-tag { padding-right: 2px; }
.anu-wa-tags form { display: inline-flex; margin: 0; }
.anu-wa-tag-tirar {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-2);
}
.anu-wa-tag-tirar:hover { background: color-mix(in srgb, var(--anu-wa-tag) 28%, transparent); color: var(--tinta); }
.anu-wa-tag-tirar .ico { width: 12px; height: 12px; }
.anu-wa-tag-mais { position: relative; }
.anu-wa-tag-mais > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px; font-size: 12.5px; }
.anu-wa-tag-mais > summary::-webkit-details-marker { display: none; }
.anu-wa-tag-mais > summary .ico { width: 13px; height: 13px; }
.anu-wa-tag-caixa {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  display: grid;
  gap: 10px;
  width: 300px;
  padding: 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-2);
  background: var(--papel-3);
  box-shadow: var(--sombra-pop);
}
.anu-wa-tag-opcoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.anu-wa-tag-opcoes .anu-wa-tag { min-height: 26px; padding: 3px 10px 3px 8px; cursor: pointer; }
.anu-wa-tag-opcoes .anu-wa-tag:hover { background: color-mix(in srgb, var(--anu-wa-tag) 30%, transparent); }
.anu-wa-tag-nova { display: flex; gap: 6px; margin: 0; }
.anu-wa-tag-nova input { flex: 1; min-width: 0; min-height: 32px; padding: 4px 10px; font-size: 13px; }
.anu-wa-video { display: inline-flex; }
.anu-wa-aviso {
  flex: none;
  margin: 0;
  padding: 8px 16px;
  border-bottom: 1px solid var(--borda);
  background: var(--papel-2);
  font-size: 13px;
  color: var(--tinta-2);
}
.anu-wa-aviso-dono { background: var(--alerta-fraco); color: var(--tinta); }

/* o fundo da conversa: o tom do WhatsApp e uma trama de pontos bem fraca */
.anu-wa-fundo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px clamp(12px, 5%, 64px) 18px;
  background-image: radial-gradient(var(--anu-wa-pinta) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
}
.anu-wa-fundo:focus-visible { outline-offset: -2px; }
.anu-wa-historico { display: flex; flex-direction: column; gap: 3px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.anu-wa-dia { align-self: center; margin: 12px 0 8px; text-align: center; }
.anu-wa-dia span {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--papel-2);
  font-size: 12px;
  color: var(--tinta-2);
}
.anu-wa-fala {
  max-width: min(560px, 78%);
  padding: 6px 10px 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--anu-wa-balao);
  color: var(--tinta);
  scroll-margin-bottom: 16px;
}
.anu-wa-de-cliente { align-self: flex-start; border-top-left-radius: 3px; }
.anu-wa-de-robo, .anu-wa-de-dono { align-self: flex-end; border-top-right-radius: 3px; background: var(--anu-wa-balao-meu); }
/* quem fala muda: um respiro a mais, como no WhatsApp */
.anu-wa-de-cliente + .anu-wa-de-robo, .anu-wa-de-cliente + .anu-wa-de-dono,
.anu-wa-de-robo + .anu-wa-de-cliente, .anu-wa-de-dono + .anu-wa-de-cliente { margin-top: 8px; }
.anu-wa-quem { display: block; margin-bottom: 1px; font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.anu-wa-de-robo .anu-wa-quem { color: var(--acento-texto); }
.anu-wa-texto { margin: 0; overflow-wrap: anywhere; }
.anu-wa-midia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--papel-4);
  font-size: 13px;
  color: var(--tinta-2);
}
.anu-wa-midia .ico { width: 15px; height: 15px; }
/* o audio do cliente transcrito (10/10/2026): o microfone e o que ela falou */
.anu-wa-audio { margin: 0; overflow-wrap: anywhere; }
.anu-wa-audio .ico { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--tinta-2); }
.anu-wa-hora {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--tinta-2);
  font-variant-numeric: var(--algarismos);
}
.anu-wa-tique { width: 16px; height: 16px; }
/* O QUE O ROBÔ ESCREVEU E NÃO SAIU: sem o balão cheio, com o fio vermelho, o
   texto riscado e o motivo -- nunca parece uma mensagem que o cliente leu. */
.anu-wa-fala.anu-wa-nao-saiu { background: transparent; border-color: var(--falha-fio); }
.anu-wa-nao-saiu .anu-wa-texto { text-decoration: line-through; color: var(--tinta-2); }
.anu-wa-barrada { margin: 4px 0 0; font-size: 12.5px; color: var(--falha); }

/* a barra de escrever, presa embaixo da conversa */
.anu-wa-compor {
  flex: none;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--borda);
  background: var(--papel-2);
}
.anu-wa-atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.anu-wa-atalhos .ico { width: 15px; height: 15px; }
.anu-wa-checkout { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.anu-wa-checkout .anu-rotulo { margin: 0 2px 0 0; }
.anu-wa-barra { display: flex; align-items: flex-end; gap: 8px; }
.anu-wa-barra textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 168px;
  padding: 11px 16px;
  border-radius: 22px;
  background: var(--papel);
  line-height: 1.4;
  resize: none;
}
.anu-wa-enviar { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 22px; }
.anu-wa-dica { margin: 0; font-size: 12px; color: var(--neutro); }
.anu-wa-fechada {
  flex: none;
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--borda);
  background: var(--papel-2);
  text-align: center;
  font-size: 13px;
  color: var(--tinta-2);
}

/* --- à direita, sem conversa aberta: a conexão e o robô ---------------------- */
.anu-wa-chat.anu-wa-ajustes { display: block; overflow-y: auto; padding: 16px; background: var(--papel); }
.anu-wa-ajustes-dica { margin: 0 0 14px; font-size: var(--letra-3); color: var(--neutro); }
.anu-wa-sinal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: var(--espaco-3); }
.anu-wa-sinal p { margin: 0; color: var(--tinta-2); }
.anu-wa-sinal-fora p { color: var(--tinta); }
.anu-wa-conexao, .anu-wa-robo { min-width: 0; }
.anu-wa-conexao code { font-size: 12px; color: var(--tinta-2); }
/* O QR PRECISA DE FUNDO BRANCO E MARGEM CLARA para o celular ler, nos dois
   temas: no escuro, um QR sem a moldura clara não é lido. */
.anu-wa-qr { margin: 0; display: grid; gap: var(--espaco-3); justify-items: start; }
.anu-wa-qr img {
  display: block;
  width: 264px;
  max-width: 100%;
  height: auto;
  background: #ffffff;
  padding: 14px;
  border-radius: var(--raio-2);
  border: 1px solid var(--borda);
  image-rendering: pixelated;
}
.anu-wa-qr figcaption { font-size: var(--letra-2); color: var(--tinta-2); max-width: 44ch; line-height: 1.5; }
.anu-wa-desconectar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.anu-wa-modo fieldset { border: 0; margin: 0 0 var(--espaco-3); padding: 0; display: grid; gap: 8px; }
.anu-wa-opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel);
  cursor: pointer;
}
.anu-wa-opcao:has(input:checked) { border-color: var(--borda-forte); background: var(--papel-3); }
.anu-wa-opcao input { margin-top: 3px; }
.anu-wa-opcao b { display: block; color: var(--tinta); }
.anu-wa-opcao small { display: block; color: var(--neutro); font-size: var(--letra-2); }
.anu-wa-teste, .anu-wa-teto, .anu-wa-nunca { margin-top: var(--espaco-5); padding-top: var(--espaco-4); border-top: 1px solid var(--borda); }
.anu-wa-numeros { list-style: none; margin: 0 0 var(--espaco-3); padding: 0; display: grid; gap: 6px; }
.anu-wa-numeros li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.anu-wa-numeros form { margin: 0; }
.anu-wa-linha-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--espaco-2); }
.anu-wa-linha-campo .anu-rotulo { width: 100%; margin: 0; }
.anu-wa-linha-campo input[type=text] { flex: 1 1 160px; min-width: 0; max-width: 260px; }
.anu-wa-nunca h3 { font-family: var(--fonte-titulo); font-size: var(--letra-4); margin: 0 0 var(--espaco-2); }
.anu-wa-nunca ul { margin: 0; padding-left: 1.1em; display: grid; gap: 5px; color: var(--tinta-2); font-size: var(--letra-3); }

/* JANELA ESTREITA E CELULAR: UM PAINEL POR VEZ, como o WhatsApp do telefone.
   Os dois painéis cravam 300px + a conversa, e abaixo de 1000px de janela a
   conversa ficaria com menos de 380px (MEDIDO: o texto de `main` a 721px
   tem 397px). Sem conversa aberta: a lista, e a conexão e o robô embaixo
   dela. Com uma aberta: só a conversa, e a seta do alto dela volta para a
   lista -- que está inteira na tela de antes (por isso a lista pode sair
   aqui: nada some sem caminho de volta, pedido do dono de 09/10/2026). A
   cabeça gruda no alto e a barra de escrever gruda embaixo (no celular,
   logo acima da barra das abas). A página rola inteira, sem altura presa,
   e a conversa abre no fim, na mensagem mais nova. */
@media (max-width: 1000px) {
  .anu-wa-app { display: block; height: auto; overflow: visible; }
  .anu-wa-lado { border-right: 0; }
  .anu-wa-lista { overflow: visible; }
  .anu-wa-com-conversa .anu-wa-lado { display: none; }
  .anu-wa-volta {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: -8px;
    border-radius: 50%;
    color: var(--tinta);
  }
  .anu-wa-volta .ico { width: 22px; height: 22px; }
  .anu-wa-chat-cabeca { position: sticky; top: var(--topo-altura); z-index: 2; }
  .anu-wa-chat-quem { flex: 1 1 0; }
  .anu-wa-chat-acoes { width: 100%; justify-content: flex-start; gap: 6px; }
  .anu-wa-venda-caixa { right: auto; left: 0; width: min(290px, calc(100vw - 32px)); }
  .anu-wa-fundo { overflow: visible; }
  .anu-wa-fala { scroll-margin-bottom: calc(150px + var(--rodape-altura)); }
  .anu-wa-compor {
    position: sticky;
    bottom: calc(var(--rodape-altura) + env(safe-area-inset-bottom, 0px));
    z-index: 2;
  }
  /* a barra de escrever encosta no pé da janela (no celular, na barra das
     abas): o pé de `main` não deixa vão embaixo dela */
  main:has(.anu-wa-com-conversa) { padding-bottom: calc(var(--rodape-altura) + env(safe-area-inset-bottom, 0px)); }
}
/* NO CELULAR a tela vai de borda a borda, e os botões da cabeça e da barra
   de escrever encolhem: a conversa precisa da altura. */
@media (max-width: 720px) {
  .anu-wa-app {
    margin: 0 calc(-1 * var(--margem-lateral));
    border: 0;
    border-top: 1px solid var(--borda);
    border-radius: 0;
  }
  .anu-wa-chat-cabeca { padding: 8px var(--margem-lateral); }
  .anu-wa-chat-cabeca .anu-wa-avatar { width: 38px; height: 38px; font-size: 13px; }
  .anu-wa-chat-quem p { font-size: 12px; }
  .anu-wa-chat-acoes button, .anu-wa-venda > summary, .anu-wa-atalhos button { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
  .anu-wa-aviso { padding: 8px var(--margem-lateral); }
  .anu-wa-chat-tags { padding: 6px var(--margem-lateral); }
  .anu-wa-tag-caixa { width: min(300px, calc(100vw - 32px)); }
  .anu-wa-fundo { padding: 10px 10px 14px; }
  .anu-wa-fala { max-width: 86%; }
  .anu-wa-compor { gap: 6px; padding: 8px 10px; }
  .anu-wa-checkout { margin-left: 0; }
  .anu-wa-chat.anu-wa-ajustes { padding: 16px var(--margem-lateral); }
  .anu-wa-item-link { padding: 11px var(--margem-lateral); }
  .anu-wa-lado-topo { padding: 12px var(--margem-lateral) 10px; }
  .anu-wa-qr img { width: 232px; }
}

/* --- Anúncios › WhatsApp › Funil, a caixa de trabalho (v2, 15/10/2026)
   O MOCKUP APROVADO pelo dono em 15/10 à noite ("sobe a aba de funil"): a
   tela abre dizendo quem chamar. No alto a frase e a leitura do Claude; a
   faixa fina do funil (tocar numa etapa filtra a lista); três abas (Para
   fazer, Por que não compram, Consertar o robô); a lista de um lado e o
   painel do item aberto do outro. O prefixo `anu-fn-` é desta tela só.

   OS TONS SÃO TOKENS DESTA TELA, declarados em `.anu-fn` e trocados no tema
   claro logo abaixo: o balão da conversa (o dela e o seu), o fundo da
   conversa e o fundo leve das linhas do lote.

   SEM JAVASCRIPT A TELA FUNCIONA: cada linha é um link para o painel dela
   (`#p-...`) e o `:target` mostra o painel; abas, etapas, anúncios e período
   são links com o filtro no endereço; as ações são formulários POST; o "Já
   pagou" e o "Quando der" são `<details>`. O script só melhora: abre sem
   pular, filtra sem recarregar, copia a mensagem e marca o lote na hora.

   O VERDE CHEIO: no painel, só o "Abrir a conversa" (um link). O "Registrar a
   venda" mora dentro do "Já pagou" fechado. A barra de cada etapa da faixa é
   medida, como a barra de gasto (test_direcao_b, VERDE_DE_FUNDO_PERMITIDO).

   A LARGURA: abaixo de 1100px o painel vira gaveta por cima da lista; no
   telefone ela ocupa a tela, com a barra de Copiar e Abrir presa embaixo.
   Nenhuma grade com coluna cravada larga: a faixa apertada não precisa de
   conserto. O que some no telefone é duplicata, e está na LISTA_N3. */
.anu-fn {
  --anu-fn-balao: #1F1F22;
  --anu-fn-balao-meu: #1C3A2A;
  --anu-fn-chat-fundo: #101012;
  --anu-fn-lote: rgba(160, 200, 255, .06);
  --anu-fn-painel-topo: calc(var(--topo-altura) + 16px);
}
:root[data-tema="claro"] .anu-fn {
  --anu-fn-balao: #FFFFFF;
  --anu-fn-balao-meu: #D9FDD3;
  --anu-fn-chat-fundo: #ECE8DF;
  --anu-fn-lote: rgba(40, 80, 160, .045);
}
.anu-fn [hidden] { display: none !important; }
.anu-fn summary { list-style: none; cursor: pointer; }
.anu-fn summary::-webkit-details-marker { display: none; }
.anu-fn-form { margin: 0; }

/* a cabeça: a frase de quem espera e a leitura do Claude */
.anu-fn-cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.anu-fn-cabeca-texto { min-width: 0; }
.anu-fn-titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.anu-fn-cabeca .titulo-tela { margin: 0; }
.anu-fn-analisar-cel { display: none; }
.anu-fn-sub { margin: 8px 0 0; color: var(--tinta-2); font-size: 15.5px; max-width: 54ch; line-height: 1.45; }
.anu-fn-sub b { color: var(--tinta); }
.anu-fn-cabeca-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.anu-fn-meta { margin: 0; font-size: 12.5px; color: var(--neutro); text-align: right; line-height: 1.45; }
.anu-fn-meta b { color: var(--tinta-2); font-weight: 600; }
.anu-fn-rodape-meta { display: none; }
.anu-fn-andando {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--alerta-fio);
  border-radius: var(--raio-1);
  background: var(--alerta-fraco);
  color: var(--tinta);
  font-size: 14px;
}
.anu-fn-pulso { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--alerta); animation: anu-fn-pulsa 1.4s ease-in-out infinite; }
@keyframes anu-fn-pulsa { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .anu-fn-pulso { animation: none; } }
.anu-fn-falhou { display: flex; gap: 7px; margin: -8px 0 14px; font-size: 13.5px; line-height: 1.4; color: var(--falha); }
.anu-fn-falhou .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* a faixa do funil: seis números numa linha, a perda e o dinheiro */
.anu-fn-faixa {
  margin: 0 0 18px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
.anu-fn-faixa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  padding: 10px 14px 0;
}
.anu-fn-faixa-titulo { margin: 0; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.anu-fn-dica { color: var(--neutro); font-weight: 500; }
.anu-fn-periodo {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
}
.anu-fn-periodo a {
  padding: 3px 10px;
  border-radius: var(--raio-pilula);
  font-size: 12.5px;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
}
.anu-fn-periodo a[aria-current] { background: var(--papel-4); color: var(--tinta); font-weight: 600; }
.anu-fn-degraus {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 6px;
  list-style: none;
}
.anu-fn-degraus li { min-width: 0; position: relative; }
.anu-fn-degraus li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 17px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--borda-forte);
  border-right: 1.5px solid var(--borda-forte);
  transform: rotate(45deg);
  pointer-events: none;
}
.anu-fn-degrau {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 8px 10px 10px;
  border-radius: var(--raio-1);
  color: var(--tinta);
  text-decoration: none;
}
.anu-fn-degrau:hover { background: var(--papel-3); }
.anu-fn-degrau[aria-current] { background: var(--papel-4); box-shadow: inset 0 0 0 1px var(--acento); }
.anu-fn-num {
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-stretch: var(--largura-numero);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.05;
  color: var(--tinta);
}
.anu-fn-rot { font-size: 13px; color: var(--tinta-2); white-space: nowrap; }
.anu-fn-parou { font-size: 12px; color: var(--neutro); font-variant-numeric: var(--algarismos); white-space: nowrap; }
.anu-fn-parou.anu-fn-perde { color: var(--falha); font-weight: 700; }
.anu-fn-parou.anu-fn-dinheiro { color: var(--acento-texto); font-weight: 700; }
.anu-fn-barra {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--papel-4);
  overflow: hidden;
}
.anu-fn-barra i { display: flex; justify-content: flex-end; height: 100%; border-radius: 2px; background: var(--acento); }
.anu-fn-barra b { display: block; height: 100%; }
.anu-fn-barra b.anu-fn-perde {
  background: repeating-linear-gradient(135deg, var(--falha) 0 3px, transparent 3px 5px), var(--falha-fraco);
}
.anu-fn-queda {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 9px 14px 11px;
  border-top: 1px solid var(--borda);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--tinta-2);
}
.anu-fn-queda > .ico { flex: none; width: 16px; height: 16px; color: var(--falha); }
.anu-fn-queda b { color: var(--falha); font-weight: 700; }
.anu-fn-queda-txt { flex: 1 1 180px; min-width: 0; }
.anu-fn-queda-ver {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--acento-texto);
  text-decoration: none;
  white-space: nowrap;
}
.anu-fn-queda-ver .ico { width: 14px; height: 14px; }

/* as abas e o filtro de anúncio */
.anu-fn-abas-linha {
  scroll-margin-top: calc(var(--topo-altura) + 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--borda);
}
.anu-fn-abas { display: flex; flex-wrap: wrap; gap: 2px; }
.anu-fn-aba {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 10px 12px;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  font-size: 15px;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
}
.anu-fn-aba:hover { color: var(--tinta); }
.anu-fn-aba[aria-current] { color: var(--tinta); border-bottom-color: var(--acento); }
.anu-fn-conta {
  padding: 1px 7px;
  border-radius: var(--raio-pilula);
  background: var(--papel-3);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: var(--algarismos);
  color: var(--tinta-2);
}
.anu-fn-conta.anu-fn-conta-falha { background: var(--falha-fraco); color: var(--falha); }
.anu-fn-filtros { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 0 8px; }
.anu-fn-filtros-rotulo { margin-right: 2px; font-size: 12.5px; color: var(--neutro); }
.anu-fn-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-2);
  text-decoration: none;
}
.anu-fn-chip:hover { border-color: var(--borda-forte); color: var(--tinta); }
.anu-fn-chip[aria-current] { background: var(--papel-4); border-color: var(--borda-forte); color: var(--tinta); }
.anu-fn-etapa {
  display: flex;
  align-items: center;
  gap: 6px 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--tinta-2);
}
.anu-fn-etapa-limpa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 10px 4px 12px;
  border-radius: var(--raio-pilula);
  background: var(--acento-fraco);
  font-size: 13px;
  font-weight: 700;
  color: var(--acento-texto);
  text-decoration: none;
}
.anu-fn-etapa-limpa .ico { width: 14px; height: 14px; }

.anu-fn-etapa-nome { white-space: nowrap; }
.anu-fn-etapa-conta { min-width: 0; }
/* o corpo: a lista e o painel */
.anu-fn-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 20px;
  align-items: start;
}
.anu-fn-listas { display: grid; gap: 16px; align-content: start; min-width: 0; }
.anu-fn-lista {
  scroll-margin-top: calc(var(--topo-altura) + 12px);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
  overflow: hidden;
}
.anu-fn-grupo { margin: 0; padding: 0; list-style: none; }
.anu-fn-grupo-cabeca {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--borda);
  background: var(--papel);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tinta-2);
}
.anu-fn-grupo + .anu-fn-grupo .anu-fn-grupo-cabeca,
.anu-fn-grupo + .anu-fn-depois > .anu-fn-grupo-cabeca { border-top: 1px solid var(--borda); }
.anu-fn-grupo-conta { font-variant-numeric: var(--algarismos); }
.anu-fn-grupo-dica { margin-left: auto; font-weight: 500; color: var(--neutro); text-align: right; }
.anu-fn-depois:not([open]) > .anu-fn-grupo-cabeca { border-bottom: 0; }
.anu-fn-depois > .anu-fn-grupo-cabeca:hover { background: var(--papel-3); }
.anu-fn-mostrar { color: var(--acento-texto); font-weight: 700; }
.anu-fn-esconder { display: none; color: var(--acento-texto); font-weight: 700; }
.anu-fn-depois[open] .anu-fn-mostrar { display: none; }
.anu-fn-depois[open] .anu-fn-esconder { display: inline; }
.anu-fn-depois > .anu-fn-grupo-cabeca .ico { width: 15px; height: 15px; transition: transform 160ms ease; }
.anu-fn-depois[open] > .anu-fn-grupo-cabeca .ico { transform: rotate(180deg); }
.anu-fn-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--neutro); }
.anu-fn-ponto.anu-fn-ponto-agora { background: var(--falha); }
.anu-fn-ponto.anu-fn-ponto-hoje { background: var(--alerta); }
.anu-fn-ponto.anu-fn-ponto-lote { background: transparent; box-shadow: inset 0 0 0 2px var(--tinta-2); }

.anu-fn-pessoa { margin: 0; }
.anu-fn-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--borda);
  color: var(--tinta);
  text-decoration: none;
}
.anu-fn-grupo-cabeca + li > .anu-fn-item { border-top: 0; }
.anu-fn-item:hover { background: var(--papel-3); }
.anu-fn-item[aria-current="true"] { background: var(--papel-4); }
.anu-fn-lote > .anu-fn-item { background: var(--anu-fn-lote); }
.anu-fn-lote > .anu-fn-item:hover { background: var(--papel-3); }
.anu-fn-lote > .anu-fn-item[aria-current="true"] { background: var(--papel-4); }
.anu-fn-av {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--papel-4);
  font-weight: 700;
  font-size: 15px;
  color: var(--tinta);
  line-height: 1;
}
.anu-fn-av .ico { width: 18px; height: 18px; color: var(--tinta-2); }
.anu-fn-item[aria-current="true"] .anu-fn-av { background: var(--papel-3); }
.anu-fn-av.anu-fn-av-lote {
  border-radius: 10px;
  background: var(--alerta-fraco);
  color: var(--alerta);
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-stretch: var(--largura-numero);
}
.anu-fn-av.anu-fn-av-lote.anu-fn-av-falha { background: var(--falha-fraco); color: var(--falha); }
.anu-fn-av.anu-fn-av-lote.anu-fn-av-neutro { background: var(--papel-4); color: var(--tinta-2); }
.anu-fn-av.anu-fn-av-lote.anu-fn-av-ok { background: var(--acento-fraco); color: var(--acento-texto); }
.anu-fn-lote .anu-fn-av.anu-fn-av-lote { background: transparent; box-shadow: inset 0 0 0 1.5px var(--borda-forte); color: var(--tinta); }
.anu-fn-it-corpo { min-width: 0; }
.anu-fn-it-topo { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; line-height: 1.3; }
.anu-fn-it-nome { font-weight: 700; font-size: 15px; }
.anu-fn-it-final { font-size: 12.5px; color: var(--neutro); font-variant-numeric: var(--algarismos); white-space: nowrap; }
.anu-fn-it-motivo {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tinta-2);
}
.anu-fn-it-acao { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 13.5px; font-weight: 600; color: var(--acento-texto); line-height: 1.3; }
.anu-fn-it-acao .ico { flex: none; width: 14px; height: 14px; }
.anu-fn-it-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.anu-fn-it-tempo { font-size: 12.5px; color: var(--neutro); font-variant-numeric: var(--algarismos); white-space: nowrap; }
.anu-fn-pilha { display: inline-flex; padding-left: 4px; }
.anu-fn-pilha i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--papel-4);
  box-shadow: 0 0 0 2px var(--papel-2);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tinta-2);
}
.anu-fn-pilha i.anu-fn-pilha-mais { width: auto; min-width: 20px; padding: 0 5px; border-radius: 10px; font-variant-numeric: var(--algarismos); }
/* a mensagem na propria linha: so na primeira pessoa, abaixo de 1100px */
.anu-fn-it-msg { display: none; }
.anu-fn-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--raio-selo);
  background: var(--papel-3);
  box-shadow: inset 0 0 0 1px var(--borda);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 17px;
  color: var(--tinta-2);
  white-space: nowrap;
}
.anu-fn-tag.anu-fn-voce { background: var(--alerta-fraco); box-shadow: inset 0 0 0 1px var(--alerta-fio); color: var(--alerta); }
.anu-fn-tag.anu-fn-tag-falha { background: var(--falha-fraco); box-shadow: inset 0 0 0 1px var(--falha-fio); color: var(--falha); }
.anu-fn-tag.anu-fn-tag-acento { background: var(--acento-fraco); box-shadow: none; color: var(--acento-texto); }
.anu-fn-vazio { margin: 0; padding: 28px 16px; text-align: center; color: var(--neutro); font-size: 14px; }
.anu-fn-resumo {
  padding: 14px 16px;
  border-bottom: 1px solid var(--borda);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta);
}
.anu-fn-resumo .anu-fn-rotulo { margin-bottom: 4px; }
.anu-fn-modo { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--borda); font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.anu-fn-modo b { color: var(--tinta); }

/* o painel do item aberto */
.anu-fn-painel {
  position: sticky;
  top: var(--anu-fn-painel-topo);
  max-height: calc(100vh - var(--anu-fn-painel-topo) - 16px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--borda);
  border-radius: var(--raio-palco);
  background: var(--papel-2);
}
.anu-fn-p { display: none; }
.anu-fn-p.anu-fn-ativo { display: block; }
.anu-fn-p:target { display: block; }
.anu-fn-painel:has(.anu-fn-p:target) .anu-fn-p.anu-fn-ativo:not(:target) { display: none; }
.anu-fn-p-cabeca { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; }
.anu-fn-p-cabeca .anu-fn-av { flex: none; width: 46px; height: 46px; font-size: 18px; }
.anu-fn-p-quem { min-width: 0; flex: 1; }
.anu-fn-p-nome { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.anu-fn-p-linha { margin: 3px 0 0; font-size: 13px; color: var(--neutro); font-variant-numeric: var(--algarismos); }
.anu-fn-p-selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.anu-fn-p-volta { display: none; }
.anu-fn-p-sec { padding: 16px 20px; border-top: 1px solid var(--borda); }
.anu-fn-p-sec.anu-fn-faca { border-top: 0; padding-top: 4px; }
.anu-fn-rotulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--neutro);
}
.anu-fn-rotulo .ico { width: 15px; height: 15px; }
.anu-fn-p-acao { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.35; color: var(--tinta); text-wrap: pretty; }
.anu-fn-nota { display: flex; gap: 6px; margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--alerta); }
.anu-fn-nota .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.anu-fn-nota.anu-fn-nota-neutra { color: var(--tinta-2); }
.anu-fn-nota.anu-fn-nota-ok { color: var(--acento-texto); }
.anu-fn-msg {
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--anu-fn-chat-fundo);
}
.anu-fn-msg-de { margin: 0 2px 6px; font-size: 12px; color: var(--neutro); text-align: right; }
.anu-fn-msg-balao {
  max-width: 94%;
  margin: 0 0 0 auto;
  padding: 9px 12px;
  border-radius: 12px 3px 12px 12px;
  background: var(--anu-fn-balao-meu);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.anu-fn-msg-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.anu-fn-msg-acoes .botao.forte { flex: 1 1 180px; }
.anu-fn-msg-acoes button { flex: 0 1 auto; }
.anu-fn-texto { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tinta); }
.anu-fn-texto + .anu-fn-texto { margin-top: 6px; }
.anu-fn-texto.anu-fn-fraco { color: var(--tinta-2); }
.anu-fn-objs { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.anu-fn-objs li { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; font-size: 14px; line-height: 1.4; }
.anu-fn-objs q { color: var(--tinta); font-style: italic; overflow-wrap: anywhere; }
.anu-fn-erro { display: flex; gap: 7px; margin: 10px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--falha); }
.anu-fn-erro > .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.anu-fn-chat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--anu-fn-chat-fundo);
}
.anu-fn-fala {
  align-self: flex-start;
  max-width: 86%;
  margin: 0;
  padding: 7px 10px 5px;
  border-radius: 3px 12px 12px 12px;
  background: var(--anu-fn-balao);
  font-size: 14px;
  line-height: 1.4;
  color: var(--tinta);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.anu-fn-fala.anu-fn-meu { align-self: flex-end; border-radius: 12px 3px 12px 12px; background: var(--anu-fn-balao-meu); }
.anu-fn-fala small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--neutro); text-align: right; white-space: normal; }
.anu-fn-ver-tudo { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--acento-texto); text-decoration: none; }
.anu-fn-ver-tudo .ico { width: 15px; height: 15px; }
.anu-fn-pessoas { margin: 4px 0 0; padding: 0; list-style: none; }
.anu-fn-pessoas li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--borda);
}
.anu-fn-pessoas li:first-child { border-top: 0; }
.anu-fn-pessoas .anu-fn-av { width: 30px; height: 30px; font-size: 12.5px; }
.anu-fn-pessoas .anu-fn-av .ico { width: 15px; height: 15px; }
.anu-fn-quem { min-width: 0; font-size: 14px; line-height: 1.3; }
.anu-fn-quem b { font-weight: 700; }
.anu-fn-quem span { display: block; font-size: 12.5px; color: var(--neutro); }
/* o telefone fica na linha do nome, como no mockup (revisao de 15/10/2026) */
.anu-fn-quem .sem-quebra { display: inline; font-size: inherit; color: inherit; }
.anu-fn-pessoas a { font-size: 13.5px; font-weight: 600; color: var(--acento-texto); text-decoration: none; white-space: nowrap; }
.anu-fn-pessoas li.anu-fn-mandou .anu-fn-quem { opacity: .5; text-decoration: line-through; }
.anu-fn-marcar { width: 18px; height: 18px; margin: 0; accent-color: var(--acento); }
.anu-fn-progresso { margin: 0 0 4px; font-size: 13px; color: var(--neutro); }
.anu-fn-progresso b { color: var(--tinta); font-variant-numeric: var(--algarismos); }
.anu-fn-salvar { margin-top: 10px; }
.anu-fn-pedido {
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--papel);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.anu-fn-passos { display: grid; gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.anu-fn-passo-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 14.5px; font-weight: 700; color: var(--tinta); }
.anu-fn-passo-nota { margin: 2px 0 6px; font-size: 13px; color: var(--neutro); }
.anu-fn-passos .anu-fn-chat { padding: 8px; }
.anu-fn-passos .anu-fn-fala { max-width: 92%; }
.anu-fn-p-pe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--borda); }
.anu-fn-p-pe .ico { width: 16px; height: 16px; }
.anu-fn-p-barra { display: none; }
/* o "Ja pagou": um <details> que pede o plano antes de registrar. Aberto,
   ele desce para uma fileira inteira, com a caixa embaixo */
.anu-fn-pagou[open] { flex: 1 1 100%; }
.anu-fn-pagou > summary { display: inline-flex; }
.anu-fn-pagou[open] > summary { background: var(--papel-4); color: var(--tinta); }
/* com o script, a caixa sai do <details> e desce para a fileira de baixo: os
   tres botoes ficam na mesma linha, como no mockup (revisao de 15/10/2026) */
.anu-fn-pagou.anu-fn-pagou-aberto > summary { background: var(--papel-4); color: var(--tinta); }
.anu-fn-pagou-caixa.anu-fn-pagou-solta { flex: 1 1 100%; margin-top: 2px; }
.anu-fn-pagou-caixa {
  margin: 10px 0 0;
  padding: 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-2);
  background: var(--papel);
}
.anu-fn-pagou-caixa .anu-fn-rotulo { color: var(--tinta); }
.anu-fn-planos { display: grid; gap: 6px; margin: 10px 0 12px; padding: 0; border: 0; }
.anu-fn-planos label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-1);
  font-size: 14px;
  cursor: pointer;
}
.anu-fn-planos label:has(input:checked) { border-color: var(--acento); background: var(--acento-fraco); }
.anu-fn-planos input { margin: 0; accent-color: var(--acento); }
.anu-fn-pagou-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.anu-fn-pagou-acoes .ico { width: 16px; height: 16px; }
.anu-fn-veu { display: none; }
/* o recado de "copiada" (so com JavaScript) */
.anu-fn-recado {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--rodape-altura));
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: var(--raio-botao);
  background: var(--tinta);
  color: var(--papel);
  font-size: 14px;
  font-weight: 600;
  transform: translateX(-50%);
  box-shadow: var(--sombra-pop);
}
.anu-fn-recado-texto { min-width: 0; }
/* o "Desfazer" do recado do "Ja fiz" e do "Lembrar" */
.anu-fn-recado .anu-fn-desfazer {
  flex: none;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.anu-fn-recado .anu-fn-desfazer:hover { background: transparent; }
/* a linha feita sai da lista (o script tira; o Desfazer devolve) */
li.anu-fn-feito { display: none; }
/* sem script, o painel aberto pelo link (#p-...) tira o destaque da linha que
   o servidor escolheu (revisao de 15/10/2026) */
.anu-fn:has(.anu-fn-p:target) .anu-fn-item[aria-current="true"] { background: transparent; }
.anu-fn:has(.anu-fn-p:target) .anu-fn-lote > .anu-fn-item[aria-current="true"] { background: var(--anu-fn-lote); }
.anu-fn:has(.anu-fn-p:target) .anu-fn-item[aria-current="true"] .anu-fn-av:not(.anu-fn-av-lote) { background: var(--papel-4); }
.anu-fn-curto { display: none; }

/* TELA MEDIA: o painel vira gaveta por cima da lista, e a primeira pessoa da
   lista traz a mensagem pronta na propria linha */
@media (max-width: 1100px) {
  .anu-fn-corpo { grid-template-columns: minmax(0, 1fr); }
  .anu-fn-painel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: min(540px, 100%);
    max-height: none;
    border-radius: 0;
    border-width: 0 0 0 1px;
    box-shadow: var(--sombra-pop);
    transform: translateX(104%);
    visibility: hidden;
    transition: transform 200ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 200ms;
  }
  body.anu-fn-aberto .anu-fn-painel,
  .anu-fn-painel:has(.anu-fn-p:target) {
    transform: none;
    visibility: visible;
    transition: transform 200ms cubic-bezier(.2, .7, .2, 1);
  }
  .anu-fn-veu { position: fixed; inset: 0; z-index: 59; background: var(--veu); }
  body.anu-fn-aberto .anu-fn-veu { display: block; }
  body.anu-fn-aberto { overflow: hidden; }
  .anu-fn-p-volta { display: flex; align-items: center; padding: 8px 12px 0; }
  .anu-fn-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 10px 6px 6px;
    color: var(--tinta-2);
    font-weight: 600;
    text-decoration: none;
  }
  .anu-fn-voltar .ico { width: 17px; height: 17px; }
  .anu-fn-item[aria-current="true"] { background: transparent; }
  .anu-fn-item[aria-current="true"] .anu-fn-av { background: var(--papel-4); }
  .anu-fn-proxima > .anu-fn-item { padding-bottom: 6px; }
  .anu-fn-proxima > .anu-fn-it-msg { display: block; padding: 0 16px 14px 66px; }
  .anu-fn-it-msg-de { margin: 0 0 5px; font-size: 12px; font-weight: 600; color: var(--neutro); }
  .anu-fn-it-balao {
    display: -webkit-box;
    margin: 0;
    padding: 8px 11px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    border-radius: 3px 12px 12px 12px;
    background: var(--anu-fn-balao-meu);
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--tinta);
  }
  .anu-fn-it-msg-acoes { display: flex; gap: 8px; margin-top: 10px; }
  .anu-fn-it-msg-acoes .botao.forte { flex: 1; }
  .anu-fn-it-msg-acoes .ico { width: 16px; height: 16px; }
}

/* NO TELEFONE: a faixa numa linha so (seis numeros, a perda embaixo de cada
   um), a abertura da lista ja com a mensagem pronta, e o painel em tela
   cheia com a barra de Copiar e Abrir presa embaixo. O que some aqui e
   duplicata (LISTA_N3 de test_direcao_b): o rotulo longo, a leitura do
   Claude (desce para o pe da lista), o "Comece pela" (a primeira linha diz o
   mesmo), a dica da faixa (esta na gaveta), a porcentagem (a linha da perda
   diz "30 de 50"), as iniciais do lote (o painel do lote tem a lista) e os
   botoes da mensagem (a barra de baixo tem os mesmos). */
@media (max-width: 720px) {
  .anu-fn-longo { display: none; }
  .anu-fn-curto { display: inline; }
  .anu-fn-cabeca { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 12px; }
  .anu-fn-cabeca .titulo-tela { font-size: 28px; }
  .anu-fn-cabeca-acoes { display: none; }
  .anu-fn-analisar-cel { display: block; }
  .anu-fn-analisar-cel button { min-height: 34px; padding: 5px 11px; font-size: 13px; white-space: nowrap; }
  .anu-fn-sub { margin-top: 4px; font-size: 15px; line-height: 1.4; }
  .anu-fn-resto { display: none; }
  .anu-fn-rodape-meta { display: block; margin: 0 2px; font-size: 12.5px; line-height: 1.5; color: var(--neutro); }
  .anu-fn-rodape-meta b { color: var(--tinta-2); font-weight: 600; }
  .anu-fn-faixa { margin-bottom: 12px; }
  .anu-fn-faixa-topo { flex-wrap: nowrap; padding: 8px 10px 0 12px; }
  .anu-fn-faixa-titulo { font-size: 12.5px; white-space: nowrap; }
  .anu-fn-dica { display: none; }
  .anu-fn-periodo a { padding: 3px 8px; font-size: 12px; }
  .anu-fn-degraus { padding: 4px 4px 2px; gap: 0; }
  .anu-fn-degraus li:not(:last-child)::after { display: none; }
  .anu-fn-degrau { align-items: center; padding: 6px 1px 7px; text-align: center; }
  .anu-fn-num { font-size: 19px; }
  .anu-fn-rot { font-size: 11px; font-stretch: 88%; }
  .anu-fn-parou { font-size: 10.5px; font-stretch: 85%; }
  .anu-fn-pc { display: none; }
  .anu-fn-barra { height: 3px; margin-top: 4px; }
  .anu-fn-queda { flex-wrap: nowrap; padding: 8px 12px 9px; font-size: 13.5px; gap: 7px; }
  .anu-fn-queda-txt { flex: 1 1 auto; }
  .anu-fn-abas-linha { margin-bottom: 8px; border-bottom: 0; gap: 8px; }
  .anu-fn-abas { width: 100%; border-bottom: 1px solid var(--borda); }
  .anu-fn-aba { padding: 9px 10px; font-size: 14.5px; gap: 6px; }
  .anu-fn-filtros { padding: 0; }
  .anu-fn-chip { padding: 3px 11px; }
  .anu-fn-etapa { margin-bottom: 10px; }
  .anu-fn-item { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 12px 12px 14px; }
  .anu-fn-av { width: 36px; height: 36px; }
  .anu-fn-grupo-cabeca { padding: 9px 14px; }
  .anu-fn-grupo-dica { font-size: 12px; }
  .anu-fn-proxima > .anu-fn-it-msg { padding: 0 12px 12px 60px; }
  /* a primeira linha mostra Copiar e Abrir sem rolar: o motivo numa linha so */
  .anu-fn-proxima .anu-fn-it-motivo { -webkit-line-clamp: 1; }
  .anu-fn-it-msg-acoes { margin-top: 8px; }
  .anu-fn-it-msg-acoes button, .anu-fn-it-msg-acoes .botao { min-height: 40px; }
  .anu-fn-pilha { display: none; }
  .anu-fn-painel { width: 100%; border: 0; box-shadow: none; }
  .anu-fn-p-cabeca { padding: 10px 16px 12px; }
  .anu-fn-p-sec { padding: 14px 16px; }
  .anu-fn-p-sec.anu-fn-faca { padding-top: 2px; }
  .anu-fn-p-acao { font-size: 17px; }
  .anu-fn-msg-acoes { display: none; }
  .anu-fn-p-pe { padding: 14px 16px 18px; }
  .anu-fn-p-barra {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--borda);
    background: var(--papel-2);
  }
  .anu-fn-p-barra .botao.forte { flex: 1; min-height: 46px; }
  .anu-fn-p-barra button { min-height: 46px; }
  .anu-fn-p-barra button:only-child { flex: 1; }
  .anu-fn-recado { bottom: calc(16px + var(--rodape-altura) + env(safe-area-inset-bottom, 0px)); }
  body.anu-fn-aberto .anu-fn-recado { bottom: 84px; }
}

/* --- o pente fino de Anuncios (27/10/2026) --------------------------------- */

/* CRIAR A MAO E OS ENDERECOS: a dobra e um cartao com respiro; o botao do
   summary nao cola na borda de cima, e o corpo nao tem um segundo cartao
   dentro do primeiro. */
details.dobra.anu-a-mao { margin-top: var(--espaco-4); padding: var(--espaco-4); }
details.dobra.anu-a-mao > summary { margin: 0; }
details.dobra.anu-a-mao[open] > summary { margin-bottom: var(--espaco-4); }
details.dobra.anu-a-mao > summary .anu-nota { font-weight: 400; color: var(--neutro); }
.anu-a-mao-corpo > .texto-apoio { margin: 0 0 var(--espaco-4); }
.anu-forma-onde { grid-template-columns: minmax(0, 1fr) minmax(0, 9ch) minmax(0, 9ch); }
.anu-campo-curto { max-width: 18ch; }
/* AS DATAS CABEM NA COLUNA: com a pele de campo do seletor de data (padding
   e letra de 15/16px, do pente fino de Posts) o campo pedia 160px, e a 320px
   a coluna tem uns 128 -- a pagina rolava de lado (MEDIDO, 27/10/2026). */
.anu-forma-quando input[type=date] { width: 100%; min-width: 0; }
.anu-forma-destino { border: 0; padding: 0; margin: 0 0 var(--espaco-4); display: grid; gap: var(--espaco-2); }
.anu-forma-destino legend { padding: 0; margin-bottom: var(--espaco-2); font-weight: 600; }
.anu-forma-destino small { color: var(--neutro); }
.anu-forma ::placeholder, .anu-cv ::placeholder, .anu-forma-criativo ::placeholder { color: var(--neutro); opacity: .55; }
@media (max-width: 640px) {
  .anu-forma-onde { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .anu-forma-onde > .campo:first-child { grid-column: 1 / -1; }
}

/* O IMPOSTO DA FICHA: uma linha, com o "?". */
.anu-imposto { display: block; }

/* REGRAS: o limite e as regras do que roda sozinho. */
.anu-limite-de-gasto-form .linha { grid-template-columns: repeat(2, minmax(0, 18ch)); }
.anu-regras { margin: 0 0 var(--espaco-4); padding-left: 1.2em; display: grid; gap: var(--espaco-2); line-height: 1.5; }

/* A FALTA DA META, no alto da campanha e do Desempenho: uma frase e um botao. */
.anu-falta-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-3) var(--espaco-5); }
.anu-falta-meta p { margin: 0; flex: 1 1 36ch; }

/* O "ENCERRAR" DO "...": um botao com cara de item da lista. */
.anu-menu-lista form { margin: 0; }
.anu-menu-lista button.anu-menu-acao {
  display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 10px;
  border: 0; border-radius: var(--raio-1); background: none; box-shadow: none;
  font: inherit; font-weight: 500; font-size: 14px; color: var(--tinta-2); text-align: left; cursor: pointer;
}
.anu-menu-lista button.anu-menu-acao:hover { background: var(--papel-4); color: var(--tinta); }

/* OS ATALHOS DE CAMPANHAS: o Gerente e o Plano, que sairam do menu. */
.anu-casa-atalhos { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-4); margin: calc(-1 * var(--espaco-3)) 0 var(--espaco-5); }

/* --- a campanha por conversa (26/10/2026): Campanhas > Criar ------------- */

/* A CONVERSA E O CAMINHO PRINCIPAL, e o "Criar a mao" fica AO LADO dela em
   tela larga: duas colunas, a conversa com tres partes do espaco e o resto
   (o formulario dobrado e os atalhos) com duas. Numa coluna so (o celular e
   o notebook estreito), a conversa vem primeiro. A regra de 1600px de antes
   (os caminhos a esquerda) perde para esta, pela especificidade. */
.anu-criar-conversa > .anu-a-mao { margin-top: 0; }
@media (min-width: 1180px) {
  .anu-criar.anu-criar-conversa.anu-criar-conversa:has(> .anu-cv) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: none;
    gap: var(--espaco-5);
    align-items: start;
  }
  .anu-criar.anu-criar-conversa.anu-criar-conversa:has(> .anu-cv) > * {
    margin: 0;
    grid-column: 2;
    grid-row: auto;
  }
  .anu-criar.anu-criar-conversa.anu-criar-conversa:has(> .anu-cv) > .anu-painel.anu-cv {
    grid-column: 1;
    grid-row: 1 / span 6;
  }
}
.anu-cv { min-width: 0; }
.anu-cv-falas { list-style: none; margin: 0 0 var(--espaco-4); padding: 0; display: grid; gap: var(--espaco-2); }
.anu-cv-fala { max-width: min(62ch, 92%); padding: 10px 14px; border-radius: var(--raio-2); color: var(--tinta); min-width: 0; }
.anu-cv-fala p { margin: 0; line-height: 1.5; overflow-wrap: break-word; }
.anu-cv-fala small { display: block; margin-top: 4px; font-size: var(--letra-3); color: var(--neutro); line-height: 1.4; }
.anu-cv-de-voce { justify-self: end; background: var(--papel-4); }
.anu-cv-de-estudio { justify-self: start; border: 1px solid var(--borda); background: var(--papel-2); }
.anu-cv-opcoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: 0 0 var(--espaco-4); }
.anu-cv-opcoes form, .anu-cv-ajuste form { margin: 0; }
.anu-cv-opcao { min-height: 44px; white-space: normal; text-align: left; }
.anu-cv-ajuste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-4); margin: 0 0 var(--espaco-4); }
.anu-cv-caixa { display: grid; gap: var(--espaco-3); min-width: 0; }
.anu-cv-caixa textarea { width: 100%; min-width: 0; resize: vertical; }
.anu-cv-agir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-4); }
.anu-cv-agir button { min-height: 44px; }
.anu-cv-resumo { margin-top: var(--espaco-5); padding-top: var(--espaco-4); border-top: 1px solid var(--borda); display: grid; gap: var(--espaco-3); min-width: 0; }
.anu-cv-resumo h3, .anu-cv-resumo h4 { margin: 0; overflow-wrap: break-word; }
.anu-cv-resumo > .link-acento { justify-self: start; }
.anu-cv-linhas { margin: 0; display: grid; gap: var(--espaco-2); }
.anu-cv-linha { display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr); gap: var(--espaco-3); }
.anu-cv-linha dt { font-size: var(--letra-3); color: var(--neutro); }
.anu-cv-linha dd { margin: 0; overflow-wrap: break-word; }
.anu-cv-anuncios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-2); }
.anu-cv-anuncios li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 8px 12px; border: 1px solid var(--borda); border-radius: var(--raio-1); min-width: 0; }
.anu-cv-anuncios li span { min-width: 0; overflow-wrap: anywhere; }
.anu-cv-anuncios small { font-size: var(--letra-3); color: var(--neutro); }
.anu-cv-detalhes { margin-top: var(--espaco-2); }
.anu-cv-ajustar { display: grid; max-width: 78ch; margin-top: var(--espaco-3); }
.anu-cv-ajustar input, .anu-cv-ajustar select, .anu-cv-ajustar textarea { width: 100%; min-width: 0; }
.anu-cv-ajustar > .botao { justify-self: start; }
.anu-cv-outra { margin-top: var(--espaco-4); }
@media (max-width: 720px) {
  .anu-cv-fala { max-width: 100%; }
  .anu-cv-linha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .anu-cv-agir .forte { flex: 1 1 160px; justify-content: center; }
}
/* A Conversa do robo (28/10/2026): WhatsApp > Conversa do robo, o roteiro
   em quatro partes numeradas e a previa da primeira troca ao lado */
.anu-rb { margin-top: var(--espaco-5); display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--espaco-5); align-items: start; }
.anu-rb-aviso { margin-top: var(--espaco-3); }
.anu-rb-partes { display: grid; gap: var(--espaco-5); min-width: 0; }
.anu-rb-parte { padding: 22px 24px; border: 1px solid var(--borda); border-radius: var(--raio-3, 20px); background: var(--papel-2); min-width: 0; scroll-margin-top: 80px; }
.anu-rb-cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: var(--espaco-4); }
.anu-rb-cabeca .titulo-secao { margin: 0; }
.anu-rb-cabeca .texto-mini { margin: 4px 0 0; }
.anu-rb-passo { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--papel-3); font-size: 14px; font-weight: 700; color: var(--acento-texto); }
.anu-rb-passo-trava { color: var(--neutro); }
.anu-rb-form { display: grid; gap: var(--espaco-3); min-width: 0; }
.anu-rb-form textarea, .anu-rb-form input[type="text"] { width: 100%; min-width: 0; }
.anu-rb-form textarea { resize: vertical; }
.anu-rb-acoes { display: flex; justify-content: flex-end; }
.anu-rb-nunca { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--tinta-2); line-height: 1.5; }
.anu-rb-previa { position: sticky; top: 24px; display: grid; gap: var(--espaco-3); min-width: 0; }
.anu-rb-previa .titulo-secao { margin: 0; }
.anu-rb-tela { padding: 16px 14px; border: 1px solid var(--borda); border-radius: var(--raio-3, 20px); background: var(--papel); display: grid; gap: 8px; }
.anu-rb-balao { margin: 0; max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; overflow-wrap: break-word; white-space: pre-line; }
.anu-rb-cliente { justify-self: start; border: 1px solid var(--borda); background: var(--papel-2); color: var(--tinta); border-bottom-left-radius: 4px; }
.anu-rb-robo { justify-self: end; background: var(--papel-4); color: var(--tinta); border-bottom-right-radius: 4px; }
.anu-rb-resposta { color: var(--neutro); }
/* o fluxo, as regras e os modelos (28/10/2026, "tipo um many chat") */
.anu-rb-abas { margin-top: var(--espaco-4); display: flex; flex-wrap: wrap; gap: 6px; }
.anu-rb-abas a { padding: 8px 16px; border-radius: var(--raio-pilula); color: var(--neutro); font-weight: 600; text-decoration: none; }
.anu-rb-abas a:hover { color: var(--tinta); }
.anu-rb-abas a.ativa { background: var(--papel-3); color: var(--tinta); }
.anu-rb-barra { margin-top: var(--espaco-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.anu-rb-barra-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.anu-rb-barra-acoes form { margin: 0; }
/* o interruptor "Usar este fluxo no robô", junto do Gravar (29/10/2026) */
.anu-rb-gravar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.anu-rb-ligar { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tinta); cursor: pointer; }
.anu-rb-ligar-dica { margin: 8px 0 0; color: var(--tinta-2); }
.anu-rb-vistas { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--borda); border-radius: var(--raio-pilula); }
.anu-rb-vistas a, .anu-rb-vistas button { padding: 6px 14px; border: 0; border-radius: var(--raio-pilula); background: transparent; color: var(--neutro); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.anu-rb-vistas .ativa { background: var(--papel-3); color: var(--tinta); }
.anu-rb-sujo { margin: 8px 0 0; color: var(--tinta-2); }
.anu-rb-barra-dica { margin: 0; }
/* o `hidden` vale mesmo com a classe que poe display (o aviso, o painel) */
.anu-rb-fluxo [hidden], .anu-rb-sujo[hidden] { display: none; }
.anu-rb-fluxo { margin-top: var(--espaco-4); display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--espaco-5); align-items: start; }
.anu-rb-area { min-width: 0; }
.anu-rb-lado { position: sticky; top: 16px; display: grid; gap: 12px; min-width: 0; }
.anu-rb-lado-abas { justify-self: start; }
.anu-rb-sim { display: grid; gap: 10px; }
.anu-rb-sim-tela { height: 440px; overflow-y: auto; align-content: start; }
.anu-rb-sim-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.anu-rb-sim-form input { width: 100%; min-width: 0; }
.anu-rb-sim-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.anu-rb-sim-pe .link-acento { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.anu-rb-sim-aviso { margin: 2px 0; justify-self: center; max-width: 90%; text-align: center; font-size: 12.5px; color: var(--neutro); }
.anu-rb-sim-botoes { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 92%; }
.anu-rb-sim-botoes button { padding: 6px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio-pilula); background: var(--papel-2); color: var(--acento-texto); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.anu-rb-sim-botoes button:disabled { color: var(--neutro); cursor: default; }
.anu-rb-balao small { display: block; margin-bottom: 2px; font-size: 11.5px; color: var(--neutro); }
.anu-rb-balao-ia { border: 1px solid var(--borda-forte); background: var(--papel-3); }
.anu-rb-balao-ia span { font-style: italic; color: var(--tinta-2); }
.anu-rb-balao-link span { color: var(--acento-texto); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.anu-rb-editor { display: grid; gap: 12px; }
#editor { display: grid; gap: 12px; }
#editor .campo { margin: 0; }
#editor input[type="text"], #editor textarea, #editor select { width: 100%; min-width: 0; }
.anu-rb-ed-grupo { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--borda); border-radius: 12px; display: grid; gap: 8px; min-width: 0; }
.anu-rb-ed-grupo legend { padding: 0 4px; font-size: 13px; color: var(--neutro); }
.anu-rb-ed-grupo > .link-acento { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.anu-rb-ed-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 6px; align-items: center; }
.anu-rb-tirar { width: 32px; height: 32px; padding: 0; border: 1px solid var(--borda); border-radius: 8px; background: transparent; color: var(--neutro); font-size: 18px; line-height: 1; cursor: pointer; }
.anu-rb-ed-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.anu-rb-apagar { color: var(--neutro); }
/* os blocos, nas duas vistas */
.anu-rb-no { padding: 14px 16px; border: 1px solid var(--borda); border-radius: 16px; background: var(--papel-2); display: grid; gap: 10px; cursor: pointer; min-width: 0; }
.anu-rb-no:hover { border-color: var(--borda-forte); }
.anu-rb-no.anu-rb-sel { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.anu-rb-no.anu-rb-agora { box-shadow: 0 0 0 2px var(--tinta-titulo); }
.anu-rb-no-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.anu-rb-no-cabeca b { font-size: 15px; font-weight: 650; color: var(--tinta); overflow-wrap: anywhere; }
.anu-rb-no-n { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--papel-3); font-size: 12px; font-weight: 700; color: var(--neutro); }
.anu-rb-no-etiquetas { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.anu-rb-tipo { padding: 2px 8px; border-radius: var(--raio-pilula); font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--papel-3); color: var(--neutro); }
.anu-rb-tipo-oferta { color: var(--acento-texto); }
.anu-rb-tipo-passar { color: var(--tinta-titulo); }
.anu-rb-modo { padding: 2px 8px; border-radius: var(--raio-pilula); font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--borda); color: var(--neutro); }
.anu-rb-modo-ia { border-color: var(--tinta-titulo); color: var(--tinta-titulo); }
.anu-rb-inicio { padding: 2px 8px; border-radius: var(--raio-pilula); font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--acento-texto); color: var(--acento-texto); }
.anu-rb-no-fala { display: grid; gap: 6px; }
.anu-rb-no-fala p { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: break-word; }
.anu-rb-no-texto { padding: 8px 12px; border-radius: 12px; background: var(--papel-4); color: var(--tinta); white-space: pre-line; }
.anu-rb-no-ia { padding: 8px 12px; border: 1px solid var(--borda-forte); border-radius: 12px; color: var(--tinta-2); font-style: italic; }
.anu-rb-no-falta { color: var(--neutro); font-style: italic; }
.anu-rb-no-link { color: var(--acento-texto); font-weight: 600; }
.anu-rb-no-link::before { content: "↗ "; }
.anu-rb-no-nota { color: var(--neutro); font-size: 13px; }
.anu-rb-no-saidas { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.anu-rb-saida { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neutro); min-width: 0; }
.anu-rb-saida-rotulo { min-width: 0; overflow-wrap: anywhere; }
.anu-rb-saida-botao .anu-rb-saida-rotulo { padding: 3px 10px; border: 1px solid var(--borda-forte); border-radius: var(--raio-pilula); color: var(--tinta); font-weight: 600; }
.anu-rb-seta { color: var(--neutro); }
.anu-rb-ir { padding: 0; border: 0; background: none; color: var(--acento-texto); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.anu-rb-ir-ia { font-style: italic; }
/* a lista */
.anu-rb-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.anu-rb-lista-item { display: grid; justify-items: stretch; gap: 8px; }
.anu-rb-lista-item + .anu-rb-lista-item::before { content: ""; justify-self: center; width: 2px; height: 18px; margin-top: 8px; background: var(--borda-forte); }
.anu-rb-mais { justify-self: center; padding: 5px 12px; border: 1px solid var(--borda); border-radius: var(--raio-pilula); background: transparent; color: var(--neutro); font: inherit; font-size: 12.5px; cursor: pointer; }
.anu-rb-mais:hover { color: var(--tinta); border-color: var(--borda-forte); }
/* o quadro livre */
.anu-rb-quadro { position: relative; height: max(560px, calc(100vh - 300px)); overflow: hidden; border: 1px solid var(--borda); border-radius: 16px; background-color: var(--papel); background-image: radial-gradient(var(--borda) 1px, transparent 1px); background-size: 22px 22px; touch-action: none; cursor: grab; }
.anu-rb-palco { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.anu-rb-linhas { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.anu-rb-linha { fill: none; stroke: var(--borda-forte); stroke-width: 2; }
.anu-rb-linha-botao { stroke: var(--tinta-titulo); }
.anu-rb-linha-nova { stroke: var(--acento); }
.anu-rb-no-solto { position: absolute; width: 260px; cursor: default; }
.anu-rb-pega { cursor: grab; user-select: none; }
.anu-rb-entrada { position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; border: 2px solid var(--borda-forte); border-radius: 50%; background: var(--papel); }
.anu-rb-no-solto .anu-rb-saida { justify-content: space-between; }
.anu-rb-porta { flex: none; width: 14px; height: 14px; margin-right: -24px; border: 2px solid var(--borda-forte); border-radius: 50%; background: var(--papel); cursor: crosshair; }
.anu-rb-porta-ligada { border-color: var(--tinta-titulo); background: var(--tinta-titulo); }
.anu-rb-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 4px; }
.anu-rb-zoom button { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--papel-2); color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer; }
.anu-rb-dica-quadro { position: absolute; left: 14px; bottom: 10px; max-width: 60%; margin: 0; font-size: 12px; color: var(--neutro); pointer-events: none; }
/* as regras */
.anu-rb-regras { display: grid; gap: 10px; min-width: 0; }
.anu-rb-regra { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.8fr); gap: 10px; align-items: start; min-width: 0; }
.anu-rb-regra .campo { margin: 0; min-width: 0; }
.anu-rb-regra input, .anu-rb-regra select { width: 100%; min-width: 0; }
.anu-rb-regra-com { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.anu-rb-regra-cabeca span { font-size: 12.5px; color: var(--neutro); }
/* os modelos */
.anu-rb-vazio { margin-top: var(--espaco-5); display: grid; gap: var(--espaco-3); }
.anu-rb-vazio .titulo-secao, .anu-rb-vazio .texto-apoio { margin: 0; }
.anu-rb-modelos { margin: var(--espaco-4) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--espaco-4); }
.anu-rb-modelo { padding: 18px 20px; border: 1px solid var(--borda); border-radius: 16px; background: var(--papel-2); display: grid; gap: 10px; align-content: start; min-width: 0; }
.anu-rb-modelo > b { font-size: 16px; }
.anu-rb-modelo > small { color: var(--neutro); line-height: 1.45; }
.anu-rb-modelo form { margin: 0; }
.anu-rb-modelo-passos { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--tinta-2); }
.anu-rb-modelo-passos li span { margin-right: 6px; }
.anu-rb-modelo-passos em { color: var(--tinta-titulo); font-style: normal; font-weight: 600; }
.anu-rb-confirma summary { list-style: none; display: inline-flex; cursor: pointer; }
.anu-rb-confirma summary::-webkit-details-marker { display: none; }
.anu-rb-confirma form { margin-top: 10px; display: grid; gap: 8px; justify-items: start; }
@media (max-width: 960px) {
  .anu-rb-fluxo { grid-template-columns: minmax(0, 1fr); }
  .anu-rb-lado { position: static; }
  .anu-rb-quadro { height: 480px; }
  .anu-rb-regra { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
  .anu-rb-regra-cabeca { display: none; }
}
@media (max-width: 960px) {
  .anu-rb { grid-template-columns: minmax(0, 1fr); }
  .anu-rb-previa { position: static; order: -1; }
}
@media (max-width: 720px) {
  .anu-rb-parte { padding: 18px 16px; }
  .anu-rb-acoes .forte { flex: 1 1 auto; justify-content: center; }
}
/* [/dono: anuncios] */

/* [dono: conteudo] */
/* CONTEUDO > POSTS > REELS (13/10/2026): o motor, o teste, o calendario e os
   reels feitos com o video tocando ali mesmo. Prefixo `rls-`. */
.rls-andando { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--espaco-4); padding: 10px 14px; border: 1px solid var(--alerta-fio); border-radius: var(--raio-2); background: var(--alerta-fraco); color: var(--tinta); font-size: 14px; }
.rls-pulso { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--alerta); animation: rls-pulsa 1.4s ease-in-out infinite; }
@keyframes rls-pulsa { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rls-pulso { animation: none; } }
.rls-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espaco-4); align-items: start; }
.rls-topo > .bloco { margin-bottom: 0; }
.rls-topo + .bloco { margin-top: var(--espaco-4); }
.rls-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--espaco-3); font-size: 14px; color: var(--tinta-2); }
.rls-checa { list-style: none; margin: 0 0 var(--espaco-4); padding: 0; display: grid; gap: 6px; }
.rls-checa li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tinta); }
.rls-marca { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.rls-ok .rls-marca { color: var(--acento-texto); background: var(--acento-fraco); }
.rls-falta .rls-marca { color: var(--falha); background: var(--falha-fraco); }
.rls-checa-estado { margin-left: auto; font-size: 12.5px; color: var(--neutro); }
.rls-falta .rls-checa-estado { color: var(--falha); }
.rls-sub { margin: 0 0 8px; font-size: 14px; font-weight: 650; color: var(--tinta); }
.rls-acervo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rls-acervo li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-1); background: var(--papel-3); font-size: 14px; }
.rls-acervo span { color: var(--tinta-2); }
.rls-acervo small { color: var(--neutro); font-size: 12px; }
.rls-form { display: grid; gap: 12px; margin-top: var(--espaco-3); }
.rls-form label { display: grid; gap: 4px; font-size: 13px; color: var(--tinta-2); }
.rls-form select, .rls-form input[type="text"] { width: 100%; }
.rls-opcional { color: var(--neutro); font-size: 12px; }
.rls-custo { margin: 0; padding: 10px 12px; border-radius: var(--raio-1); background: var(--papel-3); font-size: 13.5px; color: var(--tinta-2); line-height: 1.45; }
.rls-custo b { color: var(--tinta); font-weight: 600; }
.rls-form-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rls-form-pe .texto-mini { margin-top: 0; }
.rls-agenda { list-style: none; margin: 0; padding: 0; display: grid; }
.rls-agenda li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borda); font-size: 14px; }
.rls-agenda li:first-child { border-top: 0; padding-top: 0; }
.rls-dia { color: var(--tinta-2); font-variant-numeric: var(--algarismos); }
.rls-dia b { color: var(--tinta); font-weight: 600; }
.rls-agenda-tema { min-width: 0; overflow-wrap: break-word; }
.rls-agenda-fim { display: flex; align-items: center; gap: 10px; }
.rls-feitos { margin-top: var(--espaco-5); }
.rls-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--espaco-4); }
.rls-cartao { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); overflow: hidden; }
.rls-palco { aspect-ratio: 9 / 16; width: min(100%, 320px); justify-self: center; background: #000; display: grid; place-items: center; }
.rls-palco.rls-vazio { aspect-ratio: auto; width: 100%; min-height: 160px; background: var(--papel-3); }
.rls-palco video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.rls-sem { margin: 0; padding: 16px; display: flex; align-items: center; gap: 10px; text-align: center; color: var(--neutro); font-size: 13px; }
.rls-texto { display: grid; gap: 8px; padding: 12px 14px 14px; align-content: start; }
.rls-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rls-tema { font-size: 15px; font-weight: 600; line-height: 1.3; }
.rls-tema a { color: var(--tinta); text-decoration: none; }
.rls-tema a:hover { text-decoration: underline; }
.rls-meta { margin: 0; font-size: 12.5px; color: var(--neutro); line-height: 1.45; }
.rls-roteiro { border-top: 1px solid var(--borda); padding-top: 8px; }
.rls-roteiro > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.rls-roteiro ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.rls-roteiro li { display: grid; gap: 2px; font-size: 13px; color: var(--tinta-2); line-height: 1.4; }
.rls-roteiro li b { color: var(--tinta); font-weight: 600; }
.rls-legenda { display: grid; gap: 2px; margin: 10px 0 0; font-size: 13px; color: var(--tinta-2); line-height: 1.4; }
.rls-parte { font-size: 11.5px; font-weight: 600; color: var(--neutro); }
.rls-mandar { margin-top: 4px; }
@media (max-width: 720px) {
  .rls-topo { grid-template-columns: minmax(0, 1fr); }
  .rls-agenda li { grid-template-columns: minmax(0, 1fr) auto; }
  .rls-agenda-tema { grid-column: 1 / -1; grid-row: 2; }
  .rls-grade { grid-template-columns: minmax(0, 1fr); }
  .rls-palco { width: min(100%, calc(70vh * 9 / 16)); }
}
/* [/dono: conteudo] */

/* [dono: casa] */
/* =========================================================================
   === telas: primeiro acesso, início, resultados e configurações ===
   As quatro perguntas, o Início do modo Simples, os Resultados em linguagem
   do dia a dia e as Configurações (26/10/2026, web/telas_de_uso.py). Os
   tokens de sempre, sem cor nova: o verde de fundo fica só no botão da
   decisão (o "Continuar"), e a opção marcada ganha a borda forte e o papel
   de cima, como a escolha do modo do robô. TELAS NOVAS: esperam o dono.
   ========================================================================= */
.uso-progresso { list-style: none; margin: 0 0 var(--espaco-5); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.uso-progresso li { height: 4px; border-radius: var(--raio-pilula); background: var(--papel-4); }
.uso-progresso li.feito { background: var(--acento-texto); }
.uso-progresso li.agora { background: var(--tinta-2); }
.uso-progresso li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uso-pergunta { display: grid; gap: var(--espaco-4); max-width: 640px; min-width: 0; }
.uso-opcoes { margin: 0; padding: 0; border: 0; display: grid; gap: var(--espaco-3); min-width: 0; }
.uso-legenda { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uso-opcao { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; min-height: 64px; padding: 16px 18px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); cursor: pointer; }
.uso-opcao:hover { border-color: var(--borda-forte); }
.uso-opcao:has(input:checked) { border-color: var(--acento-texto); background: var(--papel-3); }
.uso-opcao input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--acento); }
.uso-opcao b { display: block; font-size: 16px; font-weight: 650; color: var(--tinta); line-height: 1.3; overflow-wrap: break-word; }
.uso-opcao small { display: block; margin-top: 3px; font-size: var(--letra-3); color: var(--neutro); line-height: 1.4; overflow-wrap: break-word; }
.uso-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-3); }
.uso-pular { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: var(--espaco-5); }
.uso-pular small { color: var(--neutro); font-size: var(--letra-2); }
.uso-convite .recado > div { min-width: 0; }
.uso-convite-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; }
.uso-convite-acoes form { margin: 0; }
.uso-cartoes { display: grid; gap: var(--espaco-3); max-width: 720px; }
.uso-cartao { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); color: var(--tinta); text-decoration: none; }
a.uso-cartao:hover { border-color: var(--borda-forte); background: var(--papel-3); }
.uso-cartao-numero { min-width: 44px; height: 44px; padding: 0 8px; display: grid; place-items: center; border-radius: var(--raio-1); background: var(--papel-3); font-size: 20px; font-weight: 700; font-variant-numeric: var(--algarismos); color: var(--acento-texto); }
.uso-cartao-texto { min-width: 0; display: grid; gap: 3px; }
.uso-cartao-texto b { font-size: 16px; font-weight: 650; line-height: 1.3; overflow-wrap: break-word; }
.uso-cartao-texto small { font-size: var(--letra-3); color: var(--neutro); line-height: 1.4; }
.uso-cartao-ir { display: inline-flex; align-items: center; gap: 6px; font-size: var(--letra-3); font-weight: 600; color: var(--acento-texto); white-space: nowrap; }
.uso-cartao-calmo { grid-template-columns: minmax(0, 1fr); }
.uso-numeros { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--espaco-3); }
.uso-numero { margin: 0; padding: 16px 18px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); min-width: 0; }
.uso-numero dt { font-size: var(--letra-3); color: var(--tinta-2); line-height: 1.35; overflow-wrap: break-word; }
.uso-numero dd { margin: 6px 0 0; font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--tinta); font-variant-numeric: var(--algarismos); overflow-wrap: break-word; }
.uso-numero dd small { display: block; margin-top: 2px; font-size: var(--letra-3); font-weight: 500; color: var(--neutro); }
.uso-detalhes, .uso-secao { margin-top: var(--espaco-6); display: grid; gap: var(--espaco-3); max-width: 720px; min-width: 0; }
.uso-secao .titulo-secao, .uso-detalhes .titulo-secao { margin: 0; }
.uso-secao .texto-apoio { margin: 0; }
.uso-secao > .botao { justify-self: start; }
.uso-links { display: grid; gap: var(--espaco-2); }
.uso-link { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); color: var(--tinta); text-decoration: none; min-width: 0; }
.uso-link:hover { border-color: var(--borda-forte); background: var(--papel-3); }
.uso-link b { font-weight: 600; overflow-wrap: break-word; }
.uso-link small { font-size: var(--letra-3); color: var(--neutro); overflow-wrap: break-word; }
.uso-todas > summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); padding: 6px 0; }
.uso-todas[open] > summary { margin-bottom: var(--espaco-3); }
/* O INICIO (27/10/2026, no jeito da AbacatePay): a saudacao com os atalhos
   a direita; a FAIXA, um cartao so com os quatro numeros separados por um
   fio (o numero grande, o simbolo da moeda falando baixo); e a lista do que
   espera, um cartao so com uma linha por coisa. */
.ini-cabeca { align-items: flex-end; }
.ini-atalhos { flex-wrap: wrap; justify-content: flex-end; }
.ini-faixa { margin-top: var(--espaco-5); padding: 24px 28px; border: 1px solid var(--borda); border-radius: var(--raio-3, 20px); background: var(--papel-2); display: grid; gap: 18px; min-width: 0; }
.ini-numeros { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ini-numero { margin: 0; padding: 0 24px; border-left: 1px solid var(--borda); min-width: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.ini-numero:first-child { padding-left: 0; border-left: 0; }
.ini-numero dt { font-size: var(--letra-3); color: var(--neutro); line-height: 1.35; overflow-wrap: break-word; }
.ini-numero dd { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--tinta); font-variant-numeric: var(--algarismos); overflow-wrap: anywhere; }
.ini-simbolo { margin-right: 4px; font-size: 18px; font-weight: 500; color: var(--neutro); vertical-align: 0.35em; }
.ini-ver-tudo { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: var(--letra-3); font-weight: 600; color: var(--acento-texto); text-decoration: none; }
.ini-ver-tudo:hover { text-decoration: underline; }
.ini-progresso { grid-template-columns: minmax(0, 1fr) minmax(160px, 260px) auto; align-items: center; gap: 24px; }
/* na janela media (ate 1100px) a barra desce para baixo da frase, e o
   botao fica ao lado dela: as tres colunas cravam 420px e nao cabem em 721 */
@media (max-width: 1100px) {
  .ini-progresso { grid-template-columns: minmax(0, 1fr) auto; }
  .ini-progresso .ini-barra { grid-column: 1 / -1; grid-row: 2; }
}
.ini-progresso-texto { display: grid; gap: 4px; min-width: 0; }
.ini-progresso-texto b { font-size: 18px; font-weight: 700; color: var(--tinta); }
.ini-progresso-texto small { font-size: var(--letra-3); color: var(--neutro); line-height: 1.45; }
.ini-barra { height: 8px; }
.ini-sem-numeros { margin-top: var(--espaco-4); }
.ini-secao { margin-top: var(--espaco-6); display: grid; gap: var(--espaco-3); min-width: 0; }
.ini-secao .titulo-secao { margin: 0; }
.ini-lista { margin: 0; padding: 0; list-style: none; border: 1px solid var(--borda); border-radius: var(--raio-3, 20px); background: var(--papel-2); overflow: hidden; }
.ini-lista li + li { border-top: 1px solid var(--borda); }
.ini-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 22px; color: var(--tinta); text-decoration: none; }
.ini-item:hover { background: var(--papel-3); }
.ini-item-numero { min-width: 36px; height: 36px; padding: 0 8px; display: grid; place-items: center; border-radius: var(--raio-pilula); background: var(--papel-3); font-size: 15px; font-weight: 700; font-variant-numeric: var(--algarismos); color: var(--acento-texto); }
.ini-item-texto { min-width: 0; display: grid; gap: 2px; }
.ini-item-texto b { font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: break-word; }
.ini-item-texto small { font-size: var(--letra-3); color: var(--neutro); line-height: 1.4; }
.ini-item-ir { display: inline-flex; align-items: center; gap: 6px; font-size: var(--letra-3); font-weight: 600; color: var(--acento-texto); white-space: nowrap; }
.ini-em-dia { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--tinta-2); }
/* o painel do Inicio (28/10/2026): grafico dos dias e os quatro quadros */
.ini-cartao { margin: 0; border: 1px solid var(--borda); border-radius: var(--raio-3, 20px); background: var(--papel-2); min-width: 0; }
.ini-secao-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ini-legenda { margin: 0; display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--letra-3); color: var(--neutro); }
.ini-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.ini-leg-barra { width: 10px; height: 12px; border-radius: 3px 3px 0 0; background: var(--grafico-1); }
.ini-leg-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta); }
.ini-grafico-caixa { padding: 20px 24px 16px; display: grid; gap: 14px; }
.ini-grafico-resumo { margin: 0; font-size: var(--letra-3); color: var(--neutro); font-variant-numeric: var(--algarismos); }
.ini-grafico-resumo b { font-size: 15px; color: var(--tinta); }
.ini-grafico-area { position: relative; padding-left: 28px; }
.ini-grafico-teto { position: absolute; left: 0; top: 4px; font-size: 12px; color: var(--neutro); font-variant-numeric: var(--algarismos); }
.ini-grafico { display: block; width: 100%; height: 170px; overflow: visible; }
.ini-grafico-grade { stroke: var(--borda); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ini-grafico-base { stroke: var(--borda-forte); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ini-grafico-barra { fill: var(--grafico-1); }
.ini-grafico-vendas { position: relative; height: 12px; margin-top: 6px; pointer-events: none; }
.ini-grafico-vendas i { position: absolute; top: 1px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--tinta); }
.ini-grafico-alvo { fill: transparent; cursor: pointer; }
.ini-grafico-alvo:hover, .ini-grafico-alvo.ini-ativo { fill: var(--acento-fraco); }
.ini-grafico-dica { position: absolute; top: -10px; margin: 0; padding: 7px 10px; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--papel); color: var(--tinta-2); font-size: 13px; white-space: nowrap; pointer-events: none; font-variant-numeric: var(--algarismos); z-index: 2; }
.ini-grafico-datas { padding-left: 28px; display: flex; justify-content: space-between; font-size: 12px; color: var(--neutro); font-variant-numeric: var(--algarismos); }
.ini-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--espaco-5); align-items: start; }
.ini-caminho { padding: 6px 22px; list-style: none; }
.ini-caminho li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; }
.ini-caminho li + li { border-top: 1px solid var(--borda); }
.ini-caminho-passo { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--papel-3); font-size: 12px; font-weight: 700; color: var(--neutro); }
.ini-caminho-rotulo { min-width: 0; display: grid; gap: 2px; font-size: 14.5px; color: var(--tinta); }
.ini-caminho-rotulo small { font-size: 12.5px; color: var(--neutro); }
.ini-caminho-valor { font-size: 18px; font-weight: 700; color: var(--tinta); font-variant-numeric: var(--algarismos); }
.ini-linhas { padding: 0; list-style: none; overflow: hidden; }
.ini-linhas > li + li { border-top: 1px solid var(--borda); }
.ini-linha { display: flex; align-items: center; gap: 14px; padding: 14px 22px; color: var(--tinta); text-decoration: none; min-width: 0; }
a.ini-linha:hover { background: var(--papel-3); }
.ini-linha-texto { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ini-linha-texto b { font-size: 14.5px; font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-linha-texto small { font-size: 12.5px; color: var(--neutro); line-height: 1.4; }
.ini-linha-valor { flex: 0 0 auto; display: grid; justify-items: end; gap: 2px; font-size: 15px; font-weight: 700; font-variant-numeric: var(--algarismos); }
.ini-linha-valor small { font-size: 12px; font-weight: 500; color: var(--neutro); }
.ini-estado { display: inline-flex; align-items: center; gap: 5px; }
.ini-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neutro); }
.ini-estado-no-ar { color: var(--acento-texto); font-weight: 600; }
/* o ponto da campanha no ar na tinta (acabamento, 29/10/2026): a Lava e so
   o botao principal */
.ini-estado-no-ar::before { background: var(--tinta); }
.ini-data { flex: 0 0 86px; display: grid; gap: 1px; padding-right: 14px; border-right: 1px solid var(--borda); font-variant-numeric: var(--algarismos); }
.ini-data b { font-size: 15px; font-weight: 700; }
.ini-data small { font-size: 12px; color: var(--neutro); white-space: nowrap; }
@media (max-width: 960px) {
  .ini-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ini-grafico-caixa { padding: 16px 16px 12px; }
  .ini-grafico { height: 130px; }
  .ini-grafico-dica { white-space: normal; max-width: 220px; }
  .ini-caminho { padding: 4px 16px; }
  .ini-linha { padding: 13px 16px; }
  .uso-opcao { padding: 14px 14px; }
  .uso-cartao { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px; }
  .uso-cartao-ir { grid-column: 2; }
  .ini-cabeca { flex-direction: column; align-items: stretch; }
  .ini-atalhos { justify-content: stretch; }
  .ini-atalhos .botao { flex: 1 1 140px; justify-content: center; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
  .ini-faixa { padding: 18px; }
  .ini-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .ini-numero { padding: 0 14px; }
  .ini-numero:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ini-numero dd { font-size: 26px; }
  .ini-simbolo { font-size: 15px; }
  .ini-progresso { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ini-item { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
  .ini-item-ir { grid-column: 2; }
  .uso-acoes .forte, .uso-acoes .botao { flex: 1 1 140px; justify-content: center; }
}
/* [/dono: casa] */

/* [dono: nucleo] */
/* =========================================================================
   ACABAMENTO GERAL (29/10/2026): um bloco por pacote. Regra NOVA de um
   pacote vai dentro do bloco dele; mudar uma regra que ja existe se faz no
   lugar dela. Nenhuma classe simples declarada duas vezes (a folha cobra).
   ========================================================================= */
/* [/dono: nucleo] */

/* [dono: nucleo] */
/* o pacote 01 do acabamento (29/10/2026) */
/* COMO VOCE VENDE no essencial dos Primeiros passos: as seis opcoes como
   linhas de escolha, sem a moldura do sistema no fieldset */
fieldset.mm-como-vende { border: 0; padding: 0; margin: 0 0 var(--espaco-3); min-width: 0; }
fieldset.mm-como-vende legend { padding: 0; font-family: var(--fonte-titulo); font-weight: 600;
  font-size: var(--letra-3); color: var(--tinta-2); margin: 0 0 7px; }
.mm-opcao { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
  align-items: start; font-family: inherit; font-weight: 400; font-size: var(--letra-3);
  line-height: 1.4; color: var(--tinta-2); margin: 0 0 8px; cursor: pointer; }
.mm-opcao input { margin-top: 3px; }
.mm-opcao strong { font-weight: 600; }
/* [/dono: nucleo] */

/* [dono: nucleo] */
/* o pacote 02 do acabamento (29/10/2026) */
/* A previa que nao carregou (feed.js, `Arte`): a frase no lugar da arte, do
   tamanho dela, em vez da imagem quebrada. Pelo `.palco`, para vencer o
   `display: block` de `.post .arte`. */
.palco .arte-sem-previa {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--espaco-2);
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: var(--espaco-5);
  background: var(--papel-3);
  color: var(--tinta);
  text-align: center;
}
.palco .story .arte-sem-previa { aspect-ratio: 9 / 16; }
.arte-sem-previa strong {
  font-family: var(--fonte-titulo);
  font-size: var(--letra-5);
  font-weight: 700;
}
.arte-sem-previa span { font-size: var(--letra-3); line-height: 1.45; color: var(--neutro); max-width: 30ch; }
/* A pagina do erro sem tratamento quando nem a moldura abre
   (web/guarda_do_motor.py): so o titulo, a frase e a volta. */
.erro-simples {
  display: grid;
  gap: var(--espaco-3);
  max-width: 520px;
  margin: 15vh auto 0;
  padding: 0 var(--espaco-4);
}
/* [/dono: nucleo] */

/* [dono: casa] */
/* o pacote 03 do acabamento (29/10/2026) */
/* [/dono: casa] */

/* [dono: casa] */
/* o pacote 04 do acabamento (29/10/2026) */
/* [/dono: casa] */

/* [dono: casco] */
/* o pacote 05 do acabamento (29/10/2026) */

/* O QUADRADINHO COM O LOGOTIPO DA MARCA: o fundo Onix dos dois temas (o
   logotipo e branco) e uma folga em volta, para o desenho nao encostar. */
.marca-com-logo { background: var(--logo-fundo); padding: 4px; }

/* INSTALAR O APP: uma linha do pe do trilho, como Configuracoes, logo
   depois dele. Escondido ate o navegador oferecer a instalacao. */
.moldura-instalar {
  order: 4;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  min-height: 0;
  margin: 4px 0 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--raio-1);
  background: none;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: var(--neutro);
  cursor: pointer;
}
.moldura-instalar:hover { background: var(--papel-3); color: var(--tinta); }
.moldura-instalar .ico { width: 18px; height: 18px; }
.moldura-instalar[hidden] { display: none; }

/* O INICIO: quem nao administra le a quem pedir, no lugar do botao. */
.ini-pedir { margin: 0; max-width: 34ch; align-self: center; color: var(--neutro); }
/* "Para ver numeros aqui": a lista do que liga os numeros da marca nova */
.ini-ligar { margin-top: var(--espaco-5); }
div.ini-item { cursor: default; }
div.ini-item:hover { background: none; }

/* OS RESULTADOS INTEIROS (acabamento, 29/10/2026) */
/* a escolha do periodo: tres pilulas, a escolhida no degrau de cima */
.res-periodos {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--raio-pilula);
  background: var(--papel-3);
}
.res-periodo {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--raio-pilula);
  font-size: var(--letra-3);
  font-weight: 600;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
}
.res-periodo:hover { color: var(--tinta); }
.res-periodo-atual { background: var(--papel); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--borda); }
/* cada grupo de numeros: o titulo e a faixa do Inicio */
.res-bloco { margin-top: var(--espaco-6); display: grid; gap: var(--espaco-3); min-width: 0; }
.res-bloco .titulo-secao { margin: 0; }
.res-faixa { margin-top: 0; }
/* tantas colunas quantos numeros: tres, quatro ou cinco */
.res-numeros { margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.res-numeros .ini-numero { padding: 0 18px; }
.res-numeros .ini-numero:first-child { padding-left: 0; }
.res-numeros .ini-numero dd { font-size: 30px; }
.res-detalhe { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--tinta-2); font-weight: 600; }
.res-antes { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--neutro); }
.res-frase { margin: 0; font-size: var(--letra-3); font-weight: 600; color: var(--tinta-2); }
/* o grupo sem numero diz o que o liga */
.res-falta {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
  font-size: var(--letra-3);
  color: var(--tinta-2);
}
.res-vazio .texto-apoio { margin: 0; }
.res-resumo-texto { width: 100%; min-height: 0; resize: vertical; font-size: var(--letra-3); line-height: 1.5; }

/* O "IR PARA" NA BARRA DO ALTO: uma pilula de busca a direita, antes do
   botao da gaveta (ele e fixo no canto, e a margem guarda o lugar dele). */
.moldura-busca {
  flex: none;
  margin-left: auto;
  margin-right: 228px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 7px 0 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  background: var(--papel);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--neutro);
  text-decoration: none;
  white-space: nowrap;
}
.moldura-busca:hover { color: var(--tinta); border-color: var(--borda-forte); }
.moldura-busca .ico { width: 15px; height: 15px; }
.moldura-busca-tecla { padding: 3px 6px; border-radius: 6px; background: var(--papel-3); font-size: 11px; font-weight: 600; color: var(--neutro); }
/* o mesmo "Ir para" na folha da conta: so no telefone (bloco de 720px) */
.conta-busca { display: none; }
/* a tela da busca */
.busca-campo { margin-top: var(--espaco-4); display: flex; gap: var(--espaco-2); max-width: 640px; }
.busca-campo input[type=search] { flex: 1 1 auto; min-width: 0; }
.busca-nada { margin-top: var(--espaco-5); color: var(--tinta-2); }

/* janela estreita de computador: a pilula vira so a lupa */
@media (min-width: 721px) and (max-width: 1000px) {
  .moldura-busca-texto, .moldura-busca-tecla { display: none; }
  .moldura-busca { padding: 0 9px; }
}

@media (max-width: 720px) {
  .moldura-busca { display: none; }
  .conta-busca {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0 0 10px;
    padding: 0 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-1);
    font-weight: 600;
    color: var(--tinta-2);
    text-decoration: none;
  }
  .conta-busca .ico { width: 16px; height: 16px; }
  .res-periodos { align-self: flex-start; }
  .res-numeros { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .res-numeros .ini-numero { padding: 0 14px; }
  .res-numeros .ini-numero:nth-child(odd) { padding-left: 0; border-left: 0; }
  .res-numeros .ini-numero dd { font-size: 26px; }
  .ini-pedir { max-width: none; }
}

/* A PORTARIA (acabamento p03, 29/10/2026). O "Esqueci a senha" ao lado do
   rotulo da senha; a linha da Politica e dos Termos no pe de toda tela da
   portaria. Tudo com os tokens da folha: nenhuma cor escrita a mao. */
.ent-rotulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-3); }
.ent-rotulo label { margin-bottom: 6px; }
.ent-esqueci { font-size: var(--letra-3); color: var(--acento-texto); }
.portaria-legal {
  margin: var(--espaco-4) 0 0;
  font-size: var(--letra-2);
  color: var(--neutro);
}
.portaria-legal a { color: var(--neutro); }
.portaria-legal a:hover { color: var(--tinta); }
/* QUEM JA ESTA DENTRO (A0-22): o nome da conta e o botao de seguir; o
   formulario abaixo e o de entrar com outra conta. */
.ent-dentro {
  display: grid;
  gap: var(--espaco-3);
  margin: 0 0 var(--espaco-5);
  padding: var(--espaco-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--papel-3);
}
.ent-dentro p { margin: 0; overflow-wrap: anywhere; }
.ent-dentro-outra { font-size: var(--letra-3); color: var(--tinta-2); }
/* O TUCA DA VITRINE SO NO COMPUTADOR, nos dois temas. No claro, a regra geral
   do logo claro (`.logo-claro`, que mostra a versao clara de todo logo)
   vencia o `display: none` da vitrine no celular, e o tucano enorme empurrava
   o formulario para baixo da dobra (MEDIDO a 390px: o cartao comecava em
   540px). Um ponto acima dela, e um abaixo da regra de 960px que o mostra. */
:root[data-tema="claro"] img.vitrine-tuca { display: none; }

/* OS PLANOS EM CARTOES (achado A0-18): cada plano e um cartao com o radio
   dentro, o nome e o preco no alto e o que ele inclui embaixo. O escolhido
   ganha o realce neutro das vizinhas (.uso-opcao): a Lava fica so no botao
   principal. O radio continua de verdade (teclado e leitor). */
.com-planos { min-width: 0; margin: 0 0 var(--espaco-4); padding: 0; border: 0; display: grid; gap: var(--espaco-2); }
.com-planos legend { margin: 0 0 var(--espaco-2); padding: 0; font-size: var(--letra-3); color: var(--tinta-2); }
.com-plano {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--espaco-3);
  align-items: start;
  margin: 0;
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--papel);
  cursor: pointer;
}
.com-plano:has(input:checked) { border-color: var(--acento-texto); background: var(--papel-3); }
.com-plano input { margin: 3px 0 0; }
.com-plano-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--espaco-3); min-width: 0; }
.com-plano-cabeca b { font-family: var(--fonte-titulo); font-size: 16px; color: var(--tinta); }
.com-plano-preco { font-size: var(--letra-3); color: var(--tinta-2); font-variant-numeric: var(--algarismos); }
.com-plano-itens {
  grid-column: 2;
  margin: var(--espaco-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-size: var(--letra-3);
  color: var(--tinta-2);
}
.com-plano-itens li::before { content: "\2713"; margin-right: 6px; color: var(--acento-texto); }
.com-termos { margin: var(--espaco-3) 0 var(--espaco-4); font-size: var(--letra-2); color: var(--neutro); line-height: 1.5; }
.com-termos a { color: var(--tinta-2); }
.com-de-novo { margin-top: var(--espaco-5); padding-top: var(--espaco-4); border-top: 1px solid var(--borda); }
.portaria-entrada .com-de-novo .portaria-apoio { margin-bottom: var(--espaco-3); }
.com-de-novo-botoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }

/* O SAIR DO PAINEL? (o GET /sair): o Sair e o botao principal, e a volta
   ao painel logo abaixo. */
.porta-sair { margin: 0 0 var(--espaco-3); }
.porta-ficar { margin: 0; }

/* O AUTENTICADOR NOVO (achado A0-09, a parcial _conta_seguranca.html): no
   computador, o QR primeiro; no celular, o botao que abre o app no proprio
   aparelho e a chave para copiar vem antes, e o QR desce, menor. So a ordem
   muda: nada some em largura nenhuma. */
.aut-caminhos { display: flex; flex-direction: column; gap: var(--espaco-4); }
.aut-no-celular { order: 3; }
.aut-qr-figura { order: 1; }
.aut-chave-bloco { order: 2; }
.aut-qr .aut-dica, .aut-codigos .aut-dica { margin: var(--espaco-2) 0 0; font-size: var(--letra-2); color: var(--neutro); }
.aut-chave-bloco .segredo { margin: 0; font-size: var(--letra-2); color: var(--neutro); line-height: 2; }
.aut-chave { letter-spacing: .04em; }
.aut-copiar { margin-top: var(--espaco-2); }
.aut-qr .qr { width: 220px; height: 220px; }
@media (max-width: 720px) {
  .aut-no-celular { order: 1; }
  .aut-chave-bloco { order: 2; }
  .aut-qr-figura { order: 3; }
  .aut-qr .qr { width: 160px; height: 160px; }
}

/* OS CODIGOS DE RECUPERACAO: duas colunas de codigos na letra dos numeros,
   e os botoes de copiar e baixar. */
.aut-codigos { margin: 0 0 var(--espaco-5); }
.aut-codigos h2 { margin: 0 0 var(--espaco-2); font-family: var(--fonte-titulo); font-size: 17px; }
.aut-codigos p { margin: 0 0 var(--espaco-3); font-size: 14px; color: var(--tinta-2); }
.aut-lista {
  margin: 0 0 var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4) var(--espaco-3) 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-2) var(--espaco-5);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--papel);
  color: var(--neutro);
  font-size: var(--letra-2);
}
.aut-lista code {
  font-family: var(--fonte-numero);
  font-variant-numeric: var(--algarismos);
  font-size: 15px;
  color: var(--tinta);
  user-select: all;
  overflow-wrap: anywhere;
}
.aut-acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: 0 0 var(--espaco-2); }
@media (max-width: 720px) {
  .aut-lista { gap: var(--espaco-2) var(--espaco-3); padding-left: 28px; }
  .aut-lista code { font-size: 13.5px; white-space: nowrap; overflow-wrap: normal; }
}
.aut-acoes .aut-copiar { margin-top: 0; }

/* A POLITICA E OS TERMOS: o texto corrido, numa coluna de leitura. Era um
   `<style>` dentro da pagina. */
body.legal-pagina { display: block; place-items: initial; padding: 0; }
.legal { max-width: 42rem; margin: 0 auto; padding: 2.5rem 16px 4rem; line-height: 1.55; color: var(--tinta-2); }
.legal h1 { margin: 0 0 .25rem; font-size: 1.6rem; color: var(--tinta); }
.legal h2 { margin: 2rem 0 .5rem; font-size: 1.1rem; color: var(--tinta); }
.legal p, .legal li { margin: .5rem 0; }
.legal strong { color: var(--tinta); }
.legal-quando { margin-bottom: 2rem; color: var(--neutro); }
.legal-outros { margin-top: 2rem; padding-top: var(--espaco-4); border-top: 1px solid var(--borda); }

/* MINHA CONTA (/conta/eu): um cartao por assunto, um embaixo do outro; o
   que muda a seguranca fica num `<details>` fechado. */
.ce-cartoes { display: grid; gap: var(--espaco-4); max-width: 720px; }
.ce-cartao {
  min-width: 0;
  padding: var(--espaco-5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
.ce-cartao > .titulo-secao { margin: 0 0 var(--espaco-2); }
.ce-cartao > .texto-apoio { margin: 0 0 var(--espaco-3); }
.ce-dados { display: grid; gap: var(--espaco-2); margin: 0 0 var(--espaco-2); }
.ce-dados > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--espaco-3); }
.ce-dados dt { color: var(--neutro); font-size: var(--letra-3); }
.ce-dados dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.ce-mudar { margin-top: var(--espaco-3); }
.ce-mudar > summary { list-style: none; display: inline-flex; }
.ce-mudar > summary::-webkit-details-marker { display: none; }
.ce-mudar[open] > summary { margin-bottom: var(--espaco-3); }
.ce-mudar form { max-width: 420px; }
.ce-mudar .aviso { margin: 0 0 var(--espaco-3); }
.ce-codigo { font-family: var(--fonte-numero); font-variant-numeric: var(--algarismos); }
.ce-troca { display: grid; gap: var(--espaco-5); }
.ce-troca > section h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 17px; }
.ce-troca .aut-qr h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 17px; }
.ce-troca .aut-qr > p { margin: 0 0 var(--espaco-3); font-size: 14px; color: var(--tinta-2); }
.ce-troca form .botao.fantasma { margin-left: var(--espaco-2); }
.ce-aparelhos { margin: 0 0 var(--espaco-3); padding: 0; list-style: none; display: grid; gap: var(--espaco-2); }
.ce-aparelhos li { display: grid; gap: 2px; padding: var(--espaco-2) 0; border-bottom: 1px solid var(--borda); }
.ce-aparelhos li:last-child { border-bottom: 0; }
.ce-aparelhos small { color: var(--neutro); font-size: var(--letra-2); }
.ce-aparelho-nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); }
.ce-mais { margin: 0 0 var(--espaco-3); }
.ce-mais > summary { cursor: pointer; font-size: var(--letra-3); color: var(--tinta-2); }
.ce-mais[open] > summary { margin-bottom: var(--espaco-2); }
@media (max-width: 720px) {
  .ce-cartao { padding: var(--espaco-4); }
  .ce-dados > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* MINHA CONTA NO PE DO TRILHO (base.html, so no modo SaaS): o nome e o papel
   de quem entrou embaixo do rotulo, em letra miuda, cortado com reticencias;
   Configuracoes logo abaixo, sem o empurrao para o pe que os dois dividiriam. */
.topo .conta-eu-link { height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.topo .conta-eu-link + .config-link { margin-top: 2px; }
.conta-eu-texto { display: grid; gap: 3px; min-width: 0; }
.conta-eu-texto small {
  overflow: hidden;
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  color: var(--neutro);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* [/dono: casco] */

/* [dono: casa] */
/* o pacote 04 do acabamento (29/10/2026) */
/* [/dono: casa] */

/* [dono: casco] */
/* o pacote 05 do acabamento (29/10/2026) */
/* [/dono: casco] */

/* [dono: casa] */
/* o pacote 06 do acabamento (29/10/2026) */
/* SUA MARCA, A TELA UNICA (29/10/2026, achado A6-152): o indice com o estado
   de cada parte, as secoes a vista (um cartao cada) e os formularios dentro.
   cm- e o prefixo da Configuracao da marca. */
.cm-indice { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: 0 0 var(--espaco-5); max-width: 920px; }
.cm-indice-item { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px 6px 14px; border: 1px solid var(--borda); border-radius: var(--raio-pilula); background: var(--papel-2); color: var(--tinta); font-size: var(--letra-3); font-weight: 600; text-decoration: none; }
.cm-indice-item:hover { border-color: var(--borda-forte); background: var(--papel-3); }
.cm-filtro { max-width: 720px; }
.cm-secao { max-width: 920px; margin: 0 0 var(--espaco-5); padding: var(--espaco-5); border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); min-width: 0; scroll-margin-top: 16px; }
.cm-secao-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cm-secao-topo .titulo-secao { margin: 0; }
.cm-secao > .texto-apoio { margin: 6px 0 var(--espaco-4); }
.cm-faltas { margin: 0 0 var(--espaco-4); padding: 12px 16px; border-radius: var(--raio-1); background: var(--alerta-fraco); }
.cm-faltas .texto-mini { margin: 0 0 4px; color: var(--alerta); font-weight: 600; }
.cm-faltas ul { margin: 0; padding-left: 18px; font-size: var(--letra-3); color: var(--tinta-2); line-height: 1.5; }
.cm-faltas a { color: var(--tinta); }
.cm-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 var(--espaco-4); }
.cm-bloco { margin-top: var(--espaco-5); padding-top: var(--espaco-5); border-top: 1px solid var(--borda); }
.cm-sub { margin: 0 0 var(--espaco-3); font-family: var(--fonte-titulo); font-size: var(--letra-4); font-weight: 650; color: var(--tinta-titulo); }
.cm-cor-linha { display: inline-flex; align-items: center; gap: 12px; }
.cm-rascunho { margin: 0 0 var(--espaco-5); padding-bottom: var(--espaco-5); border-bottom: 1px solid var(--borda); }
.cm-cor-codigo { font-variant-numeric: var(--algarismos); font-size: var(--letra-3); color: var(--tinta-2); }
.cm-mais-campos, .cm-trocar, .cm-mais-itens { margin: 0 0 var(--espaco-4); }
.cm-mais-campos > summary, .cm-trocar > summary, .cm-mais-itens > summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); padding: 8px 0; min-height: 40px; }
.cm-trocar[open] > summary, .cm-mais-campos[open] > summary { margin-bottom: var(--espaco-3); }
.cm-trocar .uso-opcoes { margin-bottom: var(--espaco-4); }
.cm-itens { display: grid; gap: var(--espaco-3); margin-bottom: var(--espaco-3); }
.cm-item { margin: 0; padding: 12px 14px 0; border: 1px solid var(--borda); border-radius: var(--raio-1); background: var(--papel); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 0 var(--espaco-3); min-width: 0; }
.cm-item .campo { margin-bottom: 12px; min-width: 0; }
.cm-item label { font-size: var(--letra-2); }
.cm-tela-propria { margin: var(--espaco-3) 0 0; }
.cm-lugares { display: grid; gap: var(--espaco-2); }
.cm-lugar { border: 1px solid var(--borda); border-radius: var(--raio-1); background: var(--papel); padding: 0 14px; min-width: 0; scroll-margin-top: 16px; }
.cm-lugar > summary { cursor: pointer; font-weight: 600; padding: 12px 0; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-lugar[open] { padding-bottom: 14px; }
.cm-mais { margin-top: var(--espaco-5); }
.cm-suporte { max-width: 920px; }
.cm-previa { max-width: 920px; }
.cm-previa-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: var(--espaco-3); }
.cm-previa-acoes form { margin: 0; }
/* o campo de arquivo escondido nao estica a secao (o mesmo defeito do
   achado A6-146, aqui com o seletor da tela: vence o input[type=file]) */
.cm-secao input[type=file].so-leitor, .cerebro-digerir input[type=file].so-leitor { width: 1px; min-height: 0; padding: 0; }
/* AS CONFIGURACOES EM GRUPOS (achado A6-165) e a pausa de tudo (achado
   A8-207). cfg- e o prefixo do hub. */
.cfg-pausa { max-width: 720px; margin: var(--espaco-5) 0 0; padding: var(--espaco-4) var(--espaco-5); border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); display: grid; gap: var(--espaco-3); min-width: 0; }
.cfg-pausa-ativa { border-color: var(--alerta-fio); }
.cfg-pausa-texto .titulo-secao { margin: 0 0 6px; }
.cfg-pausa-texto p { margin: 0 0 4px; }
.cfg-pausa form { margin: 0; }
.cfg-pausa-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--espaco-3); }
.cfg-pausa-form .campo { flex: 1 1 200px; max-width: 260px; }
.cfg-pausa-form button { margin-bottom: var(--espaco-3); }
.cfg-grupo { margin-top: var(--espaco-6); max-width: 920px; min-width: 0; }
.cfg-grupo .titulo-secao { margin: 0 0 var(--espaco-3); }
.cfg-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--espaco-2); }
.cfg-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 72px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); color: var(--tinta); text-decoration: none; min-width: 0; }
.cfg-item:hover { border-color: var(--borda-forte); background: var(--papel-3); }
.cfg-item-texto { display: grid; gap: 2px; min-width: 0; }
.cfg-item-texto b { font-weight: 600; overflow-wrap: break-word; }
.cfg-item-texto small { font-size: var(--letra-3); color: var(--neutro); overflow-wrap: break-word; line-height: 1.4; }
/* O CEREBRO: a busca, o filtro, os desativados e o editar do cartao
   (achado A6-160). cb- e o prefixo do Cerebro. O editar desce para uma
   linha propria do cartao, depois do pe. */
.cb-busca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--espaco-3); max-width: 920px; }
.cb-busca .campo { flex: 1 1 160px; min-width: 0; }
.cb-busca-texto { flex: 2 1 220px; }
.cb-busca button { margin-bottom: var(--espaco-3); }
.cb-ver { margin: 0 0 var(--espaco-4); font-size: var(--letra-3); color: var(--neutro); }
.cb-editar { grid-column: 1 / -1; grid-row: 5; margin-top: var(--espaco-2); }
.cb-editar > summary { list-style: none; display: inline-flex; }
.cb-editar > summary::-webkit-details-marker { display: none; }
.cb-editar[open] > form { margin-top: var(--espaco-3); max-width: 74ch; }
/* CONTAS E CHAVES: o token e o endereco prontos para copiar (achado A6-166).
   ch- e o prefixo de Contas e chaves. */
.ch-token { max-width: 720px; }
.ch-copiar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ch-copiar code { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 720px) {
  .cm-secao { padding: var(--espaco-4); }
  .cfg-pausa { padding: var(--espaco-4); }
  .cfg-pausa-form .campo { max-width: none; }
}
/* [/dono: casa] */

/* [dono: conteudo] */
/* o pacote 07 do acabamento (29/10/2026) */

/* A fila de revisao na pagina do post: "Revisando 1 de 4 · Pular". */
.post-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 0 0 var(--espaco-4);
  padding: 10px 14px;
  border: 1px solid var(--alerta-fio);
  border-radius: var(--raio-1);
  background: var(--alerta-fraco);
  font-size: 14px;
  color: var(--tinta-2);
}
.post-fila b { color: var(--tinta); font-weight: 650; }
.post-fila a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tinta);
  font-weight: 600;
}
.post-fila a:last-child { margin-left: auto; color: var(--neutro); font-weight: 500; }

/* Levar para o Instagram: os botoes neutros da pagina do post. */
.post-levar-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin: 0 0 var(--espaco-3);
}
.post-levar-botoes .botao,
.post-levar-botoes button { flex: 1 1 auto; min-height: 40px; }
.post-legenda-crua {
  width: 100%;
  min-height: 120px;
  margin: 0 0 var(--espaco-3);
}
.post-ja-postei {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-3);
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--borda);
}
.post-ja-postei .texto-mini { flex: 1 1 200px; margin: 0; }

/* Criar: de onde o post vem (o parecido, o dia do calendario, o item). */
.criar-partida {
  margin: 0 0 var(--espaco-4);
  padding: 10px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  background: var(--papel-2);
  font-size: 14px;
  color: var(--tinta-2);
}
/* "Confirmo que e verdade", logo abaixo da legenda. */
.criar-confirmo {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  margin: 0 0 var(--espaco-4);
  padding: 10px 12px;
  border: 1px solid var(--alerta-fio);
  border-radius: var(--raio-1);
  background: var(--alerta-fraco);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.criar-confirmo input { width: auto; margin: 3px 0 0; flex: none; }
.criar-confirmo span { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.criar-confirmo small { color: var(--neutro); font-size: 12.5px; font-weight: 400; }
details.criar-mais-texto { padding-top: var(--espaco-3); border-top: 1px solid var(--borda); }
/* O fundo da arte em quatro jeitos. */
fieldset.criar-fundos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  min-width: 0;
  margin: 0 0 var(--espaco-4);
  padding: 0;
  border: 0;
}
.criar-fundos legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.criar-fundo-opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  padding: 8px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.criar-fundo-opcao:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.criar-fundo-opcao input { width: auto; margin: 3px 0 0; flex: none; }
.criar-fundo-opcao span { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.criar-fundo-opcao small { color: var(--neutro); font-size: 12.5px; font-weight: 400; }
.criar-fundo-arquivo,
.criar-fundo-catalogo { width: 100%; max-width: 100%; margin: -2px 0 var(--espaco-1); font-size: 13px; }

/* O calendario que navega: as setas, o periodo e Semanas | Mes. */
.cal-navega {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-3);
  margin: 0 0 var(--espaco-4);
}
.cal-periodo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 15px;
  color: var(--tinta);
}
.cal-seta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-botao);
  color: var(--tinta-2);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.cal-seta:hover { color: var(--tinta); background: var(--papel-3); }
.cal-vista {
  display: inline-flex;
  margin-left: auto;
  padding: 3px;
  border-radius: 10px;
  background: var(--chao);
  box-shadow: inset 0 0 0 1px var(--borda);
}
.cal-vista a {
  padding: 6px 12px;
  border-radius: 7px;
  color: var(--neutro);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.cal-vista a[aria-current] { background: var(--papel-4); color: var(--tinta); }
/* O dia de fora do mes, na vista do mes: recua, sem sumir. */
.cal-dia.cal-fora { opacity: .45; }
/* As faixas do dia: campanha, promocao, dia fechado e data comemorativa. */
.cal-faixas { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.cal-faixa-item a {
  display: block;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--papel-3);
  color: var(--tinta-2);
  font-size: 11px;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cal-faixa-item a:hover { color: var(--tinta); }
.cal-faixa-data a { background: var(--alerta-fraco); color: var(--tinta); }
.cal-faixa-campanha a { box-shadow: inset 2px 0 0 var(--acento-texto); }
.cal-faixa-promocao a { box-shadow: inset 2px 0 0 var(--alerta); }
.cal-faixa-folga a { box-shadow: inset 2px 0 0 var(--neutro); }
.cal-nao-sobe { display: block; margin-top: 3px; font-size: 11px; color: var(--alerta); }
.cal-escrever { font-size: 12px; font-weight: 600; color: var(--tinta); }
.cal-criar-dia { margin: 6px 0 0; }
.cal-serie > summary { cursor: pointer; margin-top: 6px; font-size: 12px; color: var(--tinta-2); }

/* Automatico: os tres jeitos e o estilo das artes. */
fieldset.auto-modos,
fieldset.auto-estilos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espaco-2);
  min-width: 0;
  margin: 0 0 var(--espaco-4);
  padding: 0;
  border: 0;
}
.auto-modo,
.auto-estilo {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  padding: 10px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.auto-modo:has(input:checked),
.auto-estilo:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.auto-modo input,
.auto-estilo input { width: auto; margin: 3px 0 0; flex: none; }
.auto-modo span,
.auto-estilo span { display: flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.auto-modo small,
.auto-estilo small { color: var(--neutro); font-size: 12.5px; font-weight: 400; }
.auto-estilo-mini { width: 32px; height: 40px; flex: none; }
.auto-mini-fundo { fill: var(--papel-4); stroke: var(--borda-forte); }
.auto-estilo-clara .auto-mini-fundo,
.auto-estilo-moldes .auto-mini-fundo { fill: var(--tinta); }
.auto-mini-veu { fill: var(--chao); opacity: .8; }
.auto-mini-titulo { fill: var(--neutro); }
.auto-estilo-escura .auto-mini-titulo { fill: var(--tinta); }
.auto-mini-apoio { fill: var(--neutro); }
.auto-mini-destaque { fill: var(--grafico-2); }

/* Desempenho: o que mais rendeu, a ordem e o "ver tudo". */
.des-melhores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--espaco-3);
  margin: 0 0 var(--espaco-5);
}
.des-melhor {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding: var(--espaco-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
.des-melhor strong { font-size: 15px; line-height: 1.3; color: var(--tinta); }
.des-melhor-numeros { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--neutro); }
.des-melhor-numeros b { color: var(--tinta); font-variant-numeric: var(--algarismos); }
.des-melhor .botao { align-self: flex-start; margin-top: auto; }
.des-ordem { display: inline-flex; gap: var(--espaco-3); margin-left: auto; font-size: 13px; }
.des-ordem a { color: var(--neutro); }
.des-ordem a[aria-current] { color: var(--tinta); font-weight: 600; text-decoration: none; }
details.des-tudo { flex-basis: 100%; }
details.des-tudo > summary { cursor: pointer; font-size: 12.5px; color: var(--tinta-2); }
details.des-tudo[open] { display: flex; flex-wrap: wrap; gap: 10px var(--espaco-5); }
details.des-tudo[open] > summary { flex-basis: 100%; }

/* [/dono: conteudo] */

/* [dono: anuncios] */
/* o pacote 08 do acabamento (29/10/2026) */
/* [/dono: anuncios] */

/* [dono: casa] */
/* PLANO E COBRANCA (acabamento, pacote 04): os cartoes da tela, nas duas
   versoes (a da moldura e a solta, na portaria larga). So tokens da folha. */
.plano-tela { display: grid; gap: var(--espaco-4); max-width: 820px; min-width: 0; }
.plano-cartao { min-width: 0; padding: 20px 22px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); }
.plano-cartao > .titulo-secao { margin: 0 0 var(--espaco-3); }
.plano-cartao > .texto-apoio + .texto-apoio { margin-top: var(--espaco-2); }
.portaria .plano-cartao { margin: 0 0 var(--espaco-4); padding: 16px 18px; background: var(--papel); }
.plano-solta .titulo-secao { font-size: var(--letra-5); }
.plano-estado { margin: 0 0 var(--espaco-3); font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.plano-estado .etiqueta { margin-right: 6px; }
.plano-acao { margin: var(--espaco-4) 0 0; }
.plano-acao + .texto-mini { margin-top: var(--espaco-2); }
.plano-cancelar { margin-top: var(--espaco-4); }
.plano-cancelar > summary { list-style: none; }
.plano-cancelar > summary::-webkit-details-marker { display: none; }
.plano-cancelar[open] > form { display: grid; gap: 8px; margin-top: 8px; max-width: 420px; }
.plano-cancelar[open] > form .texto-mini { margin: 0; }
.plano-opcoes { display: grid; gap: var(--espaco-2); margin: 0 0 var(--espaco-4); }
.plano-opcao { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-1); background: var(--papel); cursor: pointer; }
.plano-opcao:has(input:checked) { border-color: var(--acento); }
.plano-opcao-fora { cursor: not-allowed; opacity: .8; }
.plano-opcao input { margin-top: 3px; }
.plano-opcao-texto { display: grid; gap: 2px; min-width: 0; }
.plano-opcao-texto > span { font-size: var(--letra-3); color: var(--tinta-2); }
.plano-opcao-texto small { font-size: var(--letra-2); color: var(--neutro); }
.plano-opcao-motivo { color: var(--alerta); }
.plano-pagamentos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.plano-pagamento { display: grid; grid-template-columns: 7.5em auto minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--borda); font-size: 14px; }
.plano-pagamento:last-child { border-bottom: 0; }
.plano-pagamento-dia { color: var(--tinta-2); font-variant-numeric: var(--algarismos); }
.plano-pagamento-valor { font-weight: 700; font-variant-numeric: var(--algarismos); }
.plano-pagamento-ate { color: var(--neutro); font-size: var(--letra-3); }
.plano-pagamento-recibo { color: var(--acento-texto); font-weight: 600; }
.plano-form { display: grid; gap: 6px; max-width: 460px; margin-top: var(--espaco-3); }
.plano-form .texto-mini { margin-top: 6px; }
.plano-form button { justify-self: start; margin-top: 8px; }
/* O USO DO PLANO (_uso_do_plano.html): os numeros e a IA de cada marca, em
   porcentagem, numa barra que e um `<progress>` (sem style na tela). */
.plano-uso { display: grid; gap: var(--espaco-3); min-width: 0; }
.plano-uso-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--espaco-3); margin: 0; }
.plano-uso-numero { margin: 0; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-1); background: var(--papel); }
.plano-uso-numero dt { font-size: var(--letra-3); color: var(--neutro); }
.plano-uso-numero dd { margin: 4px 0 0; color: var(--tinta-2); }
.plano-uso-numero dd b { font-size: var(--letra-5); color: var(--tinta); font-variant-numeric: var(--algarismos); }
.plano-uso-numero dd small { display: block; font-size: var(--letra-2); color: var(--neutro); }
.plano-uso-titulo { margin: var(--espaco-2) 0 0; font-size: var(--letra-4); font-weight: 650; }
.plano-uso-marcas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plano-uso-marca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 2fr) 4.5em; gap: 12px; align-items: center; font-size: 14px; }
.plano-uso-nome { min-width: 0; overflow-wrap: anywhere; }
.plano-uso-nome small { color: var(--neutro); }
.plano-uso-pct { text-align: right; font-variant-numeric: var(--algarismos); color: var(--tinta-2); }
.plano-uso-perto .plano-uso-pct { color: var(--alerta); font-weight: 700; }
.plano-uso-bateu .plano-uso-pct { color: var(--falha); font-weight: 700; }
.plano-barra { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: var(--raio-pilula); background: var(--papel-3); overflow: hidden; }
.plano-barra::-webkit-progress-bar { background: var(--papel-3); border-radius: var(--raio-pilula); }
.plano-barra::-webkit-progress-value { background: var(--tinta-2); border-radius: var(--raio-pilula); }
.plano-barra::-moz-progress-bar { background: var(--tinta-2); border-radius: var(--raio-pilula); }
.plano-uso-perto .plano-barra::-webkit-progress-value { background: var(--alerta); }
.plano-uso-perto .plano-barra::-moz-progress-bar { background: var(--alerta); }
.plano-uso-bateu .plano-barra::-webkit-progress-value { background: var(--falha); }
.plano-uso-bateu .plano-barra::-moz-progress-bar { background: var(--falha); }
/* A FAIXA DA MOLDURA (_avisos_da_conta.html): fina, no alto de main, sem o
   verde da decisao. O neutro e so a informacao; o aviso e o erro, o tom. */
.plano-faixas { display: grid; gap: 6px; margin: 0 0 var(--espaco-4); }
.plano-faixa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 9px 14px; border: 1px solid var(--borda); border-radius: var(--raio-1); background: var(--papel-2); font-size: var(--letra-3); line-height: 1.45; color: var(--tinta-2); }
.plano-faixa-aviso { border-color: var(--alerta-fio); background: var(--alerta-fraco); color: var(--tinta); }
.plano-faixa-erro { border-color: var(--falha-fio); background: var(--falha-fraco); color: var(--tinta); }
.plano-faixa-neutro { background: var(--papel-2); }
.plano-faixa-ir { color: var(--acento-texto); font-weight: 600; white-space: nowrap; }

/* SUAS MARCAS (marcas.html) e o "Nova marca" do seletor da moldura. */
.marcas-lista { list-style: none; margin: 0 0 var(--espaco-5); padding: 0; display: grid; gap: var(--espaco-2); max-width: 820px; }
.marcas-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel-2); min-width: 0; }
.marcas-aqui { border-color: var(--borda-forte); }
.marcas-nome { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.marcas-nome small { font-size: var(--letra-2); color: var(--neutro); }
.marcas-abrir { margin: 0; }
.marcas-renomear > summary { list-style: none; }
.marcas-renomear > summary::-webkit-details-marker { display: none; }
.marcas-renomear[open] { flex-basis: 100%; }
.marcas-form { display: grid; gap: 6px; max-width: 460px; margin-top: var(--espaco-2); }
.marcas-form .texto-mini { margin-top: 4px; }
.marcas-form button { justify-self: start; margin-top: 6px; }
.marcas-secao { max-width: 820px; margin: 0 0 var(--espaco-6); }
.marcas-secao > .titulo-secao { margin: 0 0 var(--espaco-2); }
.marcas-secao > form { margin-top: var(--espaco-3); }
.marcas-secao .perigo-caixa form { display: grid; gap: 6px; max-width: 460px; }
.marcas-cheio { display: grid; gap: 8px; justify-items: start; }
.marcas-cheio .texto-apoio { margin: 0; }
.marcas-pronta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: var(--espaco-3) 0; font-size: 14px; color: var(--tinta-2); }
.marcas-nova { color: var(--acento-texto); font-weight: 600; text-decoration: none; }
.marcas-nova .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* O PAINEL DA PLATAFORMA (plataforma.html): a portaria na largura do painel,
   as duas abas e a tabela. No telefone a tabela vira cartoes: o rotulo de
   cada celula vem do data-rotulo, e o cabecalho sai so da vista (o leitor de
   tela le). */
.plat-tela { max-width: 1240px; }
.plat-resumo { max-width: none; }
.plat-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--espaco-4); }
.plat-abas a { padding: 8px 16px; border: 1px solid var(--borda); border-radius: var(--raio-pilula); color: var(--tinta-2); font-weight: 600; text-decoration: none; }
.plat-abas a.atual { border-color: var(--borda-forte); background: var(--papel-3); color: var(--tinta); }
.plat-barra { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--espaco-3); margin: 0 0 var(--espaco-4); }
.plat-busca { display: flex; flex: 1 1 320px; gap: 8px; min-width: 0; }
.plat-busca input { flex: 1; min-width: 0; }
.plat-nova > summary, .plat-mais > summary, .plat-sessoes > summary { list-style: none; }
.plat-nova > summary::-webkit-details-marker, .plat-mais > summary::-webkit-details-marker, .plat-sessoes > summary::-webkit-details-marker { display: none; }
.plat-form { display: grid; gap: 6px; max-width: 420px; margin: 8px 0 0; }
.plat-form .texto-mini { margin-top: 2px; }
.plat-form button { justify-self: start; }
.plat-tabela { width: 100%; border-collapse: collapse; margin: 0 0 var(--espaco-5); font-size: 14px; }
.plat-tabela th { padding: 8px 10px; border-bottom: 1px solid var(--borda-forte); color: var(--neutro); font-size: var(--letra-3); font-weight: 600; text-align: left; }
.plat-tabela td { padding: 12px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; color: var(--tinta-2); }
.plat-tabela td strong { color: var(--tinta); }
.plat-tabela td small { display: block; margin-top: 3px; font-size: var(--letra-2); color: var(--neutro); overflow-wrap: anywhere; }
.plat-acoes { width: 1%; white-space: nowrap; }
.plat-mais-caixa { display: grid; gap: var(--espaco-3); width: min(320px, 80vw); white-space: normal; padding: 12px 0 4px; }
.plat-sessoes { margin: 0 0 var(--espaco-5); }
.plat-planos { list-style: none; margin: 0 0 var(--espaco-4); padding: 0; display: grid; gap: var(--espaco-3); }
.plat-plano { padding: 16px 18px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel); }
.plat-plano-form { display: grid; gap: 10px; }
.plat-plano-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.plat-plano-cabeca small { color: var(--neutro); font-size: var(--letra-2); }
.plat-plano-aviso { margin: 0; }
.plat-plano-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.plat-plano-campos label { display: grid; gap: 4px; min-width: 0; }
.plat-plano-campos .texto-mini { margin: 0; }
.plat-plano-campos .plat-venda { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.plat-plano-form > button { justify-self: start; }
.plat-nova { margin: 0 0 var(--espaco-4); }
@media (max-width: 720px) {
  .plano-cartao { padding: 16px; }
  /* o "?" da gaveta mora no canto do alto de main, no telefone */
  .plano-faixas { margin-right: 48px; }
  .plano-pagamento { grid-template-columns: minmax(0, 1fr) auto; }
  .plano-uso-marca { grid-template-columns: minmax(0, 1fr) 4em; }
  .plano-uso-marca .plano-barra { grid-column: 1 / -1; grid-row: 2; }
  .plat-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .plat-tabela tr { display: block; margin: 0 0 var(--espaco-3); padding: 6px 12px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--papel); }
  .plat-tabela td { display: block; padding: 8px 0; }
  .plat-tabela tr td:last-child { border-bottom: 0; }
  .plat-tabela td::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; font-size: var(--letra-2); color: var(--neutro); }
  .plat-acoes { width: auto; white-space: normal; }
}
/* [/dono: casa] */

/* [dono: casco] */
/* o pacote 05 do acabamento (29/10/2026) */
/* [/dono: casco] */

/* [dono: casa] */
/* o pacote 06 do acabamento (29/10/2026) */
/* [/dono: casa] */

/* [dono: conteudo] */
/* o pacote 07 do acabamento (29/10/2026) */
/* [/dono: conteudo] */

/* [dono: anuncios] */
/* o pacote 08 do acabamento (29/10/2026) */
/* [/dono: anuncios] */

/* [dono: casa] */
/* o pacote 06 do acabamento (29/10/2026) */
/* [/dono: casa] */

/* [dono: conteudo] */
/* o pacote 07 do acabamento (29/10/2026) */
/* [/dono: conteudo] */

/* [dono: anuncios] */
/* o pacote 08 do acabamento (29/10/2026) */

/* A PÁGINA DO CRIATIVO DE ANÚNCIO (29/10/2026, anuncios_criativo.html). A
   grade é a da página do post (.post-grade); o que é só do criativo leva o
   prefixo cri-. TELA NOVA: espera o olhar do dono. */
.cri-andando { display: flex; align-items: center; gap: var(--espaco-2); }
/* A FAIXA DO ANÚNCIO, embaixo da arte: o título do anúncio e a descrição à
   esquerda, o botão de chamada à direita, como a Meta desenha. */
.cri-faixa {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espaco-3);
  padding: 10px var(--espaco-3);
  background: var(--papel-2);
  border-bottom: 1px solid var(--borda);
}
.cri-faixa-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cri-faixa-texto b { font-size: var(--letra-3); color: var(--tinta); font-weight: 600;
  overflow-wrap: anywhere; }
.cri-faixa-texto small { font-size: 12px; color: var(--neutro); overflow-wrap: anywhere; }
.cri-faixa-botao {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: var(--raio-botao);
  background: var(--papel-4);
  color: var(--tinta);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.cri-meta-situacao { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--espaco-2); margin: 0 0 var(--espaco-3); }
/* OS NÚMEROS DO ANÚNCIO: três medidas lado a lado, que quebram no telefone. */
.cri-numeros {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-2); margin: 0 0 var(--espaco-2);
}
.cri-numeros div { background: var(--papel-2); border-radius: var(--raio-2);
  padding: var(--espaco-2) var(--espaco-3); min-width: 0; }
.cri-numeros dt { font-size: 12px; color: var(--neutro); }
.cri-numeros dd { margin: 0; font-family: var(--fonte-numero); font-size: var(--letra-5);
  color: var(--tinta-titulo); white-space: nowrap; }
.cri-meta form + form { margin-top: var(--espaco-2); }
.cri-troca label { display: block; margin-bottom: var(--espaco-1); font-size: 14px; }
.cri-linha { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }
.cri-linha select { flex: 1 1 200px; min-width: 0; }
/* OS CAMINHOS DE SEMPRE: botões neutros que quebram em quantas linhas
   precisarem, sem rolar de lado no telefone. */
.cri-caminhos { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.cri-caminhos .botao { flex: 1 1 auto; text-align: center; }
@media (max-width: 720px) {
  .cri-numeros dd { font-size: var(--letra-4); }
}

/* A LISTA DE CRIATIVOS (29/10/2026): a busca, a campanha e a ordem numa
   linha que quebra no telefone; a linha da Meta em cada cartão; e as saídas
   do painel (responder as perguntas, fazer as artes que faltam). */
.anu-cri-procurar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--espaco-2); margin: 0 0 var(--espaco-4);
}
.anu-cri-procurar-campo { flex: 1 1 180px; min-width: 0; margin: 0; }
.anu-cri-procurar-campo input, .anu-cri-procurar-campo select { width: 100%; }
.anu-cri-limpar { font-size: var(--letra-2); }
.anu-cri-painel-acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2);
  margin-top: var(--espaco-3);
}
.anu-cri-painel-acoes form { margin: 0; }
.anu-cri-na-meta {
  display: block;
  margin: 0 0 var(--espaco-2);
  font-size: var(--letra-2);
  line-height: 1.4;
  color: var(--neutro);
}
.anu-cri-na-meta.anu-cri-no-ar { color: var(--tinta); font-weight: 600; }

/* O GERENTE (29/10/2026, o acabamento). A IA fora do ar, antes da caixa. */
.anu-ia-fora { margin: 0; }
/* As conversas recentes logo abaixo da caixa: só no telefone, onde o trilho
   desce para o fim da página; no computador quem as mostra é o trilho. */
.anu-ia-recentes { display: none; }
@media (max-width: 1100px) {
  .anu-ia-recentes { display: grid; gap: 2px; }
}
.anu-ia-recentes .anu-ia-trilho-grupo { margin: 0 0 4px; }
.anu-ia-recentes a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--espaco-2); min-height: 44px; padding: 6px 10px;
  border-radius: 10px; color: var(--tinta); text-decoration: none;
}
.anu-ia-recentes a:hover { background: var(--papel-2); }
.anu-ia-recentes small { font-size: 12px; color: var(--neutro); white-space: nowrap; }
/* Os três passos de começar, na coluna da marca sem campanha. */
.anu-ia-passos ol { margin: 0 0 var(--espaco-3); padding-left: 1.2em; display: grid;
  gap: var(--espaco-2); }
.anu-ia-passos li b { display: block; font-size: var(--letra-3); color: var(--tinta); }
.anu-ia-passos li small { font-size: var(--letra-2); color: var(--neutro); }
/* As respostas prontas sob a última fala do Gerente. */
.anu-ia-respostas { display: flex; flex-wrap: wrap; gap: var(--espaco-2);
  margin: 0 0 var(--espaco-3) 44px; }
.anu-ia-respostas form { margin: 0; }
.anu-ia-resposta { min-height: 36px; padding: 6px 14px; border-radius: var(--raio-pilula);
  font-size: var(--letra-2); }
/* A primeira mensagem pensando: o fio provisório e os atalhos apagados. */
.anu-ia-conversa-nova { margin: 0 0 var(--espaco-3); }
.anu-ia-esperando-resposta .anu-ia-atalhos,
.anu-ia-esperando-resposta .anu-ia-ola { opacity: .35; pointer-events: none; }
/* Apagar a conversa pede o "Sim, apagar". */
.anu-ia-apagar-pergunta { max-width: 88ch; margin-top: var(--espaco-6);
  padding-top: var(--espaco-3); border-top: 1px solid var(--borda); }
.anu-ia-apagar-pergunta > summary { cursor: pointer; font-size: var(--letra-2);
  color: var(--falha); width: fit-content; }
.anu-ia-apagar-pergunta .anu-ia-apagar { margin-top: var(--espaco-3); padding-top: 0;
  border-top: 0; }
.anu-ia-gpt .anu-ia-apagar-pergunta { max-width: 760px; margin-left: auto;
  margin-right: auto; width: 100%; }
@media (max-width: 720px) {
  .anu-ia-respostas { margin-left: 0; }
}

/* AS REFERÊNCIAS SÃO UMA SÓ (29/10/2026): a segunda fileira, sob as sub-abas
   de Criativos, troca entre o estilo das artes e os anúncios dos concorrentes. */
.cri-referencias { margin: calc(-1 * var(--espaco-2)) 0 var(--espaco-4); }
.cri-apagar-concorrente { margin: 0 0 var(--espaco-3); }
.cri-apagar-concorrente > summary { cursor: pointer; font-size: var(--letra-2);
  color: var(--falha); width: fit-content; }
.cri-apagar-concorrente form { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--espaco-2) var(--espaco-3); margin-top: var(--espaco-2); }
/* [/dono: anuncios] */

/* [dono: anuncios] */
/* o pacote 09 do acabamento (29/10/2026) */
/* [/dono: anuncios] */

/* [dono: casa] */
/* o pacote 06 do acabamento (29/10/2026) */
/* [/dono: casa] */

/* [dono: conteudo] */
/* o pacote 07 do acabamento (29/10/2026) */
/* [/dono: conteudo] */

/* [dono: anuncios] */
/* o pacote 08 do acabamento (29/10/2026) */
/* [/dono: anuncios] */

/* [dono: anuncios] */
/* o pacote 09 do acabamento (29/10/2026) */

/* A LISTA DE CAMPANHAS: os filtros logo abaixo do titulo, e as encerradas
   numa dobra no fim, com os mesmos cartoes. */
.anu-lista-filtros { margin-top: calc(-1 * var(--espaco-2)); }
.anu-lista-encerradas { margin-top: var(--espaco-5); }
.anu-lista-encerradas > summary .anu-nota { margin-left: var(--espaco-2); }

/* ANTES DE COMECAR: o que a casa precisa para a primeira campanha, item a
   item, com o link de cada um. O que ja esta pronto fica apagado; o que
   falta, com a frase e a saida. */
.anu-antes { margin-top: var(--espaco-4); display: grid; gap: var(--espaco-3); }
.anu-antes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-3); }
.anu-antes-lista li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: var(--espaco-2) var(--espaco-3);
  align-items: baseline;
}
.anu-antes-marca { font-weight: 700; text-align: center; color: var(--neutro); }
.anu-antes-ok .anu-antes-marca { color: var(--acento-texto); }
.anu-antes-ok .anu-antes-texto { color: var(--neutro); }
.anu-antes-falta .anu-antes-marca { color: var(--alerta); }
.anu-antes-texto { display: grid; gap: 2px; min-width: 0; color: var(--tinta); }
.anu-antes-texto small { color: var(--neutro); font-size: var(--letra-2); line-height: 1.45; }
.anu-antes-lista .link-acento { white-space: nowrap; }
/* no telefone, e na coluna estreita de Criar, o link desce para baixo do texto */
@media (max-width: 600px) {
  .anu-antes-lista li { grid-template-columns: 20px minmax(0, 1fr); }
  .anu-antes-lista .link-acento { grid-column: 2; white-space: normal; }
}
.anu-criar .anu-antes-lista li { grid-template-columns: 20px minmax(0, 1fr); }
.anu-criar .anu-antes-lista .link-acento { grid-column: 2; white-space: normal; }

/* MUDAR A VERBA E O FIM, no cartao da verba da campanha que esta na Meta:
   duas dobras pequenas, com o campo e o botao na mesma fileira. */
.anu-mudar {
  display: grid;
  gap: var(--espaco-2);
  margin-top: var(--espaco-4);
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--borda);
}
.anu-mudar-item > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--letra-3);
  font-weight: 600;
  color: var(--acento-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.anu-mudar-item > summary::-webkit-details-marker { display: none; }
.anu-mudar-form { display: grid; gap: var(--espaco-2); margin-top: var(--espaco-2); }
.anu-mudar-form label { font-size: var(--letra-2); color: var(--neutro); }
.anu-mudar-form small { font-size: var(--letra-2); color: var(--neutro); line-height: 1.45; }
.anu-mudar-linha { display: flex; gap: var(--espaco-2); align-items: center; }
.anu-mudar-linha input { flex: 1 1 auto; min-width: 0; }
.anu-mudar-linha button { flex: none; }

/* OS DETALHES DA META NA COLUNA DO TRABALHO, logo antes do plano: a primeira
   coisa da coluna nao leva a margem de cima da dobra comum */
.anu-campanha-trabalho > #meta { margin: 0 0 var(--espaco-5); }

/* OS PUBLICOS NA META, pelo nome curto (sem o prefixo da conta) */
.anu-meta-publicos { list-style: none; margin: 0 0 var(--espaco-3); padding: 0; display: grid; gap: 4px; }
.anu-meta-publicos li {
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-3);
  font-size: var(--letra-3);
  color: var(--tinta-2);
}
.anu-meta-publicos li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.anu-meta-publicos .anu-nota { flex: none; }

/* QUEM E ONDE ANTES DE MONTAR O PLANO: os dois campos curtos do momento */
.anu-plano-form { display: grid; gap: var(--espaco-3); }
.anu-plano-quem { display: grid; gap: var(--espaco-2); max-width: 52ch; }
.anu-plano-quem .campo { margin-bottom: 0; }

/* PARA ONDE A CAMPANHA LEVA (o momento, quando o plano nao escolheu) */
.anu-destino-form { display: grid; gap: var(--espaco-3); justify-items: start; }

/* A CONVERSA DE CRIAR: o "ou conte do seu jeito" depois das metas de um
   toque, e o "Guardar tambem na marca" depois de montar */
.anu-cv-ou { margin: var(--espaco-3) 0 var(--espaco-2); }
.anu-cv-ensinar {
  display: grid;
  gap: var(--espaco-2);
  justify-items: start;
  margin-top: var(--espaco-4);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--borda);
}

/* O CRIAR A MAO: a nota do WhatsApp sem o robo, embaixo da opcao */
.anu-a-mao-nota { display: block; margin-top: 2px; color: var(--neutro); font-size: var(--letra-2); line-height: 1.45; }

/* IMPULSIONAR UM POST: a lista dos posts, um por linha, com os numeros */
.anu-impulso-posts { display: grid; gap: var(--espaco-2); }
.anu-impulso-posts small { display: block; color: var(--neutro); font-size: var(--letra-2); }

/* AS REGRAS DO PILOTO: o jeito de cada uma, em selo, e a dobra de ajustar */
.anu-regra-jeito {
  display: inline-block;
  margin-left: var(--espaco-1);
  padding: 1px var(--espaco-2);
  border-radius: var(--raio-selo);
  font-size: var(--letra-1);
  font-weight: 600;
  color: var(--tinta-2);
  box-shadow: inset 0 0 0 1px var(--borda-forte);
  white-space: nowrap;
}
.anu-regra-perguntar { color: var(--alerta); box-shadow: inset 0 0 0 1px var(--alerta-fio); }
.anu-regra-desligado { color: var(--neutro); }
.anu-regras-ajustar { margin-top: var(--espaco-4); }

/* O CORRIGIR COM A CAMPANHA NA META: a frase do que nao se troca la */
.anu-corrigir-na-meta { margin: 0 0 var(--espaco-4); }
/* [/dono: anuncios] */

/* [dono: anuncios] */
/* o pacote 10 do acabamento (29/10/2026) */

/* A FAIXA DE ESTADO das sub-abas do WhatsApp (29/10/2026): o WhatsApp, o
   robô e o fluxo, cada um com o seu caminho, e o que falta para responder. */
.anu-wa-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin: 0 0 var(--espaco-3);
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
.anu-wa-faixa-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; }
.anu-wa-faixa-nome { color: var(--neutro); font-weight: 600; }
.anu-wa-faixa-item small { color: var(--neutro); font-size: 12.5px; }
.anu-wa-faixa-form { display: inline; margin: 0; }
.anu-wa-faixa-falta { flex: 1 1 100%; margin: 0; padding-top: 8px; border-top: 1px solid var(--borda); font-size: 13.5px; color: var(--tinta-2); }
.anu-wa-faixa-falta b { color: var(--alerta); font-weight: 600; }
/* com a faixa, a conversa do computador desconta a altura dela (sem rolagem) */
@media (min-width: 1001px) {
  .anu-wa-faixa ~ .anu-wa-app { height: max(540px, calc(100vh - var(--topo-altura) - 290px)); }
}

/* o filtro "Esperando você": o primeiro, com o ponto da espera */
.anu-wa-filtro-espera i { color: var(--acento-texto); font-weight: 700; }

/* a marca sem conversa nenhuma: os quatro passos para começar */
.anu-wa-comeco { padding: 16px 14px; }
.anu-wa-comeco-titulo { margin: 0 0 12px; font-size: 14px; color: var(--tinta-2); }
.anu-wa-passos { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.anu-wa-passos li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; }
.anu-wa-passos li b { display: block; font-weight: 600; }
.anu-wa-passos li small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--neutro); }
.anu-wa-passo-marca {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--borda-forte);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tinta-2);
}
.anu-wa-passos li.feito .anu-wa-passo-marca { border-color: transparent; background: var(--acento-fraco); color: var(--acento-texto); }
.anu-wa-passo-marca .ico { width: 14px; height: 14px; }
.anu-wa-baixar { margin: 10px 14px 14px; font-size: 13px; }
.anu-wa-baixar small { margin-left: 6px; }

/* o menu da conversa: bloquear e apagar os dados */
.anu-wa-menu { position: relative; }
.anu-wa-menu > summary { list-style: none; cursor: pointer; }
.anu-wa-menu > summary::-webkit-details-marker { display: none; }
.anu-wa-menu-caixa {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 6;
  display: grid;
  gap: 10px;
  width: 280px;
  padding: 12px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-2);
  background: var(--papel-3);
  box-shadow: var(--sombra-pop);
}
.anu-wa-menu-caixa form { display: grid; gap: 6px; margin: 0; }
.anu-wa-apagar > summary { cursor: pointer; font-size: 13px; }
.anu-wa-apagar form { margin-top: 8px; }
.anu-wa-perigo { color: var(--falha); border-color: var(--falha-fio); }

/* a venda registrada, com o Desfazer ao lado */
.anu-wa-chat-acoes .anu-wa-vendida + form { margin: 0; }

/* o lote do Funil aberto na conversa */
.anu-wa-lote {
  flex: none;
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid var(--borda);
  background: var(--acento-fraco);
  font-size: 13px;
  color: var(--tinta-2);
}
.anu-wa-lote b { color: var(--tinta); }

/* guardar a resposta para o robô */
.anu-wa-ensinar {
  flex: none;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--borda);
  background: var(--papel-3);
}
.anu-wa-ensinar-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--tinta-2); }
.anu-wa-ensinar-titulo b { color: var(--tinta); }
.anu-wa-ensinar-titulo .ico { width: 16px; height: 16px; color: var(--acento-texto); }
.anu-wa-ensinar input, .anu-wa-ensinar textarea { width: 100%; min-width: 0; }
.anu-wa-ensinar-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* o link de pagamento que falta, discreto, na barra de escrever */
.anu-wa-por-link { color: var(--neutro); text-decoration: underline; text-underline-offset: 3px; }

/* o que falta para o robô responder, no painel Robô */
.anu-wa-falta { margin: 0 0 var(--espaco-3); }
.anu-wa-falta ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--tinta-2); }
.anu-wa-falta li + li { margin-top: 4px; }

/* o uso do robô no SaaS, sem dólar */
.anu-wa-uso { margin-top: var(--espaco-4); }
.anu-wa-uso p { margin: 0 0 6px; font-size: 14px; color: var(--tinta-2); }
.anu-wa-uso b { color: var(--tinta); }
.anu-wa-nunca-link { margin: var(--espaco-4) 0 0; font-size: 13.5px; }

/* a Conversa do robô: o modelo recomendado, a primeira fala do fluxo, as
   regras com rótulo à vista e o "Voltar ao bloco" do celular */
.anu-rb-modelo-recomendado { border-color: var(--acento-fio, var(--borda-forte)); }
.anu-rb-recomendado { justify-self: start; margin-bottom: 4px; }
.anu-rb-fala-do-fluxo {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-3);
  font-size: 14px;
  color: var(--tinta-2);
  white-space: pre-line;
}
.anu-rb-nunca-link { margin: 0; font-size: 13.5px; }
.anu-rb-regra-rotulo { display: none; font-size: 12.5px; color: var(--neutro); }
.anu-rb-regra-texto, .anu-rb-regra-vai { display: grid; gap: 4px; min-width: 0; }
.anu-rb-regra-texto[hidden], .anu-rb-regra-vai[hidden], .anu-rb-regra-nada[hidden] { display: none; }
.anu-rb-regra-nada { align-self: center; color: var(--neutro); }
@media (max-width: 720px) {
  .anu-rb-regra-rotulo { display: block; }
  .anu-wa-faixa { gap: 8px 14px; padding: 10px 12px; }
  .anu-wa-menu-caixa { right: auto; left: 0; width: min(280px, calc(100vw - 32px)); }
}
.anu-rb-voltar-ao-bloco { margin-bottom: 10px; }

/* A GRADE DA SEMANA da Agenda (29/10/2026): um dia por linha, com "Abre", a
   manhã e a tarde, no lugar das 14 "Faixa N" */
.ag-grade { display: grid; gap: 4px; max-width: 760px; margin-bottom: var(--espaco-5); }
.ag-grade-cabeca { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; font-size: 12.5px; color: var(--neutro); }
.ag-grade-dia { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; padding: 8px 0; border: 0; border-top: 1px solid var(--borda); }
.ag-grade-abre { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ag-grade-faixa { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--neutro); }
.ag-grade-faixa input[type="time"] { width: 100%; min-width: 0; }
.ag-grade-turno { display: none; font-size: 12px; color: var(--neutro); }
.ag-grade-fechado .ag-grade-faixa { opacity: .45; }
.ag-grade-acoes { margin: 6px 0; }
.ag-grade-vagas { margin: 4px 0 12px; }
.ag-grade-vagas > summary { cursor: pointer; font-size: 13.5px; color: var(--tinta-2); }
@media (max-width: 720px) {
  .ag-grade-cabeca { display: none; }
  .ag-grade-dia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; }
  .ag-grade-abre { grid-column: 1 / -1; }
  .ag-grade-turno { display: inline; }
}
/* [/dono: anuncios] */

/* [dono: casa] */
/* o pacote 11 do acabamento (29/10/2026) */
/* [/dono: casa] */

/* [dono: casa] */
/* o pacote 06 do acabamento (29/10/2026) */
/* [/dono: casa] */

/* [dono: conteudo] */
/* o pacote 07 do acabamento (29/10/2026) */
/* [/dono: conteudo] */

/* [dono: anuncios] */
/* o pacote 08 do acabamento (29/10/2026) */
/* [/dono: anuncios] */

/* [dono: anuncios] */
/* o pacote 09 do acabamento (29/10/2026) */
/* [/dono: anuncios] */

/* [dono: anuncios] */
/* o pacote 10 do acabamento (29/10/2026) */
/* [/dono: anuncios] */

/* [dono: casa] */
/* o pacote 11 do acabamento (29/10/2026) */

/* VENDAS, HISTORICO, AVISOS E SUPORTE (acabamento p11,
   web/telas_de_vendas_e_avisos.py). Os blocos sao os da casa (a lista de
   Membros, os numeros dos Resultados, o vazio); aqui so o que e delas. */
.vnd-numeros { margin-bottom: var(--espaco-3); }
details.vnd-lancar { margin: 0 0 var(--espaco-3); padding: 0; border-top: 0; }
.vnd-lancar > summary { list-style: none; display: inline-flex; }
.vnd-lancar > summary::-webkit-details-marker { display: none; }
.vnd-lancar[open] > summary { margin-bottom: var(--espaco-2); }
.vnd-formulario {
  padding: 18px 20px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
  max-width: 560px;
}
.vnd-formulario select, .vnd-formulario input[type="text"] { width: 100%; max-width: 100%; }
.vnd-erro { margin: 0 0 var(--espaco-2); color: var(--falha); font-weight: 600; }
/* o filtro: os campos numa fileira que quebra, nunca rola de lado */
.vnd-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  align-items: flex-end;
  margin: 0 0 var(--espaco-3);
}
.vnd-filtro-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 160px; max-width: 240px; }
.vnd-filtro-campo > span { font-size: var(--letra-2); color: var(--neutro); }
.vnd-filtro-campo select { width: 100%; max-width: 100%; }
.vnd-lista .peca-nome small a { color: inherit; }
.vnd-fora { opacity: .72; }
.vnd-desfazer[open] > form { max-width: 300px; }

.hist-dia { margin-bottom: var(--espaco-3); }
.hist-dia > .titulo-secao { margin-bottom: var(--espaco-2); }

.avs-canais { margin-bottom: var(--espaco-3); }
.avs-titulo { margin-top: var(--espaco-3); }
.avs-formulario { max-width: 720px; }
/* o que avisar e por onde: uma linha por tipo, as caixinhas a direita */
.avs-tabela {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
.avs-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 92px;
  gap: var(--espaco-2);
  align-items: center;
  padding: 12px 16px;
}
.avs-linha + .avs-linha { border-top: 1px solid var(--borda); }
.avs-cabeca { padding-top: 10px; padding-bottom: 8px; font-size: var(--letra-2); color: var(--neutro); }
.avs-cabeca > span { text-align: center; }
.avs-tipo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avs-tipo small { color: var(--neutro); font-size: var(--letra-2); line-height: 1.4; }
.avs-marca { display: flex; justify-content: center; align-items: center; gap: 6px; cursor: pointer; }
/* o nome do canal ao lado da caixinha so no telefone (no computador o
   cabecalho da tabela ja diz) */
.avs-rotulo-do-canal { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avs-silencio { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: var(--espaco-2) 0; }
.avs-formulario > button { margin-top: var(--espaco-3); }

.sup-contatos { margin-bottom: var(--espaco-3); }
.sup-titulo { margin-top: var(--espaco-3); }
.sup-perguntas { display: flex; flex-direction: column; gap: var(--espaco-2); max-width: 720px; }
details.sup-pergunta {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--papel-2);
}
.sup-pergunta > summary { font-size: 15px; color: var(--tinta); }
.sup-pergunta > p { margin: 8px 0 0; color: var(--tinta-2); font-size: 14px; max-width: 65ch; }
.ajuda-suporte { margin: var(--espaco-3) 0 0; padding-top: var(--espaco-2); border-top: 1px solid var(--borda); font-size: 14px; }

/* a faixa apertada (721px com o menu ao lado): as duas caixinhas encolhem
   e o nome do aviso fica com o resto da fileira */
@media (max-width: 1000px) {
  .avs-linha { grid-template-columns: minmax(0, 1fr) 64px 64px; }
}
@media (max-width: 720px) {
  .avs-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .avs-linha > .avs-tipo { grid-column: 1 / -1; }
  .avs-cabeca { display: none; }
  .avs-marca { justify-content: flex-start; }
  .avs-rotulo-do-canal { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .vnd-filtro-campo { max-width: none; flex-basis: 100%; }
  .vnd-numeros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* [/dono: casa] */