@charset "UTF-8";
/* Painel do Mitrie. Cores e fontes vêm do tokens.css da casa (traje.to/tokens.css),
   carregado antes deste arquivo: tinta, papel, Helvetica Neue e Menlo. Tom
   intermediário sai de color-mix entre as duas cores, nunca de hex novo. Sem cor
   de estado: estado se marca com preenchimento, peso e contorno. */

:root {
  --txt: color-mix(in srgb, var(--ink) 86%, var(--paper));
  --mute: color-mix(in srgb, var(--ink) 66%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 16%, var(--paper));
  --leve: color-mix(in srgb, var(--ink) 4%, var(--paper));
  --pad-x: clamp(16px, 3.2vw, 56px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
b { font-weight: 600; }

.k, .topbar, .cabecalho, .numero span, .autor, .decisao, .chip, .ensaio, .modo, .hora, .origem, .com, .passos {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.k { font-size: 11px; color: var(--mute); margin: 0 0 12px; }
.k a { text-decoration: underline; text-underline-offset: 3px; }
.k a:hover { color: var(--ink); }
.nada, .vazio { color: var(--mute); }

.rub { width: 22px; height: 22px; display: block; flex: none; color: var(--ink); }

/* ── topo ─────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--pad-x);
  border-bottom: 2px solid var(--ink);
  font-size: 11px;
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 2;
}
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.topbar nav { display: flex; align-items: center; gap: 14px; }
.topbar form { margin: 0; }
.seletor select {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 5px 8px;
  border-radius: 0;
}
.modo { padding: 4px 0; color: var(--ink); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mute); }
.modo:hover { text-decoration-color: var(--ink); }
.perfil-atual { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28ch; }
.modo-ativo { font-weight: 700; }
.sair {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  color: var(--mute);
  cursor: pointer;
  padding: 4px 0;
}
.sair:hover { color: var(--ink); }
.voltar { color: var(--mute); text-decoration: none; white-space: nowrap; }
.voltar:hover { color: var(--ink); }

.shell { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad-x) 72px; }

/* ── cabeça e números ─────────────────────────────── */

.cabeca { padding: clamp(28px, 4vw, 56px) 0 clamp(20px, 2.6vw, 32px); }
h1 {
  font-weight: 700;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 0;
}
h2 {
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -.02em;
  margin: 0;
}
.meta { margin: 12px 0 0; color: var(--txt); font-size: 15px; }
.lead { color: var(--txt); }

.numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.numero {
  padding: 18px 20px 20px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.numero b {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -.04em;
}
.numero span { font-size: 11px; margin-top: 6px; }
.numero small { color: var(--mute); font-size: 13px; }
.numero.cheio { background: var(--ink); color: var(--paper); }
.numero.cheio small { color: var(--line); }

/* ── lista de conversas ───────────────────────────── */

.lista { margin-top: clamp(36px, 5vw, 64px); }
.abre { border-top: 2px solid var(--ink); padding-top: 14px; margin-bottom: 8px; }

.cabecalho, .linha {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2.2fr) 84px minmax(170px, 1fr) minmax(0, 1fr) 64px;
  gap: 16px;
  align-items: baseline;
}
.cabecalho { font-size: 10px; color: var(--mute); padding: 10px 0; border-bottom: 1px solid var(--ink); }
/* Voz que nao vende (personas.ts): a lista perde a coluna Compra e os contadores de
   Pix e venda somem, entao a grade fecha sem eles. */
.sem-compra .cabecalho, .sem-compra .linha {
  grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2.2fr) 84px minmax(0, 1fr) 64px;
}
.numeros.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.linha {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.linha:hover { background: var(--leve); box-shadow: -12px 0 0 var(--leve), 12px 0 0 var(--leve); }
.quem b, .quem small, .ultima small { display: block; }
.quem small { color: var(--mute); font-family: var(--mono); font-size: 12px; margin-top: 2px; }
.ultima { color: var(--txt); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ultima small { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.com, .origem, .hora { font-size: 11px; color: var(--txt); }
.origem { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 14px; }
.hora { text-align: right; }

/* Estado é texto, não caixa: caixa é só de botão (design review, 24/09/2026). A
   marca da frente diz o estado — ● cheio (feito, valendo), ○ vazio (esperando,
   pendente) — e nenhum estado tem borda nem preenchimento. */
.chip {
  display: inline-block;
  font-size: 10px;
  padding: 2px 0;
  color: var(--txt);
  white-space: nowrap;
}
.chip::before { content: "○"; margin-right: 6px; letter-spacing: 0; }
.chip.cheio { color: var(--ink); font-weight: 600; }
.chip.cheio::before { content: "●"; }
.chip.fora { color: var(--mute); }
.chip.fora::before { content: "—"; }
.ensaio { font-size: 9px; color: var(--mute); margin-left: 8px; border-bottom: 1px dashed var(--mute); }

/* ── conversa ─────────────────────────────────────── */

.conversa {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: clamp(20px, 3vw, 48px);
  border-top: 2px solid var(--ink);
  padding-top: 24px;
  align-items: start;
}
.tempo { display: flex; flex-direction: column; gap: 10px; }

.msg { max-width: min(560px, 86%); padding: 12px 14px 14px; border: 1px solid var(--line); background: var(--leve); }
.msg.mitrie, .msg.artista { align-self: flex-end; }
.msg.mitrie { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.msg.artista { border-color: var(--ink); }
.autor { font-size: 10px; margin: 0 0 6px; color: var(--mute); display: flex; justify-content: space-between; gap: 16px; }
.msg.mitrie .autor { color: var(--line); }
.msg .descricao { margin: 0 0 8px; padding-left: 10px; border-left: 2px solid var(--line); font-size: 14px; color: var(--mute); }
.texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.texto.pix { font-family: var(--mono); font-size: 12px; line-height: 1.45; }
/* O que veio sem texto: o que era e onde ver (anexos.ts). */
.sem-texto { margin: 0; padding-left: 10px; border-left: 2px solid currentColor; display: grid; gap: 2px; }
.sem-texto small { font-size: 13px; opacity: .7; }
/* Os botões de resposta rápida que saíram com a mensagem: o que a pessoa pôde tocar. */
.resposta-rapida { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.resposta-rapida span { font-family: var(--mono); font-size: 12px; padding: 4px 10px; border: 1px solid currentColor; }
.fatos .em-duvida { font-weight: 700; color: var(--ink); }

.decisao {
  align-self: flex-end;
  max-width: min(560px, 86%);
  font-size: 10px;
  color: var(--mute);
  border-left: 2px solid var(--ink);
  padding: 2px 0 2px 12px;
  margin: 8px 0 -2px;
}
.decisao p { margin: 0; }
.decisao p + p { margin-top: 4px; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 13px; color: var(--txt); }
.decisao b { color: var(--ink); }
.sugerida {
  border: 1px dashed var(--mute);
  padding: 8px 10px;
  margin-top: 8px !important;
}
.sugerida small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }

aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 64px; }
.bloco { background: var(--leve); border: 1px solid var(--line); padding: 18px 18px 20px; }
.bloco p { margin: 0; }
.bloco p + p, .bloco ul { margin-top: 10px; }
.grande { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.ficha { color: var(--mute); font-size: 13px; }
.passos { list-style: none; padding: 0; font-size: 10px; color: var(--mute); }
.passos li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 8px 18px; border-top: 1px solid var(--line); position: relative; }
.passos li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border: 1px solid var(--mute); }
.passos li.feito { color: var(--ink); }
.passos li.feito::before { background: var(--ink); border-color: var(--ink); }
.bloco .carimbo { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); }

/* O dossiê da voz da casa, no lugar que a compra ocupa na do artista. O @ e o link
   ficam em mono: é o que a equipe vai copiar para procurar por fora. */
.dossie .falta { list-style: none; padding: 0; margin-top: 12px; }
.dossie .k + p { margin-top: 0; }
.dossie p + .k, .dossie ul + .k { margin: 18px 0 0; }
.dossie .falta { margin-top: 6px; }
.dossie .falta li { font-size: 13px; color: var(--mute); padding: 3px 0 3px 14px; position: relative; }
.dossie .falta li::before { content: "?"; position: absolute; left: 0; font-family: var(--mono); }
.dossie .acoes { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 16px; }
.dossie .acoes small { color: var(--mute); font-size: 12px; }
.dossie form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.dossie details { margin-top: 16px; }
.dossie summary { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); cursor: pointer; }
.dossie summary:hover { color: var(--ink); }

/* ── entrar ───────────────────────────────────────── */

body.tinta { background: var(--ink); color: var(--paper); min-height: 100vh; display: grid; place-items: center; }
.entrar { width: min(320px, calc(100% - 32px)); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.entrar .rub { width: 44px; height: 44px; color: var(--paper); }
.entrar .rub g { fill: var(--ink); }
.entrar form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.entrar input {
  flex: 1;
  min-width: 0;
  font: 15px var(--mono);
  padding: 12px;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  border-radius: 0;
}
.entrar button {
  font: 11px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
  padding: 0 16px;
  cursor: pointer;
}
.entrar .erro { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; min-height: 1em; margin: 0; }

/* ── celular ──────────────────────────────────────── */

@media (max-width: 900px) {
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabecalho { display: none; }
  .linha {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "quem hora" "ultima ultima" "compra com" "origem origem";
    gap: 6px 12px;
  }
  .sem-compra .linha { grid-template-areas: "quem hora" "ultima ultima" "com com" "origem origem"; }
  .quem { grid-area: quem; }
  .hora { grid-area: hora; }
  .ultima { grid-area: ultima; }
  .compra { grid-area: compra; }
  .com { grid-area: com; text-align: right; }
  .origem { grid-area: origem; color: var(--mute); font-size: 13px; }
  .conversa { grid-template-columns: minmax(0, 1.45fr) minmax(220px, 1fr); gap: 20px; }
  .msg, .decisao { max-width: 94%; }
  .bloco { padding: 14px; }
}

/* Só no celular a conversa empilha, com o resumo e a compra em cima. */
@media (max-width: 640px) {
  .conversa { grid-template-columns: minmax(0, 1fr); }
  aside { position: static; order: -1; }
}

@media (max-width: 480px) {
  .topbar .marca span { display: none; }
  .numero { padding: 14px; }
}

/* ── abas ─────────────────────────────────────────── */

.abas {
  display: flex;
  gap: 0;
  padding: 0 var(--pad-x);
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  overflow-x: auto;
}
.abas a { text-decoration: none; color: var(--mute); padding: 12px 16px 11px; border-bottom: 3px solid transparent; white-space: nowrap; }
.abas a:first-child { padding-left: 0; }
.abas a:hover { color: var(--ink); }
.abas a.atual { color: var(--ink); border-bottom-color: var(--ink); }
/* O que espera alguém naquela aba (controles.js): a marca cheia e o número, em tinta e peso,
   sem cor nova — a aba fica visível mesmo esmaecida. */
.abas a:has(.espera-aba) { color: var(--ink); }
.abas .espera-aba { font-weight: 700; margin-left: 6px; letter-spacing: 0; }
.abas .espera-aba::before { content: "● "; }

/* ── últimas 24 horas ─────────────────────────────── */

.dia { margin-top: 20px; }
.dia .k { margin-bottom: 8px; }
.dia dl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.dia dl div { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
.dia dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.dia dd { margin: 4px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

/* ── conversa: tempo e janela ─────────────────────── */

.autor .em { margin-left: 10px; text-transform: none; letter-spacing: .04em; }
.janela {
  display: inline-block;
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0;
  color: var(--mute);
}
.janela::before { content: "—"; margin-right: 6px; letter-spacing: 0; }
.janela.aberta { color: var(--ink); }
.janela.aberta::before { content: "●"; }
.janela.acabando { font-weight: 700; }
.janela.acabando::before { content: "●"; animation: pulso 1.4s ease-in-out infinite; }

/* ── conta e o que o Mitrie sabe ──────────────────── */

.mono { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lista > .lead, .lista > .grade, .lista > .tabela, .lista > .aprovado { margin-top: 12px; }
.lista > .lead { margin-bottom: 0; }
.campos { margin: 12px 0 0; }
.campos div { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.campos dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding-top: 2px; }
.campos dd { margin: 0; }
/* O texto de um rascunho (a porta de saída da missão) quebra a linha: sem isso o e-mail saía da tela. */
.campos dd pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.lista-campos { list-style: none; padding: 0; margin: 14px 0 0; font-size: 13px; color: var(--txt); }
.lista-campos li { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.lista-campos .mono { font-size: 12px; color: var(--ink); }
.bloco .mono-k { color: var(--ink); text-transform: none; letter-spacing: .02em; font-size: 12px; }

.tabela .cabecalho, .fileira { display: grid; gap: 16px; align-items: baseline; }
.fileira { padding: 14px 0; border-bottom: 1px solid var(--line); }
.modelos .cabecalho, .modelos .fileira { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) 70px minmax(0, 1.3fr) 64px; }
/* O texto do modelo fica na linha dele: e o que a pessoa relê antes de disparar. */
.modelos .fileira .mono { display: grid; gap: 4px; }
.corpo-modelo { font-family: var(--corpo); letter-spacing: 0; text-transform: none; color: var(--mute); }
.modelo-novo { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.modelo-novo summary { cursor: pointer; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.modelo-novo .formulario { margin-top: 14px; }
.obras .cabecalho, .obras .fileira { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) minmax(0, 1fr); }
/* Contatos da conta: quem, o número mascarado, quantas conversas, a última. */
.contatos .cabecalho, .contatos .fileira { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 110px minmax(0, .8fr); }
.contatos .quem { display: grid; gap: 2px; }
.contatos .quem small { color: var(--mute); font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; }
.busca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 8px; }
.busca label { display: grid; gap: 4px; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.busca input { min-width: min(320px, 100%); }
.tabela .cabecalho { display: grid; }

.aprovado { list-style: none; padding: 0; counter-reset: k; border-top: 1px solid var(--ink); }
.aprovado li { counter-increment: k; display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--line); }
.aprovado li::before { content: counter(k, decimal-leading-zero); font: 11px/1.9 var(--mono); letter-spacing: .12em; color: var(--mute); grid-row: span 2; }
.aprovado p { margin: 0; }
.aprovado small { color: var(--mute); font-family: var(--mono); font-size: 11px; margin-top: 4px; }

@media (max-width: 900px) {
  .dia dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade { grid-template-columns: minmax(0, 1fr); }
  .tabela .cabecalho { display: none; }
  .modelos .fileira, .obras .fileira { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  /* A regra das conversas dá à .quem uma área com nome; aqui ela ocupa a linha de cima. */
  .contatos .fileira { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; }
  .contatos .fileira .quem { grid-area: auto; grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .dia dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos div, .lista-campos li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ── controles ────────────────────────────────────── */

.loja button, .controles button, .decisao button, .orientar button, .opcoes button, .formulario button, .em-linha button, .direcoes button, .atalhos button, .dossie button, .equipe button, .agenda button, .horarios button, .plano button, .autorizados button {
  font: 11px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
}
.loja button.leve, .controles button.leve, .decisao button.leve, .em-linha button.leve, .direcoes button.leve, .orientar button.leve, .formulario button.leve, .dossie button.leve, .equipe button.leve, .agenda button.leve, .horarios button.leve, .plano button.leve, .autorizados button.leve { background: transparent; color: var(--ink); }
.agenda button[data-armado], .horarios button[data-armado] { background: var(--ink); color: var(--paper); }
/* O que não se desfaz é botão de texto, sublinhado, num grupo à parte e atrás de uma
   confirmação com o nome do que some. O tracejado fica só para rascunho. */
.controles button.perigo, .equipe button.perigo, .plano button.perigo, button.perigo {
  background: transparent; color: var(--ink); border-color: transparent; padding-left: 0; padding-right: 0;
  text-decoration: underline; text-underline-offset: 3px; align-self: flex-start;
}
.controles button[data-armado], .plano button[data-armado], button.perigo[data-armado] {
  background: var(--ink); color: var(--paper); border-color: var(--ink); text-decoration: none; padding: 9px 12px;
}
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.controles .acoes { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 12px; }
.controles .acoes small { color: var(--mute); font-size: 12px; margin-bottom: 10px; }
.modo-seletor {
  display: block;
  margin-top: 8px;
  font: 11px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 6px 8px;
  border-radius: 0;
}

.sugerida .botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.decisao .sugerida { font-family: var(--sans); font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--txt); margin-top: 8px; }

.duvida, .orientacao {
  margin-top: 10px;
  padding: 10px 12px 12px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
.duvida small, .orientacao small { display: block; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.duvida .pergunta { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.orientacao { font-size: 14px; border-style: dashed; }
.opcoes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.opcoes button { background: transparent; color: var(--ink); text-transform: none; letter-spacing: 0; font: 14px var(--sans); }
.opcoes button:hover { background: var(--ink); color: var(--paper); }
.orientar { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.orientar textarea, .formulario textarea, .direcoes textarea {
  font: 14px/1.4 var(--sans);
  padding: 8px 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  resize: vertical;
}
.orientar button { align-self: flex-start; }

/* ── aviso ────────────────────────────────────────── */

.avisos {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.aviso {
  display: block;
  pointer-events: auto;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  padding: 14px 16px 16px;
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 18%, transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.aviso.visivel { opacity: 1; transform: none; }
.aviso small { display: block; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--line); margin-bottom: 4px; }
.aviso p { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.aviso.erro { background: var(--paper); color: var(--ink); border-style: dashed; }
.aviso.erro small { color: var(--mute); }
a.aviso:hover { outline: 2px solid var(--paper); outline-offset: -5px; }

@media (prefers-reduced-motion: reduce) {
  .aviso { transition: none; transform: none; }
}

/* ── agora: decidindo ou esperando o artista ──────── */

.agora {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 8px 0;
}
.agora span { width: 22px; height: 6px; background: radial-gradient(circle, var(--ink) 2px, transparent 2.5px) 0 50% / 8px 6px repeat-x; animation: pontos 1.2s steps(3) infinite; }
.agora.esperando { color: var(--ink); border: 1px solid var(--ink); padding: 8px 12px; align-self: flex-end; }
.agora.esperando span { width: 8px; height: 8px; background: var(--ink); border-radius: 50%; animation: pulso 1.4s ease-in-out infinite; }
@keyframes pontos { from { width: 6px; } to { width: 30px; } }
@keyframes pulso { 50% { opacity: .25; } }
/* Esperando você: o único estado que pisca. Sem cor nova (tokens.css: duas cores),
   então a urgência é o ponto cheio que pulsa e há quanto tempo. */
.duvida-chip { margin-left: 8px; font-size: 10px; color: var(--ink); font-weight: 600; }
.chip.espera { color: var(--ink); font-weight: 600; }
.chip.espera::before { content: "●"; animation: pulso 1.4s ease-in-out infinite; }
.ha { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: none; color: var(--mute); margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .chip.espera::before { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .agora span { animation: none; }
}

/* orientação do artista na linha do tempo */
.msg.orientou { border-style: dashed; background: var(--paper); }
.msg.orientou .respondeu-a { margin: 0 0 6px; font-size: 13px; color: var(--mute); }
.msg.orientou .respondeu-a::before { content: "↳ "; }

/* ── usuários ─────────────────────────────────────── */

.em-linha { margin: 0; }
.aviso-pagina {
  display: inline-block;
  margin: 16px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
}
.formulario { display: flex; flex-direction: column; gap: 10px; }
.formulario label { display: flex; flex-direction: column; gap: 4px; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.formulario input {
  font: 15px var(--sans);
  text-transform: none;
  letter-spacing: 0;
  padding: 9px 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
}
.formulario small { color: var(--mute); font-size: 12px; }
.formulario button { align-self: flex-start; }

/* ── direcionamento e catálogo ────────────────────── */

.direcoes li { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 12px; align-items: start; }
.direcoes li::before { grid-row: auto; }
.direcoes .direcao { display: flex; flex-direction: column; min-width: 0; }
.direcoes .direcao > p { white-space: pre-wrap; }
.direcoes .botoes, .orientar .botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.direcoes .editar { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.direcoes .editar[hidden] { display: none; }
.direcoes button[data-armado] { background: var(--ink); color: var(--paper); }
.lista > .nova { margin-top: 14px; }
.formulario textarea { text-transform: none; letter-spacing: 0; }

.atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px !important; }
.atalhos a { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.atalhos a:hover { text-decoration: underline; }

.teste { display: flex; flex-direction: column; gap: 12px; }
.teste-conversa { display: flex; flex-direction: column; gap: 10px; }
.teste-conversa:empty { display: none; }
.teste-conversa .msg p { margin: 0; }
.teste-conversa .nota { display: block; margin-top: 8px; font-size: 12px; color: var(--line); }

@media (max-width: 480px) {
  .direcoes li { grid-template-columns: 32px minmax(0, 1fr); }
  .direcoes li > .botoes { grid-column: 2; margin-top: 8px; }
}

/* ── equipe: pessoas e contas ─────────────────────── */

/* Cada conta é uma seção com os perfis e as pessoas lado a lado. O que é raro
   (mover perfil, renomear, adicionar pessoa, trocar senha) fica recolhido. */
.conta-equipe .abre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.conta-equipe .grade { margin-top: 12px; align-items: start; }
.conta-equipe.descontinuada .bloco { border-style: dashed; background: var(--paper); }
.linhas { list-style: none; padding: 0; margin: 0; }
.linhas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.linhas li:first-child { border-top: 0; padding-top: 0; }
.linhas li.fora { color: var(--mute); }
.linhas .nada { font: 11px var(--mono); letter-spacing: .06em; }
.linhas .quem { flex: 1 1 180px; min-width: 0; }
.linhas .quem a { text-decoration: none; }
.linhas .quem a:hover b { text-decoration: underline; }
.linhas .quem small { overflow-wrap: anywhere; }
.linhas details { flex-basis: 100%; }
.recolhido { margin-top: 12px; }
.linhas .recolhido { margin-top: 0; }
.recolhido summary { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); cursor: pointer; }
.recolhido summary:hover, .recolhido[open] summary { color: var(--ink); }
.recolhido form { margin-top: 10px; }
.gestao-conta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; margin-top: 14px; }
.gestao-conta .recolhido { margin-top: 9px; }
.mover { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mover select, .mover input, .nova-conta input {
  font: 14px var(--sans);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 7px 8px;
  border-radius: 0;
  flex: 1 1 200px;
  min-width: 0;
  max-width: 320px;
}
.nova-conta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.nova-conta input { max-width: 420px; }
.formulario select { max-width: none; font: 15px var(--sans); letter-spacing: 0; text-transform: none; padding: 9px 10px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; }

/* ── perfis no topo: apelido e canais ─────────────── */

.canais { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.canal { display: inline-flex; width: 14px; height: 14px; color: var(--ink); cursor: help; }
.canal svg { width: 100%; height: 100%; display: block; }
.perfil-atual, .perfis-menu summary { display: inline-flex; align-items: center; gap: 2px; text-transform: none; letter-spacing: .02em; }
.perfil-nome small { display: inline; color: var(--mute); margin-right: 6px; font-size: inherit; }
.perfil-nome small::after { content: " ·"; }

.perfis-menu { position: relative; }
.perfis-menu summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--ink);
  padding: 5px 26px 5px 8px;
  position: relative;
  max-width: 34ch;
  white-space: nowrap;
  overflow: hidden;
}
/* O nome que não cabe no teto termina em reticências antes da setinha, sem passar por baixo dela. */
.perfis-menu summary .perfil-nome, .perfil-atual .perfil-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfis-menu summary::-webkit-details-marker { display: none; }
.perfis-menu summary::after { content: "▾"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.perfis-menu[open] summary { background: var(--ink); color: var(--paper); }
.perfis-menu[open] summary .canal, .perfis-menu[open] summary .perfil-nome small { color: var(--paper); }
.perfis-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 260px;
  max-height: 70vh;
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 14%, transparent);
  padding: 8px 0;
  z-index: 5;
}
.perfis-lista .grupo + .grupo { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.perfis-lista .k { margin: 6px 14px 4px; font-size: 10px; }
.filtrar-perfis { display: block; margin: 0 14px 6px; }
.filtrar-perfis input { width: 100%; }
.perfis-lista [hidden] { display: none; }
.perfis-lista .perfil {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 14px 7px 24px;
  text-decoration: none;
  text-transform: none;
  letter-spacing: .02em;
  color: var(--ink);
}
.perfis-lista .perfil:hover { background: var(--leve); }
/* Trocar de conta é um formulário: o botão se veste como os links de perfil. */
.perfis-lista form { margin: 0; }
.perfis-lista button.perfil { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.perfis-lista .perfil.atual { font-weight: 700; box-shadow: inset 3px 0 0 var(--ink); }

/* No celular o seletor ocupa o que sobra do topo, em vez de um teto fixo, e o nome
   que não couber termina em reticências antes da setinha, sem passar por baixo dela. */
@media (max-width: 640px) {
  .topbar { gap: 10px; }
  .topbar nav { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 10px; }
  .perfis-menu, .perfil-atual { flex: 0 1 auto; min-width: 0; }
  .perfis-menu summary { max-width: 100%; }
  .perfis-lista { position: fixed; left: 16px; right: 16px; top: 52px; min-width: 0; }
  /* O topo fica com o apelido do perfil e o modo numa palavra: o nome da conta e o
     "Mitrie" do botão voltam na tela larga, e o nome da conta está no menu aberto. */
  .topbar .perfil-nome small, .topbar .so-largo { display: none; }
}

/* orientação que virou direcionamento */
.msg.orientou .virou-regra { margin: 10px 0 0; padding: 8px 10px; background: var(--ink); color: var(--paper); font-size: 14px; }
.msg.orientou .virou-regra small { display: block; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--line); margin-bottom: 3px; }

/* ── cadastro e começo da conta ───────────────────── */

.entrar .criar { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }
.cadastro { width: min(360px, calc(100% - 32px)); }
.cadastro .convite { margin: 0; color: color-mix(in srgb, var(--paper) 78%, var(--ink)); font-size: 15px; }
.entrar button { padding: 12px 16px; }

.comecar { max-width: 760px; }
.trilha {
  list-style: none;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  font: 11px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.trilha li { padding: 10px 8px 0 0; display: flex; flex-direction: column; gap: 2px; border-top: 4px solid transparent; margin-top: -3px; }
.trilha li span { font-size: 10px; }
.trilha li.feito { color: var(--ink); border-top-color: var(--line); }
.trilha li.atual { color: var(--ink); border-top-color: var(--ink); font-weight: 600; }
.trilha a { text-decoration: none; }
.trilha a:hover { text-decoration: underline; }
.comecar .cabeca { padding-bottom: 20px; }
.comecar .aviso-pagina { margin-top: 20px; }
.passo { padding: 22px; gap: 14px; }
.passo textarea { font: 15px/1.45 var(--sans); padding: 9px 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 0; resize: vertical; }
.passo button, .passo .botao {
  font: 11px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 12px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}
.passo button .canal, .passo .ok .canal { color: currentColor; cursor: inherit; }
.conectar-passo { display: flex; flex-direction: column; }
.etapas { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 6px; color: var(--txt); }
#estado { min-height: 1.5em; margin: 0; }
#estado.ok, .passo .ok { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.passo .nota { color: var(--mute); font-size: 13px; }
.modos { border: 0; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.modos legend { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 0; margin-bottom: 6px; }
.formulario .opcao { flex-direction: row; align-items: flex-start; gap: 10px; font: 15px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); border: 1px solid var(--line); padding: 10px 12px; cursor: pointer; background: var(--paper); }
.formulario .opcao:has(input:checked) { border-color: var(--ink); }
.formulario .opcao input { margin-top: 3px; accent-color: var(--ink); }

.janela-ensaio { border: 2px solid var(--ink); padding: 0; width: min(460px, calc(100% - 32px)); height: min(600px, calc(100% - 48px)); background: #fff; }
.janela-ensaio::backdrop { background: color-mix(in srgb, var(--ink) 55%, transparent); }
.janela-ensaio iframe { border: 0; width: 100%; height: 100%; display: block; }

@media (max-width: 640px) {
  .trilha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passo { padding: 16px; }
}

/* ── admin: webhooks, fila e modelo ───────────────── */


.barras { display: flex; align-items: flex-end; gap: 4px; height: 140px; margin-top: 12px; border-bottom: 1px solid var(--ink); }
.barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; }
.barra span { display: block; background: var(--ink); min-height: 1px; }
.barra small { font: 9px var(--mono); color: var(--mute); text-align: center; padding-top: 4px; }

.campos-evento .cabecalho, .campos-evento .fileira { grid-template-columns: minmax(0, 1.6fr) 60px 90px 90px 80px minmax(0, 1fr); }
.perfis-evento .cabecalho, .perfis-evento .fileira { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr) 60px minmax(0, 1fr) minmax(0, 1.2fr); }
.webhooks .cabecalho, .webhooks .fileira { grid-template-columns: 96px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr) 72px minmax(0, 1.8fr); }
a.fileira { text-decoration: none; color: inherit; }
a.fileira:hover { background: var(--leve); box-shadow: -12px 0 0 var(--leve), 12px 0 0 var(--leve); }
.trecho { color: var(--mute); font-size: 11px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 12px 0 4px; }
.filtros label { display: flex; flex-direction: column; gap: 4px; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.filtros select {
  font: 13px var(--sans);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 7px 8px;
  max-width: 24ch;
}
.filtros button { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 9px 12px; cursor: pointer; }
.mais { margin: 16px 0 0; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }

.payload {
  margin: 12px 0 0;
  padding: 16px;
  background: var(--leve);
  border: 1px solid var(--line);
  font: 12px/1.5 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 70vh;
  overflow: auto;
}


@media (max-width: 900px) {
  .campos-evento .fileira, .perfis-evento .fileira, .webhooks .fileira { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .barra small { display: none; }
}

/* ── admin: os prompts e as versões ──────────────── */

/* O topo da página Modelo: a voz e o prompt, perto um do outro e do título. */
.escolhas { display: flex; flex-wrap: wrap; gap: 20px 48px; margin-top: 28px; }
.escolha .k { margin-bottom: 8px; }
.escolha { min-width: 0; max-width: 100%; }
.escolhas > .escolha:first-child { flex-basis: 100%; }
.segmento { display: flex; flex-wrap: wrap; }
.segmento a {
  font: 11px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 9px 14px;
  margin-left: -1px;
  white-space: nowrap;
}
.segmento a:first-child { margin-left: 0; }
.segmento a:hover { background: var(--leve); }
.segmento a.atual { background: var(--ink); color: var(--paper); }
.voz-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 0; color: var(--mute); font-size: 14px; }
.trocar-voz { margin-top: 10px; }
.trocar-voz summary { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); cursor: pointer; }
.trocar-voz summary:hover { color: var(--ink); }
.trocar-voz form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; max-width: 640px; }
.perfil-do-modelo { display: flex; gap: 8px; align-items: center; max-width: 520px; }
.perfil-do-modelo select, .trocar-voz select { font: 14px var(--sans); background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; padding: 8px; flex: 1 1 280px; min-width: 0; }
.trocar-voz small { flex-basis: 100%; color: var(--mute); font-size: 12px; }
.papel-o-que { margin: 0 0 18px; color: var(--mute); font-size: 14px; }
.papel-o-que .mono { font-size: 12px; color: var(--ink); }

.editor { max-width: none; }
.editor textarea { font: 12px/1.55 var(--mono); min-height: 40vh; }
.editor small { color: var(--mute); font-size: 12px; }
.editor .mono { font-size: 11px; color: var(--ink); }

.versoes { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--ink); }
.versoes li { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.versoes li.fora { color: var(--mute); }
.versoes p { margin: 0 0 4px; }
.versoes .k { margin-bottom: 6px; }
.versoes details { margin-top: 8px; }
.versoes summary { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); cursor: pointer; }
.versoes summary:hover { color: var(--ink); }
.versoes form { margin-top: 10px; }


.estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; }
.estado small { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

/* ── agenda ───────────────────────────────────────── */

/* As duas chaves (agenda e confirmação) lado a lado, com o botão embaixo. */
.chaves .bloco { display: flex; flex-direction: column; gap: 8px; }
.chaves .bloco p + p { margin-top: 0; }
.chaves .botoes { margin-top: 6px; }
.agenda .lista > .ficha { margin-top: 10px; color: var(--mute); font-size: 12px; }
/* Formulário de uma linha só: dia, das, às, e o botão no fim. Quebra no celular. */
.formulario.em-linha { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.formulario.em-linha label { flex: 1 1 130px; min-width: 0; }
.formulario.em-linha label.largo { flex-basis: 100%; }
.formulario.em-linha button { align-self: flex-end; }
.formulario.em-linha small { flex-basis: 100%; }
.formulario .grade label { min-width: 0; }
.semana .quem b { text-transform: capitalize; }
.faixas { display: flex; flex-wrap: wrap; gap: 6px; }
.faixa { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--mono); padding: 3px 4px 3px 8px; border: 1px solid var(--ink); }
.faixa button { padding: 0 6px; min-height: 0; line-height: 1.4; }
.horarios .botoes { display: flex; flex-wrap: wrap; gap: 6px; }
/* O fato proposto: a situação e as duas decisões, juntas à direita. */
.fatos .botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fatos .chip { margin-right: 4px; }
.agenda .quem b::first-letter, .horarios .quem b::first-letter { text-transform: uppercase; }
.livres { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 16px; }
.livres li { padding: 6px 0; border-top: 1px solid var(--line); }
.livres li::first-letter { text-transform: uppercase; }
@media (max-width: 480px) {
  .grade.chaves, .formulario .grade { grid-template-columns: minmax(0, 1fr); }
}

/* ── novidades ────────────────────────────────────── */

.proxima { font-weight: 700; }
.modo-agora { margin: 6px 0 0; color: var(--mute); }
.modo-agora a { margin-left: 4px; }
.por-dentro { margin: 12px 0 0; color: var(--mute); }

/* Os recortes e a busca da lista de conversas. */
.filtros-lista { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin: 8px 0 16px; }
.filtros-lista nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.filtros-lista nav a { color: var(--mute); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.filtros-lista nav a.atual { color: var(--ink); border-bottom-color: var(--ink); }
.filtros-lista .busca { margin: 0; }
.mais-conversas { margin-top: 16px; }

/* O link do topo. Com novidade que a pessoa não leu, ganha o ponto cheio. */
.novidades-link { position: relative; color: var(--mute); text-decoration: none; white-space: nowrap; }
.novidades-link:hover, .novidades-link.atual, .novidades-link.nova { color: var(--ink); }
.novidades-link.nova { margin-right: 6px; }
.novidades-link.nova::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

/* O aviso de versão nova: fica até fechar, com o caminho para as novidades. */
.aviso.versao { position: relative; padding-right: 40px; }
.aviso.versao .botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aviso.versao .botoes a, .aviso.versao .botoes button {
  font: 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 10px;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
}
.aviso.versao .botoes a { background: var(--paper); color: var(--ink); }
.aviso.versao .fechar {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 6px;
  background: none;
  border: 0;
  color: var(--line);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.aviso.versao .fechar:hover { color: var(--paper); }

.novidade { margin-top: clamp(8px, 2vw, 24px); }
.novidade > .abre .k { display: flex; align-items: center; gap: 10px; }
.novidade > .abre .lead { max-width: 68ch; margin: 12px 0 0; font-size: 17px; }
.parte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: 20px clamp(24px, 3vw, 48px);
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
}
.parte:not(:has(figure)) { grid-template-columns: minmax(0, 1fr); }
.parte h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 12px; }
.parte-texto p { margin: 0 0 10px; color: var(--txt); max-width: 56ch; }
.parte figure { margin: 0; min-width: 0; }
.parte img { display: block; width: 100%; height: auto; border: 1px solid var(--ink); cursor: zoom-in; }
/* Os números embaixo da imagem são os mesmos desenhados nela. */
.zonas { list-style: none; counter-reset: zona; margin: 12px 0 0; padding: 0; font-size: 13px; color: var(--txt); }
.zonas li { counter-increment: zona; display: flex; align-items: baseline; gap: 10px; padding: 4px 0; }
.zonas li::before {
  content: counter(zona);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font: 11px var(--mono);
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .parte { grid-template-columns: minmax(0, 1fr); }
}

/* ── o que é o Mitrie ─────────────────────────────── */

/* O índice das partes, embaixo da abertura. */
.sobre .cabeca .lead { max-width: 68ch; font-size: 17px; margin: 14px 0 0; }
.sumario { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.sumario a { color: var(--mute); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.sumario a:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* Cada parte: o título à esquerda, os itens à direita, como as novidades. */
.capitulo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: 20px clamp(24px, 3vw, 48px);
  padding: 40px 0;
  border-top: 1px solid var(--ink);
  scroll-margin-top: 16px;
}
.capitulo-abre .lead { margin: 12px 0 0; max-width: 40ch; }
.capitulo-corpo { display: grid; gap: 24px; }
.capitulo-corpo .item h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
.capitulo-corpo .item p { margin: 0 0 8px; color: var(--txt); max-width: 62ch; }
.capitulo-corpo .item.persona { padding-top: 18px; border-top: 1px solid var(--line); }
.capitulo-corpo .item h3 .chip { margin-left: 10px; font-weight: 400; }
.capitulo-corpo .item.persona h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.capitulo-corpo .item.desativada { color: var(--mute); }
.capitulo-corpo .plugins { margin: 4px 0 8px; padding-left: 18px; font-size: 14px; color: var(--txt); }
.capitulo-corpo .plugins li { margin: 3px 0; }
.so-admins .capitulo:first-of-type { border-top: 0; }
@media (max-width: 900px) {
  .capitulo { grid-template-columns: minmax(0, 1fr); padding: 32px 0; }
}

/* O que é da casa, na página de novidades: separado por traço e rotulado. */
.so-admins { margin-top: 32px; padding-top: 20px; border-top: 2px dashed var(--ink); }
.so-admins > .k { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Título de seção com um botão ao lado (Modelos de mensagem · conferir na Meta). */
.abre:has(> form) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.abre > form { margin: 0; }
/* Dois formulários de ação em sequência (gravar, depois descartar) não se encostam. */
form + form.em-linha { margin-top: 8px; }
/* Agenda: o texto que abre a lista não encosta na primeira linha. */
.agenda .lista > .lead { margin: 0 0 16px; }
.formulario.marcar { margin-top: 16px; }

/* ── plano e cobrança ─────────────────────────────── */

.plano .planos .bloco { display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.plano .planos .bloco.atual { border: 2px solid var(--ink); background: var(--leve); }
.plano .planos .bloco .aprovado { margin: 0; }
.plano .planos .bloco button { align-self: flex-start; margin-top: auto; }
.plano .barras.limite { border-top: 1px solid var(--ink); }
.plano .barra span.alem { background: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 5px); border: 1px solid var(--ink); border-bottom: 0; }
.plano .linhas .botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.cartao-novo { margin-top: 16px; }
.cartao-novo form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.cartao-novo form[hidden], .cartao-novo button[hidden], .erro-cartao[hidden] { display: none; }
.cartao-novo .botoes { display: flex; gap: 6px; }
.cartao-novo .elemento { padding: 14px; border: 1px solid var(--line); background: var(--paper); min-height: 60px; }
.erro-cartao { margin: 0; padding: 8px 12px; border: 1px solid var(--ink); font: 12px var(--mono); }
.alerta { margin: 16px 0 0; padding: 12px 14px; border: 2px solid var(--ink); background: var(--leve); }
@media (max-width: 720px) {
  .plano .planos { grid-template-columns: minmax(0, 1fr); }
}
.custo-contas .cabecalho, .custo-contas .fileira { grid-template-columns: minmax(0, 1.4fr) 100px 100px 72px minmax(0, 1fr) minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1fr); }
.mes .barras { gap: 3px; }
.mes .barra span.previsto, .legenda .amostra.previsto { background: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 5px); border: 1px solid var(--ink); }
.mes .barra span.previsto { border-bottom: 0; }
.mes .barra.hoje small { color: var(--ink); font-weight: 700; }
.mes .barra.depois small { color: var(--mute); }
.legenda { margin: 10px 0 0; font: 11px var(--mono); letter-spacing: .06em; color: var(--mute); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.legenda .amostra { display: inline-block; width: 12px; height: 12px; background: var(--ink); }
.legenda .amostra.previsto { margin-left: 10px; }
.previsao { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; border-top: 1px solid var(--line); padding-top: 14px; }
.previsao dt { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.previsao dd { margin: 4px 0 0; }
.previsao dd small { color: var(--mute); font-size: 11px; }
@media (max-width: 720px) { .previsao { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.custo-contas .fileira small { color: var(--mute); font-size: 11px; }
.custo .numero b { font-size: clamp(28px, 3.4vw, 46px); overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .custo-contas .fileira { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}

/* Vendas (paginas/vendas.tsx): a de todas as lojas tem a comissão de cada uma na linha. */
.vendas-lojas .cabecalho, .vendas-lojas .fileira { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) 230px; }
.vendas-lojas .fileira small { color: var(--mute); font-size: 11px; }
.vendas-lojas .quem a { color: inherit; }
.comissao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.comissao input.slug { width: 96px; font: 12px var(--mono); }
.comissao .crm-estado { flex-basis: 100%; color: var(--mute); font-size: 11px; }
.comissao label { display: flex; align-items: center; gap: 4px; font: 12px var(--mono); }
.comissao input { width: 64px; font: 13px var(--sans); background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; padding: 6px; }
.comissao button { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 7px 8px; cursor: pointer; }
.vendas .grade > .lista { margin-top: clamp(36px, 5vw, 64px); }
.vendas .lista-campos li > span:first-child { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .vendas-lojas .fileira { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .vendas-lojas .fileira .quem, .vendas-lojas .fileira .comissao { grid-column: 1 / -1; }
}

/* Personas (admin/personas.tsx): a lista com o filtro ativas/todas, a linha aberta
   marcada, e os plugins de cada uma numa linha só. */
.personas-lista .abre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.personas .cabecalho, .personas .fileira { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.8fr) 56px minmax(0, .9fr); }
.personas .fileira.atual { background: var(--leve); box-shadow: -12px 0 0 var(--leve), 12px 0 0 var(--leve); }
.personas .plugins-da-persona { font: 12px var(--mono); color: var(--mute); overflow-wrap: anywhere; }
.personas .quem .o-que { display: block; color: var(--mute); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.situacao-persona { margin: 10px 0 18px; }
.situacao-persona small { color: var(--mute); font-size: 12px; margin-right: 10px; }
.persona-nova .formulario.em-linha label.artigo { flex: 0 0 72px; }
.persona-editar .grade .bloco { align-self: start; }
/* "perfis" só se lê no celular, onde a coluna não tem cabeçalho. */
.personas .perfis-da-persona small { display: none; }
@media (max-width: 900px) {
  /* No celular a linha é a persona: o nome e a situação no alto, depois quem escreve e
     quantos perfis, e os plugins embaixo. A regra das conversas (.quem com grid-area)
     não vale aqui. */
  .personas .fileira {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nome situacao" "interlocutor perfis" "plugins plugins";
    gap: 6px 12px;
  }
  .personas .quem { grid-area: nome; }
  .personas .situacao-da-persona { grid-area: situacao; }
  .personas .interlocutor { grid-area: interlocutor; color: var(--mute); }
  .personas .interlocutor::before { content: "quem escreve: "; }
  .personas .perfis-da-persona { grid-area: perfis; text-align: right; }
  .personas .perfis-da-persona small { display: inline; color: var(--mute); font-size: 12px; }
  .personas .plugins-da-persona { grid-area: plugins; }
}
.plugins-escolha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plugins-escolha .opcao small { font: 12px/1.4 var(--sans); color: var(--mute); letter-spacing: 0; text-transform: none; }
.plugins-escolha .opcao .bloco-linha { display: block; margin-top: 2px; }
.plugins-escolha .opcao .coleta { color: var(--ink); }
.plugins-escolha .opcao:has(input:disabled) { cursor: default; }
.textos-plugins { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.textos-plugins details { border: 1px solid var(--line); background: var(--paper); padding: 10px 12px; }
.textos-plugins summary { cursor: pointer; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.textos-plugins details[open] summary { margin-bottom: 10px; }
.textos-plugins label { margin-top: 8px; }
.destinatarios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.destinatario { border: 1px solid var(--line); margin: 0; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.destinatario legend { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); padding: 0 4px; }
.destinatario.novo { border-color: var(--mute); }
.destinatario.novo legend { color: var(--mute); }
@media (max-width: 900px) {
  .plugins-escolha, .destinatarios { grid-template-columns: minmax(0, 1fr); }
}
/* No formulário da persona os textos são linhas de capacidade, não o prompt inteiro. */
.editor .textos-plugins textarea { min-height: 0; height: auto; }
.trocar-persona { margin-bottom: 28px; }
.persona-nova .lead, .trocar-persona .lead { margin-bottom: 14px; }
/* A opção longa ("Aulas no ateliê · o número das aulas…") não alarga a caixa no celular. */
.trocar-persona form select { min-width: 0; max-width: 100%; flex: 1 1 220px; text-overflow: ellipsis; }
/* Chip com texto longo (um erro de sincronia inteiro) quebra dentro da linha da
   tabela, em vez de alargar a página no celular. */
.fileira .chip { white-space: normal; overflow-wrap: anywhere; }

/* A lista fechada de uma persona (painel/admin/personas.tsx) */
.autorizados { list-style: none; padding: 0; margin: 14px 0; font-size: 13px; color: var(--txt); }
.autorizados li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.autorizados form { margin: 0; }
@media (max-width: 640px) {
  .autorizados li { grid-template-columns: minmax(0, 1fr) auto; }
  .autorizados li small { grid-column: 1 / -1; }
}

/* A issue que a sugestão abriria (plugins/github.ts) e os pedidos da conversa */
.sugerida .issue { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.sugerida .issue summary { cursor: pointer; font: 11px var(--mono); letter-spacing: .06em; color: var(--ink); }
.sugerida .issue pre { white-space: pre-wrap; word-break: break-word; font: 12px/1.5 var(--mono); margin: 6px 0 0; color: var(--txt); }
.bloco.tarefas li small { display: block; color: var(--mute); }
/* Quem escreve do número de um perfil conectado (identidade.ts) */
.reconhecido { display: inline-block; margin: 10px 8px 0 0; padding: 4px 10px; border: 1px solid var(--ink); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.quem-pode .k { margin-top: 22px; }
/* A página de uma persona (painel/admin/persona.tsx): um cartão por plugin, com o que é dele. */
.plugins-escolha.cartoes { display: flex; flex-direction: column; gap: 12px; }
.plugin-cartao { border: 1px solid var(--line); background: var(--paper); padding: 14px 16px; gap: 12px; }
.plugin-cartao.ligado { border-color: var(--ink); }
.plugin-cartao header .opcao { border: 0; padding: 0; background: transparent; }
.plugin-cartao header .opcao small { font: 12px/1.4 var(--sans); color: var(--mute); letter-spacing: 0; text-transform: none; }
.plugin-cartao header .bloco-linha { display: block; margin-top: 2px; }
.plugin-cartao header .coleta { color: var(--ink); }
.plugin-cartao .alerta-plugin { margin: 6px 0 0; font-size: 13px; color: var(--ink); }
.plugin-corpo { display: flex; flex-direction: column; gap: 10px; }
.plugin-corpo:empty { display: none; }
.plugin-corpo > .k { margin-top: 10px; }
.prompt-do-papel { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.prompt-do-papel textarea { font: 12px/1.55 var(--mono); min-height: 32vh; }
.prompt-do-papel .estado { margin: 0; }
.prompt-rodape { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; }
.prompt-rodape details { flex: 1 1 100%; }
.prompt-rodape summary, .plugin-cartao .chamada summary, .prompt-do-perfil summary { cursor: pointer; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.modelo-do-papel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plugin-cartao .quem-pode { margin-top: 6px; }
/* O cartão ligado vem dobrado: o resumo diz o que tem dentro. */
.textos-plugins details.plugin-dobra { border: 0; padding: 0; background: transparent; margin-top: 10px; }
.textos-plugins details.plugin-dobra > summary { color: var(--ink); }
.textos-plugins details.plugin-dobra[open] > summary { margin-bottom: 14px; }
.plugin-cartao header { position: relative; }
.plugin-cartao .ficha-do-plugin { position: absolute; top: 0; right: 0; font: 11px var(--mono); letter-spacing: .06em; color: var(--mute); }
.plugin-cartao header .opcao { padding-right: 110px; }
.plugins-grupo { margin-top: 18px; }
.plugins-grupo > .k { margin-bottom: 8px; }

/* O catálogo de plugins (painel/admin/plugins.tsx): a procura, as prateleiras e a página de um. */
[data-texto][hidden], [data-prateleira][hidden], [data-procura-vazia][hidden] { display: none; }
.plugins-procura { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; margin: 8px 0 4px; }
.plugins-procura label, label.plugins-procura { display: flex; flex-direction: column; gap: 6px; flex: 0 1 340px; margin-top: 14px; }
.prateleira .abre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.prateleira .abre small { color: var(--mute); font-size: 13px; }
.plugins .cabecalho, .plugins .fileira { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.plugins .quem .o-que, .plugin-personas .quem .o-que { display: block; color: var(--mute); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.plugins .traz, .plugins .em-uso { font-size: 13px; color: var(--txt); }
.plugins .marcas-plugin { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.plugin-ficha { max-width: 76ch; margin-bottom: 28px; }
.plugin-ficha .lead { font-size: 17px; margin: 0; }
.plugin-ficha .marcas { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 14px 0 0; }
.plugin-ficha .coleta { font-size: 14px; color: var(--ink); }
.plugin-personas .cabecalho, .plugin-personas .fileira { grid-template-columns: minmax(0, 1.8fr) 56px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.plugin-personas .fileira.ligado { background: var(--leve); box-shadow: -12px 0 0 var(--leve), 12px 0 0 var(--leve); }
.plugin-personas .acao { justify-self: end; text-align: right; font-size: 13px; }
.plugin-personas .acao form { margin: 0; }
.config-padrao pre.payload { margin: 0; white-space: pre-wrap; }
@media (max-width: 900px) {
  .plugins .fileira, .plugin-personas .fileira { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .plugins .cabecalho, .plugin-personas .cabecalho { display: none; }
  .plugin-personas .acao { justify-self: start; text-align: left; }
  .plugins .em-uso::before { content: "ligado em: "; color: var(--mute); }
}
.gravar-persona { position: sticky; bottom: 0; z-index: 2; background: var(--paper); border-top: 1px solid var(--ink); padding: 14px 0; margin-top: 24px; }
.prompts-do-perfil { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.prompt-do-perfil { border: 1px solid var(--line); padding: 10px 12px; }
.prompt-do-perfil[open] { border-color: var(--ink); }
.prompt-do-perfil .formulario { margin-top: 10px; }
.prompt-do-perfil .editor textarea { min-height: 28vh; }
@media (max-width: 720px) { .modelo-do-papel { grid-template-columns: minmax(0, 1fr); } }
.prompt-do-papel p { margin: 0; }
.prompt-do-papel > label { margin-top: 4px; }
.vazio-vale { text-transform: none; letter-spacing: 0; font: 12px var(--mono); color: var(--mute); }
.reconhecido a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ── missões (painel/admin/missoes.tsx) ─────────────────────────────────── */
.missoes .cabecalho, .missoes .fileira { grid-template-columns: 40px minmax(0, 2.4fr) minmax(0, .8fr) 64px 90px minmax(0, .8fr); }
.missoes .objetivo small { color: var(--mute); }
.artistas .cabecalho, .artistas .fileira { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 110px 80px minmax(0, .9fr) 110px; }
.artistas .quem small a { color: inherit; }
.objetivo-da-missao { margin: 0; white-space: pre-wrap; max-width: 72ch; }
.terminal { list-style: none; margin: 0; padding: 16px; background: var(--leve); border: 1px solid var(--line); font: 13px/1.55 var(--mono); }
.terminal .passo { margin: 0; padding: 2px 0; overflow-wrap: anywhere; }
.terminal .passo p { margin: 0; }
.terminal .modelo { margin-top: 14px; }
.terminal .modelo:first-child { margin-top: 0; }
.terminal .turno { color: var(--mute); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.terminal .ferramenta { padding-left: 2ch; }
.terminal .ferramenta .argumentos { color: var(--mute); }
.terminal .erro summary { font-weight: 600; }
.terminal summary { cursor: pointer; color: var(--mute); }
/* Sem altura máxima: o que se abre num passo aparece inteiro, e só a página rola. Com 40vh e
   rolagem própria, a roda do mouse parava dentro do passo aberto no meio da página (30/09/2026),
   e a regra da casa é uma rolagem só (a conversa é a exceção). */
.terminal pre { margin: 6px 0 8px 2ch; padding: 10px; border-left: 2px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.terminal .pensamento pre { font-style: italic; }
/* A missão como conversa (admin/missoes.tsx): a página é a da conversa (.fio, .tempo, .pendente, mais
   abaixo). Quem pediu à direita, a missão à esquerda, e o trabalho entre
   uma fala e outra recolhido numa linha; aberto, é o terminal. */
.msg.pessoa { align-self: flex-end; border-color: var(--ink); background: var(--paper); }
.msg.missao.entregue { border-color: var(--ink); border-left-width: 3px; }
.msg.missao.ao-artista { border-style: dashed; }
.msg .autor .em { margin-left: 8px; color: var(--ink); }
.trabalho { align-self: stretch; max-width: 100%; }
.trabalho > summary { cursor: pointer; font: 11px var(--mono); letter-spacing: .04em; color: var(--mute); padding: 4px 0; overflow-wrap: anywhere; }
.trabalho > summary::before { content: "∴ "; }
.trabalho > summary:hover, .trabalho[open] > summary { color: var(--ink); }
.trabalho.com-erro > summary { color: var(--ink); font-weight: 700; }
.trabalho .terminal { margin-top: 6px; padding: 12px 14px; }
.nota-do-fio { align-self: center; margin: 4px 0; max-width: 72ch; text-align: center; font: 11px var(--mono); color: var(--txt); border: 1px solid var(--line); padding: 6px 10px; }
.missao-conversa .vazio { align-self: center; }
.missao-conversa .msg { max-width: min(820px, 80%); }
/* A caixa de escrever, sempre embaixo do fio: o campo e o botão numa linha. */
.escrever-missao { display: flex; align-items: flex-end; gap: 10px; border-style: solid; padding: 10px; overflow: visible; }
.escrever-missao textarea { flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 30vh; resize: vertical; font: 15px/1.4 var(--sans); background: var(--paper); color: var(--ink); border: 0; padding: 6px 4px; outline: none; }
.escrever-missao button { flex: none; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 11px 14px; cursor: pointer; }
.escrever-missao button.parar { background: transparent; color: var(--ink); }
.escrever-missao button:disabled { opacity: .5; cursor: default; }
.escrever-missao:focus-within { border-width: 2px; padding: 9px; }
/* A página inteira rola (`.fio.solto`): o fio não tem moldura nem altura, e a caixa de escrever fica
   presa ao pé da tela. A coluna ao lado acompanha a rolagem, e o botão do alto a esconde (a classe
   `sem-lado` fica no <html>, fora do miolo que se atualiza). */
.fio.solto { height: auto; min-height: 0; }
.fio.solto .tempo { overflow: visible; padding-bottom: 24px; }
.fio.solto .ao-fim { display: none; }
.fio.solto .escrever-missao { position: sticky; bottom: 0; z-index: 1; max-height: none; margin-top: 0; box-shadow: 0 -12px 0 var(--paper), 0 12px 0 var(--paper); }
.conversa-pagina .missao-conversa aside { position: sticky; top: 64px; max-height: calc(100dvh - 80px); overflow-y: auto; }
.missao-conversa aside .medidores { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.missao-conversa aside .teto-total { margin-top: 10px; }
.missao-conversa aside .rascunhos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.missao-conversa aside .rascunho .em-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.missao-conversa aside .esperando-aprovacao > .k { color: var(--ink); }
.passar-para-o-artista .formulario { margin-top: 8px; }
.alternar-lado { margin-left: auto; font: 11px var(--mono); letter-spacing: .08em; background: none; border: 0; padding: 6px 0; color: var(--mute); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.alternar-lado:hover { color: var(--ink); }
.alternar-lado .mostrar, .sem-lado .alternar-lado .esconder { display: none; }
.sem-lado .alternar-lado .mostrar { display: inline; }
.sem-lado .conversa-pagina .conversa.missao-conversa { grid-template-columns: minmax(0, 1fr); }
.sem-lado .missao-conversa aside { display: none; }
@media (max-width: 640px) {
  .alternar-lado { display: none; }
  .conversa-pagina .missao-conversa aside { position: static; max-height: none; overflow: visible; }
}
.missoes-do-site { display: grid; gap: 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.missoes-da-conta { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.missoes-da-conta small { color: var(--mute); }
.missoes-da-conta a { font-size: 15px; }
/* Seu Mitrie (paginas/mitrie.tsx): um modelo por bloco, e o aviso de quem escreve em nome do artista. */
.modelos-de-missao .modelo-de-missao { display: grid; gap: 10px; align-content: start; }
.modelos-de-missao .modelo-de-missao small { color: var(--mute); }
.em-nome-de { border-left: 2px solid var(--ink); padding: 6px 12px; margin: 0 0 18px; }
.rascunho-do-site .em-linha { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
@keyframes pulsar { 50% { opacity: .35; } }
.resultado { max-height: none; font-family: var(--sans); font-size: 15px; }

@media (max-width: 900px) {
  .missoes .fileira, .artistas .fileira { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ── dossiês (paginas/dossies.tsx) ───────────────────────────────────────── */
.dossies { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.dossies h3 { margin: 4px 0 8px; font-size: 20px; }
.dossies h3 small { font-size: 12px; color: var(--mute); font-weight: 400; margin-left: 8px; }
.texto-do-dossie { white-space: pre-wrap; max-width: 72ch; }
.fatos { margin: 8px 0 0; padding-left: 18px; }
.fatos li { margin: 4px 0; overflow-wrap: anywhere; }
.fatos a { font-size: 12px; color: var(--mute); }
.dossies-da-missao { margin: 0; padding-left: 18px; }

/* ── design review, 24/09/2026: as peças que valem para todas as telas ──── */

/* Duas opções à vista, a de agora cheia: no lugar do botão que dizia o contrário do
   estado ("Ligada" + DESLIGAR). Botão, não link: cada lado é uma ação. */
.alternar { display: inline-flex; flex-wrap: wrap; margin-top: 6px; }
.alternar button {
  font: 11px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 9px 14px;
  margin-left: -1px;
  cursor: pointer;
  min-height: 36px;
}
.alternar button:first-child { margin-left: 0; }
.alternar button:hover:not([aria-pressed="true"]) { background: var(--leve); }
.alternar button[aria-pressed="true"] { background: var(--ink); color: var(--paper); cursor: default; }

/* O que é raro e o que não se desfaz fica embaixo de um traço, recolhido. */
.mais-acoes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mais-acoes summary { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); cursor: pointer; }
.mais-acoes summary:hover, .mais-acoes[open] summary { color: var(--ink); }
.mais-acoes .acoes { margin-top: 12px; }

/* Título de página de detalhe: o trabalho começa acima da dobra. */
.cabeca.detalhe { padding: clamp(18px, 2.4vw, 28px) 0 clamp(14px, 1.6vw, 20px); }
.cabeca.detalhe h1 { font-size: clamp(28px, 3vw, 40px); }
.cabeca.detalhe .meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 8px; }
.cabeca.detalhe .meta .janela { margin: 0; }

/* Medidor fino: quanto já foi, de quanto. */
.medidor { display: block; height: 6px; background: var(--line); margin: 8px 0 4px; max-width: 360px; }
.medidor span { display: block; height: 100%; background: var(--ink); max-width: 100%; }

/* Confirmação com nome: a pergunta diz o que some, e a caixa de marcar diz o que vai junto. */
dialog.confirmar { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); padding: 22px 24px; width: min(440px, calc(100% - 32px)); }
dialog.confirmar::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
dialog.confirmar p { margin: 0 0 10px; }
dialog.confirmar .pergunta { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
dialog.confirmar label { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 14px; }
dialog.confirmar label.campo { flex-direction: column; gap: 6px; }
dialog.confirmar label.campo input { width: 100%; padding: 10px 12px; font: inherit; font-size: 16px; letter-spacing: .04em; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); text-transform: uppercase; }
dialog.confirmar label input { margin-top: 3px; accent-color: var(--ink); }
dialog.confirmar label small { display: block; color: var(--mute); font-size: 12px; }
dialog.confirmar .botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
dialog.confirmar button {
  font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); border-radius: 0; padding: 10px 14px; cursor: pointer;
}
dialog.confirmar button.leve { background: transparent; color: var(--ink); }

/* Alvos de toque de pelo menos 32px, e pares de botão sempre lado a lado. */
.faixa { padding: 0 0 0 10px; }
.faixa button { min-width: 32px; min-height: 32px; padding: 0 8px; font-size: 14px; line-height: 1; }
.botoes-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.botoes-linha form { margin: 0; }

/* A formatação do WhatsApp (*negrito*, _itálico_, ~riscado~, `mono`) desenhada. */
.texto strong { font-weight: 700; }
.texto code { font-family: var(--mono); font-size: .92em; }



/* A sugestão editável: o texto vira campo no lugar. */
.sugerida textarea { width: 100%; font: 14px/1.45 var(--sans); padding: 8px 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 0; resize: vertical; margin-top: 4px; }
.sugerida textarea[hidden] { display: none; }
.sugerida .editada { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.sugerida .o-que-sai { font-size: 14px; color: var(--ink); }
.sugerida .do-modelo summary { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); cursor: pointer; margin-top: 8px; }
.sugerida .do-modelo p { color: var(--mute); }
.sugerida .virar-regra { margin-top: 10px; }

/* Dúvida: escolher e depois mandar, com o número do X no próprio campo. */
.opcoes-radio { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; border: 0; padding: 0; }
.opcoes-radio label { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 9px 12px; font: 14px/1.4 var(--sans); cursor: pointer; background: var(--paper); flex-wrap: wrap; text-transform: none; letter-spacing: 0; color: var(--ink); }
.opcoes-radio label:has(input:checked) { border-color: var(--ink); }
.opcoes-radio input[type=radio] { accent-color: var(--ink); margin: 0; }
.opcoes-radio .lacuna { width: 8ch; font: 14px var(--sans); padding: 2px 6px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 0; }
.orientar .vale { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--txt); }
.orientar .vale input { margin-top: 3px; accent-color: var(--ink); }

/* Precisa de você: a primeira coisa da página inicial do perfil. */
.precisa { margin-top: 8px; }
.precisa .abre { display: flex; align-items: baseline; gap: 12px; }
.precisa ul { list-style: none; margin: 0; padding: 0; }
.precisa li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.precisa li .o-que { min-width: 0; text-decoration: none; }
.precisa li .o-que b { display: block; }
.precisa li .o-que:hover b { text-decoration: underline; }
.precisa li .o-que small { display: block; color: var(--txt); font-size: 14px; overflow-wrap: anywhere; }
.precisa li .botoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.precisa .vazio { padding: 12px 0; margin: 0; }
.precisa button, .precisa .botao {
  font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 0; padding: 9px 12px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.precisa button.leve, .precisa .botao.leve { background: transparent; color: var(--ink); }
@media (max-width: 640px) {
  .precisa li { grid-template-columns: minmax(0, 1fr); }
  .precisa li .botoes { justify-content: flex-start; }
}

/* O limite do plano, em todas as páginas, logo embaixo das abas. */
.faixa-limite { padding: 10px var(--pad-x); border-bottom: 1px solid var(--ink); background: var(--leve); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.faixa-limite b { font-weight: 700; }

/* O modo do Mitrie: bloco próprio no alto da ficha do perfil. */
/* A mesma pessoa na ficha do contato: a lista dos ligados respira antes das sugestões. */
#mesma-pessoa .linhas { margin: 12px 0 20px; }
#mesma-pessoa .linhas li { padding: 10px 0; }
/* Os modos da porta do Instagram, na ficha do perfil: botões soltos, não os quatro cartões. */
.modos-porta { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.bloco-modo .modos-lado { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.bloco-modo .modo-opcao { border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--paper); }
.bloco-modo .modo-opcao.atual { border: 2px solid var(--ink); background: var(--leve); }
.bloco-modo .modo-opcao p { margin: 0; font-size: 14px; color: var(--txt); }
.bloco-modo .modo-opcao b { font-size: 18px; letter-spacing: -.01em; }
.bloco-modo .modo-opcao button { align-self: flex-start; margin-top: auto; }
@media (max-width: 1100px) { .bloco-modo .modos-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .bloco-modo .modos-lado { grid-template-columns: minmax(0, 1fr); } }
.bloco-modo .so-numeros { margin-top: 14px; max-width: 520px; }
.bloco-modo .so-numeros textarea { font-family: var(--mono); }

/* Detalhes técnicos: recolhidos, para o suporte. */
.tecnico { margin-top: 12px; }
.tecnico summary { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); cursor: pointer; }
.tecnico[open] summary { color: var(--ink); margin-bottom: 8px; }
.saude { margin: 0; font-size: 15px; }

/* Direcionamento: a instrução se edita clicando nela; remover aparece no foco e no
   passar do mouse (e fica à vista no toque). */
@media (hover: hover) {
  .direcoes li .botoes .remover { opacity: 0; transition: opacity .15s; }
  .direcoes li:hover .botoes .remover, .direcoes li:focus-within .botoes .remover { opacity: 1; }
}
.direcoes .direcao > p[data-editar] { cursor: text; }
.direcoes .direcao > p[data-editar]:hover { background: var(--leve); box-shadow: -6px 0 0 var(--leve), 6px 0 0 var(--leve); }

/* Catálogo: o preço na coluna dele, a situação em texto. */
.obras .cabecalho, .obras .fileira { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) 120px minmax(0, .8fr); }
.obras .preco { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .obras .fileira { grid-template-columns: minmax(0, 1fr) auto; }
  .obras .fileira .ficha { grid-column: 1 / -1; grid-row: 2; }
}

/* Agenda: a faixa da semana ao lado do dia, com o que ela rende. */
.semana li { justify-content: flex-start; }
.semana .quem { flex: 0 0 120px; }
.semana .faixas { flex: 1 1 auto; align-items: center; }
.semana .rende { font: 11px var(--mono); color: var(--mute); letter-spacing: .04em; }
.semana .conflito { font-size: 13px; color: var(--ink); font-weight: 700; flex-basis: 100%; }
.semana details.mais-faixa summary { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); cursor: pointer; list-style: none; padding: 6px 0; }
.semana details.mais-faixa summary::-webkit-details-marker { display: none; }
.semana details.mais-faixa summary:hover { color: var(--ink); }
.semana details.mais-faixa[open] { flex-basis: 100%; }
.semana details.mais-faixa form { margin-top: 8px; }
.troca { font-weight: 700; }
.grupo-titulo { margin: 18px 0 4px; }

/* Missão: parar ao lado do estado, e os dois medidores. */
.missao-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.missao-estado form { margin: 0; }
.medidores { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 8px 24px; margin-top: 10px; font-size: 13px; color: var(--txt); }
@media (max-width: 640px) { .medidores { grid-template-columns: minmax(0, 1fr); } }

/* Herdado × escrito aqui, nos campos de modelo. */
.herdado { font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.com-unidade { display: flex; align-items: stretch; }
.com-unidade input { flex: 1 1 auto; min-width: 0; }
.com-unidade > span { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--ink); border-left: 0; font: 12px var(--mono); color: var(--mute); text-transform: none; letter-spacing: 0; }

/* Prompt: os marcadores conferidos enquanto se escreve. */
.marcadores-vivos { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 11px var(--mono); letter-spacing: .04em; }
.marcadores-vivos .falta { font-weight: 700; }
.marcadores-vivos .falta::before { content: "○ "; }
.marcadores-vivos .tem { color: var(--mute); }
.marcadores-vivos .tem::before { content: "● "; }

/* Comparar versões: palavra que saiu riscada, palavra que entrou em negativo. */
.diff { white-space: pre-wrap; font: 12px/1.6 var(--mono); padding: 12px; background: var(--leve); border: 1px solid var(--line); max-height: 50vh; overflow: auto; margin: 8px 0 0; }
.diff del { color: var(--mute); }
.diff ins { text-decoration: none; background: var(--ink); color: var(--paper); }

/* Custo: o período num controle só, acima dos números; a grade do gráfico com o valor. */
.periodo { margin: 18px 0 0; }
.barras.com-grade { position: relative; }
.barras .linha-grade { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); pointer-events: none; }
.barras .linha-grade small { position: absolute; right: 0; top: -16px; font: 10px var(--mono); color: var(--mute); background: var(--paper); padding-left: 4px; }

/* Texto de ajuda: frase inteira em Helvetica, nunca em caixa-alta mono. */
.ajuda { display: block; font: 13px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--mute); }
.precisa + .numeros { margin-top: clamp(28px, 4vw, 48px); }
.dia dl.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.alerta p { margin: 0; }
.alerta .medidor { margin-bottom: 0; }

/* A ajuda embaixo de um campo é frase: Helvetica, sem caixa-alta, mesmo dentro do
   rótulo em mono. Caixa-alta mono é só para rótulo curto. */
.formulario label small, .formulario label .ajuda, .estado small, .campos dd small { font: 12px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--mute); }
.senha-gerada { display: flex; gap: 6px; }
.senha-gerada input { flex: 1 1 auto; min-width: 0; font-family: var(--mono) !important; }
.plano .linhas .botoes .ajuda { max-width: 26ch; }
/* Aprovar tem o tamanho de um botão, não de uma faixa: a decisão vem depois de ler. */
.dossie .acoes { flex-direction: row; flex-wrap: wrap; align-items: center; }
.dossie .acoes small { flex-basis: 100%; }

/* Custo: a amostra da legenda é a mesma tinta da barra. */
.legenda .amostra:not(.previsto) { background: var(--ink); }
.periodo + .numeros { margin-top: 14px; }

.persona-nova .formulario.em-linha label.artigo { flex: 0 0 150px; }
.persona-nova [data-artigo-previa] { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 12px; color: var(--ink); }
.plugin-cartao header .coleta a { color: inherit; }
.bloco-modo button { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; padding: 9px 12px; cursor: pointer; }
.bloco-modo + .grade, .bloco-modo + .trocar-persona { margin-top: clamp(28px, 4vw, 48px); }
.bloco-modo .modo-opcao b .chip { vertical-align: middle; margin-right: 6px; }
.semana li { flex-wrap: nowrap; align-items: center; }
.semana .faixas { flex: 1 1 0; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.semana details.mais-faixa summary { padding: 0; }
.semana details.mais-faixa:not([open]) { flex: 0 0 auto; }
.semana details.mais-faixa:not([open]) summary { display: inline; }
.semana details.mais-faixa { order: 2; }
.semana .faixas > .nada { flex: 0 0 auto; }
.medidor > span { margin: 0 !important; font-size: 0; }

/* ── a conversa como no WhatsApp Web ─────────────────────────────────────
   Só o fio rola por dentro: um painel da altura da primeira tela, que abre no fim
   (painel.js), com o que espera alguém embaixo, onde no WhatsApp fica a caixa de
   escrever. A página rola como qualquer outra: ao lado do fio, só o que se usa para
   responder (resumo, agenda, compra, controles), sem rolagem própria; o que se consulta
   de vez em quando (dossiê, pesquisa, pedidos) abre numa gaveta (`dialog.gaveta`). */
.conversa-pagina .cabeca.detalhe { padding: 14px 0 10px; }
.conversa-pagina .cabeca.detalhe .k { margin-bottom: 6px; }
.conversa-pagina .cabeca.detalhe h1 { font-size: clamp(24px, 2.4vw, 32px); }
.conversa-pagina .cabeca.detalhe .meta { margin-top: 4px; }
.conversa-pagina .conversa { padding-top: 0; align-items: start; }
.conversa-pagina aside { position: static; padding-top: 16px; }
/* A altura é a que sobra embaixo de onde o fio começa: o painel.js mede (`--fio-topo`), porque o
   alto da página muda (a faixa do limite, o nome em duas linhas, o reconhecimento). Com a conta fixa
   de antes, o que fica embaixo do fio saía da tela (30/09/2026). */
.fio { position: relative; display: flex; flex-direction: column; min-width: 0; height: calc(100dvh - var(--fio-topo, 170px) - 20px); min-height: 360px; }
.fio .tempo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 4px 16px 0; outline: none; }
.pendente { flex: none; max-height: 45%; overflow-y: auto; border: 1px dashed var(--ink); background: var(--paper); padding: 12px 14px 14px; margin-top: 8px; }
.pendente > .k { margin-bottom: 8px; color: var(--ink); }
.pendente .decisao { max-width: none; align-self: stretch; margin: 0; border-left: 0; padding: 0; }
.ao-fim {
  position: absolute; right: 16px; bottom: 16px; z-index: 1;
  font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; padding: 8px 12px; cursor: pointer;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 14%, transparent);
}
.ao-fim[hidden] { display: none; }
.ao-fim .novas { display: none; }
.ao-fim.com-novas { background: var(--ink); color: var(--paper); }
.ao-fim.com-novas .novas { display: inline; margin-right: 6px; }
/* O separador do dia, no meio do fio. */
.dia-da-conversa { align-self: center; margin: 10px 0 2px; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.dia-da-conversa span { background: var(--paper); padding: 4px 10px; border: 1px solid var(--line); }
.tempo .agora { align-self: flex-start; }
/* Da conversa: o que ela produziu (dossiê, pesquisa, pedidos), uma linha cada na lateral,
   e o conteúdo numa gaveta que desliza da direita por cima da página. */
.gavetas ul { list-style: none; margin: 0; padding: 0; }
.gavetas li + li { border-top: 1px solid var(--line); }
.gaveta-botao {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px;
  background: none; border: 0; padding: 12px 0; min-height: 44px; cursor: pointer; text-align: left; color: var(--ink);
  font: 15px/1.35 var(--sans);
}
.gaveta-botao b { font-weight: 700; }
.gaveta-botao .situacao { font: 12px var(--mono); color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaveta-botao .chip { white-space: normal; }
.gaveta-botao .abrir { font-size: 16px; }
.gaveta-botao:hover b { text-decoration: underline; text-underline-offset: 3px; }
dialog.gaveta {
  margin: 0 0 0 auto; padding: 0; border: 0; border-left: 2px solid var(--ink);
  width: min(620px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw;
  background: var(--paper); color: var(--ink); overflow: hidden;
}
dialog.gaveta[open] { display: flex; flex-direction: column; animation: gaveta .18s ease-out; }
dialog.gaveta::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); }
@keyframes gaveta { from { transform: translateX(24px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { dialog.gaveta[open] { animation: none; } }
dialog.gaveta.sem-animar[open] { animation: none; }
.gaveta-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ink); flex: none; }
.gaveta-topo .k { margin: 0; color: var(--ink); }
.gaveta-topo .fechar { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: none; border: 1px solid var(--ink); color: var(--ink); padding: 8px 12px; min-height: 36px; cursor: pointer; }
.gaveta-corpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 32px; }
.gaveta-corpo > .bloco { background: none; border: 0; padding: 0; }

/* A página da conversa usa a largura: em 1440 a borda é a mínima, e o fio ganha espaço. */
main.conversa-pagina { max-width: 1680px; --pad-x: clamp(16px, 2vw, 32px); }
.conversa-pagina .conversa { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: clamp(20px, 2.4vw, 40px); }
/* No celular não há painel: a página rola, o fio vem primeiro, e o que espera alguém
   fica preso ao pé da tela. */
@media (max-width: 640px) {
  .fio { height: auto; min-height: 0; }
  .fio .tempo { overflow: visible; }
  .conversa-pagina .conversa { grid-template-columns: minmax(0, 1fr); }
  .conversa-pagina aside { order: 1; padding-top: 0; }
  .pendente { position: sticky; bottom: 0; max-height: 60dvh; z-index: 2; }
  .ao-fim { display: none; }
}

/* ── design review, round 2 (24/09/2026) ─────────────────────────────────── */

/* As marcas de estado são quatro, e só quatro: ● feito ou ligado, ○ esperando,
   — encerrado, ✕ erro, em negrito. Plano e modo são palavras, sem marca. */
.chip.erro { color: var(--ink); font-weight: 700; }
.chip.erro::before { content: "✕"; }
.rotulo-simples { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--txt); }

/* O erro: o que falhou e o que acontece agora, em negrito, e o detalhe cru embaixo. */
.erro-bloco { margin: 0 0 18px; padding: 12px 14px; border: 2px solid var(--ink); background: var(--paper); }
.erro-bloco p { margin: 0; }
.erro-bloco b::before { content: "✕ "; }
.erro-bloco .mono { margin-top: 8px; font-size: 12px; color: var(--txt); }
#estado.erro { display: flex; flex-direction: column; gap: 4px; }
#estado.erro b::before { content: "✕ "; }
#estado.erro small { font: 12px var(--mono); color: var(--txt); }

/* Embaixo do fio, o rascunho sem moldura dentro de moldura: a de fora já diz o que é. */
.pendente .sugerida, .pendente .duvida { border: 0; padding: 0; margin: 0 !important; background: transparent; }
.pendente .decisao.na-pendente { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--txt); }
.pendente .decisao.na-pendente .sugerida .botoes { margin-top: 12px; }

/* A janela fechada: o modelo de mensagem no lugar da resposta, com o texto montado. */
.pendente.retomar { border-style: solid; }
.pendente.retomar > p { margin: 0 0 6px; }
.modelo-retomar { margin-top: 10px; }
.modelo-retomar summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.modelo-retomar .formulario { margin-top: 8px; }
.previa-modelo { margin: 0; padding: 10px 12px; background: var(--ink); color: var(--paper); max-width: 560px; }
.pendente.retomar .k { margin: 0 0 8px; }

/* Precisa de você: uma pessoa por linha, o que ela espera empilhado embaixo. */
.precisa li.pessoa { display: block; padding: 14px 0 6px; }
.precisa .quem-espera { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.precisa .quem-espera a, .precisa .quem-espera > span:first-child { font-weight: 700; font-size: 17px; letter-spacing: -.01em; text-decoration: none; }
.precisa .quem-espera a:hover { text-decoration: underline; }
.precisa .quem-espera .janela { margin: 0; }
.precisa .itens { list-style: none; margin: 0; padding: 0; }
.precisa .itens > li { border-bottom: 0; border-top: 1px solid var(--line); padding: 10px 0; }
.precisa .itens > li:first-child { border-top: 0; }
.precisa li .o-que b { font-weight: 600; }
.precisa details.o-que summary { list-style: none; cursor: pointer; }
.precisa details.o-que summary::-webkit-details-marker { display: none; }
.precisa .ler { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); white-space: nowrap; }
.precisa details[open] .ler { display: none; }
.precisa .inteira { margin: 8px 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.precisa details[open] summary small { display: none; }
.precisa li:has(> details.o-que) { grid-template-columns: minmax(0, 1fr); }

/* Botão que é link (abrir, editar, remarcar), onde quer que esteja. */
a.botao {
  display: inline-flex; align-items: center; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 9px 12px; text-decoration: none; white-space: nowrap;
}
a.botao.leve { background: transparent; color: var(--ink); }

/* A página inicial sem conversa: o que fazer para ver o Mitrie trabalhar. */
.vazio-acoes { padding: 16px 0; }
.vazio-acoes p { margin: 0; }
.vazio-acoes .ajuda { margin-top: 8px; max-width: 60ch; }

/* O medidor mostra o trilho inteiro: 100 de 100 é a barra cheia. */
.medidor { background: transparent; border: 1px solid var(--ink); height: 8px; }
.alerta .medidor { max-width: none; }

/* A dúvida: a instrução que vai para o Direcionamento, escrita antes de gravar. */
.orientar .regra-escrita { display: flex; flex-direction: column; gap: 4px; }
.orientar .regra-escrita[hidden] { display: none; }
.orientar .vale input, dialog.confirmar label input { width: 18px; height: 18px; flex: none; }
.orientar .vale { cursor: pointer; padding: 6px 0; }

/* Pares de ação separados: juntos, lado a lado sem vão, só os de estado (.alternar). */
.botoes { gap: 8px; }
.formulario .botoes { display: flex; flex-wrap: wrap; align-items: center; }
.direcoes .botoes, .orientar .botoes, .sugerida .botoes, .horarios .botoes { gap: 8px; }

/* Restaurar é texto, e só aparece no campo escrito aqui. */
button.restaurar {
  background: none !important; color: var(--ink) !important; border: 0 !important; padding: 0 !important;
  font: 11px var(--mono); letter-spacing: .06em; text-transform: lowercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Alvos de pelo menos 32px nos links de texto e nos recolhidos, 44px no toque. */
button.perigo, a.voltar, .k a, .alerta a, .fatos a, .faixa-limite a, .precisa .quem-espera a { display: inline-block; padding-top: 7px; padding-bottom: 7px; }
.mais-acoes summary, .recolhido summary, .tecnico summary, .versoes summary, .do-modelo summary, .dossie summary, .trocar-voz summary, .prompt-rodape summary { padding: 8px 0; }
@media (max-width: 600px) {
  button.perigo, a.voltar, .k a, .alerta a, .fatos a, .faixa-limite a { padding-top: 13px; padding-bottom: 13px; }
  .mais-acoes summary, .recolhido summary, .tecnico summary, .versoes summary, .do-modelo summary, .dossie summary { padding: 13px 0; }
  .controles button, .precisa button, a.botao, .alternar button, .sugerida button, .horarios button { min-height: 44px; }
}

/* Foco à vista em todo controle: 2px de tinta, afastado 2px. */
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .alternar button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* As abas no celular: a borda esmaecida diz que há mais para o lado. */
.abas { scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas.tem-mais { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.abas.tem-mais.tem-antes { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent); }
.abas.tem-antes:not(.tem-mais) { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }

/* A trilha do começo: o feito em tinta, o que falta em cinza. */
.trilha { border-top: 0; }
.trilha li { border-top: 3px solid var(--line); margin-top: 0; }
.trilha li.feito { border-top-color: var(--ink); color: var(--ink); }
.trilha li.atual { border-top-color: var(--ink); }
.trilha li:not(.feito):not(.atual) { color: var(--mute); }
.comecar .passo .ajuda { font-size: 14px; }

/* As obras da entrevista de começo (acervo.ts): a foto e a ficha, uma por linha. */
.obras-da-conta { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 0; border-top: 1px solid var(--ink); }
.obras-da-conta li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.obras-da-conta img, .obras-da-conta .sem-foto { width: 96px; height: 96px; object-fit: cover; background: var(--leve); display: grid; place-items: center; font: 11px var(--mono); color: var(--mute); }
.obras-da-conta .quem { display: grid; gap: 2px; }
.obras-da-conta .quem small { color: var(--mute); }

/* As pendências da entrevista (paginas/entrevista.tsx): o que espera a casa e o que o
   artista ficou de fazer. */
.pendencias ul { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--ink); }
.pendencias li { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.pendencias li p { margin: 0; }
.pendencias form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.pendencias textarea { flex: 1 1 280px; min-width: 0; }
.pendencias summary { cursor: pointer; }
.pendencias button { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper); padding: 9px 12px; cursor: pointer; }
.pendencias button.leve { background: transparent; color: var(--ink); }

/* "O que diríamos agora?" (paginas/conversa.tsx): embaixo da resposta que saiu, o que o
   código de hoje responderia à mesma mensagem. Pontilhado: não saiu, é ensaio. */
.agora-pedir { align-self: flex-end; display: flex; justify-content: flex-end; margin: 2px 0 10px; }
.agora-pedir button, .diriamos button { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: transparent; color: var(--mute); border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; }
.diriamos { align-self: flex-end; margin: 4px 0 14px auto; max-width: 78%; padding: 10px 12px; border: 1px dotted var(--ink); }
.diriamos .k { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin: 0; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.diriamos .sugestao-texto { margin: 8px 0 0; }
.diriamos .erro-hoje { margin: 8px 0 0; font-weight: bold; }
.diriamos .botoes-hoje { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.diriamos .botoes-hoje span { border: 1px solid var(--ink); padding: 4px 8px; font-size: 13px; }
.diriamos .pendencias-hoje { margin: 6px 0 0; color: var(--mute); font-size: 13px; }
.diriamos .do-modelo summary { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); cursor: pointer; margin-top: 6px; }
.diriamos .do-modelo p { color: var(--mute); }
@media (max-width: 640px) { .diriamos { max-width: 100%; } }
.reensaio form { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.reensaio input { flex: 1 1 220px; min-width: 0; }

/* A loja na TRAJETO (paginas/loja.tsx): obras, pedidos, pagamento e as versões do site. */
.loja .alternar { margin-top: 14px; }
.obras-loja .fileira { grid-template-columns: 72px minmax(0, 2fr) 120px 130px; align-items: center; }
.obras-loja .editar-obra { grid-column: 1 / -1; }
.obras-loja .editar-obra[open] { padding: 8px 0 12px; }
.loja .miniatura img { width: 72px; height: 72px; object-fit: cover; display: block; background: var(--line); }
.loja .quem small { display: block; }
.loja .preco { text-align: right; font-variant-numeric: tabular-nums; }
.pedidos .fileira { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) 110px 190px 300px; }
/* A regra das conversas no celular (.quem com grid-area) embaralhava a linha do pedido: aqui não vale. */
.pedidos .fileira .quem, .obras-loja .fileira .quem { grid-area: auto; }
/* Entre o celular e a tela larga, as colunas fixas esmagavam o nome e o endereço: duas colunas, os botões embaixo. */
@media (min-width: 721px) and (max-width: 1100px) {
  .pedidos .fileira { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 20px; }
  .pedidos .fileira .botoes { grid-column: 1 / -1; justify-content: flex-start; }
}
.livro .fileira { grid-template-columns: 120px 110px 130px minmax(0, 1fr); padding: 10px 0; }
.loja .botoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.loja summary { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); cursor: pointer; }
.loja summary:hover { color: var(--ink); }
.loja .nova-obra { margin-top: 14px; }
.loja .nova-obra[open] .formulario, .loja .editar-obra .formulario { max-width: 560px; margin-top: 12px; }
.lado-a-lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.loja .dica { margin: 0; font-size: 14px; }
.versoes-site { margin: 12px 0; border-top: 1px solid var(--ink); }
.versoes-site .versao { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.versoes-site .botoes { justify-content: flex-start; }
.loja textarea.mono { font: 12px/1.5 var(--mono); }
@media (max-width: 720px) {
  .obras-loja .fileira, .pedidos .fileira { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .livro .fileira { grid-template-columns: auto auto 1fr; gap: 4px 12px; }
  .livro .fileira > :last-child { grid-column: 1 / -1; }
  .loja .preco { text-align: left; }
  .loja .botoes { justify-content: flex-start; }
  .lado-a-lado { grid-template-columns: minmax(0, 1fr); }
}

/* Editais (painel/admin/editais.tsx): cada edital com os campos e o trecho da página que prova cada um. */
.editais .edital { border-top: 1px solid var(--ink); padding: 16px 0 18px; }
.editais .edital h3 { margin: 0 0 4px; font-size: 17px; }
.editais .edital .meta small { color: var(--mute); }
.editais .edital .campos div > span:last-child { display: grid; gap: 4px; overflow-wrap: anywhere; }
.editais .trecho { color: var(--mute); font-size: 13px; }
.editais .recusado, .fontes-editais .recusado { color: var(--mute); font: 11px var(--mono); letter-spacing: .04em; }
.editais .aviso-edital { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; margin: 6px 0 0; }
.editais .edital > .em-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.editais .edital > .em-linha form.em-linha { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.editais .edital form.em-linha { flex-wrap: nowrap; align-items: center; }
.editais .edital form.em-linha input[type="text"] { width: min(280px, 60vw); margin: 0; }
.fontes-editais .cabecalho, .fontes-editais .fileira { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 70px minmax(0, 1.2fr); }
.fontes-editais .quem { display: grid; gap: 2px; overflow-wrap: anywhere; }
.fontes-editais .fileira.parada { opacity: .55; }
.fontes-editais .em-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.fontes-editais .hora small { display: block; color: var(--mute); }
@media (max-width: 900px) {
  .fontes-editais .fileira { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
/* Ficha de editais do artista (painel/admin/editais-artista.tsx). */
.artistas-editais .cabecalho, .artistas-editais .fileira { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 90px 80px; }
.encaixes-editais .cabecalho, .encaixes-editais .fileira { grid-template-columns: minmax(0, 1.6fr) 110px 90px minmax(0, 2.4fr) minmax(0, 1fr); }
.encaixes-editais .quem, .encaixes-editais .porque, .envios-editais .quem { display: grid; gap: 4px; overflow-wrap: anywhere; }
.encaixes-editais small, .envios-editais small, .artistas-editais small { color: var(--mute); }
.envios-editais .cabecalho, .envios-editais .fileira { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 2fr) 70px; }
.envios-editais .fileira > span:nth-child(2) small { display: block; }
.ficha-editais .em-linha { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.ficha-editais .em-linha label { flex: 1 1 180px; }
.acoes-ficha { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.resposta-edital form + form { margin-top: 10px; }
@media (max-width: 900px) {
  .artistas-editais .fileira, .encaixes-editais .fileira, .envios-editais .fileira { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* A rotina, na Visão geral do admin (painel/admin/saude.tsx, 10/11/2026). Só tinta: a falha é a
   linha com fio cheio à esquerda, a rotina parada é a faixa cheia. */
.etapas-rotina .cabecalho, .etapas-rotina .fileira { grid-template-columns: minmax(0, 1.4fr) 130px minmax(0, 2fr); }
.etapas-rotina .fileira > span { overflow-wrap: anywhere; }
.etapas-rotina .fileira small { color: var(--mute); }
.etapas-rotina .com-falha { box-shadow: inset 3px 0 0 var(--ink); padding-left: 12px; }
.etapas-rotina .com-falha > span:last-child { color: var(--ink); }
.aviso-rotina { margin: 0 0 14px; padding: 12px 14px; background: var(--ink); color: var(--paper, #fff); }
.alertas-rotina { list-style: none; padding: 0; margin: 0 0 14px; border-top: 1px solid var(--ink); }
.alertas-rotina li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.alertas-rotina small { color: var(--mute); }
@media (max-width: 760px) {
  .etapas-rotina .cabecalho { display: none; }
  .etapas-rotina .fileira { grid-template-columns: 1fr; gap: 4px; }
}