/* ═══════════════════════════════════════════════════════════════════
   Eficazia Imob — sistema de cor derivado da logo

   O símbolo é um cérebro dividido: hemisfério esquerdo AZUL (orgânico),
   direito MAGENTA (grafo de nós), casa branca no meio atravessando os
   dois. É a tese do produto, e por isso a semântica segue o símbolo:

       --own  = AZUL     → o que é seu   (carteira, inventário privado)
       --net  = MAGENTA  → o que é da rede (catálogo, parceria)
       --grad = os dois se encontrando   (só no aceite de termos)

   Azul #006CFC e magenta #FC3CF0 são as cores amostradas do arquivo
   original. Elas NÃO passam em contraste sobre branco (4,61 e 2,98 : 1),
   então o tema claro usa versões escurecidas e os neon puros ficam para
   o tema escuro e para gradientes, onde não carregam texto.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Logo COMPLETA do arquivo original: símbolo + "Eficazia" + traço + IMOB.
     JPEG e não PNG porque é neon com degradê sobre preto — sem transparência
     a perder, e o PNG custava 5x mais bytes para o mesmo resultado. */
  --logo: url("data:image/webp;base64,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");
  --brand-blue: #006CFC;
  --brand-mag: #FC3CF0;
  --grad: linear-gradient(90deg, var(--brand-blue), var(--brand-mag));

  --own: #0A5FE0; --own-2: #0B6CFC; --own-soft: #E8F0FE;
  --net: #B31CAA; --net-2: #D22FC6; --net-soft: #FBE8F9;
  --ink: #0C1220; --body: #2C3648; --muted: #5F6A80;
  --ground: #EEF1F6; --surface: #FFFFFF; --surface-2: #F6F8FC;
  --line: #DEE3ED; --line-2: #C6CEDD;
  --warn: #9C6206; --warn-soft: #FBF0DC;
  --crit: #C0261C; --crit-soft: #FCE8E6;
  --ok: #0E7A55; --ok-soft: #E2F3EC;
  --on-accent: #FFFFFF;
  --shadow: 0 1px 2px rgba(12,18,32,.06), 0 8px 24px -12px rgba(12,18,32,.20);
  --r: 10px;
  --sans: ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --own: #4D93FF; --own-2: #6BA6FF; --own-soft: #0D1D3B;
    --net: #FA6BF0; --net-2: #FF8CF5; --net-soft: #2A0D2A;
    --ink: #E8EDF7; --body: #B4BFD2; --muted: #7F8CA3;
    --ground: #05070C; --surface: #0C111C; --surface-2: #111827;
    --line: #1E2636; --line-2: #2E384B;
    --warn: #E2A544; --warn-soft: #2A2011;
    --crit: #FF8B80; --crit-soft: #2E1412;
    --ok: #3FCB94; --ok-soft: #0A2620;
    --on-accent: #06121F;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 26px -12px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"] {
  --own: #4D93FF; --own-2: #6BA6FF; --own-soft: #0D1D3B;
  --net: #FA6BF0; --net-2: #FF8CF5; --net-soft: #2A0D2A;
  --ink: #E8EDF7; --body: #B4BFD2; --muted: #7F8CA3;
  --ground: #05070C; --surface: #0C111C; --surface-2: #111827;
  --line: #1E2636; --line-2: #2E384B;
  --warn: #E2A544; --warn-soft: #2A2011;
  --crit: #FF8B80; --crit-soft: #2E1412;
  --ok: #3FCB94; --ok-soft: #0A2620;
  --on-accent: #06121F;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 26px -12px rgba(0,0,0,.85);
}

/* ── o tema das peças que o NAVEGADOR desenha ──────────────────────
   `color-scheme` não é sinônimo de `prefers-color-scheme`: ele é o que
   diz ao navegador em que tema pintar o que o CSS não alcança — o
   calendário do `input[type="date"]`, a barra de rolagem, o menu do
   `select`, o cursor de texto.

   Sem isto, no tema escuro, o ícone de calendário do campo de data sai
   preto sobre um fundo quase preto: o campo aparece e o botão que abre
   o calendário some. Foi o que aconteceu no seletor de período da
   Agenda.

   Os três estados da ADR-014 reaparecem aqui porque quem pinta essas
   peças é o navegador, e ele precisa ouvir a mesma decisão que o resto
   da folha já tomou. */
:root { color-scheme: light }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark }
}
:root[data-theme="dark"] { color-scheme: dark }

* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0; background: var(--ground); color: var(--body);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; color: var(--ink); letter-spacing: -.018em; font-weight: 650 }
p { margin: 0 }
a { color: var(--own); text-decoration: none }
a:hover { text-decoration: underline }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer }
:focus-visible { outline: 2px solid var(--own); outline-offset: 2px; border-radius: 4px }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }

/* ── marca ─────────────────────────────────────────────────────────
   A logo ORIGINAL inteira — símbolo, "Eficazia", o traço em degradê e
   IMOB. Nada é reconstruído em CSS: aproximação de marca é sempre pior
   que a marca.

   Mora numa placa preta porque foi desenhada como neon sobre preto, e a
   palavra "Eficazia" é BRANCA: sobre o tema claro ela simplesmente
   desapareceria, sobrando o cérebro e o "IMOB" soltos. A versão com
   fundo recortado foi testada e é exatamente isso que acontece. A placa
   funciona igual nos dois temas e não pede um segundo arquivo.

   WebP e não JPEG: JPEG cria franjas em borda de texto e suja o degradê
   do halo — é o codec errado para marca, e a diferença se vê a olho nu
   no "IMOB". */
.logo {
  display: block; width: 100%; max-width: 230px;
  /* Proporção do recorte (1292 × 394 do original de 1536 × 1024).
     O arquivo vinha com 71% de margem preta vazia em volta: a marca
     ocupava menos de um terço da caixa e parecia pequena e mole. */
  aspect-ratio: 1292 / 394;
  background-color: #000;
  background-image: var(--logo);
  /* Em propriedade própria, e não no atalho: no atalho, um valor mal
     interpretado vira "cover" em silêncio e a logo aparece cortada. */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* O recorte do arquivo é justo. Sem `content-box`, o fundo cobriria
     também o padding e a logo continuaria encostando na borda —
     parecendo captura de tela em vez de marca aplicada. */
  padding: 7px 12px;
  background-origin: content-box;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,108,252,.22),
              0 8px 22px -12px rgba(0,108,252,.55),
              0 8px 26px -14px rgba(252,60,240,.45);
}
/* Abaixo de ~200px o "IMOB" deixa de ser legível e passa a ser textura.
   É como toda marca com assinatura se comporta em tamanho pequeno. */
.logo.sm { max-width: 198px; border-radius: 8px }
.logo.lg { max-width: 320px; border-radius: 12px }

/* ── layout ───────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh }
/* O que acontece com esta grade abaixo de 860px está no bloco "a rua",
   no fim do arquivo. Aqui havia `.rail { display: none }`: o celular
   ficava sem menu nenhum. */

.rail {
  background: var(--surface-2); border-right: 1px solid var(--line);
  padding: 14px 11px; display: flex; flex-direction: column; gap: 3px;
}
.rail .logo { margin: 2px 2px 14px; max-width: 100% }
.rail > .logo { border-bottom: none }
.rail .grp { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 14px 9px 6px }
.nav {
  display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 7px;
  font-size: 13.5px; color: var(--body); width: 100%; text-align: left; transition: background .12s;
}
.nav:hover { background: var(--ground) }
.nav.on { background: var(--own-soft); color: var(--own); font-weight: 600 }
/* A Rede tem cor propria no menu, e nao e enfeite: magenta ja significa
   REDE no produto inteiro (chipOrigem, em base.js). Aqui ela confirma que
   a pessoa entrou noutro ambiente -- que era a critica no1 da proposta de
   UX de 29/08. O trilho a esquerda faz o mesmo pelo canto do olho. */
.nav.on[data-ir="central"] {
  background: var(--net-soft); color: var(--net);
  box-shadow: inset 3px 0 0 var(--net);
}
.nav.on[data-ir="central"] .badge { background: var(--net) }
/* O rótulo é um elemento próprio para que o badge possa ser trocado
   sozinho: repintar um contador não pode significar reescrever o botão,
   que apagaria o foco de quem está navegando pelo teclado. */
.nav .rotulo { min-width: 0 }
.nav .badge {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  background: var(--own); color: var(--on-accent); border-radius: 999px; padding: 1px 7px;
}
.nav .badge.alerta { background: var(--crit); color: #fff }
.rail .rodape { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted) }

.main { display: flex; flex-direction: column; min-width: 0 }
.topo {
  display: flex; align-items: center; gap: 14px; padding: 11px 20px;
  border-bottom: 1px solid var(--line); background: var(--surface); position: relative;
}
.topo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad) }
.topo .saudacao { flex: none }
.topo .saudacao b { display: block; font-size: 13.5px; color: var(--ink) }
.topo .saudacao span { font-size: 11.5px; color: var(--muted) }

/* A busca global: um destino, não um filtro. Ela leva para a tela de
   busca com o termo aplicado — por isso é um `form`, e por isso o Enter
   basta. Centralizada porque é o elemento que a pessoa procura sem
   olhar, e o meio do topo é o lugar onde toda ferramenta a coloca. */
.busca-global { flex: 1 1 220px; max-width: 460px; margin-inline: auto; position: relative }
.busca-global input {
  background: var(--surface-2); border-radius: 999px; padding-left: 34px;
  font-size: 13px;
  /* Sem isto o Safari desenha o campo de busca do sistema, que ignora
     padding e recorta a lupa. */
  -webkit-appearance: none; appearance: none;
}
.busca-global input:focus { background: var(--surface) }

.topo .fim { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none }
.topo .quem { display: flex; align-items: center; gap: 10px; text-align: right }
.topo .quem b { display: block; font-size: 13px; color: var(--ink) }
.topo .quem span { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px }

/* Botão que é só ícone: tema, e o que vier depois. O rótulo vive no
   `aria-label`, porque o topo não tem 90px para a palavra "Alternar". */
.btn-icone {
  width: 34px; height: 34px; flex: none; border-radius: 8px;
  display: grid; place-items: center; color: var(--muted);
  border: 1px solid transparent; transition: background .12s, color .12s;
}
.btn-icone:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line) }

/* ── a barra rola sozinha (só no desktop) ──────────────────────────
   Com três grupos, o menu passou de sete para até doze itens. Numa
   janela baixa isso passa de 100vh, e o efeito NÃO é uma barra de
   rolagem: quem rola aqui é `.tela`, então a coluna simplesmente crescia
   e empurrava a grade — o último item do menu ficava fora da janela sem
   nenhuma forma de chegar até ele.

   `overflow-y: auto` resolve duas coisas de uma vez: dá rolagem própria
   à coluna e zera o tamanho mínimo automático do item de grade, que é o
   que deixava a linha crescer. `align-self: start` com altura exata (e
   não `max-height`) mantém o fundo e a borda até o pé da janela.

   Depois das regras de `.topo` de propósito: a regra base declara
   `position: relative` com a mesma especificidade, e quem vem por último
   vence. Abaixo de 860px nada disto vale — lá a barra é o rodapé. */
@media (min-width: 861px) {
  .rail {
    position: sticky; top: 0; align-self: start;
    height: 100vh; overflow-y: auto; scrollbar-width: thin;
  }
  /* Seguro para o dia em que uma tela fizer a página inteira rolar: o
     topo carrega a busca global, e ela não pode sumir com a rolagem. */
  .topo { position: sticky; top: 0; z-index: 20 }
}

.av {
  width: 32px; height: 32px; border-radius: 50%; background: var(--own); color: var(--on-accent);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none;
}
/* Com foto, o fundo azul some e a imagem cobre o círculo. As iniciais
   não são desenhadas nesse caso — quem decide é `avatar()` em casca.js,
   e não um `color: transparent` que deixaria o texto selecionável por
   cima do rosto. */
.av.com-foto { background-color: var(--surface-2); background-size: cover; background-position: center }
.av.g { width: 44px; height: 44px; font-size: 15px }
.av.p { width: 28px; height: 28px; font-size: 10px }

/* ── o cartão do topo e o painel da conta ──────────────────────────
   O cartão virou BOTÃO: até então ele era decoração, e o lugar em que
   todo mundo procura a própria conta não respondia a clique. */

.topo .quem {
  border: 1px solid transparent; background: none; border-radius: 999px;
  padding: 3px 4px 3px 10px; font-family: inherit; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.topo .quem:hover { background: var(--surface-2); border-color: var(--line) }
.topo .quem .ident { display: block }

/**
 * `popover` nativo: o primeiro overlay deste app.
 *
 * O padrão do agente do usuário centraliza o popover com `inset: 0` e
 * `margin: auto`. Aqui ele é ancorado no canto superior direito, abaixo
 * do topo — `inset: auto` zera os quatro lados de uma vez antes de
 * posicionar, senão o `margin: auto` herdado continua puxando o painel
 * para o meio da tela.
 */
.painel-conta:popover-open {
  position: fixed; inset: auto; top: 62px; right: 14px; margin: 0;
  width: 320px; max-width: calc(100vw - 28px);
  background: var(--surface); color: var(--body);
  border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: var(--shadow); padding: 0; overflow: hidden;
  text-align: left;
}
.painel-conta::backdrop { background: transparent }

.painel-conta .cabeca { display: flex; gap: 12px; align-items: center; padding: 15px 16px 14px; margin: 0 }
.painel-conta .cabeca .nome { min-width: 0 }
.painel-conta .cabeca .nome b { display: block; font-size: 14px; color: var(--ink); line-height: 1.3 }
.painel-conta .cabeca .nome span {
  display: block; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.painel-conta .cabeca .nome .chip { display: inline-flex; margin-top: 5px }
.painel-conta hr { border: 0; border-top: 1px solid var(--line); margin: 0 }
.painel-conta .bloco { padding: 12px 16px }
.painel-conta .rot {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 8px;
}
.painel-conta .perfil-nome { display: block; font-size: 13.5px; color: var(--ink) }
.painel-conta .perfil-sub {
  font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px;
}

.painel-conta .item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 16px; font-size: 13.5px; color: var(--body);
  border: 0; background: none; text-align: left; font-family: inherit; cursor: pointer;
}
.painel-conta .item:hover { background: var(--surface-2) }
.painel-conta .item .seta { margin-left: auto; color: var(--muted) }
.painel-conta .item.forte { color: var(--own); font-weight: 600 }
.painel-conta .item.sair { color: var(--crit) }

/* Segmentado de três estados — claro, escuro, automático (ADR-014). */
.seg {
  display: flex; gap: 4px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 9px; padding: 3px;
}
.seg .op {
  flex: 1; text-align: center; font-size: 12px; padding: 6px 4px; border-radius: 6px;
  color: var(--muted); border: 0; background: none; font-family: inherit; cursor: pointer;
}
.seg .op:hover { color: var(--ink) }
.seg .op.on {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(12,18,32,.14);
}

/* No celular o painel encosta nas duas bordas e desce do topo: 320px
   fixos com `right: 14px` deixariam uma faixa morta à esquerda numa tela
   de 360px, e o painel pareceria desalinhado com o resto. */
@media (max-width: 520px) {
  .painel-conta:popover-open { left: 10px; right: 10px; width: auto; top: 58px }
}
.tela { padding: 20px; overflow: auto; flex: 1 }
.cabeca { margin-bottom: 16px }
.cabeca h2 { font-size: 20px }
.cabeca p { color: var(--muted); font-size: 13px; margin-top: 3px }

/* ── primitivas ───────────────────────────────────────────────────── */

/* `hidden` PRECISA vencer o `display` da classe.
   O `display:none` de `[hidden]` vem da folha do navegador, e qualquer
   `.linha { display: flex }` do autor passa por cima dele: o elemento
   ficava com o atributo posto e desenhado na tela assim mesmo. Aconteceu
   no calendário da Agenda, e aconteceria de novo na próxima classe de
   layout que alguém marcasse com `hidden`. `!important` aqui é o uso
   legítimo do recurso — declarar que a ausência ganha do arranjo. */
[hidden] { display: none !important }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 15px }
.grade { display: grid; gap: 13px }
.linha { display: flex; gap: 13px; flex-wrap: wrap; align-items: center }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums }
.silencio { color: var(--muted); font-size: 13px }

.chip {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; padding: 2px 8px;
  font-size: 11px; font-weight: 650; white-space: nowrap;
}
.chip.own { background: var(--own-soft); color: var(--own) }
.chip.net { background: var(--net-soft); color: var(--net) }
.chip.ok { background: var(--ok-soft); color: var(--ok) }
.chip.warn { background: var(--warn-soft); color: var(--warn) }
.chip.crit { background: var(--crit-soft); color: var(--crit) }
.chip.mute { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line) }

/* O crachá de quem opera a PLATAFORMA — e por que ele não usa nem azul
   nem magenta.

   As duas cores da marca já respondem a uma pergunta e só a ela: azul é
   o que é meu, magenta é o que é da rede. "Esta pessoa opera o Eficazia"
   não é nenhuma das duas, e pintá-la de magenta faria a lista de
   Usuários sugerir que o Super Admin é um parceiro de rede. Verde,
   âmbar e vermelho estão presos a estado (ativo, atenção, crítico), e
   ser Super Admin não é um estado a corrigir.

   Sobra a inversão: tinta no fundo, superfície na letra. Ela não
   compete com nenhuma cor porque não é uma cor — e é a única marca da
   interface que aparece no máximo uma vez por linha. Nos dois temas
   funciona sozinha: `--ink` e `--surface` já trocam de lado. */
.chip.plataforma { background: var(--ink); color: var(--surface) }

/* ── a LARGURA DE LEITURA ──────────────────────────────────────────
   `.tela` nunca teve máximo, e num monitor de 2 000 px cada linha do
   cartão atravessava a tela inteira: o nome ficava a um metro e meio do
   botão que age sobre ele, e o olho percorria isso trinta vezes por
   página. 1 040 px é onde a linha de texto ainda se lê sem o olho
   perder o começo — e onde a lista volta a parecer uma lista.

   É opt-in, e não `.tela` inteira: o Radar, o mapa e as tabelas largas
   existem para ocupar o monitor, e capar todas elas de uma vez seria
   trocar um problema por outro. */
.leitura { width: 100%; max-width: 1040px; margin: 0 auto }

/* ── o cartão do cliente ───────────────────────────────────────────
   Uma bolha de iniciais na margem, o corpo à direita. A bolha não é
   enfeite: a altura do cartão muda conforme o cliente tenha três
   imóveis ou nenhum, e sem um ponto fixo à esquerda trinta cartões
   viram uma parede de recuos diferentes. */
.cliente .pessoa { display: flex; gap: 13px; align-items: flex-start }
.cliente .iniciais {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--own-soft); color: var(--own);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cliente .corpo { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px }
.cliente .cabeca-do-cartao { display: flex; align-items: center; gap: 9px; flex-wrap: wrap }
.cliente .nome {
  border: 0; background: none; padding: 0; font: inherit; font-size: 16px; font-weight: 700;
  color: var(--ink); cursor: pointer; text-align: left;
}
.cliente .nome:hover { color: var(--own) }
.cliente .meta { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.cliente .meta .mono { color: var(--muted) }
/* O silêncio que já é notícia — âmbar, e só a partir de uma semana. */
.cliente .atrasado { color: var(--warn) }
.cliente .rodape { display: flex; align-items: center; gap: 8px; justify-content: flex-end }

/* O botão que não diz nada até ser pedido. */
.btn-icone {
  width: 32px; height: 32px; flex: none; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.btn-icone:hover { background: var(--surface-2); color: var(--ink) }

/* O link-ação: o verbo sem a moldura de botão, para o que é secundário
   dentro de um bloco que já tem um botão principal. */
.link {
  border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--own); cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.link:hover { text-decoration: underline }
.link.mute { color: var(--muted); font-weight: 400 }
.lugar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.lugar .pin, .link .seta { flex: none }

/* ── a candidatura ─────────────────────────────────────────────────
   Fechada é uma linha com barra: quatro caixas de marcar abertas em
   todo cartão é formulário, e o que se quer de relance é quanto falta. */
.candidatura-linha {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--body); cursor: pointer;
}
.candidatura-linha:hover { background: var(--surface-2) }
.progresso {
  width: 96px; height: 5px; border-radius: 3px; background: var(--line);
  overflow: hidden; display: inline-flex; flex: none;
}
.progresso > span { background: var(--ok) }
.candidatura { display: flex; flex-direction: column; gap: 9px }
.lista-documentos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 20px;
  padding: 0 2px;
}
.item-lista { display: flex; gap: 8px; align-items: center; font-size: 13px }

/* ── o menu, dentro da janela ──────────────────────────────────────
   Decisão mora no centro da tela, com véu, ESC e foco preso — é o que
   `janela.js` já resolve. Um balãozinho ancorado ao botão seria um
   segundo jeito de fazer a mesma coisa, com as próprias regras de
   teclado para manter. */
.menu-lista { display: flex; flex-direction: column; gap: 2px; margin-top: 4px }
.item-menu {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 11px; border: 0; border-radius: 8px; background: none;
  color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
}
.item-menu:hover { background: var(--surface-2) }
.item-menu .rot { display: flex; flex-direction: column; gap: 2px; flex-grow: 1 }
.item-menu.crit { color: var(--crit) }
.item-menu.crit:hover { background: var(--crit-soft) }

/* ── a trilha: um imóvel do cliente, por linha ─────────────────────
   O filete à esquerda responde de quem é o imóvel sem escrever nada, e
   é a mesma semântica do resto do produto: azul o que é meu, magenta o
   que é da rede. Ele fica FINO de propósito — são até cinco linhas num
   cartão que se repete trinta vezes, e uma tarja grossa faria a lista
   parecer um painel de alertas. */
.trilhas { display: flex; flex-direction: column; gap: 6px }
/* Três colunas e não uma fila: com tudo em `flex-wrap`, a mesma ação
   aparecia em posições diferentes em cada linha, conforme o tamanho do
   título. O que se procura numa lista é a COLUNA. */
.trilha {
  display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding: 9px 11px; border-radius: 9px; background: var(--surface-2);
  border-left: 3px solid var(--own);
}
.trilha.da-rede { border-left-color: var(--net) }
.trilha .quem, .trilha .oque, .trilha .acoes {
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
.trilha .acoes { justify-content: flex-end }
.trilha .quem b { font-size: 13.5px; color: var(--ink) }

/* Abaixo de 760px as três colunas viram três linhas: numa tela de
   celular, 20rem de título não cabem ao lado de mais nada. */
@media (max-width: 760px) {
  .trilha { grid-template-columns: minmax(0, 1fr) }
  .trilha .acoes { justify-content: flex-start }
  .lista-documentos { grid-template-columns: minmax(0, 1fr) }
}

/* ── "parece a mesma pessoa" ───────────────────────────────────────
   Âmbar e no TOPO do cartão, acima do nome: é uma dúvida sobre a
   identidade da ficha inteira, e não sobre um campo dela. Discreta o
   bastante para não parecer erro — porque não é: dois irmãos com um
   celular só são um caso legítimo, e "não é a mesma pessoa" fica lado a
   lado com "unir", do mesmo tamanho. */
.faixa-duplicata {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: -15px -15px 10px; padding: 9px 15px;
  background: var(--warn-soft); color: var(--warn);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r) var(--r) 0 0;
}

/* A janela da união: os dois lados lado a lado, e a disputa embaixo. */
.lados-uniao { display: flex; gap: 10px; flex-wrap: wrap }
.lado-uniao {
  flex: 1 1 220px; display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
}
.lado-uniao.escolhido { border: 2px solid var(--own); background: var(--own-soft) }
.disputa {
  margin-top: 12px; padding: 11px 13px; border-radius: 9px;
  background: var(--warn-soft); border: 1px solid var(--line);
}
.opcao-proposta {
  display: flex; gap: 8px; align-items: center; padding: 6px 9px; margin-top: 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
}

/* O que a FASE faz com a conversa — âmbar, porque é consequência a
   saber, não erro a corrigir. */
.aviso-fase {
  margin: 6px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--warn-soft); color: var(--warn);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 7px; padding: 9px 15px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted) }
