/* ─────────────────────────────────────────────────────────────────────────────
   as tabelas · a pele do gerenciador

   Carrega DEPOIS de telas.css + madrugada.css + lista.css + fontes.css e só
   acrescenta o que esta tela tem de próprio: os cartões de tabela cadastrada,
   os três grupos da comparação, a linha de unidade e a caixa de aplicar.
   Tudo o que já existia (`.placa`, `.tabela-emp`, `.botao`, `.recibo`,
   `.abas-situacao`, `.linha-agenda`) é reusado como está — a identidade é a do
   painel do Alcateia, não a régua grande do /hoje.

   A gramática da cor aqui, e ela é a coisa mais importante do arquivo:
     verde   = seguro (o número casa E a área confere) — é o que o botão aplica
     âmbar   = suspeito (o número casa, a área não) — nunca entra no botão
     roxo    = sem par (só de um lado) — ninguém casa por adivinhação
     cinza   = já está igual, ou é produto à parte (vaga)
     vermelho= vendida (a situação, não um erro)
   ───────────────────────────────────────────────────────────────────────── */

/* ── os cartões de tabela cadastrada ──────────────────────────────────────── */

.cartoes-tabela {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.cartao-tabela {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 16px 18px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cartao-tabela.mudou     { border-left-color: var(--azul); }
.cartao-tabela.igual     { border-left-color: var(--verde); }
.cartao-tabela.nunca     { border-left-color: var(--borda-forte); }
.cartao-tabela.recusada  { border-left-color: var(--vermelho); }
.cartao-tabela.aberta    { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fundo); }

.cartao-tabela .topo { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.cartao-tabela h3 {
  margin: 0;
  font-size: 15.5px; font-weight: 650; letter-spacing: -.01em;
  color: var(--tinta);
}
.cartao-tabela h3 .codigo {
  margin-left: 6px;
  font-size: 12px; font-weight: 600; color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.cartao-tabela .topo .selo { margin-left: auto; }

.arquivo {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 13px; color: var(--tinta-media);
}
.arquivo .nome { font-weight: 600; color: var(--tinta); }
.arquivo code { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--tinta-media); }
.arquivo .aba { color: var(--tinta-fraca); }
.arquivo a { text-decoration: none; }
.arquivo a:hover { text-decoration: underline; }

.linha-info { display: flex; flex-wrap: wrap; gap: 18px; }
.linha-info .info { min-width: 96px; }
.linha-info .rot {
  display: block;
  font-size: 11px; letter-spacing: .04em; color: var(--tinta-fraca);
}
.linha-info .val {
  display: block; margin-top: 1px;
  font-size: 13.5px; font-weight: 600; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.linha-info .val.fraco { font-weight: 500; color: var(--tinta-media); }

.impressao {
  font-family: var(--mono);
  font-size: 11.5px; color: var(--tinta-fraca);
}
.ultimo-clique { margin: 0; font-size: 12.5px; color: var(--tinta-fraca); }

.cartao-tabela .botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.cartao-tabela .botao { min-width: 0; }

.recusa-caixa {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid var(--vermelho);
  border-radius: var(--raio);
  padding: 11px 13px;
  font-size: 13px; color: #991b1b;
}
.recusa-caixa b { display: block; margin-bottom: 3px; color: #7f1d1d; }

.selo.mudou-selo  { background: var(--azul-claro);     color: #1d4ed8; }
.selo.igual-selo  { background: var(--verde-claro);    color: #15803d; }
.selo.nunca-selo  { background: var(--borda-suave);    color: var(--tinta-fraca); }
.selo.recusa-selo { background: var(--vermelho-claro); color: #b91c1c; }

/* ── cadastrar tabela nova ────────────────────────────────────────────────── */

.cadastro { margin: 0 0 8px; }
.botao.abre-cadastro { font-weight: 600; }

.forma-cadastro {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 18px 20px 16px;
  max-width: 640px;
}
.forma-cadastro h3 {
  margin: 0 0 14px;
  font-size: 15.5px; font-weight: 650; color: var(--tinta);
}
.forma-cadastro .campo { display: block; margin-bottom: 14px; }
.forma-cadastro .campo .rot {
  display: block; margin-bottom: 5px;
  font-size: 13px; font-weight: 600; color: var(--tinta);
}
.forma-cadastro input,
.forma-cadastro select {
  width: 100%;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  padding: 9px 11px;
  font-family: var(--sans); font-size: 13.5px; color: var(--tinta);
  background: var(--branco);
}
.forma-cadastro input:focus,
.forma-cadastro select:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fundo);
}
.forma-cadastro .ajuda {
  display: block; margin-top: 5px;
  font-size: 12px; color: var(--tinta-fraca); line-height: 1.45;
}
.forma-cadastro .ajuda.bom { color: #15803d; }
.forma-cadastro .ajuda.ruim { color: #b91c1c; }
.par-campos { display: flex; flex-wrap: wrap; gap: 14px; }
.par-campos .campo { flex: 1 1 220px; }
.forma-cadastro .opcional { font-weight: 500; color: var(--tinta-fraca); }
.botoes-cadastro { display: flex; flex-wrap: wrap; gap: 10px; }
.nota-cadastro { margin: 12px 0 0; font-size: 12.5px; color: var(--tinta-fraca); }

/* ── a comparação ─────────────────────────────────────────────────────────── */

#comparacao { margin-top: 30px; scroll-margin-top: 16px; }

.cabeca-comparacao {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--borda);
}
.cabeca-comparacao .quem h2 {
  margin: 0;
  font-size: 20px; font-weight: 650; letter-spacing: -.01em; color: var(--tinta);
}
.cabeca-comparacao .quem p {
  margin: 3px 0 0;
  font-size: 13px; color: var(--tinta-media);
}
.cabeca-comparacao .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.resumo-comparacao {
  margin: 14px 0 18px;
  font-size: 14px; color: var(--tinta-media); line-height: 1.6;
  max-width: 90ch;
}

/* os três grupos — o número grande é o TAMANHO do grupo, nunca uma soma */
.placar-grupos { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.placa.seguras   b { color: var(--verde); }  .placa.seguras::after   { background: var(--verde-claro); }
.placa.suspeitas b { color: var(--ambar); }  .placa.suspeitas::after { background: var(--ambar-claro); }
.placa.sem-par   b { color: var(--roxo); }   .placa.sem-par::after   { background: var(--roxo-claro); }
.placa.seguras.ativa   { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.placa.suspeitas.ativa { border-color: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-fundo); }
.placa.sem-par.ativa   { border-color: var(--roxo);  box-shadow: 0 0 0 3px var(--roxo-claro); }
/* `.placa span { display:block }` vem do fontes.css e pegaria o "+" também — aqui
   ele precisa ficar na mesma linha dos dois números. */
.placa b .mais {
  display: inline; font-size: 20px; font-weight: 600;
  color: var(--tinta-fraca); padding: 0 4px;
}
.placa .destaque {
  display: block; margin-top: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--tinta);
}
.placa.seguras .destaque { color: #15803d; }
.placa.suspeitas .destaque { color: #b45309; }
.placa.sem-par .destaque { color: #6d28d9; }

/* A ronda viu a planilha mudar e JÁ releu: isto é novidade para olhar, não
   aviso de perigo — azul, a cor do selo "a planilha mudou" dos cartões. */
.alerta-novidade {
  display: block; margin-top: 10px;
  border-left: 3px solid var(--azul);
  background: var(--azul-fundo);
  border-radius: var(--raio);
  padding: 10px 12px;
  font-size: 13px; color: #1d4ed8; line-height: 1.55;
}
.alerta-novidade b { color: #1e40af; font-weight: 650; }

.nota-vagas {
  margin: -6px 0 18px;
  font-size: 12.5px; color: var(--tinta-fraca);
}

/* o que o leitor anotou sobre a planilha desta leitura — some quando não há nada */
.avisos-leitura {
  margin: 0 0 18px; padding: 11px 14px;
  background: var(--ambar-fundo);
  border: 1px solid #fde68a;
  border-left: 3px solid var(--ambar);
  border-radius: var(--raio);
}
.avisos-leitura .rot {
  display: block; margin-bottom: 4px;
  font-size: 11.5px; font-weight: 650; color: #92400e;
}
.avisos-leitura ul { margin: 0; padding-left: 18px; }
.avisos-leitura li { font-size: 12.5px; color: #b45309; margin-bottom: 3px; }

.painel-grupo { margin: 0 0 12px; }
.grupo-explica {
  margin: 0 0 12px;
  font-size: 13.5px; color: var(--tinta-media); line-height: 1.6;
  max-width: 92ch;
  border-left: 3px solid var(--borda-forte);
  padding-left: 12px;
}
.grupo-explica.seguras   { border-left-color: var(--verde); }
.grupo-explica.suspeitas { border-left-color: var(--ambar); }
.grupo-explica.sem-par   { border-left-color: var(--roxo); }
.grupo-explica b { color: var(--tinta); font-weight: 650; }

.abas-situacao button b {
  margin-left: 6px;
  font-variant-numeric: tabular-nums; color: var(--tinta-fraca);
}
.abas-situacao button.ativa b { color: inherit; }

/* ── a linha de unidade ───────────────────────────────────────────────────── */

.tabela-unidades tbody tr.muda-situacao td:first-child { box-shadow: inset 3px 0 0 var(--verde); }
.tabela-unidades tbody tr.muda-preco td:first-child    { box-shadow: inset 3px 0 0 var(--azul); }
.tabela-unidades tbody tr.suspeita td:first-child      { box-shadow: inset 3px 0 0 var(--ambar); }
/* corroborada e mudando de situação, mas em negociação/contrato: a planilha não
   desfaz esses estados, e o servidor recusa. Rosa, que aqui é "segurado". */
.tabela-unidades tbody tr.travada-linha td:first-child { box-shadow: inset 3px 0 0 var(--rosa); }
.tabela-unidades tbody tr.sem-par td:first-child       { box-shadow: inset 3px 0 0 var(--roxo); }
.tabela-unidades tbody tr.parada td:first-child        { box-shadow: inset 3px 0 0 transparent; }

.col-marca { width: 42px; }
.col-marca input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: var(--verde); cursor: pointer;
}
.tabela-unidades td.unidade { white-space: nowrap; }
.tabela-unidades td.unidade b {
  font-size: 14.5px; font-weight: 650; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.tabela-unidades td.unidade small {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--tinta-fraca);
}

/* `align-items: flex-start` para a pílula da situação abraçar a palavra em vez
   de esticar na largura da coluna — no celular a coluna é a tela inteira. */
.lado-valor { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.lado-valor .dinheiro { font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 600; }
.lado-valor .area { font-size: 12px; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
.lado-valor .area.briga { color: #b45309; font-weight: 600; }

.sit {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11.5px; font-weight: 600;
  background: var(--borda-suave); color: var(--tinta-fraca);
}
.sit.disponivel { background: var(--verde-claro);    color: #15803d; }
.sit.vendida    { background: var(--vermelho-claro); color: #b91c1c; }
.sit.reservada  { background: var(--ambar-claro);    color: #b45309; }
.sit.sem        { background: var(--borda-suave);    color: var(--tinta-fraca); font-style: italic; }

.aconteceria { font-size: 13px; color: var(--tinta-media); line-height: 1.5; }
.aconteceria .vira { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aconteceria .seta { color: var(--tinta-fraca); }
.aconteceria.nada { color: var(--tinta-fraca); }
.aconteceria .motivo { color: var(--tinta-fraca); }
.aconteceria .porque {
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--tinta-fraca); line-height: 1.5;
}
.aconteceria .porque.alerta { color: #b45309; }
.candidatos-linha { display: block; margin-top: 4px; font-size: 12px; color: var(--tinta-fraca); }
.candidatos-linha b { color: var(--tinta-media); font-weight: 600; }
/* o mesmo candidato oferecido a duas linhas: só um (ou nenhum) pode ser ele */
.candidatos-linha .disputa {
  display: inline-block; margin-left: 5px; padding: 1px 7px;
  border-radius: 999px;
  background: var(--ambar-claro); color: #b45309;
  font-size: 10.5px; font-weight: 650; white-space: nowrap;
}
/* o aviso de que o palpite pelo radical erra — fora do <details>, visível */
.aviso-palpite {
  display: block; margin-top: 10px;
  border-left: 3px solid var(--ambar);
  background: var(--ambar-fundo);
  border-radius: var(--raio);
  padding: 9px 12px;
  font-size: 12.5px; color: #b45309; line-height: 1.55;
}
.aviso-palpite b { color: #92400e; font-weight: 650; }

/* ── a caixa de aplicar, com a confirmação em duas etapas ─────────────────── */

.caixa-aplicar {
  margin: 18px 0 0;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 18px 20px;
}
.caixa-aplicar.travada { border-left-color: var(--borda-forte); }
.caixa-aplicar .chamada {
  margin: 0 0 4px;
  font-size: 15px; font-weight: 650; color: var(--tinta);
}
.caixa-aplicar .explica {
  margin: 0 0 14px;
  font-size: 13px; color: var(--tinta-media); line-height: 1.6; max-width: 88ch;
}
.botao.aplicar {
  background: var(--verde); border-color: var(--verde);
  min-width: 260px;
}
.botao.aplicar:hover:not(:disabled) { background: #15803d; border-color: #15803d; }
.botao.aplicar:disabled { background: var(--borda-suave); border-color: var(--borda); color: var(--tinta-fraca); }

.confirmacao {
  border: 1px solid var(--ambar);
  border-left: 3px solid var(--ambar);
  background: var(--ambar-fundo);
  border-radius: var(--raio-g);
  padding: 16px 18px;
}
.confirmacao .pergunta {
  margin: 0 0 8px;
  font-size: 15px; font-weight: 650; color: #92400e;
}
.confirmacao ul { margin: 0 0 10px; padding-left: 18px; }
.confirmacao li { font-size: 13.5px; color: #92400e; margin-bottom: 3px; }
.confirmacao li b { font-weight: 650; }
.confirmacao .letra-miuda {
  margin: 0 0 14px;
  font-size: 12.5px; color: #b45309; line-height: 1.6; max-width: 88ch;
}
.confirmacao .quais {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 12px; color: #92400e; line-height: 1.6;
  word-break: break-word;
}
.confirmacao .botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.botao.gravar { background: var(--vermelho); border-color: var(--vermelho); min-width: 240px; }
.botao.gravar:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }

/* ── o recibo ─────────────────────────────────────────────────────────────── */

.recibo.gravado { border-left-color: var(--verde); background: #f0fdf4; border-color: #bbf7d0; }
.recibo.gravado h4 { color: #15803d; }
.recibo .lista-recibo { list-style: none; margin: 8px 0 0; padding: 0; }
.recibo .lista-recibo li {
  font-size: 13px; color: var(--tinta-media);
  padding: 4px 0; border-bottom: 1px solid var(--borda-suave);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.recibo .lista-recibo li:last-child { border-bottom: 0; }
.recibo .lista-recibo b {
  font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 650;
  min-width: 62px;
}
.recibo .recusadas {
  margin: 12px 0 0; padding: 10px 12px;
  background: var(--ambar-fundo); border: 1px solid #fde68a; border-radius: var(--raio);
}
.recibo .recusadas .rot {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 650; color: #92400e;
}
.recibo .recusadas li { font-size: 12.5px; color: #b45309; }
.recibo .depois { margin: 12px 0 0; font-size: 12.5px; color: var(--tinta-media); }

/* a frase da ronda, dentro da linha da agenda */
.frase-ronda {
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--tinta-fraca); line-height: 1.5;
}

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

@media (max-width: 900px) {
  .cartoes-tabela { grid-template-columns: 1fr; }
  .cabeca-comparacao .acoes { margin-left: 0; width: 100%; }
  .cabeca-comparacao .acoes .botao { flex: 1 1 auto; }
}

@media (max-width: 780px) {
  /* O `lista.css` esconde a 3ª e a 4ª coluna no celular (lá elas são "onde" e
     "estoque", que cabem em outro lugar). Aqui a 4ª é "o que a base tem" — sem
     ela a linha vira meia comparação, que é pior do que nenhuma. */
  .tabela-emp.tabela-unidades tbody td:nth-child(3),
  .tabela-emp.tabela-unidades tbody td:nth-child(4) { display: block; }

  .tabela-unidades tbody tr.muda-situacao { border-left: 3px solid var(--verde); }
  .tabela-unidades tbody tr.muda-preco    { border-left: 3px solid var(--azul); }
  .tabela-unidades tbody tr.suspeita      { border-left: 3px solid var(--ambar); }
  .tabela-unidades tbody tr.travada-linha { border-left: 3px solid var(--rosa); }
  .tabela-unidades tbody tr.sem-par       { border-left: 3px solid var(--roxo); }
  .tabela-unidades tbody tr.parada        { border-left: 3px solid var(--borda); }
  .tabela-unidades tbody td:first-child   { box-shadow: none; }
  .col-marca { width: auto; }
  .caixa-aplicar .botao, .confirmacao .botao { width: 100%; min-width: 0; }
  .forma-cadastro { padding: 16px; }
  .botoes-cadastro .botao { flex: 1 1 auto; }
}

/* ── o "por que não casei" de cada linha sem par ───────────────────────────
   A frase inteira da âncora é a prova de que ninguém casou nada por
   adivinhação — mas repetida em 24 linhas vira ruído. Fica dobrada, e abre
   com um clique quando alguém quiser conferir palavra por palavra. */
.tabela-unidades .avisos-linha { margin-top: 6px; }
.tabela-unidades .avisos-linha summary {
  font-size: 12px; color: var(--azul); cursor: pointer; list-style: none;
}
.tabela-unidades .avisos-linha p {
  margin: 6px 0 0;
  font-size: 12px; color: var(--tinta-fraca); line-height: 1.55;
}

/* ── «O site»: as plantas derivadas das unidades (fatia 5) ─────────────────
   O hotsite lê só as plantas — esta seção é a ponte do espelho para o site.
   Mesma gramática do resto da tela: a prévia mostra, o botão pergunta duas
   vezes, e as órfãs ficam nomeadas em âmbar (é "esperando você", não erro). */

.secao-site {
  margin: 26px 0 8px;
  padding: 18px 20px 16px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--roxo);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}
.secao-site:empty { display: none; }

.titulo-site {
  margin: 0 0 6px;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--tinta);
}
.site-explica {
  margin: 0 0 12px;
  font-size: 13px; color: var(--tinta-media); line-height: 1.6; max-width: 76ch;
}

.site-abrir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-nota { font-size: 12px; color: var(--tinta-fraca); }

.site-resumo {
  margin: 0 0 10px;
  font-size: 13.5px; color: var(--tinta); line-height: 1.6; max-width: 80ch;
}
.site-resumo .rederivar {
  margin-left: 8px;
  padding: 4px 10px; font-size: 12px; min-height: 0;
  white-space: nowrap; vertical-align: baseline;
}

/* o aviso da ordem certa: a derivação lê a base, e a base pode estar atrás */
.site-pendencia {
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--ambar-fundo); border: 1px solid var(--ambar-claro);
  border-left: 3px solid var(--ambar); border-radius: var(--raio);
  font-size: 13px; color: #92400e; line-height: 1.55; max-width: 80ch;
}

.site-erro {
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--vermelho-claro, #fee2e2); border: 1px solid #fecaca;
  border-left: 3px solid var(--vermelho); border-radius: var(--raio);
  font-size: 13px; color: #991b1b; line-height: 1.55; max-width: 80ch;
}

.site-rot {
  margin: 14px 0 6px;
  font-size: 12.5px; font-weight: 650; color: var(--tinta);
}
.site-rot.orfa { color: #92400e; }

.site-plantas { margin: 0; padding: 0; list-style: none; }
.site-plantas li {
  padding: 7px 10px;
  border-bottom: 1px dashed var(--borda);
  font-size: 13px; color: var(--tinta); line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.site-plantas li:last-child { border-bottom: 0; }
.site-plantas .nome-planta { font-weight: 650; }
.site-plantas .seta, .site-recibo .seta { color: var(--tinta-fraca); padding: 0 2px; }

.site-orfas { margin: 0; padding: 0 0 0 2px; list-style: none; }
.site-orfas li {
  padding: 5px 10px;
  border-left: 3px solid var(--ambar);
  margin-bottom: 4px;
  background: var(--ambar-fundo);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: 12.5px; color: #78350f; line-height: 1.55;
}

.site-quieto { margin: 10px 0 0; font-size: 12.5px; color: var(--tinta-fraca); }
.site-quieto.forte { font-size: 13.5px; color: var(--tinta-media); font-weight: 600; }

.site-caixa { margin-top: 14px; }
.site-caixa .explica {
  margin: 0 0 10px;
  font-size: 13px; color: var(--tinta-media); line-height: 1.6; max-width: 80ch;
}
.site-confirmacao { margin-top: 14px; }

.site-recibo { margin-top: 14px; }

@media (max-width: 780px) {
  .secao-site .botao { width: 100%; min-width: 0; }
  .site-resumo .rederivar { width: auto; }
}

/* ── o achador: a pasta em vez da planilha (28/ago) ───────────────────────── */

.achador-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -4px 0 14px; }
.achador-acao .ajuda { flex: 1 1 260px; margin: 0; }

.achado {
  border: 1px solid var(--borda);
  border-left: 4px solid var(--azul);
  border-radius: var(--raio-g);
  background: var(--fundo, #fafafa);
  padding: 14px 16px 12px;
  margin: 0 0 16px;
}
.achado h4 { margin: 16px 0 6px; font-size: 13.5px; font-weight: 650; color: var(--tinta); }
.achado-cabeca { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--tinta); }
.achado-cabeca .selo { margin-left: auto; }
.selo.caminho-tabela     { background: var(--verde-claro);   color: #15803d; }
.selo.caminho-referencia { background: var(--azul-claro);    color: #1d4ed8; }
.selo.caminho-nada       { background: var(--vermelho-claro); color: #b91c1c; }
.achado-frase { margin: 8px 0 10px; font-size: 14px; line-height: 1.5; color: var(--tinta); }

.pilulas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pilula-papel {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--borda-suave); color: var(--tinta-media);
}
.pilula-papel.tabela { background: var(--verde-claro); color: #15803d; }
.pilula-papel.book, .pilula-papel.memorial { background: var(--azul-claro); color: #1d4ed8; }
.pilula-papel.desconhecido { background: var(--vermelho-claro); color: #b91c1c; }
.botao.pequeno { padding: 5px 10px; font-size: 12.5px; }

.lista-arquivos { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; }
.lista-arquivos li { padding: 4px 0; border-top: 1px dashed var(--borda); line-height: 1.4; }
.lista-arquivos .papel {
  display: inline-block; min-width: 76px; margin-right: 6px; padding: 1px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 600; text-align: center; background: var(--borda-suave); color: var(--tinta-media);
}
.lista-arquivos .papel.tabela { background: var(--verde-claro); color: #15803d; }
.lista-arquivos .papel.desconhecido { background: var(--vermelho-claro); color: #b91c1c; }
.lista-arquivos small { display: block; color: var(--tinta-fraca); }

.candidata { padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); margin-bottom: 8px; font-size: 13px; }
.candidata.boa { border-left: 3px solid #15803d; }
.candidata.ruim { border-left: 3px solid #b91c1c; }
.candidata small { color: var(--tinta-fraca); }
.candidata .leitura { margin: 4px 0 6px; }

.tabela-referencia td.num, .tabela-referencia th.num { text-align: right; }
.divergencias { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: #92400e; line-height: 1.5; }
.divergencias li { margin-bottom: 3px; }
.escolha-doc { margin: 10px 0 0; font-size: 13px; }
.escolha-doc .rot { display: block; font-weight: 600; margin-bottom: 4px; }
.escolha-doc label { display: block; padding: 3px 0; }
.escolha-doc input { margin-right: 6px; }
.acao-plantas { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acao-plantas .ajuda { flex-basis: 100%; }
.achado-emp { margin: 14px 0 0; font-size: 13.5px; color: var(--tinta); line-height: 1.5; }
.achado-emp .ruim { color: #b91c1c; }
/* `display:flex/block` declarado acima venceria o atributo `hidden` — sem isto o
   botão de procurar aparecia com o campo vazio (visto 28/ago na tela local) */
.achador-acao[hidden], .achado[hidden] { display: none; }
/* o `input { width:100% }` da forma alcançava os rádios da escolha de documento */
.escolha-doc input[type="radio"] { width: auto; display: inline-block; vertical-align: middle; }

.aviso-cadastro { margin-top: 12px; }
.aviso-cadastro .aviso { margin: 0; }
.aviso-cadastro .aviso a.botao { display: inline-block; margin: 6px 0 0; }
.por-area { font-size: 11.5px; font-weight: 500; color: var(--tinta-fraca); white-space: nowrap; }

/* ── a sentinela: a faixa do chão ───────────────────────────────────────────
   Cinco estados, cinco cores, e a diferença entre "igual" e "não consegui
   olhar" é visível de longe: confundir os dois é o defeito que a sentinela
   existe para impedir. */
.chao {
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-left-width: 5px;
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra);
}
.chao[hidden] { display: none; }
.chao.igual  { border-left-color: var(--verde-folha); }
.chao.nota   { border-left-color: var(--verde-petroleo); }
.chao.aviso  { border-left-color: var(--laranja); background: var(--laranja-suave); }
.chao.alarme { border-left-color: var(--tijolo); background: var(--tijolo-suave); }
.chao.cego   { border-left-color: var(--tinta-fraca); background: #f4f4f2; }

.chao-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.chao-cabeca b { font-size: 15px; color: var(--tinta); }
.chao.alarme .chao-cabeca b { color: #8f2f1c; }
.chao-frase { font-size: 13.5px; color: var(--tinta-media); line-height: 1.5; }

.chao-achados { margin: 12px 0 0; padding: 0; list-style: none; }
.chao-achados .achado {
  padding: 9px 0 9px 12px;
  border-left: 3px solid var(--borda-forte);
  margin-bottom: 8px;
}
.chao-achados .achado b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.chao-achados .g-alarme { border-left-color: var(--tijolo); }
.chao-achados .g-aviso  { border-left-color: var(--laranja); }
.chao-achados .g-nota   { border-left-color: var(--verde-petroleo); }

/* o antes e o depois lado a lado — o achado precisa mostrar O QUE mudou, não só
   dizer que mudou; é por isso que a foto guarda o texto do guard inteiro */
.antes-depois { margin-top: 6px; display: grid; gap: 6px; }
.antes-depois .rot {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-fraca); margin-bottom: 2px;
}
.antes-depois code {
  display: block; font-family: var(--mono); font-size: 11.5px; line-height: 1.45;
  color: var(--tinta-media); background: rgba(36,50,56,.045);
  padding: 6px 8px; border-radius: 4px; white-space: pre-wrap; word-break: break-word;
}

/* o botão e o recado DELE, lado a lado: o aviso mora junto do clique que o
   causou — a lição do "NÃO ESTOU CONSEGUINDO" de 28/ago */
.chao-acao { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chao-aviso { font-size: 13px; color: var(--tinta-media); }


/* ════════════════ a tela de edição (30/ago) ════════════════ */

/* o selo «você»: só a origem EDITADA é marcada. Marcar as três o tempo todo
   viraria ruído, e o caso que precisa ser visto de longe é o da decisão humana
   — é ela que a ronda vai respeitar amanhã. */
.selo-editado {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px;
  font-size: 10.5px; font-weight: 700; text-transform: lowercase;
  background: var(--ouro-fraco); color: #7a6a10; border: 1px solid rgba(201,176,53,.5);
}

.editar-cel {
  margin-left: 8px; padding: 2px 8px; font-size: 11px; cursor: pointer;
  border: 1px solid var(--borda-forte); border-radius: 4px;
  background: var(--branco); color: var(--tinta-media);
}
.editar-cel:hover { background: var(--papel); color: var(--tinta); }

/* o editor abre EMBAIXO da própria linha — a lição de 28/ago: o que responde a
   um clique nasce ao lado dele, nunca no topo da página */
.editor-linha td { background: var(--papel-claro); padding: 0 !important; }
.editor { padding: 14px 16px; border-left: 4px solid var(--ouro); }
.editor-guia { margin: 0 0 12px; font-size: 12.5px; color: var(--tinta-media); line-height: 1.5; }
.editor-campo {
  display: grid; gap: 6px 12px; align-items: center; margin-bottom: 12px;
  grid-template-columns: 120px 1fr 160px auto;
}
.editor-rotulo { font-size: 12.5px; font-weight: 650; color: var(--tinta); }
.editor-candidatos { display: flex; flex-wrap: wrap; gap: 6px; }
.cand {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px;
  border: 1px solid var(--borda); border-radius: 12px; font-size: 12px;
  background: var(--branco); color: var(--tinta-media);
}
.cand i { font-style: normal; font-size: 10px; text-transform: uppercase;
          letter-spacing: .05em; color: var(--tinta-fraca); }
/* o que VALE fica marcado: a ordem editado → planilha → base é invisível se a
   tela não disser qual dos três ganhou */
.cand.vale { border-color: var(--verde-petroleo); background: #eef7f5; color: var(--verde); font-weight: 600; }
.cand.vale i { color: var(--verde-petroleo); }

.editor-entrada {
  width: 100%; padding: 6px 8px; font-size: 13px; font-family: var(--sans);
  border: 1px solid var(--borda-forte); border-radius: 4px;
}
.editor-limpar { font-size: 11.5px; padding: 4px 10px; }
.editor-limpar[disabled] { opacity: .4; cursor: default; }
.editor-problema { grid-column: 2 / -1; font-size: 12px; color: #b91c1c; }
.editor-aviso { display: block; font-size: 12.5px; color: var(--tinta-media); min-height: 1em; }

/* ── o apontador de par ── */
.apontar { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.apontar label { font-size: 12px; color: var(--tinta-media); }
.apontar select {
  margin-left: 6px; padding: 4px 6px; font-size: 12.5px;
  border: 1px solid var(--borda-forte); border-radius: 4px; background: var(--branco);
}
.apontado {
  font-size: 11px; font-weight: 700; color: var(--verde);
  background: #eef7f5; border: 1px solid rgba(26,107,105,.35);
  padding: 1px 7px; border-radius: 10px;
}

/* ── os mapas ── */
.mapas { margin: 0 0 20px; }
.mapa-alarme {
  margin: 0 0 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  background: var(--laranja-suave); border-left: 4px solid var(--laranja);
  border-radius: var(--raio); color: #92400e;
}
.mapa-bloco {
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco);
  padding: 12px 16px;
}
.mapa-bloco > summary {
  cursor: pointer; font-size: 14px; font-weight: 650; color: var(--tinta);
  list-style: none;
}
.mapa-bloco > summary::before { content: "▸ "; color: var(--tinta-fraca); }
.mapa-bloco[open] > summary::before { content: "▾ "; }
.mapa-guia { margin: 10px 0; font-size: 12.5px; color: var(--tinta-media); line-height: 1.5; }
.mapa-tabela { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.mapa-tabela td { padding: 5px 8px; border-bottom: 1px solid var(--borda); font-size: 12.5px; vertical-align: middle; }
.mapa-rotulo { font-weight: 650; color: var(--tinta); white-space: nowrap; }
.mapa-amostra { color: var(--tinta-fraca); font-family: var(--mono); font-size: 11.5px; }
.mapa-escolha select {
  padding: 4px 6px; font-size: 12.5px; border: 1px solid var(--borda-forte);
  border-radius: 4px; background: var(--branco); min-width: 160px;
}
.mapa-aviso { font-size: 12.5px; color: var(--tinta-media); }

/* ── o espelho: a prévia do desenho do andar ── */
.secao-espelho { margin-top: 26px; }
.espelho {
  margin-top: 12px; padding: 16px; border: 1px solid var(--borda);
  border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra);
}
.espelho h3 { margin: 0 0 12px; font-size: 15px; color: var(--tinta); }
.mapa-pavimento { display: inline-block; padding: 10px; background: var(--papel); border-radius: var(--raio); }
.pos-linha { display: flex; gap: 6px; margin-bottom: 6px; }
.pos {
  width: 46px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; background: var(--verde-folha); color: #fff;
  font-size: 13px; font-weight: 700;
}
/* a célula vazia é o corredor — desenhá-la igual às outras faria o mapa mentir
   sobre onde há apartamento */
.pos.vazia { background: transparent; border: 1px dashed var(--borda-forte); }
.espelho-porque { margin: 12px 0 0; font-size: 12.5px; color: var(--tinta-media); line-height: 1.55; }
.espelho-acao { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.espelho-aviso { font-size: 12.5px; color: var(--tinta-media); line-height: 1.5; }
.espelho-aviso .botao { margin-left: 8px; }

@media (max-width: 760px) {
  .editor-campo { grid-template-columns: 1fr; }
  .mapa-escolha select { min-width: 0; width: 100%; }
}

/* ── criar as posições que faltam ─────────────────────────────────────────── */
.caixa-criar {
  margin: 14px 0 0; padding: 14px 16px;
  border: 1px solid var(--borda); border-left: 5px solid var(--verde-petroleo);
  border-radius: var(--raio); background: var(--branco);
}
.caixa-criar[hidden] { display: none; }
.criar-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.criar-pergunta { margin: 0 0 6px; font-size: 15px; color: var(--tinta); }
.criar-detalhe { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--tinta-media); }
.criar-aviso { font-size: 13px; color: #8f2f1c; }