/* Laboratório: régua, captura, board, editor, painéis.

   Alvo de referência: iPhone 15 Pro (393×852), instalado como PWA — onde o
   safe-area de cima é ~59px e o de baixo ~34px. O espaço vertical é o recurso
   escasso, então toda a moldura (régua, captura, filtros, abas) é enxuta e o
   que sobra vai pros cards. */

/* ─────────────────────────── Régua ───────────────────────────
   Faixa fina, fixa no topo. O safe-area entra SÓ em cima — colocá-lo também
   embaixo (erro da v1) transformava a régua num bloco gigante no iPhone. */

.regua {
  flex: none;
  border-bottom: 1px solid var(--linha);
  background: var(--superficie);
  padding-top: var(--safe-t);
}
.regua[hidden] { display: none; }

.regua-toque {
  display: block; width: 100%; text-align: left;
  padding: 7px 16px 8px;
}

.regua-faixa {
  position: relative;
  display: flex; gap: 3px; height: 5px;
  border-radius: 99px;
}
.regua-faixa .fx { flex: 1; border-radius: 99px; opacity: .26; transition: opacity .3s; }
.regua-faixa .fx.vermelho { background: var(--regua-vermelho); }
.regua-faixa .fx.amarelo  { background: var(--regua-amarelo); }
.regua-faixa .fx.verde    { background: var(--regua-verde); flex: 1.15; }

/* A faixa da zona atual acende: dá pra ler a situação sem ler o texto. */
.regua.zona-vermelho_esq .fx.vermelho:first-child,
.regua.zona-vermelho_dir .fx.vermelho:last-child,
.regua.zona-amarelo_esq .fx.amarelo:nth-child(2),
.regua.zona-amarelo_dir .fx.amarelo:nth-child(4),
.regua.zona-verde .fx.verde { opacity: 1; }

.ponteiro {
  position: absolute; top: 50%; width: 3px; height: 15px;
  background: var(--texto); border-radius: 99px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--superficie);
}
.ponteiro.movendo { transition: left .55s cubic-bezier(.34, 1.32, .64, 1); }
.ponteiro.antes { background: var(--texto3); height: 11px; box-shadow: none; }

