/* ============================================================================
   A lista — tabela tradicional, no estilo do próprio portal da Órulo.

   Os cartões da tela de inclusão são bons para decidir UM empreendimento: cada
   um mostra plantas, fotos, avisos. São péssimos para varrer NOVECENTOS — e é
   isso que o Giba pediu ao dizer que exclui muitos de uma vez.

   Aqui a densidade é a funcionalidade: linha fina, coluna alinhada, número à
   direita, o olho descendo rápido. Nada de sombra e cartão; isto é uma planilha
   com a roupa da casa.
   ========================================================================= */

.folha.larga { max-width: 1400px; }

/* ─── filtros ────────────────────────────────────────── */
.painel-filtros { margin: 20px 0 12px; }

.abas-situacao { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.abas-situacao button {
  border: 1px solid var(--borda);
  background: var(--branco);
  color: var(--tinta-media);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all .14s ease;
}
.abas-situacao button:hover { border-color: var(--verde); color: var(--verde); }
.abas-situacao button.ativa {
  background: var(--verde); border-color: var(--verde); color: var(--papel);
}
.abas-situacao button b { font-weight: 700; margin-left: 5px; opacity: .85; }

.filtros-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros-linha input,
.filtros-linha select {
  font-family: inherit; font-size: 14px;
  padding: 8px 11px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--branco); color: var(--tinta);
  min-width: 170px;
}
.filtros-linha input:focus,
.filtros-linha select:focus { outline: 2px solid var(--verde-petroleo); outline-offset: -1px; }
.filtros-linha input { flex: 1 1 220px; }

/* ─── barra de seleção (só aparece com algo marcado) ─── */
.barra-selecao {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0;
  padding: 11px 15px;
  background: var(--verde);
  color: var(--papel);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
}
.barra-selecao span { font-weight: 600; font-size: 14.5px; margin-right: auto; }
.barra-selecao .botao { background: var(--papel-claro); border-color: transparent; }
.barra-selecao .botao.fantasma {
  background: transparent; color: var(--papel);
  border: 1px solid rgba(255,255,255,.4);
}
.barra-selecao .botao.fantasma:hover { background: rgba(255,255,255,.12); color: #fff; }
.botao.perigo { background: var(--tijolo); color: #fff; border-color: var(--tijolo); }
.botao.perigo:hover { background: #9c3b25; color: #fff; }

/* ─── a tabela ───────────────────────────────────────── */
.tabela-caixa {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow-x: auto;
}
.tabela-emp { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-emp thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--papel-claro);
  text-align: left;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-fraca);
  padding: 11px 12px;
  border-bottom: 1.5px solid var(--borda-forte);
  white-space: nowrap;
}
.tabela-emp th.num, .tabela-emp td.num { text-align: right; }
.tabela-emp th.col-check, .tabela-emp td.col-check { width: 38px; text-align: center; padding-right: 0; }
.tabela-emp tbody tr { border-bottom: 1px solid var(--borda); }
.tabela-emp tbody tr:nth-child(even) { background: rgba(36,50,56,.018); }
.tabela-emp tbody tr:hover { background: var(--ouro-fraco); }
.tabela-emp tbody tr.marcada { background: rgba(46,138,87,.10); }
.tabela-emp td { padding: 9px 12px; vertical-align: middle; }
.tabela-emp td.nome { font-weight: 600; color: var(--tinta); }
.tabela-emp td.nome small { display: block; font-weight: 400; font-size: 12px; color: var(--tinta-fraca); }
.tabela-emp td.onde { color: var(--tinta-media); font-size: 13px; }
.tabela-emp td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-emp td.preco { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta); }
.tabela-emp input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--verde); }

