/* Painel do SocialRun.

   Mobile-first de verdade: as medidas nascem do polegar. Alvo de toque nunca
   abaixo de 44px, acao principal do card na esquerda (onde o polegar cai), e a
   navegacao no rodape em vez do topo. O desktop recebe a mesma tela, mais larga
   -- nao uma tela diferente.

   Sem framework e sem build: o projeto todo e server-rendered, e uma folha de
   estilo escrita a mao e menor que o CSS morto de qualquer biblioteca. */

/* --- As fontes da marca (E1 do PLANO-AGENCIA, 11/10/2026) ----------------------------------
   Space Grotesk nos titulos, Inter na interface (manual de marca 4.1). Os arquivos ja moravam
   no projeto para o cartao (`app/static/fontes/`, OFL, peso variavel, latino): a tela passa a
   usa-los pelo mesmo caminho relativo, sem CDN -- trocar de dominio nao mexe aqui, e nada sai
   para a rede de terceiros. `swap`: o texto aparece na letra do sistema e troca quando chega. */
@font-face {
  font-family: "Inter";
  src: url("/static/fontes/inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fontes/space-grotesk.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;

  /* **Os primitivos do manual de marca** (3.1 e 3.2). Ninguem usa um primitivo direto para
     papel de tela -- quem usa e o token semantico abaixo, que diz o PAPEL da cor (`--tinta`,
     `--papel`). Os semanticos mantiveram os nomes de antes de proposito: os 444 `var(--...)`
     da folha continuam valendo, e `tests/test_contraste.py` continua lendo os hexes deles. */
  --sr-night: #101412;
  --sr-lime: #B8FF45;
  --sr-open-space: #F5F6F0;
  --sr-motion-grey: #777F78;
  --sr-signal-blue: #4B5CFF;
  --sr-border-light: #DDE1D8;
  --sr-surface-light: #EAEEE5;
  --sr-surface-dark: #1A201C;
  /* A borda sobre o Night (a mesa do Hoje, V10): nao muda com o tema, como a faixa. */
  --sr-border-dark: #2A322D;

  --fonte-titulo: "Space Grotesk", "Inter", system-ui, sans-serif;
  --fonte-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

  /* A escala do manual (4.2). O painel e uma ferramenta de 5 minutos, nao uma vitrine: ele
     usa do h1 para baixo; o display e o h1 grande sao da landing. */
  --texto-display: clamp(2.8rem, 6vw, 5.5rem);
  --texto-h1: clamp(1.375rem, 2.2vw, 1.75rem);
  --texto-h2: 1rem;
  --texto-h3: 1rem;
  --texto-grande: 1.0625rem;
  --texto-corpo: 1rem;
  --texto-legenda: 0.875rem;
  --texto-micro: 0.75rem;

  --tinta: #101412;
  /* Motion Grey escurecido: o #777F78 do manual da 4,0:1 no branco e reprova o teste. */
  --tinta-fraca: #5E665F;
  /* O CHAO da pagina e a superficie dos CONTROLES sao coisas diferentes, e ate
     19/09/2026 eram o mesmo token. O resultado, medido: chao #f6f7f9 contra
     cartao branco da 1,07:1 de contraste -- perto do nada. O que separava um
     bloco do outro era so uma borda de 1px, e por isso a pagina lia como uma
     lista continua em vez de blocos.

     A superficie clara secundaria do manual (#EAEEE5) da 1,18:1 contra o cartao
     branco -- o mesmo patamar de antes. Mais que isso comeca a pesar a tela, que
     e o oposto do que se quer num app de 5 minutos por dia. */
  --chao: #EAEEE5;
  --fundo: #F5F6F0;
  --papel: #FFFFFF;
  --borda: #DDE1D8;
  --marca: #101412;
  /* Signal Blue escurecido: o #4B5CFF do manual da 4,9:1 no branco, mas 4,2:1 no chao e no
     fundo do proprio acento, e o acento e link e rotulo sobre os dois. */
  --acento: #3D4DF0;
  --acento-fraco: #E9EBFF;
  /* A letra SOBRE o acento (contador, filtro aceso, a tarja de "pensando"). No escuro o acento
     vira o lima, e branco no lima nao se le: por isso e um token, e nao `#fff`. */
  --acento-tinta: #FFFFFF;
  /* O botao primario (manual 9.2): escuro no claro, lima no escuro. O acento fica para link,
     foco e estado; a acao principal tem a cor da marca. */
  --cta: #101412;
  --cta-tinta: #F5F6F0;
  --cta-hover: #2A322D;
  /* O que a IA esta fazendo ou decidiu sozinha (Signal Blue). Lima e a acao DELE; o azul e o
     trabalho da agencia. A rede continua com a cor dela. */
  --ia: #3D4DF0;
  --ia-tinta: #FFFFFF;
  /* A esteira da Agencia (E4, 11/10/2026): o fundo do que a IA esta fazendo (o selo
     "escrevendo", a coluna "Em producao"), o do que esta em dia ou pede ele (a coluna "Com
     voce"), e o chao das colunas do quadro. A letra sobre cada um e conferida no teste. */
  --ia-fundo: #E9EBFF;
  --ok-fundo: #E6F7D9;
  --ok-tinta: #2E5A00;
  --coluna: #E2E6DD;
  --perigo: #B42318;
  --perigo-tinta: #FFFFFF;
  --alerta: #8a5800;
  --alerta-fundo: #fff6e0;
  /* A faixa escura e Night nos dois temas, e a letra dela tambem nao muda. A aba inativa
     continua sendo destino, e precisa se ler (era o `#9fb0c4` solto). */
  --faixa-tinta: #F5F6F0;
  --faixa-fraca: #A3ACA5;
  /* O ponto do estado na faixa (U1): ambar para o ensaio. E um ponto, e nao texto. */
  --faixa-alerta: #E3B341;
  /* O vermelho que se le sobre o Night (V5): a barra de saude da Confianca. E o tom do `--perigo` do
     tema escuro, e nao muda com o tema (a faixa e Night nos dois). */
  --faixa-perigo: #FF8A80;
  /* O que mostra foto e video: fica escuro nos dois temas, a foto se le melhor assim. */
  --midia-fundo: #101412;
  --video-fundo: #000000;
  /* Uma cor por rede, no painel inteiro (01/10/2026, pedido dele). O tom e o da marca,
     escurecido ate ler como TEXTO no cartao e no chao -- o teste de contraste confere. O
     fundo e so o da etiqueta "no LinkedIn". */
  --rede-linkedin: #0a66c2;
  --rede-linkedin-fundo: #e7f0fa;
  --rede-threads: #262626;
  --rede-threads-fundo: #ececec;
  --rede-instagram: #b0307a;
  --rede-instagram-fundo: #fbe9f3;

  /* **A fundacao de vida (V1 do PLANO-UX-VIDA, 22/10/2026).** Nenhuma cor nova: o lima e VOCE (o
     que espera a sua decisao, o gesto de relacao), o azul e a agencia, o Night e o momento de
     impacto. `--voce` e o lima do manual nos DOIS temas (por isso nao se redeclara no escuro) e e
     so PILULA, BOTAO e traco: texto corrido em lima no claro nao se le (1,1:1 no branco). O fundo
     de quem espera voce muda por tema. A origem de um conteudo e a saude de uma relacao aliam-se
     aos tokens que ja existem, e por isso seguem o tema sozinhas. */
  --voce: #B8FF45;
  --voce-tinta: #101412;
  --voce-fundo: #EEFFD1;
  --origem-radar: var(--ia);
  --origem-drive: var(--ok-tinta);
  --origem-memoria: var(--rede-instagram);
  --origem-ocasiao: var(--alerta);
  --origem-empresa: var(--tinta);
  --saude-em-dia: var(--ok-tinta);
  --saude-esfriando: var(--faixa-alerta);
  --saude-fria: var(--perigo);

  --raio-sm: 8px;
  --raio: 14px;
  --raio-lg: 20px;
  --raio-pilula: 999px;
  --toque: 44px;
  --respiro: 16px;
  --motion-fast: 150ms;
  --motion: 250ms;
  --largura-leitura: 760px;
  --largura-hoje: 880px;
}

/* **O tema escolhido na Conta (V9 do PLANO-UX-VIDA, 24/10/2026).** Sem escolha, o escuro segue o
   sistema (o `@media`); `data-theme="claro"` no `<html>` o recusa (o `:not`), e
   `data-theme="escuro"` o liga mesmo com o sistema no claro. Os DOIS blocos escuros levam os
   mesmos tokens, e `test_contraste::test_os_dois_blocos_escuros_tem_os_mesmos_valores` reprova
   quando um muda sem o outro. Cada bloco de componente escuro desta folha segue o mesmo par:
   `:where(:root:not([data-theme="claro"]))` no `@media` e `:where(:root[data-theme="escuro"])`
   logo depois -- o `:where` nao muda a especificidade de antes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --tinta: #F5F6F0;
    --tinta-fraca: #A3ACA5;
    /* No escuro o problema nunca existiu: o chao ja e mais escuro que o papel,
       e a separacao se ve. Os dois seguem iguais de proposito. */
    --chao: #101412;
    --fundo: #101412;
    --papel: #1A201C;
    --borda: #2A322D;
    --marca: #101412;
    /* **O lima nao e cor de texto nem no escuro (U1 do PLANO-UX-AGENCIA, 13/10/2026).** Ate
       ali o acento escuro era o lima, e o acento e a cor de todo link: o Hoje tinha dezenas de
       linhas verde-limao, que o manual (3.4) proibe em corpo de texto. O lima fica no botao
       primario (`--cta`), no contador e na area acesa; o acento escuro e o Signal Blue clareado. */
    --acento: #8B96FF;
    --acento-fraco: #1D2140;
    --acento-tinta: #101412;
    --cta: #B8FF45;
    --cta-tinta: #101412;
    --cta-hover: #C9FF6E;
    --ia: #8B96FF;
    --ia-tinta: #101412;
    --ia-fundo: #1D2140;
    --ok-fundo: #1E2A1A;
    --ok-tinta: #B8FF45;
    --coluna: #151A17;
    --perigo: #FF8A80;
    --perigo-tinta: #101412;
    --alerta: #e3b341;
    --alerta-fundo: #2a2313;
    --rede-linkedin: #6cb2f5;
    --rede-linkedin-fundo: #13283d;
    --rede-threads: #e6e6e6;
    --rede-threads-fundo: #2b2f35;
    --rede-instagram: #f28cc3;
    --rede-instagram-fundo: #3a1b2d;
    --voce-fundo: #1E2A1A;
  }
}
:root[data-theme="escuro"] {
  color-scheme: dark;
    --tinta: #F5F6F0;
    --tinta-fraca: #A3ACA5;
    /* No escuro o problema nunca existiu: o chao ja e mais escuro que o papel,
       e a separacao se ve. Os dois seguem iguais de proposito. */
    --chao: #101412;
    --fundo: #101412;
    --papel: #1A201C;
    --borda: #2A322D;
    --marca: #101412;
    /* **O lima nao e cor de texto nem no escuro (U1 do PLANO-UX-AGENCIA, 13/10/2026).** Ate
       ali o acento escuro era o lima, e o acento e a cor de todo link: o Hoje tinha dezenas de
       linhas verde-limao, que o manual (3.4) proibe em corpo de texto. O lima fica no botao
       primario (`--cta`), no contador e na area acesa; o acento escuro e o Signal Blue clareado. */
    --acento: #8B96FF;
    --acento-fraco: #1D2140;
    --acento-tinta: #101412;
    --cta: #B8FF45;
    --cta-tinta: #101412;
    --cta-hover: #C9FF6E;
    --ia: #8B96FF;
    --ia-tinta: #101412;
    --ia-fundo: #1D2140;
    --ok-fundo: #1E2A1A;
    --ok-tinta: #B8FF45;
    --coluna: #151A17;
    --perigo: #FF8A80;
    --perigo-tinta: #101412;
    --alerta: #e3b341;
    --alerta-fundo: #2a2313;
    --rede-linkedin: #6cb2f5;
    --rede-linkedin-fundo: #13283d;
    --rede-threads: #e6e6e6;
    --rede-threads-fundo: #2b2f35;
    --rede-instagram: #f28cc3;
    --rede-instagram-fundo: #3a1b2d;
    --voce-fundo: #1E2A1A;
}
:root[data-theme="claro"] { color-scheme: light; }

* { box-sizing: border-box; }

/* **`hidden` tem de ganhar de qualquer `display` que a folha declare.**

   O atributo `hidden` esconde pela folha do NAVEGADOR (`display: none`), e
   qualquer `display` escrito aqui vence por especificidade. Em 19/09/2026 isso
   quebrou duas coisas de uma vez: a tarja de "pensando" (`display: flex`)
   aparecia o tempo todo sem ninguem clicar, e o sino de avisos (`display:
   flex`, herdado de `.atalhos a`) nao sumia ao desligar.

   Nos dois casos o JavaScript estava certo e a tela mentia. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* Inter desde 11/10/2026 (E1): a letra e parte da marca. Ate ali era a pilha do sistema,
     pela primeira pintura; o `swap` mantem essa vantagem -- a letra do sistema aparece na hora
     e troca quando a Inter chega, uma vez so (o navegador a guarda). */
  font-family: var(--fonte-texto);
  font-size: 16px;   /* menos que isto faz o iOS dar zoom sozinho nos campos */
  line-height: 1.5;
  color: var(--tinta);
  background: var(--chao);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-text-size-adjust: 100%;
}

/* --- O sistema (E1 do PLANO-AGENCIA, 11/10/2026) ------------------------------------------
   O que todo controle tem, declarado UMA vez: o foco visivel, o passar do mouse, o pressionado,
   o desabilitado e o carregando; o link, o campo, a selecao. As secoes por data, mais abaixo,
   continuam declarando a FORMA de cada peca -- o comportamento comum mora aqui. Este bloco so
   acrescenta: nenhuma regra antiga saiu, e a limpeza delas e em etapas (o plano diz por que). */

/* O foco se ve sempre que vem do teclado (manual 10.1), e nunca no toque. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* **O link e a tinta, sublinhado (U1 do PLANO-UX-AGENCIA, 13/10/2026).** O acento (Signal Blue)
   fica para o que a agencia faz ou decidiu -- o manual (3.1) o quer pontual --, e ate aqui ele era
   a cor de todo link, pilula e etiqueta: o azul deixava de dizer alguma coisa. */
a { color: var(--tinta); text-decoration-color: var(--tinta-fraca); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }

::selection { background: var(--sr-lime); color: var(--sr-night); }

/* Movimento curto (150 ms, manual 6.3), so de cor: nada que segure o toque. O bloco de
   `prefers-reduced-motion` mais abaixo desliga tudo com `!important`. */
a, button, summary, input, select, textarea {
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

/* Os estados do botao. O primario e a cor da ACAO (`--cta`); o comum ganha contorno; o
   discreto ganha a letra cheia. */
button.principal:hover:not(:disabled), a.botao.principal:hover {
  background: var(--cta-hover); border-color: var(--cta-hover);
}
button:not([class]):hover:not(:disabled) { border-color: var(--tinta-fraca); }
button.discreta:hover:not(:disabled) { color: var(--tinta); }
/* Carregando: o HTMX marca o botao que pediu (`htmx-request`), e a tarja de "pensando" cobre os
   formularios comuns. O botao diz que trabalha sem mudar de tamanho. */
button.htmx-request, button[aria-busy="true"] { cursor: progress; }
button.htmx-request::after, button[aria-busy="true"]::after {
  content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 8px;
  vertical-align: -0.1em; border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: girar 0.7s linear infinite;
}

/* O campo: o foco pinta a borda com o acento, e o texto de exemplo se le (nao e o cinza
   claro do navegador, que fica abaixo de 4,5:1). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible,
select:focus-visible, textarea:focus-visible {
  border-color: var(--acento); outline-offset: 1px;
}
::placeholder { color: var(--tinta-fraca); opacity: 1; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--acento); }

/* **Os campos, declarados uma vez (U1 do PLANO-UX-AGENCIA, 13/10/2026).** Ate aqui so o textarea
   dentro de nove classes tinha estilo; o da linha do repost e o do momento caiam no do navegador
   -- monospace, 180 px de largura, ao lado de um botao Night. `:where()` zera a especificidade: a
   regra de uma tela (uma largura, um tamanho) continua ganhando sem `!important`. O rotulo com
   `for` fica em cima, como o manual pede (9.4); o rotulo que embrulha o controle (`.caixa`,
   `.chave`, `.chip-rede`) nao tem `for` e fica como esta. */
:where(label[for]) {
  display: block; margin: 10px 0 4px;
  font-size: 13px; font-weight: 600; color: var(--tinta-fraca);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="color"]), select, textarea) {
  display: block; width: 100%; box-sizing: border-box;
  min-height: var(--toque); margin: 0 0 10px; padding: 10px 12px;
  font: inherit; font-size: 16px; line-height: 1.4;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borda); border-radius: 10px;
}
:where(textarea) { min-height: 96px; line-height: 1.5; resize: vertical; }
/* A seta do select e desenhada: a nativa muda de sistema para sistema. O hex vai no `data:`
   escapado (`%23`), que nao e uma cor da folha -- e a `--tinta-fraca` clara. */
:where(select) {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E665F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
:where(input[type="file"]) {
  display: block; width: 100%; margin: 0 0 10px; font: inherit; font-size: 14px; color: var(--tinta-fraca);
}
input[type="file"]::file-selector-button {
  font: inherit; font-size: 14px; font-weight: 600; min-height: 40px; padding: 0 14px; margin-right: 10px;
  color: var(--tinta); background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px;
  cursor: pointer;
}

/* --- A casca: a barra lateral e as abas embaixo (E3 do PLANO-AGENCIA, 11/10/2026) ---------
   Um cabecalho e UMA navegacao no HTML, e esta folha os poe no lugar. Abaixo de 1024 px: a faixa
   do topo (a marca a esquerda; a Estrategia, o sino e a Conta a direita) e as cinco areas
   EMBAIXO, fixas, onde o polegar alcanca. A partir de 1024 px o cabecalho inteiro vira a barra
   lateral fixa: a marca, as cinco areas com o contador, a Estrategia, e a Conta no pe.

   Ele tinha pedido a navegacao no topo em 13/09/2026 ("embaixo ela le como rodape de site")
   porque usava mais o computador. No computador ela agora e a lateral; o celular volta ao
   polegar, que era o desenho original. */

:root { --altura-das-abas: 60px; --largura-da-barra: 248px; --largura-trabalho: 1280px; }

.topo {
  background: var(--marca);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--respiro);
  padding-top: calc(10px + env(safe-area-inset-top));
}

/* O simbolo e o nome em minusculas, na Space Grotesk 600 (manual 5.3). O nome e TEXTO, e nao
   imagem: vem de `config.PRODUTO`, e o leitor de tela o le. */
.marca {
  display: flex; align-items: center; gap: 9px;
  color: var(--faixa-tinta); text-decoration: none;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 20px; letter-spacing: -0.02em;
}
.marca svg { flex: 0 0 auto; display: block; color: var(--sr-lime); }

/* Abaixo de 360px o nome da marca cede o lugar. O icone identifica o app e
   leva para Hoje do mesmo jeito; o que nao pode ceder e o alvo de toque. */
@media (max-width: 359px) {
  .marca span { display: none; }
}

.atalhos { display: flex; align-items: center; gap: 2px; margin-right: -8px; }
.pe-da-barra { display: flex; align-items: center; gap: 2px; }
.atalhos > a, .pe-da-barra > a, .atalhos summary {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 10px;
  color: var(--faixa-fraca); text-decoration: none;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  border-radius: 18px;
}
.atalhos > a:hover, .pe-da-barra > a:hover, .atalhos summary:hover { color: var(--faixa-tinta); }
.atalhos > a.ativa, .atalhos summary.ativa {
  color: var(--faixa-tinta); background: rgba(255, 255, 255, 0.13);
}
.atalhos .icone { width: 18px; height: 18px; flex: 0 0 auto; }
/* No celular a Estrategia e palavra e a Conta e o icone: os dois cabem ao lado da marca em
   320 px, e o rotulo da Conta continua para o leitor de tela (o `aria-label`). */
.area-de-cima .icone { display: none; }
.menu-conta .nome-da-area { display: none; }
.menu-conta > summary { min-width: var(--toque); }

/* **As abas, embaixo, sem rolagem nunca.** A versao de 19/09/2026 tinha seis alvos e no
   celular virava rolagem horizontal -- navegacao que se descobre arrastando nao e navegacao.
   Cinco com `flex: 1 1 0` dividem a largura e cabem em qualquer tela. */
.areas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex;
  background: var(--marca);
  border-top: 1px solid var(--sr-surface-dark);
  padding-bottom: env(safe-area-inset-bottom);
}
.areas a {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--altura-das-abas);
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 2px;
  font-size: 12px; font-weight: 600; text-decoration: none;
  /* Sobre o fundo escuro da marca, em claro e em escuro. */
  color: var(--faixa-fraca);
  white-space: nowrap;
}
.areas a .nome-da-area { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.areas a:hover { color: var(--faixa-tinta); }
/* A area acesa ganha a cor cheia e o traco do lima em cima (o marcador dos mockups). */
.areas a.ativa { color: var(--faixa-tinta); box-shadow: inset 0 2px 0 var(--sr-lime); }

/* O contador mora na faixa, que e Night nos dois temas: lima com letra Night, como nos mockups.
   O da Agencia e Signal Blue -- e trabalho da IA, e nao decisao dele. */
.contador {
  background: var(--sr-lime); color: var(--sr-night);
  font-size: 12px; font-style: normal; font-weight: 700; line-height: 1.4;
  min-width: 18px; padding: 0 6px; border-radius: 9px; text-align: center;
}
.contador-agencia { background: var(--ia); color: var(--ia-tinta); }
.areas a .contador { position: absolute; top: 4px; left: calc(50% + 6px); }

/* O texto que so o leitor de tela le: o significado do contador. */
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* As abas fixas cobririam o fim da pagina: o corpo reserva a altura delas. */
body.com-casca { padding-bottom: calc(var(--altura-das-abas) + env(safe-area-inset-bottom)); }

@media (min-width: 1024px) {
  body.com-casca { padding-bottom: 0; padding-left: var(--largura-da-barra); }
  .topo {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 25;
    width: var(--largura-da-barra);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
    padding: 18px 12px; overflow-y: auto;
  }
  .marca { padding: 6px 10px; margin-bottom: 14px; }
  .areas {
    position: static; flex-direction: column; gap: 4px;
    background: none; border: 0; padding: 0;
  }
  .areas a, .atalhos a.area-de-cima, .menu-conta > summary {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px;
    min-height: var(--toque); padding: 0 14px; border-radius: 10px;
    font-size: 15px; font-weight: 500;
  }
  .areas a:hover, .atalhos a.area-de-cima:hover, .menu-conta > summary:hover {
    background: var(--sr-surface-dark);
  }
  .areas a.ativa, .atalhos a.area-de-cima.ativa, .menu-conta > summary.ativa {
    background: var(--sr-surface-dark); box-shadow: inset 3px 0 0 var(--sr-lime);
  }
  .areas a .contador { position: static; margin-left: auto; }
  .atalhos {
    flex: 1; flex-direction: column; align-items: stretch; gap: 4px; margin: 10px 0 0;
    border-top: 1px solid var(--sr-surface-dark); padding-top: 10px;
  }
  .area-de-cima .icone, .menu-conta .nome-da-area { display: inline; }
  .atalhos .icone { width: 20px; height: 20px; }
  .pe-da-barra {
    margin-top: auto; flex-direction: column; align-items: stretch; gap: 4px;
    border-top: 1px solid var(--sr-surface-dark); padding-top: 10px;
  }
  .pe-da-barra .sino { align-self: flex-start; }
  /* Embaixo da barra o menu abre para CIMA: para baixo ele sairia da tela. */
  .menu-conta .lista-do-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
}

/* **A linha de estado da agencia (U1 do PLANO-UX-AGENCIA, 13/10/2026).** Era a tarja ambar do
   ensaio e a da rotina desligada, uma em cima da outra, em toda tela de homologacao. Agora moram
   no pe da barra lateral, com um ponto colorido: lima e "em dia", ambar e "ensaio", cinza e
   "desligada". No celular so o ponto aparece (o texto fica para o leitor de tela). O alarme da
   rotina parada continua uma tarja vermelha em toda tela: e o unico que invade. */
.estado-da-agencia { display: flex; align-items: center; gap: 6px; }
.estado-da-agencia .estado {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12px; line-height: 1.35; color: var(--faixa-fraca); white-space: nowrap;
}
.estado-da-agencia .estado strong { color: var(--faixa-tinta); font-weight: 600; }
.estado-da-agencia .ponto {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faixa-fraca);
}
.estado-da-agencia .em-dia .ponto { background: var(--sr-lime); }
.estado-da-agencia .ensaio .ponto { background: var(--faixa-alerta); }
.estado-da-agencia .texto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (min-width: 1024px) {
  .estado-da-agencia { flex-direction: column; align-items: stretch; gap: 4px; padding: 0 14px 8px; }
  .estado-da-agencia .estado { white-space: normal; }
  .estado-da-agencia .texto {
    position: static; width: auto; height: auto; overflow: visible;
    clip: auto; clip-path: none; white-space: normal;
  }
}

/* A largura: texto corrido em 760 px (`--largura-leitura`); a tela de trabalho (a grade do
   Calendario, a esteira da Agencia) pede ate 1280 px (`--largura-trabalho`) com `main.trabalho`,
   quando o desenho dela chegar. As listas de hoje continuam numa coluna de leitura. */
main { padding: var(--respiro); max-width: var(--largura-leitura); margin: 0 auto; }
main.trabalho { max-width: var(--largura-trabalho); }
main.hoje { max-width: var(--largura-hoje); }

h1 { font-size: var(--texto-h1); margin: 4px 0 16px; letter-spacing: -0.02em; }
h2 { font-size: var(--texto-h2); margin: 28px 0 12px; letter-spacing: -0.01em; }
/* Os titulos na Space Grotesk (manual 4.1); o texto, os rotulos e os numeros ficam na Inter. */
h1, h2, h3, .titulo-bloco { font-family: var(--fonte-titulo); }

/* TRES NIVEIS, e nao dois com a mesma cara. Ate 19/09/2026 `Radar` (grupo) e
   `Eixos` (bloco) eram os dois um `<h2>`, e o grupo tinha 16px -- exatamente o
   tamanho do texto corrido. Titulo com o peso do corpo nao organiza nada, e por
   isso /ajustes lia como uma lista continua em vez de tres assuntos.

   .grupo         regua com rotulo, FORA do cartao -- "Radar", "Persuasao"
   .titulo-bloco  o nome do cartao, com peso de titulo -- "Eixos"
   .etiqueta-bloco  micro-rotulo DENTRO de um cartao -- "O que aconteceu"

   O grupo fica fora do cartao de proposito: e o que faz um conjunto de cartoes
   ler como um conjunto. Dentro, ele seria so mais um titulo. */
/* **Em caixa normal desde a U1 (13/10/2026)**: a regua em caixa alta espacada era o sistema de
   19/09, anterior ao manual; as pranchas usam o titulo na letra dos titulos, com a contagem em
   cinza ("Para aprovar · 3"). */
.grupo {
  display: flex; align-items: center; gap: 10px;
  margin: 30px 0 12px; font-family: var(--fonte-titulo); font-size: 19px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--tinta);
}
/* O traco lima (V1 do PLANO-UX-VIDA): a assinatura de todo titulo de grupo, e o grafismo da marca
   -- um ciclo aberto, uma trajetoria. Enfeite: nao e texto, e nenhum leitor de tela o le. */
.grupo::before {
  content: ""; flex: none; width: 18px; height: 4px; border-radius: 2px; background: var(--voce);
}
/* O que fica a direita do titulo: o recorte do que o grupo mostra, ou o link do contexto. */
.grupo .fim { margin-left: auto; font-family: var(--fonte-texto); font-size: 13px; font-weight: 600; }
.grupo:first-of-type { margin-top: 22px; }
.grupo .quantas {
  font-size: 13px; font-weight: 500; color: var(--tinta-fraca);
  background: none; border: 0; padding: 0; min-width: 0;
  /* O texto longo ("saem sozinhas, a menos que voce vete") quebra, e nao alarga a pagina: a barra
     fixa de baixo acompanha a largura da pagina, e no celular ela sumia da tela. */
  white-space: normal; text-align: left;
}
.grupo { flex-wrap: wrap; }

.titulo-bloco {
  margin: 0 0 12px; font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--tinta);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}

/* --- Cards --------------------------------------------------------------- */

.fila { display: flex; flex-direction: column; gap: 12px; }

/* Sem borda, com sombra. A borda existia para separar o cartao de um chao que
   nao separava nada; com o chao de verdade, ela vira contorno em volta de tudo
   -- e contorno em volta de tudo e ruido, nao estrutura.

   Duas camadas: a curta assenta o cartao, a longa e difusa da a profundidade.
   Uma sombra so, mais forte, vira caixa flutuante de site de 2014. */
.card, .detalhe, .achado, .pilar, .lista-de-frases {
  background: var(--papel);
  border: 0;
  border-radius: var(--raio);
  padding: var(--respiro);
  box-shadow: 0 1px 2px rgba(16, 23, 32, 0.06), 0 4px 12px rgba(16, 23, 32, 0.05);
}

/* No escuro a sombra nao se ve -- e o que separa ali e a diferenca de
   luminancia, que ja existe. Uma hairline devolve a definicao sem inventar
   luz que nao ha. */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .card, :where(:root:not([data-theme="claro"])) .detalhe,
  :where(:root:not([data-theme="claro"])) .achado, :where(:root:not([data-theme="claro"])) .pilar,
  :where(:root:not([data-theme="claro"])) .lista-de-frases {
    box-shadow: 0 0 0 1px var(--borda);
  }
}
:where(:root[data-theme="escuro"]) .card, :where(:root[data-theme="escuro"]) .detalhe,
:where(:root[data-theme="escuro"]) .achado, :where(:root[data-theme="escuro"]) .pilar,
:where(:root[data-theme="escuro"]) .lista-de-frases {
  box-shadow: 0 0 0 1px var(--borda);
}

.card h2 { font-size: 17px; margin: 6px 0 8px; line-height: 1.35; }
.card h2 a { color: var(--tinta); text-decoration: none; }
.card .resumo { color: var(--tinta-fraca); margin: 0 0 12px; font-size: 15px; }

/* O rotulo da linha de cima do card ("Momento", "Post · LinkedIn", "Qui 15/10 · 12:00"). Era uma
   pilula azul em caixa alta de 11 px -- abaixo do minimo do manual (4.2) e na cor que o manual
   reserva para a IA. Desde a U1 (13/10/2026) e texto de 13 px, como nas pranchas. */
.rotulo {
  display: inline-block;
  font-size: 13px; font-weight: 600; color: var(--tinta-fraca);
}

.card.saiu {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--tinta-fraca);
  /* Animacao curta: sinaliza que o toque pegou sem atrasar o proximo card. */
  animation: apagando 0.25s ease-out;
}
.card.saiu p { margin: 0; }

@keyframes apagando {
  from { opacity: 0.4; transform: scale(0.99); }
  to   { opacity: 1;   transform: none; }
}

/* Erro e aviso recuperam a borda: aqui ela nao e contorno decorativo, e o
   proprio recado. Com `box-shadow: none` para a cor nao brigar com a sombra. */
.card.erro   { border: 1px solid var(--perigo); color: var(--perigo); box-shadow: none; }
.card.aviso  { border: 1px solid var(--alerta); background: var(--alerta-fundo); box-shadow: none; }
.card.aviso ul, .card.erro ul { margin: 8px 0 0; padding-left: 20px; }

/* --- Botoes -------------------------------------------------------------- */

.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.acoes form { margin: 0; }
/* A regra 3 do PLANO-UX-VIDA: a acao principal a esquerda, a secundaria ao lado, e a que descarta
   (o Pular) no fim, a direita. */
.acoes .fim { margin-left: auto; }

button {
  min-height: var(--toque);
  padding: 0 18px;
  font: inherit; font-weight: 600;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 10px;
  cursor: pointer;
  /* Sem isto o iOS pinta o botao com o estilo dele e ignora o nosso. */
  -webkit-appearance: none;
}

button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.principal { background: var(--cta); border-color: var(--cta); color: var(--cta-tinta); }
button.discreta {
  background: none; border-color: transparent; color: var(--tinta-fraca); font-weight: 500;
}

/* --- Etiquetas e numeros ------------------------------------------------- */

.etiqueta {
  display: inline-block; margin: 0 6px 6px 0;
  font-size: 12px; padding: 3px 9px; border-radius: 20px;
  background: var(--chao); color: var(--tinta); font-weight: 600;
}
/* O que a agencia fez ou decidiu (Signal Blue, U1): "A agencia vai publicar", o angulo escolhido
   por ela. E o que esta pronto para ele (lima com letra Night, como no Calendario). */
.etiqueta.ia { background: var(--ia-fundo); color: var(--ia); }
.etiqueta.pronta { background: var(--sr-lime); color: var(--sr-night); }
/* A peca que espera algo DELE (o recado, a narracao, a gravacao): o ambar dos avisos. */
.etiqueta.estado-falta { background: var(--alerta-fundo); color: var(--alerta); box-shadow: inset 0 0 0 1px var(--alerta); }
.etiqueta.suave { background: var(--fundo); color: var(--tinta-fraca); border: 1px solid var(--borda); }
/* De onde o conteudo veio (Radar, Drive...): a mesma etiqueta suave, com a letra do texto. */
.etiqueta.origem { background: var(--fundo); color: var(--tinta); border: 1px solid var(--borda); }

.numeros { color: var(--tinta-fraca); }
.numeros strong { color: var(--tinta); font-size: 18px; }

.nota { color: var(--tinta-fraca); font-size: 13px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* --- Filtros e busca ----------------------------------------------------- */

.filtros { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; }
.filtros a {
  min-height: 36px; display: inline-flex; align-items: center;
  padding: 0 14px; border-radius: 20px; white-space: nowrap;
  text-decoration: none; color: var(--tinta-fraca);
  border: 1px solid var(--borda); background: var(--papel); font-size: 14px;
}
.filtros a.ativa { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); font-weight: 600; }

.busca { display: flex; gap: 8px; margin: 12px 0 20px; }
.busca input {
  flex: 1; min-height: var(--toque);
  padding: 0 14px; font: inherit; font-size: 16px;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borda); border-radius: 10px;
}

/* --- Listas e detalhes --------------------------------------------------- */

.achado, .pilar { margin-bottom: 10px; }
.achado p { margin: 8px 0; color: var(--tinta-fraca); font-size: 14px; }

.linha-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.distancia, .peso { color: var(--tinta-fraca); font-size: 13px; font-variant-numeric: tabular-nums; }

.barra { height: 6px; background: var(--fundo); border-radius: 3px; margin: 8px 0; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--acento); }

