/* Três degraus de superfície, e a separação vem deles — não de engrossar a
   borda. O papel era #fbf7f8 contra o cartão branco: 1,06:1, um passo que não
   existe, e lateral, painel e cartão liam como o mesmo plano.
   Cada cor de estado tem duas formas: a PURA, que marca (preenchimento, borda,
   anel de foco, a marca), e a de TEXTO, mais escura, porque o magenta puro em
   12px sobre o próprio véu dava 4,04:1 e não passa AA. O --rosa continua
   #e01e5a: é a cor dela, do paleta.txt. */
:root {
  --papel: #efe3e8;          /* o chão: corpo, campo, fileira encaixada */
  --cartao: #ffffff;         /* a superfície de trabalho, um degrau acima */
  --tinta: #1d1418;
  --tinta-2: #5c4b52;
  --linha: #e8dde0;
  --rosa: #e01e5a;           /* marca e preenchimento */
  --rosa-texto: #c0184b;     /* o mesmo magenta, legível em 12px */
  --rosa-claro: #fdeaf0;
  --verde: #0a7d57;
  --verde-texto: #076749;
  --verde-claro: #e6f4ee;
  --amarelo: #915300;        /* escurecido: 4,53:1 no véu era passar raspando */
  --amarelo-claro: #fdf0dc;
  --vermelho-claro: #fdeaf0;
  --chave-desligada: #8b777e;/* pista da vigia desligada: o pino branco sobre
                                #b9aab0 dava 2,22:1, abaixo dos 3:1 de controle */
  /* o que se escreve EM CIMA de um preenchimento saturado. No escuro o magenta
     e o verde são cores CLARAS, e branco sobre eles dava 2,95:1 e 2,11:1 — o
     botão principal e o número da fase falhavam AA no tema escuro. */
  --sobre-cor: #ffffff;
  --sombra: 0 1px 2px rgba(29, 20, 24, .06), 0 6px 18px rgba(29, 20, 24, .05);
  /* medida em tempo real pelo painel.js: era 56px fixo contra um topo de
     65,5px no desktop e 109px no celular, e o editor comia o cabecalho. */
  --topo-h: 56px;
}
/* O escuro é composto, não invertido: aqui o cartão SOBE em relação ao papel, e
   os véus de estado sobem ACIMA do cartão. Com o cartão levantado e os véus
   antigos (#33161f e cia.) o véu desaparecia contra ele — 1,04:1. */
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0f0a0d; --cartao: #241b20; --tinta: #f4eaee; --tinta-2: #c0aab3;
    --linha: #33262c;
    --rosa: #ff5c85; --rosa-texto: #ff5c85; --rosa-claro: #43202b;
    --verde: #4fc79b; --verde-texto: #4fc79b; --verde-claro: #17382a;
    --amarelo: #e5a950; --amarelo-claro: #3b2c18;
    --vermelho-claro: #43202b; --sobre-cor: #1a1013; --sombra: none;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 15px/1.5 "Segoe UI", system-ui, sans-serif;
  display: flex; flex-direction: column;
}
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); margin: 0 0 10px; }
button { font: inherit; }
/* O DESIGN.md diz que o anel magenta "vale pra todo controle do sistema, sem
   exceção", e o CSS o escrevia pra dois seletores de uns oito tipos: as cinco
   pílulas de fase, os botões da lista de lives e os sete do editor caíam no
   anel padrão do navegador. Por tipo de elemento em vez de por classe, pra
   controle novo já nascer com ele. */
button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--rosa); outline-offset: 2px;
}
button.acao, .acao {
  font-size: 13px; padding: 6px 12px; cursor: pointer;
  background: var(--cartao); border: 1px solid var(--linha);
  color: var(--tinta); border-radius: 8px; box-shadow: var(--sombra);
}
button.acao:hover { border-color: var(--tinta-2); }
button.acao[disabled] { opacity: .6; cursor: default; }
button.acao.principal { background: var(--rosa); border-color: var(--rosa); color: var(--sobre-cor); font-weight: 600; }
button.acao.principal:hover { filter: brightness(.95); }
/* "Parar" é o mesmo tipo de botão do "Gravar agora" — mesma forma, mesmo
   tamanho — mas encerra algo que está acontecendo, e a borda rosa é o que
   evita clicar nele achando que é o outro. */