.marca-sit {
  display: inline-block; white-space: nowrap;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.marca-sit.pronto     { background: rgba(46,138,87,.14);  color: #1d6b45; }
.marca-sit.pede_voce  { background: var(--ouro-fraco);    color: #7d6c10; }
.marca-sit.ja_incluido{ background: rgba(26,107,105,.12); color: var(--verde-petroleo); }
.marca-sit.falhou     { background: var(--tijolo-suave);  color: var(--tijolo); }
.marca-sit.descartado { background: rgba(36,50,56,.09);   color: var(--tinta-fraca); }
.sit-nota { display: block; margin-top: 3px; font-size: 12px; color: var(--tinta-fraca); }

.rodape-lista {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 14px 0 40px;
  font-size: 13.5px; color: var(--tinta-fraca);
}

@media (max-width: 780px) {
  .tabela-emp td.onde, .tabela-emp th:nth-child(3),
  .tabela-emp td:nth-child(4), .tabela-emp th:nth-child(4) { display: none; }
}

/* ─── ação por linha ─────────────────────────────────────
   Ver o empreendimento na tabela e ter que ir procurar o mesmo nome na outra
   tela, na mão, era o que quebrava a ida e volta.

   NÃO usar a classe `.botao` daqui: no telas.css ela tem padding de 10x20 e
   caixa alta, feita para o botão principal de um formulário. Numa tabela de
   cinquenta linhas, cinquenta daqueles viram uma parede. (E `.mini`, que
   parece o diminutivo óbvio, é miniatura de imagem 84x84 — foi o que produziu
   os blocos verdes gigantes da primeira versão.)

   Aqui a ação é discreta: some no meio da linha e ganha contorno quando o
   ponteiro passa. Quem varre a tabela está lendo, não clicando; o botão só
   precisa estar lá no momento em que a pessoa decidiu. */
.tabela-emp td.col-acao,
.tabela-emp th.col-acao { width: 1%; text-align: right; white-space: nowrap; padding-left: 4px; }

.acao-linha {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  color: var(--tinta-fraca);
  background: transparent;
  border: 1px solid transparent;
  transition: color .14s, border-color .14s, background .14s;
}
.tabela-emp tbody tr:hover .acao-linha {
  color: var(--verde);
  border-color: var(--borda-forte);
  background: var(--branco);
}
.acao-linha:hover {
  color: var(--papel) !important;
  background: var(--verde) !important;
  border-color: var(--verde) !important;
}
/* A ação de aprovar é a única que grava — nasce visível, sem depender do hover. */
.acao-linha.aprovar { color: var(--verde); border-color: rgba(46,138,87,.4); }

.tabela-emp td.nome a { color: inherit; text-decoration: none; }
.tabela-emp td.nome a:hover { color: var(--verde); text-decoration: underline; }

/* ─── ajustes de ritmo ───────────────────────────────────
   A nota da situação ("2 plantas esperando você dizer o tipo…") é a linha mais
   longa da tabela e empurrava a coluna de ação para longe. Presa a uma largura,
   ela informa sem desalinhar o resto. */
.tabela-emp td { padding: 11px 12px; }
.tabela-emp td:last-child { padding-right: 14px; }
.sit-nota { max-width: 34ch; line-height: 1.35; }
.tabela-emp tbody tr:nth-child(even) { background: rgba(36,50,56,.012); }
.tabela-emp tbody tr:hover { background: #fffdf6; }
.tabela-emp tbody tr.marcada { background: rgba(46,138,87,.07); }
.tabela-emp tbody tr.marcada:hover { background: rgba(46,138,87,.11); }

/* Ainda não analisado: o estado mais comum da praça no começo, e o que a tela
   existe para reduzir. Cinza claro de propósito — não é problema nem pendência,
   é só coisa que ninguém olhou ainda. */
.marca-sit.nao_analisado { background: rgba(36,50,56,.07); color: var(--tinta-fraca); }

/* "a definir" não é número: não usa a fonte tabular nem o peso de valor. */
.tabela-emp td.preco:not(:has(*)) { color: var(--tinta); }
.tabela-emp td.preco.indefinido { color: var(--tinta-fraca); font-style: italic; font-variant-numeric: normal; }

/* ─── a foto ─────────────────────────────────────────────
   Numa tela que existe para decidir "isto me interessa?" sobre novecentos
   itens, a imagem é o filtro mais rápido: o olho descarta um galpão ou um
   terreno antes de o cérebro terminar de ler o nome.

   Pequena de propósito (64x44). Ela serve para reconhecer, não para admirar —
   quem quiser ver o empreendimento clica e abre a ficha. E `loading="lazy"`
   porque são até 500 linhas por carga. */
.tabela-emp th.col-foto, .tabela-emp td.col-foto { width: 64px; padding-right: 0; }
.tabela-emp td.col-foto img {
  width: 64px; height: 44px; object-fit: cover; display: block;
  border-radius: 4px; background: var(--papel-fundo);
  border: 1px solid var(--borda);
}
.tabela-emp td.col-foto .sem-foto {
  display: grid; place-items: center;
  width: 64px; height: 44px; border-radius: 4px;
  background: var(--papel-claro); border: 1px dashed var(--borda);
  color: var(--tinta-fraca); font-size: 12px;
}
@media (max-width: 780px) { .tabela-emp th.col-foto, .tabela-emp td.col-foto { display: none; } }