.arquivos { list-style: none; padding: 0; margin: 0; }
.arquivos li {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--borda);
  font-size: 13px;
}
.arquivos code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivos em { color: var(--tinta-fraca); font-style: normal; font-variant-numeric: tabular-nums; }

.caminho { display: block; margin-top: 8px; color: var(--tinta-fraca); }

.meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 16px 0; font-size: 14px; }
.meta dt { color: var(--tinta-fraca); }
.meta dd { margin: 0; }
.meta.larga { grid-template-columns: 1fr; gap: 2px 0; }
.meta.larga dd { margin-bottom: 14px; }

.nota-corpo p { margin: 0 0 14px; }
.voltar a { color: var(--tinta-fraca); text-decoration: none; font-size: 14px; }

.vazio { text-align: center; color: var(--tinta-fraca); padding: 40px 20px; }
.vazio .grande { font-size: 18px; color: var(--tinta); margin-bottom: 8px; }
.grande { font-size: 17px; }

.reindexar { margin: 28px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Com a borda transparente da `.discreta`, o padding fazia o botao parecer
   deslocado para dentro em vez de alinhado com o texto acima. */
.reindexar button { border-color: var(--borda); background: var(--papel); }

/* --- Convite de notificacao ---------------------------------------------- */

.convite {
  background: var(--acento-fraco);
  border: 1px solid var(--acento);
  border-radius: var(--raio);
  padding: var(--respiro);
  margin-bottom: 16px;
}
.convite p { margin: 0 0 12px; }
.convite .nota { margin: 10px 0 0; }

/* --- Desktop: mesma tela, mais larga ------------------------------------- */

@media (min-width: 720px) {
  /* A fila continua em UMA coluna no desktop. Duas colunas pareciam melhor
     aproveitamento do espaco e nao eram: card ao lado de card vira grade para
     varrer, e o que se pede aqui e leitura e decisao, um item de cada vez.
     Mesma tela, mais larga -- nao uma tela diferente. */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Marca do posicionamento provisorio: o painel nao pode apresentar um palpite
   inicial com a mesma cara de uma tese conquistada. */
.provisorio {
  font-style: normal; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--alerta); background: var(--alerta-fundo);
  padding: 2px 7px; border-radius: 5px; margin-left: 6px;
}

/* --- Card de curadoria ---------------------------------------------------- */

/* Cada bloco se apresenta. A versao anterior tinha tres textos sem rotulo e um
   quarto de origem desconhecida -- era impossivel decidir bem. */

.card.curar .bloco { padding: 14px 0; border-bottom: 1px solid var(--borda); }
.card.curar .bloco:last-child { border-bottom: none; padding-bottom: 0; }

.etiqueta-bloco {
  margin: 0 0 8px;
  font-size: 13px; font-weight: 600;
  color: var(--tinta-fraca);
  display: flex; align-items: center; gap: 8px;
}

/* "previsao" existe para nao esconder que o campo e chute do modelo, e nao
   coisa medida. Esconder isso seria pedir para o autor discutir com espantalho. */
.previsao {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--alerta); background: var(--alerta-fundo);
  padding: 2px 6px; border-radius: 4px; text-transform: uppercase;
}

/* O fato NAO e titulo -- e uma frase inteira. Peso de corpo, nao de manchete:
   com 500 ele ainda lia como headline, que foi a primeira confusao do card. */
.card.curar .fato {
  font-size: 16px; font-weight: 400; line-height: 1.5;
  margin: 0 0 10px; color: var(--tinta);
}

.card.curar .fonte { margin: 0; font-size: 13px; }
.card.curar .fonte a { font-weight: 600; }
.card.curar .fonte a:hover { text-decoration: underline; }
.procedencia { display: block; margin-top: 3px; color: var(--tinta-fraca); font-size: 12px; }

.card.curar .importa { margin: 0 0 10px; color: var(--tinta); font-size: 15px; line-height: 1.5; }

.para-quem { margin: 0; font-size: 12px; }
.para-quem > span:first-child {
  color: var(--tinta-fraca); text-transform: uppercase;
  letter-spacing: 0.06em; margin-right: 6px; font-size: 12px;
}

.eixo { font-size: 12px; color: var(--tinta-fraca); }

.obvio {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--alerta);
  background: var(--fundo);
  border-radius: 0 8px 8px 0;
  color: var(--tinta); font-size: 15px; font-style: italic; line-height: 1.45;
}

.explica { margin: 0; color: var(--tinta-fraca); font-size: 13px; line-height: 1.5; }

.card.curar .decisao .acoes { margin-top: 10px; }

/* --- Card e tela de revisao de post --------------------------------------- */

/* O card precisa mostrar TEXTO. O desenho anterior reusava o card generico, que
   exibe `titulo` -- e o titulo aqui e o gancho cortado em 90 caracteres. Ficava
   uma chamada pedindo aprovacao de um conteudo invisivel. */
/* Vale para todo card que mostra um post -- fila de revisao e fila de
   publicacao. Presa a `.revisar`, o gancho na fila de publicacao saia como
   link cru, azul e sublinhado, parecendo outra coisa. */
.gancho { margin: 8px 0; font-size: 16px; line-height: 1.4; font-weight: 600; }
.gancho a { color: var(--tinta); text-decoration: none; }
.gancho a:hover { text-decoration: underline; }

.card.revisar .previa {
  margin: 0 0 12px; color: var(--tinta-fraca); font-size: 14px; line-height: 1.5;
  /* Tres linhas: o bastante para saber do que se trata, pouco para nao virar a
     tela de leitura -- que e a pagina, com a dobra do feed marcada. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.ficha { margin: 0 0 10px; display: flex; gap: 6px; flex-wrap: wrap; }

.card.revisar .aviso-curto {
  margin: 0 0 10px; font-size: 13px; font-weight: 600;
  color: var(--alerta);
}
.card.revisar .ja-avaliado { margin: 0 0 10px; font-size: 13px; color: var(--tinta-fraca); }

/* Link com cara de botao: "Ler e revisar" e navegacao, nao acao de formulario,
   e mesmo assim precisa do mesmo alvo de 44px do polegar. */
a.botao {
  display: inline-flex; align-items: center;
  min-height: var(--toque); padding: 0 18px;
  font-weight: 600; text-decoration: none;
  border: 1px solid var(--borda); border-radius: 10px;
  color: var(--tinta); background: var(--fundo);
}
a.botao.principal { background: var(--cta); border-color: var(--cta); color: var(--cta-tinta); }

.revisao .bloco { padding: 16px 0; border-bottom: 1px solid var(--borda); }
.revisao .bloco:last-child { border-bottom: none; padding-bottom: 0; }

.revisao .aviso {
  margin: 12px 0 0; padding: 10px 12px;
  font-size: 14px; color: var(--alerta);
  background: var(--alerta-fundo); border: 1px solid var(--alerta);
  border-radius: 10px;
}

/* O post no formato em que sai. Fundo de papel e medida de linha curta para
   ler como post, e nao como campo de formulario. */
.post-pronto {
  background: var(--papel); border: 1px solid var(--borda); border-radius: 12px;
  padding: 14px 16px; margin: 0 0 8px;
}
.post-pronto p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.post-pronto p:last-child { margin-bottom: 0; }

/* A dobra do feed. Marcar isto muda a revisao: o trecho de cima e o unico que a
   maioria vai ler, e revisar o post inteiro sem saber onde ele corta e revisar
   outra peca. */
.post-pronto .dobra {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 14px; color: var(--tinta-fraca); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  white-space: normal;
}
.post-pronto .dobra::before, .post-pronto .dobra::after {
  content: ""; flex: 1; height: 1px; background: var(--borda);
}

.contagem { margin: 0; color: var(--tinta-fraca); font-size: 12px; }
.para-copiar {
  width: 100%; min-height: 160px; margin-top: 10px;
  padding: 12px; font: inherit; font-size: 16px;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borda); border-radius: 10px;
}

.revisao .fonte { margin: 6px 0; font-size: 13px; }
.revisao .fonte a { font-weight: 600; }
.revisao .importa { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }

form.inline { display: inline; margin: 0; }

/* O portao de qualidade. O placar fica sempre a vista: portao cuja conta nao
   aparece vira folclore, e a regra da Fase 2 e justamente uma conta. */
.veredito .acoes { margin-top: 10px; }
.veredito .explica { margin-top: 10px; }
.veredito .julgado { margin: 8px 0 10px; font-size: 15px; }
.placar {
  margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed var(--borda);
  color: var(--tinta-fraca); font-size: 13px;
}
.placar .bom  { color: var(--acento); }
.placar .ruim { color: var(--perigo); }

/* --- O fluxo e as etapas -------------------------------------------------- */

/* O pipeline estava so na cabeca de quem construiu: a fila mostrava cards sem
   dizer que etapa era qual nem o que vinha depois. Fechado por padrao -- quem
   ja sabe nao precisa reler todo dia. */
.fluxo {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); margin-bottom: 16px;
}
.fluxo summary {
  cursor: pointer; padding: 0 var(--respiro);
  min-height: var(--toque); display: flex; align-items: center;
  font-weight: 600; font-size: 14px; color: var(--tinta);
}
.fluxo ol { margin: 0; padding: 0 var(--respiro) 4px 34px; }
.fluxo li { margin-bottom: 10px; font-size: 14px; line-height: 1.5; color: var(--tinta-fraca); }
.fluxo li strong { color: var(--tinta); }
.fluxo .nota {
  margin: 0; padding: 12px var(--respiro);
  border-top: 1px dashed var(--borda); font-size: 13px; color: var(--tinta-fraca);
}

/* Quem faz o que: a assimetria e deliberada no projeto, entao ela se ve. */
.quem {
  display: inline-block; margin: 0 4px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 5px;
  color: var(--tinta-fraca); background: var(--fundo); border: 1px solid var(--borda);
}
.quem.seu { color: var(--acento); background: var(--acento-fraco); border-color: var(--acento); }
.quem.manual { color: var(--alerta); background: var(--alerta-fundo); border-color: var(--alerta); }

.etapa { margin-bottom: 28px; }

.titulo-etapa {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 4px; font-size: 15px; letter-spacing: -0.01em;
}
.quantas {
  font-size: 12px; font-weight: 700;
  color: var(--tinta-fraca); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 9px;
  min-width: 20px; padding: 1px 6px; text-align: center;
  /* Um numero com a palavra dele: quebrar o selo em duas linhas o fazia ler como um botao. */
  white-space: nowrap;
}

/* O que a etapa PEDE e para onde o card vai depois. Sem as duas linhas, a fila
   e uma pilha: da para agir em cada card sem nunca entender a sequencia. */
.pede   { margin: 0 0 2px; font-size: 13px; color: var(--tinta-fraca); }
/* Sem `opacity`. Ela existia para esta linha recuar atras do `pede`, e o preco
   era contraste: a 85% sobre o chao, `--tinta-fraca` dava 3,96:1 -- abaixo dos
   4,5:1 que texto pequeno exige. Com o chao novo cairia para 3,68:1, entao eu
   estaria piorando um defeito que ja existia.
   O recuo agora vem do TAMANHO (12px contra 13px) e do peso da frase, nao de
   apagar a tinta. Sem opacidade: 4,93:1. */
.depois { margin: 0 0 12px; font-size: 12px; color: var(--tinta-fraca); }

/* --- O passo seguinte ao veredito ----------------------------------------- */

/* O veredito sozinho era metade do trabalho: media o portao e nao levava a
   lugar nenhum. Este bloco e a outra metade. */
.passo .explica { margin-bottom: 12px; }

.reparos { margin: 0 0 14px; padding-left: 20px; }
.reparos li { margin-bottom: 6px; font-size: 14px; line-height: 1.5; }

.apontar { margin: 0 0 12px; }
.apontar label {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}

/* O que cada botao da fila faz. Estava sem explicacao nenhuma, e "Feito"
   parecia publicar -- o botao mais assustador da tela, sem uma linha. */
.oquefaz { margin: 14px 0 0; font-size: 13px; line-height: 1.5; }
.oquefaz dt {
  font-weight: 700; color: var(--tinta); margin-top: 10px;
}
.oquefaz dd { margin: 2px 0 0; color: var(--tinta-fraca); }

/* A cadencia da pauta, na hora de publicar. Sem ela a tela convida a publicar
   tudo que ficou bom no mesmo dia -- o oposto do que a pauta defende. */
.ritmo { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.explica.cheia { color: var(--alerta); }

/* Sinal de que o refazer esta trabalhando. Escondido ate o HTMX marcar o
   pedido em voo: aviso permanente de "isso demora" vira ruido. */
.trabalhando {
  display: none;
  align-items: center; gap: 10px;
  margin: 12px 0 0; padding: 12px 14px;
  font-size: 14px; line-height: 1.4;
  color: var(--acento); background: var(--acento-fraco);
  border: 1px solid var(--acento); border-radius: 10px;
}
.htmx-request.trabalhando, .htmx-request .trabalhando { display: flex; }

.girando {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* --- Modo ensaio e fila de publicacao ------------------------------------- */

/* A tarja do ensaio virou a linha de estado na faixa (`.estado-da-agencia`, na casca): duas faixas
   ambar em toda tela de homologacao liam como alarme permanente (U1, 13/10/2026). */

.card.agendado { border-left: 3px solid var(--acento); }
.card.publicado { opacity: 0.85; }

.quando {
  margin: 0 0 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}
.card.publicado .quando { color: var(--tinta-fraca); }

.vazio-magro {
  margin: 0; padding: 18px;
  color: var(--tinta-fraca); font-size: 14px;
  background: var(--papel); border: 1px dashed var(--borda); border-radius: var(--raio);
}

/* O elo entre o item do radar e o post que nasceu dele. Sem ele, os dois
   apareciam nas abas como duas entradas sobre o mesmo fato -- e pareciam
   duplicata. A relacao existia no banco e nao na tela. */
.virou {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px dashed var(--borda);
  font-size: 13px; color: var(--tinta-fraca);
}
.virou a { color: var(--acento); text-decoration: none; font-weight: 600; }
.virou a:hover { text-decoration: underline; }

/* --- Abas de etapa e cards de arquivo ------------------------------------- */

/* As abas do fluxo, dentro da pagina (as do topo sao as secoes do app). Elas
   sao ETAPAS, nao estados: a diferenca e o que fazia "tome posicao" aparecer
   numa aba de coisas ja decididas. */
.etapas {
  display: flex; gap: 6px; margin-bottom: 20px;
  overflow-x: auto; scrollbar-width: none;
}
.etapas::-webkit-scrollbar { display: none; }

.etapas a {
  flex: 0 0 auto;
  min-height: 38px; padding: 0 14px;
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--borda); border-radius: 20px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--tinta-fraca); background: var(--papel);
}
.etapas a.ativa {
  color: var(--acento-tinta); background: var(--acento); border-color: var(--acento);
}
.etapas a.ativa .quantas {
  color: var(--acento); background: var(--acento-tinta); border-color: transparent;
}
/* O arquivo nao e etapa -- separado para nao parecer o quinto passo do fluxo. */
.etapas a.arquivo { margin-left: auto; background: none; }

h1.titulo-etapa { font-size: 20px; margin: 0 0 6px; }

/* Card de arquivo: leitura, sem acao. Na aba de resolvidos o card de curadoria
   ainda mostrava "Qual e a sua leitura?" com os tres botoes, pedindo uma
   decisao ja tomada. */
.card.arquivo { padding: 14px var(--respiro); }
.cabeca-arquivo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 4px;
}
.card.arquivo .gancho { font-size: 15px; font-weight: 500; }

.selo {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 5px;
  color: var(--tinta-fraca); background: var(--fundo); border: 1px solid var(--borda);
}
.selo.descartada { opacity: 0.7; }

/* O texto de antes do ultimo ajuste. Sem ele, descobrir que o "ajuste leve"
   reescreveu tudo significa ter perdido o texto que ja estava bom. */
.anterior { margin-top: 12px; }
.anterior summary {
  cursor: pointer; padding: 10px 0; min-height: var(--toque);
  display: flex; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--tinta);
}
.anterior .post-pronto { opacity: 0.75; }

/* --- Barra compacta do topo ----------------------------------------------- */

/* Antes o convite de notificacao e o fluxo ocupavam meia tela acima da fila --
   espaco caro gasto por coisas que se leem uma vez. */

/* A chave. O estado dela E a resposta ("estou recebendo ou nao"), em vez de um
   convite que fica no topo mesmo depois de respondido. */
.chave {
  display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer; min-height: 32px;
  font-size: 13px; color: var(--tinta-fraca);
}
.chave input { position: absolute; opacity: 0; width: 0; height: 0; }

.trilho {
  flex: 0 0 auto;
  width: 34px; height: 20px; border-radius: 10px;
  background: var(--borda); position: relative;
  transition: background 0.15s ease;
}
.trilho::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--papel);
  transition: transform 0.15s ease;
}
.chave input:checked + .trilho { background: var(--acento); }
.chave input:checked + .trilho::after { transform: translateX(14px); }
.chave input:focus-visible + .trilho { outline: 2px solid var(--acento); outline-offset: 2px; }
.chave input:disabled + .trilho { opacity: 0.45; }
.chave:has(input:disabled) { cursor: not-allowed; }

/* O fluxo como popover: o mesmo texto, sem ocupar a tela ate ser pedido. */
.fluxo[popover] {
  max-width: 560px; width: calc(100% - 32px);
  margin: auto;
  padding: var(--respiro);
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borda); border-radius: var(--raio);
}
.fluxo[popover]::backdrop { background: rgba(0, 0, 0, 0.5); }
.fluxo[popover] h2 { margin: 0 0 14px; font-size: 17px; }
.fluxo[popover] ol { padding-left: 22px; }
.fluxo[popover] .nota { border-top: 1px dashed var(--borda); padding: 12px 0; margin: 0 0 12px; }

/* O campo onde ELE escreve mora no sistema desde a U1 (13/10/2026): o textarea sem classe da linha
   do repost e do momento caia no do navegador. */
.card .decisao .explica { margin-bottom: 10px; }

/* A previsao vira rodape em letra menor: continua util para o gerador e deixou
   de ser a coisa a que ele tem de responder. */
.menos { display: block; margin-top: 6px; font-size: 12px; opacity: 0.8; }

/* A rotina parou. Vermelho e nao ambar: o ensaio e uma escolha, isto e uma
   falha -- a fila para de andar e o painel continua bonito. */
.tarja-parada {
  margin: 0; padding: 8px var(--respiro);
  text-align: center; font-size: 13px;
  color: var(--perigo-tinta); background: var(--perigo);
}

/* --- Colar link para repostar --------------------------------------------- */

.colar {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: var(--respiro); margin-bottom: 20px;
}
.colar label {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}
.colar .opcional { text-transform: none; letter-spacing: 0; font-weight: 500; }
.colar .nota { margin: 10px 0 0; }

/* As paginas declaradas, com o modo trocavel na propria linha. */
.paginas {
  background: var(--papel); border: 0;
  border-radius: var(--raio); padding: var(--respiro); margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(16, 23, 32, 0.06), 0 4px 12px rgba(16, 23, 32, 0.05);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .paginas { box-shadow: 0 0 0 1px var(--borda); }
}
:where(:root[data-theme="escuro"]) .paginas { box-shadow: 0 0 0 1px var(--borda); }
.paginas ul { list-style: none; margin: 10px 0 0; padding: 0; }
.paginas li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--borda);
}
.paginas li:last-child { border-bottom: none; }
.nome-pagina a { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 14px; }
.nome-pagina a:hover { text-decoration: underline; }

.modos { display: flex; align-items: center; gap: 4px; }
.modos button { min-height: 30px; padding: 0 10px; font-size: 12px; }
.modo-atual {
  padding: 5px 11px; border-radius: 14px;
  font-size: 12px; font-weight: 700;
  color: var(--acento-tinta); background: var(--acento);
}

/* A MONTAGEM do que vai sair: a linha dele em cima, o post do outro embutido
   embaixo. A primeira versao mostrava so a previa solta, e ele perguntou -- com
   razao -- se aquele texto curto e a foto unica eram o que seria publicado.
   Mostrar a estrutura responde antes de ele perguntar. */
.montagem { margin-bottom: 10px; }

.parte-sua {
  padding: 12px 14px;
  border: 1px solid var(--borda); border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: var(--papel);
}
.linha-pronta { margin: 0; font-size: 15px; line-height: 1.5; }
.linha-faltando {
  margin: 0; font-size: 14px; font-style: italic;
  color: var(--tinta-fraca);
}

/* Recuado e com fundo proprio: no feed, o post embutido e visivelmente OUTRO
   post, e o card precisa parecer com o resultado. */
.parte-embutida {
  background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.quem-publicou {
  margin: 0; padding: 10px 14px 8px;
  font-size: 12px; font-weight: 700; color: var(--tinta-fraca);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* A moldura da imagem do post.
 
   **`contain`, e nao `cover`.** Com `cover` a foto era recortada pelo meio e
   saiam so os torsos -- a imagem cabia na tela e nao dizia mais nada. A previa
   existe para ele reconhecer o que esta repostando, entao ela precisa mostrar a
   foto INTEIRA, mesmo que sobre fundo nas laterais.
 
   `aspect-ratio: 1.91/1` e a proporcao que o proprio LinkedIn usa no feed, com
   teto de altura para nao tomar a tela no celular. Fundo escuro em vez de
   transparente: e o que o feed faz com imagem que nao preenche. */
.moldura {
  aspect-ratio: 1.91 / 1;
  max-height: 300px;
  background: var(--midia-fundo);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.moldura img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}

/* As fotos do momento, na ordem em que ele mandou.

   **`contain`, como a moldura do repost**: recortar pelo meio tiraria
   justamente as pessoas, e a revisao existe para ele ver o que vai sair. A
   primeira ocupa a linha inteira porque e ela que o LinkedIn destaca. */
.fotos-do-momento {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: 10px;
}
.fotos-do-momento .foto {
  aspect-ratio: 1; background: var(--midia-fundo); border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.fotos-do-momento .foto:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
/* O momento em video (11/10/2026): os quadros sao o que o modelo leu -- pequenos, lado a lado. */
.quadros-do-video .foto:first-child { grid-column: auto; aspect-ratio: auto; }
.video-do-momento audio { width: 100%; margin: 8px 0; }
/* O video como ele chegou, no formato dele (o de evento e deitado) -- e nao no 9:16 do Reel. */
.video-original { display: block; width: 100%; max-height: 60vh; background: var(--video-fundo); border-radius: 10px; }
.fotos-do-momento img {
  display: block; max-width: 100%; max-height: 100%; object-fit: contain;
}
.fotos-do-momento .foto { position: relative; }
/* As laminas do carrossel sao todas 4:5 e iguais em peso: nenhuma vira a capa grande. */
.fotos-do-momento.laminas .foto,
.fotos-do-momento.laminas .foto:first-child { grid-column: auto; aspect-ratio: 4 / 5; }
.acoes-da-foto {
  position: absolute; left: 6px; bottom: 6px;
  display: flex; gap: 4px;
}
.acoes-da-foto form { margin: 0; }
/* **Chip solido, e nao `discreta`**, desde 26/09/2026: ele nao via os botoes.
   `discreta` e fundo transparente e texto fraco -- feito para recuar sobre o
   cartao, e ilegivel sobre uma foto, que tem qualquer cor. O par e o do texto
   principal (`--tinta` sobre `--papel`), que `test_contraste` ja garante nos
   dois temas, e a sombra o destaca de qualquer foto. */
.chip-da-foto {
  min-height: 34px; padding: 6px 12px;
  font-size: 13px; font-weight: 700;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borda); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.chip-da-foto.tirar { color: var(--perigo); }
.acoes-da-foto { left: 8px; bottom: 8px; gap: 6px; flex-wrap: wrap; }

/* A ficha de uma relacao: cada momento uma linha, com o apagar de um toque. */
/* `ficha-da-relacao`, e nao `ficha`: `.ficha` ja e a fileira de etiquetas do
   repost (`display: flex`), e a pagina inteira herdava -- rotulo, titulo e
   secoes lado a lado. Colisao de nome de classe se ve so na tela. */
.ficha-da-relacao > h1 { margin: 8px 0 4px; }
.ficha-da-relacao .bloco { padding: 16px 0; border-bottom: 1px solid var(--borda); }
.ficha-da-relacao input[type="text"], .ficha-da-relacao select {
  width: 100%; min-height: var(--toque);
}
.linha-de-campo { display: flex; gap: 8px; align-items: center; }
.linha-de-campo input, .linha-de-campo select { flex: 1; }
.momentos-da-ficha { list-style: none; padding: 0; margin: 0 0 8px; }
.momentos-da-ficha li {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--borda);
}
.momentos-da-ficha li:last-child { border-bottom: none; }
.momentos-da-ficha .o-momento { flex: 1; min-width: 0; }
.momentos-da-ficha .quando { font-size: 12px; font-weight: 700; color: var(--tinta-fraca); }
.momentos-da-ficha .sobre { display: block; font-weight: 700; margin: 2px 0; }
.momentos-da-ficha .trecho { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta); }
.momentos-da-ficha form { margin: 0; }
.apagar-linha {
  min-height: 34px; padding: 6px 12px; font-size: 13px; font-weight: 700;
  color: var(--perigo); background: var(--papel);
  border: 1px solid var(--borda); border-radius: 999px; cursor: pointer;
}
.escolha { display: flex; gap: 8px; flex-wrap: wrap; }
/* A opcao nao escolhida tambem tem de parecer botao: sem contorno, `discreta`
   lia como texto solto ao lado da escolhida. */
.escolha button.discreta { border: 1px solid var(--borda); border-radius: 999px; }
.aviso-juntar {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.aviso-juntar p { margin: 0; }

/* O submenu de Revisar: um atalho por grupo, com a contagem. Fica no topo ao
   rolar, porque o ponto e pular de um grupo para outro sem voltar la em cima. */
.submenu {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 8px 0;
  background: var(--chao);
}
.submenu a {
  padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--tinta); background: var(--papel); border: 1px solid var(--borda);
}
.submenu .quantas { color: var(--tinta-fraca); margin-left: 4px; }
.lista-de-fichas { list-style: none; padding: 0; margin: 0 0 10px; }
.lista-de-fichas li { padding: 8px 0; border-bottom: 1px solid var(--borda); }
.lista-de-fichas .modos { display: block; margin-top: 2px; }
.recado-dele { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--tinta); }

.texto-original {
  margin: 0; padding: 12px 14px;
  font-size: 14px; line-height: 1.5; color: var(--tinta);
}
.so-referencia {
  margin: 0; padding: 10px 14px;
  border-top: 1px dashed var(--borda);
  font-size: 12px; line-height: 1.45; color: var(--tinta-fraca);
}

.selo-repost {
  padding: 1px 7px; border-radius: 5px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--alerta); background: var(--alerta-fundo); border: 1px solid var(--alerta);
}
.embutido {
  margin: -4px 0 10px; font-size: 13px; color: var(--tinta-fraca);
}
.embutido a { color: var(--acento); text-decoration: none; }

/* --- Navegar pela fila sem voltar para a lista ----------------------------- */

/* Ler a fila item a item custava tres cliques por post: abrir, voltar, achar
   onde parou. A barra aparece em cima e embaixo porque a leitura termina
   embaixo -- e la que a vontade de ver o proximo aparece. */
.navegar-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 var(--respiro); padding: 6px;
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio);
}
article + .navegar-fila { margin: var(--respiro) 0 0; }

.passo-fila {
  display: inline-flex; align-items: center;
  min-height: var(--toque); padding: 0 14px;
  border-radius: 10px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--acento);
}
.passo-fila:hover { background: var(--acento-fraco); }
.passo-fila.vazio { color: var(--borda); pointer-events: none; }

.posicao-fila {
  font-size: 12px; color: var(--tinta-fraca); text-decoration: none;
  text-align: center; padding: 0 4px;
}
.posicao-fila:hover { text-decoration: underline; }

/* Em que estado o item esta, dito no alto da propria tela. Sem isto, a tela de
   um post ja agendado e identica a de um por julgar -- e o veredito continuava
   sendo oferecido como se nada tivesse acontecido. */
.marca-fila {
  margin: 0 0 12px; padding: 6px 10px;
  border-radius: 8px;
  background: var(--acento-fraco); color: var(--tinta);
  font-size: 13px;
}
.marca-fila.publicado { background: var(--alerta-fundo); }
.marca-fila a { color: var(--acento); }

/* --- O card inteiro abre o post ------------------------------------------- */

/* Antes so o gancho era clicavel: um alvo de uma linha, num painel desenhado
   para o polegar. Errar o toque nao fazia nada. */

/* A posicao na fila, no card: e a mesma contagem que a tela do post mostra. */
.ordem {
  margin-right: 6px; padding: 1px 6px; border-radius: 5px;
  background: var(--fundo); border: 1px solid var(--borda);
  font-size: 12px; font-weight: 700; color: var(--tinta-fraca);
}

/* Montagem do repost na tela inteira: a mesma do card, sem o corte do texto. */
.detalhe .montagem { margin: 0 0 10px; }
.detalhe .texto-original { white-space: pre-wrap; }

/* --- Comentar no post de outra pessoa -------------------------------------- */

/* Tres candidatos, separados de verdade: a escolha e o produto desta tela, e
   tres blocos encostados viram um paredao de texto onde nada se escolhe. */
.candidato {
  margin: 0 0 14px; padding: 12px;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px;
}
.candidato:last-of-type { margin-bottom: 0; }
.candidato .angulo { margin: 0 0 8px; font-size: 13px; }
.candidato .angulo strong { text-transform: lowercase; }
.candidato textarea { min-height: 110px; }
.candidato .contagem { margin: 6px 0 8px; }
.conta-daqui.estourou { color: var(--perigo); font-weight: 700; }

/* A pessoa declarada em perfil/pessoas.yaml. O selo existe para a diferenca
   ficar visivel: comentar numa pessoa-alvo e trabalho de relacao, comentar em
   quem passou pelo feed e passatempo. */
.eixo.alvo {
  color: var(--acento); background: var(--acento-fraco);
  border: 1px solid var(--acento); border-radius: 5px;
  padding: 1px 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
}
.card.engajar { border-left: 3px solid var(--acento); }

/* --- Cadastro de pessoas-alvo ---------------------------------------------- */

/* A lista cresce toda semana, entao a linha precisa caber num toque e o `porque`
   precisa ser editavel onde esta -- e o campo que decide o angulo do comentario,
   e o que mais muda conforme a relacao anda. */
/* **Tres linhas, e nao um `flex-wrap` unico.** A versao anterior punha nome,
   quatro objetivos, o campo do motivo e dois botoes na mesma linha com
   `flex-wrap`, e no celular isso quebrava onde desse -- foi o print que ele
   mandou em 19/09/2026. Cada coisa agora tem a sua linha, na ordem em que se
   le: quem e, o que eu quero dela, por que ela importa. */
.pessoas-alvo li.pessoa {
  display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start; gap: 10px;
  padding: 14px 0; border-bottom: 1px solid var(--borda);
}
.pessoas-alvo li.pessoa:last-child { border-bottom: 0; padding-bottom: 0; }

.cabeca-da-pessoa { display: flex; align-items: center; gap: 8px; }
.cabeca-da-pessoa .nome-pagina { flex: 1; min-width: 0; }

/* O `x` de remover, longe da acao que se repete. Antes era um botao "Remover"
   colado em "Salvar", com o mesmo peso -- errar o toque tirava a pessoa da
   lista, e so o `confirm` segurava. */
.cabeca-da-pessoa .tirar button {
  min-height: 32px; min-width: 32px; padding: 0;
  font-size: 18px; line-height: 1; color: var(--tinta-fraca);
}
.cabeca-da-pessoa .tirar button:hover { color: var(--perigo); }

/* Os quatro objetivos como um controle segmentado: eles dividem a largura, e o
   ativo se le como escolhido em vez de como mais um botao. */
.objetivos { display: flex; gap: 4px; flex-wrap: wrap; }
.objetivos .objetivo {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 12px;
  border: 1px solid var(--borda); border-radius: 18px;
  background: var(--fundo); color: var(--tinta-fraca);
  font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
  cursor: pointer;
}
.objetivos button.objetivo:hover { color: var(--tinta); border-color: var(--tinta-fraca); }
.objetivos .objetivo.ativo {
  background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); cursor: default;
}

.pessoas-alvo form.porque {
  display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
}
.pessoas-alvo form.porque textarea {
  flex: 1 1 220px; min-width: 0; min-height: 60px; padding: 8px 10px;
  border: 1px solid var(--borda); border-radius: 8px;
  background: var(--papel); color: var(--tinta);
  font: inherit; font-size: 13px; line-height: 1.45; resize: vertical;
}
.pessoas-alvo form.porque button { min-height: 38px; }

/* Fechado por padrao: a lista e o que ele olha todo dia, o cadastro e eventual. */
.cadastrar { margin-top: 12px; }
.cadastrar summary {
  cursor: pointer; padding: 10px 0;
  font-size: 14px; font-weight: 600; color: var(--tinta);
}
.cadastrar form { display: flex; flex-direction: column; gap: 4px; }
.cadastrar label {
  margin-top: 10px; font-size: 12px; font-weight: 600;
  color: var(--tinta-fraca);
}
.cadastrar textarea { min-height: 64px; }

.cadastrar label.caixa {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 0; font-size: 14px; font-weight: 400; color: var(--tinta);
}
.cadastrar label.caixa input { width: auto; min-height: 0; }
.cadastrar .acoes { margin-top: 14px; }

/* --- Editar a pauta -------------------------------------------------------- */

.pauta-editavel { margin: var(--respiro) 0 0; }
.pauta-editavel input[type="number"] { max-width: 120px; }
.pauta-editavel fieldset.dias {
  margin: 12px 0; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: 10px;
}
.pauta-editavel fieldset.dias legend { padding: 0 6px; font-size: 13px; color: var(--tinta-fraca); }
/* Os sete dias numa linha so, e cada um com alvo de toque decente. */
.pauta-editavel fieldset.dias {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.pauta-editavel fieldset.dias label.caixa { margin: 0; font-size: 14px; }

/* --- Editar a estrategia --------------------------------------------------- */

/* A tela mais densa do painel: tres textos longos e quatro numeros que so fecham
   juntos. Os campos ganham tratamento proprio porque aqui se LE antes de
   escrever -- o que esta na caixa e a tese, nao um valor. */
.estrategia-editavel { margin: var(--respiro) 0 0; }
.estrategia-editavel label {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}
.estrategia-editavel .nota { margin: 6px 0 16px; }

/* Nome a esquerda, numero a direita: e assim que se confere se os quatro somam
   100 -- lendo a coluna, e nao cacando o campo. */
.estrategia-editavel label.linha-peso {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 8px 0; border-bottom: 1px solid var(--borda);
  font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--tinta);
}
.estrategia-editavel label.linha-peso:last-of-type { border-bottom: 0; }
.estrategia-editavel label.linha-peso input {
  max-width: 92px; min-height: var(--toque); padding: 6px 10px;
  font: inherit; text-align: right;
  color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px;
}