.btn:disabled { opacity: .5; cursor: not-allowed }
.btn.pri { background: var(--own); border-color: var(--own); color: var(--on-accent) }
.btn.pri:hover { background: var(--own-2); border-color: var(--own-2) }
/* O `.pri` da rede. Mesma forma, outra cor — e a cor é a informação:
   aceitar o horário do parceiro não é um ato da sua carteira. É o que
   `.janela-acao.forte.rede` e `.convite-acao.forte.rede` já faziam nas
   janelas; faltava o botão de dentro da tela. */
.btn.rede { background: var(--net); border-color: var(--net); color: var(--on-accent) }
.btn.rede:hover { background: var(--net-2); border-color: var(--net-2) }
/* O gradiente é reservado ao único momento em que o meu e a rede se
   juntam: o aceite dos termos. Em qualquer botão viraria decoração. */
.btn.grad {
  background: var(--grad); border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px -10px rgba(0,108,252,.75), 0 6px 20px -12px rgba(252,60,240,.65);
}
.btn.grad:hover { filter: brightness(1.08) }
.btn.sm { padding: 5px 11px; font-size: 12.5px }

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px }
input, select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--own); outline-offset: -1px; border-color: var(--own) }

/* ── caixa e botão de escolha ──────────────────────────────────────
   Não são campo de texto, e a regra de `width: 100%` acima esticava a
   caixinha por toda a coluna. Toda tela com múltipla escolha contornava
   isso com `style="width:auto"` no HTML — e atributo de estilo só cede a
   `!important`. É por isso que ele está aqui, e só no tamanho: sem ele o
   alvo de 44px do dedo nunca alcançaria justamente as caixas que
   registram um aceite de termos, que é o clique mais caro do produto.

   `accent-color` pinta o preenchimento com o azul do que é seu, e o
   navegador escolhe sozinho a cor do visto — nos dois temas. */
input[type="checkbox"], input[type="radio"] {
  width: 20px !important; height: 20px !important;
  flex: none; padding: 0; cursor: pointer;
  accent-color: var(--own);
  /* Ao lado de um rótulo de várias linhas o alinhamento é com a PRIMEIRA
     linha do texto, nunca com o centro do parágrafo: centralizado, a
     caixa de um termo de três linhas flutua no meio do nada.
     `align-self` vale no `flex`, `vertical-align` na linha de texto — os
     dois casos existem nas telas, e cada declaração é inerte no outro. */
  align-self: flex-start; vertical-align: top; margin-top: 1px;
}
/* O anel de foco global entra 1px para dentro do campo, o que numa caixa
   de 20px cobre metade do desenho. Aqui ele fica por fora. */
input[type="checkbox"]:focus, input[type="radio"]:focus { outline-offset: 2px }

.campo { margin-bottom: 13px }
.dica { font-size: 11.5px; color: var(--muted); margin-top: 4px }

.aviso { border-radius: 8px; padding: 11px 13px; font-size: 13px; margin-bottom: 13px; border: 1px solid }
.aviso.erro { background: var(--crit-soft); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 30%, transparent) }
.aviso.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent) }
.aviso.info { background: var(--own-soft); color: var(--own); border-color: color-mix(in srgb, var(--own) 30%, transparent) }
/* `display: block` porque `.atencao` TEM DONO: é a grade de cartões do
   Painel (`repeat(auto-fit, minmax(230px, 1fr))`, logo abaixo). Um aviso
   de uma frase não percebia a colisão — com um filho só, grade e bloco
   são indistinguíveis. O primeiro aviso com ESTRUTURA dentro (o pedido
   de outro horário, na Agenda e na Oportunidade) saiu repartido em três
   colunas: o texto numa, o motivo noutra, os botões na terceira. Caixa
   de recado nunca é grade. */
.aviso.atencao { display: block; background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent) }
/* O aviso da PARCERIA — magenta, pela mesma régua de `.chip.net` e de
   `.janela-selo.rede`: azul é o que é seu, magenta é o que envolve o
   outro lado. Nasceu com o combinado de horário da Agenda, que é uma
   negociação com o parceiro dentro do cartão da visita, ao lado do
   pedido do 0121 — azul/âmbar de propósito, para os dois não virarem a
   mesma caixa aos olhos de quem passa o olho.
   `display: block` pelo mesmo motivo do `.atencao` acima, e não por
   simetria: este aviso também tem ESTRUTURA dentro (duas linhas de
   horário e botões). Caixa de recado nunca é grade. */
.aviso.rede { display: block; background: var(--net-soft); color: var(--net); border-color: color-mix(in srgb, var(--net) 30%, transparent) }

/* O × dos avisos que podem ser calados. O padding à direita abre a
   sarjeta onde ele mora: sem isso o texto passa por baixo do botão. */

/* ── entrada (login / cadastro) ───────────────────────────────────── */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--ground) }
.entrada .caixa { width: 100%; max-width: 420px }
.entrada .logo { margin: 0 auto 22px }
.entrada .card { padding: 24px }
.entrada h1 { font-size: 20px; margin-bottom: 4px }
.entrada .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px }
.ou { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-size: 12px }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--line) }
.btn.google { width: 100%; gap: 9px }
.rodape-entrada { text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted) }
/* Discreto de propósito: quem lembra a senha nem deve reparar nele —
   mas quem esqueceu precisa achá-lo antes de errar três vezes. */
.esqueci { text-align: right; margin-top: 10px; font-size: 12.5px }
.esqueci a { color: var(--muted) }
.esqueci a:hover { color: var(--own) }

/* ── cards de atenção ─────────────────────────────────────────────── */
.atencao { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px }
.acard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; position: relative; overflow: hidden; text-align: left; width: 100%;
  transition: border-color .12s, transform .12s;
}
.acard:hover { border-color: var(--line-2); transform: translateY(-1px) }
.acard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--own) }
.acard[data-p="1"]::before { background: var(--crit) }
.acard[data-p="2"]::before { background: var(--net) }
.acard[data-p="3"]::before { background: var(--own) }
.acard[data-p="4"]::before, .acard[data-p="5"]::before { background: var(--warn) }
.acard[data-p="6"]::before { background: var(--grad) }
.acard .n { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.03em }
.acard .t { font-size: 13px; color: var(--ink); font-weight: 600; margin-top: 7px }
.acard .d { font-size: 11.5px; color: var(--muted); margin-top: 3px }

/* Prioridade 0 e o cliente final esperando: acima do SLA de parceiro,
   e da mesma cor — quem esta do outro lado esperando e sempre `crit`. */
.acard[data-p="0"]::before { background: var(--crit) }
.acard-cta { font-size: 11.5px; font-weight: 600; color: var(--own); margin-top: 8px }

/* Item declaradamente informativo (`destino: null`).
   Ele nao e `<button>` no HTML; isto so garante que tambem nao PARECA
   um — sem levantar no hover e sem cursor de mao. */
.acard.informativo { cursor: default }
.acard.informativo:hover { border-color: var(--line); transform: none }

/* ── teto de largura do painel ─────────────────────────────────────
   No painel, e nao em `.tela`: o teto e uma decisao sobre ESTA tela,
   que e uma grade de cartoes curtos. A carteira e a central tem grades
   proprias, e herdar um teto por tabela geral quebraria as duas sem
   ninguem ter pedido. */
.pnl-teto { max-width: 1560px }

/* ── bloco do gestor ───────────────────────────────────────────────── */
.gestor .gestor-tot {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin: 13px 0;
}
.gestor .gestor-tot > div,
.gestor .gestor-tot > button { background: var(--surface); padding: 11px 13px }
/* A celula vira porta para a mesma lista que o numero conta. Sem borda
   e sem levantar: sao cinco celulas coladas por um `gap: 1px` que E a
   linha divisoria, e mover uma abriria um rasgo na grade. O aviso e a
   troca de fundo. */
.gestor .gestor-tot > button {
  text-align: left; width: 100%; transition: background .12s;
}
.gestor .gestor-tot > button:hover { background: var(--surface-2) }
.gestor .gestor-tot > button:focus-visible { outline: 2px solid var(--own); outline-offset: -2px }
.gestor .gestor-tot .k {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 4px;
}
.gestor .gestor-tot .v {
  font-size: 19px; font-weight: 700; color: var(--ink);
  line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
/* A tabela rola dentro do proprio bloco: sete colunas nao cabem num
   celular, e deixar a PAGINA rolar de lado quebraria o painel inteiro. */
.gestor .gestor-rolo { overflow-x: auto; overscroll-behavior-x: contain }
.gestor table { min-width: 620px }
.gestor th {
  text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.gestor td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--muted) }
.gestor tbody tr:last-child td { border-bottom: 0 }
.gestor td.nome { color: var(--ink); font-weight: 600; white-space: nowrap }
.gestor th.n, .gestor td.n { text-align: right; font-variant-numeric: tabular-nums }
.gestor td.n.alerta { color: var(--crit); font-weight: 700 }
/* A linha de quem nao e pessoa, e a linha que fecha a conta. */
.gestor tr.sistema td { color: var(--muted); font-style: italic }
.gestor tbody tr.total td { color: var(--ink); font-weight: 700; border-top: 1px solid var(--line-2); border-bottom: 0 }
.gestor-nota { margin: 10px 0 0; font-size: 11.5px; color: var(--muted) }

/* ── números ──────────────────────────────────────────────────────── */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px }
.num { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px }
.num .k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted) }
.num .v { font-size: 24px; font-weight: 700; color: var(--ink); margin-top: 6px; letter-spacing: -.028em; font-variant-numeric: tabular-nums }
.num .s { font-size: 11.5px; color: var(--muted); margin-top: 3px }

/* A faixa da operacao: os mesmos cartoes, encostados.
   Tres numeros de escala nao precisam de tres caixas com sombra cada
   uma — encostados, o olho le "34 · 20 · 1" como uma frase, que e o que
   eles sao. O modificador e um atributo e nao uma classe porque a classe
   "numeros" e lida literalmente por um teste de interface. */
.numeros[data-faixa] {
  gap: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.numeros[data-faixa] > .num { border: 0; border-right: 1px solid var(--line); border-radius: 0 }
.numeros[data-faixa] > .num:last-child { border-right: 0 }

/* O cartao do dinheiro, que agora reparte o valor entre proprio e rede.
   Ele e DIV e nao BUTTON: tem duas acoes dentro, e botao dentro de botao
   nao e HTML valido. Ocupa a fileira inteira porque a barra so diz
   alguma coisa com largura — espremida num terco da grade, o reparte
   vira dois tracinhos. */
.num.rico { grid-column: 1 / -1 }
/* A fileira do dia e flex, e nao grade.
   O cartao do dinheiro e mais largo que os outros — a barra so diz
   alguma coisa com largura — e numa grade de colunas iguais o que sobra
   fica ilhado: "Visitas" saia num terco de coluna com o valor quebrado
   em duas linhas. No flex os cartoes dividem a sobra entre si e a linha
   sempre fecha. */
.numeros[data-dia] { display: flex; flex-wrap: wrap; gap: 12px }
/* Coluna, e nao bloco: o <button> centraliza o conteudo verticalmente
   por conta propria, e ao lado de um cartao alto o rotulo do vizinho
   descia meio cartao. */
.numeros[data-dia] > .num { flex: 1 1 210px; display: flex; flex-direction: column; justify-content: flex-start }
.numeros[data-dia] > .num > * { flex: none }
.numeros[data-dia] > .num.rico { flex: 2 1 340px }
.reparte {
  display: flex; height: 7px; border-radius: 4px; overflow: hidden;
  background: var(--line); margin: 13px 0 9px;
}
.reparte i { display: block; height: 100% }
.reparte i.own { background: var(--own) }
.reparte i.net { background: var(--net) }
.reparte-leg { display: flex; flex-wrap: wrap; gap: 4px 20px }
.reparte-leg > span { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted) }
.reparte-leg > span::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; transform: translateY(-1px);
}
.reparte-leg > span.own::before { background: var(--own) }
.reparte-leg > span.net::before { background: var(--net) }
.reparte-leg b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums }

.num-pe {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--line-2);
}
.num-nota { font-size: 11.5px; color: var(--muted) }
/* A porta do cartao rico. Parece a chamada dos outros cartoes de
   proposito: dois jeitos de sair da mesma fileira seriam dois idiomas. */
.num-porta {
  margin-top: 10px; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--own); background: none; border: 0; padding: 0; cursor: pointer;
}
.num-porta { align-self: flex-start }
.num-porta:hover { text-decoration: underline }
.num-porta:focus-visible { outline: 2px solid var(--own); outline-offset: 2px; border-radius: 3px }
.taxa-campo { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted) }
.taxa-campo input { width: 72px; padding: 6px 8px; font: inherit; font-size: 13px }

/* Carteira vazia: o convite que os dois zeros nao davam. */
.convite {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px dashed var(--line-2);
  border-radius: var(--r); padding: 18px; margin-bottom: 16px;
}
.convite > div:first-child { max-width: 46ch }
.convite b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 3px; letter-spacing: -.012em }
.convite-botoes { display: flex; gap: 9px; flex-wrap: wrap }

/* A equipe de uma pessoa so: uma linha, e nao a tabela inteira. */
.equipe-so-eu {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.equipe-so-eu b { font-size: 14px; color: var(--ink) }
.equipe-so-eu .silencio { max-width: 52ch; display: block; margin-top: 2px }

/* O numero que tem lista para provar.
   `button.num` e nao `.num.porta`: quem manda no formato ja e a tag —
   uma classe a mais poderia ficar num `<div>` e prometer um clique que
   nao existe. O `text-align` e o `width` sao a correcao do que o
   `<button>` traz de fabrica (centralizado e encolhido ao conteudo), e
   o resto e o mesmo hover do cartao de atencao, de proposito: dois
   jeitos de levantar na mesma tela seriam dois idiomas. */
.num-cta { font-size: 11.5px; font-weight: 600; color: var(--own); margin-top: 8px }
button.num {
  text-align: left; width: 100%; display: block;
  transition: border-color .12s, transform .12s;
}
button.num:hover { border-color: var(--line-2); transform: translateY(-1px) }
button.num:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }

/* ── central de atendimento: lista à esquerda, conversa à direita ───
   Os dois painéis convivem porque TRIAR É COMPARAR: quem atende passa os
   olhos por dez conversas antes de escolher uma, e a versão de duas telas
   cobrava uma ida e uma volta a cada olhada.

   A coluna da esquerda é `sticky` e rola por dentro, não junto com a
   página: uma lista de cinquenta conversas que empurra o painel da
   direita para fora da vista desfaz exatamente o que os dois painéis
   existem para dar.

   Na dobra de 860px os dois não cabem, e `data-aberta` no contêiner
   devolve o comportamento de uma tela por vez — a mesma regra do polegar
   que transforma a barra lateral em barra inferior logo abaixo. */
/* As DUAS colunas rolam por dentro, cada uma na sua caixa.

   Antes só a lista rolava, e o painel crescia com a conversa: uma thread
   de cem mensagens empurrava a caixa de escrever para dois metros abaixo
   da dobra, e responder virava rolar até o fim toda vez. Agora a altura
   é a da janela nas duas, e o que rola é o miolo — o cabeçalho da
   conversa e a caixa de resposta ficam onde estão, sempre à vista.

   `min-height: 0` nos dois filhos não é enfeite: sem ele, um item de
   grid/flex nunca encolhe abaixo do próprio conteúdo, `overflow` não
   tem o que cortar, e a rolagem simplesmente não acontece — a página
   inteira volta a rolar junto. */
/* A altura vem do que SOBRA, e não de um número contado à mão.

   Era `calc(100dvh - 132px)`, e 132 era um chute: o topo do app mais o
   respiro da tela mais o cabeçalho somavam MAIS que isso, então a página
   inteira ganhava uma segunda barra de rolagem e a conversa ficava com
   uma faixa no meio. Pior, o número mentia de novo a cada mudança no
   cabeçalho — e foi o que aconteceu quando ele saiu.

   `.tela` já é `flex: 1` dentro da casca de altura definida. Bastava
   deixá-la distribuir: aqui ela vira coluna e a central pega o resto.
   `:has()` mantém a regra restrita a esta tela — as outras continuam
   rolando a página inteira, que é o certo para elas.

   `align-items` fica no padrão (`stretch`): com `start`, as duas colunas
   voltariam a ter a altura do próprio conteúdo e o `flex: 1` não teria a
   quem mandar. */
/* A casca precisa ter altura DEFINIDA, senão não há o que distribuir.

   `.app` é `min-height: 100vh` — mínimo, não altura: ele CRESCE com o
   conteúdo. Então `.tela { flex: 1 }` nunca teve limite, `.central` com
   `flex: 1` também não, e o `overflow-y: auto` do quadro do chat não
   tinha altura de onde sobrar rolagem: a página inteira rolava e a
   conversa ia até onde quisesse. Era isto que fazia o histórico não
   rolar por dentro, e é o que o `calc()` de antes mascarava forçando uma
   altura na marra.

   Não é padrão novo: o bloco de 860px já faz exatamente isto no celular
   (`height: 100dvh` no `.app`, `min-height: 0` no `.main`). Aqui só se
   estende ao desktop, e SÓ nesta tela — nas outras a página rolar
   inteira é o comportamento certo. */
.app:has(.central) { height: 100dvh }
.app:has(.central) .main { min-height: 0 }

.tela:has(> .central) { display: flex; flex-direction: column; overflow: hidden }
.central {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px;
  flex: 1; min-height: 0;
}
/* `min-width: 0` pelo mesmo motivo que o painel ao lado tem o seu, e o
   descuido aqui só aparecia no celular: no desktop esta coluna é
   `340px`, medida fixa que nenhum conteúdo discute. No celular ela vira
   `1fr`, e `1fr` é `minmax(auto, 1fr)` — o piso passa a ser o conteúdo.
   O trecho da última mensagem é `white-space: nowrap`, então o piso
   virava A FRASE INTEIRA: a coluna crescia para uns 800px, a grade de
   abas ia junto (duas colunas de 400px) e metade das abas nascia fora
   do celular. O `text-overflow: ellipsis` do trecho não salvava nada,
   porque quem mandava na largura era ele. */
.central-lista {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  height: 100%; min-height: 0; min-width: 0;
}
.central-lista > h3 { font-size: 14px }
.central-lista .rolagem { overflow-y: auto; flex: 1; min-height: 0; margin: 0 -6px; padding: 0 6px }
/* `auto` e não `hidden`: numa conversa que traz oportunidade ligada MAIS
   o bloco do que o canal consegue, os blocos fixos podem passar da
   altura da janela. Com `hidden` o excedente ficaria cortado e
   inalcançável — a caixa de escrever sumiria sem nenhuma barra de
   rolagem para trazê-la de volta. Com `auto` o pior caso é a coluna
   inteira rolar, que é o comportamento de antes desta mudança. */
.central-painel {
  min-width: 0; min-height: 0; height: 100%;
  display: flex; flex-direction: column; gap: 13px; overflow-y: auto;
}
/* O que NÃO rola: o cabeçalho e a caixa de resposta são os dois pontos
   de ação da tela, e procurá-los rolando é o custo que este layout
   existe para remover. `flex-shrink: 0` os protege do aperto quando a
   conversa cresce. */
.central-painel > .painel-topo,
.central-painel > .card { flex-shrink: 0 }
.central-painel > .painel-topo { margin-bottom: 0 }

/* O quadro do chat: o miolo que rola, com moldura própria.

   A moldura não é decoração — ela é o que separa "o que foi dito" de "o
   que eu faço com isto". Sem borda, os balões encostavam no cabeçalho e
   na caixa de escrever, e os três blocos liam-se como uma coisa só. */
/* O quadro é o PISO da tela, não a sobra dela.

   Com `min-height` pequeno ele ficava com o que os vizinhos deixassem —
   e os vizinhos deixavam uma faixa ilegível, com o histórico rolando
   dentro de uma janelinha. Ler é o que se vem fazer aqui. */
.chat-quadro {
  flex: 1; min-height: min(50dvh, 520px); overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px;
}
.chat-quadro > .card { background: var(--surface) }

/* A barra de envio: uma linha, como em qualquer aplicativo de mensagem.

   `align-items: flex-end` para o botão ficar colado na base enquanto a
   caixa cresce — alinhado ao centro, ele subiria junto com o texto e
   pararia no meio do nada. A altura de fato é escrita pelo JS
   (`ajustarAltura`), que é quem sabe quanto texto há; aqui fica só o
   piso, para a caixa vazia não nascer achatada. */
.responder { padding: 11px }
/* `center` e não `flex-end`: com a caixa de texto em 42px e os botões
   em 38 e 42, alinhar pelo pé deixava o clipe e o microfone pendurados
   abaixo da linha do texto. Centrado, os três ficam na mesma linha do
   olho — e continuam assim quando a caixa cresce, porque o que cresce é
   ela, para os dois lados. */
.linha-de-envio { display: flex; align-items: center; gap: 8px }
.linha-de-envio textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 140px; overflow-y: auto;
  border-radius: 12px; padding: 11px 14px;
}
.linha-de-envio .btn { flex: none }

/* ── clipe e microfone: ferramenta, e não ação ─────────────────────
   Os dois abrem o seletor de arquivo e o microfone — são ferramentas da
   caixa, não a ação da linha. Desenhados como botão de verdade (borda,
   fundo, mesmo peso do "Enviar"), a linha ficava com três botões e
   nenhuma hierarquia: o olho não achava mais qual deles MANDA. Sem
   moldura, eles descem para o segundo plano onde sempre estiveram, e
   quem fica em destaque é o avião de papel, à direita.

   O nome NÃO é `btn-icone`: essa classe já existe nesta folha (lá em
   cima, no topo) e vem com um `::before` que pinta `var(--icone)` como
   máscara. Sem essa variável definida, a máscara é inválida e o
   `::before` vira um QUADRADO SÓLIDO da cor do texto — foi exatamente o
   que apareceu em cima do clipe e do microfone. Classe com dono é
   classe que não se toma emprestada; é o mesmo erro que `.campo` já
   tinha cometido nesta mesma folha. */
.btn-ferramenta {
  flex: none; width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); cursor: pointer;
}
.btn-ferramenta:hover { background: var(--surface-2); color: var(--ink) }
.btn-ferramenta:focus-visible { outline: 2px solid var(--own); outline-offset: 1px }
.btn-ferramenta svg { width: 20px; height: 20px }

/* O "Enviar" perdeu a palavra e ficou com o avião de papel: quadrado,
   do tamanho do dedo, na cor do que é seu. A palavra continua lá para
   quem não vê o desenho — em `title` e `aria-label`. */
.btn.envio { width: 42px; height: 42px; padding: 0; display: grid; place-items: center }
.btn.envio svg { width: 18px; height: 18px }

/* ── a barra que aparece enquanto se grava ─────────────────────────
   Ela OCUPA a linha de envio (que sai com `hidden`) em vez de aparecer
   embaixo dela: com a caixa de texto à vista, a pessoa começaria a
   escrever no meio da própria frase falada — e o que escrevesse não
   iria junto, porque o WhatsApp não põe legenda em áudio.

   `min-height` igual ao piso da caixa de texto para a troca não fazer o
   quadro do chat pular alguns pixels para cima e para baixo. */
.gravando { display: flex; align-items: center; gap: 10px; min-height: 42px }
.gravando .mono { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums }
.gravando .btn.pri { margin-left: auto }

/* O ponto que pulsa é a única coisa na tela dizendo "está ouvindo agora".
   Vermelho porque é a cor que todo gravador usa há cinquenta anos, e
   nesta folha é a de alerta — que é exatamente o que ele é. */
.ponto-vivo {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--crit); animation: pulsar 1.2s ease-in-out infinite;
}
@keyframes pulsar { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
/* Quem pediu menos movimento continua vendo o ponto — ele é informação,
   não enfeite. O que para é a piscada. */
@media (prefers-reduced-motion: reduce) { .ponto-vivo { animation: none } }
/* A dica embaixo é rodapé de campo, não parágrafo: some do caminho do
   olho e continua legível para quem procurar por ela. */
.responder .dica { margin-top: 7px; font-size: 11.5px }

/* `minmax(0, 1fr)` e não `1fr`: `1fr` sozinho tem piso de conteúdo, e
   bastaria um rótulo comprido para a grade passar da caixa outra vez. */
.abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px }
.abas button {
  padding: 8px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
  color: var(--muted); background: var(--surface-2); border: 1px solid transparent;
  text-align: center;
}
.abas button.on { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow) }
.busca-conversas { width: 100% }