button.acao.parar { border-color: var(--rosa); color: var(--rosa-texto); }
.vazio { color: var(--tinta-2); font-size: 14px; }
.dica { color: var(--tinta-2); font-size: 13px; margin: 4px 0 12px; }
/* Erro com véu, não cor solta no papel. Texto magenta sobre papel nu violava a
   regra do Par Cor + Véu do DESIGN.md — e era justo o que travava o papel de
   poder ficar mais fundo, porque magenta sobre papel fundo cai pra 3,74:1. */
.recusa {
  font-size: 13px; color: var(--rosa-texto);
  background: var(--vermelho-claro); border-radius: 8px; padding: 6px 8px;
}
/* aviso é o que parou sem levar a entrega embora: âmbar, o par do semáforo que
   quer dizer "olhe, mas nada está barrado". */
.aviso {
  font-size: 13px; color: var(--amarelo);
  background: var(--amarelo-claro); border-radius: 8px; padding: 6px 8px;
  margin: 8px 0;
}

/* --- topo: marca, vigia, perfis, disco ------------------------------------ */
.topo {
  display: flex; align-items: center; gap: 16px; padding: 10px 20px;
  background: var(--cartao); border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 5;
}
.marca { font-weight: 700; color: var(--rosa); font-size: 17px; letter-spacing: -.01em; }
.faixa {
  display: flex; align-items: center; gap: 12px; flex: 1;
  padding: 6px 12px; border-radius: 10px; background: var(--linha);
}
.faixa.ligada { background: var(--verde-claro); color: var(--verde-texto); }
.faixa.atencao { background: var(--amarelo-claro); color: var(--amarelo); }
/* critico não é o mesmo aviso: aqui gravação nova está BARRADA. Pintar igual
   ao amarelo fazia o bloqueio passar por recado inofensivo. */
.faixa.critico { background: var(--vermelho-claro); color: var(--rosa-texto); box-shadow: inset 0 0 0 2px var(--rosa); }
.faixa-texto { display: flex; flex-direction: column; line-height: 1.25; }
.faixa-texto strong { font-size: 14px; }
.faixa-texto span { font-size: 12px; }
.faixa-disco { font-size: 12px; text-align: right; color: var(--tinta-2); line-height: 1.25; }
.faixa-disco strong { color: var(--tinta); }
/* magenta sem véu, e é a frase de maior risco da tela: "sem espaço, não vou
   gravar". A Regra do Par Cor + Véu vale aqui igual a qualquer outro aviso. */
.disco-aviso {
  display: inline-block; font-weight: 600; color: var(--rosa-texto);
  background: var(--vermelho-claro); border-radius: 6px; padding: 2px 6px;
  margin-top: 2px;
}
.disco-aviso:empty { display: none; }
.chave {
  width: 44px; height: 26px; border-radius: 13px; border: 0;
  background: var(--chave-desligada); position: relative; cursor: pointer; flex-shrink: 0;
}
.chave[aria-pressed="true"] { background: var(--verde); }
.pino {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--sobre-cor); transition: left .15s;
}
.chave[aria-pressed="true"] .pino { left: 21px; }

.perfis-caixa { position: relative; }
.perfis-caixa > summary { list-style: none; display: inline-block; user-select: none; }
.perfis-caixa > summary::-webkit-details-marker { display: none; }
.perfis-corpo {
  position: absolute; right: 0; top: calc(100% + 8px); width: 380px; max-width: 90vw;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(29, 20, 24, .14); padding: 12px; z-index: 10;
}
/* Com o editor aberto o menu não tem como abrir por cima dele (ver o
   comentário no "toggle" do painel.js) — em vez de simplesmente não
   funcionar, o botão avisa. */