.marca-do-posicionamento { margin-bottom: var(--respiro); }

/* Listas de frase da estrategia: o que ele nunca faz, o jeito dele, as metas.
   Uma linha por frase, com o "tirar" na ponta -- a frase e o que se le, e o
   botao nao pode disputar com ela. */
/* A caixa vem da regra de cartao la em cima; aqui so o espacamento proprio. */
.lista-de-frases { margin-bottom: 20px; }
.lista-de-frases ul { list-style: none; margin: 10px 0 0; padding: 0; }
.lista-de-frases li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--borda);
}
.lista-de-frases li:last-child { border-bottom: 0; }
.lista-de-frases .frase { flex: 1; font-size: 14px; line-height: 1.5; }
.lista-de-frases li form { margin: 0; }
.lista-de-frases li button { min-height: 30px; padding: 0 10px; font-size: 12px; }

.lista-de-frases form.acrescentar { display: flex; gap: 8px; margin-top: 12px; }
.lista-de-frases form.acrescentar input {
  flex: 1; min-width: 0; padding: 10px 12px;
  font: inherit; font-size: 16px;
  color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 10px;
  min-height: var(--toque);
}
.lista-de-frases .nota { margin: 10px 0 0; }

/* --- Ajustes: radar, persuasao e formatos ---------------------------------- */

/* Um eixo por cartao: os numeros dele so fazem sentido juntos -- buscas sem
   aberturas e cadencia nao dizem nada, e foi essa leitura separada que produziu
   os dois dias de fila vazia em 12 e 13/09. */
.eixo-editavel {
  padding: 12px 0; border-bottom: 1px solid var(--borda);
}
.eixo-editavel:last-of-type { border-bottom: 0; }
.eixo-editavel select {
  padding: 8px 10px; font: inherit; min-height: var(--toque);
  color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px;
}
.eixo-editavel .numeros-do-eixo { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.eixo-editavel .numeros-do-eixo label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--tinta-fraca);
}
.eixo-editavel .numeros-do-eixo input {
  max-width: 110px; min-height: var(--toque); padding: 6px 10px;
  font: inherit; text-align: right;
  color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px;
}
.eixo-editavel fieldset.pilares-do-eixo {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin: 12px 0; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: 10px;
}
.eixo-editavel fieldset.pilares-do-eixo legend {
  padding: 0 6px; font-size: 13px; color: var(--tinta-fraca);
}
.eixo-editavel fieldset.pilares-do-eixo label.caixa { margin: 0; font-size: 14px; }

/* Numero a direita, rotulo a esquerda: le-se a coluna, nao se caca o campo. */
.lista-de-frases form.numeros label.linha-peso {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 8px 0; border-bottom: 1px solid var(--borda);
  font-size: 14px; font-weight: 600; color: var(--tinta);
}
.lista-de-frases form.numeros label.linha-peso:last-of-type { border-bottom: 0; }
.lista-de-frases form.numeros input {
  max-width: 180px; min-height: var(--toque); padding: 6px 10px;
  font: inherit; text-align: right;
  color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px;
}

/* Gatilho: nome, forma e o botao de tirar na mesma linha; o motivo abre embaixo
   porque e texto de prompt, e nao legenda. */
.lista-de-frases li.gatilho { flex-wrap: wrap; }
.lista-de-frases li.gatilho .frase em {
  display: block; margin-top: 2px;
  font-size: 13px; font-style: normal; color: var(--tinta-fraca);
}
.lista-de-frases li.gatilho details { flex: 1 1 100%; margin-top: 4px; }
.lista-de-frases li.gatilho summary { font-size: 13px; padding: 4px 0; }
.lista-de-frases .eixo-editavel .linha-topo form { margin: 0; }
.lista-de-frases .eixo-editavel .linha-topo button { min-height: 30px; padding: 0 10px; font-size: 12px; }

/* A previa do cartao na tela de revisao. Quadrada e limitada pela largura da
   coluna: ver o cartao inteiro importa mais que ve-lo grande. */
.cartao-previa {
  display: block; width: 100%; height: auto; max-width: 560px;
  margin: 10px 0 0;
  border: 1px solid var(--borda); border-radius: 10px;
}

/* O rotulo do pilar edita na propria linha do peso: os dois descrevem o mesmo
   pilar, e separa-los em dois formularios faria parecer duas coisas. */
.estrategia-editavel label.linha-peso .rotulo-do-pilar {
  flex: 1; min-width: 0; max-width: none; text-align: left;
  padding: 6px 10px; font: inherit; font-weight: 600;
  color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px;
}

/* --- O card que so aponta para onde agir ------------------------------------
   Comentario no seu post e mensagem direta nao tem texto escrito por nos: nao
   sabemos o que a pessoa disse, e a API que daria isso e a fechada. O card e um
   ponteiro -- e o botao precisa parecer botao, porque e a unica acao dele. */
.card.ir .fonte { margin: 14px 0 0; }
.como-botao {
  display: inline-flex; align-items: center;
  min-height: var(--toque); padding: 0 18px;
  font-weight: 600; text-decoration: none;
  border: 1px solid var(--cta); border-radius: 10px;
  background: var(--cta); color: var(--cta-tinta);
}
.como-botao:hover { text-decoration: none; background: var(--cta-hover); border-color: var(--cta-hover); }

/* --- O retrato da base ------------------------------------------------------
   Tabela e nao grafico: o numero que importa e a DIFERENCA entre o peso
   declarado e a fatia publicada, e comparar duas barras de olho e pior que ler
   dois numeros.

   A rolagem horizontal fica na tabela, e nunca no corpo da pagina: cinco
   colunas nao cabem em 400px, e uma pagina que anda de lado no celular parece
   quebrada. */
.retrato { margin: 16px 0 24px; }
.rolagem { overflow-x: auto; }
.pilares { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.pilares th, .pilares td {
  padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.pilares thead th { font-size: 0.8rem; color: var(--tinta-fraca); font-weight: 600; }
.pilares tbody th { text-align: left; font-weight: 600; }
.pilares .fora { color: var(--alerta); font-weight: 700; }

/* --- O porque, sem competir com o controle -------------------------------
   Em /ajustes havia DEZ paragrafos cinzas de 13px, todos iguais, todos depois
   do formulario. Esse texto e bom -- e o motivo de cada decisao, e e o que
   salva quem esquece por que o numero e aquele. Mas ele nao precisa estar
   aberto todos os dias.

   Chama-se `.razao` e nao `.porque` porque `form.porque` ja existe: e o campo
   editavel do motivo de cada pessoa-alvo, em _colar_link.html. Com o mesmo
   nome, aquele input ganharia a borda e o respiro deste bloco.

   `<details>` e nao um tooltip: o texto continua no DOM, continua buscavel na
   pagina, continua impresso, e abre sem tirar ninguem da tela. */
.razao {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda);
}
.razao > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
  /* 44px porque a linha e um alvo de toque como qualquer outro. */
  min-height: var(--toque); margin: -12px 0;
  font-size: 13px; color: var(--tinta-fraca);
}
.razao > summary::-webkit-details-marker { display: none; }
.razao > summary::before {
  content: "\203A";
  display: inline-block; width: 10px;
  font-size: 15px; line-height: 1;
  transition: transform 0.15s ease;
}
.razao[open] > summary::before { transform: rotate(90deg); }
.razao[open] > summary { margin-bottom: 0; }
.razao .nota { margin: 10px 0 0; }

/* O numero que decide, no titulo do bloco em vez de enterrado no paragrafo.
   Custo em linha 3 de um texto cinza e custo que ninguem le antes de mexer na
   alavanca que o multiplica. */
.destaque-do-bloco {
  flex: 0 0 auto;
  font-size: 12px; font-weight: 700; letter-spacing: 0;
  text-transform: none;
  color: var(--alerta); background: var(--alerta-fundo);
  padding: 3px 8px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

/* Virar a mao: a acao secundaria do card, separada do bloco de acoes primarias.
   O objetivo declarado escolhe o padrao da esteira; isto e como ele discorda
   dela sem achar o link de novo e colar na outra aba. */
/* Virar a mao e uma acao de verdade, e nao um link discreto no rodape do card:
   e como ele discorda do padrao que a esteira escolheu. Botao com contorno --
   secundario em relacao a acao principal, primario em relacao a "descartar". */
.virar { margin-top: 12px; }
.virar button, button.virar-a-mao {
  min-height: var(--toque); padding: 0 16px;
  font-weight: 600; font-size: 14px;
  color: var(--acento); background: var(--papel);
  border: 1px solid var(--acento); border-radius: 10px;
}
.virar button:hover, button.virar-a-mao:hover { background: var(--acento-fraco); }

/* O sino da faixa: aceso so quando ha inscricao viva neste aparelho.
   Escondido por padrao -- um sino apagado em toda tela seria convite
   permanente, e convite que nao se aceita vira ruido que se aprende a nao ver. */
/* Menor e na ponta: ele nao e navegacao, e um estado -- e o estado e a
   PRESENCA. Ligado ele aparece, desligado ele some; foi o que ele pediu, e esta
   certo: um icone que aparece e um estado, um icone que muda de tom e um
   enigma.

   O icone e SVG e nao o emoji de sino porque o emoji e um glifo colorido --
   ignora `color` e fica dourado independentemente do que a folha disser. */
.pe-da-barra > a.sino { color: var(--sr-lime); padding: 0 6px; min-height: 36px; min-width: 0; }
.pe-da-barra > a.sino:hover { color: var(--faixa-tinta); }

/* --- A tarja de "pensando" --------------------------------------------------
   Acao que chama o modelo leva dezenas de segundos e o painel nao usa HTMX
   nelas. No celular ele clicava e nada mudava. Fixa no topo: dentro do card ela
   ficaria fora da area visivel, porque o botao costuma estar embaixo. */
.pensando {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px var(--respiro);
  background: var(--ia); color: var(--ia-tinta);
  font-size: 14px; font-weight: 600;
}
.pensando .demora { font-weight: 400; opacity: 0.85; font-size: 13px; }

.girando {
  width: 15px; height: 15px; flex: 0 0 auto;
  border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Com movimento reduzido, a barra pulsa em vez de girar: o aviso continua, a
   animacao que incomoda nao. */
@media (prefers-reduced-motion: reduce) {
  .girando { animation: none; border-top-color: currentColor; }
  .pensando { animation: none; }
}

/* --- Ajustes: o indice e o respiro das secoes -------------------------------
   A pagina tem seis grupos e mais de mil pixels; sem indice, achar "persuasao"
   era rolar ate encontrar. */
.indice-ajustes {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 22px;
}
.indice-ajustes a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px;
  border-radius: 18px; text-decoration: none;
  background: var(--papel); color: var(--tinta-fraca);
  font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 23, 32, 0.05);
}
.indice-ajustes a:hover { color: var(--tinta); }

/* O alvo da ancora nao pode nascer colado na faixa fixa do topo. */
.grupo[id] { scroll-margin-top: 90px; }

/* **Os numeros do eixo lado a lado, e nao empilhados.** No print dele cada
   campo ocupava uma caixa estreita com meia tela vazia a direita. Eles sao tres
   numeros curtos e se leem juntos: buscas, aberturas, janela. */
.eixo-editavel .numeros-do-eixo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; margin: 12px 0;
}
.eixo-editavel .numeros-do-eixo label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--tinta-fraca); font-weight: 600;
}
.eixo-editavel .numeros-do-eixo input { width: 100%; }

/* A linha de cima do eixo: ativo, cadencia e o nome, numa so. */
.eixo-editavel .linha-do-eixo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.eixo-editavel select { min-height: 38px; }

/* Os pilares como etiquetas que se marcam, e nao uma lista vertical solta. */
.pilares-do-eixo {
  border: 1px solid var(--borda); border-radius: 10px;
  padding: 10px 12px; margin: 12px 0 0;
}
.pilares-do-eixo legend {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--tinta-fraca); padding: 0 4px;
}
.pilares-do-eixo label.caixa {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 12px 0 0; font-size: 13px;
}

/* --- De onde vem o que sai --------------------------------------------------
   Substitui `teto_repost_pct`, que saiu em 20/09/2026 por nunca ter decidido
   nada. O mix certo depende do momento -- o que ajuda e ver o que saiu ao lado
   do que esta marcado, e nao uma regra fixa. */

.por-origem { border-collapse: collapse; font-size: 12px; width: 100%; }
.por-origem caption { text-align: left; margin-bottom: 8px; }
.por-origem th, .por-origem td {
  padding: 5px 6px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--borda);
  font-variant-numeric: tabular-nums;
}
.por-origem tbody th {
  text-align: left; font-weight: 600; color: var(--tinta);
  position: sticky; left: 0; background: var(--papel);
  padding-right: 12px;
}
.por-origem thead th { font-size: 12px; color: var(--tinta-fraca); font-weight: 600; }
/* O passado e o futuro se distinguem pelo fundo, e nao por uma borda no meio:
   a tabela rola, e uma borda sai de vista junto com a coluna. */
.por-origem .passada { background: var(--fundo); }
.por-origem td.futura { color: var(--acento); font-weight: 700; }
.por-origem td.vazia { color: var(--borda); }

/* Aviso solto numa pagina -- ate 20/09/2026 so existia dentro de `.revisao`, e
   o mesmo `<p class="aviso">" em outra tela saia como texto corrido. */
p.aviso {
  margin: 12px 0; padding: 10px 12px;
  font-size: 14px; color: var(--alerta);
  background: var(--alerta-fundo); border: 1px solid var(--alerta);
  border-radius: 10px;
}
/* A confirmacao usa tinta cheia sobre o acento fraco, e nao o acento sobre ele:
   acento sobre acento-fraco da 4,02:1, abaixo do minimo AA. */
p.aviso.bom {
  color: var(--tinta); background: var(--acento-fraco); border-color: var(--acento);
}

.remarcar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.remarcar .nota { margin: 0; }

/* Semana que desobedece a pauta. Sublinhado E cor: cor sozinha nao chega a quem
   nao distingue vermelho, e aqui o dado e um numero de duas casas. */

/* A saida de emergencia, recolhida. Os tres botoes de tirar da fila ocupavam um
   bloco inteiro com titulo e lista de definicoes, competindo com a acao que ele
   faz todo dia -- e o uso deles e raro por natureza. */
.tirar-da-fila { padding: 12px var(--respiro); }
.tirar-da-fila > summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--tinta-fraca);
  list-style-position: outside;
}
.tirar-da-fila[open] > summary { margin-bottom: 10px; color: var(--tinta); }

/* --- A paleta do cartao ------------------------------------------------------
   Os controles e a previa lado a lado: escolher cor sem ver o resultado e
   escolher no escuro. No celular a previa desce, porque 1200px reduzidos a
   metade da largura de um telefone nao mostram nada. */
.cartao-e-cores { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
/* Cores e logo empilhados a ESQUERDA, previa a direita. O logo tinha entrado no
   meio dos dois e empurrava a previa para baixo -- ele pediu de volta. */
.coluna-de-ajuste { flex: 1 1 300px; min-width: 260px; }
.cores-do-cartao { width: 100%; }

.uma-cor { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.uma-cor label { flex: 1; font-size: 14px; margin: 0; }
.uma-cor .menos { display: block; font-size: 12px; color: var(--tinta-fraca); }
.uma-cor input[type="color"] {
  width: 56px; height: 36px; padding: 2px; border: 1px solid var(--borda);
  border-radius: 8px; background: var(--papel); cursor: pointer;
}
.uma-cor.larga { display: block; }
.uma-cor.larga input { width: 100%; margin-top: 6px; }

.previa-do-cartao { flex: 0 0 300px; }
/* 1200x1200 reduzido a 300: o cartao inteiro, na proporcao em que ele sai. */
.previa-do-cartao iframe {
  width: 1200px; height: 1200px; border: 0; border-radius: var(--raio);
  transform: scale(0.25); transform-origin: top left;
  display: block; pointer-events: none;
}
.previa-do-cartao {
  /* A moldura ocupa o tamanho REDUZIDO; sem isto o iframe de 1200px empurraria
     a pagina inteira para o lado. */
  height: 300px; overflow: hidden;
}
.previa-do-cartao .nota { margin-top: 8px; }
.logo-do-cartao { border-top: 1px solid var(--borda); padding-top: 14px; }
.logo-do-cartao label { font-size: 14px; }
.logo-do-cartao input[type="file"] { width: 100%; margin: 8px 0 12px; font-size: 13px; }
/* A foto que assina o cartao (10/10/2026): o retrato atual, no circulo em que ele sai. */
/* A ilustracao da peca (10/10/2026): a imagem inteira, do tamanho da previa do cartao. */
.ilustracao-previa { display: block; width: 100%; max-width: 560px; height: auto; border-radius: var(--raio); }
/* O banco de fotos (10/10/2026): a foto e a descricao que decide a escolha. */
.banco-de-fotos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.banco-de-fotos img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--raio); }
.banco-de-fotos textarea { width: 100%; font-size: 14px; }
.foto-de-quem-assina { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-top: 8px; }

.template-do-post { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.template-do-post label { margin: 0; font-size: 13px; color: var(--tinta-fraca); }
.template-do-post select {
  display: inline-block; width: auto; min-height: 36px; margin: 0;
  font-size: 14px; padding: 6px 36px 6px 10px;
}
.manual-da-marca { border-top: 1px solid var(--borda); margin-top: 16px; padding-top: 14px; }
.manual-da-marca input[type="file"], .manual-da-marca input[type="text"] { width: 100%; margin: 6px 0 12px; }

/* As imagens tiradas do manual. Fundo xadrez claro porque logo costuma ter
   transparencia -- sobre o escuro do painel, uma logo branca sumiria. */

/* `.trabalhando` normalmente so aparece durante um pedido do HTMX. Aqui o
   trabalho corre ATRAS da tela -- nao ha pedido em voo para marcar --, entao
   este modificador o mostra por conta propria. */
.trabalhando.visivel { display: flex; }

/* A lista de desenhos do cartao. Cada linha e um desenho inteiro: nome, se e o
   padrao, se tem logo, de onde veio, e o que da para fazer com ele. */
.lista-de-desenhos { margin-bottom: 18px; }
.um-desenho {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--borda);
}
.um-desenho .nome-do-desenho { font-size: 15px; font-weight: 600; }
.um-desenho.e-o-aberto { padding-left: 10px; border-left: 3px solid var(--acento); }
.um-desenho .menos { margin-left: auto; font-size: 12px; }

.salvar-como { border-top: 1px solid var(--borda); margin-top: 16px; padding-top: 14px; }
.salvar-como label { font-size: 14px; }
.salvar-como input { width: 100%; margin: 6px 0 10px; }

/* O colar link recolhido, abaixo do titulo da aba. O resumo e um botao de
   verdade -- ele e a porta da acao, e nao uma nota de rodape. */
details.colar.recolhido {
  margin: 0 0 16px; padding: 0 var(--respiro);
  background: var(--papel); border-radius: var(--raio);
  box-shadow: 0 0 0 1px var(--borda);
}
details.colar.recolhido > summary {
  cursor: pointer; list-style: none;
  min-height: var(--toque); display: flex; align-items: center;
  font-weight: 700; color: var(--tinta);
}
details.colar.recolhido > summary::-webkit-details-marker { display: none; }
details.colar.recolhido[open] { padding-bottom: var(--respiro); }

/* Campo de TEXTO em formulario de numeros: rotulo em cima, largura cheia. */
label.campo-largo { display: block; margin: 12px 0 4px; font-weight: 700; font-size: 14px; }
input.campo-largo, .lista-de-frases form.numeros input.campo-largo {
  width: 100%; max-width: none; min-height: var(--toque); text-align: left;
}

/* O que a triagem do Drive descartou sozinha: miniatura, motivo, e o botao de
   discordar. Uma linha por arquivo, como a ficha de uma relacao. */
.lista-de-descartes { list-style: none; margin: 10px 0 0; padding: 0; }
/* Grade, e nao fileira: no celular o botao ao lado espremia o nome do arquivo
   numa coluna de uma palavra por linha. O botao desce para baixo do motivo. */
.lista-de-descartes li {
  display: grid; grid-template-columns: 56px 1fr; gap: 6px 12px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--borda);
}
.lista-de-descartes img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none;
}
.lista-de-descartes .o-que { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lista-de-descartes .o-que strong { overflow-wrap: anywhere; }
.lista-de-descartes form { margin: 0; grid-column: 2; }

/* "Nao agora...": um botao que abre as tres saidas, cada uma com o que ela faz.
   Tres botoes soltos no card competiriam com a acao principal; recolhidos, a
   decisao continua a um toque e o card continua dizendo o que e o principal. */
.nao-agora { display: inline-block; position: relative; }
/* Na mesma linha dos outros botoes (30/09/2026): ele e o ultimo da fileira de acoes, e
   aberto ocupa a linha inteira, para as tres saidas terem onde caber. */
.acoes > .nao-agora[open] { flex-basis: 100%; }
.nao-agora > summary {
  list-style: none; cursor: pointer;
  min-height: var(--toque); padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--papel); color: var(--tinta);
  font-weight: 600; display: inline-flex; align-items: center;
}
.nao-agora > summary::-webkit-details-marker { display: none; }
.nao-agora[open] > summary { border-color: var(--tinta); }
.opcoes-de-descarte {
  display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
  min-width: min(320px, 100%);
}
.opcoes-de-descarte form { margin: 0; }
.opcao-de-descarte {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--papel); color: var(--tinta);
  cursor: pointer;
}
.opcao-de-descarte span { font-size: 13px; font-weight: 400; color: var(--tinta-fraca); }

/* O recado do momento: a primeira pergunta do card, e nao um campo perdido
   embaixo da foto. Largura inteira -- no celular o textarea nascia do tamanho
   de um botao. */
.passo-do-recado { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.passo-do-recado textarea { min-height: 110px; line-height: 1.5; margin-bottom: 4px; }
/* Na gaveta nao ha miniatura: o texto ocupa a linha, e o botao desce. */
.lista-de-descartes.gaveta li { grid-template-columns: 1fr; }
.lista-de-descartes.gaveta form { grid-column: 1; }
.lista-de-descartes.gaveta .rotulo { align-self: flex-start; }

/* O uso da IA por trabalho: nome, quantas chamadas, e o valor alinhado a direita. */
.lista-de-uso { list-style: none; margin: 8px 0; padding: 0; }
.lista-de-uso li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--borda);
}
.lista-de-uso li span:first-child { flex: 1; }

/* O site publico (privacidade, termos, exclusao): texto de ler, e nao painel.
   Coluna estreita, entrelinha folgada, sem nada de navegacao do app. */
.pagina-publica { background: var(--fundo); }
.topo-publico { padding: 18px var(--respiro); background: var(--marca); }
.marca-publica { color: var(--faixa-tinta); font-weight: 800; font-size: 20px; }
.texto-publico { max-width: 720px; margin: 0 auto; padding: 24px var(--respiro) 40px; line-height: 1.6; }
.texto-publico h1 { margin: 0 0 4px; }
.texto-publico h2 { margin: 28px 0 8px; font-size: 18px; }
.texto-publico ul { padding-left: 20px; }
.data-publica { color: var(--tinta-fraca); margin: 0 0 16px; }
.pedido-publico { background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 4px 16px 12px; }
.rodape-publico { max-width: 720px; margin: 0 auto; padding: 16px var(--respiro) 32px; color: var(--tinta-fraca); font-size: 14px; }

.empresa-publica { margin: 10px 0 0; font-size: 13px; letter-spacing: 0.02em; }

/* Para onde vai (30/09/2026): um chip por rede, lado a lado. Marcado = aceso, no par de
   cor da etiqueta -- sem cor nova, que seria mais uma para o teste de contraste. O chip
   tem a altura de um toque: e o que se aperta no celular. */
.destinos { margin: 12px 0; }
.chips-de-rede { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip-rede {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--toque); padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--papel); color: var(--tinta);
  font-weight: 600; font-size: 15px;
}
label.chip-rede { cursor: pointer; }
.chip-rede input { margin: 0; accent-color: var(--acento); }
.chip-rede:has(input:checked), .chip-rede.acesa {
  background: var(--acento-fraco); border-color: var(--acento); color: var(--acento);
}
.nota-da-rede { font-size: 12px; font-weight: 500; color: inherit; }
.porques-da-rede { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.porques-da-rede li { font-size: 13px; color: var(--tinta-fraca); }
.porques-da-rede strong { color: var(--tinta); font-weight: 600; }

/* Em que rede a peca sai (30/09/2026): ao lado do rotulo, no par da etiqueta. */
.rede-da-peca { margin: 0; }
.levar-para-rede { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }

/* A caixa de marcar dentro de um formulario de texto (30/09/2026): o formulario estica
   todo campo a largura inteira, e a caixa virava uma linha sozinha com o texto embaixo. */
form label.caixa { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
form label.caixa input[type="checkbox"] { width: auto; min-height: 0; margin: 3px 0 0; flex: none; }

/* Esta tese nas redes (30/09/2026): no topo da pagina do post, os chips das redes -- e o
   acrescentar numa fileira so, com o botao no fim. */
.redes-da-tese { margin-bottom: 8px; }
/* O conteudo (11/10/2026): o objetivo em tres linhas, e uma fileira por rede. */
.objetivo-do-conteudo { border: 0; padding: 0; margin: 0 0 12px; }
.objetivo-do-conteudo legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
/* **A opcao (U1, 13/10/2026)**: uma linha por escolha, o radio alinhado ao texto, a escolhida com
   a borda cheia. Ate aqui o radio flutuava numa linha acima do rotulo (o story, o objetivo). */
.linha-objetivo {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px;
  margin: 6px 0; padding: 10px 12px; line-height: 1.45;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); cursor: pointer;
}
.linha-objetivo:has(input:checked) { border-color: var(--tinta); background: var(--papel); }
.linha-objetivo .nota { display: block; }
/* Dentro de um editor da Estrategia (o plano, 11/10/2026), a opcao e texto de ler, e nao o
   micro-rotulo em caixa alta dos campos. */
.estrategia-editavel label.linha-objetivo {
  margin: 8px 0; font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--tinta);
}
.estrategia-editavel label.linha-objetivo .nota { margin: 2px 0 0; }
.linha-objetivo input { grid-row: 1 / span 6; margin: 4px 0 0; }
/* O que voce permite (L1 do PLANO-PLANOS-CRIATIVOS, 03/11/2026; a prancha 6): os dois numeros no
   topo, um cartao por grupo (dois lado a lado a partir de 1024 px), o titulo do grupo acima do da
   escolha, as opcoes em chips e, embaixo, o que a MARCADA muda. A opcao acima do plano (ou que
   ainda nao existe) fica travada -- tracejada, sem cursor de toque, e NUNCA com opacidade (o
   contraste cairia), com o selo do plano; a escolha que ainda nao muda as pecas leva o selo
   "em breve", explicado uma vez so na nota do topo. */
.vida-tiles.vida-limites-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; margin: 0 0 10px; }
.vida-limites-aviso { margin: 0 0 4px; }
.vida-limites-grupos { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1024px) {
  .vida-limites-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vida-limites-grupo > .titulo-bloco {
  margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--borda);
  font-family: var(--fonte-titulo); font-size: 19px;
}
.vida-limite-linha { border: 0; padding: 12px 0 0; margin: 0; min-width: 0; }
.vida-limite-linha + .vida-limite-linha { border-top: 1px solid var(--borda); margin-top: 12px; }
.vida-limite-linha > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 8px;
  font-size: 14px; font-weight: 600; color: var(--tinta);
}
.vida-limite-linha > legend + * { clear: both; }
.vida-limite-linha > .nota { margin: 0; }
.vida-limite-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.estrategia-editavel label.vida-limite-opcao {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  min-height: 36px; padding: 4px 12px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--fundo); color: var(--tinta); cursor: pointer;
  font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.vida-limite-opcao input { margin: 0; accent-color: var(--tinta); }
.estrategia-editavel label.vida-limite-opcao:has(input:checked) {
  border-color: var(--tinta); background: var(--papel); font-weight: 600;
}
.estrategia-editavel label.vida-limite-opcao.vida-limite-travada {
  border-style: dashed; cursor: not-allowed; color: var(--tinta-fraca);
}
.vida-limite-explica { margin-top: 6px; }
.vida-limite-explica > small { display: none; font-size: 13px; line-height: 1.45; color: var(--tinta-fraca); }
.vida-limite-linha:has(.vida-limite-opcao:nth-child(1) input:checked) .vida-limite-explica > small:nth-child(1),
.vida-limite-linha:has(.vida-limite-opcao:nth-child(2) input:checked) .vida-limite-explica > small:nth-child(2),
.vida-limite-linha:has(.vida-limite-opcao:nth-child(3) input:checked) .vida-limite-explica > small:nth-child(3),
.vida-limite-linha:has(.vida-limite-opcao:nth-child(4) input:checked) .vida-limite-explica > small:nth-child(4) {
  display: block;
}
.vida-limite-plano, .vida-limite-ainda {
  display: inline-block; padding: 0 6px; border: 1px solid var(--borda);
  border-radius: 999px; font-size: var(--texto-micro); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--tinta-fraca); vertical-align: 1px;
}
.vida-limite-ainda { margin-left: 4px; }
.vida-limites-aviso > .vida-limite-ainda { margin: 0 4px 0 0; }
.peca-da-rede { margin-bottom: 10px; }
a.chip-rede { text-decoration: none; }
.acrescentar-redes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.acrescentar-redes .explica { margin: 0; }

/* O plano da semana (30/09/2026): a vaga pronta para aprovar e a que pede atencao; a
   reservada e a pulada recuam pelo contorno, e nao por opacidade (o contraste e conferido). */
.card.vaga.estado-reservada, .card.vaga.estado-pulada, .card.vaga.estado-vazia {
  box-shadow: none; border: 1px dashed var(--borda); background: transparent;
}

/* No Hoje novo (01/10/2026) a pauta de relacionamento vem logo depois de um card: sem
   respiro, os dois liam como um bloco so. */

/* Quanto o sistema decide sozinho (etapa 3, 01/10/2026): uma linha por rede, e a sugestao
   de subir o nivel embaixo dela. */
.lista-de-autonomia { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; }
.lista-de-autonomia li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sugestao-de-autonomia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex-basis: 100%; }
.sugestao-de-autonomia .explica { margin: 0; }

/* As tres redes (01/10/2026): cada uma com a sua cor, em todo lugar que diz uma rede. A
   classe `rede-<canal>` so declara as cores; quem as usa e o componente. O ponto do
   Instagram e o degrade da marca -- e enfeite, e nao texto, entao o contraste nao o mede.
   `marca_da_rede(canal)` e o dono do nome com o ponto. */
.rede-linkedin {
  --cor-rede: var(--rede-linkedin); --fundo-rede: var(--rede-linkedin-fundo);
  --ponto-rede: var(--rede-linkedin);
}
.rede-threads {
  --cor-rede: var(--rede-threads); --fundo-rede: var(--rede-threads-fundo);
  --ponto-rede: var(--rede-threads);
}
.rede-instagram {
  --cor-rede: var(--rede-instagram); --fundo-rede: var(--rede-instagram-fundo);
  --ponto-rede: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7);
}
.marca-rede { color: var(--cor-rede, inherit); font-weight: 700; white-space: nowrap; }
.marca-rede::before, .chip-rede[class*="rede-"]::before {
  content: ""; display: inline-block; flex: none;
  width: 0.62em; height: 0.62em; border-radius: 50%;
  background: var(--ponto-rede); margin-right: 0.38em; vertical-align: 0.02em;
}
.chip-rede[class*="rede-"]::before { margin-right: -2px; }
.etiqueta.marca-rede { background: var(--fundo-rede); color: var(--cor-rede); }
.rotulo .marca-rede { font-size: 13px; }
.chip-rede[class*="rede-"]:has(input:checked), .chip-rede[class*="rede-"].acesa {
  background: var(--fundo-rede); border-color: var(--cor-rede); color: var(--cor-rede);
}
/* Todo card que diz a rede -- a vaga, a peca, o retrato -- leva a faixa dela na borda
   esquerda: a cor diz de quem e o card antes de o olho ler o rotulo. */
.card[class*="rede-"] { position: relative; padding-left: calc(var(--respiro) + 6px); }
.card[class*="rede-"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--ponto-rede); border-radius: var(--raio) 0 0 var(--raio);
}

/* O link da materia do radar (04/10/2026): o primeiro gesto de quem vai dar a leitura. */
.link-da-materia { margin: 4px 0 8px; font-size: 14px; }
.link-da-materia a { font-weight: 650; }
.link-da-materia .nota { margin-left: 4px; }

/* Conteudo de demonstracao (01/10/2026): a etiqueta que diz que aquilo nao e de verdade. */
.etiqueta.demonstracao { background: var(--alerta-fundo); color: var(--alerta); }
.etiquetas-da-vaga { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 6px; }
.etiquetas-da-vaga .etiqueta { margin: 0; }

.porque-da-vaga { margin-top: 4px; }

/* As opcoes de imagem da capa (01/10/2026): lado a lado, a que esta na capa contornada no
   acento. A miniatura e 4:5, como a capa. */
.opcoes-de-capa { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 8px 0 12px; }
.opcao-de-capa { margin: 0; display: grid; gap: 6px; align-content: start; }
.opcao-de-capa img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; border: 2px solid transparent; }
.opcao-de-capa.na-capa img { border-color: var(--acento); }
.opcao-de-capa figcaption { margin: 0; }
.opcao-de-capa .etiqueta { justify-self: start; margin: 0; }

/* O Reel (01/10/2026): o video 9:16 na pagina da peca, do tamanho de um celular. */
.video-do-reel { display: block; width: 100%; max-width: 270px; aspect-ratio: 9 / 16; border-radius: 12px; background: var(--video-fundo); margin: 8px 0; }
.video-do-feed { max-width: 320px; aspect-ratio: 4 / 5; }
.levar-o-video { margin-top: 14px; }
.escolha-de-formato button[aria-pressed="true"] { cursor: default; }

/* As trilhas do Reel (02/10/2026): uma por linha, com o tocador e as acoes. */
.lista-de-trilhas { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 14px; }
.lista-de-trilhas li { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.lista-de-trilhas audio { width: 100%; max-width: 420px; }
.lista-de-trilhas .nota { margin: 0; }
.campo-curto { width: 5.5em; }
.escolha-da-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; }
.escolha-da-trilha .etiqueta-bloco { margin: 0; }

/* A peca inteira na vaga, para ler antes de aprovar (02/10/2026): recolhida mostra as
   primeiras linhas e o convite; aberta, o texto com os paragrafos e o que sai junto. */