/* A linha é um `button` inteiro: a área de clique é a linha toda, e não
   um link de 80px dentro dela. */
.conversa {
  display: block; width: 100%; text-align: left; padding: 10px;
  border-radius: 8px; border: 1px solid transparent; margin-bottom: 4px;
}
.conversa:hover { background: var(--surface-2) }
.conversa.on { background: var(--surface-2); border-color: var(--line) }
/* `.conversa-topo`, e não `.topo`: essa classe tem dono — é a BARRA
   SUPERIOR do aplicativo (lá em cima nesta folha), e vinha inteira
   junto. Cada linha da lista ganhava a faixa em degradê do `::before`,
   a borda de baixo, o fundo de superfície e, no celular, `min-height:
   54px` com `padding: 9px 62px` — 76px de recuo tirados de uma coluna
   que já era estreita, e um risco colorido em cima de cada conversa
   como se fosse divisória. É o mesmo erro de `.campo` e de `.btn-icone`
   nesta folha: classe com dono não se toma emprestada. */
.conversa-topo { display: flex; align-items: center; gap: 8px; justify-content: space-between }
.conversa .nome { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.conversa .trecho { font-size: 12px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* A segunda linha do cartão diz QUEM (a imobiliária da parceria), e a
   terceira diz o que foi dito. Duas linhas idênticas em cinza fariam o
   olho ler as duas como trecho — daí o tom mais firme aqui. */
.conversa .trecho.quem { color: var(--body) }
.conversa .rodape { display: flex; align-items: center; gap: 6px; margin-top: 7px }

/* ── a pasta da imobiliária ─────────────────────────────────────────
   Uma FAIXA sobre a lista, e não um cartão: por isso ela não tem fundo
   de superfície nem sombra — o que continua parecendo clicável é a
   linha da conversa, que é o que de fato abre alguma coisa. O filete
   magenta à esquerda é o mesmo sinal de rede do resto do produto. */
.pasta { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px }
.pasta-cabeca {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 6px 2px; cursor: pointer; text-align: left; font: inherit;
}
.pasta-cabeca:hover { border-bottom-color: var(--net) }
.pasta-nome {
  font-size: 12px; font-weight: 700; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pasta-seta { color: var(--net); font-size: 11px; line-height: 1 }
.pasta-cabeca .chip { margin-left: 0 }
.pasta-cabeca .chip:first-of-type { margin-left: auto }
/* As linhas de dentro ganham o filete da rede: é o que diz, sem texto,
   que aquelas três conversas pertencem à faixa de cima. */
.pasta > .conversa { border-left: 3px solid var(--net) }
.conversa .hora { margin-left: auto; font-size: 11px; color: var(--muted) }

/* O dia, dito uma vez entre os balões — a régua do WhatsApp.

   Centralizado e em cápsula porque ele não é uma mensagem: precisa ser
   visivelmente OUTRA coisa, senão o olho o lê como um balão sem autor. E
   `sticky` de propósito não: numa conversa longa, um rótulo que gruda no
   topo passa a discordar do que está sob ele durante a rolagem. */
.dia-da-conversa { display: flex; justify-content: center; margin: 14px 0 10px }
.dia-da-conversa span {
  font-size: 11.5px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px;
  text-transform: capitalize;
}

.painel-topo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 15px; margin-bottom: 13px }
.painel-topo h3 { font-size: 16px }
.painel-topo p { font-size: 12.5px; margin-top: 2px }
/* No desktop a lista nunca sai da tela, então não há para onde "voltar". */
.central .voltar { display: none }

/* ── lista de imóveis ─────────────────────────────────────────────── */
.filtros { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 13px; margin-bottom: 14px }
.filtros .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; align-items: end }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px }
.seg button { padding: 6px 13px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted) }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow) }
.seg button.on[data-v="REDE"] { color: var(--net) }
.seg button.on[data-v="CARTEIRA"] { color: var(--own) }

.item {
  display: flex; gap: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin-bottom: 11px;
}
/* A origem antes do preço: azul = seu, magenta = rede. */
.item[data-origem="CARTEIRA"] { border-left: 3px solid var(--own) }
.item[data-origem="REDE"] { border-left: 3px solid var(--net) }
/* O cartão que o link do e-mail veio buscar (a Agenda, hoje).

   É a mesma moldura do `:focus-visible` de propósito: "a sua atenção
   está aqui" já é o que ela diz em toda a interface, e um tratamento
   novo só para isto seria um vocabulário a mais para aprender.

   Moldura, e não fundo: a cor de dentro do cartão não é livre — os
   chips e o preço leem sobre `--surface` —, e a barra da ESQUERDA
   continua sendo da origem. Pintar o cartão de azul faria a visita de um
   imóvel da rede parecer da carteira. */
.item.destacado { outline: 2px solid var(--own); outline-offset: 2px }
.item .info { flex: 1; padding: 14px; min-width: 0 }
.item .topo-item { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start }
.item h4 { font-size: 15px }
.item .end { font-size: 12.5px; color: var(--muted); margin-top: 2px }
.item .preco { text-align: right; flex: none }
.item .preco b { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.item .specs { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px }
.item .pe { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); flex-wrap: wrap }
/* `flex-wrap` porque o rodapé do cartão chegou a cinco botões na Agenda
   (remarcar entrou ao lado de confirmar e do desfecho). Sem ele os
   botões encolhem até o piso de conteúdo e então vazam para fora do
   cartão — no celular, onde cada um vira `flex: 1`, isso acontece antes.
   Com quebra, a fileira vira duas linhas e nada some.

   Vale para a carteira pelo mesmo motivo: o imóvel que está na rede tem
   quatro (Editar, Radar, Divulgar no mural, Tirar da rede). */
.item .pe .acoes { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap }

.vazio { text-align: center; padding: 48px 20px; color: var(--muted) }
.vazio b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 6px }

.carregando { padding: 40px; text-align: center; color: var(--muted); font-size: 13px }

table { width: 100%; border-collapse: collapse; font-size: 13px }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line) }
td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--body) }
tr:last-child td { border-bottom: none }

/* ── faixa de sistema ──────────────────────────────────────────────
   Sem conexão e versão nova. Vive fora do `#raiz`, presa à janela, para
   sobreviver aos `innerHTML` que as telas dão na raiz inteira.

   Fica embaixo porque é onde o polegar chega, e acima da barra de
   navegação porque tapar o menu para avisar de um problema é criar um
   segundo problema. `--barra-h` é redefinida no bloco do celular. */
:root { --barra-h: 0px }