.perfis-caixa.travada > summary { opacity: .45; cursor: default; }
.lista { list-style: none; padding: 0; margin: 0; border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.lista li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--cartao); }
.lista li + li { border-top: 1px solid var(--linha); }
.lista li.gravando { background: var(--vermelho-claro); }
.lista .nome { flex: 1; font-size: 14px; }
.lista .detalhe { display: block; font-size: 12px; color: var(--tinta-2); }
.lista .recusa { display: block; }
.novo-perfil { display: flex; gap: 8px; margin-top: 12px; }
.novo-perfil input {
  flex: 1; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--linha); background: var(--papel); color: inherit; font: inherit;
}
/* alvo de 44px: era ~30x29, o menor controle destrutivo da tela. */
.acao.remover {
  min-width: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center;
  line-height: 1; font-size: 17px; opacity: .45; box-shadow: none; flex-shrink: 0;
}
.acao.remover:hover { opacity: 1; border-color: var(--rosa); color: var(--rosa-texto); }

/* --- corpo: a live aberta ocupa a largura toda ---------------------------- */
/* A lista de lives era uma coluna fixa de 280px aqui à esquerda. Virou menu no
   topo (`.lives-caixa`) a pedido dela: ela trabalha numa live por vez, e os
   280px valem mais pros cartões dos cortes — no celular a coluna ainda comia
   a faixa de cima da tela antes dela chegar nos cortes. */
.corpo { display: flex; flex: 1; min-height: 0; }

.lives-caixa { position: relative; }
.lives-caixa > summary { list-style: none; display: inline-block; user-select: none; }
.lives-caixa > summary::-webkit-details-marker { display: none; }
.lives-caixa.travada > summary { opacity: .45; cursor: default; }
.lives-corpo {
  position: absolute; left: 0; top: calc(100% + 8px); width: 320px; max-width: 90vw;
  max-height: 70vh; overflow-y: auto;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(29, 20, 24, .14); padding: 12px; z-index: 10;
}
.lives { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lives li button {
  width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: inherit;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline;
}
.lives li button:hover { background: var(--papel); }
.lives li.aberta button { background: var(--rosa-claro); border-color: var(--rosa); }
.lives .data { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tinta-2); }
.lives .quem { font-weight: 600; font-size: 14px; }
.lives .situacao { grid-column: 2; font-size: 12px; color: var(--tinta-2); }
.lives .situacao.destaque { color: var(--rosa-texto); font-weight: 600; }

.live { flex: 1; min-width: 0; padding: 20px 28px 60px; overflow-y: auto; }
.live-cabeca { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.live-cabeca h1 { font-size: 22px; margin: 0; }
.live-cabeca .meta { color: var(--tinta-2); font-size: 13px; }

/* as fases: uma trilha, e a fase aberta em rosa */
.fases { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.fase {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--cartao); cursor: pointer; color: var(--tinta-2);
  font-size: 13px;
}
.fase .n {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--linha); font-size: 12px; font-weight: 700; color: var(--tinta-2);
}
.fase.pronta .n { background: var(--verde); color: var(--sobre-cor); }
.fase.atual { border-color: var(--rosa); color: var(--rosa-texto); background: var(--rosa-claro); font-weight: 600; }
.fase.atual .n { background: var(--rosa); color: var(--sobre-cor); }
.fase .conta { font-size: 12px; opacity: .8; }

.painel-fase { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 18px 20px; box-shadow: var(--sombra); }
/* O cabeçalho da fase é h2 pra não pular nível depois do h1 da live, mas NÃO é
   um título de região: a caixa alta de 13px do h2 global é só pra "LIVES". */