.peca-na-vaga { margin: 4px 0 8px; }
.peca-na-vaga > summary { cursor: pointer; list-style: none; display: grid; gap: 4px; }
.peca-na-vaga > summary::-webkit-details-marker { display: none; }
.peca-na-vaga .ler-inteira, .peca-na-vaga .recolher { font-size: 14px; font-weight: 600; color: var(--acento); }
.peca-na-vaga .ler-inteira::after { content: " \25BE"; }
.peca-na-vaga .recolher::after { content: " \25B4"; }
.peca-na-vaga .recolher, .peca-na-vaga[open] .ler-inteira { display: none; }
.peca-na-vaga[open] .recolher { display: inline; }
.peca-na-vaga[open] > summary .linha-pronta { display: none; }
.texto-inteiro { white-space: pre-line; font-size: 15px; line-height: 1.55; margin: 0 0 10px; }
.fotos-na-vaga { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 4px 0 8px; }
.fotos-na-vaga img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 8px; }
.cartao-na-vaga { width: 100%; max-width: 320px; border-radius: 10px; display: block; margin: 4px 0 8px; }
.enquete-na-vaga { margin: 4px 0 8px; padding-left: 20px; }

/* O post do outro, embutido no repost: recua pela borda e pelo tamanho, e nao pela opacidade. */
.texto-embutido { padding-left: 10px; border-left: 2px solid var(--borda); color: var(--tinta-fraca); font-size: 14px; }
.peca-na-vaga[open] > summary .explica { display: none; }
/* "Ja saiu no Threads": o rotulo separa a fila do que saiu, e nao cola no card de cima. */
.etapa > h3.etiqueta-bloco { margin-top: 18px; }

/* A leitura dele antes de o plano escrever (etapa A, 03/10/2026). */
.pede-leitura { display: grid; gap: 6px; }
.pede-leitura .linha-pronta { margin: 0; }
.pede-leitura .explica { margin: 0; }
.form-da-leitura .acoes { margin-top: 6px; }
.etiqueta.sem-leitura { background: var(--alerta-fundo); color: var(--alerta); }
.reescrever-com-leitura { margin: 4px 0 8px; }
.numeros-da-voz { margin: 6px 0; padding-left: 20px; }

/* O prazo da peca (etapa B, 03/10/2026). Perto do fim, a cor do alerta -- e o peso, nao a opacidade. */
.prazo-da-peca { margin: 2px 0 6px; }
.explica.prazo-da-peca.perto, .card .explica.prazo-da-peca.perto { color: var(--alerta); font-weight: 600; }

/* O placar da estrategia (etapa D, 03/10/2026): barras com o numero ao lado; o alvo do pilar
   e um traco sobre a barra. */
.placar .barras { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 6px; }
.placar .barras li { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: 8px; align-items: center; }
.placar .barra { position: relative; height: 10px; border-radius: 5px; background: var(--fundo); border: 1px solid var(--borda); overflow: visible; }
.placar .barra > span { display: block; height: 100%; border-radius: 5px; background: var(--acento); }
.placar .barra[class*="rede-"] > span { background: var(--ponto-rede); }

.placar .numero-da-barra { font-size: 13px; white-space: nowrap; }
.placar .medidas { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.placar .medidas li { display: grid; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--fundo); }


/* --- A reorganizacao de 04/10/2026: Hoje, Agenda, Resultados e o menu ------------------------ */

/* O menu da Conta (era o da engrenagem): o que se gerencia e o que se arquiva, fora das telas
   do dia. A forma do botao e da casca (`.atalhos summary`); aqui, o que o faz ser um menu. */
.menu-mais { position: relative; }
.menu-mais > summary { list-style: none; cursor: pointer; }
.menu-mais > summary::-webkit-details-marker { display: none; }
.menu-mais[open] > summary { color: var(--faixa-tinta); }
.lista-do-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 260px; display: grid; padding: 6px;
  background: var(--papel); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--borda);
}
.lista-do-menu a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: var(--tinta); text-decoration: none; font-size: 15px; font-weight: 500;
}
.lista-do-menu a:hover { background: var(--acento-fraco); }

/* "Sair" (E6, 12/10/2026): um formulario (o POST e o que o CSRF protege) com a cara de item do
   menu da casca. No Perfil da Conta e um botao comum. */
.lista-do-menu .sair { margin: 0; }
.lista-do-menu .sair button {
  display: block; width: 100%; min-height: 0; margin: 0; padding: 10px 12px; border: 0;
  border-radius: 8px; box-shadow: none; background: transparent; color: var(--tinta);
  font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer;
}
.lista-do-menu .sair button:hover { background: var(--acento-fraco); }

/* O colar link, no topo do Hoje: um campo e dois botoes. */
.colar-rapido { display: grid; gap: 6px; }
.colar-rapido input[type="url"], .colar-rapido textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--papel); color: var(--tinta);
}
.colar-rapido .cadastrar { margin-top: 0; }
.colar-rapido .cadastrar summary { padding: 4px 0; }
.colar-rapido .acoes { margin-top: 4px; }

/* **Mandar material** (U5, 13/10/2026): a folha dos cinco caminhos. No celular e uma folha de baixo
   (`popover`), aberta pelo "+" da barra; a partir de 1024 px, uma janela no meio, aberta pelas
   pilulas da mesa do Hoje (V10) e pelo botao de Conteudos. Ate a V10, no Hoje do computador ela era a
   primeira fileira da pagina. */
.folha-de-material {
  gap: 10px; box-sizing: border-box;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borda); padding: var(--respiro);
  max-height: calc(100dvh - var(--altura-das-abas) - 24px); overflow-y: auto;
}
.folha-de-material[popover]:popover-open {
  display: grid; position: fixed; inset: auto 0 calc(var(--altura-das-abas) + env(safe-area-inset-bottom)) 0;
  width: 100%; margin: 0; border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(16, 20, 18, 0.18);
}
.folha-de-material::backdrop { background: rgba(16, 20, 18, 0.45); }
.folha-de-material h2 { margin: 0; }
.folha-de-material .colar-rapido { display: block; }
.via-de-material { border: 1px solid var(--borda); border-radius: 12px; padding: 0 14px; }
.via-de-material > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 0; min-height: 44px;
}
.via-de-material .icone-do-material { flex: none; color: var(--tinta-fraca); }
.via-de-material .texto-do-material { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.via-de-material .texto-do-material small { color: var(--tinta-fraca); font-size: 13px; }
.via-de-material[open] > summary { padding-bottom: 8px; }
.via-de-material > :not(summary) { margin-bottom: 12px; }
.via-de-material input[type="url"], .via-de-material input[type="text"], .via-de-material textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--papel); color: var(--tinta);
}
/* O "+" da barra: o botao redondo no meio das abas. Some no computador, onde a mesa do Hoje (V10) e
   Conteudos abrem a folha. */
.mandar-mais {
  flex: 0 0 72px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; min-height: var(--altura-das-abas); cursor: pointer;
  color: var(--sr-night);
}
.mandar-mais svg {
  box-sizing: content-box; padding: 13px; margin-top: -18px; border-radius: 50%;
  background: var(--sr-lime); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
@media (min-width: 1024px) {
  .mandar-mais { display: none; }
  /* Aberta por um botao (as pilulas da mesa do Hoje, Conteudos): uma janela no meio, e nao uma
     folha de baixo. */
  .folha-de-material[popover]:popover-open {
    inset: 0; margin: auto; width: min(560px, calc(100% - 32px)); height: fit-content;
    border-radius: var(--raio); box-shadow: 0 12px 40px rgba(16, 20, 18, 0.3);
  }
}

/* A vista Conteudos da Agencia (U5): um item e o que chegou, o que a agencia fez e tres gestos. */
.lista-de-conteudos { display: grid; gap: 12px; }
.conteudo-item { display: grid; gap: 12px; }
@media (min-width: 900px) {
  .conteudo-item { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
  .conteudo-item .gestos-do-item { justify-content: flex-end; }
}
.conteudo-item .o-que-chegou { margin: 0 0 4px; color: var(--tinta-fraca); font-size: 13px; }
.conteudo-item .titulo-do-item { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.conteudo-item .importa { margin: 0 0 6px; color: var(--tinta-fraca); font-size: 14px; }
.conteudo-item .a-agencia {
  display: inline-flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; padding: 6px 10px;
  border-radius: 8px; color: var(--ia); background: var(--ia-fundo); font-size: 13.5px;
}
.conteudo-item .a-agencia svg { flex: none; width: 14px; height: 14px; margin-top: 3px; }
.conteudo-item .gestos-do-item { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.conteudo-item .dar-opiniao, .conteudo-item .abrir-no-card { grid-column: 1 / -1; }

/* V3 do PLANO-UX-VIDA (24/10/2026; `Conteudos.dc.html`): a ORIGEM na borda e na etiqueta -- Radar
   azul, Drive verde, Memoria magenta, Ocasiao ambar, Sua empresa Night (os tokens `--origem-*`) --
   e os gestos numa coluna a direita, do mais forte ao mais fraco, no mesmo lugar em todo item. A
   etiqueta e cheia, com a letra no papel do card: a mesma conta da cor sobre o papel. */
.card.vida-item-de-conteudo { position: relative; padding-left: calc(var(--respiro) + 6px); }
.card.vida-item-de-conteudo::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 5px;
  border-radius: 0 5px 5px 0; background: var(--cor-origem, var(--borda));
}
.vida-origem-radar { --cor-origem: var(--origem-radar); }
.vida-origem-drive { --cor-origem: var(--origem-drive); }
.vida-origem-memoria { --cor-origem: var(--origem-memoria); }
.vida-origem-ocasiao { --cor-origem: var(--origem-ocasiao); }
.vida-origem-empresa { --cor-origem: var(--origem-empresa); }
.vida-item-de-conteudo[class*="vida-origem-"] .etiqueta.origem {
  background: var(--cor-origem); border-color: var(--cor-origem); color: var(--papel);
}
.conteudo-item .vida-gestos-do-item { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
.vida-gestos-do-item > form { margin: 0; }
.vida-gestos-do-item > form > button, .vida-gestos-do-item > button { width: 100%; min-height: 40px; }
/* "Nao agora..." e o gesto mais fraco da coluna: o desenho do discreto, a largura da coluna. */
.vida-gestos-do-item > .nao-agora > summary {
  display: flex; justify-content: center; min-height: 40px;
  background: none; border-color: transparent; color: var(--tinta-fraca); font-weight: 500;
}
.vida-gestos-do-item > .nao-agora[open] > summary { border-color: var(--borda); color: var(--tinta); }
@media (min-width: 900px) {
  .conteudo-item.vida-item-de-conteudo { grid-template-columns: minmax(0, 1fr) 200px; }
}
/* A opiniao e o card inteiro: quem os abre e o gesto da coluna. Fechado, o resumo nem aparece;
   aberto, ele e o "Recolher". */
.vida-aberto-pelo-gesto:not([open]) { display: none; }
.vida-aberto-pelo-gesto[open] { border-top: 1px solid var(--borda); padding-top: 4px; }
.vida-aberto-pelo-gesto > summary { list-style: none; }
.vida-aberto-pelo-gesto > summary::-webkit-details-marker { display: none; }

/* "Mandar material" na barra dos filtros: o botao lima, o gesto DELE nesta tela. */
.vida-barra-de-filtros { display: flex; align-items: flex-start; gap: 8px 12px; margin-bottom: 16px; }
.vida-barra-de-filtros .filtros { flex: 1 1 auto; flex-wrap: wrap; min-width: 0; margin-bottom: 0; }
button.vida-botao-voce, a.vida-botao-voce {
  flex: none; background: var(--voce); border-color: var(--voce); color: var(--voce-tinta);
}
button.vida-botao-voce:hover, a.vida-botao-voce:hover { border-color: var(--voce-tinta); }
@media (max-width: 639px) {
  .vida-barra-de-filtros { flex-direction: column-reverse; align-items: stretch; }
}
.conteudo-item .dar-opiniao[open] { border-top: 1px solid var(--borda); padding-top: 8px; }
.conteudo-item .dar-opiniao .decisao { max-width: 640px; }
.gesto-discreto { cursor: pointer; color: var(--tinta-fraca); font-weight: 600; font-size: 14px; padding: 10px 6px; }

/* O card fechado do Hoje: a cara da vaga, e o card de sempre um toque abaixo. */
.card.compacto .linha-pronta { margin: 6px 0 2px; }
.abrir-no-card > summary { cursor: pointer; list-style: none; padding: 4px 0; }
.abrir-no-card > summary::-webkit-details-marker { display: none; }
.abrir-no-card .ler-inteira, .abrir-no-card .recolher { font-size: 14px; font-weight: 600; color: var(--acento); }
.abrir-no-card .ler-inteira::after { content: " \25BE"; }
.abrir-no-card .recolher::after { content: " \25B4"; }
.abrir-no-card .recolher, .abrir-no-card[open] .ler-inteira { display: none; }
.abrir-no-card[open] .recolher { display: inline; }
.abrir-no-card > .card { box-shadow: none; border: 0; padding: 0; margin: 8px 0 0; background: transparent; }
.abrir-no-card > .card::before { display: none; }
.abrir-no-card > .card > .linha-topo { display: none; }

/* Resultados: os numeros de cada rede, e o que o publico respondeu em frases. */

.leitura-do-publico { margin: 6px 0 10px; padding-left: 18px; display: grid; gap: 6px; }
.leitura-do-publico .rende-mais::marker { color: var(--acento); }

.fila + .etiqueta-bloco { margin-top: 22px; }

/* --- Resultados (04/10/2026): o sistema trabalhando, onde agir, o quadro e os graficos ------ */
.numeros-grandes { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 4px 0 14px; }
.numeros-grandes > div { display: grid; }
.numeros-grandes strong { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numeros-grandes span { font-size: 13px; color: var(--tinta-fraca); }
.numeros-grandes .pede-atencao strong { color: var(--alerta); }
.duas-colunas { display: grid; gap: 4px 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lista-de-relacoes { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.lista-de-relacoes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.quadro-4-4 th.atual, .quadro-4-4 td.atual { background: var(--acento-fraco); font-weight: 700; }
.quadro-4-4 td.abaixo { color: var(--tinta-fraca); }
.quadro-4-4 .total-da-rede th, .quadro-4-4 .total-da-rede td { border-top: 1px solid var(--borda); font-weight: 600; }
.quadro-4-4 .tipo-do-quadro { font-weight: 400; padding-left: 18px; color: var(--tinta-fraca); }

.grafico { width: 100%; height: auto; display: block; margin: 4px 0 8px; overflow: visible; }
.grafico .eixo-do-grafico { stroke: var(--borda); stroke-width: 1; }
.grafico .rotulo-do-grafico { fill: var(--tinta-fraca); font-size: 12px; }
.grafico .valor-do-grafico { fill: var(--tinta); font-size: 12px; font-weight: 600; }
.serie-linkedin { fill: var(--rede-linkedin); background: var(--rede-linkedin); color: var(--rede-linkedin); }
.serie-threads { fill: var(--rede-threads); background: var(--rede-threads); color: var(--rede-threads); }
.serie-instagram { fill: var(--rede-instagram); background: var(--rede-instagram); color: var(--rede-instagram); }
.serie-acento { fill: var(--acento); background: var(--acento); color: var(--acento); }
.serie-comum { fill: var(--tinta-fraca); background: var(--tinta-fraca); }
/* As relacoes e os gestos (G8, 20/10/2026), em Resultados. */
.serie-em-dia, .serie-feito { fill: var(--ok-tinta); background: var(--ok-tinta); }
.serie-esfriando, .serie-venceu { fill: var(--alerta); background: var(--alerta); }
.serie-fria { fill: var(--perigo); background: var(--perigo); }
.serie-pulado { fill: var(--tinta-fraca); background: var(--tinta-fraca); }
/* O que a agencia pediu (S7 do PLANO-SEGUNDO-OLHAR, 28/10/2026): o retrato dos pedidos. */
.resultados-pedidos { min-width: 0; }
.resultados-pedidos-efeito { font-weight: 600; overflow-wrap: anywhere; }
.resultados-relacoes-estagios { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 4px; }
.resultados-relacoes-estagios th, .resultados-relacoes-estagios td {
  text-align: left; padding: 4px 6px; border-top: 1px solid var(--borda);
}
.resultados-relacoes-estagios thead th { border-top: 0; color: var(--tinta-fraca); font-weight: 600; }
.legenda-do-grafico { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.legenda-do-grafico i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }

/* --- A Estrategia (04/10/2026): a tese em destaque e o motor em oito partes ------------------ */
.tese-em-destaque { border-left: 4px solid var(--acento); }
.tese-em-destaque .tese, .sugestao-do-motor .tese { font-size: 20px; line-height: 1.4; font-weight: 600; margin: 6px 0 10px; }
.numero-da-parte { font-size: 13px; font-weight: 700; color: var(--tinta-fraca); }
.titulo-da-parte { font-size: 17px; font-weight: 700; }
.resumo-da-parte { font-size: 14px; color: var(--tinta-fraca); }
.abrir-a-parte { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--tinta); }
.lista-de-conexoes { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.lista-de-conexoes li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.aviso-curto { font-size: 14px; font-weight: 600; color: var(--tinta); }

/* --- O teleprompter (04/10/2026): a tela inteira, o roteiro no topo, perto da camera -------- */
/* A tela da camera e escura de proposito, nos dois temas: as cores dela sao dela, e moram aqui. */
body.teleprompter {
  --tp-fundo: #000000; --tp-tinta: #FFFFFF; --tp-chamada: #9fd0ff; --tp-gravar: #e0383e;
  --tp-rotulo: #d6dbe3; --tp-acabando: #ff9b9b;
}
body.teleprompter { margin: 0; background: var(--tp-fundo); color: var(--tp-tinta); height: 100vh; height: 100dvh;
  overflow: hidden; }
/* `contain`, e nao `cover`: o que ele ve e o que a camera grava, inteiro -- `cover` cortava as
   bordas e parecia zoom (04/10/2026). */
.teleprompter .camera, .teleprompter .tp-gravado {
  position: fixed; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--tp-fundo);
}
.teleprompter .camera { transform: scaleX(-1); }
/* O narrador (11/10/2026): o video do momento por tras, como ele e -- sem o espelho da camera. */
.narrador .tp-cena { transform: none; }
.tp-texto {
  position: fixed; left: 0; right: 0; top: 0; height: 46vh; overflow: hidden;
  padding: calc(16px + env(safe-area-inset-top)) 22px 0;
  background: linear-gradient(rgba(0, 0, 0, 0.82) 70%, rgba(0, 0, 0, 0));
}
.tp-roteiro { line-height: 1.35; font-weight: 600; will-change: transform; }
.tp-roteiro p { margin: 0 0 0.7em; }
.tp-chamada { color: var(--tp-chamada); }
.tp-fim { opacity: 0.6; text-align: center; }
.tp-contagem {
  position: fixed; inset: 0; display: grid; place-items: center; font-size: 140px; font-weight: 800;
  background: rgba(0, 0, 0, 0.35);
}
.tp-contagem[hidden], .tp-gravado[hidden], .teleprompter [hidden] { display: none; }
/* Embaixo, o recado e os botoes num bloco so, com folga para a barra do Android -- na primeira
   versao o recado e os controles do video gravado ficavam por cima dos botoes (04/10/2026). */
.tp-baixo {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px calc(24px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, 0.78);
}
.tp-controles {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
}
.tp-leitura { display: contents; }
.tp-botao {
  min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 22px; border: 0;
  background: rgba(255, 255, 255, 0.16); color: var(--tp-tinta); font: inherit; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.tp-principal { background: var(--tp-gravar); }
.tp-ritmo { font-size: 14px; min-width: 70px; text-align: center; display: inline-flex;
  flex-direction: column; line-height: 1.2; }
.tp-grupo { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px;
  border-radius: 24px; background: rgba(255, 255, 255, 0.08); }
.tp-rotulo { font-size: 12px; color: var(--tp-rotulo); }
.tp-recado { margin: 0; min-height: 1.3em; text-align: center; font-size: 15px; }
.tp-relogio { font-variant-numeric: tabular-nums; font-weight: 700; margin-right: 6px; }
.tp-relogio:empty { display: none; }
.tp-acabando { color: var(--tp-acabando); }
/* Cada estado mostra so os seus botoes; revendo, o video gravado fica ACIMA do bloco de baixo,
   e o roteiro e os botoes de leitura saem da frente. */
.so-pronto, .so-gravando, .so-revendo, .so-ensaiando { display: none; }
.teleprompter[data-estado="pronto"] .so-pronto,
.teleprompter[data-estado="gravando"] .so-gravando,
.teleprompter[data-estado="revendo"] .so-revendo,
.teleprompter[data-estado="ensaiando"] .so-ensaiando { display: inline-flex; }
.teleprompter[data-estado="revendo"] .tp-leitura,
.teleprompter[data-estado="enviando"] .tp-leitura,
.teleprompter[data-estado="revendo"] .tp-texto,
.teleprompter[data-estado="enviando"] .tp-texto { display: none; }
.teleprompter .tp-gravado {
  inset: 0 0 auto 0; height: calc(100% - 170px - env(safe-area-inset-bottom));
}

.gravar-video { margin: 4px 0 14px; }

/* --- Temas de busca e pessoas acompanhadas (05/10/2026) ----------------------
   Os dois eram formularios inteiros abertos, um por item. Agora cada item e um
   cartao que se LE -- o resumo, os numeros que importam, as etiquetas -- e a
   edicao fica recolhida, com um botao so. */
.temas, .lista-de-pessoas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }

/* As listas de `.lista-de-frases` e `.paginas` sao linhas flex com borda embaixo; o cartao
   e outra coisa, e a regra delas vazava para ca (a foto da tela mostrou). */
.lista-de-frases .temas > li.tema, .paginas .lista-de-pessoas > li.pessoa-alvo {
  display: block; padding: 14px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--papel);
}
.lista-de-frases .temas > li.lista-de-frases .temas li.tema button { min-height: 38px; padding: 0 14px; font-size: 14px; }
.lista-de-frases .temas li.tema .cabeca-do-tema button {
  min-height: 32px; padding: 0 12px; font-size: 13px;
}
.tema.desligado .nome-do-tema { color: var(--tinta-fraca); }

.cabeca-do-tema { display: flex; align-items: center; gap: 10px; }
.nome-do-tema { flex: 1; min-width: 0; font-size: 16px; }

.estado-do-tema, .estado-da-relacao {
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--tinta); background: var(--fundo); border: 1px solid var(--borda);
}
.estado-do-tema.ligado, .estado-da-relacao.em-dia {
  background: var(--acento-fraco); border-color: var(--acento-fraco);
}
.estado-do-tema.ligado::before, .estado-da-relacao.em-dia::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: var(--acento); vertical-align: 1px;
}
.estado-da-relacao.pede { color: var(--alerta); background: var(--alerta-fundo); border-color: var(--alerta-fundo); }
.estado-da-relacao.so-observa { color: var(--tinta-fraca); }

.o-que-procura { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--tinta); }
.fatos-do-tema {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0;
  font-size: 13px; color: var(--tinta-fraca);
}
.fatos-do-tema .preco-do-tema { font-weight: 700; color: var(--tinta); }
.pilares-do-tema { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.chip-pilar {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--tinta); background: var(--fundo); border: 1px solid var(--borda);
}

.ajustar-tema, .ajustar-pessoa { margin-top: 10px; border-top: 1px solid var(--borda); }
.ajustar-tema > summary, .ajustar-pessoa > summary {
  cursor: pointer; padding: 10px 0 0; min-height: 36px;
  font-size: 13px; font-weight: 600; color: var(--tinta);
}
.ajustar-tema form, .ajustar-pessoa form { display: grid; gap: 6px; margin-top: 10px; }
.ajustar-tema textarea, .ajustar-pessoa textarea, .ajustar-pessoa input[type="text"],
.ajustar-pessoa select {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.45;
  color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px;
}
.ajustar-tema .numeros-do-eixo small { font-weight: 400; font-size: 12px; color: var(--tinta-fraca); }
.ajustar-tema .numeros-do-eixo select { width: 100%; }

/* A pessoa: quem e, como esta, por que importa, o que o sistema faz por ela. */
.pessoa-alvo .cabeca-da-pessoa { gap: 10px; }
.avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 14px; font-weight: 700; color: var(--tinta); background: var(--acento-fraco);
}
.pessoa-alvo .quem-e { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nome-da-pessoa { font-size: 16px; font-weight: 700; color: var(--tinta); text-decoration: none; }
.nome-da-pessoa:hover { color: var(--acento); }
.sobre-a-pessoa { font-size: 12px; color: var(--tinta-fraca); }

.porque-da-pessoa {
  margin: 10px 0 0; padding: 8px 12px;
  border-left: 3px solid var(--borda);
  font-size: 14px; line-height: 1.45; color: var(--tinta);
}
.numeros-da-relacao {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px; margin: 12px 0;
}
.numeros-da-relacao div { padding: 8px 10px; border-radius: 8px; background: var(--fundo); }
.numeros-da-relacao dt {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--tinta-fraca);
}
.numeros-da-relacao dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--tinta); }
.efeito-do-objetivo { margin: 6px 0 0; font-size: 13px; color: var(--tinta-fraca); }
.acoes-da-pessoa { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.acoes-da-pessoa a.botao { min-height: 36px; font-size: 13px; }
.temas-desligados { margin-top: 14px; }
.temas-desligados > summary {
  cursor: pointer; min-height: 36px; padding: 8px 0;
  font-size: 13px; font-weight: 600; color: var(--tinta-fraca);
}
.ajustar-tema .numeros-do-eixo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 8px 0;
}
.ajustar-tema .numeros-do-eixo label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--tinta-fraca);
}
.ajustar-tema .numeros-do-eixo input, .ajustar-tema .numeros-do-eixo select {
  width: 100%; min-height: 40px; padding: 6px 10px; font: inherit; font-size: 14px;
  color: var(--tinta); background: var(--fundo);
  border: 1px solid var(--borda); border-radius: 8px;
}

/* A confirmacao de algo que deu certo e saiu da tela (a resposta da pergunta do dia). */
.aviso-feito {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 10px;
  font-size: 14px; color: var(--tinta); background: var(--acento-fraco);
}

/* As redes na Estrategia: um cartao por rede, separados como os outros (a foto da tela, na
   auditoria de 05/10/2026, mostrou o primeiro encostado em "Como o plano decide"). */
.rede-da-estrategia { margin-top: var(--respiro); }
/* Cartoes de detalhe em sequencia, no fluxo da pagina: separados (a proposta do assistente
   os empilhava encostados -- a foto da tela, 05/10/2026). Em bloco, a margem colapsa com a
   de baixo de quem ja tinha. */
section.card.detalhe + section.card.detalhe { margin-top: var(--respiro); }

/* Ideias: o que a agenda ja usa, recolhido no fim (05/10/2026). */
.ja-na-agenda { margin-top: 24px; }
.ja-na-agenda > summary {
  cursor: pointer; min-height: var(--toque); padding: 8px 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}
.usos-da-ideia { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.usos-da-ideia li { font-size: 13px; color: var(--tinta); }
.usos-da-ideia a { margin-left: 4px; }

/* A ideia da memoria (05/10/2026): as pecas que ja existem, em linha; o raro, em "Mais". */
.pecas-da-ideia { margin: 8px 0 0; font-size: 14px; }
.mais-da-ideia { margin-top: 8px; }
.mais-da-ideia > summary {
  cursor: pointer; min-height: 36px; padding: 6px 0;
  font-size: 13px; font-weight: 600; color: var(--tinta);
}

/* O quadro de Resultados no celular (06/10/2026): cinco semanas, sem rolar. O numero da
   cadencia e uma etiqueta pequena ao lado da rede, e a explicacao mora no "Como ler". */
.quadro-4-4 { table-layout: auto; }
.quadro-4-4 th, .quadro-4-4 td { padding: 6px 3px; }
.quadro-4-4 thead th { font-size: 12px; }
.quadro-4-4 tbody th { white-space: nowrap; }
/* Embaixo do nome, e nao ao lado: ao lado, a coluna das redes levava metade da tela de 360 px. */
.pede-da-rede {
  display: block; width: fit-content; margin: 2px 0 0 14px; padding: 0 5px; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: var(--tinta-fraca); background: var(--fundo);
}

/* Os relacionamentos em Resultados (06/10/2026): uma linha por relacao, o nome e o link. */
.lista-de-relacoes.compacta { gap: 0; grid-template-columns: minmax(0, 1fr); }
.lista-de-relacoes.compacta li {
  flex-wrap: nowrap; padding: 10px 0; border-bottom: 1px solid var(--borda);
}
.lista-de-relacoes.compacta li:last-child { border-bottom: 0; }
.nome-da-relacao {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--tinta); text-decoration: none;
}
.nome-da-relacao span { color: var(--acento); }
.nome-da-relacao:hover { color: var(--acento); }
.lista-de-relacoes.compacta .explica { flex: none; margin: 0; font-size: 12px; white-space: nowrap; }

/* O conteudo no tempo (11/10/2026): cada rede numa linha, com a hora e o estado. */
.linha-do-tempo { list-style: none; padding: 0; margin: 8px 0; }
.linha-do-tempo .no-tempo { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--borda); }
.linha-do-tempo .no-tempo:last-child { border-bottom: 0; }
.linha-do-tempo .quando-do-tempo { font-weight: 600; }
.conteudo-no-tempo { margin-top: 10px; }

/* Com quem voce fala (11/10/2026): cada papel um cartao, com os perfis dentro. */
.papel-com-perfis { margin-bottom: var(--respiro); }
.papel-com-perfis .linha-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.papel-com-perfis .linha-topo .titulo-bloco { margin: 0; }
.perfil-do-publico { padding: 10px 0; border-top: 1px solid var(--borda); }
.perfil-do-publico p { margin: 0 0 4px; }

/* --- A Agencia: a esteira (E4 do PLANO-AGENCIA, 11/10/2026) ---------------------------------
   A prancha `docs/mockups/Agencia.dc.html`. No computador: os nove agentes numa trilha, o
   quadro com as seis fases lado a lado, e "agora mesmo" ao lado de "o que vem a seguir". No
   celular a trilha vira lista e as fases se empilham -- nada rola de lado. Azul (`--ia`) e a
   agencia trabalhando; lima e o que espera ele; a rede continua com a cor dela. */

.cabeca-da-agencia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 12px;
}
.cabeca-da-agencia h1 { margin: 0; }
.vistas-da-agencia {
  display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--coluna);
  /* Quatro vistas desde a U5: a 390 px "Linha do tempo" quebrava em duas linhas dentro do
     seletor. Rola de lado, e nenhuma vista quebra. */
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.vistas-da-agencia a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; flex: none;
  white-space: nowrap;
  border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--tinta-fraca);
}
.vistas-da-agencia a:hover { color: var(--tinta); }
.vistas-da-agencia a.ativa { background: var(--cta); color: var(--cta-tinta); }

.ao-vivo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 8px 0 0; font-size: 13px; color: var(--tinta-fraca);
}
.ponto-ao-vivo {
  width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-fraca); flex: none;
}
.ponto-ao-vivo.trabalhando { background: var(--ia); box-shadow: 0 0 0 4px var(--ia-fundo); }

/* Os agentes (V3 do PLANO-UX-VIDA, 24/10/2026; `docs/mockups/ux-vida/Agencia.dc.html`): oito
   ladrilhos IGUAIS -- o icone no disco, o nome e UM selo (`.vida-estado`) --, de altura fixa. O
   "o que faz" quebrava em duas ou tres linhas e deixava cada um de uma largura: foi para o `title`
   e para o pop-up da pagina. As linhas do estado abrem por cima, ao passar o mouse, ao tocar ou
   pelo teclado. Dois andares desde 20/10/2026: a esteira de producao (`.trilha-de-agentes`, com
   `--agentes` vindo do template -- a grade nunca repete o numero de agentes) e a faixa de quem
   cuida das pessoas (`.faixa-das-pessoas`, o Relacoes, no fundo de quem espera voce). */
.faixa-das-pessoas { list-style: none; margin: 10px 0 0; padding: 0; }
.vida-esteira-de-agentes { position: relative; }
.trilha-de-agentes {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .trilha-de-agentes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* A partir de 1024 px (a barra lateral entra), a trilha inteira numa linha: oito colunas iguais. */
@media (min-width: 1024px) {
  .trilha-de-agentes { grid-template-columns: repeat(var(--agentes, 8), minmax(0, 1fr)); gap: 12px; }
}
.vida-agente {
  position: relative; box-sizing: border-box; height: 178px;
  display: grid; grid-template-rows: 44px auto auto minmax(0, 1fr); justify-items: center;
  align-content: start; gap: 6px; padding: 12px 6px 10px; text-align: center;
  background: var(--papel); border: 1px solid var(--borda); border-radius: 12px;
}
/* **O que o agente faz agora, e a fila dele** (a revisao da V3, 24/10/2026, pedido dele: "e
   importante o usuario sentir as tarefas e esforcos dos agentes"). A linha de baixo e o `oque` de
   quem trabalha (ou a ultima coisa que fez), em ate duas linhas cortadas -- a altura e fixa, e todo
   ladrilho tem a mesma. O numero no canto e quantos trabalhos ha na fila daquele agente. */
.vida-agente-agora {
  align-self: end; max-width: 100%; font-size: 12px; line-height: 1.3; color: var(--tinta-fraca);
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow-wrap: anywhere;
}
.vida-agente.agente-trabalhando .vida-agente-agora { color: var(--ia); font-weight: 600; }
.vida-agente.vida-agente-voce .vida-agente-agora { color: var(--faixa-fraca); }
.vida-agente-fila {
  position: absolute; z-index: 3; top: 7px; right: 7px; display: flex; align-items: center;
  justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  background: var(--fundo); box-shadow: inset 0 0 0 1px var(--borda);
}
.vida-agente-fila b {
  font-family: var(--fonte-titulo); font-size: 14px; font-weight: 700; line-height: 1;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
.vida-agente.agente-trabalhando .vida-agente-fila { background: var(--ia-fundo); box-shadow: none; }
.vida-agente.agente-trabalhando .vida-agente-fila b { color: var(--ia); }
.vida-agente.vida-agente-voce .vida-agente-fila { background: var(--voce); box-shadow: none; color: var(--voce-tinta); }
.vida-agente.vida-agente-voce .vida-agente-fila b { color: var(--voce-tinta); }
.vida-agente-disco {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--fundo); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--borda);
}
.vida-agente-disco svg { width: 20px; height: 20px; }
.vida-agente-nome { font-size: 13.5px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.vida-agente .vida-estado {
  max-width: 100%; padding: 2px 6px; font-size: 12px; white-space: normal; text-align: center;
}
/* Entre 1024 e 1280 px cada ladrilho tem ~80 px: o selo de uma palavra ("aguardando",
   "desenhando") cabe com o respiro mais curto, e nunca quebra no meio da palavra. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .trilha-de-agentes { gap: 6px; }
  .vida-agente { padding-left: 2px; padding-right: 2px; }
  .vida-agente .vida-estado { padding: 2px 4px; letter-spacing: -0.01em; }
}
/* O estado pinta o disco: em dia, Night com o icone lima; trabalhando, o azul da agencia (e o
   ladrilho ganha o contorno dela); esperando voce, o lima. Aguardando fica no neutro. */
.vida-agente.agente-em_dia .vida-agente-disco,
.vida-faixa-das-pessoas .vida-agente-disco { background: var(--sr-night); color: var(--sr-lime); }
.vida-agente.agente-trabalhando { border-color: var(--ia); box-shadow: 0 0 0 3px var(--ia-fundo); }
.vida-agente.agente-trabalhando .vida-agente-disco { background: var(--ia); color: var(--papel); box-shadow: none; }
.vida-agente.agente-pede_voce .vida-agente-disco { background: var(--voce); color: var(--voce-tinta); box-shadow: none; }
.vida-agente.agente-aguardando .vida-agente-disco { color: var(--tinta-fraca); }
/* Voce: o momento de impacto da esteira (manual 6), Night com o disco lima. */
.vida-agente.vida-agente-voce { background: var(--sr-night); color: var(--faixa-tinta); }
.vida-agente.vida-agente-voce .vida-agente-disco { background: var(--voce); color: var(--voce-tinta); box-shadow: none; }
/* O pulso de quem esta trabalhando -- o unico movimento que se repete, e some com
   `prefers-reduced-motion`. */
.vida-agente.agente-trabalhando .vida-agente-disco::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--ia); animation: pulso-do-agente 1.6s ease-out infinite;
}
@keyframes pulso-do-agente { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }

/* O que o agente tem agora: abre por cima do ladrilho, do tamanho dele no celular, e mais largo
   no computador (os dois das pontas presos a borda, para nao sair da tela). */
.vida-agente-dentro {
  display: none; position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0;
  flex-direction: column; gap: 4px; padding: 10px 12px; text-align: left;
  font-size: 13px; line-height: 1.35; color: var(--tinta); background: var(--papel);
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--borda), 0 12px 32px color-mix(in srgb, var(--sr-night) 22%, transparent);
}
.vida-agente:hover .vida-agente-dentro,
.vida-agente:focus .vida-agente-dentro,
.vida-agente:focus-within .vida-agente-dentro { display: flex; }
.vida-agente-dentro a { font-weight: 600; }
.linha-do-agente {
  overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}
@media (min-width: 1024px) {
  .vida-agente-dentro { right: auto; left: 50%; width: 240px; transform: translateX(-50%); }
  .vida-agente:nth-child(-n+2) .vida-agente-dentro { left: 0; transform: none; }
  .vida-agente:nth-last-child(-n+2) .vida-agente-dentro { left: auto; right: 0; transform: none; }
}

/* A trilha: o fio lima que atravessa os ladrilhos na altura dos discos, por cima do fundo deles e
   por baixo dos discos, ate o agente com a peca da vez (`e.ate`). As pontas sao o centro do
   primeiro e do ultimo disco (as contas em porcentagem moram no template). So aparece com a trilha
   numa linha (1024 px), e so anda com alguem trabalhando. */
.vida-trilha.vida-trilha-da-esteira { display: none; }
@media (min-width: 1024px) {
  .vida-trilha.vida-trilha-da-esteira {
    display: block; position: absolute; z-index: 1; left: 0; right: 0; top: 29px;
    width: 100%; height: 12px; pointer-events: none;
  }
}
.vida-trilha-viva .vida-trilha-feita { stroke-dasharray: 10 6; animation: vida-trilha-anda 0.9s linear infinite; }
@keyframes vida-trilha-anda { to { stroke-dashoffset: -16; } }

/* Relacoes: a faixa larga embaixo da esteira, no fundo de quem espera voce. */
.vida-faixa-das-pessoas {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  padding: 12px 16px; border-radius: var(--raio); background: var(--voce-fundo); color: var(--tinta);
}
.vida-faixa-texto { min-width: 0; font-size: 14px; }
.vida-faixa-texto .nota { font-size: 13px; }
.vida-faixa-linhas {
  display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font-size: 13px; color: var(--tinta-fraca);
}
.vida-faixa-linhas .linha-do-agente { -webkit-line-clamp: 1; line-clamp: 1; }
.vida-faixa-linhas a { color: var(--tinta); font-weight: 600; }
@media (max-width: 639px) {
  .vida-faixa-das-pessoas { grid-template-columns: 44px minmax(0, 1fr); }
  .vida-faixa-das-pessoas > .vida-estado { grid-column: 2; justify-self: start; }
}

/* O "o que cada um faz", no pop-up da pagina: o nome e a frase, lado a lado. */
.vida-o-que-cada-um-faz { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 12px; }
.vida-o-que-cada-um-faz dt { font-weight: 600; }
.vida-o-que-cada-um-faz dd { margin: 0; }

/* O quadro: uma coluna por fase. Empilhadas no celular, duas, tres, e as seis lado a lado no
   computador largo. */