/* Uma linha só de texto: mensagem à esquerda, meta da semana à direita. */
.regua-linha {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 7px; font-size: 11px;
}
.regua-msg {
  font-weight: 800; letter-spacing: .03em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.regua.zona-vermelho_esq .regua-msg, .regua.zona-vermelho_dir .regua-msg { color: var(--regua-vermelho); }
.regua.zona-amarelo_esq .regua-msg, .regua.zona-amarelo_dir .regua-msg { color: var(--regua-amarelo); }
.regua.zona-verde .regua-msg { color: var(--regua-verde); }
.regua.cinza .regua-msg { color: var(--texto3); }
.regua-sub { color: var(--texto3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regua-meta { margin-left: auto; color: var(--texto3); white-space: nowrap; }
.regua-meta.atrasada { color: var(--regua-amarelo); font-weight: 700; }

/* ─────────────────────────── Board ─────────────────────────── */

/* Filho direto de #tela, que é flex column: `flex:1; min-height:0` em vez de
   `height:100%`. Foi um height:100% num irmão da tabbar que, na v1, empurrava o
   rodapé pra fora da tela e escondia o fim da lista de cards. */
.board { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.topo-board {
  flex: none;
  padding: 12px 16px 0;
  padding-left: calc(16px + var(--safe-l));
  padding-right: calc(16px + var(--safe-r));
}

/* Captura relâmpago: o campo está sempre visível; tipo, formato e o botão só
   aparecem quando o Pedro começa a escrever. Escolher formato é opcional, e
   quem só quer despejar a ideia não vê nada disso. */
.captura {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 10px;
  transition: border-color .15s;
}
.captura.aberta { border-color: var(--linha-forte); }
.captura input[type=text] {
  font-size: 16px; padding: 12px 13px; border: 0; background: transparent;
  border-radius: var(--raio);
}
.captura input[type=text]:focus { background: transparent; border: 0; }

.captura-extra {
  display: none;
  gap: 9px; flex-direction: column;
  padding: 4px 3px 3px;
}
.captura.aberta .captura-extra { display: flex; }

.grupo-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grupo-rot {
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto3); width: 100%;
}

/* Chip clicável de tipo/formato. Substituiu o <select> da v1: no celular um
   toque resolve, e as quatro opções ficam visíveis de uma vez. */
.op {
  font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: var(--raio);
  border: 1px solid var(--linha); color: var(--texto2); background: var(--superficie2);
  transition: .12s; line-height: 1;
}
.op:active { transform: scale(.97); }
/* Chip marcado: preenchido com a cor daquela opção e texto branco. As seis
   cores são escuras o bastante pra sustentar branco em cima. */
.op.on { color: #fff; font-weight: 700; }
.op.on.tipo-conteudo    { background: var(--cor-conteudo);     border-color: var(--cor-conteudo); }
.op.on.tipo-anuncio     { background: var(--cor-anuncio);      border-color: var(--cor-anuncio); }
.op.on.fmt-lofi         { background: var(--cor-lofi);         border-color: var(--cor-lofi); }
.op.on.fmt-slide        { background: var(--cor-slide);        border-color: var(--cor-slide); }
.op.on.fmt-vlog         { background: var(--cor-vlog);         border-color: var(--cor-vlog); }
.op.on.fmt-documentario { background: var(--cor-documentario); border-color: var(--cor-documentario); }

.bt-add { width: 100%; padding: 13px; font-size: 15px; }

/* Busca e filtros, logo abaixo do botão de adicionar. Recolhidos por padrão:
   no iPhone, oito chips sempre abertos comem meia tela de cards. */
.filtros { margin-top: 10px; }
.filtros-linha { display: flex; gap: 8px; align-items: center; }
.filtros-linha input[type=search] { padding: 8px 12px; border-radius: var(--raio); }
.bt-filtros {
  flex: none; display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--texto2);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 9px 13px;
  background: var(--superficie2); white-space: nowrap;
}
.bt-filtros.tem { color: var(--acao-txt); border-color: var(--acao); }
.bt-filtros .conta-f {
  background: var(--acao); color: var(--sobre-acao); border-radius: var(--raio-p);
  font-size: 10.5px; font-weight: 800; padding: 1px 6px; line-height: 1.5;
}
.filtros-abertos { display: none; padding: 12px 3px 2px; gap: 10px; flex-direction: column; }
.filtros.aberto .filtros-abertos { display: flex; }
.bt-limpar-f {
  font-size: 12px; color: var(--texto3); text-decoration: underline;
  align-self: flex-start;
}

/* Abas das colunas */
.colunas-abas {
  display: flex; gap: 6px; flex: none;
  padding: 12px 16px 10px;
  padding-left: calc(16px + var(--safe-l));
  padding-right: calc(16px + var(--safe-r));
}
.col-aba {
  flex: 1; padding: 8px 4px; border-radius: var(--raio);
  font-size: 12.5px; font-weight: 600; color: var(--texto3);
  background: var(--superficie); border: 1px solid var(--linha);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 38px;
}
.col-aba .cont {
  font-size: 10.5px; font-weight: 700; color: var(--texto3);
  background: var(--fundo); border-radius: var(--raio-p); padding: 1px 6px;
}
.col-aba.ativa { color: var(--acao-txt); border-color: var(--acao); background: var(--acao-fraca); }
.col-aba.ativa .cont { color: var(--sobre-acao); background: var(--acao); }

/* Colunas: no celular, uma por tela com swipe; no Mac, três lado a lado. */
.colunas {
  flex: 1; min-height: 0;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.colunas::-webkit-scrollbar { display: none; }

.coluna {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex; flex-direction: column; min-height: 0;
  padding: 0 calc(16px + var(--safe-l)) 0 calc(16px + var(--safe-r));
}
.col-titulo { display: none; }
.col-lista {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 9px;
  padding-bottom: 20px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Mesmo motivo do painel: coluna que rola não pode espremer os filhos. Com
   muitos cards, eles achatariam em vez de a lista rolar. */
.col-lista > * { flex: none; }
.col-vazia { padding: 20px 2px; line-height: 1.6; }

.cartao {
  position: relative;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 13px 14px;
  transition: border-color .12s;
  animation: entra .22s ease-out;
  text-align: left; width: 100%; display: block;
}
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cartao:active { border-color: var(--linha-forte); }
.cartao h3 { font-size: 14.5px; font-weight: 600; line-height: 1.4; word-break: break-word; }
.cartao.provisorio { opacity: .5; }
.cartao.selecionado { border-color: var(--acao); box-shadow: 0 0 0 2px var(--acao-fraca); }

.cartao-sel {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: var(--raio);
  display: grid; place-items: center;
}
.cartao-sel::after {
  content: ""; width: 18px; height: 18px; border-radius: var(--raio-p);
  border: 1.5px solid var(--linha-forte); background: var(--fundo);
  transition: .12s;
}
.cartao.selecionado .cartao-sel::after {
  background: var(--acao); border-color: var(--acao);
}
.cartao h3 { padding-right: 30px; }

/* Etiquetas na primeira linha do card. O padding-right abre espaço pra caixa de
   seleção, que fica absoluta no canto. */
.cartao-topo {
  display: flex; gap: 5px; flex-wrap: wrap;
  margin-bottom: 8px; padding-right: 30px;
}
.cartao-pe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 9px; }
.cartao-quando { font-size: 11px; color: var(--texto3); }

/* Etiqueta do card: espelha o que foi marcado no topo do card (tipo e formato),
   uma cor por valor. Tinta leve e peso médio de propósito — ela informa de
   relance, mas quem tem que saltar no board é o título da ideia. */
.tag {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--raio-p);
  letter-spacing: .01em; white-space: nowrap;
}
.tag-conteudo     { color: var(--cor-conteudo);     background: rgba(21,128,61,.10); }
.tag-anuncio      { color: var(--cor-anuncio);      background: rgba(190,18,60,.10); }
.tag-lofi         { color: var(--cor-lofi);         background: rgba(180,83,9,.10); }
.tag-slide        { color: var(--cor-slide);        background: rgba(67,56,202,.10); }
.tag-vlog         { color: var(--cor-vlog);         background: rgba(162,28,175,.10); }
.tag-documentario { color: var(--cor-documentario); background: rgba(14,116,144,.10); }

/* Ideia parada há muito tempo. Âmbar da régua, sem fundo e sem caixa: tem que
   ser percebida ao correr o olho pela coluna, não competir com o título. */
.parada { font-size: 10.5px; font-weight: 600; color: var(--regua-amarelo); }
.parada::before { content: "◷ "; font-weight: 400; }

.prog { display: flex; gap: 10px; margin-top: 9px; font-size: 10.5px; color: var(--texto3); }
.prog span.ok { color: var(--acao-txt); }
.prog span.ok::before { content: "✓ "; }
.prog .anexos { margin-left: auto; }

.ver-tudo {
  font-size: 13px; color: var(--texto2); padding: 11px;
  border: 1px dashed var(--linha); border-radius: var(--raio); width: 100%;
}

/* Barra de seleção em lote: flutua acima da tabbar, só quando há seleção. */
.acoes-lote {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--tabbar-h) + 10px);
  display: flex; align-items: center; gap: 8px;
  background: var(--superficie2); border: 1px solid var(--linha-forte);
  border-radius: var(--raio-g); padding: 7px 8px 7px 15px;
  box-shadow: var(--sombra); z-index: 40;
}
.acoes-lote[hidden] { display: none; }
.lote-cont {
  font-size: 12.5px; color: var(--texto2); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acoes-lote .bt { padding: 8px 12px; font-size: 12.5px; flex: none; }
/* Excluir em lote fica com a cor de perigo, mas sem virar botão preenchido:
   ele mora ao lado do Copiar e não pode parecer a ação principal. */
.acoes-lote .bt.perigo { color: var(--regua-vermelho); border-color: rgba(211,47,53,.35); }

/* ─────────────────────────── Desktop ─────────────────────────── */

@media (min-width: 861px) {
  .topo-board { padding: 16px 20px 0; max-width: 1400px; margin: 0 auto; width: 100%; }
  .captura { display: flex; flex-direction: column; }
  .colunas-abas { display: none; }
  .colunas {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    overflow: hidden; padding: 14px 20px 16px; max-width: 1400px; margin: 0 auto; width: 100%;
  }
  .coluna { padding: 0; }
  .col-titulo {
    display: flex; align-items: center; gap: 7px; flex: none;
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--texto3); padding: 0 2px 10px;
  }
  .col-titulo .cont {
    background: var(--superficie2); color: var(--texto2);
    border-radius: var(--raio-p); padding: 1px 8px; font-size: 11px; letter-spacing: 0;
  }
  .acoes-lote { left: auto; right: 24px; bottom: 24px; max-width: 460px; }
  .cartao { cursor: pointer; }
  .cartao:hover { border-color: var(--linha-forte); }
}

/* ─────────────────────────── Painel deslizante ─────────────────────────── */

#painel, .confirma { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
#painel:empty { display: none; }
#painel.aberto, .confirma.aberto { pointer-events: auto; }
.confirma { z-index: 95; }

.painel-fundo {
  position: absolute; inset: 0; background: var(--veu);
  opacity: 0; transition: opacity .18s;
}
.visivel .painel-fundo { opacity: 1; }

.painel-folha {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(580px, 100%);
  background: var(--fundo); border-left: 1px solid var(--linha);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease-out;
  box-shadow: var(--sombra);
}
.visivel .painel-folha { transform: none; }

.painel-topo {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 12px 14px;
  padding-top: calc(12px + var(--safe-t));
  border-bottom: 1px solid var(--linha);
}
.painel-topo h2 { font-size: 16px; flex: 1; min-width: 0; }
.painel-topo .fechar {
  width: 38px; height: 38px; border-radius: var(--raio); flex: none;
  color: var(--texto2); font-size: 15px; background: var(--superficie2);
}
.painel-corpo {
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px calc(28px + var(--safe-b));
  display: flex; flex-direction: column; gap: 10px;
}
/* Item de flex encolhe por padrão quando o conteúdo passa da altura do
   container. Num painel que ROLA isso é sempre errado: espremia todo campo de
   texto e cortava o que estava escrito. O min-height de 66px dos campos
   mascarava o problema até ele ser removido. */
.painel-corpo > *, .ed-secao > *, .painel-corpo textarea { flex: none; }

@media (max-width: 860px) {
  .painel-folha {
    left: 0; width: 100%; top: 0; border-left: 0;
    transform: translateY(100%);
  }
  .visivel .painel-folha { transform: none; }
}

/* Confirmação: caixa central, camada própria (não destrói o editor por baixo) */
.confirma .painel-folha {
  position: absolute; inset: auto;
  left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.97);
  width: min(400px, calc(100% - 28px)); bottom: auto; max-height: 86vh;
  border: 1px solid var(--linha); border-radius: var(--raio-g);
  opacity: 0; transition: opacity .16s, transform .16s;
}
.confirma.visivel .painel-folha { transform: translate(-50%, -50%); opacity: 1; }
.confirma .painel-topo { padding-top: 14px; }
.confirma-txt { font-size: 14.5px; color: var(--texto2); line-height: 1.6; }
.confirma-txt b { color: var(--texto); }
.confirma-acoes { display: flex; gap: 9px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.confirma-acoes .bt { flex: 1; min-width: 120px; }

.preview-regua { margin: 14px 0 16px; }
.preview-regua .regua-faixa { height: 7px; }
.preview-legenda { font-size: 11.5px; color: var(--texto3); margin-top: 12px; }
.p-antes, .p-depois { display: inline-block; width: 3px; height: 11px; border-radius: 99px; vertical-align: -1px; }
.p-antes { background: var(--texto3); }
.p-depois { background: var(--texto); }

/* ─────────────────────────── Editor do card ─────────────────────────── */

.ed-titulo-topo { flex: 1; min-width: 0; font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-status { font-size: 11px; color: var(--texto3); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--texto3); display: inline-block; }
.ponto.producao { background: var(--regua-amarelo); }
.ponto.publicado { background: var(--acao); }

/* Observações, Referências e Reação ficam no próprio card, no fim da rolagem:
   sustentam o roteiro, não são um assunto à parte. */
.ed-secao {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.ed-secao .ed-add { margin-top: 0; }
.ed-secao .ed-rot { margin-top: 0; display: flex; align-items: center; gap: 7px; }
.ed-secao .n {
  font-size: 10px; font-weight: 800; letter-spacing: 0;
  background: var(--acao); color: var(--sobre-acao);
  border-radius: var(--raio-p); padding: 1px 7px;
}

/* Não usa .ed-campo de propósito: o título é rente à margem, sem caixa. Mas
   cresce igual, porque o reajuste em JS pega todos os textarea do painel. */
.ed-titulo {
  font-size: 19px; font-weight: 700; line-height: 1.35;
  padding: 8px 0; border: 0; border-bottom: 1px solid var(--linha);
  background: transparent; border-radius: 0;
  min-height: 0; height: auto; overflow: hidden; resize: none;
}
.ed-titulo:focus { background: transparent; border-color: var(--acao); }

.ed-meta { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 2px; }

.ed-prog { display: flex; gap: 12px; font-size: 11px; color: var(--texto3); margin: 2px 0 4px; }
.ed-prog span.ok { color: var(--acao-txt); }
.ed-prog span.ok::before { content: "✓ "; }

.ed-rot {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  color: var(--texto3); text-transform: uppercase; display: block; margin-top: 4px;
}
/* A altura é calculada em JS a partir do conteúdo: uma linha escrita, uma
   linha visível. Sem mínimo e sem alça — a alça brigaria com o cálculo e foi
   o que fazia "redimensionar" parecer quebrado. */
.ed-campo {
  min-height: 0; height: auto; overflow: hidden; resize: none;
  padding: 10px 13px;
}

.desen { display: grid; gap: 4px; margin-top: 6px; }
.desen-topo { display: flex; align-items: center; justify-content: space-between; }
.desen-bts { display: flex; gap: 2px; }
.desen-bt {
  width: 34px; height: 34px; border-radius: var(--raio); color: var(--texto3);
  font-size: 13px; background: var(--superficie2);
}
.desen-bt:active:not(:disabled) { background: var(--linha); color: var(--texto); }
.desen-bt:disabled { opacity: .28; cursor: default; }

.ed-add {
  font-size: 13.5px; color: var(--texto2); padding: 12px;
  border: 1px dashed var(--linha); border-radius: var(--raio); margin-top: 8px;
  width: 100%;
}
.ed-add:active { color: var(--acao-txt); border-color: var(--acao); }

.ed-acoes { margin-top: 18px; }
.bt-publiquei { width: 100%; padding: 15px; font-size: 15px; }
.ed-publicado { display: grid; gap: 8px; justify-items: start; }

.ed-secundarias { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.ed-secundarias .bt { padding: 11px 10px; font-size: 13px; }

/* Bloco de exportação: as chaves ficam à vista e definem direto como a cópia
   sai. Não há botão de opções nem download — a única saída é o clipboard. */
.ed-export {
  display: grid; gap: 11px; padding: 14px; margin-top: 18px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.ed-export .ed-rot { margin-top: 0; }
.ed-export .bt { margin-top: 3px; }

/* Listas de apoio: Observações, Referências e Reação. Mesma caixa, porque são
   a mesma coisa pro olho: material que fica embaixo do roteiro. */
.link-item, .obs-item {
  display: grid; gap: 7px; padding: 11px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
/* Os itens ficam dentro de um contêiner só, então o respiro entre eles não vem
   do gap da seção: tem que ser aqui. */
.link-item + .link-item, .obs-item + .obs-item { margin-top: 8px; }
/* O campo da observação não tem caixa própria: a caixa já é o item. Sem isso
   ficaria uma borda dentro da outra.

   A fonte fica nos 16px herdados de propósito: abaixo disso o Safari do iOS
   amplia a página ao focar, e é um campo de texto longo — seria o pior lugar
   pra isso acontecer. A densidade vem do padding. */
.obs-item .obs-campo {
  background: transparent; border: 0; padding: 0 2px 2px; line-height: 1.55;
}
.obs-item .obs-campo:focus { background: transparent; }
/* O ✕ fica sozinho na linha de cima (não há "abrir" como nos links), então ela
   é encolhida: sem isso a observação começa um dedo abaixo da borda. */
.obs-item .link-topo { margin: -3px 0 -8px; }
.obs-item .desen-bt { width: 30px; height: 30px; }
.link-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.link-item input { padding: 9px 12px; }
.link-item input.url { color: var(--acao-txt); }
/* A nota do link herda os 16px: era `.nota`, de 12px, e o Safari do iOS
   ampliava a página toda ao focar nela. O que separa a nota da URL é a cor,
   não o tamanho. */
.link-item input.link-nota { color: var(--texto3); }
.link-abrir {
  font-size: 12px; color: var(--texto2); text-decoration: none;
  border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 5px 11px; white-space: nowrap;
}

.sw { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.sw input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 42px; height: 25px; border-radius: 99px; flex: none;
  background: var(--linha); position: relative; transition: .15s; margin: 0; border: 0; padding: 0;
}
.sw input[type=checkbox]:checked { background: var(--acao); }
.sw input[type=checkbox]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: .15s;
}
.sw input[type=checkbox]:checked::after { left: 19px; }

.nota { font-size: 12px; color: var(--texto3); line-height: 1.6; }

/* ─────────────────────────── Detalhe da régua ─────────────────────────── */

.saldo-bruto { text-align: center; padding: 8px 0 16px; }
.saldo-num { font-size: 42px; font-weight: 800; letter-spacing: -.03em; display: block; line-height: 1; }
.saldo-rot { font-size: 12px; color: var(--texto3); }
.saldo-conta { font-size: 12.5px; color: var(--texto3); margin-top: 10px; line-height: 1.6; }

.secao {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto3); margin-top: 10px;
}
.janelas { display: grid; gap: 7px; }
.jan {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline;
  padding: 11px 13px; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); font-size: 13px;
}
.jan-rot { color: var(--texto2); }
.jan-prop { color: var(--acao-txt); font-weight: 700; font-size: 12.5px; text-align: right; }
.jan-nums { grid-column: 1 / -1; color: var(--texto3); font-size: 12px; }

.tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela th, .tabela td { text-align: left; padding: 8px 5px; border-bottom: 1px solid var(--linha); }
.tabela th { color: var(--texto3); font-weight: 600; font-size: 11px; }
.tabela .peso { color: var(--texto3); text-align: right; }
.rolagem-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─────────────────────────── Onboarding ─────────────────────────── */

.ob-intro { font-size: 14px; color: var(--texto2); line-height: 1.6; margin-bottom: 6px; }
.ob-linha {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 12px 13px; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio);
}
.ob-rot { font-size: 13px; color: var(--texto2); }
.ob-linha label { font-size: 10.5px; color: var(--texto3); display: grid; gap: 3px; justify-items: center; }
.ob-linha input { width: 66px; text-align: center; padding: 8px 4px; }
.ob-acoes { display: grid; gap: 8px; margin-top: 14px; }

.erro-aba { padding: 30px 16px; text-align: center; }

/* ─────────────────────────── Ajustes ─────────────────────────── */

.aj-bloco {
  display: grid; gap: 8px; padding: 14px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); margin-top: 4px;
}
.aj-bloco .ed-rot { margin-top: 0; }
.aj-linha { display: flex; align-items: center; gap: 12px; }
.aj-linha input[type=number] { width: 82px; text-align: center; font-size: 16px; }
.aj-linha .nota { flex: 1; }
.painel-ajustes .grupo-chips { padding: 4px 2px; }


/* ─── Formatos nos ajustes ─── */

.aj-formatos { display: grid; gap: 6px; }
.aj-formato {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 12px; background: var(--superficie2);
  border: 1px solid var(--linha); border-radius: var(--raio);
}
/* Editável: renomear troca o rótulo, o id continua o mesmo. Sem font-size
   próprio de propósito — herda os 16px e não dispara o zoom do iOS. */
.aj-formato-nome {
  flex: 1; min-width: 0; padding: 6px 8px;
  border: 1px solid transparent; background: transparent;
  border-radius: var(--raio-p);
}
.aj-formato-nome:focus { border-color: var(--acao); background: var(--superficie); }
.ponto-cor { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.aj-novo { display: flex; gap: 8px; margin-top: 4px; }
.aj-novo input { flex: 1; min-width: 0; padding: 9px 12px; }
.aj-novo .bt { flex: none; padding: 9px 14px; font-size: 13px; }

/* Rótulo com a chave à direita (texto na tela: tem ou não tem neste vídeo). */
.ed-rot-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ed-rot-linha .ed-rot { margin-top: 4px; }
.sw-p input[type=checkbox] { width: 36px; height: 21px; }
.sw-p input[type=checkbox]::after { width: 17px; height: 17px; }
.sw-p input[type=checkbox]:checked::after { left: 17px; }


.ed-ia { margin: 12px 0 24px; }
.ed-ia-sugestao { margin-top: 12px; padding: 16px; border: 1px solid #dce4f0; border-radius: 12px; background: #f5f8ff; overflow-wrap: anywhere; }
.ed-ia-sugestao h3 { margin: 12px 0 6px; font-size: 12px; letter-spacing: .06em; color: #51637c; }
.ed-ia-sugestao h3:first-child { margin-top: 0; }
.ed-ia-sugestao p { margin: 0 0 16px; font-size: 17px; line-height: 1.45; white-space: pre-wrap; }
.ed-ia-sugestao small { color: #65758b; line-height: 1.4; }