.faixa-sistema {
  position: fixed; z-index: 60;
  left: 12px; right: 12px; max-width: 560px; margin-inline: auto;
  bottom: calc(var(--barra-h) + 12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: 10px; font-size: 13px;
  border: 1px solid; box-shadow: var(--shadow);
  background: var(--warn-soft); color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}
.faixa-sistema.novidade {
  background: var(--own-soft); color: var(--own);
  border-color: color-mix(in srgb, var(--own) 30%, transparent);
}
.faixa-sistema span { flex: 1 1 200px; min-width: 0 }
/* Sem `min-height` aqui de propósito: no dedo quem manda é a regra de
   `pointer: coarse` lá embaixo, e um valor fixo neste seletor mais
   específico venceria o alvo de 44px justamente onde ele importa. */
.faixa-sistema .btn { flex: none }

/* ═══════════════════════════════════════════════════════════════════
   A RUA — o corretor no celular, entre uma visita e outra
   ═══════════════════════════════════════════════════════════════════

   Duas perguntas diferentes, dois tipos de consulta:

   · `pointer: coarse` responde "o dedo é o cursor?". É o que decide
     tamanho de alvo, e vale igual num tablet de 1024px.
   · `max-width` responde "cabe ao lado?". É o que decide layout.

   Misturar as duas é como se erra isto: alvo de 44px só no celular
   deixa o tablet com botão de mouse, e layout de celular no desktop
   com janela estreita deixa a barra inferior no meio de uma tela de
   27 polegadas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── alvos de toque ───────────────────────────────────────────────── */
@media (pointer: coarse) {
  /* 44px é o mínimo do dedo médio adulto. Botão de 24px é botão que
     erra — e errar aqui é aceitar termos de parceria sem querer. */
  .btn, .btn.sm, .nav, .seg button, .btn-icone, .btn-ferramenta { min-height: 44px }
  .btn.sm { padding: 8px 13px }
  .btn-icone, .btn-ferramenta { min-width: 44px; width: 44px; height: 44px }

  /* 16px não é escolha de estética: abaixo disso o Safari do iPhone dá
     zoom sozinho ao focar o campo, e a página fica torta até o usuário
     fechar o teclado e voltar com dois dedos. */
  input, select, textarea { font-size: 16px; min-height: 44px }
  textarea { min-height: 88px }

  /* A caixa cresce no dedo, e a altura mínima de 44px acima não vale para
     ela — encheria a linha de vazio em volta de um desenho de 20px. O
     alvo continua sendo o conjunto caixa + rótulo, que é clicável inteiro
     via `<label for>`. */
  input[type="checkbox"], input[type="radio"] {
    width: 26px !important; height: 26px !important; min-height: 0; margin-top: 0;
  }
}

/* Continua existindo porque a tela do aceite a usa pelo nome. Hoje ela
   só acerta o respiro ao lado do parágrafo de termos: o tamanho vem da
   regra de `input[type="checkbox"]` lá em cima, que vale para toda caixa
   do sistema — inclusive as que a folha injetada pela ficha desenhava
   com 16px, pequenas demais para o peso da decisão. */
.caixa-aceite { margin-top: 2px }

/* ── layout estreito ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* O ponto de partida. A medida de verdade vem de `casca.js`, que mede a
     barra desenhada: um rótulo em três linhas ("Meu as-sis-tente") ou a
     letra maior do aparelho a deixam mais alta, e com 58px fixos o guia
     e a faixa de sistema pousavam em cima dos rótulos. */
  :root { --barra-h: 58px }

  /* A altura é a da janela e quem rola é a área de tela. Sem isso a
     barra inferior teria de ser `fixed` e o conteúdo precisaria de um
     `padding-bottom` mágico que sempre erra por alguns pixels.
     `dvh` e não `vh`: no celular a barra de endereço do navegador entra
     e sai, e `100vh` é a altura da janela SEM ela — o rodapé fica
     escondido embaixo do próprio navegador. */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100dvh; min-height: 100dvh;
  }
  .main { grid-row: 1; grid-column: 1; min-height: 0 }
  .rail { grid-row: 2; grid-column: 1 }

  /* ── a barra lateral vira barra inferior ────────────────────────
     O critério é o polegar: numa mão, ele alcança a base da tela e não
     alcança o topo. Gaveta foi descartada porque exige um botão que
     este HTML não tem (a marcação é de outro agente) e porque esconde
     o menu atrás de um toque a mais em todas as telas. */
  .rail {
    flex-direction: row; align-items: stretch; gap: 0;
    padding: 0 2px; padding-bottom: env(safe-area-inset-bottom, 0px);
    /* A barra rola de lado, e agora ela DIZ que rola.

       Com o grupo de Plataforma são dezessete células — mais de duas
       telas de largura. Rolar continua sendo a saída honesta (espremer
       abaixo de 44px não é), mas uma fila cortada no meio de um item,
       sem sombra nem nada, se lê como fim da lista: o corretor conclui
       que o sistema não tem Agenda, e nunca mais procura.

       Quatro camadas, sem uma linha de JS. As duas de `--surface` andam
       COM o conteúdo (`local`) e tapam as sombras quando a barra está
       encostada na ponta; as duas de sombra ficam paradas (`scroll`) e
       reaparecem assim que há o que rolar daquele lado. `--line-2`, e
       não um preto fixo, porque a sombra precisa aparecer também no
       tema escuro — onde preto sobre preto não é sombra nenhuma. */
    background:
      linear-gradient(to right, var(--surface), rgba(0, 0, 0, 0)) 0 0 / 30px 100% no-repeat local,
      linear-gradient(to left, var(--surface), rgba(0, 0, 0, 0)) 100% 0 / 30px 100% no-repeat local,
      linear-gradient(to right, var(--line-2), rgba(0, 0, 0, 0)) 0 0 / 14px 100% no-repeat scroll,
      linear-gradient(to left, var(--line-2), rgba(0, 0, 0, 0)) 100% 0 / 14px 100% no-repeat scroll,
      var(--surface);
    border-right: none; border-top: 1px solid var(--line);
    /* Válvula de escape: com o item de Backoffice são sete células.
       Rolar é honesto; espremer abaixo de 44px, não. */
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none }

  /* A logo custa 60px de altura para dizer o que o ícone na tela
     inicial já disse. O rótulo de grupo idem. */
  .rail .logo, .rail .grp { display: none }

  /* A faixa do plano (0214) mora no pé da coluna do computador. Aqui ela
     virava a última célula da fila, fora da vista, depois do último item,
     e por ser a mais alta esticava a barra inteira até a altura dela:
     trezentos pixels de menu vazio, o badge solto lá em cima, os ícones
     no meio do nada e o "Me explica" pousado em cima dos rótulos. No
     celular, os limites aparecem no cartão "Seu mês" do painel e no
     contador ao lado de cada ação. */
  .rail #faixa-do-plano { display: none }

  .rail .nav {
    /* `flex-basis: 0` e não `auto`: o `.nav` de cima tem `width:100%`,
       que numa fila vira base de 100% da barra POR CÉLULA — seis itens
       de largura de tela inteira, um do lado do outro. Zerar a base é o
       que faz as células dividirem a largura em partes iguais. */
    flex: 1 1 0; width: auto; min-width: 54px;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 3px; padding: 7px 4px 8px; border-radius: 0;
    min-height: 56px; font-size: 10px; line-height: 1.12; text-align: center;
    color: var(--muted);
    /* "Oportunidades" não cabe em 54px numa linha só. `hyphens` usa o
       `lang="pt-BR"` do documento e corta na sílaba, não no meio. */
    hyphens: auto; overflow-wrap: break-word;
  }
  .rail .nav:hover { background: none }
  .rail .nav.on {
    background: var(--own-soft); color: var(--own);
    box-shadow: inset 0 2px 0 var(--own);
  }
  /* Sobreposto ao ícone, e não empilhado acima dele: numa célula em
     coluna o badge viraria uma terceira linha, a barra passaria dos
     58px de `--barra-h` e a faixa de sistema, que se apoia nessa
     medida, passaria a tapar o menu. O anel da cor do fundo separa o
     número do desenho sem precisar de espaço. */
  .rail .nav { position: relative }
  .rail .nav .badge {
    position: absolute; top: 3px; left: calc(50% + 3px); margin: 0;
    font-size: 9.5px; padding: 0 5px; min-width: 15px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
  }

  /* Sair não é destino, é ajuste — ocuparia uma célula da barra e
     empurraria tudo abaixo do legível. Sai da barra e vira um botão de
     ícone no alto, onde o polegar quase nunca precisa ir. `fixed` escapa
     do `overflow` da barra sem virar filho de outro elemento.
     O botão de tema saiu daqui: agora ele mora no topo, visível, em vez
     de escondido no pé de um menu que no celular nem existe. */
  .rail .rodape {
    position: fixed; z-index: 30;
    top: env(safe-area-inset-top, 0px); right: 8px; height: 54px;
    margin: 0; padding: 0; border-top: none;
    display: flex; align-items: center; gap: 2px;
  }
  .rail .rodape .nav {
    flex: none; width: 44px; min-width: 44px; min-height: 44px;
    padding: 0; border-radius: 8px;
    /* O rótulo continua no DOM — o leitor de tela lê "Alternar tema".
       Quem informa aqui é o ícone, porque o topo não tem 100px para a
       palavra. */
    font-size: 0; gap: 0;
  }

  /* ── topo ─────────────────────────────────────────────────────── */
  /* Até 30/09/2026 o topo guardava 62px à direita para o "Sair", que
     ficava fixo no canto. O "Sair" foi para o painel da conta e a reserva
     ficou: um canto vazio que empurrava o nome da imobiliária e cortava o
     selo do CRECI ("CREC"). */
  .topo {
    padding: 9px 14px; min-height: 54px;
    padding-top: calc(9px + env(safe-area-inset-top, 0px));
  }
  /* Numa faixa de 54px não cabem saudação, busca e identidade. A
     identidade fica, porque é ela que diz em qual perfil a pessoa está —
     e trocar de perfil sem perceber é o erro caro. A busca vira o item
     "Buscar imóveis" da barra de baixo, a um toque de distância; a
     saudação é gentileza, e gentileza não disputa espaço com trabalho. */
  .topo .saudacao, .busca-global { display: none }
  .topo .quem { gap: 8px }
  /* O nome e a linha da imobiliária ficam com a largura que sobra do
     tema (44px), do avatar (32px) e dos respiros: 136px ao todo. Com 38%
     da tela, "Horizonte Imóveis ✓ CRECI 31874-J" saía cortado no meio do
     selo, sem reticências (a linha é `inline-flex`). */
  .topo .quem b { max-width: calc(100vw - 140px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .topo .quem span { max-width: calc(100vw - 140px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

  /* Na conta de teste o topo do celular é da etiqueta: o tema já está no
     painel da conta (toque no avatar), e o nome e o CRECI também. Só
     nela: na conta de verdade o topo continua como sempre foi. */
  .topo[data-conta-de-teste] #tema,
  .topo[data-conta-de-teste] .quem .ident { display: none }
  .topo[data-conta-de-teste] .quem { padding: 0; gap: 0 }
  .topo[data-conta-de-teste] .fim { gap: 8px }

  /* ── conteúdo ─────────────────────────────────────────────────── */
  .tela { padding: 14px 14px 20px }
  .cabeca { margin-bottom: 13px }
  .cabeca h2 { font-size: 18px }
  .card { padding: 13px }
  .linha { gap: 10px }
  /* Id de importação e hash de termos não têm espaço para quebrar. */
  .mono { overflow-wrap: anywhere }

  .entrada { padding: 16px; min-height: 100dvh; padding-top: calc(16px + env(safe-area-inset-top, 0px)) }
  .entrada .card { padding: 18px }

  /* O seletor de escopo da busca em três palavras não cabe em 360px
     com padding de 13px de cada lado.

     `flex: 1` sozinho NÃO reparte a largura: todo item flex nasce com
     `min-width: auto`, que é o piso do próprio conteúdo — nenhum botão
     encolhe abaixo da palavra que carrega. Com cinco ou seis abas
     ("Panorama", "Inadimplência", "Assinaturas", "Faturas", "Webhooks")
     a soma passava da largura do celular e a fila saía pela direita do
     cartão: as últimas abas ficavam FORA da tela, sem nada dizendo que
     existiam. `.tela` rola de lado, então a aba não sumia — mas quem
     lê uma barra de abas não a arrasta para procurar o resto.

     Duas correções, e as duas são necessárias: `min-width: 0` devolve
     ao botão o direito de encolher, e `flex-wrap` manda para a linha de
     baixo o que ainda assim não couber. Rolagem lateral foi descartada:
     esconde aba atrás de um gesto invisível, que é o problema de novo
     com outro nome. Uma segunda fileira custa 40px de altura e mostra
     tudo. `flex-basis: auto` (e não `0`) para cada fileira ser repartida
     entre quem está NELA, sem herdar a largura de quem desceu. */
  .seg { display: flex; flex-wrap: wrap; width: 100%; gap: 4px }
  .seg button { flex: 1 1 auto; min-width: 0; padding: 10px 6px; font-size: 12px }

  /* ── central: um painel por vez ─────────────────────────────────
     Dois painéis lado a lado em 360px dariam duas colunas ilegíveis. A
     lista ocupa a tela até alguém escolher uma conversa; a partir daí é
     a conversa que ocupa, e o "Voltar" — escondido no desktop, porque lá
     a lista nunca sai de vista — reaparece para desfazer a escolha. */
  /* No celular a coluna visível ocupa a tela toda, e a rolagem continua
     por dentro dela — a altura vem do `flex: 1` de cima, que já se acerta
     sozinho com a barra do navegador móvel indo e voltando. */
  .central { grid-template-columns: 1fr }
  .central-lista { position: static }
  .central[data-aberta="1"] .central-lista { display: none }
  .central:not([data-aberta="1"]) .central-painel { display: none }
  .central .voltar { display: inline-flex }
  .abas button { padding: 11px 8px }

  /* ── cartão de imóvel: o caminho principal na rua ─────────────── */
  .item .info { padding: 12px }
  .item .topo-item { gap: 8px }
  .item h4 { font-size: 14.5px }
  .item .preco b { font-size: 16px }
  .item .specs { gap: 10px; font-size: 12px }
  /* "Ver ficha" atravessando a largura: é o destino mais provável do
     toque e vira um alvo de 44px por toda a largura do cartão. */
  .item .pe .acoes { margin-left: 0; width: 100% }
  .item .pe .acoes .btn { flex: 1 }

  /* Tabela com cabeçalho é grade de dados — larga por natureza, e rola
     dentro de si mesma. Tabela sem cabeçalho é lista de rótulo e valor:
     cabe na largura e não vira barra de rolagem à toa. */
  table:has(thead) {
    display: block; width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain;
  }
  table:has(thead) th, table:has(thead) td { white-space: nowrap }
}

/* Abaixo disto o rótulo de 10px já estoura a célula. */
@media (max-width: 380px) {
  .rail .nav { font-size: 9.5px; min-width: 48px }
  .topo { padding-left: 10px }
  .tela { padding: 12px 12px 18px }
}

/* ── ícones do menu ────────────────────────────────────────────────
   Desenhados aqui, como máscara: `currentColor` os pinta, então eles
   seguem o tema e o estado ativo sem uma segunda versão de arquivo.
   Nada de fonte de ícone — seria rede externa, e não há.

   Valem no desktop também, e não só no celular. Uma lista de doze
   palavras se lê da primeira à última toda vez; com o desenho ao lado, a
   pessoa passa a mirar a forma e para de ler o menu depois da primeira
   semana. É o mesmo trabalho de arquivo servindo aos dois tamanhos.

   O `@supports` existe porque sem máscara o `::before` viraria um
   quadrado sólido, que é pior do que rótulo sozinho. */
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  .rail .nav::before, .btn-icone::before, .chip.verificado::before {
    content: ""; flex: none; background-color: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
  }
  .rail .nav::before { width: 18px; height: 18px }
  .btn-icone::before { width: 19px; height: 19px }
  .chip.verificado::before { width: 12px; height: 12px }

  /* A lupa dentro do campo. `pointer-events: none` para que clicar nela
     seja clicar no campo, e não em nada. */
  .busca-global::before {
    content: ""; position: absolute; left: 12px; top: 50%;
    width: 15px; height: 15px; transform: translateY(-50%);
    pointer-events: none; background-color: var(--muted);
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
  }

  /* Na barra de baixo o ícone é o que informa: o rótulo tem 10px. */
  @media (max-width: 860px) {
    .rail .nav::before { width: 22px; height: 22px }
  }
}

.rail .nav[data-ir="assistente"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-8 8H4l-2 2v-10a9 9 0 0 1 18 0Z'/%3E%3Cpath d='M7 10h8M7 14h5'/%3E%3C/svg%3E") }

/* O padrão é um ponto neutro. Um item de menu novo, sem ícone aqui,
   ganha isto — e não um quadrado sólido de 22px, que é o que `mask`
   sem imagem produz. */
.rail .nav { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23000'/%3E%3C/svg%3E") }

.rail .nav[data-ir="painel"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") }
.rail .nav[data-ir="busca"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='M15.8 15.8 20.5 20.5'/%3E%3C/svg%3E") }
.rail .nav[data-ir="carteira"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='7.3' width='18.4' height='12.4' rx='2'/%3E%3Cpath d='M8.6 7.3V5.9a2 2 0 0 1 2-2h2.8a2 2 0 0 1 2 2v1.4'/%3E%3Cpath d='M2.8 12.6h18.4'/%3E%3C/svg%3E") }
.rail .nav[data-ir="oportunidades"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7.8' r='3.4'/%3E%3Cpath d='M2.9 19.6c0-3.4 2.7-5.4 6.1-5.4s6.1 2 6.1 5.4'/%3E%3Cpath d='M16.4 5.1a3 3 0 0 1 0 5.7'/%3E%3Cpath d='M18.1 14.1c2 .6 3.2 2.1 3.2 4.5'/%3E%3C/svg%3E") }
.rail .nav[data-ir="importar"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6v9.6'/%3E%3Cpath d='M8.3 9.5 12 13.2l3.7-3.7'/%3E%3Cpath d='M4 14.6v3.7A1.7 1.7 0 0 0 5.7 20h12.6a1.7 1.7 0 0 0 1.7-1.7v-3.7'/%3E%3C/svg%3E") }
.rail .nav[data-ir="integracoes"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.4 13.6a4 4 0 0 1 0-5.7l2.1-2.1a4 4 0 0 1 5.7 5.7l-1.1 1.1'/%3E%3Cpath d='M13.6 10.4a4 4 0 0 1 0 5.7l-2.1 2.1a4 4 0 0 1-5.7-5.7l1.1-1.1'/%3E%3C/svg%3E") }
.rail .nav[data-ir="equipe"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.4' y='3.6' width='15.2' height='16.8' rx='2.2'/%3E%3Cpath d='M9.8 3.6v2.2h4.4V3.6'/%3E%3Ccircle cx='12' cy='11.2' r='2.4'/%3E%3Cpath d='M8.2 17.2c0-2 1.7-3.2 3.8-3.2s3.8 1.2 3.8 3.2'/%3E%3C/svg%3E") }
.rail .nav[data-ir="plano"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 17.6a8.2 8.2 0 0 1 16.4 0'/%3E%3Cpath d='M12 17.4 16.4 10.8'/%3E%3Ccircle cx='12' cy='17.6' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E") }
.rail .nav[data-ir="cartao"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='5.6' width='18.4' height='12.8' rx='2'/%3E%3Cpath d='M6.4 10h5.2M6.4 13.8h3.6'/%3E%3Crect x='14.4' y='9.2' width='3.6' height='3.6' rx='.4'/%3E%3C/svg%3E") }
.rail .nav[data-ir="conversas"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 12.2c0 3.8-3.5 6.9-7.9 6.9-1 0-2-.2-2.9-.5l-5.1 1.8 1.4-3.9a6.4 6.4 0 0 1-1.3-4.3c0-3.8 3.5-6.9 7.9-6.9s7.9 3.1 7.9 6.9z'/%3E%3C/svg%3E") }
.rail .nav[data-ir="clientes"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.7'/%3E%3Cpath d='M4.7 20.3c0-3.8 3.3-5.9 7.3-5.9s7.3 2.1 7.3 5.9'/%3E%3C/svg%3E") }
.rail .nav[data-ir="agenda"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='5.4' width='17.2' height='15.2' rx='2'/%3E%3Cpath d='M3.4 10.2h17.2M8.2 3.4v3.8M15.8 3.4v3.8'/%3E%3C/svg%3E") }
.rail .nav[data-ir="contratos"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h7.5l4.5 4.5v12.5h-12z'/%3E%3Cpath d='M14 3.5v4.5h4.5M9 12.5h6M9 16h6'/%3E%3C/svg%3E") }
.rail .nav[data-ir="contrato-modelos"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M8 9h8M8 12.5h8M8 16h5'/%3E%3C/svg%3E") }
.rail .nav[data-ir="central"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2.3' fill='%23000' stroke='none'/%3E%3Cpath d='M7.9 7.9a5.8 5.8 0 0 0 0 8.2M16.1 7.9a5.8 5.8 0 0 1 0 8.2'/%3E%3Cpath d='M5 5a9.9 9.9 0 0 0 0 14M19 5a9.9 9.9 0 0 1 0 14'/%3E%3C/svg%3E") }
.rail .nav[data-ir="radar"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='M12 12 18.6 5.4'/%3E%3C/svg%3E") }
.rail .nav[data-ir="marketplace"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 9.8h15.6v9a1.8 1.8 0 0 1-1.8 1.8H6a1.8 1.8 0 0 1-1.8-1.8z'/%3E%3Cpath d='M3.2 9.8 5.2 4.2h13.6l2 5.6'/%3E%3Cpath d='M9.6 20.6v-5h4.8v5'/%3E%3C/svg%3E") }
.rail .nav[data-ir="billing"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='5.4' width='18.4' height='13.2' rx='2'/%3E%3Cpath d='M2.8 10h18.4M6.4 14.6h3.4'/%3E%3C/svg%3E") }
.rail .nav[data-ir="backoffice"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.4h8M17.2 6.4h2.8M4 12h3M11.8 12h8.2M4 17.6h8M17.2 17.6h2.8'/%3E%3Ccircle cx='14.6' cy='6.4' r='2.2'/%3E%3Ccircle cx='9.4' cy='12' r='2.2'/%3E%3Ccircle cx='14.6' cy='17.6' r='2.2'/%3E%3C/svg%3E") }
.rail .nav[data-ir="ia"] { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.4 3.6 12.2 8.4 17 10.2 12.2 12 10.4 16.8 8.6 12 3.8 10.2 8.6 8.4z'/%3E%3Cpath d='M17.4 14.6 18.3 16.9 20.6 17.8 18.3 18.7 17.4 21 16.5 18.7 14.2 17.8 16.5 16.9z'/%3E%3C/svg%3E") }
/* Sem o prefixo `.rail`: o botão de tema mudou de lugar e agora vive no
   topo, à vista, e não no pé de um menu que no celular nem existe. */
#tema { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 3.6a8.4 8.4 0 0 1 0 16.8z' fill='%23000'/%3E%3C/svg%3E") }

/* O visto do CRECI conferido. */
.chip.verificado { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.6 9.4 17.4 19.4 6.8'/%3E%3C/svg%3E") }

/* A lupa da busca do topo — o mesmo desenho do item "Buscar imóveis". */
.busca-global { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='M15.8 15.8 20.5 20.5'/%3E%3C/svg%3E") }
.rail #sair { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.4 4h4.1A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-4.1'/%3E%3Cpath d='M9.4 8.4 5.8 12l3.6 3.6'/%3E%3Cpath d='M5.8 12h8.8'/%3E%3C/svg%3E") }

/* ══════════════════════════════════════════════════════════════════
   O radar do entorno (telas/radar-mapa.js)
   ══════════════════════════════════════════════════════════════════

   ── A cor DIZ A ORIGEM, e por isso ela não é escolhida aqui ────────

   Três das quatro cores já existiam e são reaproveitadas de propósito,
   porque elas já significam algo no resto do produto:

     · `--own`  (azul)    — o que é seu. É a cor do imóvel no centro;
     · `--net`  (magenta) — a Rede Eficazia. É a cor de `chip.net` e do
       `data-origem="REDE"` na busca, e um imóvel da rede precisa ter a
       MESMA cor no mapa e na lista, senão as duas telas parecem falar
       de coisas diferentes;
     · `--warn` (âmbar)   — os prestadores do Marketplace. É a cor
       marrom do mockup, e ela já não competia com nenhuma origem.

   A quarta é nova, e nasce nova justamente porque não havia nada no
   produto que significasse "isto veio de fora e nós não conferimos". Um
   cinza-azulado dessaturado é a escolha certa por ser a MENOS chamativa
   das quatro: a base externa é a camada de menor confiabilidade, e ela
   não pode disputar atenção com um preço da rede.

   ── Os anéis são desenhados a partir de tokens, e não de opacidade ─

   `stroke="var(--line-2)" opacity=".5"` funcionaria no claro e sumiria
   no escuro, porque opacidade compõe com o fundo. Token por tema é mais
   verboso e é o único jeito de o anel ter o mesmo PESO nos dois. */

:root {
  --radar-ext:   #4A6E7E;
  --radar-anel:  #C9D6E8;
  --radar-grade: #EDF1F7;
  --radar-eixo:  #DDE4F0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --radar-ext:   #6FB3C8;
    --radar-anel:  #263248;
    --radar-grade: #131A28;
    --radar-eixo:  #1C2536;
  }
}
:root[data-theme="dark"] {
  --radar-ext:   #6FB3C8;
  --radar-anel:  #263248;
  --radar-grade: #131A28;
  --radar-eixo:  #1C2536;
}

.radar-caixa {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px;
  overflow: hidden;
}

/* `width:100%` com `height:auto` e viewBox quadrado: o radar encolhe no
   celular sem esmagar os anéis — círculo achatado mentiria sobre
   distância, que é a única coisa que este desenho afirma. */
.radar-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
}

.radar-pino { cursor: pointer; }
.radar-pino:hover circle.corpo { stroke: var(--ink); }
.radar-pino:focus-visible { outline: 2px solid var(--own); outline-offset: 2px; }

.radar-legenda {
  margin-top: 10px;
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  color: var(--body);
}

.radar-legenda-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.radar-bolha {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-top: 4px;
  flex: 0 0 auto;
}

/* ── Radar · aba Entorno (redesenho de 04/09/2026) ──────────────────
   Classes com dono: tudo desta aba nasce com o prefixo `rx-`, pela
   mesma razão da aba Demanda (`dem-`): reusar `.item`/`.numeros` faria
   o Entorno herdar mudanças feitas para outra tela.

   A tela lê de cima para baixo: a faixa do imóvel, quatro números, e
   só então o desenho — em meia largura, com o painel "Em volta" ao
   lado. As cores continuam sendo as de origem do dado: azul = seu,
   magenta = rede, âmbar = prestador, ardósia = base externa. */

.chip.ext { background: color-mix(in srgb, var(--radar-ext) 14%, transparent); color: var(--radar-ext) }
.chip .rx-ponto, .rx-grupo .titulo .rx-ponto {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-right: 6px; flex: none; vertical-align: 1px;
}

.rx-faixa {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: start;
  padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 14px;
}
.rx-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--own) }
.rx-eyebrow.rede { color: var(--net) }
.rx-quem h3 { font-size: 16px; margin-top: 3px; line-height: 1.3; text-wrap: balance }
.rx-onde { color: var(--muted); font-size: 12.5px; margin-top: 2px }
.rx-fatos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px }
.rx-controles { display: grid; gap: 8px; justify-items: end; width: min(100%, 420px); min-width: 300px }
.rx-controles > div { width: 100% }
.rx-controles label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px }
.rx-controles select { width: 100%; text-overflow: ellipsis }
.rx-linha { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; justify-content: end }
.rx-linha > div { width: auto }
.rx-raio { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--surface) }
.rx-raio button {
  padding: 6px 11px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--muted); cursor: pointer; border-right: 1px solid var(--line); white-space: nowrap;
}
.rx-raio button:last-child { border-right: 0 }
.rx-raio button:hover { color: var(--ink) }
.rx-raio button.on { background: var(--own); color: var(--on-accent) }
.rx-raio button:focus-visible { outline: 2px solid var(--own); outline-offset: -2px }

.rx-numeros {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  margin-bottom: 14px; overflow: hidden;
}
.rx-num { padding: 13px 14px; border-right: 1px solid var(--line); min-width: 0 }
.rx-num:last-child { border-right: 0 }
.rx-num .k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted) }
.rx-num .v {
  font-size: 21px; font-weight: 700; color: var(--ink); margin-top: 5px; letter-spacing: -.028em;
  font-variant-numeric: tabular-nums; line-height: 1.15; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
}
.rx-num .v small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0 }
.rx-num .v .chip { font-size: 11px; letter-spacing: 0; margin-top: 4px }
.rx-num .s { font-size: 11.5px; color: var(--muted); margin-top: 4px }
.rx-num .s b { color: var(--body); font-weight: 600 }
.rx-lnk { border: 0; background: none; padding: 0; font: inherit; font-size: inherit; color: var(--own); cursor: pointer; text-decoration: underline }
.rx-lnk:focus-visible { outline: 2px solid var(--own); outline-offset: 1px }
.rx-faixa-preco { position: relative; height: 6px; border-radius: 3px; background: var(--net-soft); margin: 9px 7px 0 }
.rx-faixa-preco .mediana { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--muted); transform: translateX(-1px) }
.rx-faixa-preco .este {
  position: absolute; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--own);
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--own); transform: translateX(-7px);
}

.rx-principal { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 14px; align-items: start; margin-bottom: 14px }
.rx-mapa { padding: 10px }
.rx-legenda { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding: 0 2px }
.rx-legenda .rx-sep { flex: 1 }
.rx-legenda .chip b { font-variant-numeric: tabular-nums; font-weight: 700; margin-left: 3px }

.rx-painel h3 { font-size: 14px }
.rx-grupo { margin-top: 12px }
.rx-grupo .titulo {
  display: flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.rx-grupo .titulo .n { margin-left: auto; letter-spacing: 0; text-transform: none }
.rx-lin {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 7px 4px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 6px;
}
.rx-lin:last-of-type { border-bottom: 0 }
.rx-lin:hover { background: var(--surface-2) }
.rx-lin.on { background: var(--own-soft) }
.rx-lin:focus-visible { outline: 2px solid var(--own); outline-offset: -2px }
.rx-lin .ic {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 13px;
  background: color-mix(in srgb, var(--radar-ext) 14%, transparent);
}
/* ── a categoria aberta ────────────────────────────────────────────
   Os filhos sao os OUTROS pontos da mesma categoria, e o trilho a
   esquerda diz isso: a categoria aberta continua sendo UM objeto do
   painel, e nao uma segunda lista solta embaixo da primeira. */
.rx-seta { font-style: normal; font-weight: 700; color: var(--radar-ext); margin-left: 5px;
           display: inline-block; transition: transform .18s ease }
.rx-lin.aberta { background: color-mix(in srgb, var(--radar-ext) 8%, transparent) }
.rx-lin.aberta.on { background: var(--own-soft) }
.rx-lin.aberta .rx-seta { transform: rotate(90deg) }
.rx-filhos {
  margin: 0 0 4px 13px; padding-left: 8px; border-radius: 0 6px 6px 0;
  border-left: 2px solid color-mix(in srgb, var(--radar-ext) 45%, transparent);
  background: color-mix(in srgb, var(--radar-ext) 5%, transparent);
}
.rx-filhos .rx-lin { grid-template-columns: 22px minmax(0, 1fr) auto; padding: 6px 4px }
.rx-filhos .rx-lin .ic { width: 22px; height: 22px; font-size: 12px; border-radius: 6px;
                         background: transparent }
.rx-filhos .rx-lin .nome b { font-size: 12.5px; font-weight: 500 }
.rx-lin.rede .ic { background: var(--net-soft) }
.rx-lin.prest .ic { background: var(--warn-soft) }
.rx-lin .nome { min-width: 0 }
.rx-lin .nome b { display: block; font-size: 13px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rx-lin .nome span { font-size: 11.5px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rx-lin .dist, .rx-lin .preco { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; color: var(--body); text-align: right; white-space: nowrap }
.rx-lin .preco { font-weight: 700; color: var(--ink) }
.rx-lin .dist small, .rx-lin .preco small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500 }
.rx-lin .preco.acima { color: var(--crit) }
.rx-lin .preco.abaixo { color: var(--ok) }
.rx-mais {
  display: block; width: 100%; margin-top: 6px; padding: 6px; border: 1px dashed var(--line-2); border-radius: 7px;
  background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.rx-mais:hover { color: var(--own); border-color: var(--own) }
.rx-mais:focus-visible { outline: 2px solid var(--own); outline-offset: 1px }

.radar-pino.on circle.corpo { stroke: var(--ink); stroke-width: 3 }

/* ── o destaque no radar ───────────────────────────────────────────
   Esmaecer NAO e apagar: o pino de fora da categoria aberta continua
   clicavel e continua com o `<title>`. Some-lo ensinaria "nao ha nada
   aqui", que e a confusao entre camada vazia e camada escondida.

   O pulso existe em todo pino e nasce invisivel — o SVG nao e refeito a
   cada clique, para nao pedir os ladrilhos do mapa de novo. */
.radar-pino.apagado { opacity: .26 }
.radar-pino.grupo circle.corpo { stroke: var(--radar-ext); stroke-width: 2.5 }
.radar-pulso { opacity: 0; transform-box: fill-box; transform-origin: center }
.radar-pino.on .radar-pulso { animation: radar-pulso 1.9s ease-out infinite }
@keyframes radar-pulso {
  from { transform: scale(.75); opacity: .55 }
  to   { transform: scale(2.4);  opacity: 0 }
}
/* Sem animacao o pulso teria de sumir — a regra global apaga toda
   animation. Aqui ele vira um anel parado, que e o mesmo recado. */
@media (prefers-reduced-motion: reduce) {
  .radar-pino.on .radar-pulso { opacity: .4; transform: scale(1.45) }
}

.rx-como { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); margin-bottom: 14px }
.rx-como summary { cursor: pointer; padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: var(--body); list-style: none; display: flex; align-items: center; gap: 8px }
.rx-como summary::-webkit-details-marker { display: none }
.rx-como summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.rx-como[open] summary::before { transform: rotate(45deg) }
.rx-como .corpo { padding: 0 14px 12px; font-size: 12.5px; color: var(--muted); display: grid; gap: 6px; max-width: 72ch }
.rx-como .corpo strong { color: var(--body) }

@media (max-width: 900px) {
  .rx-principal, .rx-numeros { grid-template-columns: 1fr }
  .rx-num { border-right: 0; border-bottom: 1px solid var(--line) }
  .rx-num:last-child { border-bottom: 0 }
  .rx-faixa { grid-template-columns: 1fr }
  .rx-controles { justify-items: stretch; min-width: 0; width: 100% }
  .rx-linha { justify-content: start }
  .rx-raio { display: flex; width: 100% }
  .rx-raio button { flex: 1 1 auto; padding: 8px 4px }
}
@media (prefers-reduced-motion: reduce) { .rx-como summary::before { transition: none } }

/* ── barra de suporte ───────────────────────────────────────────────
   Alta, com cor de alerta e sem botão de fechar, de propósito: ela
   existe para impedir que alguém mexa na conta de um cliente achando
   que está na própria. Uma faixa discreta seria pior que nenhuma — o
   olho aprende a ignorá-la em dois dias. */
.barra-suporte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--warn-soft);
  color: var(--warn);
  border-bottom: 2px solid var(--warn);
  font-size: 13px;
  line-height: 1.5;
}
.barra-suporte b { display: block; font-size: 14px }
.barra-suporte span { display: block; opacity: .85 }
.barra-suporte .btn { flex: 0 0 auto }

/* ══════════════════════════════════════════════════════════════════
   Minha conta
   
   A tela é uma pilha de `.card`, e cada linha é rótulo + valor + ação.
   `.linha-conta` e não `.linha` porque `.linha` já é a fila horizontal
   de botões que meia dúzia de telas usa — dois significados na mesma
   classe é o começo de uma briga de cascata.
   ══════════════════════════════════════════════════════════════════ */

.av-conta {
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--own); color: var(--on-accent);
  font-size: 21px; font-weight: 700;
}
.av-conta.com-foto { background-color: var(--surface-2); background-size: cover; background-position: center }

.linha-conta {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.linha-conta:first-of-type { border-top: 0; padding-top: 0 }
.linha-conta.topo-alinhado { align-items: flex-start }
.linha-conta.fim { justify-content: flex-end; border-top: 0; padding-bottom: 0 }
.linha-conta.empilhado { display: block }

.linha-conta .rotulo { width: 150px; flex: none; font-size: 12.5px; color: var(--muted) }
.linha-conta .rotulo.largo { width: auto; display: block; margin-bottom: 10px }
.linha-conta .valor { flex: 1; min-width: 0; color: var(--ink); font-size: 13.5px }
.linha-conta .valor b { display: block; font-weight: 600 }
.linha-conta .valor small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px }
.linha-conta .valor.apagado b, .linha-conta .apagado { color: var(--muted) }
.linha-conta .acao { margin-left: auto; display: flex; gap: 8px; flex: none }

/* `label.btn` para o seletor de arquivo: o `<input type="file">` fica
   escondido porque o controle nativo não aceita estilo, e o rótulo é o
   que o dedo alcança. `cursor: pointer` porque um label não vem com ele. */
.linha-conta .acao label.btn { cursor: pointer }

/* Só o CONTROLE, nunca o `div.campo` que envolve rótulo + campo — este
   é o OUTRO sentido da mesma classe, e dele é a regra de respiro lá em
   cima (`.campo { margin-bottom: 13px }`). Sem dizer o elemento, esta
   regra desenhava borda e fundo em volta de toda ficha de formulário do
   app; e o `flex: 1` esticava a busca da central até o pé da coluna,
   porque `.central-lista` é um flex VERTICAL — ali "crescer" é crescer
   em altura, e o campo virava um retângulo de meia tela para escrever
   uma palavra. Quem precisa crescer em largura pede na linha de baixo,
   onde a linha é horizontal e o pedido quer dizer o que parece. */
input.campo, select.campo, textarea.campo, span.campo {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px;
  padding: 9px 11px; font-size: 13.5px; color: var(--ink); min-width: 0;
  font-family: inherit;
}
.linha-conta .campo, .form-senha .campo { flex: 1 }
.campo:focus { background: var(--surface); outline: 2px solid var(--own); outline-offset: -1px }
.campo.travado { color: var(--muted); background: transparent; border-style: dashed }

.form-senha { display: flex; gap: 8px; flex-wrap: wrap }
.form-senha .campo { min-width: 160px }
.form-senha .campo-senha { flex: 1; min-width: 160px }
.form-senha .campo-senha .campo { width: 100% }

/* ── mostrar a senha ────────────────────────────────────────────────
   `.campo-senha` envolve só o `<input>`, nunca o `<label>` — é injetado
   por `ligarOlhosDeSenha()` (base.js) na hora do desenho, então o rótulo
   acima do campo continua fora dele e o olho fica alinhado com o campo. */
.campo-senha { position: relative }
.campo-senha input { padding-right: 38px; width: 100% }
.campo-senha .olho-senha {
  position: absolute; top: 50%; right: 3px; transform: translateY(-50%);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); border-radius: 6px;
}
.campo-senha .olho-senha:hover { color: var(--ink); background: var(--surface-2) }
.campo-senha .olho-senha:focus-visible { outline: 2px solid var(--own); outline-offset: 1px }

.explica { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; max-width: 62ch; line-height: 1.5 }
.explica.pequena { font-size: 11.5px; margin: 10px 0 0 }

/* ── o interruptor de consentimento ────────────────────────────────
   Desligado é o padrão, e o cinza é honesto: nada da pessoa vai para a
   rede sem que ela ligue. Verde e não azul porque aqui a cor fala de
   ESTADO (ligado/desligado), e não de origem do dado — azul é "meu",
   magenta é "da rede", e nenhum dos dois descreve um interruptor. */
.sw {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  border: 0; background: none; font-family: inherit; cursor: pointer; flex: none;
}
.sw i { width: 40px; height: 23px; border-radius: 999px; background: var(--line-2); position: relative; display: block }
.sw i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: left .14s ease;
}
.sw.on i { background: var(--ok) }
.sw.on i::after { left: 20px }
.sw b { font-size: 11.5px; font-weight: 600; color: var(--muted); width: 54px; text-align: right }
.sw.on b { color: var(--ok) }
.sw[disabled] { opacity: .5; cursor: not-allowed }

@media (prefers-reduced-motion: reduce) {
  .sw i::after { transition: none }
}

/* ── a prévia do cartão do parceiro ────────────────────────────────
   Fica ao LADO dos interruptores, e não abaixo: a decisão e a
   consequência dela precisam caber no mesmo olhar. Abaixo de 900px
   empilha, porque duas colunas de 300px numa tela de celular viram duas
   colunas ilegíveis. */
.rede-grade { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start }

.previa .rot {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 8px;
}
.cartao-parceiro {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px;
}
.cartao-parceiro .topo-p { display: flex; gap: 12px; align-items: center; margin-bottom: 12px }
.cartao-parceiro .topo-p b { display: block; font-size: 14px; color: var(--ink) }
.cartao-parceiro .topo-p span { font-size: 12px; color: var(--muted) }
.cartao-parceiro .contato {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  font-size: 13px; color: var(--ink); border-top: 1px solid var(--line);
}
.cartao-parceiro .contato .ic { width: 16px; flex: none; text-align: center; color: var(--muted); font-size: 12px }
.cartao-parceiro .contato.apagado { color: var(--muted); font-size: 12px }

/* ── o que o papel permite ─────────────────────────────────────────
   Linha apagada é informação, não ruído: ver o que o papel NÃO dá é o
   que responde "por que eu não tenho esse botão?" sem abrir chamado. */
.perm div { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; font-size: 13px; border-top: 1px solid var(--line) }
.perm div:first-child { border-top: 0 }
.perm .s { flex: none; width: 15px; color: var(--ok); font-weight: 700 }
.perm .n { color: var(--ink) }
.perm .d { color: var(--muted); font-size: 12px }
.perm .nao .s { color: var(--line-2) }
.perm .nao .n, .perm .nao .d { color: var(--muted); opacity: .65 }

@media (max-width: 900px) {
  .rede-grade { grid-template-columns: 1fr }
}
@media (max-width: 620px) {
  .linha-conta { flex-wrap: wrap }
  .linha-conta .rotulo { width: 100% }
  .linha-conta .acao { margin-left: 0 }
}

/* ══════════════════════════════════════════════════════════════════
   Editor de enquadramento da foto de perfil

   A máscara circular é uma CAMADA sobre o canvas, nunca algo pintado
   nele: o arquivo que sai é o quadrado inteiro, e o círculo é só como o
   app exibe a foto. Pintar a máscara no canvas gravaria os cantos
   apagados dentro do arquivo.
   ══════════════════════════════════════════════════════════════════ */

.editor-foto {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  padding: 4px 0 2px;
}

.palco-recorte { position: relative; width: 224px; height: 224px; flex: none; border-radius: 12px; overflow: hidden }

.palco-recorte canvas {
  width: 100%; height: 100%; display: block; background: var(--surface-2);
  /* Sem isto o dedo arrasta a PÁGINA em vez da foto — no celular, o
     editor simplesmente não funcionaria. */
  touch-action: none;
  cursor: grab;
}
.palco-recorte canvas:active { cursor: grabbing }
.palco-recorte canvas:focus-visible { outline: 2px solid var(--own); outline-offset: -2px }

/* O `box-shadow` gigante escurece tudo que está FORA do círculo, dentro
   do palco. `pointer-events: none` para o arrasto atravessar a máscara e
   chegar ao canvas. */
.mascara-recorte {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(12, 18, 32, .62);
  border: 2px solid rgba(255, 255, 255, .85);
}
:root[data-theme="dark"] .mascara-recorte { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .68) }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mascara-recorte { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .68) }
}

.controles-recorte { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px }
.controles-recorte b { font-size: 14px; color: var(--ink) }
.controles-recorte small { font-size: 12px; color: var(--muted) }
.controles-recorte .zoom { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px }
.controles-recorte .zoom span { font-size: 12px; color: var(--muted); width: 38px; flex: none }
.controles-recorte .zoom input { flex: 1; min-width: 0; accent-color: var(--own) }
.controles-recorte .acao { display: flex; gap: 8px; margin-top: 10px }

@media (max-width: 620px) {
  .editor-foto { gap: 14px }
  .palco-recorte { width: 100%; max-width: 260px; height: auto; aspect-ratio: 1 }
}


/* ══════════════════════════════════════════════════════════════════
   O DIRETÓRIO DA REDE
   Prefixo `dir-` porque `rede-` JÁ TEM DONO: `.rede-grade` é a prévia
   do cartão do parceiro, na tela de publicar. Tomar o nome emprestado
   é a armadilha que já custou dois defeitos nesta folha.
   ══════════════════════════════════════════════════════════════════ */

/* ── a porta, no painel ──────────────────────────────────────────── */
.dir-porta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px; font: inherit; color: inherit;
  transition: border-color .12s, transform .12s;
}
.dir-porta:hover { border-color: var(--net); transform: translateY(-1px) }
.dir-porta:focus-visible { outline: 2px solid var(--net); outline-offset: 2px }
.dir-porta-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.dir-porta-txt b { font-size: 14px; color: var(--ink) }
.dir-porta-cta { font-size: 12px; font-weight: 600; color: var(--net) }
.dir-porta-seta { font-size: 26px; color: var(--muted); line-height: 1; flex: none }

/* ── a lista ─────────────────────────────────────────────────────── */
.dir-lista { display: grid; gap: 9px }
.dir-linha {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 15px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .12s;
}
.dir-linha:hover, .dir-linha[data-fixado="1"] { border-color: var(--net) }
.dir-linha:focus-visible { outline: 2px solid var(--net); outline-offset: 2px }
/* `flex: 1` para o nome ocupar o vão entre o avatar e o número: sem
   isso o `space-between` da linha empurraria os três para os cantos e
   o rosto ficaria órfão, longe do nome a que pertence. */
.dir-quem { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px }
.dir-quem b { font-size: 14px; color: var(--ink) }
.dir-onde { flex-basis: 100%; font-size: 12px; color: var(--muted) }
.dir-quanto { flex: none; text-align: right }
.dir-quanto b {
  display: block; font-size: 19px; color: var(--ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.dir-quanto span { font-size: 11px; color: var(--muted) }
/* A conta sem imovel publicado (0105). Texto, e nao um zero grande: a
   linha existe para dizer que ha alguem com quem falar. */
.dir-sem { font-size: 11.5px; color: var(--muted); font-style: italic }

/* ── o resumo ────────────────────────────────────────────────────── */
.dir-resumo {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 320px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 14px; box-shadow: var(--shadow); cursor: default;
}
.dir-rot {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.dir-rot + .dir-rot, .dir-txt + .dir-rot, .dir-nums + .dir-rot, .dir-nota + .dir-rot {
  margin-top: 12px;
}
.dir-txt { font-size: 13px; color: var(--ink) }
.dir-nums { display: grid; gap: 3px }
.dir-l { display: flex; gap: 7px; align-items: baseline; font-size: 13px }
.dir-l b { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 22px }
.dir-l span { color: var(--muted) }
.dir-nota { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.45 }
.dir-acoes { display: flex; gap: 8px; margin-top: 14px }
.dir-acoes .btn { flex: 1 }

/* No toque não existe passar o mouse: a linha inteira abre o resumo, e
   ele desce POR BAIXO em vez de flutuar — flutuando, um painel de 320px
   sai da tela num aparelho de 360. */
@media (max-width: 760px) {
  .dir-resumo {
    position: static; width: auto; margin-top: 12px; box-shadow: none;
    border-color: var(--line);
  }
  .dir-linha { flex-wrap: wrap }
  .dir-quanto { text-align: left }
}

/* ── levar a conversa para o WhatsApp ────────────────────────────── */
.zap-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.zap-topo h3 { margin: 0 }
.zap .silencio { line-height: 1.5 }

/* ── o rosto de quem responde pela conta ─────────────────────────── */
.dir-av {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  background-size: cover; background-position: center; user-select: none;
}
/* Com foto, as iniciais sairiam por cima do rosto: o elemento fica vazio
   e a borda some, para o recorte redondo encostar no fundo do cartão. */
.dir-av.com-foto { border-color: transparent; color: transparent }

/* ── o rosto de quem responde, DENTRO do resumo ──
   `pq` porque aqui ele acompanha uma linha de texto e não titula um
   cartão: 38px ao lado de um nome de 13px vira o assunto do bloco.
   Modificador em `.dir-av` e não um `.p` solto — `.p` já tem dono em
   `.av.p`, e nome de classe com dono já custou dois defeitos nesta
   folha. */
.dir-av.pq { width: 34px; height: 34px; font-size: 11.5px }
.dir-responde { display: flex; align-items: center; gap: 10px }


/* ═════════════════════════════════════════════════════════════════
   A CENTRAL DE OPORTUNIDADES (0103)
   Prefixo `cen-` porque `rede-` e `dir-` JA TEM DONO: o primeiro e a
   previa do cartao do parceiro, o segundo e o diretorio. Nome de classe
   com dono e a armadilha que ja custou dois defeitos nesta folha.
   ═════════════════════════════════════════════════════════════════ */

/* ── a lista ── */
.cen-lista { display: grid; gap: 11px }
.cen-mural-grade { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.cen-cartao {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 16px;
}
.cen-quem {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px;
}
.cen-quem b { font-size: 13.5px; color: var(--ink) }
.cen-av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
  color: #fff; background: var(--grad);
}
/* A especie vai para a DIREITA da linha, e nao para a esquerda do titulo:
   quem varre a lista procura o assunto, nao a taxonomia. */
.cen-esp { margin-left: auto }

.cen-tit {
  font-size: 15px; font-weight: 600; color: var(--ink);
  line-height: 1.35; letter-spacing: -.01em; margin-bottom: 4px;
}
.cen-corpo { font-size: 13.5px; color: var(--body); margin-bottom: 9px }

.cen-imovel {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 9px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px;
}
.cen-imovel b { font-size: 13px; color: var(--ink) }
.cen-imovel span { font-size: 12px; color: var(--muted) }

.cen-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px }

/* A linha de aderencia usa o gradiente da marca em fundo tenue: e a unica
   informacao do cartao que e SOBRE VOCE, e ela precisa se separar do que
   o outro escreveu sem virar mais um chip colorido. */
.cen-casa {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(90deg, var(--own-soft), var(--net-soft));
  border-radius: 8px; padding: 9px 11px; margin-bottom: 11px;
}
.cen-casa b { font-size: 13px; color: var(--ink) }
.cen-casa span { font-size: 12px; color: var(--muted) }

.cen-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.cen-prazo { margin-left: auto }

.cen-erro:empty, .cen-casados:empty { display: none }

.cen-casados-lista {
  display: grid; gap: 7px; margin-top: 11px;
  border-top: 1px solid var(--line); padding-top: 11px;
}
.cen-casado {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-2); border-radius: 8px; padding: 9px 11px;
}
.cen-casado b { display: block; font-size: 13px; color: var(--ink) }
.cen-casado span { font-size: 12px; color: var(--muted) }
.cen-nada { font-size: 12px; color: var(--muted); margin-top: 9px; line-height: 1.45 }

/* ── o formulario ── */
.cen-dlg {
  border: 1px solid var(--line-2); border-radius: 12px; padding: 0;
  background: var(--surface); color: var(--body);
  width: min(680px, 94vw); max-height: 90dvh; box-shadow: var(--shadow);
}
.cen-dlg::backdrop { background: rgba(0,0,0,.55) }
.cen-form { display: grid; gap: 13px; padding: 18px; overflow-y: auto; max-height: 88dvh }
.cen-dlg-topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.cen-dlg-topo h3 { font-size: 17px; color: var(--ink); margin: 0 0 2px }
.cen-dlg-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 13px;
}

@media (max-width: 760px) {
  .cen-mural-grade { grid-template-columns: 1fr }
  .cen-esp, .cen-prazo { margin-left: 0 }
  .cen-acoes { align-items: stretch }
}

/* ── o bloco da Central dentro do painel ── */
.pnl-ops { display: grid; gap: 2px; margin-top: 11px }
.pnl-op {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: none; border: 0; border-top: 1px solid var(--line);
  padding: 11px 2px; transition: background .12s;
}
.pnl-op:first-child { border-top: 0 }
.pnl-op:hover { background: var(--surface-2) }
.pnl-op:focus-visible { outline: 2px solid var(--own); outline-offset: -2px }
.pnl-op-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.pnl-op-tit { font-size: 13.5px; font-weight: 600; color: var(--ink) }
.pnl-op-mot { font-size: 12px; color: var(--muted) }
.pnl-op-prazo { font-size: 11.5px; color: var(--warn); flex: none; font-weight: 600 }


/* ══ A CENTRAL, redesenhada — proposta de UX de 29/08 ══
   Primeiro mostrar valor, depois permitir refino. A ordem dos blocos
   nesta tela E a decisao: pulso, atalhos, controles, lista. */

.cen-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--net); margin-bottom: 5px;
}
.cen-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap }

/* ── o pulso ── */
.cen-pulso {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(90deg, var(--own-soft), var(--net-soft));
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 15px; margin-bottom: 13px;
}
/* Sem aderencia o bloco NAO some: ele muda de assunto. Um espaco vazio
   todo dia numa praca pequena e a prova diaria de que a rede nao existe;
   o mesmo espaco dizendo o que ha no estado e o contrario disso. */
.cen-pulso.quieto { background: var(--surface) }
.cen-pulso-txt { min-width: 0 }
.cen-pulso b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 2px }
.cen-pulso span { font-size: 12.5px; color: var(--muted) }
.cen-pulso .btn { margin-left: auto }

/* ── os controles numa linha so ── */
.cen-controles {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
}
.cen-praca {
  display: flex; align-items: center; gap: 8px; flex: none;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 4px 11px;
}
.cen-praca span {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
/* Sem borda e sem fundo: o campo E a caixa. A borda dupla era metade do
   que fazia o filtro parecer um formulario parado. */
.cen-praca input {
  border: 0; background: none; padding: 4px 0; font-size: 12.5px;
  color: var(--ink); width: 168px; font-family: inherit;
}
.cen-praca input:focus { outline: none }
.cen-praca:focus-within { border-color: var(--net) }

/* AS ABAS SAO DA CENTRAL, e nao a `.abas` do Atendimento.
   Aquela e uma grade de duas colunas -- desenhada para quatro abas
   numa coluna de 340px. Com sete, numa area de mil pixels, vira sete
   faixas palidas que parecem campo desabilitado. Foi a critica no2 da
   proposta, e a causa era classe de CSS com dono (armadilha 31). */
.cen-abas { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0 }
.cen-abas button {
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: none; border: 1px solid transparent; border-radius: 999px;
  padding: 5px 12px; white-space: nowrap;
}
.cen-abas button:hover { color: var(--ink) }
.cen-abas button.on { background: var(--net-soft); color: var(--net); border-color: var(--net) }
.cen-abas .n { font-size: 10.5px; opacity: .8; margin-left: 4px; font-variant-numeric: tabular-nums }

/* Escopo, e nao categoria. Fica fora da fila de abas de proposito: sao
   perguntas diferentes, e junta-las e o que faz duas abas parecerem
   ativas ao mesmo tempo. */
.cen-escopo { margin-left: auto; flex: none }

.cen-resumo {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); margin: 10px 0 11px;
}

/* ── o movimento da rede (0208) ──
   Um placar, e nao cartoes: a resposta nao traz imovel para abrir, e
   linha que parece clicavel e linha que ensina errado. Vendido em
   magenta (e da rede), alugado em azul -- os dois tons que a tela ja tem. */
.mov-numeros {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0;
}
.mov-numero {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.mov-numero span { font-size: 12px; color: var(--muted) }
.mov-numero b {
  font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mov-numero small { font-size: 11px; color: var(--muted) }
.mov-lista h3 { margin: 0 0 6px; font-size: 14px }
.mov-linha {
  display: grid; grid-template-columns: 2.2fr 1.4fr 1.1fr 1.5fr .8fr; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; align-items: center;
}
.mov-linha:last-of-type { border-bottom: 0 }
.mov-cab { font-size: 11.5px; font-weight: 700; color: var(--muted); padding-top: 4px }
.mov-vendido { color: var(--net) }
.mov-alugado { color: var(--own) }
@media (max-width: 760px) {
  .mov-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .mov-linha { grid-template-columns: 1fr 1fr; row-gap: 2px }
  .mov-cab { display: none }
}

/* O trilho magenta do cartao aderente. Nesta tela TUDO e da rede, entao
   magenta aqui nao diz "de terceiro" -- diz "isto e sobre voce". */
.cen-cartao { position: relative; overflow: hidden }
.cen-cartao.combina { border-color: var(--line-2) }
.cen-cartao.combina::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--net);
}

/* ═════════════════════════════════════════════════════════════════
   A FOTO NO CARTAO, E O CARROSSEL (0110)

   A capa ocupa a largura inteira e encosta na borda: foto com respiro
   lateral vira ilustracao de artigo, e o cartao do mural e um anuncio.
   As margens negativas casam com o `padding: 15px 16px` do cartao --
   mexer num sem mexer no outro abre uma faixa de fundo em volta.
   ═════════════════════════════════════════════════════════════════ */

.cen-fotos {
  position: relative; margin: -15px -16px 11px; overflow: hidden;
  border-radius: var(--r) var(--r) 0 0; background: var(--surface-2);
  aspect-ratio: 3 / 2;
}

/* O deslize com o dedo sai de graca daqui: `scroll-snap` nativo, sem
   biblioteca e sem ouvinte de toque. O JS so cuida das setas e dos
   pontinhos. A barra de rolagem some -- ela e o proprio carrossel. */
.cen-faixa {
  display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cen-faixa::-webkit-scrollbar { display: none }
.cen-faixa:focus-visible { outline: 2px solid var(--own); outline-offset: -2px }
.cen-slide { flex: 0 0 100%; scroll-snap-align: center; height: 100% }
.cen-slide img { width: 100%; height: 100%; object-fit: cover; display: block }

/* As setas aparecem no ponteiro e no foco de teclado. No toque elas
   ficam visiveis: nao ha hover, e quem nao percebe que a foto desliza
   nao descobre sozinho que ha mais de uma. */
.cen-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(12, 18, 32, .52); color: #fff;
  opacity: 0; transition: opacity .14s, background .14s;
}
.cen-fotos:hover .cen-seta, .cen-seta:focus-visible { opacity: 1 }
.cen-seta:hover { background: rgba(12, 18, 32, .78) }
.cen-seta:focus-visible { outline: 2px solid #fff; outline-offset: 2px }
/* Na ponta a seta SOME em vez de ficar cinza: botao que nao faz nada
   convida ao segundo clique. */
.cen-seta[disabled] { opacity: 0; pointer-events: none }
.cen-seta.ant { left: 9px }
.cen-seta.prox { right: 9px }
.cen-seta svg { width: 15px; height: 15px }

@media (hover: none) {
  .cen-seta { opacity: 1; background: rgba(12, 18, 32, .4) }
  .cen-seta[disabled] { opacity: 0 }
}

.cen-pontos {
  position: absolute; left: 0; right: 0; bottom: 9px;
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.cen-pontos i {
  width: 5px; height: 5px; border-radius: 50%; display: block;
  background: rgba(255, 255, 255, .55); transition: background .14s, transform .14s;
}
.cen-pontos i.on { background: #fff; transform: scale(1.35) }

.cen-conta {
  position: absolute; top: 9px; right: 9px; pointer-events: none;
  background: rgba(12, 18, 32, .55); color: #fff; border-radius: 999px;
  padding: 2px 8px; font-size: 11px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* O trilho magenta do cartao aderente precisa vencer a foto.
   `.cen-fotos` e posicionado e vem DEPOIS no DOM, entao sem z-index ele
   pintaria por cima do ::before e o cartao perderia a unica marca que
   diz "isto e sobre voce". */
.cen-cartao.combina::before { z-index: 1 }

/* ── o pe do feed (a rolagem infinita) ── */
.cen-mais {
  text-align: center; padding: 14px 0 4px;
  font-size: 12.5px; color: var(--muted);
}
.cen-mais.fim { color: var(--muted); opacity: .8 }

/* ── o seletor de foto, no formulario ── */
.cen-escolha { display: grid; gap: 7px }
.cen-tiras { display: flex; gap: 9px; overflow-x: auto; padding: 3px 3px 7px }
.cen-tile {
  flex: 0 0 96px; height: 64px; padding: 0; overflow: hidden; position: relative;
  border: 2px solid var(--line-2); border-radius: 8px;
  background: var(--surface-2); cursor: pointer; display: block;
}
.cen-tile img { width: 100%; height: 100%; object-fit: cover; display: block }
.cen-tile[aria-pressed="true"] { border-color: var(--own) }
.cen-tile[aria-pressed="true"]::after {
  content: "✓"; position: absolute; right: 4px; top: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--own); color: var(--on-accent);
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
}
.cen-tile:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }
.cen-tile.auto {
  display: grid; align-content: center; gap: 3px; text-align: center;
  color: var(--muted); font-size: 10.5px; line-height: 1.25; font-family: inherit;
}
.cen-tile.auto b { color: var(--ink); font-size: 11px }

@media (max-width: 760px) {
  .cen-escopo { margin-left: 0 }
  .cen-praca input { width: 100% }
  .cen-praca { width: 100% }
}

/* ── a logo da empresa (0106) ──
   A moldura muda com o conteudo, e nao e enfeite: iniciais sao um
   monograma e pedem circulo cheio; logo pede quadrado arredondado, fundo
   neutro e `contain`. Quase toda logo chega transparente e horizontal --
   um circulo com recorte comeria o nome ao lado do simbolo. */
.cen-av.com-logo, .dir-av.com-logo {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 7px; padding: 2px; overflow: hidden;
}
.cen-av.com-logo img, .dir-av.com-logo img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* ── o cartao de marca, em Minha conta ── */
.marca-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.marca-quadro {
  width: 88px; height: 88px; flex: none; display: grid; place-items: center;
  background: var(--surface-2); border: 1px dashed var(--line-2);
  border-radius: var(--r); overflow: hidden; padding: 6px;
}
.marca-quadro img { max-width: 100%; max-height: 100%; object-fit: contain; display: block }
.marca-quadro.tem { border-style: solid }
.marca-vazio { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.35 }
.marca-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }

/* ═════════════════════════════════════════════════════════════════
   O VISOR DE IMAGEM (`public/visor.js`)

   Prefixo `visor-` e seletor por ATRIBUTO. Nenhum nome novo disputa
   `.av`, `.dir-av`, `.cen-av` ou `.marca-quadro` — as quatro classes de
   imagem que já têm dono nesta folha. A armadilha de tomar emprestado
   nome de classe já custou dois defeitos aqui; `[data-ampliar]` não tem
   como colidir com nada porque não existe em mais lugar nenhum.
   ═════════════════════════════════════════════════════════════════ */

/* `zoom-in` e não `pointer`: o cursor é a única coisa que anuncia o
   recurso antes do clique, e ele deve dizer O QUE acontece — a seta com
   a mão promete navegação. */
[data-ampliar] { cursor: zoom-in }
[data-ampliar]:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }

.visor {
  /* O `<dialog>` nasce com `max-width`, `margin: auto` e borda. Os três
     saem: aqui ele é a tela inteira, e o vazio em volta da imagem É a
     área de fechar — um diálogo do tamanho da foto não teria onde
     receber esse clique. */
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
  display: grid; place-content: center; justify-items: center; gap: 12px;
}
.visor::backdrop { background: rgba(0,0,0,.82) }

.visor-img {
  max-width: min(92vw, 900px); max-height: 82vh;
  object-fit: contain; display: block;
  border-radius: var(--r);
  /* Chão para a logo transparente. Quase toda logo chega em PNG com
     fundo vazio, e boa parte é branca ou clara: sobre o preto do fundo
     do visor, ampliar essas some com a marca em vez de mostrá-la. */
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

/* Branco fixo, e não `var(--ink)`: o fundo do visor é escuro nos DOIS
   temas, então a tinta do tema claro seria texto quase preto sobre
   preto. */
.visor-legenda {
  margin: 0; max-width: min(92vw, 900px); text-align: center;
  font-size: 13px; color: rgba(255,255,255,.86);
}

.visor-fechar {
  position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.45);
  color: #fff; font-size: 15px; line-height: 1;
  display: grid; place-items: center;
}
.visor-fechar:hover { background: rgba(255,255,255,.16) }

/* A entrada só existe como `@keyframes`, sem estado inicial em regra
   normal. É o que faz `prefers-reduced-motion` (que apaga toda animação
   com `animation: none !important`) devolver o visor JÁ visível, em vez
   de um overlay parado em `opacity: 0`. */
.visor[open] { animation: visor-entra 140ms ease-out }
.visor[open]::backdrop { animation: visor-entra 140ms ease-out }
@keyframes visor-entra { from { opacity: 0 } to { opacity: 1 } }

/* ═════════════════════════════════════════════════════════════════
   O CONVITE DE INSTALAR (`mostrarConvite()` em `public/base.js`)

   Este cartão nasceu da faixa que ele substitui. A faixa dizia o certo
   e ninguém via: `--own-soft` sob `--own`, 13px, no rodapé — um tom
   pensado para DESAPARECER, que é o que se quer de um aviso de
   passagem e o contrário do que se quer da única chance de o app virar
   ícone na tela de início.

   Duas escolhas resolvem o contraste sem inventar cor:

   · o VÉU. Sobre `rgba(6,10,20,.62)` o `--own` sólido já é o elemento
     mais forte da tela. Nenhum token novo entra na paleta — e é por
     isso que o cartão continua certo nos dois temas, onde uma cor
     "mais forte" escolhida à mão erraria num deles;
   · a CRISTA em `--grad`, o mesmo fio azul→magenta que abre o topo do
     app. É o app se apresentando, não um banner de promoção.

   Prefixo `convite-` em tudo, e sem uma única classe crua: `.acao` ou
   `.passos` soltos herdariam grade e alinhamento de outras telas —
   armadilha velha desta folha.

   `.faixa-sistema` continua existindo logo acima, e continua sendo de
   "sem conexão" e "versão nova". Separar as duas cascas é metade do
   ganho: cada uma volta a significar uma coisa só.
   ═════════════════════════════════════════════════════════════════ */

.convite-instalar {
  /* `min()` e não `max-width`: o `<dialog>` já tem largura de conteúdo,
     e num iPhone SE de 320px a margem de 16px é o que impede o cartão
     de encostar nas duas bordas. */
  width: min(370px, calc(100vw - 32px));
  padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--body);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.55);
}
.convite-instalar::backdrop { background: rgba(6,10,20,.62) }

.convite-crista { height: 5px; background: var(--grad) }

.convite-miolo { padding: 20px 19px 18px; text-align: center }

.convite-selo {
  display: block; width: 56px; height: 56px; margin: 0 auto 13px;
  border-radius: 15px; box-shadow: 0 8px 18px -8px rgba(0,108,252,.55);
}

.convite-titulo {
  margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.22;
  letter-spacing: -.015em; color: var(--ink); text-wrap: balance;
}

.convite-diz { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--body) }
.convite-diz + .convite-diz { margin-top: 8px }

/* Os passos do iPhone. Numerados porque é uma sequência de verdade —
   Compartilhar ANTES de "Adicionar à Tela de Início" —, e alinhados à
   esquerda porque instrução centralizada não se lê em fila. */
.convite-passos {
  list-style: none; margin: 15px 0 0; padding: 0;
  display: grid; gap: 9px; text-align: left;
}
.convite-passos li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--line);
}
/* `--on-accent` e não `#fff`: no tema escuro `--net` é rosa claro, e
   branco sobre ele seria o texto ilegível de sempre. */
.convite-ordem {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; background: var(--net); color: var(--on-accent);
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.convite-icone {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--own);
}
.convite-icone svg { display: block; width: 15px; height: 15px }
.convite-fala { font-size: 12.5px; line-height: 1.45; color: var(--body) }
.convite-fala b { color: var(--ink); font-weight: 600 }