.quadro-da-esteira { display: grid; gap: 10px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .quadro-da-esteira { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .quadro-da-esteira { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .quadro-da-esteira { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fase {
  background: var(--coluna); border-radius: var(--raio); padding: 10px;
  display: flex; flex-direction: column; gap: 8px; min-height: 120px;
}
.fase-producao { background: var(--ia-fundo); }
.fase-com_voce { background: var(--ok-fundo); }
.fase h3 {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  margin: 0; padding: 2px 4px;
  font-family: var(--fonte-texto); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-fraca);
}
.quantas-da-fase {
  background: var(--papel); color: var(--tinta); border-radius: var(--raio-pilula);
  padding: 0 8px; font-size: 12px; letter-spacing: 0;
}
.cartao-da-fase {
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  background: var(--papel); border: 1px solid var(--borda); border-radius: 12px;
  color: var(--tinta); text-decoration: none; font-size: 13px;
}
.cartao-da-fase:hover { border-color: var(--acento); color: var(--tinta); }
.cartao-da-fase.trabalhando { border-color: var(--ia); }
.fase-com_voce .cartao-da-fase { border-color: var(--tinta-fraca); }
.titulo-da-fase { font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.cartao-da-fase small { font-size: 12px; color: var(--tinta-fraca); line-height: 1.35; }
.fase-vazia { margin: 0; padding: 4px; font-size: 12px; color: var(--tinta-fraca); }
/* "Ver os outros N" abre a fase inteira por cima da esteira (V3): um botao da largura da coluna;
   em "Com voce", o lima de quem espera voce. */
button.vida-ver-a-fase {
  width: 100%; min-height: 34px; padding: 0 12px; font-size: 13.5px;
  background: var(--papel); border-color: var(--borda);
}
.fase-com_voce button.vida-ver-a-fase { background: var(--voce); border-color: var(--voce); color: var(--voce-tinta); }
/* O pop-up da fase: um pouco mais largo que o card da vaga (a lista leva o "Abrir" ao lado), e o
   miolo guarda a altura enquanto a lista chega. */
.vaga-aberta.vida-fase-inteira { width: min(640px, calc(100vw - 32px)); }
.vida-fase-corpo { min-height: 60px; }
.fase .vida-fase-titulo {
  margin: 0 4px 10px; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em; text-transform: none; color: var(--tinta);
}
.vida-lista-da-fase { list-style: none; margin: 0; padding: 0 4px 4px; display: grid; gap: 6px; }
.vida-linha-da-fase {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; background: var(--papel); border: 1px solid var(--borda); border-radius: 10px;
}
.vida-linha-da-fase.trabalhando { border-color: var(--ia); }
.vida-linha-da-fase-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.3; }
.vida-linha-da-fase-texto strong { overflow-wrap: anywhere; }
.vida-linha-da-fase-texto small { font-size: 12.5px; color: var(--tinta-fraca); }
.vida-linha-da-fase-texto .etiqueta { align-self: flex-start; margin: 0; }
.vida-linha-da-fase a.botao { min-height: 36px; padding: 0 14px; }

/* As tres redes de um conteudo: cheio = na fila, com o visto = publicado, metade = escrita ou
   em producao, anel = planejado ou sugerido, tracejado = a rede que a agencia nao sugeriu. */
.circulos { display: flex; gap: 6px; align-items: center; }
.circulo {
  position: relative; display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--cor-rede);
}
.circulo-feito, .circulo-publicado { background: var(--cor-rede); }
.circulo-meio { background: linear-gradient(90deg, var(--cor-rede) 50%, var(--papel) 50%); }
.circulo-anel { border-width: 3px; background: var(--papel); }
.circulo-nada { border: 2px dashed var(--tinta-fraca); background: none; }
.circulo-publicado::after {
  content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px;
  border: solid var(--papel); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* A producao nao tem porcentagem de verdade: a barra diz "andando", sem inventar um numero. */
.barra-indeterminada {
  display: block; height: 4px; border-radius: 2px; overflow: hidden; background: var(--ia-fundo);
}
.barra-indeterminada i {
  display: block; height: 100%; width: 40%; background: var(--ia);
  animation: barra-andando 1.4s ease-in-out infinite;
}
@keyframes barra-andando { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* Agora mesmo e o que vem a seguir: lado a lado a partir de 900 px. */
.agora-e-depois { display: grid; gap: 14px; margin-top: 18px; align-items: start; }
@media (min-width: 900px) { .agora-e-depois { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.agora-mesmo { display: flex; flex-direction: column; gap: 8px; }
.agora-mesmo .etiqueta-bloco, .a-seguir .etiqueta-bloco { margin: 0; }
.tique {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; margin: 0;
  font-size: 13px; align-items: start;
}
.tique small { color: var(--tinta-fraca); text-align: right; padding-top: 1px; }
.tique a { color: var(--tinta); text-decoration-color: var(--borda); }
.tique a:hover { color: var(--acento); }
.tique-agora small { color: var(--ia); font-weight: 700; }
.ver-a-linha { font-size: 13px; align-self: flex-start; }
.a-seguir {
  background: var(--marca); color: var(--faixa-tinta); border-radius: var(--raio);
  /* No escuro o chao tambem e Night: o contorno separa, como nos cartoes. */
  box-shadow: 0 0 0 1px var(--borda);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 13px;
}
.a-seguir .etiqueta-bloco { color: var(--sr-lime); }
.agora-mesmo .etiqueta-bloco, .a-seguir .etiqueta-bloco {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
/* A marca da demonstracao, pequena: ela diz de onde veio, e nao disputa com o que aconteceu. */
.esteira .etiqueta.demonstracao, .linha-da-agencia .etiqueta.demonstracao {
  margin: 0 4px 0 0; padding: 0 6px; font-size: 12px; line-height: 1.6; vertical-align: 1px;
}
.cartao-da-fase .etiqueta.demonstracao { align-self: flex-start; }
.a-seguir p { margin: 0; }
.a-seguir strong { color: var(--sr-lime); }
.semana-da-agencia {
  color: var(--faixa-fraca); border-top: 1px solid var(--sr-surface-dark); padding-top: 8px;
}

/* A linha do tempo: hora, quem, o que -- a decisao dele com a marca lima. V3 do PLANO-UX-VIDA
   (24/10/2026): cada linha leva o icone de quem fez num disco (lima e VOCE; o azul claro e a
   agencia), e a marca "demonstracao" vai uma vez para o titulo do dia. Legibilidade, e nao
   redesenho: a estrutura por dia fica. */
.linha-da-agencia { list-style: none; margin: 0; padding: 0; }
.linha-da-agencia li {
  display: grid; grid-template-columns: 44px 28px minmax(0, 1fr); gap: 0 10px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 14px;
}
.linha-da-agencia li:last-child { border-bottom: 0; }
.hora-da-linha { color: var(--tinta-fraca); font-size: 13px; font-variant-numeric: tabular-nums; }
.vida-linha-disco {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; background: var(--ia-fundo); color: var(--ia);
}
.vida-linha-disco svg { width: 15px; height: 15px; }
.vida-linha-disco.vida-linha-voce { background: var(--voce); color: var(--voce-tinta); }
.vida-linha-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.quem-da-linha { font-size: 12px; font-weight: 700; color: var(--ia); }
.ator-voce .quem-da-linha { color: var(--ok-tinta); }
.o-que-da-linha { overflow-wrap: anywhere; }
.o-que-da-linha a { color: var(--tinta); }
.o-que-da-linha a:hover { color: var(--acento); }
@media (min-width: 640px) {
  .vida-linha-texto { flex-direction: row; align-items: baseline; gap: 10px; }
  .quem-da-linha { flex: 0 0 100px; }
}
.grupo .etiqueta.demonstracao { margin: 0; font-family: var(--fonte-texto); font-size: 12px; }

/* Os filtros como pilulas (V3): a ativa em Night -- no escuro, com o contorno, que o chao tambem e
   Night. */
.vida-filtros a.ativa {
  background: var(--sr-night); border-color: var(--sr-night); color: var(--faixa-tinta);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .vida-filtros a.ativa { border-color: var(--tinta-fraca); }
}
:where(:root[data-theme="escuro"]) .vida-filtros a.ativa { border-color: var(--tinta-fraca); }

@media (prefers-reduced-motion: reduce) {
  .vida-agente.agente-trabalhando .vida-agente-disco::after, .barra-indeterminada i,
  .vida-trilha-viva .vida-trilha-feita { animation: none !important; }
  .barra-indeterminada i { width: 50%; transform: none; }
}

/* --- O Calendario em grade (E4b do PLANO-AGENCIA, 11/10/2026) --------------------------------
   A prancha `docs/mockups/Calendario.dc.html`. A partir de 1024 px: uma faixa por rede (a
   cadencia e quem decide na cabeca) por sete dias, um card por celula. Borda cheia e peca
   escrita; tracejada e reserva; hachura e dia fora da cadencia. Abaixo de 1024 px a grade some e
   fica a lista por dia de sempre (`.lista-da-semana`) -- as duas estao no HTML, e esta folha
   escolhe. Cada celula abre o card da vaga num `popover`, por cima da tela: os gestos sao os de
   sempre. */

.cabeca-do-calendario { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.barra-do-calendario, .grade-da-semana { display: none; }

@media (min-width: 1024px) {
  .lista-da-semana { display: none; }
  .cabeca-do-calendario h1 { margin-bottom: 12px; }
  .barra-do-calendario {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px auto;
  }
  .periodo-da-grade { font-size: 14px; font-weight: 600; color: var(--tinta-fraca); margin-right: 4px; }
  .barra-do-calendario a.botao { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .barra-do-calendario a.botao[aria-expanded="true"] {
    background: var(--cta); border-color: var(--cta); color: var(--cta-tinta);
  }
  /* "Quem decide" e "Por conteudo" sao botoes que abrem o que ja existe: fechados, os blocos
     nem aparecem -- o botao e a porta. */
  #autonomia:not([open]), #por-conteudo:not([open]) { display: none; }
  .grade-da-semana { display: flex; flex-direction: column; gap: 8px; }
}

.linha-da-grade {
  display: grid; gap: 8px; align-items: stretch;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
/* Entre 1024 e 1280 px a coluna da rede roubaria um dia inteiro: a cabeca da faixa vai por cima. */
.cabeca-da-grade > span:first-child { display: none; }
.cabeca-da-faixa {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin-top: 6px; padding: 8px 12px;
  background: var(--papel); border-radius: 12px; border-left: 4px solid var(--cor-rede);
  box-shadow: 0 0 0 1px var(--borda);
}
.cabeca-da-faixa strong { font-size: 14px; }
.cabeca-da-faixa small { font-size: 12px; line-height: 1.35; color: var(--tinta-fraca); }
.quem-decide { display: inline-flex; flex-wrap: wrap; gap: 4px; }
@media (min-width: 1280px) {
  .linha-da-grade { grid-template-columns: 132px repeat(7, minmax(0, 1fr)); }
  .cabeca-da-grade > span:first-child { display: block; }
  .cabeca-da-faixa {
    grid-column: auto; flex-direction: column; align-items: flex-start; justify-content: center;
    margin-top: 0; padding: 12px;
  }
}

.dia-da-grade {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding: 4px 6px 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinta-fraca);
}
.dia-da-grade b {
  font-family: var(--fonte-titulo); font-size: 20px; letter-spacing: 0; text-transform: none;
  color: var(--tinta);
}
.dia-da-grade.hoje, .dia-da-grade.hoje b { color: var(--acento); }

.celula-da-grade {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 132px;
  border-radius: 12px;
}
.celula-da-grade.hoje { background: var(--fundo); box-shadow: 0 0 0 4px var(--fundo); }
/* A hachura do dia fora da cadencia: a tinta a 8%, que e enfeite, e nao texto. */
.celula-da-grade.fora {
  background: repeating-linear-gradient(
    135deg, transparent 0 6px, color-mix(in srgb, var(--tinta) 8%, transparent) 6px 7px
  );
}

.peca-da-grade, .vaga-vazia-da-grade {
  flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 0;
  margin: 0; padding: 9px 10px 8px; border-radius: 12px;
  font: inherit; font-size: 12px; font-weight: 400; line-height: 1.3; text-align: left;
  color: var(--tinta); background: var(--papel);
}
.peca-da-grade { border: 1px solid var(--borda); border-left: 4px solid var(--cor-rede); }
.peca-da-grade.reservada { border-style: dashed; }
.peca-da-grade:hover, .peca-da-grade:focus-visible,
.vaga-vazia-da-grade:hover, .vaga-vazia-da-grade:focus-visible,
.chip-da-grade:hover, .chip-da-grade:focus-visible {
  box-shadow: 0 0 0 2px var(--acento); outline: none;
}
.peca-da-grade.realcada, .vaga-vazia-da-grade.realcada, .chip-da-grade.realcada {
  box-shadow: 0 0 0 3px var(--acento);
}
.cima-da-grade {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  color: var(--tinta-fraca);
}
.titulo-da-grade {
  font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}
.pe-da-grade { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px; }
/* Na celula estreita o estado quebra a linha em vez de vazar do card. */
.pe-da-grade .estado-da-grade { white-space: normal; max-width: 100%; line-height: 1.35; padding: 1px 7px; border-radius: 8px; }
.vaga-vazia-da-grade {
  align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--borda); background: none; color: var(--tinta-fraca);
}

/* A letra do mesmo conteudo: escura quando ha peca escrita, cinza quando e reserva. */
.letra-da-grade {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 6px;
  font-size: 12px; font-weight: 700; background: var(--tinta-fraca); color: var(--papel);
}
.letra-da-grade.escrita { background: var(--tinta); }
.selo-da-grade {
  font-size: 12px; font-weight: 600; padding: 0 6px; border-radius: var(--raio-pilula);
  background: var(--fundo); color: var(--tinta-fraca); box-shadow: inset 0 0 0 1px var(--borda);
}

.estado-da-grade {
  display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.6;
  padding: 0 7px; border-radius: var(--raio-pilula); white-space: nowrap; text-decoration: none;
}
.estado-da-grade.suave { background: var(--fundo); color: var(--tinta-fraca); box-shadow: inset 0 0 0 1px var(--borda); }
.estado-da-grade.pede { background: var(--sr-lime); color: var(--sr-night); }
.estado-da-grade.ia { background: var(--ia-fundo); color: var(--ia); }
.estado-da-grade.ok { background: var(--ok-fundo); color: var(--ok-tinta); }
.estado-da-grade.demonstracao { background: var(--alerta-fundo); color: var(--alerta); }

.pe-da-semana {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 8px 16px; padding-top: 4px;
}
.legenda-da-grade { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.titulo-da-legenda { font-weight: 600; }
.chave-da-grade { margin: 0; font-size: 12px; color: var(--tinta-fraca); }
.chips-da-semana { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-da-grade {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; margin: 0;
  padding: 6px 12px; border: 1px solid var(--borda); border-radius: 10px;
  font: inherit; font-size: 13px; font-weight: 500; text-align: left; text-decoration: none;
  color: var(--tinta); background: var(--papel);
}
.chip-da-grade.reservada { border-style: dashed; }
.ponto-da-rede { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ponto-rede); }
.grade-da-semana .grupo { margin: 18px 0 6px; }

/* O card da vaga aberto por cima da grade: o mesmo `_vaga.html`, com os mesmos botoes. */
.vaga-aberta {
  width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  margin: auto; padding: 8px 10px 10px; border: 0; border-radius: var(--raio-lg);
  color: var(--tinta); background: var(--chao);
  box-shadow: 0 0 0 1px var(--borda), 0 24px 64px color-mix(in srgb, var(--sr-night) 35%, transparent);
}
.vaga-aberta::backdrop { background: color-mix(in srgb, var(--sr-night) 45%, transparent); }
.vaga-aberta .card { margin: 0; }
.fechar-a-vaga { display: flex; justify-content: flex-end; }
.fechar-a-vaga button { min-height: 36px; padding: 0 10px; }

/* --- O Comecar (E6b do PLANO-AGENCIA, 12/10/2026) -----------------------------------------
   Os seis passos numa faixa: no celular ela rola de lado (o passo atual sempre a vista, pelo
   `scroll-margin`); no computador cabe inteira. O passo feito leva o visto; o pulado, "depois". */
.passos-do-comecar { margin: 8px 0 18px; }
.passos-do-comecar ol {
  list-style: none; margin: 0; padding: 2px 0 6px; display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
}
.passos-do-comecar ol::-webkit-scrollbar { display: none; }
.passos-do-comecar li { flex: 0 0 auto; }
.passos-do-comecar a {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 6px;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--papel);
  color: var(--tinta); text-decoration: none; font-size: var(--texto-legenda); white-space: nowrap;
}
.passos-do-comecar .numero {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--fundo); border: 1px solid var(--borda); font-weight: 600;
}
.passos-do-comecar li.feito .numero { background: var(--acento-fraco); color: var(--acento); border-color: var(--acento); }
.passos-do-comecar li.atual a { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); font-weight: 600; }
.passos-do-comecar li.atual .numero { background: var(--acento); color: var(--acento-tinta); border-color: var(--acento); }
.passos-do-comecar li.pulado .nome-do-passo { color: var(--tinta-fraca); }
/* No celular so o passo atual diz o nome; os outros sao o numero (ou o visto), e a faixa cabe
   inteira em 320 px. No computador, todos com o nome. */
@media (max-width: 1023px) {
  .passos-do-comecar li:not(.atual) .nome-do-passo,
  .passos-do-comecar li:not(.atual) .explica { display: none; }
  .passos-do-comecar ol { gap: 4px; }
  .passos-do-comecar li:not(.atual) a { padding: 4px; }
}
@media (min-width: 1024px) {
  .passos-do-comecar ol { flex-wrap: wrap; overflow: visible; }
}
.passo-do-comecar > .grupo { margin-top: 4px; }
/* As redes do primeiro passo (U4): uma linha por rede, o nome a esquerda e o gesto a direita. O
   ponto leva a cor da rede (`--ponto-rede`, de `.rede-<canal>` na propria linha). */
.redes-do-comecar { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.redes-do-comecar li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
}
.redes-do-comecar .nome-da-rede { font-weight: 600; }
.redes-do-comecar .nome-da-rede::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px;
  background: var(--ponto-rede, var(--tinta-fraca));
}
.cartao-do-comecar {
  display: block; width: 100%; max-width: 420px; height: auto; margin: 6px 0 12px;
  border-radius: 10px; border: 1px solid var(--borda);
}
.gravador audio { width: 100%; margin: 8px 0; }
.gravador .relogio { font-variant-numeric: tabular-nums; color: var(--tinta-fraca); }
.codigo-de-vinculo code {
  display: inline-block; padding: 8px 12px; border-radius: 8px; font-size: 20px;
  letter-spacing: 0.08em; background: var(--fundo); border: 1px solid var(--borda); color: var(--tinta);
}

/* --- Plano e creditos na Conta (E7 do PLANO-AGENCIA, 12/10/2026) ----------------------------
   Tres numeros lado a lado a partir de 640 px, empilhados no celular; e a barra de para onde foi
   o uso, com as cores das series de Resultados (`.serie-<rede>`). */
.creditos { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 12px; }
@media (min-width: 640px) { .creditos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.creditos > .card { margin: 0; }
.creditos .rotulo-do-numero { margin: 0 0 6px; font-size: 13px; color: var(--tinta-fraca); }
.creditos .numero-do-cartao {
  display: block; font-family: var(--fonte-titulo); font-size: 32px; font-weight: 700;
  line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.creditos .numero-do-cartao small { font-size: 14px; font-weight: 500; color: var(--tinta-fraca); letter-spacing: 0; }
.creditos .explica { margin: 6px 0 0; font-size: 13px; }
.creditos .pede-atencao { box-shadow: inset 4px 0 0 var(--acento); }
/* Os planos na Conta (P0 do PLANO-PLANOS-CRIATIVOS, 31/10/2026): tres cartoes iguais; o seu com
   o traco lima, o principal com o traco do acento, o "Em breve" so com a pilula. */
.conta-planos { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0 0 12px; }
@media (min-width: 720px) { .conta-planos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.conta-planos > .card { margin: 0; display: grid; gap: 8px; align-content: start; }
.conta-plano header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.conta-plano h4 { margin: 0; font-size: 20px; line-height: 1.2; }
.conta-plano .explica { margin: 0; }
.conta-plano.seu { box-shadow: inset 4px 0 0 var(--voce); }
.conta-plano.principal { box-shadow: inset 4px 0 0 var(--acento); }
.conta-plano ul { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.conta-plano-creditos { margin: 0; font-size: 14px; color: var(--tinta-fraca); }
.conta-plano-creditos strong { color: var(--tinta); font-size: 18px; font-variant-numeric: tabular-nums; }
.conta-plano .botao { justify-self: start; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .conta-plano.seu { box-shadow: inset 4px 0 0 var(--voce), 0 0 0 1px var(--borda); }
  :where(:root:not([data-theme="claro"])) .conta-plano.principal { box-shadow: inset 4px 0 0 var(--acento), 0 0 0 1px var(--borda); }
}
:where(:root[data-theme="escuro"]) .conta-plano.seu { box-shadow: inset 4px 0 0 var(--voce), 0 0 0 1px var(--borda); }
:where(:root[data-theme="escuro"]) .conta-plano.principal { box-shadow: inset 4px 0 0 var(--acento), 0 0 0 1px var(--borda); }
.uso-do-mes .titulo-bloco { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.uso-do-mes .ao-lado { font-family: var(--fonte-texto); font-size: 13px; font-weight: 500; }
.barra-do-uso { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--fundo); margin: 6px 0 10px; }
.barra-do-uso i { display: block; height: 100%; }

/* --- O Admin e "Os seus dados" (E9 do PLANO-AGENCIA, 12/10/2026) --------------------------- */

/* O gesto que nao volta (apagar a conta): o vermelho do perigo, e so depois da palavra digitada. */
button.perigo { background: var(--perigo); border-color: var(--perigo); color: var(--perigo-tinta); }
button.perigo:hover:not(:disabled) { filter: brightness(0.95); }
.apagar-a-conta { margin-top: 14px; border-top: 1px solid var(--borda); padding-top: 12px; }
.apagar-a-conta > summary { cursor: pointer; font-weight: 600; color: var(--perigo); }
.apagar-a-conta[open] > summary { margin-bottom: 8px; }
.apagar-a-conta input[type="text"], .convidar input[type="email"] {
  width: 100%; box-sizing: border-box; min-height: var(--toque); padding: 9px 11px;
  border: 1px solid var(--borda); border-radius: 9px;
  background: var(--papel); color: var(--tinta); font: inherit; font-size: 16px;
}
.apagar-a-conta input[type="text"] { max-width: 260px; letter-spacing: 0.06em; }
.apagar-a-conta label, .convidar label { font-size: 13px; font-weight: 600; color: var(--tinta-fraca); }
.lista-de-exportacoes { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.lista-de-exportacoes li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.lista-de-exportacoes a { font-weight: 600; overflow-wrap: anywhere; }

/* As contas do Admin: um cartao por conta, os numeros numa grade que vira duas colunas no
   celular -- uma tabela de seis colunas so caberia rolando para o lado. */
.contas-do-admin { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.conta-do-admin { margin: 0; display: grid; gap: 10px; }
.cabeca-da-conta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.cabeca-da-conta .quem-e { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cabeca-da-conta .quem-e .explica { overflow-wrap: anywhere; }
.etiquetas-da-conta { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: flex-start; }
.etiquetas-da-conta .etiqueta { margin: 0; }
.etiqueta.estado-ativa { background: var(--ok-fundo); color: var(--ok-tinta); }
.etiqueta.estado-pausada { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta.estado-excluida { background: var(--fundo); color: var(--tinta-fraca); border: 1px solid var(--borda); }
.numeros-da-conta {
  margin: 0; display: grid; gap: 10px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .numeros-da-conta { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.numeros-da-conta dt { font-size: 12px; color: var(--tinta-fraca); margin: 0 0 2px; }
.numeros-da-conta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.numeros-da-conta dd .explica { font-weight: 400; }
.conta-do-admin .acoes { margin: 0; }
.recado-do-admin { margin: 0 0 12px; box-shadow: inset 4px 0 0 var(--acento), 0 0 0 1px var(--borda); }
.convidar { display: grid; gap: 6px; grid-template-columns: 1fr; margin: 6px 0 4px; }
@media (min-width: 640px) {
  .convidar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .convidar label { grid-column: 1 / -1; }
}

/* --- O que a agencia decidiu (U2 do PLANO-UX-AGENCIA, 13/10/2026) --------------------------- */
/* A lista que `direcao.dirigir` monta, e o "Trocar" de cada linha (U3). O azul (`--ia`) marca o
   que e da agencia -- o que ela leu --, e as decisoes ficam na tinta: a escolha em negrito, o
   porque em cinza. O gesto fica na terceira coluna, como na prancha; aberto, as opcoes ocupam a
   linha inteira, uma frase cada. */
.direcao .lido {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--ia-fundo); color: var(--tinta); font-size: 14px;
}
.direcao .lido strong { color: var(--ia); }
/* Os nomes levam `direcao-`: a primeira versao usou `.decisao`, que ja era a classe do bloco de
   decisao de sete cards, e a grade de 160 px espremeu todos eles (o momento, o repost, Curar). */
.direcao .direcao-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
  padding: 12px 0; border-top: 1px solid var(--borda);
}
.direcao .direcao-rotulo {
  grid-column: 1 / -1; margin: 0;
  font-size: 13px; font-weight: 600; color: var(--tinta-fraca);
}
.direcao .direcao-escolha { min-width: 0; overflow-wrap: anywhere; }
.direcao .direcao-escolha strong { display: block; font-weight: 600; }
.direcao .direcao-escolha .porque { display: block; color: var(--tinta-fraca); font-size: 14px; }
.direcao .direcao-irmas { display: block; margin-top: 4px; font-size: 14px; }
@media (min-width: 720px) {
  .direcao .direcao-linha { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 2px 16px; }
  .direcao .direcao-rotulo { grid-column: auto; padding-top: 2px; }
}
.direcao .direcao-trocar { justify-self: end; }
.direcao .direcao-trocar > summary {
  list-style: none; cursor: pointer; padding: 2px 0;
  font-size: 14px; font-weight: 600; color: var(--tinta);
  text-decoration: underline; text-underline-offset: 3px;
}
.direcao .direcao-trocar > summary::-webkit-details-marker { display: none; }
.direcao .direcao-trocar .fechar { display: none; }
.direcao .direcao-trocar[open] { grid-column: 1 / -1; justify-self: stretch; }
.direcao .direcao-trocar[open] > summary { text-align: right; }
.direcao .direcao-trocar[open] .abrir { display: none; }
.direcao .direcao-trocar[open] .fechar { display: inline; }
.direcao .direcao-opcoes, .direcao .direcao-opiniao { margin: 6px 0 0; }
.direcao .direcao-opcoes fieldset { margin: 0; padding: 0; border: 0; }
.direcao .direcao-opcoes .acoes, .direcao .direcao-opiniao .acoes { margin-top: 8px; }
.direcao .direcao-opiniao { padding-top: 10px; border-top: 1px dashed var(--borda); }
.direcao .direcao-miniatura {
  grid-column: 2; width: 96px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--raio-sm); margin-top: 6px;
}

/* --- A pagina da peca (U3 do PLANO-UX-AGENCIA, 13/10/2026) ------------------------------------ */
/* Uma anatomia para toda peca (`_peca_v2.html`): o cabecalho, como sai e o que a agencia decidiu
   lado a lado a partir de 1024 px, os gestos numa barra que acompanha a rolagem, e o "por
   dentro" fechado. Toda regra mora debaixo de `.peca-v2`, menos a linha da agencia e os gestos
   do card, que moram debaixo do proprio card. */
.peca-v2 { display: flex; flex-direction: column; gap: 16px; }
.peca-v2 .peca-cabeca { display: flex; flex-direction: column; gap: 8px; }
.peca-v2 .peca-sobre {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 14px; color: var(--tinta-fraca);
}
.peca-v2 .peca-sobre .etiqueta { margin: 0 0 0 4px; }
.peca-v2 .peca-titulo { margin: 0; font-size: 22px; line-height: 1.25; max-width: 860px; overflow-wrap: anywhere; }
.peca-v2 .peca-resumo { margin: 0; color: var(--tinta-fraca); max-width: 860px; }
@media (min-width: 1024px) { .peca-v2 .peca-titulo { font-size: 26px; } }
/* Os blocos da pagina sao cartoes, como na prancha: como sai, o que a agencia decidiu e o por
   dentro. */
.peca-v2 .bloco {
  margin: 0; padding: 18px 20px; border-radius: var(--raio); background: var(--papel);
  box-shadow: 0 1px 2px rgba(16, 23, 32, 0.06), 0 4px 12px rgba(16, 23, 32, 0.05);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .peca-v2 .bloco { box-shadow: 0 0 0 1px var(--borda); }
}
:where(:root[data-theme="escuro"]) .peca-v2 .bloco { box-shadow: 0 0 0 1px var(--borda); }
/* O que falta DELE e a unica pergunta da pagina: vem antes de tudo, no ambar, com o gesto ali
   mesmo -- e nao um paragrafo cinza que se le como aviso. */
.peca-v2 .falta-de-voce {
  background: var(--alerta-fundo); box-shadow: none; border: 1px solid var(--alerta);
  border-radius: var(--raio);
}
.peca-v2 .falta-de-voce .titulo-bloco {
  margin: 0 0 6px; align-items: center; justify-content: flex-start; gap: 8px;
}
.peca-v2 .falta-de-voce .titulo-bloco::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--alerta); flex: none;
}
.peca-v2 .falta-de-voce p { margin: 0 0 10px; }
.peca-v2 .falta-de-voce .acoes { margin-top: 4px; }
.peca-v2 .peca-colunas { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .peca-v2 .peca-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.peca-v2 .como-sai-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.peca-v2 .como-sai-topo .titulo-bloco { margin: 0; }
.peca-v2 .como-sai-topo .nota { margin: 0; }
.peca-v2 .como-sai-previa { margin: 12px 0; }
.peca-v2 .como-sai-previa:empty { display: none; }
/* O video como ele e: em pe (o que o Instagram mais recebe) fica estreito e alto, deitado fica
   largo -- `width: auto` deixa a proporcao do proprio arquivo decidir. O Reel montado ja e 9:16,
   com o tamanho dele (`.video-do-reel`). */
.peca-v2 .como-sai-previa .video-original {
  width: auto; max-width: 100%; height: auto; max-height: 560px; margin: 0 auto;
}
.peca-v2 .como-sai-previa .cartao-previa,
.peca-v2 .como-sai-previa .ilustracao-previa { width: 100%; height: auto; max-width: 520px; border-radius: var(--raio-sm); }
.peca-v2 .previa-do-story-recolhida { margin-top: 10px; }
.peca-v2 .texto-da-peca { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.peca-v2 .texto-da-peca label { font-size: 13px; font-weight: 600; color: var(--tinta-fraca); }
.peca-v2 .texto-da-peca textarea { width: 100%; min-height: 8em; }
.peca-v2 .texto-da-peca .salvo { margin-left: 6px; color: var(--ok-tinta); }
.peca-v2 .texto-da-peca .nao-salvo { color: var(--perigo); font-weight: 600; }
.peca-v2 .editar-cenas { margin-top: 12px; }
.peca-v2 .editar-cenas > summary { cursor: pointer; font-weight: 600; }
.peca-v2 .editor-de-cenas { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.peca-v2 .editor-de-cenas .etiqueta-bloco { margin: 6px 0 2px; }
.peca-v2 .enquete-editavel { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.peca-v2 .enquete-editavel legend { font-size: 13px; color: var(--tinta-fraca); margin-bottom: 4px; }

/* Os gestos: uma acao principal, Publicar agora e "Mais". Na pagina, a barra acompanha a rolagem
   (acima das abas, no celular); no card, e a fileira de baixo. */
.gestos-da-peca { display: flex; flex-direction: column; gap: 6px; }
.gestos-da-peca .gestos-fileira { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gestos-da-peca .gestos-fileira form { margin: 0; }
.gestos-da-peca .nota { margin: 0; }
.gestos-da-peca .mais-da-peca { position: relative; }
.gestos-da-peca .mais-da-peca > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  min-height: var(--toque); padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--papel); color: var(--tinta); font-weight: 600;
}
.gestos-da-peca .mais-da-peca > summary::-webkit-details-marker { display: none; }
.gestos-da-peca .mais-da-peca[open] { flex-basis: 100%; }
.gestos-da-peca .mais-da-peca[open] > summary { border-color: var(--tinta); }
.gestos-da-peca .mais-opcoes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-width: 560px; }
.gestos-da-peca .mais-opcoes form { margin: 0; }
.gestos-da-peca .mais-opcoes button:not(.opcao-de-descarte),
.gestos-da-peca .mais-opcoes a.botao { width: 100%; justify-content: flex-start; text-align: left; }
.gestos-da-peca .gesto-com-campo { display: flex; flex-direction: column; gap: 6px; }
.gestos-da-peca .outro-jeito > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  min-height: var(--toque); padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--papel); color: var(--tinta); font-weight: 600;
}
.gestos-da-peca .outro-jeito > summary::-webkit-details-marker { display: none; }
.gestos-da-peca .outro-jeito[open] > summary { border-color: var(--tinta); }
.gestos-da-peca .outro-jeito .gesto-com-campo { padding: 10px 2px 4px; }
.gestos-da-peca .gesto-com-campo label { font-size: 13px; color: var(--tinta-fraca); }
.peca-v2 > .gestos-da-peca {
  position: sticky; bottom: calc(var(--altura-das-abas) + env(safe-area-inset-bottom) + 8px); z-index: 5;
  padding: 12px 14px; border-radius: var(--raio);
  background: var(--papel); box-shadow: 0 0 0 1px var(--borda), 0 6px 18px rgba(16, 20, 18, 0.12);
}
@media (min-width: 1024px) { .peca-v2 > .gestos-da-peca { bottom: 16px; } }
.card .gestos-da-peca { margin-top: 12px; }

.peca-v2 .por-dentro > summary { cursor: pointer; font-weight: 600; color: var(--tinta-fraca); }
.peca-v2 .por-dentro-partes { display: grid; gap: 14px; margin-top: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .peca-v2 .por-dentro-partes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.peca-v2 .por-dentro-parte .etiqueta-bloco { margin-top: 0; }
.peca-v2 .por-dentro-parte .explica, .peca-v2 .por-dentro-parte p { margin: 0 0 6px; font-size: 14px; }

/* A linha da agencia no card (a vaga, o compacto do Hoje, o card da peca): o que ela decidiu,
   numa frase, com o "A agencia" no azul -- e trabalho da IA. */
.card .frase-da-agencia {
  display: inline-block; margin: 6px 0; padding: 6px 10px; border-radius: 8px;
  font-size: 13px; color: var(--ia); background: var(--ia-fundo);
}
.card .frase-da-agencia span { font-weight: 600; }
.card .falta-no-card { margin: 8px 0 4px; font-size: 14px; }
.card .abrir-a-peca { margin: 10px 0 0; font-size: 14px; }
.card .form-do-recado, .peca-v2 .form-do-recado { display: flex; flex-direction: column; gap: 6px; }
/* No celular a barra e a da prancha (`PecaMobile`): Aprovar largo, Publicar agora e "Mais" numa
   linha so, e a frase do porque fica para o computador. */
@media (max-width: 1023px) {
  .peca-v2 > .gestos-da-peca { padding: 10px; }
  .peca-v2 > .gestos-da-peca .gestos-fileira {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 8px;
  }
  .peca-v2 > .gestos-da-peca .gestos-fileira > form > button,
  .peca-v2 > .gestos-da-peca .gestos-fileira > .botao { width: 100%; padding: 8px 10px; font-size: 14px; }
  .peca-v2 > .gestos-da-peca .mais-da-peca[open] { grid-column: 1 / -1; }
  .peca-v2 > .gestos-da-peca > .nota { display: none; }
}

/* O que a triagem descartou fica separado, com folga, do que ja esta no calendario (U5). */
.bloco-da-triagem { margin-top: 28px; }
.card.guardado .linha-pronta a { color: var(--tinta); }

/* --- A Conta em abas (V11 do PLANO-UX-VIDA, 25/10/2026; a prancha `ux-vida/Conta2.dc.html`) -------
   Cada parte e uma vista (`?parte=`), com o seletor `.vida-vistas` no cabecalho (o mesmo da Agencia,
   do Calendario e dos Resultados). O submenu lateral da U6 (`.conta-submenu`, `.conta-pagina` em duas
   colunas) morreu. A Administracao, so do principal, e a ultima aba, mais fraca: leva a `/admin`. */
.vida-vistas a.vida-conta-administracao { font-weight: 500; }
.vida-conta-parte { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin-top: 8px; }
.vida-conta-parte > .grupo { margin: 4px 0 -4px; }
.vida-conta-parte section[id], .vida-conta-parte .grupo[id], .vida-conta-parte details[id],
.vida-conta-parte .vida-conta-linha[id] { scroll-margin-top: 90px; }

/* O cartao da pessoa: a foto (ou as iniciais em Night e lima), o nome, uma linha de quem e, e os
   chips do plano, das redes e do tema -- a direita no computador, embaixo no celular. */
.card.vida-perfil {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px 16px; align-items: center;
  margin: 0; padding: 18px 20px;
}
.vida-perfil-foto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  background: var(--sr-night); color: var(--sr-lime);
  font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600;
}
.vida-perfil-quem { min-width: 0; }
.vida-perfil .vida-perfil-quem h2 { margin: 0; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.vida-perfil-quem p {
  display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 4px 0 0;
  font-size: 13.5px; color: var(--tinta-fraca);
}
.vida-perfil-quem p span + span::before { content: "·"; margin-right: 8px; }
.vida-perfil-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.vida-perfil-chips a.vida-estado { text-decoration: none; }
@media (min-width: 720px) {
  .card.vida-perfil { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .vida-perfil-foto { width: 72px; height: 72px; font-size: 24px; }
  .vida-perfil-chips { grid-column: 3; flex-direction: column; align-items: flex-end; }
}
.vida-conta-recado { margin: 0; }

/* Os dois blocos curtos: cada linha diz o que e e o valor de hoje, e tem UM gesto. O que se edita e
   um `details`: o resumo e a linha inteira, e o formulario de sempre abre embaixo dela. */
.vida-conta-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1024px) {
  .vida-conta-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.card.vida-conta-bloco { margin: 0; padding: 16px 18px; display: grid; gap: 2px; align-content: start; }
.vida-conta-bloco h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
  font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600;
}
.vida-conta-icone {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 8px; background: var(--voce-fundo); color: var(--tinta);
}
.vida-conta-linha { border-top: 1px solid var(--borda); font-size: 14px; }
.vida-conta-bloco h3 + .vida-conta-linha { border-top: 0; }
div.vida-conta-linha, .vida-conta-linha > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 0;
}
.vida-conta-linha > summary { list-style: none; cursor: pointer; }
.vida-conta-linha > summary::-webkit-details-marker { display: none; }
.vida-conta-linha small { display: block; font-size: 12.5px; color: var(--tinta-fraca); overflow-wrap: anywhere; }
.vida-conta-gesto {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.vida-conta-linha > summary:hover .vida-conta-gesto { border-color: var(--tinta-fraca); }
.vida-conta-linha[open] > summary .vida-conta-gesto { background: var(--cta); border-color: var(--cta); color: var(--cta-tinta); }
.vida-conta-form { padding: 0 0 14px; }
.vida-conta-form > form { margin: 0; }
.vida-conta-form label[for] { margin-top: 0; }
.vida-conta-form .acoes { margin-top: 10px; }
.vida-conta-linha form.sair, .vida-conta-pilulas { margin: 0; }
/* O tema: tres pilulas, e cada uma e o envio. A escolhida tem a cor da aba ativa (`--cta`: Night no
   claro, lima no escuro). */
.vida-conta-pilulas { display: flex; gap: 4px; }
.vida-conta-pilulas button {
  min-height: 34px; padding: 0 12px; border-radius: var(--raio-pilula); font-size: 13px;
}
.vida-conta-pilulas button[aria-pressed="true"] {
  background: var(--cta); border-color: var(--cta); color: var(--cta-tinta);
}
/* No celular as tres pilulas descem para baixo do texto: ao lado, espremiam a linha em quatro. */
@media (max-width: 519px) {
  div.vida-conta-linha.vida-conta-tema { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* Uma linha da Conta: o que e, o que diz, e o gesto. Uma abaixo da outra, separadas por filete. */
.conta-linha {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--borda);
}
.conta-linha:first-child { border-top: 0; padding-top: 0; }
.conta-linha > form { margin: 0; }
.conta-linha-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.conta-linha-texto > label { margin-top: 0; }
.conta-linha-texto input[type="text"] { margin-bottom: 0; max-width: 420px; }
.conta-linha-gestos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conta-linha-gestos form { margin: 0; }
.conta-ok { color: var(--ok-tinta); }
/* A agenda (G8, 20/10/2026): a linha, a privacidade, a cidade e o que foi lido. */
.conta-conexoes > .conta-agenda { border-top: 1px solid var(--borda); padding: 14px 0; }
.conta-agenda > .conta-linha { border-top: 0; padding-top: 0; }
.conta-agenda-privacidade { margin: 0 0 10px; }
.conta-agenda-cidade { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; margin: 6px 0; }
.conta-agenda-cidade label { flex: 1 1 100%; margin: 0; }
.conta-agenda-cidade input { flex: 1 1 200px; max-width: 320px; margin: 0; }
.conta-agenda-lidos { list-style: none; margin: 8px 0 0; padding: 0; }
.conta-agenda-lidos li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--borda);
}
.conta-agenda-lidos form { margin: 0; }
/* O canal de conversa (W7 do PLANO-WHATSAPP): o WhatsApp e o Telegram, a ultima parte da lista de
   conexoes -- as linhas de sempre, sem cartao proprio; o codigo e os gestos de menos peso embaixo. */
.conta-conexoes > .vida-canal { display: block; border-top: 1px solid var(--borda); padding: 14px 0; }
.vida-canal > .titulo-bloco { margin: 0 0 4px; }
.vida-canal .vida-canal-linha:first-of-type { border-top: 0; }
.vida-canal-codigo { padding: 4px 0 12px; }
.vida-canal-codigo > p { margin: 6px 0; }
.vida-canal-mais { margin: 0 0 6px; }
.vida-canal-mais form { margin: 0; }
.conta-conexoes .ancora-da-linha { display: block; height: 0; scroll-margin-top: 90px; }


/* --- A ajuda: um marcador no titulo e um pop-up (U8, 14/10/2026) ------------------------------
   Era um `<details>` de uma linha inteira em 60 lugares (`_ajuda.html`). O marcador mora DENTRO do
   titulo: 24 px de desenho e 44 px de alvo, com margem negativa para nao crescer a linha. No
   celular o pop-up e uma folha que sobe do pe (acima da barra de abas, como "Mandar material");
   a partir de 720 px, uma janela no meio. O texto do corpo e o CONTEUDO ali dentro: 15 px na tinta. */
.info-marcador {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; margin: -12px -8px -12px 0; padding: 0; vertical-align: middle;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--tinta-fraca);
}
.info-marcador:hover, .info-marcador:focus-visible { color: var(--tinta); }
/* O titulo-bloco reparte o espaco entre o texto e o destaque do bloco: a margem automatica leva o
   marcador para junto do texto, e o destaque continua na ponta. */
.titulo-bloco > .info-marcador { margin-right: auto; }
.info-popover {
  box-sizing: border-box; color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borda); padding: var(--respiro); overflow-y: auto;
  max-height: calc(100dvh - var(--altura-das-abas) - 24px);
}
.info-popover:popover-open {
  display: block; position: fixed; inset: auto 0 calc(var(--altura-das-abas) + env(safe-area-inset-bottom)) 0;
  width: 100%; margin: 0; border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(16, 20, 18, 0.18);
}
.info-popover::backdrop { background: rgba(16, 20, 18, 0.45); }
.info-popover > h2 {
  margin: 0 0 10px; font-family: var(--fonte-titulo); font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em;
}
.info-popover .corpo-da-ajuda { font-size: 15px; color: var(--tinta); padding: 0; }
.info-popover .corpo-da-ajuda p { margin: 0 0 10px; }
.info-popover .corpo-da-ajuda .oquefaz { margin: 4px 0 0; font-size: 15px; }
.info-popover .corpo-da-ajuda .oquefaz dd { color: var(--tinta); }
.info-popover > .acoes { margin-top: 8px; }
@media (min-width: 720px) {
  .info-popover { max-height: calc(100dvh - 48px); }
  .info-popover:popover-open {
    inset: 0; margin: auto; width: min(520px, calc(100% - 32px)); height: fit-content;
    border-radius: var(--raio); box-shadow: 0 12px 40px rgba(16, 20, 18, 0.3);
  }
}
.info-popover .corpo-da-ajuda h3 {
  margin: 14px 0 6px; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600;
}
.info-popover .corpo-da-ajuda h3:first-child { margin-top: 0; }


/* --- O Hoje na prancha (U9, 14/10/2026; `Hoje.dc.html`) -------------------------------------------
   O card da vaga e o compacto: a linha de cima, o titulo (a primeira frase da peca), o texto em duas
   linhas, o chip da agencia, os gestos e, a partir de 720 px, a miniatura do que SAI a direita. */
.titulo-da-peca {
  margin: 8px 0 4px; font-family: var(--fonte-titulo); font-size: 18px; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.01em;
}
.texto-da-peca {
  margin: 0 0 4px; color: var(--tinta-fraca); font-size: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.miniatura-da-peca { display: none; }
@media (min-width: 720px) {
  .card.com-miniatura {
    display: grid; grid-template-columns: minmax(0, 1fr) 112px; column-gap: 16px; align-items: start;
  }
  .card.com-miniatura > * { grid-column: 1; }
  .card.com-miniatura > .frase-da-agencia { justify-self: start; }
  .card.com-miniatura > .miniatura-da-peca {
    display: block; grid-column: 2; grid-row: 1 / span 12; width: 112px; height: auto; max-height: 200px;
    object-fit: cover; border-radius: 12px; background: var(--coluna);
  }
}

/* No celular os quatro gestos cabem numa linha so: o "Pular" caia sozinho na linha de baixo a
   390 px (conferido na foto da verificacao da U9). Os discretos perdem folga, e nao tamanho de toque. */
@media (max-width: 719px) {
  .card.vaga .acoes { gap: 6px; }
  .card.vaga .acoes > form > button, .card.vaga .acoes > a.botao { padding-left: 14px; padding-right: 14px; }
  .card.vaga .acoes > form > button.discreta { padding-left: 8px; padding-right: 8px; }
}

/* --- Resultados e Estrategia, nas telas largas (U9, 14/10/2026) ------------------------------------
   Os dois estavam numa coluna de 760 px num computador de 1366. Agora `main.trabalho` (1280 px).
   Resultados virou o cockpit da V7 (no fim da folha); as relacoes em detalhe continuam lado a lado. */
.retratos-das-redes { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) {
  .retratos-das-redes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .retratos-das-redes > .card { min-width: 0; }
}

/* --- A Estrategia com a organizacao da Conta (15/10/2026, pedido dele) ----------------------
   O desenho da Conta da U6 (que virou abas na V11): o submenu das partes a esquerda (240 px) e
   o conteudo a direita; no celular o submenu vira a faixa que rola de lado. Na entrada, a direita
   e a tese e os quatro grupos, cada parte numa linha (como `.conta-linha`); na parte, o editor, e
   "O que isto muda" (U9) desce para baixo do submenu. Prefixo `estrategia-`, escopado em
   `.estrategia-pagina` (`.estrategia-tese` ja existia na U9 e continua sendo o cartao da tese). */
.estrategia-pagina { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.estrategia-coluna { display: contents; }
.estrategia-submenu {
  display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--coluna);
  max-width: 100%; overflow-x: auto; scrollbar-width: none; order: 0;
}
.estrategia-submenu a {
  display: inline-flex; align-items: center; flex: none; min-height: 38px; padding: 0 14px;
  white-space: nowrap; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: var(--tinta-fraca); text-decoration: none;
}
.estrategia-submenu a:hover { color: var(--tinta); }
.estrategia-submenu a.ativa { background: var(--papel); color: var(--tinta); }
.estrategia-submenu .grupo-do-submenu { display: none; }
/* A marca de atencao e um ponto, no celular e no computador: texto a mais no submenu era o que
   ele viu de errado na primeira versao. */
.estrategia-submenu a[data-pede-atencao]::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%;
  background: var(--alerta);
}
.estrategia-partes { display: flex; flex-direction: column; gap: 16px; min-width: 0; order: 1; }
.estrategia-partes > .grupo { margin: 14px 0 -4px; }
.estrategia-partes > .grupo:first-child { margin-top: 0; }
.estrategia-partes > .card { margin: 0; }
.editor-da-parte { min-width: 0; }
.o-que-muda { margin: 4px 0 0; order: 2; }
.o-que-muda > summary { cursor: pointer; font-weight: 600; font-family: var(--fonte-titulo); }
.o-que-muda p { margin: 8px 0 0; font-size: 14px; }
.numeros-da-parte { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.numeros-da-parte strong { font-variant-numeric: tabular-nums; }
.numeros-da-parte span { color: var(--tinta-fraca); }
/* Uma parte na entrada: o numero, o titulo com o que tem, e o gesto -- a linha da Conta. */
.estrategia-grupo > .titulo-bloco { margin-bottom: 4px; }
.estrategia-linha {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--borda);
  text-decoration: none; color: var(--tinta);
}
.estrategia-grupo > .estrategia-linha:first-of-type { border-top: 0; }
.estrategia-linha .numero-da-parte { flex: none; width: 22px; text-align: center; }
.estrategia-linha-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.estrategia-linha .titulo-da-parte { font-size: 16px; }
.estrategia-linha .abrir-a-parte { flex: none; margin: 0; }
.estrategia-linha:hover .abrir-a-parte { text-decoration: underline; }
.estrategia-linha.pede-atencao .abrir-a-parte { color: var(--alerta); }
.estrategia-linha.pede-atencao { box-shadow: inset 3px 0 0 var(--alerta); padding-left: 10px; }
@media (min-width: 1024px) {
  .estrategia-pagina { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
  /* A coluna (o submenu e, na parte, "O que isto muda") e mais alta que a tela em 900 px: fixa ao
     rolar, ela rola por dentro -- senao o que fica abaixo da dobra nunca aparece. */
  .estrategia-coluna {
    display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px;
    max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin;
  }
  .estrategia-submenu {
    position: sticky; top: 16px; flex-direction: column; gap: 2px; padding: 0;
    background: none; overflow: visible;
  }
  .estrategia-coluna .estrategia-submenu { position: static; }
  .estrategia-submenu a {
    display: flex; align-items: center; padding: 7px 12px; min-height: 0; white-space: normal;
    color: var(--tinta); font-weight: 500;
  }
  .estrategia-submenu a:hover { background: var(--papel); }
  .estrategia-submenu a.ativa { background: var(--papel); font-weight: 600; box-shadow: inset 3px 0 0 var(--acento); }
  .estrategia-submenu .grupo-do-submenu {
    display: block; margin: 12px 12px 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--tinta-fraca);
  }
  .estrategia-submenu .grupo-do-submenu:first-of-type { margin-top: 8px; }
  .o-que-muda { margin-top: 4px; }
  .o-que-muda > summary { pointer-events: none; list-style: none; font-size: 14px; }
  .o-que-muda > summary::-webkit-details-marker { display: none; }
  .o-que-muda p, .numeros-da-parte { font-size: 13px; }
}
.estrategia-pagina section[id], .estrategia-pagina .grupo[id] { scroll-margin-top: 90px; }

/* O "Abrir e decidir" / "Ver as respostas" do card compacto, na fileira dos gestos: o resumo parece
   um botao, e o card aberto ocupa a linha toda embaixo dele. */
.acoes > details.abrir-no-card.gesto-em-resumo > summary {
  display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 18px; box-sizing: border-box;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo);
}
.acoes > details.abrir-no-card.gesto-em-resumo > summary .ler-inteira,
.acoes > details.abrir-no-card.gesto-em-resumo > summary .recolher { color: var(--tinta); }
.acoes > details.abrir-no-card.gesto-em-resumo.principal > summary {
  background: var(--cta); border-color: var(--cta);
}
.acoes > details.abrir-no-card.gesto-em-resumo.principal > summary .ler-inteira,
.acoes > details.abrir-no-card.gesto-em-resumo.principal > summary .recolher { color: var(--cta-tinta); }
.acoes > details.abrir-no-card.gesto-em-resumo[open] { flex: 1 1 100%; }
.acoes > details.abrir-no-card.gesto-em-resumo[open] > summary { width: fit-content; }
.retratos-das-redes > .card { margin: 0; }

/* --- Os Gestos (G1 do PLANO-FORMATOS-E-RELACOES, 17/10/2026; a prancha `Main.dc.html`) ----------
   O card do gesto: a rede e a hora em que a peca saiu, o prazo no ambar dos avisos, o que fazer
   (o titulo), por que, e o texto pronto numa caixa -- Abrir (ou Copiar e abrir), Feito e Pular.
   Prefixo proprio: `.gestos-da-peca` e `.gesto-*` ja existiam na pagina da peca e na Agencia. */
.gesto-de-hoje .porque-do-gesto { margin: 0 0 8px; color: var(--tinta-fraca); font-size: 14px; }
.gesto-de-hoje .texto-do-gesto {
  margin: 0 0 4px; padding: 10px 12px; border-radius: 10px;
  background: var(--fundo); font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.colar-comentario textarea { width: 100%; }
.resposta-colada .texto-original { margin-top: 0; }
.abrir-a-origem { margin: 4px 0 16px; }

/* --- Pessoas (G2 do PLANO-FORMATOS-E-RELACOES, 18/10/2026) ------------------------------------
   A ficha (as pranchas `Pessoas.dc.html` e `PessoaMobile.dc.html`) e as linhas curtas que a area
   ainda usa; o zoom out da area (`vida-estagio`, `vida-pede`, `vida-pessoa`) mora na V5, no fim.
   Toda classe nova leva o prefixo `pessoas-` (a regra de 14/10/2026: `como-botao` ja existia). O
   azul fica com a agencia e o lima com o CTA: o estagio se distingue pelo tom do chao. */

/* As cinco areas e o mais a 390 px: o mais encolhe abaixo de 420 px; a letra nao, 12 px e o piso. */
@media (max-width: 420px) {
  .mandar-mais { flex-basis: 54px; }
  .mandar-mais svg { padding: 11px; }
  .areas a { padding: 6px 0; letter-spacing: -0.01em; }
}

.pessoas-cabeca {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 16px; margin-bottom: 16px;
}
.pessoas-cabeca h1 { margin: 0; }
.pessoas-esfriando { color: var(--alerta); font-weight: 600; }

/* As linhas curtas: o gesto de quem pede (a lista inteira), as viagens, quem esta aparecendo. */
.pessoas-lista-curta { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pessoas-pede {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; background: var(--fundo);
}
.pessoas-quem { flex: 1; min-width: 0; }
.pessoas-quem p { margin: 0; }
.pessoas-linha-de-cima { font-size: 15px; }
.pessoas-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 13px; font-weight: 700; color: var(--tinta); background: var(--borda);
}
.pessoas-avatar.grande { width: 52px; height: 52px; font-size: 16px; }
.pessoas-avatar.mini { width: 24px; height: 24px; font-size: 12px; }
.pessoas-estagio {
  display: inline-block; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 600;
  color: var(--tinta); background: var(--fundo); border: 1px solid var(--borda);
}
.pessoas-estagio.convivencia { background: var(--coluna); }
.pessoas-estagio.confianca { background: var(--marca); border-color: var(--marca); color: var(--faixa-tinta); }

/* A busca da lista. */
.pessoas-busca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.pessoas-busca label { font-size: 13px; color: var(--tinta-fraca); }
.pessoas-busca input { flex: 1; min-width: 180px; }

.pessoas-saude { font-weight: 600; white-space: nowrap; }
.pessoas-saude.em_dia { color: var(--ok-tinta); }
.pessoas-saude.esfriando { color: var(--alerta); }
.pessoas-saude.fria { color: var(--perigo); }
.pessoas-saude.acompanha { color: var(--tinta-fraca); }
/* Quem esta aparecendo (G3): os dois gestos ao lado no computador, embaixo no celular. */
.pessoas-aparece { flex-wrap: wrap; }
.pessoas-aparece-gestos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pessoas-aparece-gestos form { margin: 0; }
@media (max-width: 600px) {
  .pessoas-aparece-gestos { flex: 1 0 100%; }
}
/* As portas (G3): a ficha nova lida do perfil, e o estagio em tres opcoes que se leem. */
.pessoas-candidata { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.pessoas-estagios-na-entrada { border: 0; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.pessoas-opcao-de-estagio {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
}
.pessoas-opcao-de-estagio small { display: block; color: var(--tinta-fraca); font-size: 13px; }
.pessoas-opcao-de-estagio input { margin-top: 3px; }
.pessoas-intencoes { list-style: none; margin: 0; padding: 0; }
.pessoas-intencoes li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 8px 0; border-top: 1px solid var(--borda); font-size: 14px;
}
.pessoas-intencoes li:first-child { border-top: 0; }
.pessoas-intencoes .pessoas-o-que { flex: 1 1 200px; }
.pessoas-intencoes button.discreta { min-height: 32px; padding: 0 6px; font-size: 13px; }
.pessoas-vazio { margin-bottom: 16px; }
.pessoas-formulario { display: grid; gap: 6px; margin-top: 10px; }
.pessoas-formulario-curto { display: grid; gap: 6px; margin: 8px 0; }

/* A ficha. */
.pessoas-ficha-cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pessoas-ficha-cabeca h1 { margin: 0; }
.pessoas-redes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; font-size: 13px; font-weight: 600; }
.pessoas-rede { text-decoration: none; }
.pessoas-rede:hover { text-decoration: underline; }
.pessoas-rede-linkedin { color: var(--rede-linkedin); }
.pessoas-rede-instagram { color: var(--rede-instagram); }
.pessoas-rede-threads { color: var(--rede-threads); }
.pessoas-rede-whatsapp { color: var(--ok-tinta); }
.pessoas-rede-mini { font-size: 12px; font-weight: 600; }
.pessoas-ficha { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pessoas-ficha .rotulo { margin: 0; }
.pessoas-estagios { display: flex; gap: 6px; }
.pessoas-estagios .pessoas-opcao { flex: 1; padding: 0 8px; }
.pessoas-opcao.ativa { background: var(--marca); border-color: var(--marca); color: var(--faixa-tinta); }
.pessoas-opcoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pessoas-opcoes .pessoas-opcao { min-height: 36px; padding: 0 12px; font-size: 13px; }
.pessoas-linhas { margin: 0; display: flex; flex-direction: column; }
.pessoas-linhas > div {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--borda); font-size: 14px;
}
.pessoas-linhas dt { padding-top: 2px; font-size: 12px; color: var(--tinta-fraca); }
.pessoas-linhas dd { margin: 0; min-width: 0; }
.pessoas-mudar { display: inline; }
.pessoas-mudar > summary {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--tinta); text-decoration: underline;
}
.pessoas-mudar[open] { display: block; }
.pessoas-datas { list-style: none; margin: 0; padding: 0; }
.pessoas-datas li { display: flex; align-items: center; gap: 6px; }
.pessoas-datas button.discreta { min-height: 32px; padding: 0 6px; }
.pessoas-linha-do-tempo { list-style: none; margin: 8px 0 0; padding: 0; }
.pessoas-linha-do-tempo li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borda); font-size: 14px; }
.pessoas-quando { flex: none; width: 52px; padding-top: 2px; font-size: 12px; color: var(--tinta-fraca); }
.pessoas-o-que { min-width: 0; }
.pessoas-o-que button.discreta { min-height: 32px; padding: 0 6px; font-size: 13px; }
.pessoas-barra-da-ficha { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.pessoas-barra-da-ficha > * { flex: 1 1 140px; }
/* No celular, a mensagem (o gesto principal) ocupa a linha; Lembrar e Anotar dividem a de baixo. */
@media (max-width: 480px) {
  .pessoas-barra-da-ficha > :first-child { flex-basis: 100%; }
}
.pessoas-barra-da-ficha form { margin: 0; }
.pessoas-barra-da-ficha form button, .pessoas-barra-da-ficha a.botao { width: 100%; justify-content: center; }
.pessoas-privacidade { margin: 16px 0; text-align: center; }
.pessoas-tirar { text-align: center; margin-bottom: 24px; }
.gesto-de-relacao .rotulo a { color: var(--tinta); font-weight: 700; }

/* A data de alguem no Calendario: na grade, numa faixa propria; na lista, antes das vagas do dia. */
.pessoas-no-calendario {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
  background: var(--papel); border: 1px dashed var(--borda);
  color: var(--tinta); font-size: 13px; font-weight: 600; text-decoration: none;
}
.pessoas-no-calendario:hover { border-style: solid; }
.pessoas-no-calendario { flex-wrap: wrap; min-width: 0; }
.pessoas-no-calendario .etiqueta { margin: 0; }
.faixa-das-pessoas .pessoas-no-calendario { padding: 6px 8px; font-size: 12px; }
.faixa-das-pessoas .celula-da-grade { display: flex; flex-direction: column; gap: 6px; }

/* As intencoes (G4): o que lembrar, o "quando?" que falta, o cadeado do que e so dele, as viagens,
   o fim de ano e o que ele conta junto do Feito (o como foi, o presente, o dia combinado). */
.pessoas-cadeado { font-size: 0.85em; }
.pessoas-quando-falta {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 0;
}
.pessoas-quando-falta label { flex: 1 1 100%; font-size: 13px; font-weight: 600; }
.pessoas-quando-falta input { flex: 1 1 180px; min-width: 0; }
.pessoas-fim-de-ano { margin: 0 0 8px; font-size: 14px; }
.pessoas-fim-de-ano a { margin-left: 6px; }
.pessoas-na-viagem { display: flex; flex-direction: column; gap: 8px; }
.pessoas-quem-viaja { display: flex; align-items: center; gap: 10px; }
.pessoas-quem-viaja .pessoas-quem { flex: 1; min-width: 0; }
.pessoas-sugestao { align-self: flex-start; margin: 0; white-space: normal; }
.pessoas-na-viagem .acoes { margin: 0; }
.pessoas-material { margin: 16px 0; }
.gesto-conta { margin-top: 8px; display: grid; gap: 6px; }
.gesto-conta > summary { justify-self: start; }
.gesto-conta form { display: grid; gap: 6px; margin-top: 6px; }

/* O cardapio de cada rede (G5, 19/10/2026): a tabela da Estrategia > As redes, uma rede por
   cartao, lado a lado no computador; e as paginas do documento e do carrossel do Threads na
   previa da peca. */
.cardapio-redes { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.cardapio-rede { min-width: 0; border-left: 4px solid var(--cor-rede, var(--borda)); }
.cardapio-tabela { width: 100%; border-collapse: collapse; margin-top: 8px; }
.cardapio-tabela td {
  padding: 8px 6px; border-top: 1px solid var(--borda); vertical-align: top; font-size: 14px;
}
.cardapio-tabela td:first-child { font-weight: 600; width: 45%; }
.cardapio-tabela td .nota { display: block; font-weight: 400; margin: 2px 0 0; }
.cardapio-tabela .etiqueta { margin: 0 4px 4px 0; }
/* O formato que as regras escolhidas por ele vetam (G7): riscado, com o porque embaixo. */
.cardapio-vetado .cardapio-formato { text-decoration: line-through; }
.cardapio-rendeu { margin-top: 16px; }
.cardapio-rendeu p { margin: 0 0 8px; }
.cardapio-paginas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.cardapio-paginas img { flex: 0 0 auto; width: 150px; aspect-ratio: 4 / 5; object-fit: contain;
  border-radius: 8px; background: var(--fundo); }
@media (min-width: 1360px) {
  .cardapio-redes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- A fundacao de vida (V1 do PLANO-UX-VIDA, 22/10/2026; `Fundacao.dc.html`, `Hoje.dc.html`) --------
   Cinco regras, uma folha. Toda classe nova leva o prefixo `vida-` (a regra de 14/10/2026) e foi
   procurada nos templates antes de nascer. As cores sao os tokens `--voce`, `--origem-*` e
   `--saude-*` do `:root`: nenhuma cor mora aqui, e `test_contraste` le a conta dos dois temas.
   1. O estado tem cor E forma: `.vida-estado`. 2. O numero de impacto vai em Night com lima:
   `.vida-tile`. 3. A acao principal a esquerda, a descartavel a direita: `.acoes .fim`. 4. O
   titulo de grupo ganha o traco lima: `.grupo`. 5. A rede e a origem ficam na borda, nunca no fundo. */

/* O estado: uma de quatro pilulas, e o cinza fica so para o que esta pendente ou reservado.
   `ok` = em dia, `ia` = a agencia trabalhando, `voce` = espera voce (o unico lima que o claro
   aceita, porque a letra e Night a 13,6:1), `night` = publicado. */
.vida-estado {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 10px; border-radius: var(--raio-pilula);
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
  background: var(--fundo); color: var(--tinta); box-shadow: 0 0 0 1px var(--borda);
}
.vida-estado.ok { background: var(--ok-fundo); color: var(--ok-tinta); box-shadow: none; }
.vida-estado.ia { background: var(--ia-fundo); color: var(--ia); box-shadow: none; }
.vida-estado.voce { background: var(--voce); color: var(--voce-tinta); box-shadow: none; }
.vida-estado.night { background: var(--sr-night); color: var(--faixa-tinta); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .vida-estado.night { box-shadow: 0 0 0 1px var(--borda); }
}
:where(:root[data-theme="escuro"]) .vida-estado.night { box-shadow: 0 0 0 1px var(--borda); }

/* O numero de impacto: Night com o numero em lima. Nunca mais de quatro por linha, e nunca dois
   blocos de tiles seguidos (manual 6: fundo escuro e momento de impacto). */
.vida-tile {
  display: grid; gap: 3px; align-content: start; padding: 16px 18px; border-radius: var(--raio);
  background: var(--sr-night); color: var(--faixa-tinta);
}
.vida-tile > b {
  font-family: var(--fonte-titulo); font-size: 34px; font-weight: 600; line-height: 1;
  color: var(--sr-lime);
}
.vida-tile > span { font-size: 13px; color: var(--faixa-fraca); }
.vida-tile > .vida-tile-nota { margin-top: 4px; font-size: 12px; color: var(--faixa-tinta); }

/* A trilha: o fio lima que liga os agentes da esteira e para no que esta com a peca. E grafismo
   (o ciclo aberto do manual 6.1), e so se mexe quando ha trabalho: 150 a 300 ms, e o bloco de
   `prefers-reduced-motion` mais abaixo o desliga. */
.vida-trilha { display: block; width: 100%; height: auto; overflow: visible; fill: none; }
.vida-trilha .vida-trilha-feita { stroke: var(--sr-lime); stroke-width: 4; stroke-linecap: round; }
.vida-trilha .vida-trilha-falta { stroke: var(--borda); stroke-width: 4; stroke-linecap: round; }
.vida-trilha .vida-trilha-aqui { fill: var(--ia); stroke: none; transition: transform var(--motion) ease; }

/* O prazo do gesto: a palavra grande ("2h", "4d") e, embaixo, ate quando vale. */
.vida-prazo { display: grid; gap: 2px; justify-items: end; text-align: right; white-space: nowrap; }
.vida-prazo > b {
  font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; line-height: 1;
  letter-spacing: -0.02em;
}
.vida-prazo > small { font-size: 12px; color: var(--tinta-fraca); }

/* Mandar material: os cinco ladrilhos iguais -- o icone no disco lima, o nome e UMA linha. O
   texto longo mora DENTRO do `<details>`. O resumo e o ladrilho: ocupa a altura toda do que a
   fileira estica, e o conteudo fica no meio dela. */
.via-de-material.vida-material > summary {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center;
  min-height: 56px; padding: 10px 0;
}
.vida-material .icone-do-material {
  box-sizing: border-box; width: 36px; height: 36px; padding: 8px; border-radius: 50%;
  background: var(--voce); color: var(--voce-tinta);
}
.vida-material .texto-do-material strong { font-size: 14.5px; line-height: 1.25; }
.vida-material .texto-do-material small { font-size: 12.5px; line-height: 1.3; }
.via-de-material.vida-material:not([open]) > summary { height: 100%; }

/* O gesto de hoje (Hoje.dc.html): a borda da familia -- lima na relacao, a cor da rede na rede --,
   o corpo a esquerda, o prazo a direita e as acoes na linha de baixo. */
.card.gesto-de-hoje {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px; padding-left: calc(var(--respiro) + 6px);
}
.card.gesto-de-hoje > * { grid-column: 1 / -1; min-width: 0; }
.card.gesto-de-hoje::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 5px;
  border-radius: 0 5px 5px 0; background: var(--voce);
}
.card.gesto-de-hoje[class*="rede-"]::before { background: var(--ponto-rede); }
.card.gesto-de-hoje > .vida-gesto-corpo:has(+ .vida-prazo) { grid-column: 1; }
.card.gesto-de-hoje > .vida-prazo { grid-column: 2; grid-row: 2; align-self: start; padding-top: 6px; }
.card.gesto-de-hoje .vida-gesto-corpo > .titulo-da-peca { margin-top: 4px; }
.card.gesto-de-hoje .rotulo { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.card.gesto-de-hoje .acoes { margin-top: 10px; }
@media (max-width: 719px) {
  .card.gesto-de-hoje > .vida-prazo { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; padding-top: 0; }
}

/* O resto das pecas fora do plano, num toque: o Hoje e a lista do que pede a pessoa agora. */
.vida-mais { margin: 4px 0 0; }
.vida-mais > summary {
  display: flex; align-items: center; justify-content: center; min-height: var(--toque);
  cursor: pointer; list-style: none; font-weight: 600; color: var(--tinta);
  background: var(--papel); border: 1px dashed var(--borda); border-radius: var(--raio);
}
.vida-mais > summary::-webkit-details-marker { display: none; }
.vida-mais[open] > summary { margin-bottom: 12px; }

/* --- V2: o Hoje funciona de verdade (22/10/2026) --------------------------------------------- */

/* O convite que se lembra do clique: o card no segundo estado e de VOCE -- o fundo lima claro (o
   escuro tem o seu), a pilula "voce abriu o WhatsApp as 08:12" e a data ao lado do "Marquei". */
.card.gesto-de-hoje.vida-abriu { background: var(--voce-fundo); }
form.inline.vida-marquei { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.vida-marquei label { display: inline; margin: 0; font-size: 14px; color: var(--tinta); }
.vida-marquei input[type="date"] { display: inline-block; width: auto; margin: 0; }

/* Copiado: o proprio botao diz o que fazer em seguida, por 3 s, sem sair da pagina. */
button.copiar.vida-copiado { border-color: var(--ok-tinta); }

/* O link de exemplo da demonstracao nao abre nada: parece botao, e diz que nao e. Recua pela
   borda tracejada e pelo cursor, e nao por opacidade (a regra do contraste). */
span.botao[aria-disabled="true"] {
  display: inline-flex; align-items: center;
  min-height: var(--toque); padding: 0 18px;
  font-weight: 600; color: var(--tinta-fraca); background: var(--fundo);
  border: 1px dashed var(--borda); border-radius: 10px; cursor: not-allowed;
}

/* Mandar material: o gravador mora no ladrilho do audio, sem a margem de cima das acoes. */
.via-de-material .gravador .acoes { margin: 0; align-items: center; }

/* --- V2b: mandar material em segundo plano (23/10/2026) ----------------------------------------- */

/* O estado que nao terminou: a quinta pilula, so no card "Recebido" (e onde mais um trabalho falhar).
   O ambar de alerta, e nao o vermelho de erro do sistema: o que ele mandou esta guardado, e ha o
   que fazer ("Mandar de novo"). */
.vida-estado.erro { background: var(--alerta-fundo); color: var(--alerta); box-shadow: inset 0 0 0 1px var(--alerta); }
.vida-estado .girando { width: 11px; height: 11px; border-width: 2px; }

/* "Recebido" fora do Hoje: a folha fecha, e a confirmacao fica alguns segundos no pe da tela. */
.vida-recebido {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  transform: translateX(-50%); max-width: min(92vw, 520px); margin: 0;
  padding: 10px 16px; border-radius: var(--raio);
  background: var(--sr-night); color: var(--faixa-tinta); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  font-size: 14px; line-height: 1.4;
}
.vida-recebido a { color: var(--sr-lime); font-weight: 600; }
@media (min-width: 1024px) { .vida-recebido { bottom: 24px; } }

/* O recado da recusa dentro do proprio ladrilho (o limite, o tipo): a folha fica aberta. */
.vida-recusa { margin: 8px 0 0; color: var(--alerta); font-weight: 600; }

/* --- A visao do usuario comum e o beta (V9 do PLANO-UX-VIDA, 24/10/2026) --------------------
   O feedback, e o plano e o teto de cada conta no Admin (o tema virou pilulas na V11). */
.conta-feedback textarea { width: 100%; }
.texto-do-feedback { display: block; white-space: pre-wrap; margin-top: 4px; }
.admin-plano-da-conta {
  display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin: 10px 0 0;
}
.admin-plano-da-conta label { flex: 1 1 100%; font-size: 14px; font-weight: 600; }
.admin-plano-da-conta input, .admin-plano-da-conta select { flex: 1 1 200px; }

/* --- O feedback da agencia (V4 do PLANO-UX-VIDA, 24/10/2026; `Feedback.dc.html`) -------------
   A leitura da semana em Night (o momento de impacto da pagina), tres colunas -- o que rendeu, o
   que a agencia ja mudou, o que ela recomenda -- e os quatro numeros do que ela tem de voce. */
.vida-leitura-da-semana {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  margin: 8px 0 0; padding: 18px 20px; border-radius: var(--raio);
  background: var(--sr-night); color: var(--faixa-tinta);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .vida-leitura-da-semana { box-shadow: 0 0 0 1px var(--borda); }
}
:where(:root[data-theme="escuro"]) .vida-leitura-da-semana { box-shadow: 0 0 0 1px var(--borda); }
.vida-leitura-da-semana .vida-leitura-rotulo { margin: 0; font-size: 13px; font-weight: 600; color: var(--sr-lime); }
.vida-leitura-da-semana h2 {
  margin: 4px 0 0; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.02em; color: var(--faixa-tinta);
}
.vida-leitura-da-semana .vida-leitura-detalhe { margin: 8px 0 0; font-size: 13.5px; color: var(--faixa-fraca); }
.vida-leitura-da-semana > .vida-tile { min-width: 160px; max-width: 240px; background: var(--sr-surface-dark); }
@media (max-width: 719px) {
  .vida-leitura-da-semana { grid-template-columns: minmax(0, 1fr); }
  .vida-leitura-da-semana h2 { font-size: 19px; }
  .vida-leitura-da-semana > .vida-tile { max-width: none; }
}
.vida-feedback-nota { margin-top: 8px; }

.vida-feedback {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  align-items: start; margin-top: 16px;
}
@media (max-width: 1023px) { .vida-feedback { grid-template-columns: minmax(0, 1fr); } }
.vida-feedback > .card { margin: 0; }
.vida-feedback .titulo-bloco { align-items: center; justify-content: flex-start; gap: 8px; margin-top: 0; }
.vida-feedback-ponto {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--sr-lime);
}
.vida-feedback-ponto.ia { background: var(--ia); }
/* O que so voce pode decidir: o contorno lima (o lima e VOCE, e aqui e traco, nao texto). */
.vida-feedback .vida-feedback-recomenda { box-shadow: 0 0 0 2px var(--sr-lime); }
.vida-feedback-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; }
.vida-feedback-lista > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; }
.vida-feedback-marca {
  font-family: var(--fonte-titulo); font-weight: 700; white-space: nowrap; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.vida-feedback-marca.vida-sinal-mais { color: var(--ok-tinta); }
.vida-feedback-marca.vida-sinal-menos { color: var(--perigo); }
.vida-feedback-lista small { color: var(--tinta-fraca); font-size: 12px; white-space: nowrap; }
.vida-recomendacoes .vida-recomendacao { margin: 0; font-weight: 600; line-height: 1.4; }
.vida-recomendacoes .explica { margin-top: 2px; }
.vida-recomendacoes .acoes { margin-top: 8px; gap: 6px; }
.vida-recomendacoes .acoes button, .vida-recomendacoes .acoes .botao {
  min-height: 36px; padding: 0 12px; font-size: 13.5px;
}

.vida-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 719px) { .vida-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vida-tiles > .vida-tile .vida-tile-nota { color: var(--faixa-alerta); }
/* No escuro o Night encosta no chao: o contorno separa (o par de sempre, `test_contraste`). */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .vida-tiles > .vida-tile { box-shadow: 0 0 0 1px var(--borda); }
}
:where(:root[data-theme="escuro"]) .vida-tiles > .vida-tile { box-shadow: 0 0 0 1px var(--borda); }
.vida-por-assunto { margin-top: 12px; }
.vida-por-assunto > summary { cursor: pointer; font-weight: 600; color: var(--tinta); min-height: var(--toque); display: flex; align-items: center; }
.vida-por-assunto > .retrato { margin-top: 4px; }

/* --- Relacoes: o zoom out (V5 do PLANO-UX-VIDA, 22/10/2026; `Relacoes.dc.html`) -------------------
   Tres estagios com a saude de cada um, quem pede voce em cards, a lista em cards com a saude na
   borda e tres resumos. Nenhuma cor nova: a rampa dos estagios e o claro, o `--voce-fundo` e o
   Night; a saude e a de `--saude-*` (o verde, o ambar e o vermelho do tema). A ficha nao muda. */

/* Os tres estagios: o numero grande e a legenda; a barra e a saude. Clicar filtra a lista. */
.vida-estagios {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0;
}
.vida-estagio {
  display: grid; gap: 2px; align-content: start; padding: 16px 18px;
  border-radius: var(--raio); color: var(--tinta); text-decoration: none;
  background: var(--fundo); box-shadow: 0 0 0 1px var(--borda);
}
.vida-estagio.convivencia { background: var(--voce-fundo); box-shadow: none; }
.vida-estagio.confianca {
  background: var(--sr-night); color: var(--faixa-tinta); box-shadow: none;
  --saude-em-dia: var(--sr-lime); --saude-fria: var(--faixa-perigo);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .vida-estagio.confianca { box-shadow: 0 0 0 1px var(--borda); }
}
:where(:root[data-theme="escuro"]) .vida-estagio.confianca { box-shadow: 0 0 0 1px var(--borda); }
.vida-estagio.ativo, .vida-estagio:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.vida-estagio-nome { font-size: 13px; font-weight: 600; color: var(--tinta-fraca); }
.vida-estagio.confianca .vida-estagio-nome, .vida-estagio.confianca .vida-estagio-legenda { color: var(--faixa-fraca); }
.vida-estagio > b {
  font-family: var(--fonte-titulo); font-size: 32px; font-weight: 600; line-height: 1;
}
.vida-estagio.confianca > b { color: var(--sr-lime); }
.vida-estagio-legenda { font-size: 13px; color: var(--tinta-fraca); }
/* A barra de saude: tres segmentos que crescem pelo numero de cada um (o `flex-grow` vai inline). */
.vida-saude {
  display: flex; gap: 2px; height: 6px; margin-top: 10px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--tinta) 10%, transparent);
}
.vida-estagio.confianca .vida-saude { background: color-mix(in srgb, var(--faixa-tinta) 14%, transparent); }
.vida-saude > i { display: block; flex: 0 1 0; height: 100%; }
.vida-saude-em-dia { background: var(--saude-em-dia); }
.vida-saude-esfriando { background: var(--saude-esfriando); }
.vida-saude-fria { background: var(--saude-fria); }
.vida-capacidade { margin: 8px 0 0; }
@media (max-width: 719px) {
  .vida-estagios { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vida-estagio {
    grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 16px;
    align-items: center;
  }
  .vida-estagio > b { grid-column: 2; grid-row: 1 / span 2; font-size: 28px; }
  .vida-estagio .vida-saude { grid-column: 1 / -1; margin-top: 6px; }
}

/* Quem pede voce: uma fila horizontal de cards -- o avatar na cor do estagio, o nome, uma linha do
   gesto, ate quando vale e o botao do verbo. O resto fica atras do "mais N". */
.vida-pedem {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px;
  overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity;
}
.vida-pede {
  display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center;
  padding: 12px; scroll-snap-align: start; border-radius: var(--raio-sm);
}
.vida-pede > b { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.vida-pede > small { font-size: 12px; line-height: 1.3; color: var(--tinta-fraca); }
.vida-pede > button { margin-top: auto; min-height: 36px; }
.vida-pede > .vida-pede-prazo { color: var(--tinta-fraca); }
.vida-pede-mais { background: var(--fundo); box-shadow: none; border: 1px dashed var(--borda); align-content: center; }
.vida-pede .pessoas-avatar.confianca, .vida-pessoa .pessoas-avatar.confianca {
  background: var(--sr-night); color: var(--sr-lime); box-shadow: 0 0 0 1px var(--borda);
}
.vida-pede .pessoas-avatar.convivencia, .vida-pessoa .pessoas-avatar.convivencia {
  background: var(--voce); color: var(--voce-tinta);
}

/* O bloco que abre embaixo (o "ver todos", as viagens, o que lembrar, quem aparece, os formularios
   do pe): um card inteiro, aberto pelo botao -- ou pelo `#` do endereco, como sempre. */
.vida-bloco-da-relacao { margin: 12px 0 0; }
.vida-bloco-da-relacao[open] { border-top: 0; padding-top: var(--respiro); }
.vida-bloco-da-relacao > .titulo-bloco { margin-top: 4px; }

/* A lista: um card por pessoa, e a saude na borda esquerda. O toque no card abre a ficha. */
.vida-pessoas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.vida-pessoas > li { min-width: 0; }
.vida-pessoa {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center;
  column-gap: 10px; row-gap: 2px; height: 100%; padding: 12px;
  border-radius: var(--raio-sm); border-left: 4px solid var(--borda);
  color: var(--tinta); text-decoration: none;
}
.vida-pessoa:hover { border-left-color: var(--tinta); }
.vida-pessoa.em-dia { border-left-color: var(--saude-em-dia); }
.vida-pessoa.esfriando { border-left-color: var(--saude-esfriando); }
.vida-pessoa.fria { border-left-color: var(--saude-fria); }
.vida-pessoa > .pessoas-avatar { grid-row: 1 / span 3; }
.vida-pessoa > b { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.vida-pessoa > small { font-size: 12px; color: var(--tinta-fraca); grid-column: 2; }
.vida-pessoa > .etiqueta { grid-column: 2; justify-self: start; margin: 2px 0 0; }
@media (max-width: 1099px) {
  .vida-pessoas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .vida-pessoas { grid-template-columns: minmax(0, 1fr); }
}

/* Os filtros no fim do titulo da lista: links, e a busca atras da lupa. */
.vida-filtros-da-lista { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.vida-filtros-da-lista a { color: var(--tinta); text-decoration: none; }
.vida-filtros-da-lista a:hover { text-decoration: underline; }
.vida-filtros-da-lista a.ativo { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.vida-busca-icone {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px;
}
.vida-busca:not([open]) { height: 0; overflow: hidden; }
.vida-busca[open] { margin: 0 0 12px; }

/* Tres resumos numa linha: o numero, a linha e o botao. */
.vida-resumo-das-relacoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 28px 0 0;
}
.vida-resumo {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 6px 12px;
  background: var(--papel); border-radius: var(--raio); padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(16, 23, 32, 0.06), 0 4px 12px rgba(16, 23, 32, 0.05);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .vida-resumo { box-shadow: 0 0 0 1px var(--borda); }
}
:where(:root[data-theme="escuro"]) .vida-resumo { box-shadow: 0 0 0 1px var(--borda); }
.vida-resumo > .botao { grid-column: 2; justify-self: start; min-height: 36px; }
.vida-resumo-numero {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--fundo); box-shadow: 0 0 0 1px var(--borda);
  font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; color: var(--tinta);
}
.vida-resumo-numero.night { background: var(--sr-night); color: var(--sr-lime); }
.vida-resumo-numero.voce { background: var(--voce); color: var(--voce-tinta); box-shadow: none; }
.vida-resumo-texto { display: grid; gap: 2px; min-width: 0; }
.vida-resumo-texto > b { font-size: 15px; }
.vida-resumo-texto > .nota { margin: 0; overflow-wrap: anywhere; }

/* O pe da area: o que se faz de vez em quando. */
.vida-pe-da-area { margin: 24px 0 8px; }

/* --- O Calendario no tempo e as vistas dele (V6 do PLANO-UX-VIDA, 24/10/2026) -----------------
   A prancha `ux-vida/Calendario.dc.html`. As quatro vistas no cabecalho (o mesmo seletor da
   Agencia), a barra de andar no tempo com o periodo em Space Grotesk, as semanas que vem em
   miniatura (uma barra por peca na cor da rede: cheia = com texto, meia = reserva) e o card do
   que ja saiu, com a miniatura e os tres numeros. */
.cabeca-do-calendario .vida-vistas { margin: 0 0 12px; }
/* Quatro vistas no celular: menos respiro em cada uma, para "Guardados" caber sem rolar. */
@media (max-width: 419px) {
  .cabeca-do-calendario .vida-vistas a { padding: 0 9px; font-size: 13.5px; }
}

.vida-navegar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px;
}
.vida-navegar .botao { gap: 6px; min-height: 40px; padding: 0 14px; font-size: 14px; }
.vida-navegar span.botao[aria-disabled="true"] { gap: 6px; min-height: 40px; padding: 0 14px; font-size: 14px; }
/* Na celula estreita da grade, "publicado · 1.240 viram" quebra a linha em vez de vazar. */
.pe-da-grade .vida-estado {
  white-space: normal; max-width: 100%; padding: 1px 7px; border-radius: 8px; font-size: 12px;
  line-height: 1.35;
}
.vida-periodo {
  margin-left: 6px; font-family: var(--fonte-titulo); font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--tinta); white-space: nowrap;
}

/* As semanas em miniatura: os sete dias, e uma barra por peca. */
.vida-mini-semanas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px;
}
.vida-mini-semana {
  padding: 12px; border-radius: var(--raio); background: var(--papel);
  box-shadow: 0 0 0 1px var(--borda);
}
.vida-mini-cabeca {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 2px 10px; margin: 0 0 8px; font-size: 13px; color: var(--tinta-fraca);
}
.vida-mini-cabeca a {
  font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; color: var(--tinta);
}
.vida-mini-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.vida-mini-dia {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 52px; padding: 4px;
  border-radius: var(--raio-sm); background: var(--fundo);
}
.vida-mini-dia.hoje { box-shadow: inset 0 0 0 2px var(--acento); }
.vida-mini-nome { font-size: 12px; line-height: 1.3; color: var(--tinta-fraca); overflow-wrap: anywhere; }
.vida-mini-barra {
  display: block; height: 7px; border-radius: 4px; background: var(--ponto-rede, var(--tinta-fraca));
}
/* A reserva e meia barra: o contorno na cor da rede e a metade cheia. */
.vida-mini-barra.vida-meia {
  box-sizing: border-box; border: 1px solid var(--cor-rede, var(--tinta-fraca));
  background: linear-gradient(90deg, var(--cor-rede, var(--tinta-fraca)) 50%, transparent 50%);
}

/* O que ja saiu (e o que esta guardado): a miniatura, a rede e a hora, a primeira frase, e os
   numeros a direita; a borda da rede, como o gesto. */
.fila.vida-ja-saiu { gap: 10px; }
.card.vida-publicado {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 6px 16px; align-items: center; padding-left: calc(var(--respiro) + 6px);
}
.card.vida-publicado::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 5px;
  border-radius: 0 5px 5px 0; background: var(--cor-rede, var(--borda));
}
.vida-publicado-imagem {
  grid-row: span 2; display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; overflow: hidden; padding: 6px; border-radius: var(--raio-sm);
  background: var(--sr-night); color: var(--sr-lime);
  font-family: var(--fonte-titulo); font-size: 12px; line-height: 1.2; text-align: center;
  overflow-wrap: anywhere;
}
.vida-publicado-imagem > span {
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; line-clamp: 4;
}
.vida-publicado-imagem:has(img) { padding: 0; }
.vida-publicado-imagem img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vida-publicado-corpo { min-width: 0; }
.vida-publicado-onde {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  margin: 0; font-size: 13px; color: var(--tinta-fraca);
}
.vida-publicado-titulo { margin: 2px 0 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.vida-publicado-titulo a { color: var(--tinta); text-decoration: none; }
.vida-publicado-titulo a:hover { text-decoration: underline; }
.vida-publicado-numeros { display: flex; gap: 18px; margin: 0; }
.vida-publicado-numeros > div { display: flex; flex-direction: column-reverse; min-width: 52px; }
.vida-publicado-numeros dd {
  margin: 0; font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; line-height: 1.1;
  color: var(--tinta); white-space: nowrap;
}
.vida-publicado-numeros dt { font-size: 12px; color: var(--tinta-fraca); white-space: nowrap; }
.vida-publicado-numeros.vida-sem-numero { flex-direction: column; gap: 2px; text-align: right; }
.vida-publicado-numeros.vida-sem-numero > span {
  font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; color: var(--tinta);
}
.vida-publicado-numeros.vida-sem-numero > small { font-size: 12px; color: var(--tinta-fraca); }
.vida-publicado > .vida-publicado-acoes { grid-column: 2 / -1; margin: 0; }
.vida-publicado > .vida-publicado-acoes .botao, .vida-publicado > .vida-publicado-acoes button {
  min-height: 36px;
}
@media (max-width: 719px) {
  .card.vida-publicado { grid-template-columns: 56px minmax(0, 1fr); }
  .vida-publicado-imagem { grid-row: auto; width: 56px; height: 56px; }
  .vida-publicado > .vida-publicado-numeros { grid-column: 1 / -1; }
  .vida-publicado-numeros.vida-sem-numero { text-align: left; }
  .vida-publicado > .vida-publicado-acoes { grid-column: 1 / -1; }
}

/* --- Resultados, o cockpit (V7 do PLANO-UX-VIDA, 24/10/2026; `ux-vida/Resultados.dc.html`) -------
   Quatro faixas: os tiles do trabalho (Night, o numero em lima), um card por rede com a cor dela
   na borda de cima, onde voce esta (as barras do ritmo e a da saude) e as recomendacoes, lado a
   lado no computador; embaixo, recolhidos. Nenhuma cor nova: a rede e `--ponto-rede`, a saude
   `--saude-*`, o grafico `currentColor` da serie. */
.vida-cockpit-cabeca {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
}
.vida-cockpit-cabeca h1 { margin-bottom: 0; }
.vida-cockpit-cabeca .vida-vistas { margin: 0; }
/* A nota dos tiles do trabalho e uma conta, e nao um alerta (o ambar e o "conte um caso" da Agencia). */
.vida-tiles.vida-trabalhou > .vida-tile .vida-tile-nota { color: var(--faixa-tinta); }

.vida-redes-que-renderam { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1024px) {
  .vida-redes-que-renderam { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card.vida-rede-card { position: relative; overflow: hidden; margin: 0; padding-top: calc(var(--respiro) + 2px); }
.card.vida-rede-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ponto-rede);
}
.vida-rede-card-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vida-rede-card-topo .titulo-bloco { margin: 0; }
.vida-rede-card-topo .nota { margin: 0; white-space: nowrap; }
.vida-rede-card .grafico { margin: 6px 0 2px; }
.vida-numero-do-objetivo { margin: 4px 0 6px; font-size: 13px; color: var(--tinta-fraca); }
.vida-numero-do-objetivo > b {
  margin-right: 4px; font-family: var(--fonte-titulo); font-size: 28px; font-weight: 600;
  line-height: 1; color: var(--tinta);
}
.vida-rede-card .nota { margin: 6px 0 0; }
.vida-frases-da-rede { gap: 6px; font-size: 13.5px; }

/* O grafico de linha (`graficos.linha`): a grade fraca, a area suave, so o ultimo ponto marcado. */
.vida-grafico-grade { stroke: var(--borda); stroke-width: 1; stroke-dasharray: 2 4; }
.vida-grafico-area { fill: currentColor; fill-opacity: 0.14; stroke: none; }
.vida-grafico-traco { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.vida-grafico-ponto { fill: currentColor; }
.vida-grafico-ultimo { fill: currentColor; stroke: var(--papel); stroke-width: 2; }

/* Onde voce esta (3) e o que a agencia recomenda (4): lado a lado a partir de 1024 px. */
.vida-cockpit-baixo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; align-items: start; }
@media (min-width: 1024px) {
  .vida-cockpit-baixo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vida-cockpit-baixo > div { min-width: 0; }
.card.vida-onde-esta, .card.vida-recomenda { margin: 0; }
.card.vida-onde-esta .nota { margin: 0 0 12px; }
.card.vida-onde-esta .nota:last-child { margin-bottom: 0; }
.vida-barra {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) 44px; gap: 10px; align-items: center;
  margin: 0 0 10px; font-size: 13.5px;
}
.vida-barra-rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.vida-barra-trilho {
  display: block; height: 10px; border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--tinta) 10%, transparent);
}
.vida-barra-trilho > i { display: block; height: 100%; border-radius: 5px; }
.vida-barra[class*="rede-"] .vida-barra-trilho > i { background: var(--ponto-rede); }
.vida-barra .vida-saude.vida-barra-trilho { display: flex; height: 10px; margin: 0; }
.vida-barra .vida-saude.vida-barra-trilho > i { border-radius: 0; }
.vida-barra-numero { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Os recolhidos do pe: o quadro, as relacoes em detalhe e o uso do mes. O resumo tem o peso de um
   titulo de grupo, e o `#` do endereco os abre (painel.js). */
.vida-recolhido { margin: 22px 0 0; }
.vida-recolhido > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: var(--toque);
  cursor: pointer; font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600; color: var(--tinta);
}
.vida-recolhido > summary .quantas { font-family: var(--fonte-texto); font-size: 13px; }
.vida-recolhido > summary { list-style: none; }
.vida-recolhido > summary::-webkit-details-marker { display: none; }
.vida-recolhido > summary::before {
  content: ""; width: 7px; height: 7px; margin: 0 4px 0 2px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--motion-fast) ease;
}
.vida-recolhido[open] > summary::before { transform: rotate(45deg); }
.vida-recolhido[open] > summary { margin-bottom: 10px; }

/* --- A Estrategia com a IA (V8 do PLANO-UX-VIDA, 24/10/2026; `Estrategia.dc.html`) ------------
   A entrada: a tese em Night (o momento de impacto) e as nove partes numa grade, cada cartao com
   o grupo em caixa alta, o estado, o titulo, o resumo e a barra de quatro tracos (lima = VOCE: e
   traco, e nao texto). A parte: "Conte com as suas palavras" em Night e a proposta da agencia com
   o contorno da IA, lado a lado a partir de 1200 px; embaixo, o que esta valendo, uma linha por
   campo (`.vida-campo`), e o "editar" abre o formulario de sempre ali mesmo. */
.vida-estrategia-cabeca { margin: 0 0 14px; }
.vida-estrategia-cabeca h1 { margin-bottom: 2px; }
.vida-estrategia-cabeca .explica { margin: 0; }

.vida-tese {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  margin: 0 0 8px; padding: 18px 20px; border-radius: var(--raio);
  background: var(--sr-night); color: var(--faixa-tinta);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .vida-tese { box-shadow: 0 0 0 1px var(--borda); }
}
:where(:root[data-theme="escuro"]) .vida-tese { box-shadow: 0 0 0 1px var(--borda); }
.vida-tese-rotulo { margin: 0; font-size: 13px; font-weight: 600; color: var(--sr-lime); }
.vida-tese .vida-tese-texto {
  margin: 4px 0 0; font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600;
  line-height: 1.35; letter-spacing: -0.02em; color: var(--faixa-tinta);
}
.vida-tese-acoes { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
a.botao.vida-botao-no-escuro, button.vida-botao-no-escuro {
  background: var(--sr-surface-dark); color: var(--faixa-tinta);
  border-color: color-mix(in srgb, var(--faixa-fraca) 40%, transparent);
}
a.botao.vida-botao-no-escuro:hover, button.vida-botao-no-escuro:hover { border-color: var(--faixa-tinta); }
@media (max-width: 719px) {
  .vida-tese { grid-template-columns: minmax(0, 1fr); }
  .vida-tese .vida-tese-texto { font-size: 18px; }
  .vida-tese-acoes { flex-direction: row; flex-wrap: wrap; }
}

/* As nove partes: 3x3 no computador, 2 no tablet, 1 no celular. A que pede atencao fica ambar. */
.vida-partes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .vida-partes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vida-partes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vida-parte {
  display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 16px;
  border-radius: var(--raio); background: var(--papel); color: var(--tinta); text-decoration: none;
  box-shadow: 0 0 0 1px var(--borda);
}
.vida-parte:hover { box-shadow: 0 0 0 1px var(--tinta-fraca); }
.vida-parte.vida-parte-pede { background: var(--alerta-fundo); box-shadow: 0 0 0 1px var(--alerta); }
.vida-parte-topo {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tinta-fraca);
}
.vida-parte.vida-parte-pede .vida-parte-estado { color: var(--alerta); }
.vida-parte-titulo { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600; line-height: 1.25; }
.vida-parte-resumo { font-size: 13px; line-height: 1.4; color: var(--tinta-fraca); }
.vida-parte.vida-parte-pede .vida-parte-resumo { color: var(--alerta); }
.vida-parte-barra { display: flex; gap: 4px; margin-top: auto; padding-top: 6px; }
.vida-parte-barra > i {
  flex: 1; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--tinta) 12%, transparent);
}
.vida-parte-barra > i.feito { background: var(--voce); }