.painel-fase .titulo-da-fase {
  margin: 0 0 4px; font-size: 16px; font-weight: 700;
  text-transform: none; letter-spacing: normal; color: var(--tinta);
}
.painel-fase .dica { margin-top: 0; }
.botoes-acao, .botoes-ajuste { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.etapas { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.etapa {
  font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--linha); color: var(--tinta-2);
}
.etapa.concluida { border-color: var(--verde); color: var(--verde-texto); background: var(--verde-claro); }
.etapa.em_andamento { border-color: var(--amarelo); color: var(--amarelo); background: var(--amarelo-claro); }
.etapa.erro, .etapa.interrompida { border-color: var(--rosa); color: var(--rosa-texto); background: var(--vermelho-claro); }
#recado-da-live { margin: 8px 0; }

/* --- candidatos ------------------------------------------------------------ */
/* Fechado por padrão: nota, tipo, duração e título numa linha só. O espaço
   ENTRE dois candidatos (6px) é menor que o de dentro do que está aberto
   (12px) — antes era o contrário, e nada marcava onde uma sugestão acabava. */
.candidato {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  padding: 8px 12px; margin-bottom: 6px; border-radius: 12px;
  border: 1px solid var(--linha); background: var(--papel); align-items: start;
}
.candidato.aberto { padding: 12px 16px; margin-block: 12px; }
.candidato.aprovado { background: var(--verde-claro); border-color: var(--verde); }
/* 44px de alvo: é o controle que ela usa uma vez por sugestão, e media 36×37 */
.candidato .marca-aprovar {
  font-size: 22px; padding: 0;
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
}
.corpo-cand { min-width: 0; }
/* a cabeça do candidato É o que abre: alvo grande, sem controle extra na linha */
.linha-abrir {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  width: 100%; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.titulo-cand {
  font-size: 15px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.titulo-cand.sem { color: var(--tinta-2); font-style: italic; }
.candidato .cabeca { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.candidato .fala { color: var(--tinta-2); font-size: 13px; margin: 6px 0; }
.candidato .linha-campos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.candidato input[type="number"] { width: 6rem; }
.candidato input[type="text"] { flex: 1; min-width: 12rem; }
.candidato input {
  padding: 6px 8px; border-radius: 8px; color: inherit; font: inherit;
  border: 1px solid var(--linha); background: var(--cartao);
}
.candidato .detalhe { font-size: 12px; color: var(--tinta-2); margin: 6px 0 0; }
.nota { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--verde-claro); color: var(--verde-texto); }
/* As três réguas do config.toml viram três leituras: 8+ já sai editado (verde,
   concluído), 7 sai cru e ainda pede o Editar (âmbar, em andamento), 6 ou
   menos fica neutro. Neutro e NÃO magenta: magenta quer dizer barrado, e
   dezessete pílulas magenta na mesma tela apagariam o sentido dele. */
.nota.nota-crua { background: var(--amarelo-claro); color: var(--amarelo); }
.nota.nota-fraca { background: var(--linha); color: var(--tinta-2); }
.pill { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--linha); color: var(--tinta-2); }
.pill-verde { background: var(--verde-claro); color: var(--verde-texto); }
.pill-amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
.pill-vermelho { background: var(--vermelho-claro); color: var(--rosa-texto); }

/* --- as bandas de nota da lista de sugestões -------------------------------- */
/* 28px entre bandas contra 6px entre fileiras: o único intervalo generoso da
   região, e é ele que marca a virada de nota. O cabeçalho é grudento porque
   depois de uma tela cheia ela perdia a referência de onde estava. */
.banda + .banda { margin-top: 28px; }
.banda-cabeca {
  position: sticky; top: -20px; z-index: 1;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 8px; background: var(--cartao);
}
.banda-abrir {
  display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0;
  flex-wrap: wrap;
  padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
/* o rótulo quebrava no meio ("NOTA 8 E / ACIMA") quando o espaço apertava */
.banda-rotulo {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-2); white-space: nowrap;
}
.banda-seta { flex-shrink: 0; align-self: center; color: var(--tinta-2); }
/* gira sem transição: o sistema tem uma animação só, e é o pino da chave */
.banda-abrir[aria-expanded="true"] .banda-seta { transform: rotate(90deg); }
.banda-aprovar { margin-left: auto; flex-shrink: 0; }
.banda-recado {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  background: var(--verde-claro); color: var(--verde-texto);
}

/* --- cortes prontos --------------------------------------------------------- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 10px; }
.corte { border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; background: var(--cartao); box-shadow: var(--sombra); display: flex; flex-direction: column; }
.corte video { width: 100%; aspect-ratio: 9 / 16; display: block; background: #000; object-fit: cover; }
.corte .corpo-corte { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.corte .etiquetas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.corte .titulo { font-size: 14px; font-weight: 600; line-height: 1.3; }
.corte .duracao { font-size: 12px; color: var(--tinta-2); }
/* a legenda é texto que ela vai postar — visível e selecionável no próprio
   cartão, porque "copiar" pode falhar (ver copiarTexto no painel.js) e ela
   precisa de como pegar o texto na mão. */
.corte .legenda {
  font-size: 13px; color: var(--tinta-2); line-height: 1.4;
  white-space: pre-wrap; margin: 0;
  user-select: text; cursor: text;
}
.corte .botoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
/* o link de baixar tem o mesmo peso dos botões da linha: :link/:visited do
   navegador não deve aparecer aqui, é um .acao como os outros */
.corte .botoes button, .corte .botoes a.acao {
  flex: 1; text-align: center; text-decoration: none;
}
/* o corte sem título não só se anuncia vazio: a linha do título vira o campo */
.corte .nomear { display: flex; gap: 6px; }
.corte .nomear input {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--linha); background: var(--papel);
  color: inherit; font: inherit; font-size: 14px;
}

/* --- editor pelo texto ------------------------------------------------------ */
.editor {
  position: fixed; inset: var(--topo-h, 56px) 0 0 0; z-index: 20; background: var(--papel);
  padding: 16px 28px; overflow-y: auto;
}
/* Gruda no alto do editor. Sem isto, a barra — que carrega o botão FECHAR e o
   nome do corte — sobe junto com a rolagem e some: o editor se abre já rolado
   até o trecho escolhido (medido a 375px: a barra parava em y=-802) e a
   pessoa ficava dentro do editor sem saída visível. Some no desktop também;
   no celular, onde a tela é curta e não há Esc num teclado à mão, vira
   armadilha. */
.editor-topo {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-bottom: 8px;
  position: sticky; top: 0; z-index: 2;
  background: var(--cartao); padding: 8px 0;
}
.editor-topo strong { font-size: 17px; }
.editor-corte { font-size: 13px; color: var(--tinta-2); }
#corte-escolhido {
  max-width: 18rem; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--linha); background: var(--papel);
  color: inherit; font: inherit; font-size: 13px;
}
#btn-fechar-editor { margin-left: auto; }
#transcricao {
  line-height: 1.55;
  padding: 12px; border-radius: 12px; background: var(--cartao); border: 1px solid var(--linha);
  /* o texto é o alvo do mouse: sem isto a seleção pega a página toda */
  user-select: text; cursor: text;
}
#transcricao .seg { border-radius: 6px; }
#transcricao .seg::selection { background: #ffb703; color: #111; }
#acoes-da-selecao {
  position: sticky; top: 0; z-index: 2; padding: 12px 16px;
  border-radius: 12px; background: var(--cartao); border: 1px solid var(--rosa); margin-bottom: 8px;
}
#previa { max-width: 220px; border-radius: 12px; display: block; margin: 8px 0; background: var(--fundo-video, #000); }
/* o `display: block` acima é regra de autor e vencia o display:none do atributo
   `hidden`: o player continuava preto na tela mesmo escondido. */