.convite-aviso {
  margin: 14px 0 0; padding: 11px; border-radius: 11px; text-align: left;
  font-size: 12.5px; line-height: 1.5;
  background: var(--warn-soft); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
}

.convite-acao {
  display: block; width: 100%; margin-top: 14px; padding: 13px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; border-radius: 11px; cursor: pointer;
}
/* Dois botões seguidos são a MESMA decisão em duas respostas: o respiro
   entre eles é menor que o que separa o botão do texto acima. O seletor
   tem duas classes e por isso vence o `margin-top` da regra anterior. */
.convite-acao + .convite-acao { margin-top: 6px }
.convite-acao.forte {
  background: var(--own); border-color: var(--own); color: var(--on-accent);
}
/* O "Entendi" do iPhone é magenta porque não instala nada: ele fecha uma
   INSTRUÇÃO. Azul sólido ali prometeria o botão que a Apple não dá. */
.convite-acao.forte.rede { background: var(--net); border-color: var(--net) }
.convite-acao.contorno {
  background: var(--surface); border-color: var(--line-2); color: var(--ink);
}
.convite-acao.calma {
  background: none; color: var(--muted); font-weight: 500; padding: 11px;
}
.convite-acao[disabled] { cursor: default; opacity: 1 }

.convite-fino { margin: 12px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted) }

/* Como no visor: a entrada existe só em `@keyframes`, sem estado inicial
   em regra normal. É o que faz `prefers-reduced-motion` devolver o
   cartão JÁ visível em vez de um modal parado em `opacity: 0`. */
.convite-instalar[open] { animation: convite-entra 160ms ease-out }
.convite-instalar[open]::backdrop { animation: convite-veu 160ms ease-out }
@keyframes convite-entra {
  from { opacity: 0; transform: translateY(10px) scale(.98) }
  to { opacity: 1; transform: none }
}
@keyframes convite-veu { from { opacity: 0 } to { opacity: 1 } }

/* ═════════════════════════════════════════════════════════════════
   A JANELA (`abrirJanela()`, `avisar()`, `confirmar()`, `perguntar()`
   em `public/janela.js`)

   É o cartão do convite de instalação, generalizado: o mesmo véu, a
   mesma crista em `--grad`, a mesma entrada. As regras abaixo repetem
   as do convite em vez de herdá-las porque os dois cartões evoluem em
   ritmos diferentes — e `.convite-acao` continua significando só o que
   significa.

   O selo é a cor de TOM, e o tom segue a identidade: `--own` para o
   que é seu, `--net` para o que é da rede, `--warn`/`--crit`/`--ok`
   para estado. O botão forte herda o tom (azul, magenta ou vermelho);
   o de contorno é sempre o mesmo, porque "não fazer nada" não tem cor.

   Prefixo `janela-` em tudo, pela armadilha velha desta folha: uma
   `.acoes` ou `.campo` solta herdaria a grade de outra tela.
   ═════════════════════════════════════════════════════════════════ */

/* A janela ROLA quando passa da altura da tela. Até 01/10/2026 ela tinha
   `overflow: hidden`: o navegador limita o `<dialog>` à altura da tela, e
   o que passava dali era cortado sem rolar. No celular, a janela das
   missões ("Acenda o cérebro") mostrava 721px de 1.067, o "Fechar" ficava
   embaixo do corte, e a pessoa não tinha como sair (#124, 05/09). O
   `hidden` só existia para os cantos redondos cortarem a crista, e o
   `auto` corta igual. */
.janela {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--body);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.55);
}
.janela.larga { width: min(560px, calc(100vw - 32px)) }
.janela::backdrop { background: rgba(6,10,20,.62) }
/* O foco mora nos botões e no campo; o cartão inteiro não é alvo. */
.janela:focus, .janela:focus-visible { outline: none }

/* Sem `<dialog>`: o mesmo cartão dentro de um véu fixo. O véu também é
   `.janela`, e o limite de altura de cima o deixaria 24px curto no pé:
   aqui ele cobre a tela inteira, e quem rola é o cartão. */
.janela.janela-veu {
  position: fixed; inset: 0; z-index: 80; width: auto; max-width: none;
  max-height: none; overflow: hidden;
  padding: 16px; border: 0; border-radius: 0; box-shadow: none;
  background: rgba(6,10,20,.62); display: grid; place-items: center;
}
.janela-cartao {
  width: min(420px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--body);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.55);
}
.janela.larga .janela-cartao { width: min(560px, 100%) }

.janela-crista { height: 5px; background: var(--grad) }
.janela-miolo { padding: 20px 22px 18px }

/* `grid-template-columns: none` e `gap: 0` não são enfeite. O tom
   `atencao`, o de toda confirmação (`confirmar()`), também é o nome da
   grade dos cards de atenção do painel (`.atencao`, colunas de 230px no
   mínimo). O selo herdava essa grade, e o ícone ia parar 104px à direita
   do quadradinho, fora dele. É a quinta classe com dono tomada
   emprestada nesta folha, depois de `.campo`, `.topo`, `.aviso` e
   `.explica`. */
.janela-selo {
  width: 46px; height: 46px; border-radius: 13px; margin: 0 0 12px;
  display: grid; place-items: center; grid-template-columns: none; gap: 0;
}
.janela-selo svg { width: 22px; height: 22px; display: block }
.janela-selo.info, .janela-selo.pergunta { background: var(--own-soft); color: var(--own) }
.janela-selo.rede { background: var(--net-soft); color: var(--net) }
.janela-selo.atencao { background: var(--warn-soft); color: var(--warn) }
.janela-selo.perigo { background: var(--crit-soft); color: var(--crit) }
.janela-selo.ok { background: var(--ok-soft); color: var(--ok) }

.janela-titulo {
  margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.012em; color: var(--ink); text-wrap: balance;
}
.janela-diz { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--body); max-width: 60ch }
.janela-diz + .janela-diz { margin-top: 8px }
.janela-diz b, .janela-diz strong { color: var(--ink); font-weight: 600 }
.janela-fino { margin: 12px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted) }

.janela-campo { margin-top: 12px }
.janela-campo label {
  display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 5px;
}
.janela-campo input, .janela-campo textarea {
  width: 100%; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 9px 11px; resize: vertical;
}
.janela-campo input:focus, .janela-campo textarea:focus {
  outline: 2px solid var(--own); outline-offset: 1px; border-color: transparent;
}
.janela-dica { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.45 }

/* O erro mora DENTRO da janela: quem digitou errado corrige onde está,
   em vez de ver a janela fechar e outra abrir dizendo que errou. */
.janela-erro {
  margin-top: 12px; padding: 11px 12px; border-radius: 11px;
  background: var(--crit-soft); color: var(--crit);
  border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent);
  font-size: 12.5px; line-height: 1.5;
}

/* A nota do prestador (Marketplace): cinco estrelas em vez de um campo
   "de 1 a 5". Botões de verdade — teclado e leitor de tela chegam. */
.janela-estrelas { display: flex; gap: 4px; margin-top: 12px }
.janela-estrelas button {
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 24px; line-height: 1;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--line-2);
}
.janela-estrelas button:hover, .janela-estrelas button.acesa { color: var(--warn); border-color: var(--warn) }
.janela-estrelas button:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }

/* Os botões ficam sempre à vista: quando a janela rola, o pé gruda no fim
   dela, e o conteúdo passa por baixo. O respiro de 18px acima continua o
   mesmo (6 de margem + 12 de recheio), e o de baixo vem do recheio dele,
   e não mais do fim do miolo — o `-18px` devolve os 18 do miolo, e a
   janela que cabe na tela sai igual, pixel por pixel. A faixa de cima vai
   do transparente à cor do cartão: o que rola some por baixo, e não é
   cortado a seco. `janela.js` põe os botões por ÚLTIMO no miolo, e é
   isso que deixa o `bottom: 0` valer. */
.janela-acoes {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  position: sticky; bottom: 0; z-index: 1;
  margin: 6px 0 -18px; padding: 12px 0 18px;
  background: linear-gradient(to bottom, transparent, var(--surface) 12px);
}
.janela-acao {
  padding: 10px 16px; border-radius: 11px; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; min-width: 110px;
}
.janela-acao:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }
.janela-acao.forte { background: var(--own); border-color: var(--own); color: var(--on-accent) }
.janela-acao.forte:hover { background: var(--own-2); border-color: var(--own-2) }
.janela-acao.forte.rede { background: var(--net); border-color: var(--net) }
.janela-acao.forte.rede:hover { background: var(--net-2); border-color: var(--net-2) }
/* Branco fixo sobre `--crit`: nos dois temas o vermelho é escuro o
   bastante para carregar texto branco, e `--on-accent` do tema escuro
   é quase preto — feito para o azul-claro, não para este. */
.janela-acao.forte.perigo { background: var(--crit); border-color: var(--crit); color: #fff }
.janela-acao.contorno { background: var(--surface); border-color: var(--line-2); color: var(--ink) }
.janela-acao.contorno:hover { background: var(--surface-2) }
.janela-acao.calma { background: none; color: var(--muted); font-weight: 500 }
.janela-acao[disabled] { opacity: .45; cursor: default }

/* Como no convite: a entrada existe só em `@keyframes`, sem estado
   inicial em regra normal — `prefers-reduced-motion` devolve a janela
   JÁ visível em vez de parada em `opacity: 0`. */
.janela[open] { animation: janela-entra 180ms cubic-bezier(.2,.8,.2,1) }
.janela[open]::backdrop { animation: convite-veu 160ms ease-out }
@keyframes janela-entra {
  from { opacity: 0; transform: translateY(12px) scale(.97) }
  to { opacity: 1; transform: none }
}

/* ═════════════════════════════════════════════════════════════════
   A GRAVAÇÃO DA VOZ (`gravarMinhaVoz()` em `telas/canais.js`)

   Vive dentro de uma `.janela.larga` e troca de estado sem fechar. O
   gravador é o que responde "o microfone está me ouvindo?" sem a
   pessoa ler nada: o halo do microfone respira com o volume, e a onda
   mostra o espectro — graves à esquerda em azul, agudos à direita em
   magenta, as duas cores da marca com um significado que não é o de
   "seu" e "da rede": aqui elas são só as pontas de uma escala.

   A onda CONTINUA sob `prefers-reduced-motion` — ela é informação, não
   decoração. Só o anel que se expande e o ponto que pisca param.
   ═════════════════════════════════════════════════════════════════ */

.voz-passos {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 11.5px; color: var(--muted); letter-spacing: .02em;
}
.voz-passos .p { display: flex; align-items: center; gap: 6px }
.voz-passos .n {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line-2);
}
.voz-passos .p.agora { color: var(--ink); font-weight: 600 }
.voz-passos .p.agora .n { background: var(--net); border-color: var(--net); color: var(--on-accent) }
.voz-passos .p.feito .n { background: var(--ok); border-color: var(--ok); color: var(--on-accent) }
.voz-passos .tra { flex: 1; height: 1px; background: var(--line) }

/* O texto que se lê: grande, com respiro, e rolável quando não cabe —
   cortar o texto de leitura é cortar a voz. */
.voz-leitura {
  margin: 12px 0 0; padding: 14px 16px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 16.5px; line-height: 1.6; color: var(--ink);
  max-height: min(42vh, 260px); overflow: auto;
}
.voz-leitura.consentimento { font-size: 17.5px }
.voz-leitura p { margin: 0 } .voz-leitura p + p { margin-top: 10px }

.voz-gravador {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
}
.voz-halo { position: relative; width: 64px; height: 64px; display: grid; place-items: center }
.voz-halo .anel {
  position: absolute; inset: 0; border-radius: 50%; opacity: .9;
  background: radial-gradient(circle, color-mix(in srgb, var(--net) 40%, transparent) 0%, transparent 70%);
  transform: scale(var(--nivel, .55)); transition: transform 80ms linear;
}
.voz-halo .anel.dois {
  background: none; border: 1.5px solid color-mix(in srgb, var(--own) 55%, transparent);
  animation: voz-anel 1.8s ease-out infinite;
}
@keyframes voz-anel { from { transform: scale(.55); opacity: .9 } to { transform: scale(1.15); opacity: 0 } }
.voz-halo .mic {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(0,108,252,.6);
}
.voz-halo .mic svg { width: 18px; height: 18px; display: block }
.voz-gravador.parado .voz-halo .anel { display: none }
.voz-gravador.parado .voz-halo .mic { background: var(--line-2); color: var(--surface); box-shadow: none }

.voz-onda-wrap { display: grid; gap: 6px; min-width: 0 }
.voz-onda { width: 100%; height: 56px; display: block }
.voz-medidor {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--muted);
}
.voz-medidor .rec { display: flex; align-items: center; gap: 6px; color: var(--crit); font-weight: 600; letter-spacing: .04em }
.voz-medidor .rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--crit); animation: voz-pisca 1.2s ease-in-out infinite }
@keyframes voz-pisca { 50% { opacity: .35 } }
.voz-medidor .tempo { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600 }
/* A faixa alvo muda de cor com o cronômetro: cinza antes do mínimo,
   verde dentro do que o fornecedor recomenda, âmbar quando passar. */
.voz-medidor .faixa { font-variant-numeric: tabular-nums }
.voz-medidor .faixa.boa { color: var(--ok); font-weight: 600 }
.voz-medidor .faixa.longa { color: var(--warn); font-weight: 600 }
.voz-medidor .escala { display: flex; gap: 5px }
.voz-medidor .escala b { font-weight: 600; color: var(--own) }
.voz-medidor .escala b.ag { color: var(--net) }

/* "Criando a sua voz": duas órbitas contrárias, nas duas cores. */
.voz-criando { display: grid; place-items: center; gap: 12px; padding: 14px 0 6px; text-align: center }
.voz-orbita { position: relative; width: 72px; height: 72px }
.voz-orbita i {
  position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent;
  border-top-color: var(--own); border-right-color: var(--net);
  animation: voz-gira 1.1s linear infinite;
}
.voz-orbita i:nth-child(2) {
  inset: 10px; border-top-color: var(--net); border-right-color: var(--own);
  animation-duration: 1.6s; animation-direction: reverse;
}
.voz-orbita b {
  position: absolute; inset: 24px; border-radius: 50%; background: var(--grad); opacity: .85;
  animation: voz-pulsa 1.6s ease-in-out infinite;
}
@keyframes voz-gira { to { transform: rotate(360deg) } }
@keyframes voz-pulsa { 50% { transform: scale(.8); opacity: .55 } }
.voz-criando .janela-titulo, .voz-criando .janela-diz { margin: 0; text-align: center }
.voz-barra { width: 100%; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line) }
.voz-barra i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--grad); animation: voz-corre 1.4s ease-in-out infinite }
@keyframes voz-corre { from { transform: translateX(-100%) } to { transform: translateX(260%) } }

/* "Pronta": o check se desenha. */
.voz-pronta { display: grid; place-items: center; gap: 10px; padding: 8px 0 2px; text-align: center }
.voz-pronta .janela-titulo, .voz-pronta .janela-diz { margin: 0; text-align: center }
.voz-check {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ok-soft); color: var(--ok);
  animation: voz-check-entra 420ms cubic-bezier(.2,.9,.3,1.4);
}
.voz-check svg { width: 30px; height: 30px }
.voz-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: voz-risca 420ms 180ms ease-out forwards }
@keyframes voz-check-entra { from { transform: scale(.5); opacity: 0 } }
@keyframes voz-risca { to { stroke-dashoffset: 0 } }

@media (prefers-reduced-motion: reduce) {
  .voz-halo .anel.dois, .voz-medidor .rec i, .voz-orbita i, .voz-orbita b, .voz-barra i,
  .voz-check, .voz-check path { animation: none }
  .voz-check path { stroke-dashoffset: 0 }
  .voz-barra i { width: 100% }
}

@media (max-width: 480px) {
  .voz-gravador { grid-template-columns: 52px 1fr; gap: 10px; padding: 10px }
  .voz-halo { width: 52px; height: 52px }
  .voz-medidor .escala { display: none }
}

/* ═════════════════════════════════════════════════════════════════
   A URGÊNCIA DECLARADA (0114)

   A cor é `crit`, e isso NÃO abre exceção na identidade. Azul é o que é
   meu e magenta é o que é da rede — as duas já respondem a outra
   pergunta, e numa tela em que tudo é da rede um chip magenta não
   informaria nada. A mesma régua que as reserva reserva a cor de estado
   para estado: `warn` vencendo, `crit` vencido, `ok` no CRECI. Urgência
   é estado.

   Prefixo `cen-` porque a tela inteira usa: `urg-` sem dono seria a
   armadilha de sempre nesta folha.
   ═════════════════════════════════════════════════════════════════ */

.cen-cartao.cen-urgente {
  border-color: color-mix(in srgb, var(--crit) 42%, var(--line));
}

/* A faixa encosta nas bordas como a foto encosta, e pelo mesmo motivo:
   aviso com respiro lateral vira etiqueta colada, e a margem negativa
   casa com o `padding: 15px 16px` do cartão. */
.cen-urg {
  display: flex; align-items: center; gap: 7px;
  margin: -15px -16px 11px; padding: 7px 16px;
  background: var(--crit-soft); color: var(--crit);
  border-bottom: 1px solid color-mix(in srgb, var(--crit) 26%, transparent);
  border-radius: var(--r) var(--r) 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}

/* A foto vem DEPOIS da faixa e já não é o topo do cartão: sem isto, a
   margem negativa dela subiria por cima do aviso. */
.cen-urgente .cen-fotos { margin-top: 0; border-radius: 0 }

/* O relógio: mono e tabular porque ele muda de minuto em minuto, e
   número que muda de largura faz a linha inteira tremer. */
.cen-urg-relogio {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; text-transform: none;
}

.cen-urg-ponto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--crit); flex: none;
  animation: cen-pulso 2.4s ease-in-out infinite;
}
@keyframes cen-pulso {
  0%, 100% { opacity: 1; transform: scale(1) }
  50% { opacity: .35; transform: scale(.82) }
}
@media (prefers-reduced-motion: reduce) { .cen-urg-ponto { animation: none } }

/* O fixado ocupa as duas colunas. Só o PRIMEIRO da lista o recebe — a
   decisão está em `cartao()`, e é o que impede uma página de seis
   urgentes virar seis faixas empilhadas. */
.cen-cartao.cen-fixado { grid-column: 1 / -1 }

/* A bolinha da aba "Urgentes" é um crachá de verdade, e a do "Para você"
   continua sendo um número discreto: uma diz "há coisa boa ali", a outra
   diz "isto some hoje". */
.cen-abas .n.urg {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px;
  padding: 0 5px; margin-left: 6px; border-radius: 999px;
  background: var(--crit); color: var(--on-accent); opacity: 1;
  font-size: 10px; font-weight: 700;
}
.cen-abas button.on .n.urg { background: var(--crit) }

/* ── o segmentado do formulário ──
   Dois botões e não uma caixa de seleção: "Normal" precisa ser uma
   escolha VISÍVEL. Quem vê os dois entende que urgente é exceção; quem
   vê uma caixinha desmarcada entende que é um extra de graça — e é
   assim que todo mural acaba com 100% de urgentes. */
.cen-linha-urg { align-items: flex-start }
.cen-seg {
  display: flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden;
}
.cen-seg button {
  flex: 1; padding: 9px 10px; font-size: 13px; font-weight: 600; font-family: inherit;
  background: var(--surface); color: var(--muted); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .12s, color .12s;
}
.cen-seg button + button { border-left: 1px solid var(--line-2) }
.cen-seg button:hover { background: var(--surface-2); color: var(--ink) }
.cen-seg button.on { background: var(--crit-soft); color: var(--crit) }
.cen-seg button:focus-visible { outline: 2px solid var(--own); outline-offset: -2px }

.cen-cota {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--muted); line-height: 1.45;
  margin: -4px 0 0;
}
.cen-cota-barras { display: flex; gap: 3px; flex: none }
.cen-cota-barras i { width: 16px; height: 4px; border-radius: 2px; background: var(--line-2) }
.cen-cota-barras i.cheia { background: var(--crit) }

/* ── Radar · aba Demanda (0115) ──────────────────────────────────────
   Classes com dono: tudo desta aba nasce com o prefixo `dem-`. Reusar
   `.item` ou `.linha` faria a aba herdar mudanças feitas para outra
   tela — foi o que já aconteceu uma vez, e o conserto foi este prefixo.

   As duas cores seguem a semântica da marca: magenta = a rede (o que
   ela PROCURA), azul = o que é oferecido. No tema escuro o par
   #FA6BF0/#4D93FF colapsa para protanopia (ΔE 1,9), então o magenta das
   BARRAS sobe um passo — só nelas, e só no escuro. */
.dem-lacuna {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px;
  align-items: center; padding: 11px 0; border-top: 1px solid var(--line);
}
.dem-lacuna:first-child { border-top: none }
.dem-crit { font-size: 13.5px; font-weight: 600; color: var(--ink) }
.dem-n {
  font-size: 16px; font-weight: 700; text-align: right; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.dem-n span {
  display: block; font-size: 10.5px; font-weight: 500;
  color: var(--muted); letter-spacing: .03em;
}

.dem-par { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center;
           padding: 7px 0 }
.dem-par-nome { font-size: 12.5px; color: var(--ink); text-align: right }
.dem-barras { display: flex; flex-direction: column; gap: 4px }
.dem-b { display: flex; align-items: center; gap: 8px }
.dem-b i {
  height: 9px; border-radius: 0 4px 4px 0; min-width: 2px; display: block;
  background: var(--own);
}
.dem-b i.dem { background: var(--net) }
.dem-b i.ofe { background: var(--own) }
.dem-b span {
  font-size: 11px; color: var(--muted); min-width: 34px;
  font-variant-numeric: tabular-nums;
}

.dem-rk { display: grid; grid-template-columns: 130px 1fr 96px; gap: 12px;
          align-items: center; padding: 5px 0 }
.dem-rk-nome { font-size: 12.5px; color: var(--ink) }
.dem-trilho { height: 9px; background: var(--surface-2); border: 1px solid var(--line);
              border-radius: 5px; overflow: hidden }
.dem-trilho i { display: block; height: 100%; background: var(--net) }
.dem-rk-fim {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted);
}
.dem-piso {
  border: 1px dashed var(--line-2); border-radius: var(--r);
  padding: 12px 14px; margin-top: 10px; background: var(--surface-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dem-b i.dem,
  :root:not([data-theme="light"]) .dem-trilho i { background: #FFA0F5 }
}
[data-theme="dark"] .dem-b i.dem,
[data-theme="dark"] .dem-trilho i { background: #FFA0F5 }

@media (max-width: 720px) {
  .dem-lacuna { grid-template-columns: 1fr auto; row-gap: 9px }
  .dem-lacuna .btn { grid-column: 1 / -1; justify-self: start }
  .dem-par { grid-template-columns: 104px 1fr }
  .dem-rk { grid-template-columns: 96px 1fr 84px }
}

/* A faixa da demanda no painel: magenta discreto na borda esquerda —
   é da rede, e não do tenant. Ver `.dem-*` acima para a mesma semântica. */
.pnl-demanda { border-left: 3px solid var(--net) }

/* ── apagar objeto da foto (0164) ─────────────────────────────────
   O editor cobre a tela inteira e o palco é preto: julgar uma
   reconstrução com a interface clara em volta engana o olho, porque a
   foto parece mais escura do que é. O mesmo motivo pelo qual editor de
   imagem nenhum usa fundo branco. */
.mascara-veu {
  position: fixed; inset: 0; z-index: 90; background: rgba(6, 10, 20, .78);
  display: grid; place-items: center; padding: 12px;
}
.mascara-cartao {
  background: var(--surface); border-radius: 16px; overflow: hidden;
  /* 1010px = os 560 de antes com 80% a mais. A marcação precisa de área:
     circular um chinelo numa foto que cabe em meia tela é o que produz
     máscara grande demais, e a guarda dos 25% reprova com razão. */
  width: min(1010px, 100%); max-height: 96dvh; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55);
}
.mascara-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--line); flex: none;
}
.mascara-cab strong { color: var(--ink); font-size: 14px }
.mascara-palco {
  position: relative; flex: 1; min-height: 300px; background: #0b0d12;
  display: grid; place-items: center; overflow: hidden; touch-action: none;
}
/* O quadro é o que recebe o zoom e o arraste. Imagem e canvas vivem
   dentro dele e se movem JUNTOS — separá-los desalinharia o traço do
   objeto no primeiro gesto. */
.mascara-quadro {
  position: relative; display: grid; place-items: center;
  transform-origin: center; will-change: transform;
}
.mascara-palco img {
  max-width: 100%; max-height: 74dvh; display: block;
  /* Sem isto, arrastar sobre a foto no celular arrasta a IMAGEM em vez
     de desenhar, e o gesto inteiro se perde. */
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.mascara-palco canvas { position: absolute; cursor: crosshair; touch-action: none }
.mascara-palco canvas.movendo { cursor: grab }
.mascara-palco canvas.movendo:active { cursor: grabbing }

/* Os controles de zoom ficam sobre a foto, no canto: fora dela,
   roubariam altura justamente do que se está tentando enxergar. */
.mascara-zoom {
  position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center;
  gap: 4px; background: rgba(6, 10, 20, .62); border-radius: 999px; padding: 4px 6px;
  backdrop-filter: blur(6px);
}
.mascara-zoom span {
  color: #fff; font-size: 11.5px; min-width: 42px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.mascara-zoom .btn {
  background: transparent; border-color: rgba(255, 255, 255, .32); color: #fff;
  padding: 2px 9px; line-height: 1.5;
}
.mascara-dica {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 12px; color: #fff; background: rgba(6, 10, 20, .6);
  border-radius: 999px; padding: 4px 12px; pointer-events: none; max-width: 92%;
}
.mascara-ferr, .mascara-acoes {
  display: flex; gap: 8px; padding: 10px 12px; flex: none; justify-content: center;
}
.mascara-ferr { border-top: 1px solid var(--line) }
.mascara-ferr .btn.ativa { background: var(--own); border-color: var(--own); color: var(--on-accent) }
.mascara-acoes { padding-top: 0 }
.mascara-acoes .btn { flex: 1 }

/* O botão de editar fica no pé da miniatura, e o de tirar no topo: são
   ações de peso muito diferente e vizinhança convida ao toque errado. */
.foto-editar {
  position: absolute; left: 3px; right: 3px; bottom: 3px;
  padding: 2px 4px; font-size: 10.5px; line-height: 1.3;
}
/* Os dois botões da decisão dividem o pé da miniatura. Dois de 44 px
   com esta fonte cabem nos 96 px da foto; um texto mais longo que "Usar"
   e "Manter" não caberia, e é por isso que eles são curtos. */
.foto-decisao {
  position: absolute; left: 3px; right: 3px; bottom: 3px; display: flex; gap: 3px;
}
.foto-decisao .btn { flex: 1; padding: 2px 3px; font-size: 10.5px; line-height: 1.3 }
.foto-selo {
  position: absolute; left: 3px; top: 3px; font-size: 9.5px; color: #fff;
  border-radius: 999px; padding: 1px 7px; background: rgba(6, 10, 20, .78);
}
.foto-selo.ia { background: linear-gradient(90deg, var(--brand-blue), var(--brand-mag)) }
.foto-selo.tratando { background: var(--warn) }
.foto-selo.pronta { background: var(--ok) }
.foto-selo.falhou { background: var(--crit) }
.foto-selo.original { background: rgba(6, 10, 20, .78) }

/* A capa fica FORA do quadro da foto, e o quadro é quem tem o
   `position: relative`. O botão de editar mora colado no pé da imagem
   (absoluto); se a capa entrasse no mesmo quadro, a caixa cresceria e o
   editar desceria por cima dela. */
.foto-item { width: 96px }
.foto-quadro { position: relative; width: 96px; height: 96px }
.foto-capa {
  width: 100%; margin-top: 4px; padding: 2px 4px;
  font-size: 10.5px; line-height: 1.3;
}
/* Azul é o próprio (a capa é decisão do dono), magenta é a rede. */
.foto-capa[aria-pressed="true"] {
  background: var(--own); border-color: var(--own); color: var(--on-accent);
}

/* ── o detalhe do gasto de IA: por papel e por modelo ───────────
   O número que abre lista não vira botão de ação: ele continua sendo o
   número, com o pontilhado dizendo que há mais atrás dele. Um `.btn` em
   célula de tabela faria oito colunas parecerem oito ações. */
.valor-porta {
  font: inherit; font-weight: 700; color: var(--ink); background: none;
  border: 0; padding: 0 0 1px; cursor: pointer;
  border-bottom: 1.5px dotted var(--own); font-variant-numeric: tabular-nums;
}
.valor-porta:hover { color: var(--own) }
.valor-porta:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }

.gasto-painel { margin-top: 14px; padding: 0; overflow: hidden }
.gasto-topo {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 14px 15px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.gasto-topo h3 { font-size: 15.5px }
.gasto-acoes { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap }
.gasto-tabela { overflow-x: auto; padding: 4px 15px 0 }
.gasto-painel .dica { padding: 0 15px 14px }
.gasto-painel .vazio { padding: 34px 20px }

/* A linha recuada é o outro eixo da MESMA soma: por papel ela mostra os
   modelos que atenderam, por modelo os papéis que ele serviu. Recuo e
   fundo, e não borda: ela pertence à linha de cima. */
.gasto-tabela tr.filha td { background: var(--surface-2); color: var(--muted) }
.gasto-tabela tr.filha td:first-child { padding-left: 26px }
.gasto-tabela tr.grupo td { border-top: 1px solid var(--line) }
.gasto-tabela tbody tr.grupo:first-child td { border-top: 0 }

/* A fatia usa UMA cor: é uma grandeza só, repartida. Magenta aqui diria
   "da rede", que não é o assunto desta tela. */
.fatia { display: flex; align-items: center; gap: 9px; min-width: 130px }
.fatia .trilho {
  flex: 1; min-width: 58px; height: 7px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line); overflow: hidden;
}
.fatia .trilho i { display: block; height: 100%; background: var(--own) }
.fatia span { font-size: 11.5px; color: var(--muted); min-width: 42px; text-align: right }

/* O dinheiro gasto em chamada que falhou. Fica fora do total de
   propósito — o total é o que o teto compara —, e âmbar porque é aviso,
   não defeito. */
.gasto-falhas {
  display: flex; gap: 13px; align-items: flex-start; margin: 4px 15px 13px;
  padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: 10px;
}
.gasto-falhas .n { font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.15 }
.gasto-falhas .t { font-size: 13px; font-weight: 600; color: var(--ink) }
.gasto-falhas .d { font-size: 12px; color: var(--muted); margin-top: 3px; max-width: 78ch }

/* O chip de preço que abre o gasto real daquele modelo. Continua chip —
   mesma cor, mesmo tamanho — e ganha o pontilhado que diz que há mais
   atrás dele; virar `.btn` faria um número a olhar parecer uma ação a
   executar, numa tela onde a ação de verdade muda o que a assistente
   responde ao cliente. */
.chip-porta {
  border: 0; font-family: inherit; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.chip-porta:hover { filter: brightness(.94) }
.chip-porta:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }

.realizado {
  margin-top: 8px; padding: 10px 12px; font-size: 12.5px; max-width: 72ch;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--own); border-radius: 9px; color: var(--body);
}
.realizado b { color: var(--ink) }
.realizado .dica { margin-top: 5px }

/* ═══════════════════════════════════════════════════════════════════
   O editor de modelo de contrato — o documento É o editor
   ═══════════════════════════════════════════════════════════════════

   A primeira versão desta folha usou nomes de variável que não existem
   aqui (`--fundo`, `--cartao`, `--tinta`, `--acao`). Toda cor caiu em
   nada, e o resultado foi um contrato sem folha: o texto flutuando sobre
   o mesmo cinza do resto da tela. Os nomes desta casa são `--ground`,
   `--surface`, `--ink`, `--body`, `--muted`, `--line`, `--own`.

   E o ponto que a folha inteira defende: o documento tem de PARECER uma
   folha. Papel branco, sombra, margem larga e linha curta — como o PDF
   que sai depois. É o que faz a pessoa entender, sem ler nada, que
   aquele bloco é o contrato dela e não mais um painel do sistema.
   ═══════════════════════════════════════════════════════════════════ */

.editor-topo {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ground); padding: 10px 0 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.editor-nome { min-width: 170px }
.editor-nome b { display: block; font-size: 14px; color: var(--ink) }
.editor-nome .mute { display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.editor-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto }

.editor-modo { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px; background: var(--surface) }
.editor-modo button {
  border: 0; background: none; padding: 5px 15px; border-radius: 999px;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.editor-modo button[aria-pressed="true"] { background: var(--own); color: var(--on-accent) }
.editor-modo button[disabled] { opacity: .45; cursor: not-allowed }

.editor-guia {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  background: var(--own-soft); color: var(--own); border-radius: var(--r);
  padding: 9px 15px; margin: 12px 0; font-size: 13px;
}
.editor-guia .passo { display: inline-flex; align-items: center; gap: 7px }
.editor-guia i {
  width: 20px; height: 20px; border-radius: 50%; background: var(--own); color: var(--on-accent);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700; font-style: normal; flex: none;
}
.editor-guia button { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; padding: 4px; font-size: 15px }

/* ═══ a mesa e a folha ═══════════════════════════════════════════ */

.editor-grade { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; margin-top: 12px }
@media (max-width: 980px) {
  .editor-grade { grid-template-columns: 1fr }
  .editor-trilho { order: -1; position: static }
}

/* A MESA: o cinza em volta do papel. É ele que faz a folha existir. */
.editor-mesa {
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 20px; overflow-x: auto;
}
@media (max-width: 640px) { .editor-mesa { padding: 12px 8px } }

/* A FOLHA: branca, com sombra, largura de página e margem de página. */
.editor-pagina {
  background: var(--surface); box-shadow: var(--shadow);
  width: 100%; max-width: 660px; margin: 0 auto;
  padding: 52px 62px 64px;
  font-family: Georgia, "Times New Roman", serif; color: var(--body);
  border-radius: 2px;
}
@media (max-width: 640px) { .editor-pagina { padding: 26px 20px 34px } }

.doc-cabecalho {
  display: flex; align-items: center; gap: 11px; padding-bottom: 11px;
  border-bottom: 1.5px solid var(--ink); margin-bottom: 26px; font-family: var(--sans);
}
.doc-cabecalho img { height: 30px; width: auto; max-width: 132px; object-fit: contain }
.doc-cabecalho b { font-size: 12px; letter-spacing: .04em; color: var(--ink) }
.doc-cabecalho small { display: block; color: var(--muted); font-size: 10.5px }

.doc-titulo {
  text-align: center; font-size: 15px; letter-spacing: .05em; font-weight: 700;
  color: var(--ink); margin: 0 0 22px;
}

/* ═══ um trecho: a unidade que se clica ═══════════════════════════ */

.trecho {
  position: relative; padding: 7px 10px; margin: 0 -10px 7px;
  border-radius: 7px; border-left: 3px solid transparent;
  font-size: 14.5px; line-height: 1.62; text-align: justify; color: var(--body);
  transition: background .12s, border-color .12s;
}
.trecho .rotulo { font-weight: 700; color: var(--ink) }
.trecho .secao {
  text-align: center; font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing: .04em; color: var(--ink); margin: 12px 0 2px;
}
.trecho.t-paragrafo, .trecho.t-item { padding-left: 32px }
.trecho.t-item { text-align: left }

.editando .trecho:not(.aberto):not(.desenhado) { cursor: pointer }
.editando .trecho:not(.aberto):not(.desenhado):hover,
.editando .trecho:not(.aberto):not(.desenhado):focus-visible {
  background: var(--own-soft); border-left-color: var(--own);
}
.editando .trecho:not(.aberto):not(.desenhado):hover::after {
  content: "Clique para alterar"; position: absolute; right: 6px; top: -9px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: var(--own);
  background: var(--surface); border: 1px solid var(--own); border-radius: 999px; padding: 1px 8px;
}

.trecho.pendente { border-left-color: var(--warn); background: var(--warn-soft) }
.trecho .nota {
  font-family: var(--sans); font-size: 12px; color: var(--warn);
  margin-top: 7px; text-align: left; line-height: 1.4;
}
.trecho.destaque { animation: trecho-pisca 1.4s ease-out }
@keyframes trecho-pisca {
  0% { background: var(--own-soft); border-left-color: var(--own) }
  100% { background: transparent; border-left-color: transparent }
}
@media (prefers-reduced-motion: reduce) { .trecho.destaque { animation: none } }

/* os dois blocos que o sistema desenha sozinho, a partir do negócio */
.trecho.desenhado {
  background: var(--surface-2); border: 1px dashed var(--line-2); border-left-style: dashed;
  font-family: var(--sans); font-size: 12.5px; color: var(--muted);
  text-align: left; padding: 11px 13px; margin-bottom: 12px;
}
.trecho.desenhado b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 3px }

.etiqueta.opcional {
  position: absolute; right: 6px; top: -8px; font-family: var(--sans);
  font-size: 10px; font-weight: 600; color: var(--warn);
  background: var(--surface); border: 1px solid var(--warn); border-radius: 999px; padding: 0 7px;
}

/* ═══ o dado do cliente: ficha na edição, itálico na leitura ══════ */

.dado {
  display: inline-block; font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  background: var(--own-soft); color: var(--own); border: 1px dashed var(--own);
  border-radius: 5px; padding: 0 6px; line-height: 1.55; white-space: nowrap;
}
.dado.desconhecido { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); border-style: solid }

.lendo .dado {
  background: none; border: 0; color: var(--muted); font-family: inherit;
  font-size: inherit; font-weight: normal; font-style: italic; padding: 0;
}
.lendo .dado::before { content: "[" }
.lendo .dado::after { content: "]" }
.lendo .trecho { border-left-color: transparent; background: none; cursor: default }
.lendo .trecho .nota, .lendo .etiqueta.opcional, .lendo .trecho.desenhado { display: none }

/* ═══ a caixa aberta ══════════════════════════════════════════════ */

.trecho.aberto {
  background: var(--surface); border: 1px solid var(--own); border-left-width: 3px;
  box-shadow: var(--shadow); padding: 13px 14px; cursor: default;
  font-family: var(--sans); text-align: left;
}
.edit-topo {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); margin-bottom: 9px;
}
.edit-topo b { color: var(--ink) }
.campo-rotulo { display: block; font-size: 12px; color: var(--muted); margin-bottom: 9px }
.campo-rotulo input { display: block; width: 100%; margin-top: 3px }
.editor-texto {
  width: 100%; resize: vertical; font-family: Georgia, "Times New Roman", serif;
  font-size: 14.5px; line-height: 1.6;
}
.edit-barra { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 9px }

/* ═══ o menu de dados ═════════════════════════════════════════════ */

.menu-dado { position: relative }
.menu-dado .lista {
  position: absolute; z-index: 6; top: calc(100% + 5px); left: 0; width: 318px;
  max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 8px;
}
.menu-dado .busca { width: 100%; margin-bottom: 5px }
.menu-dado .grupo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700; padding: 9px 7px 3px;
}
.menu-dado .item {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 6px 7px; border-radius: 6px; color: var(--ink);
  font: inherit; font-size: 13px; cursor: pointer;
}
.menu-dado .item:hover { background: var(--own-soft); color: var(--own) }
.menu-dado .item small { display: block; color: var(--muted); font-size: 11px; font-weight: normal }

/* ═══ o trilho ════════════════════════════════════════════════════ */

.editor-trilho { position: sticky; top: 78px; display: grid; gap: 10px }
.editor-trilho .cartao {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px 14px;
}
.editor-trilho h4 { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 0 0 9px; color: var(--ink) }
.editor-trilho h4 .chip { margin-left: auto }

.pendencias { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.pendencias button {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0;
  font: inherit; font-size: 12.5px; color: var(--body); line-height: 1.4; cursor: pointer;
}
.pendencias button:hover { color: var(--own) }
.pendencias .onde { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px }

.legenda { display: grid; gap: 9px; font-size: 12px; color: var(--muted) }
.legenda > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; line-height: 1.4 }
.legenda .amostra {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  background: var(--warn-soft); border-left: 3px solid var(--warn); flex: none;
}

.editor-trilho details.sobre summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink) }
.editor-trilho details.sobre .campo { display: block; font-size: 12px; color: var(--muted); margin-top: 11px }
.editor-trilho details.sobre .campo input,
.editor-trilho details.sobre .campo select { display: block; width: 100%; margin-top: 3px }
.editor-trilho details.sobre .papel select { max-width: 116px }

/* ══════════════════════════════════════════════════════════════════
   A demonstração (0223)
   ══════════════════════════════════════════════════════════════════ */

/* O campo-isca da entrada: fora da tela para gente, preenchido só por
   robô. Fora da tela e não `display: none`, porque há robô que pula
   campo escondido por estilo. */
.campo-isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }

.demonstracao-na-entrada { margin-top: 14px }
.demonstracao-na-entrada h2 { font-size: 17px; margin: 0 0 4px }

/* A etiqueta da conta de teste (30/09/2026), no lugar da faixa amarela
   que ficava acima do topo: no celular ela tomava um quarto da tela em
   todas as telas, e o amarelo de "atenção" a fazia parecer aviso de
   problema. A etiqueta é uma placa ESCURA, a mesma do mascote: o que é
   do teste é escuro; o resto é o produto como ele é. O ponto âmbar diz
   "esta conta é diferente" sem virar alarme. */
.etiqueta-teste {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 13px 0 12px; border: 0; border-radius: 999px;
  background: #0f1720; color: #e8eef5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.etiqueta-teste:hover { background: #16212c }
.etiqueta-teste:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }
.etiqueta-teste .ponto {
  width: 8px; height: 8px; flex: none; border-radius: 999px;
  background: #E2A544; box-shadow: 0 0 0 3px rgba(226, 165, 68, .22);
}
.etiqueta-teste .mais { font-weight: 400; color: #9fb0c2 }
.etiqueta-teste svg { flex: none; color: #9fb0c2; transition: transform .15s }
.etiqueta-teste:has(+ .gaveta-do-teste:popover-open) svg { transform: rotate(180deg) }
.etiqueta-teste .curta, .criar-conta-topo .curta { display: none }

/* "Criar conta", no canto do topo: azul-claro e sem moldura, porque a
   tela já tem os botões principais dela. */
.criar-conta-topo {
  flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 7px;
  background: var(--own-soft); color: var(--own);
  font: inherit; font-size: 13px; font-weight: 650; white-space: nowrap; cursor: pointer;
}
.criar-conta-topo:hover { filter: brightness(.97) }
.criar-conta-topo:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }

/* A gaveta: `popover` nativo, como o painel da conta. Debaixo da
   etiqueta e alinhada com ela — `posicionarGaveta` grava as duas
   medidas. No computador o fundo não escurece, como no painel da conta. */
.gaveta-do-teste:popover-open {
  position: fixed; inset: auto; margin: 0;
  top: var(--gaveta-topo, 62px); left: var(--gaveta-esquerda, 14px);
  width: 384px; max-width: calc(100vw - 20px);
  max-height: calc(100dvh - var(--gaveta-topo, 62px) - 12px); overflow: auto;
  padding: 0; border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--surface); color: var(--body);
  box-shadow: var(--shadow), 0 24px 48px -18px rgba(12, 18, 32, .45);
  text-align: left; font-size: 14px; line-height: 1.5;
}
.gaveta-do-teste::backdrop { background: transparent }

/* O alto da gaveta é a placa do mascote: é ele quem explica o teste. */
.gav-placa { display: grid; gap: 10px; padding: 14px 6px 14px 16px; background: #0f1720; color: #e8eef5 }
.gav-cabeca { display: flex; align-items: center; gap: 12px }
.gav-mascote {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  background: #071229 url(/icones/mascote-cabeca.webp) center/90% no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 20px -3px #4D93FF;
}
.gav-quem { flex: 1; min-width: 0 }
.gav-olho { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #E2A544 }
.gav-frase { margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.35; color: #e8eef5 }
.gav-fechar, .gav-voltar {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer;
}
.gav-fechar:hover, .gav-voltar:hover { background: var(--surface-2) }
.gav-placa .gav-fechar { align-self: flex-start; color: #9fb0c2 }
.gav-placa .gav-fechar:hover { background: #16212c }
.gav-voltar-ao-dono {
  justify-self: start; margin-left: 58px; min-height: 40px; padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  background: #16212c; color: #e8eef5; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.gav-voltar-ao-dono:hover { background: #1c2a38 }
.gav-fechar:focus-visible, .gav-voltar:focus-visible,
.gav-voltar-ao-dono:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }

/* As três promessas: o mais importante primeiro (nada sai daqui), e não
   o detalhe técnico do navegador, que a faixa dizia antes de tudo. */
.gav-promessas { list-style: none; margin: 0; padding: 14px 16px 12px; display: grid; gap: 9px }
.gav-promessas li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.4 }
.gav-promessas b { font-weight: 650; color: var(--ink) }
.gav-promessas li > span:last-child > span { color: var(--muted) }
.gav-ok {
  width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 999px;
  display: grid; place-items: center; background: var(--ok-soft); color: var(--ok);
}

.gav-itens { display: grid }
.gav-item, .gav-pessoa {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px;
  padding: 10px 12px 10px 16px; border: 0; border-top: 1px solid var(--line);
  background: var(--surface); color: var(--body); text-align: left; font: inherit; cursor: pointer;
}
.gav-item:hover, .gav-pessoa:hover { background: var(--surface-2) }
.gav-item:focus-visible, .gav-pessoa:focus-visible { outline: 2px solid var(--own); outline-offset: -2px }
.gav-pessoa[disabled] { cursor: default; background: var(--surface-2); opacity: 1 }
.gav-ic {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--body);
}
.gav-txt { flex: 1; min-width: 0 }
.gav-t { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--ink) }
.gav-d { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--muted) }
.gav-seta { flex: none; display: grid; color: var(--muted) }
/* O número dos envios guardados: escuro e âmbar, como a etiqueta — é coisa do teste. */
.gav-contador {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: #0f1720; color: #E2A544;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.gav-item.recomeco { background: var(--warn-soft) }
.gav-item.recomeco .gav-ic { background: var(--surface); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent) }
.gav-item.recomeco .gav-d { color: color-mix(in srgb, var(--warn) 78%, var(--ink)) }
.gav-pessoa .av { width: 36px; height: 36px }

.gav-pe { display: grid; gap: 4px; padding: 14px 16px 8px; border-top: 1px solid var(--line); background: var(--surface-2) }
.gav-pe .btn.pri { min-height: 48px; font-size: 15px }
.gav-pe p { margin-top: 4px; text-align: center; font-size: 12px; line-height: 1.4; color: var(--muted) }
.gav-pe .link { justify-self: center; min-height: 44px; font-size: 13.5px }

/* As partes de dentro: "O que teria sido enviado" e "Ver como outra pessoa". */
.gav-sub { display: flex; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--line) }
.gav-sub h3 { flex: 1; min-width: 0; margin: 0; font-size: 15px; letter-spacing: -.01em }
.gav-lead { padding: 12px 16px 10px; font-size: 13.5px; line-height: 1.45; color: var(--body) }
.gav-nota { padding: 12px 16px 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.45; color: var(--muted) }
.gav-envio { display: grid; gap: 3px; padding: 12px 16px; border-top: 1px solid var(--line) }
.gav-envio-topo { display: flex; align-items: center; gap: 8px }
.gav-quando { margin-left: auto; font-size: 11.5px; color: var(--muted) }
.gav-envio b { font-size: 13.5px; color: var(--ink) }
.gav-envio p { font-size: 12.5px; line-height: 1.45 }

/* Notebook e tablet: o topo da conta de teste leva duas peças a mais (a
   etiqueta e o "Criar conta"), e sem isto ele passava da largura abaixo
   de 1280px, empurrando o avatar para fora da tela (medido: −5px em 1180,
   −161 em 1024, −285 em 900). Saem, nesta ordem, o "· nada sai daqui",
   a saudação e o nome — este como no celular, onde ele já mora no painel
   da conta. */
@media (max-width: 1279px) {
  .etiqueta-teste .mais { display: none }
}
@media (max-width: 1180px) {
  .topo[data-conta-de-teste] .saudacao { display: none }
}
@media (max-width: 1023px) {
  .topo[data-conta-de-teste] .quem .ident { display: none }
  .criar-conta-topo .longa { display: none }
  .criar-conta-topo .curta { display: inline }
}
@media (pointer: coarse) {
  .etiqueta-teste, .criar-conta-topo { height: 44px }
}
/* No celular: só o nome na etiqueta, "Criar conta" curto, e o fundo
   escurece atrás da gaveta, que ocupa a largura. Vem DEPOIS das regras
   de cima de propósito: com a mesma força, quem vem por último vence. */
@media (max-width: 860px) {
  .etiqueta-teste { font-size: 13.5px }
  .etiqueta-teste .longa, .criar-conta-topo .longa { display: none }
  .etiqueta-teste .curta, .criar-conta-topo .curta { display: inline }
  .gaveta-do-teste::backdrop { background: rgba(12, 18, 32, .34) }
}
@media (max-width: 520px) {
  .gaveta-do-teste:popover-open { left: 10px; right: 10px; width: auto; max-width: none }
}

/* O guia: o mascote numa placa ESCURA (neon sobre branco suja — regra da
   identidade visual), no pé da tela, sem tampar o menu do celular. O
   brilho da placa diz de que lado é a fala: azul (o que é seu), magenta
   (a rede), roxo (os dois). Recolhido, sobra só o cérebro, no canto. */
.guia-demonstracao {
  position: fixed; z-index: 59;
  left: 12px; right: 12px; max-width: 680px; margin-inline: auto;
  bottom: calc(var(--barra-h) + 12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: #0f1720; color: #e8eef5; box-shadow: var(--shadow);
  font-size: 13px; line-height: 1.45;
}
.guia-demonstracao.recolhido {
  left: auto; right: 16px; max-width: none; margin: 0;
  padding: 8px 10px; border-radius: 999px;
}
.guia-demonstracao .placa {
  width: 50px; height: 50px; flex: none; border-radius: 14px;
  background: #071229 url(/icones/mascote-cabeca.webp) center/90% no-repeat;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 20px -3px var(--brilho, #4D93FF);
  transition: box-shadow .6s;
}
.guia-demonstracao .fala { flex: 1; min-width: 0 }
.guia-demonstracao .quem {
  font-size: 11px; color: #9fb0c2; text-transform: uppercase; letter-spacing: .06em;
}
.guia-demonstracao p { margin: 3px 0 0 }
.guia-demonstracao .acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px }
.guia-demonstracao .btn { flex: none }
.guia-demonstracao .linkbtn {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12px;
  color: #9fb0c2; text-decoration: underline; cursor: pointer;
}
.guia-demonstracao .cerebro {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #9fb0c2; font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.guia-demonstracao.recolhido .cerebro { flex-direction: row; gap: 6px; font-size: 12px }
.guia-demonstracao .cerebro:focus-visible,
.guia-demonstracao .linkbtn:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }

/* O instrutor ("Me explica"): no canto, ao lado do cérebro. Escrito, e
   não só um ícone: para quem é leigo, a palavra diz o que o desenho não
   diz. Acena uma vez na primeira visita a cada tela; nunca abre sozinho.

   `.explica` sozinha é o parágrafo de apoio de Minha conta, com 14px de
   margem embaixo e 62ch de largura. O botão herdava os dois: a placa
   escura crescia 14px para baixo e o botão ficava colado no alto dela.
   A margem e a largura são desfeitas aqui. */
.guia-demonstracao.recolhido { align-items: center; gap: 10px }
.guia-demonstracao .explica {
  margin: 0; max-width: none;
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 4px 14px 4px 6px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: #16212c; color: #e8eef5;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.guia-demonstracao .explica .rosto {
  width: 28px; height: 28px; flex: none; border-radius: 999px;
  background: #071229 url(/icones/mascote-cabeca.webp) center/90% no-repeat;
}
.guia-demonstracao .explica:hover { background: #1c2a38 }
.guia-demonstracao .explica:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }
.guia-demonstracao .explica.acena { animation: instrutor-aceno 2s ease-in-out 1 }
@keyframes instrutor-aceno {
  0%, 100% { transform: rotate(0) }
  15% { transform: rotate(-6deg) }
  30% { transform: rotate(6deg) }
  45% { transform: rotate(-4deg) }
  60% { transform: rotate(3deg) }
  75% { transform: rotate(-1deg) }
}
@media (prefers-reduced-motion: reduce) {
  .guia-demonstracao .explica.acena { animation: none }
}

/* O balão do "Me explica": letra e botões maiores que os da fala do guia,
   porque é para ler com calma (a régua do instrutor, §2.3 da proposta). */
.guia-demonstracao.explicando {
  font-size: 16px; line-height: 1.5;
  max-height: min(70vh, 560px); overflow-y: auto;
}
.guia-demonstracao.explicando .quem { font-size: 12px }
.guia-demonstracao.explicando .btn { min-height: 44px; font-size: 15px }
/* Os botões (o "Fechar", sobretudo) ficam sempre à vista, presos no pé
   do balão, mesmo quando a explicação é longa e o balão rola. */
.guia-demonstracao.explicando .acoes {
  position: sticky; bottom: -12px; margin-bottom: -12px; padding: 10px 0 12px;
  background: #0f1720; border-top: 1px solid rgba(255,255,255,.08);
}
/* No celular, o texto ganha a largura: mascote menor, e o cérebro sai
   enquanto a explicação está aberta (ele volta ao fechar). */
@media (max-width: 600px) {
  .guia-demonstracao.explicando .placa { width: 34px; height: 34px; border-radius: 10px }
  .guia-demonstracao.explicando .cerebro { display: none }
}
.guia-demonstracao .instrutor-titulo { font-size: 17px; margin: 4px 0 6px }
.guia-demonstracao .instrutor-sub { margin: 10px 0 0; color: #9fb0c2 }
.guia-demonstracao .instrutor-lista { margin: 4px 0 0; padding-left: 20px }
.guia-demonstracao .instrutor-lista li { margin: 3px 0 }
.guia-demonstracao .instrutor-aviso,
.guia-demonstracao .instrutor-missao { margin-top: 10px; color: #cfe0f5 }
/* Na conta de verdade (entrega 4): o que é de outro papel ou de outro plano
   aparece com a frase logo depois, mais apagada — a pessoa vê que existe e
   sabe com quem falar, sem achar que o botão sumiu. */
.guia-demonstracao .instrutor-restrito { color: #9fb0c2 }
.guia-demonstracao p.instrutor-restrito { margin-top: 10px }
.guia-demonstracao .instrutor-duvidas { display: flex; flex-direction: column; gap: 8px; margin-top: 6px }
.guia-demonstracao .instrutor-pergunta {
  text-align: left; min-height: 44px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16); background: #16212c; color: #e8eef5;
  font: inherit; cursor: pointer;
}
.guia-demonstracao .instrutor-pergunta:hover { background: #1c2a38 }
.guia-demonstracao .instrutor-pergunta:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }

/* A voz do instrutor (entrega 2): "▶ Ouvir" em todo balão e o interruptor
   "Voz ligada / desligada". O lugar dos botões some do desenho
   (`display: contents`): eles entram na fila de botões do balão como os
   outros, e o lugar existe só para a voz se repintar sem redesenhar tudo. */
.guia-demonstracao .voz-do-guia { display: contents }
.guia-demonstracao .ouvir.tocando { border-color: var(--own) }
.guia-demonstracao .instrutor-sem-voz { margin: 8px 0 0; color: #9fb0c2; font-size: 13px }
/* Enquanto a voz fala, o mascote se mexe de leve — e quem pediu menos
   movimento no aparelho não vê a animação (§4.3). */
.guia-demonstracao.falando .placa { animation: instrutor-fala 1.3s ease-in-out infinite }
@keyframes instrutor-fala {
  0%, 100% { transform: translateY(0) scale(1) }
  50% { transform: translateY(-2px) scale(1.04) }
}
@media (prefers-reduced-motion: reduce) {
  .guia-demonstracao.falando .placa { animation: none }
}

/* "Me mostra como" (entrega 3): no balão do "Me explica", um botão por
   passo a passo da tela — escrito por inteiro, porque "Me mostra como
   publicar um imóvel na rede" diz o que acontece, e um ícone não diz. */
.guia-demonstracao .instrutor-mostras { display: flex; flex-direction: column; gap: 8px; margin-top: 6px }
.guia-demonstracao .instrutor-mostra {
  text-align: left; min-height: 44px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--own) 60%, transparent); background: #13263d; color: #e8eef5;
  font: inherit; font-weight: 600; cursor: pointer;
}
.guia-demonstracao .instrutor-mostra::before { content: '▸ '; color: var(--own) }
.guia-demonstracao .instrutor-mostra:hover { background: #183152 }
.guia-demonstracao .instrutor-mostra:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }

/* O passo a passo: o balão diz uma coisa só, com o número do passo em cima.
   Mais baixo que o do "Me explica": a tela aberta é o assunto, não ele. */
.guia-demonstracao.mostrando { max-height: min(46vh, 380px) }
.guia-demonstracao .instrutor-passo {
  margin: 2px 0 4px; font-size: 12px; color: #9fb0c2; text-transform: uppercase; letter-spacing: .05em;
}
/* O botão aceso está embaixo (a barra do menu no celular, a caixa de
   escrever da conversa): o balão sobe, e nunca fica por cima dele. */
.guia-demonstracao.no-topo {
  top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto;
}

/* O escuro em volta do botão: quatro faixas, e o buraco é o botão. As
   faixas recebem o toque fora do caminho; o balão fica por cima delas. */
.instrutor-veu {
  position: fixed; z-index: 57; display: none;
  background: rgba(6, 12, 22, .5);
}
.instrutor-anel {
  position: fixed; z-index: 58; display: none; pointer-events: none; border-radius: 10px;
  box-shadow: 0 0 0 3px var(--own), 0 0 0 7px rgba(255, 255, 255, .55), 0 0 24px 6px rgba(8, 120, 249, .45);
}
.instrutor-mao {
  position: fixed; z-index: 58; display: none; pointer-events: none;
  width: 32px; font-size: 30px; line-height: 1; text-align: center;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
  animation: instrutor-mao 1.2s ease-in-out infinite;
}
@keyframes instrutor-mao {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
}
@media (prefers-reduced-motion: reduce) {
  .instrutor-mao { animation: none }
}

/* Com o guia aberto, o fim do conteúdo sobe para não ficar embaixo dele. */
body.com-guia .tela { padding-bottom: 150px }
body.com-guia-recolhido .tela { padding-bottom: 72px }

/* A lista das missões: o lado de cada uma na cor da marca. */
.missoes-demo { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 10px }
.missao-demo {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 10px; align-items: center;
  padding: 7px 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.35;
}
.missao-demo:first-child { border-top: 0 }
.missao-demo .ck {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line);
  display: grid; place-items: center; font-size: 11px; color: #fff;
}
.missao-demo.feita.own .ck { background: #0878F9; border-color: transparent }
.missao-demo.feita.net .ck { background: #E93CEB; border-color: transparent }
.missao-demo .t { color: var(--ink) }
.missao-demo .dica { color: var(--muted); font-size: 12px }

/* ── Backoffice → Leads (0225) ─────────────────────────────────────
   O funil é uma fila de cartões que também filtra: tocar numa etapa
   mostra só ela, tocar de novo mostra todas. */
.funil-leads {
  display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr)); gap: 8px;
  overflow-x: auto; padding-bottom: 2px;
}
.funil-leads .etapa {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  background: var(--surface); color: var(--muted); font-size: 11.5px; cursor: pointer;
}
.funil-leads .etapa b { font-size: 22px; line-height: 1.1; color: var(--ink) }
.funil-leads .etapa small { font-size: 11px }
.funil-leads .etapa.on { border-color: var(--own); box-shadow: 0 0 0 1px var(--own) }
.funil-leads .etapa:focus-visible { outline: 2px solid var(--own); outline-offset: 2px }
.tabela-leads tbody tr:hover { background: var(--surface-2) }
.leads-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 13px }
@media (max-width: 860px) { .leads-colunas { grid-template-columns: 1fr } }

/* ── Meu cartão e Backoffice → Cartões (0249) ────────────────────────
   A prévia é a imagem do servidor (o mesmo desenho da gráfica); a tela
   só a emoldura. Duas colunas no computador, uma no celular. */
.cartao-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; align-items: start }
.cartao-coluna { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.cartao-bloco { display: flex; flex-direction: column; gap: 10px }
.cartao-bloco h4 { margin: 0 }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.cartao-previa { display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px }
.cartao-previa img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 8px 20px -8px rgba(12,18,32,.35); background: var(--surface) }
.cartao-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px }
.cartao-barra { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden }
.cartao-barra i { display: block; height: 100%; background: var(--own) }
.cartao-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px }
.cartao-bloco label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted) }
.cartao-bloco label.cartao-marca { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--body) }
.cartao-bloco textarea { resize: vertical }
.cartao-botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px }
.cartao-portas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.cartao-portas button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-align: left }
.cartao-portas button:hover { border-color: var(--line-2); background: var(--surface-2) }
.cartao-portas b { font-size: 20px; color: var(--ink) }
.cartao-portas span { font-size: 12px }
.cartao-portas small { font-size: 11.5px; color: var(--own) }
.cartao-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.cartao-item { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-align: left }
.cartao-item:hover { background: var(--surface-2) }
.cartao-item span { font-size: 12px; color: var(--muted) }
.cartao-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px }
.cartao-tabela th, .cartao-tabela td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right }
.cartao-tabela th:first-child, .cartao-tabela td:first-child { text-align: left }
.cartao-bo-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px }
.cartao-bo-item img { width: 240px; max-width: 40%; height: auto; border-radius: 6px; box-shadow: 0 6px 16px -8px rgba(12,18,32,.4) }
.cartao-bo-item.inativo img { opacity: .5 }
.cartao-bo-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px }
@media (max-width: 900px) {
  .cartao-grade { grid-template-columns: 1fr }
  .cartao-bo-item { flex-direction: column }
  .cartao-bo-item img { max-width: 100% }
}

/* ═══════════════════════════════════════════════════════════════════
   A roleta de atendimento (0250)
   ═══════════════════════════════════════════════════════════════════
   Azul porque é o que é SEU: o cliente oferecido a você, a sua vez. O
   relógio fica vermelho no último minuto — é a única cor de alarme da
   peça, e por isso ela vale alguma coisa. Tudo nos tokens da casa, e o
   tema escuro sai de graça. */

/* A faixa de quem coordena: fora da grade da Central, acima dela. A
   `.tela` dessa rota é um flex vertical, e a faixa não pode encolher. */
#roleta-faixa:empty { display: none }
#roleta-faixa { flex-shrink: 0; margin-bottom: 12px }
.roleta-faixa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 14px; font-size: 13px; color: var(--body);
}
.roleta-faixa b { color: var(--ink) }
.roleta-faixa-modo { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink) }
.roleta-faixa-botoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px }
.roleta-ponto {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 4px var(--ok-soft); flex: none;
}
.roleta-ponto.mudo { background: var(--muted); box-shadow: 0 0 0 4px var(--surface-2) }
.roleta-alerta { color: var(--crit); font-weight: 650 }

/* A área da vez, no alto da lista. */
#roleta-vez:empty { display: none }
#roleta-vez { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0 }
.roleta-eu {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border-radius: 10px; background: var(--ok-soft); color: var(--ok);
  font-size: 12.5px;
}
.roleta-eu b { display: block; font-size: 13px }
.roleta-eu small { color: var(--body) }
.roleta-eu.pausada { background: var(--warn-soft); color: var(--warn) }
.roleta-eu.fora { background: var(--surface-2); color: var(--muted) }

.roleta-cartao {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 13px;
  border-radius: 12px; border: 1.5px solid var(--own); background: var(--own-soft);
}
.roleta-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.roleta-cartao-rotulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--own);
}
.roleta-relogio {
  padding: 2px 9px; border-radius: 999px; background: var(--own); color: var(--on-accent);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
}
.roleta-relogio.acabando { background: var(--crit) }
.roleta-relogio-texto.acabando { color: var(--crit) }
.roleta-barra { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--own) 18%, transparent); overflow: hidden }
.roleta-barra span { display: block; height: 4px; background: var(--own); transition: width 1s linear }
.roleta-barra span.acabando { background: var(--crit) }
.roleta-cartao-nome {
  text-align: left; border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.roleta-cartao-nome:hover { color: var(--own); text-decoration: underline }
.roleta-cartao-sobre { margin: 0; font-size: 13px; color: var(--body) }
.roleta-cartao-motivo {
  margin: 0; padding: 7px 10px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--line); font-size: 12.5px; color: var(--muted);
}
.roleta-cartao-acoes { display: flex; gap: 8px; flex-wrap: wrap }
.roleta-cartao .roleta-cartao-acoes .btn { flex: 1; min-height: 42px }

/* O aviso dentro da conversa de quem é da vez: ler não é aceitar. */
.roleta-na-conversa {
  flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 13px; border-radius: 10px; font-size: 13px;
  background: var(--own-soft); border: 1px solid color-mix(in srgb, var(--own) 30%, transparent);
}
.roleta-na-conversa b { color: var(--own) }

/* O painel Distribuição (dentro da janela larga). */
.roleta-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px }
.roleta-abas button {
  padding: 9px 12px; border: 0; border-bottom: 2.5px solid transparent; background: none;
  color: var(--muted); font: inherit; font-size: 14px; cursor: pointer;
}
.roleta-abas button.on { color: var(--own); border-bottom-color: var(--own); font-weight: 650 }
.roleta-secao { padding: 10px 0; border-bottom: 1px solid var(--line) }
.roleta-secao:last-child { border-bottom: 0 }
.roleta-secao h3 { font-size: 14px; margin: 0 0 8px; color: var(--ink) }
.roleta-secao h4 { font-size: 12.5px; margin: 12px 0 6px; color: var(--muted) }
.roleta-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.roleta-modo {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 11px; border-radius: 10px;
  border: 1px solid var(--line); cursor: pointer; font-size: 13px;
}
.roleta-modo.on { border: 1.5px solid var(--own); background: var(--own-soft) }
.roleta-modo small { color: var(--muted); font-size: 11.5px }
.roleta-pessoas { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.roleta-pessoa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 52px;
  padding: 6px 12px; border-top: 1px solid var(--line);
}
.roleta-pessoa:first-child { border-top: 0 }
.roleta-pessoa.fora { background: var(--surface-2) }
.roleta-vez {
  width: 20px; text-align: center; color: var(--muted); flex: none;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px;
}
.roleta-pessoa-quem { flex: 1 1 160px; min-width: 0; line-height: 1.3 }
.roleta-pessoa-quem b { display: block; color: var(--ink); font-size: 13.5px }
.roleta-pessoa-quem small { color: var(--muted); font-size: 12px }
.roleta-pessoa-acoes { display: flex; flex-wrap: wrap; gap: 6px }
/* A visita marcada pela assistente (0251): a janela "Definir" e o cartão da visita. */
.roleta-pessoa.sugerida { background: var(--own-soft) }
.roleta-pessoa-quem small .chip { margin-left: 4px }
.roleta-visitas { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.roleta-visita {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 56px;
  padding: 8px 12px; border-top: 1px solid var(--line);
}
.roleta-visita:first-child { border-top: 0 }
.roleta-visita-quem { flex: 1 1 200px; min-width: 0; line-height: 1.35; display: flex; flex-direction: column }
.roleta-visita-quem b { color: var(--ink); font-size: 13.5px }
.roleta-visita-quem small { color: var(--muted); font-size: 12px }
.roleta-alerta-texto { color: var(--crit) !important; font-weight: 600 }
.roleta-cartao.visita .roleta-cartao-sobre b { color: var(--ink) }
.roleta-placar, .roleta-historico { display: flex; flex-direction: column; font-size: 13px; overflow-x: auto }
.roleta-placar > div, .roleta-historico > div {
  display: grid; gap: 6px; padding: 7px 8px; border-bottom: 1px solid var(--line); min-width: 520px;
}
.roleta-placar > div { grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)) }
.roleta-historico > div { grid-template-columns: 1.3fr 1.2fr 1.2fr 1.3fr }
.roleta-placar .cabeca, .roleta-historico .cabeca { color: var(--muted); font-size: 11.5px; font-weight: 600 }
.roleta-regras .campo { max-width: 220px; margin: 0 }
.roleta-horario { display: flex; flex-direction: column; gap: 6px }
.roleta-dia { display: grid; grid-template-columns: 130px 110px 110px; gap: 8px; align-items: center; font-size: 13.5px }
.roleta-opcao { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; margin: 6px 0; cursor: pointer }
.roleta-opcao input { margin-top: 4px }
.roleta-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px }
.roleta-salvar { padding-top: 12px; display: flex; justify-content: flex-end }

@media (max-width: 860px) {
  .roleta-modos { grid-template-columns: 1fr }
  .roleta-dia { grid-template-columns: 1fr 1fr 1fr }
  .roleta-faixa-botoes { margin-left: 0 }
}