/* O editor da parte: os dois paineis. */
.vida-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 1200px) { .vida-editor { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.vida-conte {
  display: grid; gap: 10px; align-content: start; padding: 18px 20px; border-radius: var(--raio);
  background: var(--sr-night); color: var(--faixa-tinta);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .vida-conte { box-shadow: 0 0 0 1px var(--borda); }
}
:where(:root[data-theme="escuro"]) .vida-conte { box-shadow: 0 0 0 1px var(--borda); }
.vida-conte .vida-conte-titulo {
  margin: 0; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; color: var(--sr-lime);
}
.vida-conte-explica { margin: 0; font-size: 14px; line-height: 1.45; color: var(--faixa-fraca); }
.vida-conte-form { display: grid; gap: 8px; margin: 0; }
.vida-conte .vida-conte-rotulo { margin: 0; font-size: 13px; font-weight: 600; color: var(--faixa-tinta); }
.vida-conte textarea {
  min-height: 92px; background: var(--sr-surface-dark); color: var(--faixa-tinta);
  border: 1px solid color-mix(in srgb, var(--faixa-fraca) 40%, transparent);
}
.vida-conte textarea::placeholder { color: var(--faixa-fraca); }
.vida-conte-gravador .acoes { margin-top: 0; gap: 6px; }
.vida-conte-gravador .acoes button { padding: 0 14px; font-size: 14px; }
.vida-conte-relogio { font-size: 13px; color: var(--faixa-fraca); }
.vida-conte audio { width: 100%; }
.vida-conte button.vida-conte-de-novo { color: var(--faixa-fraca); }

.vida-proposta {
  display: grid; gap: 2px; align-content: start; padding: 16px 18px; border-radius: var(--raio);
  background: var(--papel); box-shadow: 0 0 0 2px var(--ia);
}
.vida-proposta-rotulo {
  margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ia);
}
.vida-proposta-vazia { margin: 0; font-size: 14px; color: var(--tinta-fraca); }
.vida-proposta .acoes { margin-top: 12px; gap: 6px; flex-wrap: nowrap; }
.vida-proposta .acoes button, .vida-proposta .acoes a.botao { padding: 0 12px; font-size: 14px; white-space: nowrap; }
.vida-proposta .vida-campo { padding: 6px 0; }
.vida-acrescentar { margin: 0; padding: 10px 0 2px; border-top: 1px solid var(--borda); font-size: 13px; color: var(--tinta-fraca); }
.vida-acrescentar > a:first-child { font-weight: 600; text-decoration: none; }
.vida-proposta-iguais > summary {
  cursor: pointer; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--tinta-fraca);
  border-top: 1px solid var(--borda);
}
.vida-novo {
  display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: var(--raio-pilula);
  background: var(--ia-fundo); color: var(--ia); font-size: 12px; letter-spacing: 0; text-transform: none;
}