#previa[hidden] { display: none; }
/* o corte escolhido, desenhado na transcrição */
#transcricao .seg.dentro { background: rgba(10,125,87,.22); }
#transcricao .seg.tirado { background: rgba(224,30,90,.14); opacity: .55; text-decoration: line-through; }
/* uma fala por linha, com o relógio do lado */
#transcricao .linha {
  display: flex; gap: 12px; align-items: baseline;
  margin: 0 0 6px; padding: 4px 6px; border-radius: 6px; border-left: 3px solid transparent;
}
#transcricao .linha.usado { border-left-color: var(--linha); }
#transcricao .hora {
  flex: 0 0 52px; text-align: right; color: var(--tinta-2);
  font-variant-numeric: tabular-nums; font-size: 13px; user-select: none;
}

@media (max-width: 800px) {
  .corpo { flex-direction: column; }
  /* 40vh deixava 378px de área útil de 812: o topo e a lista de lives comiam
     53% da tela antes de qualquer conteúdo da live. */
  .live { padding: 16px; }
  .topo { flex-wrap: wrap; gap: 10px; }
  .faixa { order: 5; flex-basis: 100%; }
  /* o grudento acompanha o padding menor da região, e o cabeçalho empilha:
     em 375px o rótulo, a consequência, a contagem e o botão de lote não
     couberam numa linha e o texto se estilhaçou. */
  .banda-cabeca { top: -16px; flex-direction: column; align-items: stretch; gap: 6px; }
  .banda-aprovar { margin-left: 0; }
  /* 6rem de largura fixa quebrava a linha dos campos em tela estreita; os
     dois rótulos ficam lado a lado em vez de uma coluna de largura cheia. */
  .candidato .linha-campos label { display: flex; align-items: center; gap: 6px; flex: 1 1 8rem; }
  .candidato input[type="number"] { width: auto; flex: 1; min-width: 0; }
}

/* ---- seletor de visual do corte ------------------------------------- */
/* A tira rola na horizontal de propósito: quatro quadros em pé não cabem
   lado a lado na largura de um cartão, e empilhar esconderia o quarto. */
.visuais { margin-top: .6rem; }
.tira-visuais {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem;
}
.visual {
  /* Estreito de propósito: o quadro é 9:16, então cada 1rem de largura custa
     quase 2rem de altura. A 8.5rem a tira empurrava o resto do cartão pra
     fora da tela. */
  flex: 0 0 6rem; display: flex; flex-direction: column; gap: .25rem;
  background: none; border: 2px solid transparent; border-radius: .5rem;
  padding: .25rem; cursor: pointer; text-align: left; color: inherit;
}
.visual:hover, .visual:focus-visible { border-color: currentColor; }
/* `contain`, não `cover`: recortar pra caber esconderia justo a legenda, que
   fica na parte de baixo do quadro e é metade do que muda entre os visuais. */
.visual img {
  width: 100%; max-height: 11rem; object-fit: contain;
  border-radius: .35rem; display: block;
}
.visual-nome { font-weight: 600; }
.visual-descricao { font-size: .75rem; opacity: .75; line-height: 1.25; }
.visuais-esperando { font-style: italic; }

/* ---- o endereço pro celular ----------------------------------------- */
.celular-caixa { position: relative; }
.celular-corpo {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 6;
  width: 15rem; padding: .75rem; border-radius: .6rem;
  background: var(--fundo-caixa, #241a20); box-shadow: 0 8px 24px #0009;
}
/* O QR precisa de fundo branco pra ler: o painel é escuro e um QR "invertido"
   muitos leitores simplesmente não pegam. */
.celular-corpo .qr {
  background: #fff; padding: .5rem; border-radius: .4rem; line-height: 0;
}
.celular-corpo .qr svg { width: 100%; height: auto; display: block; }
.celular-corpo .endereco { margin: .5rem 0 0; text-align: center; }
.celular-corpo .endereco code { font-size: 1rem; word-break: break-all; }

/* ---- Ajustes: as conexões ------------------------------------------- */
.ajustes-caixa { position: relative; }
.ajustes-caixa > summary { list-style: none; display: inline-block; user-select: none; }
.ajustes-caixa > summary::-webkit-details-marker { display: none; }
.ajustes-caixa.travada > summary { opacity: .45; cursor: default; }
.ajustes-corpo {
  position: absolute; right: 0; top: calc(100% + 8px); width: 22rem; max-width: 90vw;
  max-height: 75vh; overflow-y: auto;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(29, 20, 24, .14); padding: 12px; z-index: 10;
}
.ajustes-corpo h3 { margin: .2rem 0 .4rem; font-size: 14px; }
.ajustes-corpo h3 + p { margin-top: 0; }
/* A área de arrastar é um <label> em volta de um <input type=file> escondido:
   assim ela funciona por arrasto E por clique, sem dois caminhos no código. */
.solta-cookies {
  display: block; text-align: center; cursor: pointer;
  padding: 1.1rem .75rem; margin: .5rem 0;
  border: 2px dashed var(--linha); border-radius: .6rem; color: var(--tinta-2);
}
.solta-cookies:hover, .solta-cookies.sobre {
  border-color: var(--rosa); color: inherit;
}

/* ---- Ajustes: as listas de texto ------------------------------------ */
/* Mais largo que os outros menus do topo: aqui dentro ela EDITA, e uma caixa
   de texto de 22rem faz toda linha quebrar no meio. */
.ajustes-corpo { width: 30rem; }
.lista-texto {
  width: 100%; box-sizing: border-box; resize: vertical;
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.5;
  padding: .5rem; border-radius: .4rem;
  border: 1px solid var(--linha); background: var(--papel); color: inherit;
}
.linha-lista {
  display: flex; align-items: center; gap: .6rem; margin: .4rem 0 1rem;
}
.linha-lista .dica, .linha-lista .recusa { margin: 0; }

/* ---- apagar o vídeo bruto ------------------------------------------- */
.bloco-bruto {
  border: 1px solid var(--linha); border-radius: .6rem;
  padding: .6rem .75rem; margin: .5rem 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
}
.bloco-bruto p { margin: 0; flex: 1 1 18rem; }
/* O botão sem volta não pode parecer com os outros. */
.acao.perigo { border-color: var(--vermelho, #c0392b); color: var(--vermelho, #c0392b); }

/* ---- os menus do topo no celular ------------------------------------ */
/* FICA NO FIM DO ARQUIVO DE PROPÓSITO. Cada menu do topo declara o seu
   `position: relative`, e esses blocos foram sendo acrescentados aqui embaixo
   conforme os menus nasceram — um `position: static` escrito numa media query
   no MEIO do arquivo é sobrescrito por eles, porque a especificidade é a
   mesma e quem vem depois ganha. Foi o que aconteceu: a regra existia, os
   menus de Ajustes e Celular continuavam presos ao botão, e o de Ajustes
   abria começando 250px À ESQUERDA da tela a 375px — dava pra ver um pedaço e
   o resto não tinha como alcançar.

   Sem o `position: relative` da caixa, o corpo se ancora no `.topo` (sticky,
   logo posicionado) e `left`/`right` passam a valer da BORDA DA TELA. O topo
   quebra em duas linhas no celular e cada botão para num x diferente, então
   nenhuma regra presa ao botão dá conta. */
@media (max-width: 800px) {
  .lives-caixa, .perfis-caixa, .ajustes-caixa, .celular-caixa { position: static; }
  .lives-corpo, .perfis-corpo, .ajustes-corpo, .celular-corpo {
    left: 16px; right: 16px; width: auto; max-width: none;
  }
}

/* ---- alvo de toque no celular --------------------------------------- */
/* Medido a 375px em 17/09/2026: 12 dos 27 botões visíveis tinham menos de
   40px de altura — os `.acao` ficavam em 34px e as fases em 38px. Com o
   mouse isso é preciso; com o polegar, não. A recomendação de acessibilidade
   é 44px, e é de graça aqui: só no estreito, pra não afrouxar a densidade da
   tela do PC, onde ela trabalha com mouse. */
@media (max-width: 800px) {
  .acao, summary.acao, .fase {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* O `.fase` alinha número e nome à esquerda; centralizar quebraria a linha. */
  .fase { justify-content: flex-start; }
  /* A chave da vigia tem 44x26 e é um interruptor — esticá-la pra 44 de altura
     viraria um retângulo. Em vez disso, cresce só a ÁREA DE TOQUE, com um
     pedaço invisível acima e abaixo: o desenho continua o mesmo e o polegar
     ganha os 44px. */
  .chave::after { content: ""; position: absolute; inset: -9px 0; }
}

/* A linha que traduz "nota", "promo" e "demo" pra quem abre o painel pela
   primeira vez. Menor que a dica de cima: é consulta, não instrução. */
.legenda-simbolos { font-size: 12px; opacity: .8; margin-top: -.3rem; }

/* Cada endereço do menu Celular num bloco: o do Wi-Fi e o de fora são coisas
   diferentes e misturar os dois QRs faria ela apontar a câmera no errado. */
.endereco-bloco + .endereco-bloco {
  margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--linha);
}