/* Uma linha do que esta valendo (e da proposta): o rotulo, o valor e o "editar". O formulario de
   sempre abre logo abaixo, na largura toda (`.vida-aberto-pelo-gesto`). */
.vida-atual { display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 6px; }
.vida-campo {
  display: grid; grid-template-columns: minmax(100px, 150px) minmax(0, 1fr) auto; gap: 4px 14px;
  align-items: start; padding: 10px 0; border-top: 1px solid var(--borda); font-size: 14px;
}
.vida-atual > .vida-campo:first-child, .vida-atual > :first-child > .vida-campo:first-child { border-top: 0; }
.vida-campo-rotulo {
  padding-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--tinta-fraca); overflow-wrap: anywhere;
}
.vida-campo-valor { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.vida-campo-vazio .vida-campo-valor { color: var(--tinta-fraca); }
.vida-campo-detalhe, .vida-campo-porque {
  display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--tinta-fraca);
}
.vida-campo-porque { color: var(--ia); }
a.vida-campo-editar { font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
a.vida-campo-editar:hover { text-decoration: underline; }
.vida-campo > .vida-aberto-pelo-gesto, .vida-campo > details { grid-column: 1 / -1; }
.vida-campo-edicao form { display: grid; gap: 6px; margin: 6px 0 4px; }
.vida-frases { margin: 0; padding: 0 0 0 16px; }
.vida-frases > li + li { margin-top: 2px; }
.vida-frases-todas { list-style: none; margin: 6px 0 0; padding: 0; }
.vida-frases-todas > li {
  display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borda);
}
.vida-frases-todas > li:last-child { border-bottom: 0; }
.vida-frases-todas .frase { flex: 1; font-size: 14px; line-height: 1.5; }
.vida-frases-todas form { margin: 0; }
.vida-frases-todas button { min-height: 30px; padding: 0 10px; font-size: 12px; }
.vida-lista-inteira form.acrescentar { margin-top: 8px; }
.vida-proposta .vida-campo { grid-template-columns: minmax(0, 1fr) auto; }
.vida-proposta .vida-campo-rotulo { grid-column: 1 / -1; }
.vida-proposta .vida-campo-valor { grid-column: 1; }
/* O que mora DENTRO de uma linha (o cartao antigo de um bloco) nao e outro cartao. */
.vida-atual .lista-de-frases, .vida-atual .card { box-shadow: none; background: none; padding: 8px 0; margin: 0; }
.vida-atual .temas { margin: 0; padding: 0; list-style: none; gap: 0; }
.vida-atual .lista-de-frases .temas > li.tema { padding: 0; border: 0; border-radius: 0; background: none; }
.vida-peso { display: flex; align-items: center; gap: 10px; }
.vida-peso > b { min-width: 3ch; font-variant-numeric: tabular-nums; }
.vida-peso > .barra { flex: 1; max-width: 220px; margin: 0; }
.vida-sem-ia, .vida-recado-da-parte {
  margin: 0; padding: 10px 14px; border-radius: var(--raio-sm); font-size: 14px;
  background: var(--fundo); color: var(--tinta-fraca); box-shadow: 0 0 0 1px var(--borda);
}
.vida-recado-da-parte { margin: 0 0 12px; background: var(--ok-fundo); color: var(--ok-tinta); box-shadow: none; }
.editor-da-parte > .vida-vistas { margin: 0; }
@media (max-width: 719px) {
  .vida-campo { grid-template-columns: minmax(0, 1fr) auto; }
  .vida-campo-rotulo { grid-column: 1 / -1; }
  .vida-campo-valor { grid-column: 1; }
}
.vida-parte-grupo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vida-campo-da-proposta:first-of-type { border-top: 0; }
.vida-temas > .titulo-bloco { margin: 6px 0 2px; font-size: 13px; }

/* --- O Hoje v2: a mesa do dia e o deck em retrato (V10 do PLANO-UX-VIDA, 24/10/2026) -----------
   As pranchas `Hoje2.dc.html` e `HojeMobile2.dc.html`. A MESA e a faixa Night que so o Hoje tem (a
   referencia de "onde estou"); os CAPITULOS filtram o deck na pagina; o DECK e uma grade de cards em
   retrato, todos com a mesma anatomia (`_post.html`), tres por linha a 880 px e um por vez no
   celular, como um feed. Nenhuma cor nova: o Night e o lima do manual, `--sr-border-dark` e o
   primitivo da borda sobre o Night (que nao muda com o tema, como a faixa). */
.vida-mesa {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px; margin: 0 0 4px; padding: 16px 22px 14px; border-radius: 16px;
  background: var(--sr-night); color: var(--faixa-tinta);
}
/* O ciclo aberto do manual (6.1), atras de tudo: grafismo, e nao brilho. */
.vida-mesa::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px;
  border-radius: 50%; border: 34px solid var(--sr-lime); opacity: 0.12; pointer-events: none;
}
.vida-mesa > * { position: relative; z-index: 1; min-width: 0; }
.vida-mesa-cabeca { display: grid; align-content: start; }
.vida-mesa-data {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0;
  font-family: var(--fonte-titulo); font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sr-lime);
}
.vida-mesa-data .vida-estado { text-transform: none; letter-spacing: 0; font-family: var(--fonte-texto); }
.vida-mesa h1 {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 0;
  font-size: 30px; line-height: 1.1; color: var(--faixa-tinta);
}
.vida-mesa .info-marcador { color: var(--faixa-fraca); }
.vida-mesa .info-marcador:hover, .vida-mesa .info-marcador:focus-visible { color: var(--faixa-tinta); }
.vida-mesa-feito { margin: 6px 0 0; font-size: 14px; color: var(--faixa-fraca); }
.vida-mesa-curto { display: none; }
.vida-mesa-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; }
.vida-mesa-numero {
  display: grid; gap: 2px; min-width: 92px; padding: 8px 12px; border-radius: 12px;
  background: var(--sr-surface-dark); border: 1px solid var(--sr-border-dark);
  color: var(--faixa-tinta); text-decoration: none;
}
a.vida-mesa-numero:hover { border-color: var(--faixa-fraca); }
.vida-mesa-numero > b { font-family: var(--fonte-titulo); font-size: 22px; line-height: 1; color: var(--sr-lime); }
.vida-mesa-numero.agencia > b { color: var(--faixa-tinta); }
.vida-mesa-numero > span { font-size: 12px; color: var(--faixa-fraca); }
.vida-mesa-mandar {
  grid-column: 1 / -1; display: none; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--sr-border-dark);
}
.vida-mesa-mandar-rotulo { margin-right: 4px; font-size: 12.5px; color: var(--faixa-fraca); }
.vida-mesa-mandar > button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 7px;
  border-radius: var(--raio-pilula); border: 1px solid var(--sr-border-dark);
  background: var(--sr-surface-dark); color: var(--faixa-tinta); font-size: 13px; font-weight: 600;
}
.vida-mesa-mandar > button:hover { border-color: var(--faixa-fraca); }
.vida-mesa-mandar > button > svg {
  box-sizing: content-box; padding: 5px; border-radius: 50%;
  background: var(--sr-lime); color: var(--sr-night);
}
/* No computador as cinco pilulas abrem a folha; no celular quem a abre e o "+" da barra. */
@media (min-width: 1024px) { .vida-mesa-mandar { display: flex; } }
/* No escuro o chao tambem e Night: a mesa ganha o contorno, como o cartao. */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="claro"])) .vida-mesa { box-shadow: 0 0 0 1px var(--borda); }
}
:where(:root[data-theme="escuro"]) .vida-mesa { box-shadow: 0 0 0 1px var(--borda); }

/* Os enderecos de antes (`/hoje#gestos`...): ancoras sem altura, logo acima dos capitulos. */
.vida-ancoras { height: 0; }
.vida-ancoras > span { display: block; scroll-margin-top: 12px; }

/* Os capitulos: pilulas que filtram o deck. A acesa e a do botao principal, como as vistas. */
.vida-capitulos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 10px; }
.vida-capitulo {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: var(--raio-pilula); border: 1px solid var(--borda); background: var(--papel);
  color: var(--tinta-fraca); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.vida-capitulo:hover { color: var(--tinta); }
.vida-capitulo.ativo { background: var(--cta); border-color: var(--cta); color: var(--cta-tinta); }
.vida-capitulo > b { color: inherit; }
.vida-capitulos-nota { margin-left: auto; font-size: 12.5px; color: var(--tinta-fraca); white-space: nowrap; }

/* O deck: tres por linha a 880 px, dois numa tela media, um no celular. */
.vida-deck { display: grid; gap: 14px; }
.vida-deck-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
/* O divisor do deck (a revisao dele da V10, 25/10/2026): "Para fazer hoje" com o traco lima, "Pode
   ficar para depois" com o traco neutro. E a regua de 24 h de `hoje.ate_amanha`. */
.vida-metade { display: grid; gap: 8px; min-width: 0; }
.vida-divisor {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 4px 0 0;
  font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600; color: var(--tinta);
}
.vida-divisor-marca { align-self: center; width: 18px; height: 4px; border-radius: 2px; }
.vida-metade-hoje .vida-divisor-marca { background: var(--voce); }
.vida-metade-depois .vida-divisor-marca { background: var(--borda); }
.vida-metade-depois .vida-divisor { color: var(--tinta-fraca); }
.vida-divisor-n { font-size: 14px; font-weight: 600; color: var(--tinta-fraca); }
.vida-divisor > small { font-family: var(--fonte-texto); font-size: 12.5px; font-weight: 500; color: var(--tinta-fraca); }
.vida-metade-depois .vida-post { border-color: var(--borda); }
.vida-post {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; min-width: 0;
  border-radius: 16px; border: 1px solid var(--borda); background: var(--papel); color: var(--tinta);
}
.vida-post.vida-agora { border-color: var(--voce); box-shadow: 0 0 0 3px var(--voce); }
.vida-post.vida-abriu { background: var(--voce-fundo); }
.vida-post-opcional, .vida-post-espera { border-style: dashed; border-color: var(--tinta-fraca); background: var(--fundo); }
.vida-post-espera .vida-post-titulo { color: var(--tinta-fraca); font-weight: 500; }
.vida-post-topo {
  display: flex; align-items: center; gap: 6px; min-width: 0; padding: 9px 12px 0;
  font-size: 12.5px; color: var(--tinta-fraca); white-space: nowrap;
}
.vida-post-topo .marca-rede { font-size: 12.5px; }
.vida-post-topo .pessoas-avatar.mini { width: 22px; height: 22px; font-size: 12px; }
.vida-post-quem { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--tinta); }
.vida-post-quando { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vida-post-prazo {
  flex: none; margin-left: auto; padding: 2px 9px; border-radius: var(--raio-pilula);
  background: var(--chao); color: var(--tinta);
  font-family: var(--fonte-titulo); font-size: 13px; font-weight: 700;
}
.vida-post-prazo.urgente { background: var(--voce); color: var(--voce-tinta); }

/* O visual do que sai: a capa, a foto, o prazo grande, o avatar, a fala, o envio. */
.vida-post-visual {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; height: 100px; margin: 8px 12px 0; overflow: hidden; border-radius: 10px;
  background: var(--chao); text-align: center;
}
.vida-visual-capa > img, .vida-visual-foto > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.vida-visual-capa { background: var(--sr-night); }
/* O que mora no meio do visual desce abaixo dos selos do canto (o tipo e a demonstracao). */
.vida-visual-envio { padding-top: 22px; }
/* O gesto, sobrio (a revisao dele da V10, 25/10/2026): o texto pronto ou o porque num bloco claro
   -- o prazo grande em Night roubava o olhar da pagina. O de pessoa leva o avatar ao lado, no
   fundo de quem espera voce. */
.vida-visual-gesto, .vida-visual-pessoa {
  flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 10px;
  padding: 30px 12px 6px; background: var(--fundo); color: var(--tinta); text-align: left;
}
.vida-visual-pessoa { background: var(--voce-fundo); }
.vida-visual-pessoa > .vida-post-avatar { flex: none; }
.vida-post-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--voce); color: var(--voce-tinta); font-size: 16px; font-weight: 700;
}
.vida-visual-fala { align-items: stretch; justify-content: flex-start; padding: 30px 12px 6px; background: var(--fundo); text-align: left; }
.vida-post-opcional .vida-visual-fala { background: var(--papel); }
.vida-post-fala {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-size: 13.5px; line-height: 1.4;
}
.vida-visual-envio { gap: 8px; background: var(--ia-fundo); color: var(--ia); }
.vida-post-icone { flex: none; }
.vida-post-selo, .vida-post-demo {
  position: absolute; top: 8px; padding: 2px 8px; border-radius: var(--raio-pilula);
  font-size: 12px; font-weight: 700; line-height: 1.4;
}
.vida-post-selo { left: 8px; background: var(--papel); color: var(--tinta); }
.vida-post-demo { right: 8px; background: var(--alerta-fundo); color: var(--alerta); font-weight: 600; }

.vida-post-corpo { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 7px 12px 0; }
.vida-post-titulo { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 15px; line-height: 1.25; }
.vida-post-titulo > span:first-child {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0;
}
.vida-post-titulo a { color: inherit; text-decoration: none; }
.vida-post-titulo a:hover { text-decoration: underline; }
.vida-post-titulo .info-marcador { flex: none; margin-top: -3px; }
.vida-post-linha {
  display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0;
  font-size: 12.5px; color: var(--ia); white-space: nowrap;
}
.vida-post-linha > svg { flex: none; }
.vida-post-linha > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vida-post-corpo > .aviso { margin: 4px 0 0; font-size: 13px; }
.vida-post-corpo > .link-da-materia { margin: 0; font-size: 13px; }

/* As acoes sao as do dono de sempre (o gesto, a vaga, o card do Hoje, o envio...): aqui so o tamanho. */
.vida-post-acoes { min-width: 0; padding: 8px 12px 10px; }
.vida-post-acoes .acoes { margin: 0; gap: 5px; }
.vida-post-acoes :where(button), .vida-post-acoes .botao,
.vida-post-acoes span.botao[aria-disabled="true"],
.vida-post-acoes > details > summary,
.vida-post-acoes .acoes > details.abrir-no-card.gesto-em-resumo > summary {
  min-height: 34px; padding: 0 10px; font-size: 13px;
}
.vida-post-acoes button.discreta { padding: 0 4px; }
.vida-post-acoes .vida-marquei label { font-size: 13px; }
.vida-post-acoes .vida-marquei input[type="date"] { width: 9.5em; min-height: 34px; padding: 0 8px; font-size: 13px; }
.vida-post-acoes > details:not(.abrir-no-card) > summary,
.vida-post-acoes > details.abrir-no-card > summary {
  display: inline-flex; align-items: center; width: fit-content; cursor: pointer; list-style: none;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); font-weight: 600;
}
.vida-post-acoes > details > summary::-webkit-details-marker { display: none; }
.vida-post-acoes > details + details { margin-top: 6px; }
.vida-post-acoes .gesto-conta { margin-top: 8px; }
/* A pergunta do dia: o formulario de sempre, recolhido no "Responder". */
.vida-responder .form-da-leitura { margin-top: 8px; }
.vida-responder .explica { margin: 8px 0 0; font-size: 13px; }
/* Abrir a decisao dentro do card (o "Abrir e decidir", a opiniao, o "Ja combinei") o abre na linha
   inteira do deck: o card de sempre nao cabe numa coluna de 280 px. */
.vida-deck > .vida-post:has(.vida-post-acoes details[open]) { grid-column: 1 / -1; }
.vida-deck > .vida-post:has(.vida-post-acoes details[open]) > .vida-post-visual { display: none; }

/* O pedido da agencia (S1 do PLANO-SEGUNDO-OLHAR, 25/10/2026; a prancha `Pedido.dc.html`). Azul e a
   agencia (o selo "A agencia pede"); lima e voce (o tempo, o botao e o campo que abre dentro do
   card). O campo abre no lugar dos botoes, sem sair do Hoje, e o texto longo quebra. */
.vida-post-pedido_da_agencia .vida-post-selo { background: var(--ia-fundo); color: var(--ia); }
.pedido-linha { flex-wrap: wrap; white-space: normal; color: var(--tinta-fraca); }
.pedido-linha > .vida-estado { flex: none; padding: 1px 8px; font-size: 12px; }
/* O tempo: a pilula verde-clara de voce (a prancha), com a letra da tinta. */
.pedido-tempo {
  flex: none; padding: 0 7px; border-radius: var(--raio-pilula);
  background: var(--voce-fundo); color: var(--tinta); font-weight: 700;
}
/* Lima e voce: o botao principal do pedido (o `summary` que abre o campo, e o Mandar). */
.pedido-abrir > summary.botao {
  display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 18px;
  font-weight: 600; border: 1px solid var(--borda); border-radius: 10px;
  color: var(--tinta); background: var(--fundo);
}
.vida-post-pedido_da_agencia .vida-post-acoes .principal,
.pedido-campo button.principal,
.pedido-na-direcao button.pedido-mandar,
.pedido-na-direcao a.botao.pedido-mandar {
  background: var(--voce); border-color: var(--voce); color: var(--voce-tinta);
}
.vida-post-pedido_da_agencia .vida-post-acoes .principal:hover,
.pedido-campo button.principal:hover:not(:disabled) {
  background: var(--voce); border-color: var(--voce-tinta);
}
.pedido-linha > span { overflow-wrap: anywhere; }
.pedido-linha .info-marcador { flex: none; width: 22px; height: 22px; }
.pedido-nota { margin: 2px 0 0; font-size: 12px; }
.pedido-caminhos { flex-wrap: wrap; align-items: flex-start; }
.pedido-abrir { min-width: 0; }
.pedido-abrir > summary { list-style: none; cursor: pointer; }
.pedido-abrir > summary::-webkit-details-marker { display: none; }
.vida-post-acoes .pedido-abrir > summary.botao { min-height: 34px; padding: 0 10px; font-size: 13px; }
/* Aberto, o campo ocupa a linha inteira do card, e os outros caminhos esperam embaixo. */
.pedido-caminhos:has(.pedido-abrir[open]) > .pedido-abrir:not([open]) { display: none; }
.pedido-abrir[open] { flex: 1 1 100%; }
.pedido-abrir[open] > summary { display: none; }
.pedido-campo {
  display: grid; gap: 6px; min-width: 0; margin-top: 4px; padding: 10px;
  border-radius: 10px; background: var(--voce-fundo); box-shadow: inset 0 0 0 1px var(--voce);
}
.pedido-campo textarea, .pedido-campo input[type="file"] { width: 100%; min-width: 0; }
.pedido-campo audio { width: 100%; }
.pedido-campo .acoes { margin: 0; flex-wrap: wrap; }
.pedido-campo .relogio { font-size: 13px; font-variant-numeric: tabular-nums; }
.pedido-dica { margin: 0; font-size: 12.5px; color: var(--tinta-fraca); overflow-wrap: anywhere; }
.pedido-pulado {
  display: grid; grid-template-rows: none; gap: 4px; align-content: start; align-self: start;
  min-width: 0; padding: 10px 12px;
}
/* A linha do pulado nao e um retrato: no celular ela nao leva a altura do card (os 420 px). */
.vida-post.pedido-pulado { min-height: 0; }
.pedido-pulado-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; overflow-wrap: anywhere; }
.pedido-pulado .nota { margin: 0; font-size: 12px; }
.pedido-sozinho { max-width: 420px; }
/* A linha "O que a agencia pediu" da direcao: enquanto espera, o fundo de voce; a pilula diz o
   estado com cor e forma (regra 1). */
.pedido-na-direcao .direcao-rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* O rotulo e a pilula numa linha so, em cima (a prancha), em qualquer largura; embaixo, o que
   foi pedido e o porque, e o "Gravar agora" a direita. */
.direcao .pedido-na-direcao .direcao-rotulo { grid-column: 1 / -1; padding-top: 0; }
@media (min-width: 720px) {
  .direcao .pedido-na-direcao .direcao-escolha { grid-column: 1 / 3; }
}
.direcao .pedido-na-direcao.espera { padding: 12px; border-radius: 10px; background: var(--voce-fundo); }
.pedido-na-direcao .pedido-campo { background: var(--papel); }
.pedido-ouvir { display: block; width: 100%; max-width: 320px; margin-top: 6px; }
.pedido-na-direcao a.botao.pedido-mandar { border-radius: 10px; }
.direcao .pedido-gravar-agora { justify-self: end; }
.direcao .pedido-gravar-agora > summary {
  list-style: none; cursor: pointer; padding: 2px 0;
  font-size: 14px; font-weight: 600; color: var(--tinta);
  text-decoration: underline; text-underline-offset: 3px;
}
.direcao .pedido-gravar-agora > summary::-webkit-details-marker { display: none; }
.direcao .pedido-gravar-agora .fechar { display: none; }
.direcao .pedido-gravar-agora[open] { grid-column: 1 / -1; justify-self: stretch; }
.direcao .pedido-gravar-agora[open] > summary { text-align: right; }
.direcao .pedido-gravar-agora[open] .abrir { display: none; }
.direcao .pedido-gravar-agora[open] .fechar { display: inline; }

/* O react (S3 do PLANO-SEGUNDO-OLHAR, 26/10/2026): o gravador de VIDEO no card -- a camera da
   frente em pe, como um espelho (a gravacao nao sai espelhada), o mesmo `gravador.js` do audio --
   e a pergunta do direito do video de outra pessoa. Lima e voce: o botao e o campo. */
.pedido-video { display: grid; gap: 8px; min-width: 0; }
.pedido-camera {
  display: block; width: 100%; max-width: 300px; aspect-ratio: 9 / 16; max-height: min(52vh, 520px);
  object-fit: cover; border-radius: 14px; background: var(--chao); justify-self: center;
}
.pedido-camera[data-camera] { transform: scaleX(-1); }
.pedido-camera[hidden] { display: none; }
.pedido-video .acoes { justify-content: center; }
.pedido-direito { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--voce-fundo); }
.pedido-direito p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.pedido-direito .acoes { margin: 0; flex-wrap: wrap; }

/* O "confirme os numeros" (S5 do PLANO-SEGUNDO-OLHAR, 27/10/2026): as caixas dentro do card, um
   numero por linha com a origem dele. Lima e voce: o campo e o Confirmar; o texto quebra. */
.pedido-numeros { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pedido-numeros legend { padding: 0; margin-bottom: 2px; }
.pedido-numero {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0; min-height: var(--toque);
  padding: 8px 10px; border-radius: 8px; background: var(--papel); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--borda);
}
.pedido-numero:has(input:checked) { box-shadow: inset 0 0 0 2px var(--voce); }
.pedido-numero input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--voce-tinta); }
.pedido-numero-texto { min-width: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.react-de-terceiro {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 2px; font-size: 14px;
  overflow-wrap: anywhere; min-width: 0;
}
.react-de-terceiro input { flex: none; margin-top: 3px; }
.react-direito { display: none; margin: 4px 0 0; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 10px; min-width: 0; }
.react-direito legend { padding: 0 4px; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.react-direito label { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; }
form:has(.react-de-terceiro input:checked) .react-direito { display: grid; }
.react-credito { margin: 6px 0 0; font-size: 13px; color: var(--tinta-fraca); overflow-wrap: anywhere; }
/* Os stories do dia (S6 do PLANO-SEGUNDO-OLHAR): a sequencia em 9:16, lado a lado e inteira
   (`contain`, como as fotos do momento), com o numero da ordem no canto. */
.rotina-stories {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px;
  list-style: none; margin: 0 0 10px; padding: 0; min-width: 0;
}
.rotina-story {
  position: relative; aspect-ratio: 9 / 16; min-width: 0; overflow: hidden;
  background: var(--midia-fundo); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.rotina-story img, .rotina-story video { display: block; width: 100%; height: 100%; object-fit: contain; }
.rotina-numero {
  position: absolute; left: 6px; top: 6px; min-width: 22px; padding: 1px 6px;
  border-radius: 999px; background: var(--papel); color: var(--tinta);
  font-size: 12px; font-weight: 700; text-align: center;
}
.rotina-caixa { overflow-wrap: anywhere; }
/* A palestra e os cortes dela na pagina do conteudo (S4). */
.palestra-cortes { min-width: 0; margin-bottom: 22px; }
.palestra-lista { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 10px; }
.palestra-corte { min-width: 0; overflow-wrap: anywhere; }
.palestra-corte-titulo { font-weight: 600; }
.palestra-corte-chamada { display: block; color: var(--tinta); }
/* O corte da palestra (S4): qual corte e, e o caminho para a palestra inteira. */
.corte-da-palestra { margin: 6px 0 0; font-size: 13px; color: var(--tinta-fraca); overflow-wrap: anywhere; }

/* O pe: as outras pecas e os pedidos sem prazo, numa lista compacta -- um toque abre o card. */
.vida-outras {
  display: grid; gap: 0; margin-top: 14px; padding: 10px 16px; border-radius: var(--raio);
  background: var(--papel); box-shadow: 0 0 0 1px var(--borda);
}
.vida-outras > .grupo { margin: 0 0 4px; font-size: 16px; }
.vida-outras-grupo { margin: 8px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--tinta-fraca); }
.vida-outra { border-top: 1px solid var(--borda); }
.vida-outra > summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  min-height: var(--toque); padding: 4px 0; cursor: pointer; list-style: none; font-size: 14px;
}
.vida-outra > summary::-webkit-details-marker { display: none; }
.vida-outra-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vida-outra-abrir {
  padding: 4px 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo);
  font-size: 13px; font-weight: 600;
}
.vida-outra-abrir > .recolher, .vida-outra[open] .vida-outra-abrir > .ler-inteira { display: none; }
.vida-outra[open] .vida-outra-abrir > .recolher { display: inline; }
.vida-outra > .card { margin: 4px 0 12px; box-shadow: none; border: 1px solid var(--borda); }
.vida-outras > .vida-mais { margin-top: 8px; }

/* No celular o deck e um feed: um card por vez, de largura inteira, com encaixe na rolagem; a mesa
   encosta na faixa do topo, e os capitulos rolam de lado. */
@media (max-width: 719px) {
  .vida-mesa {
    grid-template-columns: minmax(0, 1fr); margin: calc(-1 * var(--respiro)) calc(-1 * var(--respiro)) 0;
    padding: 18px var(--respiro) 16px; border-radius: 0 0 18px 18px;
  }
  .vida-mesa h1 { font-size: 24px; }
  .vida-mesa-longo { display: none; }
  .vida-mesa-curto { display: inline; }
  .vida-mesa-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vida-mesa-numero { min-width: 0; padding: 6px 8px; }
  .vida-mesa-numero > b { font-size: 20px; }
  .vida-mesa-numero > span { line-height: 1.2; }
  .vida-capitulos { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--respiro)); padding-right: var(--respiro); scrollbar-width: none; }
  .vida-capitulos-nota { display: none; }
  .vida-deck { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vida-post { min-height: 420px; scroll-snap-align: start; scroll-margin-top: 12px; }
  .vida-post-visual { height: 190px; }
  .vida-post-acoes :where(button), .vida-post-acoes .botao,
  .vida-post-acoes span.botao[aria-disabled="true"],
  .vida-post-acoes > details > summary,
  .vida-post-acoes .acoes > details.abrir-no-card.gesto-em-resumo > summary { min-height: var(--toque); }
  :root:has(.vida-deck) { scroll-snap-type: y proximity; }
}

/* **"Aparecer em video" (S2 do PLANO-SEGUNDO-OLHAR, 26/10/2026; a prancha `Aparencia.dc.html`).** No
   topo da Aparencia, acima das abas: a moldura em lima e VOCE (a preferencia e sobre a pessoa), as
   tres opcoes sao o envio (o toque ja salva), e a escolhida tem o fundo de quem decide e a borda da
   tinta. No celular as tres empilham, cada uma com a frase inteira. */
.vida-em-video {
  background: var(--papel); border-radius: var(--raio); padding: 18px 20px; margin: 0 0 16px;
  display: grid; gap: 12px; box-shadow: inset 0 0 0 2px var(--voce); min-width: 0;
}
.vida-em-video > h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.vida-em-video-opcoes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0;
}
.vida-em-video-opcao {
  display: grid; gap: 4px; align-content: start; justify-items: start; text-align: left;
  min-height: var(--toque); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda);
  background: var(--chao); color: var(--tinta); font: inherit; cursor: pointer; min-width: 0;
}
.vida-em-video-opcao > b {
  display: flex; align-items: center; gap: 8px; width: 100%; font-size: 16px;
  font-family: var(--fonte-titulo);
}
.vida-em-video-opcao > small {
  font-size: 13px; color: var(--tinta-fraca); line-height: 1.4; overflow-wrap: anywhere;
}
.vida-em-video-marca {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--tinta-fraca);
  flex: 0 0 auto;
}
.vida-em-video-opcao[aria-pressed="true"] { background: var(--voce-fundo); border-color: var(--tinta); }
.vida-em-video-opcao[aria-pressed="true"] .vida-em-video-marca {
  border-color: var(--tinta); background: radial-gradient(var(--tinta) 0 4px, transparent 5px);
}
.vida-em-video-padrao {
  margin-left: auto; font-size: 12px; font-weight: 700; border-radius: var(--raio-pilula);
  padding: 1px 7px; background: var(--tinta); color: var(--papel);
}
/* O movimento (P3 do PLANO-PLANOS-CRIATIVOS, 05/11/2026): as tres opcoes da Aparencia, no
   desenho de "Aparecer em video", dentro do cartao da aba Imagem. */
.vida-movimento .vida-em-video-opcoes { margin-top: 12px; }
.vida-movimento .vida-em-video-opcao:disabled { cursor: default; opacity: 1; color: var(--tinta-fraca); }
/* A voz da agencia (P4, 07/11/2026): as quatro vozes no mesmo desenho, e a previa de cada uma. */
.vida-voz-da-agencia .vida-em-video-opcao:disabled { cursor: default; opacity: 1; color: var(--tinta-fraca); }
.vida-voz-lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;
  margin: 12px 0;
}
.vida-voz { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vida-voz-escolha { margin: 0; display: grid; }
.vida-voz-escolha .vida-em-video-opcao { height: 100%; }
.vida-voz-previa { min-width: 0; }
.vida-voz-previa form { margin: 0; }
.vida-voz-previa audio { width: 100%; height: 36px; }
.vida-voz-ouvir {
  width: 100%; min-height: var(--toque); border-radius: 12px; border: 1px solid var(--borda);
  background: var(--papel); color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer;
}
.vida-voz-ouvir:hover { background: var(--chao); }
/* O degrau que se mostra em Resultados (P4): o rosto em numero e o que o Pro acrescentaria. */
.vida-degrau { margin: 16px 0; }
.vida-degrau-lista { margin: 6px 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.vida-em-video-muda {
  margin: 0; font-size: 13.5px; background: var(--chao); border-radius: 10px; padding: 10px 12px;
  overflow-wrap: anywhere;
}
@media (max-width: 719px) {
  .vida-em-video { padding: 16px; }
  .vida-em-video-opcoes { grid-template-columns: minmax(0, 1fr); }
}

/* --- Como fica no WhatsApp (W7 do PLANO-WHATSAPP, 01/11/2026) ----------------------------------
   A conversa do dia desenhada como as pranchas: a agencia a esquerda (o cartao), ela a direita (o
   fundo do lima, a cor do que e DELA), a nota no meio. So leitura: os botoes sao etiquetas. */
.vida-wa {
  display: flex; flex-direction: column; gap: 8px; max-width: 560px;
  padding: 16px 12px; border-radius: var(--raio); background: var(--chao);
}
.vida-wa-bolha {
  max-width: 85%; padding: 10px 12px; border-radius: 12px; background: var(--papel); color: var(--tinta);
  box-shadow: 0 0 0 1px var(--borda);
}
.vida-wa-bolha > p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.vida-wa-agencia { align-self: flex-start; border-top-left-radius: 4px; }
.vida-wa-voce { align-self: flex-end; border-top-right-radius: 4px; background: var(--voce-fundo); }
.vida-wa-nota {
  align-self: center; max-width: 90%; margin: 6px 0; text-align: center;
  font-size: var(--texto-legenda); color: var(--tinta-fraca);
}
.vida-wa-modelo {
  display: block; margin-bottom: 4px; font-size: var(--texto-micro); color: var(--tinta-fraca);
}
.vida-wa-botao {
  display: block; margin-top: 8px; padding: 8px 0 0; border-top: 1px solid var(--borda);
  text-align: center; color: var(--acento); font-size: var(--texto-legenda); cursor: default;
}
.vida-wa-link { overflow-wrap: anywhere; }
.vida-wa-lista > summary { list-style: none; cursor: pointer; }
.vida-wa-lista > summary::-webkit-details-marker { display: none; }
.vida-wa-lista ul { list-style: none; margin: 6px 0 0; padding: 0; }
.vida-wa-lista li { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px solid var(--borda); }
.vida-wa-lista li span { font-size: var(--texto-legenda); color: var(--tinta-fraca); }

/* O avatar ilustrado (C1 do PLANO-PLANOS-CRIATIVOS, 02/11/2026): as quatro expressoes, lado a
   lado, sobre o chao -- a figura e transparente, e o chao e o que mostra o recorte. */
.vida-avatar { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.vida-avatar li { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px; border-radius: 14px; background: var(--chao); }
.vida-avatar img { width: 100%; max-width: 140px; aspect-ratio: 1; object-fit: contain; }
/* O Pro na Aparencia (P2 do PLANO-PLANOS-CRIATIVOS, 04/11/2026): os elementos da marca e as
   variantes do filtro, lado a lado. A opcao travada da direcao reusa o tracejado de "O que voce
   permite". */
.vida-elementos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.vida-elementos li { display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: var(--texto-micro); color: var(--tinta-fraca); text-align: center; }
.vida-elementos img { width: 72px; height: 72px; object-fit: contain; }
.vida-elementos-fundo img { width: 96px; height: 96px; border: 1px solid var(--borda);
  border-radius: 8px; object-fit: cover; }
.vida-filtros { border: 0; margin: 12px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.vida-filtro { display: flex; flex-direction: column; gap: 6px; padding: 8px;
  border: 1px solid var(--borda); border-radius: 10px; cursor: pointer; }
.vida-filtro:has(input:checked) { border-color: var(--tinta); background: var(--papel); }
.vida-filtro img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.linha-objetivo.vida-limite-travada { border-style: dashed; cursor: not-allowed;
  color: var(--tinta-fraca); }
.vida-avatar span { font-size: 13px; color: var(--tinta-fraca); }
/* "Suas fotos" no Comecar: o que ja foi para o banco, em miniatura. */
.vida-fotos-do-comeco { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.vida-fotos-do-comeco img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }