/* ─────────────────────────────────────────────────────────────────────────────
   as fontes · a pele

   A identidade é a do Alcateia que o Giba usa todo dia — o SISTEMA, não o
   hotsite: fundo claro, cartão branco de canto arredondado, número grande
   colorido com um quadrado pastel ao lado, etiqueta em pílula, azul no que é
   ação, e a fonte do sistema (ui-sans-serif/Segoe UI, a mesma do CRM).

   A primeira versão copiou o tema "papel e mata" (verde-petróleo, Overlock,
   creme) — aquilo é do SITE público (as variáveis lá se chamam
   --font-public-*), não do sistema. Guardado em fontes.css.bak-papel-e-mata.

   Carrega depois de telas.css + madrugada.css + lista.css e redefine o que
   precisa: as classes do molde continuam valendo, só a pele muda.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif: var(--sans);           /* o sistema não usa serifa em lugar nenhum */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --papel: #f8fafc;               /* slate-50 — o fundo da página */
  --papel-claro: #ffffff;
  --branco: #ffffff;

  --tinta: #0f172a;               /* slate-900 */
  --tinta-media: #475569;         /* slate-600 */
  --tinta-fraca: #64748b;         /* slate-500 */

  --borda: #e2e8f0;               /* slate-200 */
  --borda-suave: #f1f5f9;         /* slate-100 */

  --azul: #2563eb;     --azul-claro: #dbeafe;   --azul-fundo: #eff6ff;
  --roxo: #7c3aed;     --roxo-claro: #f3e8ff;
  --verde: #16a34a;    --verde-claro: #dcfce7;
  --ambar: #d97706;    --ambar-claro: #fef3c7;  --ambar-fundo: #fffbeb;
  --rosa: #db2777;     --rosa-claro: #fce7f3;
  --vermelho: #dc2626; --vermelho-claro: #fee2e2;
  --petroleo: #114746;            /* a marca da casa — só no símbolo do lobo */

  /* o molde usa estes nomes; aponto todos para a paleta nova */
  --verde-mata: var(--petroleo);
  --verde-noite: var(--petroleo);
  --verde-petroleo: var(--petroleo);
  --verde-folha: var(--verde);
  --ouro: var(--ambar);
  --ouro-fraco: var(--ambar-claro);
  --laranja: var(--ambar);
  --laranja-suave: var(--ambar-claro);
  --tijolo: var(--vermelho);
  --tijolo-suave: var(--vermelho-claro);
  --borda-forte: #cbd5e1;

  --raio: 10px;
  --raio-g: 14px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --sombra-alta: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .05);
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul); }

/* ── o alto da página ─────────────────────────────────────────────────────── */

.trilho {
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  box-shadow: none;
  padding: 0 24px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.trilho::after { display: none; }     /* o fio de ouro é do site, não do sistema */

.marca { display: flex; align-items: center; gap: 12px; }
.marca::before {
  content: "";
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--petroleo) url("/web/marca/intercon-hotsite-wolf-symbol.png")
              center/22px 22px no-repeat;
  flex: none;
  filter: none;
}
.marca .texto b {
  display: block;
  font-family: var(--sans);
  font-size: 15px; font-weight: 650;
  letter-spacing: -.01em;
  color: var(--tinta);
  text-transform: none;
}
.marca .texto b .orulo { color: var(--azul); font-style: normal; font-weight: 650; }
.marca .texto small {
  display: block;
  font-size: 11.5px; color: var(--tinta-fraca);
  letter-spacing: 0; text-transform: none;
}

.abas-telas {
  background: transparent;
  border-radius: 0;
  padding: 0;
  gap: 2px;
  margin-left: auto; margin-right: 12px;
}
.abas-telas a {
  font-family: var(--sans);
  font-size: 13.5px; font-weight: 500;
  color: var(--tinta-media);
  padding: 8px 14px;
  border-radius: 8px;
}
.abas-telas a:hover { background: var(--borda-suave); color: var(--tinta); }
.abas-telas a.ativa { background: var(--azul-claro); color: #1d4ed8; font-weight: 600; }

.leds { display: flex; align-items: center; gap: 8px; }
.led {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--verde-claro);
  color: #15803d;
  border: 0; border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px; font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.led i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.led.falha { background: var(--vermelho-claro); color: #b91c1c; }
.led.atencao { background: var(--ambar-claro); color: #b45309; }
.led.medindo { background: var(--borda-suave); color: var(--tinta-fraca); }

/* ── a folha ──────────────────────────────────────────────────────────────── */

.folha { max-width: 1120px; margin: 0 auto; padding: 28px 24px 64px; }
.folha.larga { max-width: 1440px; }

.titulo-painel {
  font-family: var(--sans);
  font-size: 28px; font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tinta);
  margin: 4px 0 6px;
}
.subtitulo-painel {
  font-size: 14.5px; color: var(--tinta-media);
  max-width: 78ch; margin: 0 0 20px;
}

.frase-seguranca {
  background: var(--azul-fundo);
  border: 1px solid var(--azul-claro);
  border-left: 3px solid var(--azul);
  border-radius: var(--raio);
  color: #1e3a8a;
  padding: 13px 16px;
  font-size: 13.5px;
  margin: 0 0 18px;
}
.frase-seguranca b { color: #1d4ed8; font-weight: 650; }

.guia {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 18px 22px;
  margin: 0 0 20px;
}
.guia ol { margin: 0; padding-left: 20px; }
.guia li { margin: 0 0 7px; font-size: 13.5px; color: var(--tinta-media); }
.guia li b { color: var(--tinta); font-weight: 600; }
.guia-nota {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--borda-suave);
  font-size: 12.5px; color: var(--tinta-fraca); font-style: normal;
}

.aviso {
  background: var(--ambar-fundo);
  border: 1px solid #fde68a;
  border-left: 3px solid var(--ambar);
  border-radius: var(--raio);
  padding: 12px 16px; margin: 0 0 16px;
  font-size: 13.5px; color: #92400e;
}
.aviso.grave {
  background: #fef2f2; border-color: #fecaca; border-left-color: var(--vermelho);
  color: #991b1b;
}

/* ── o placar ─────────────────────────────────────────────────────────────── */

.placar, .placar-fontes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 0 0 20px;
}
.placa {
  position: relative;
  display: block; width: 100%;
  text-align: left;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 16px 18px 15px;
  cursor: pointer;
  font-family: var(--sans);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.placa:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.placa b {
  display: block;
  font-family: var(--sans);
  font-size: 32px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--azul);
  margin-bottom: 2px;
}
.placa span {
  display: block;
  font-size: 13.5px; font-weight: 600; color: var(--tinta);
}
.placa small {
  display: block; margin-top: 3px;
  font-size: 11.5px; color: var(--tinta-fraca); line-height: 1.4;
  max-width: 82%;
}
/* o quadrado pastel do canto, como nos cartões do Alcateia */
.placa::after {
  content: ""; position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--azul-claro);
}
.placa.precisa b { color: var(--ambar); }    .placa.precisa::after { background: var(--ambar-claro); }
.placa.novo b { color: var(--azul); }        .placa.novo::after { background: var(--azul-claro); }
.placa.ja b { color: var(--verde); }         .placa.ja::after { background: var(--verde-claro); }
.placa.invisivel b { color: var(--roxo); }   .placa.invisivel::after { background: var(--roxo-claro); }
.placa.segurado b { color: var(--rosa); }    .placa.segurado::after { background: var(--rosa-claro); }
.placa.zero b { color: #94a3b8; }            .placa.zero::after { background: var(--borda-suave); }
.placa.ativa { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fundo); }
.placa.precisa.ativa { border-color: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-fundo); }

/* ── filtros ──────────────────────────────────────────────────────────────── */

.painel-filtros {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 14px 16px;
  margin: 0 0 16px;
}
.abas-situacao { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.aba-filtro, .abas-situacao button {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 7px 13px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--tinta-media);
  cursor: pointer;
}
.aba-filtro:hover, .abas-situacao button:hover { background: var(--borda-suave); color: var(--tinta); }
.aba-filtro.ativa, .abas-situacao button.ativa {
  background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600;
}
.filtros-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtros-linha input, #busca {
  flex: 1 1 320px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 9px 13px;
  font-family: var(--sans); font-size: 13.5px; color: var(--tinta);
}
.filtros-linha select {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--sans); font-size: 13.5px; color: var(--tinta);
}
#busca:focus, .filtros-linha select:focus, .campo-nota:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fundo);
}

/* ── a tabela ─────────────────────────────────────────────────────────────── */

.tabela-caixa {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.tabela-emp, .tabela-fontes { width: 100%; border-collapse: collapse; }
.tabela-emp thead th, .tabela-fontes thead th {
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  padding: 12px 14px;
  text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.tabela-emp tbody td, .tabela-fontes tbody td {
  border-bottom: 1px solid var(--borda-suave);
  padding: 13px 14px;
  vertical-align: top;
  font-size: 13.5px;
  color: var(--tinta-media);
}
.tabela-emp tbody tr:last-child td { border-bottom: 0; }
.tabela-emp tbody tr:hover td { background: #fafcff; }
.tabela-emp tbody td:first-child { box-shadow: inset 3px 0 0 transparent; }
.tabela-emp tr.precisa_de_voce td:first-child { box-shadow: inset 3px 0 0 var(--ambar); }
.tabela-emp tr.novo td:first-child { box-shadow: inset 3px 0 0 var(--azul); }
.tabela-emp tr.ja_na_base td:first-child { box-shadow: inset 3px 0 0 var(--verde); }
.tabela-emp tr.entrou_invisivel td:first-child { box-shadow: inset 3px 0 0 var(--roxo); }
.tabela-emp tr.segurado td:first-child { box-shadow: inset 3px 0 0 var(--rosa); }

td.nome a {
  font-weight: 600; color: var(--tinta); text-decoration: none; font-size: 14px;
}
td.nome a:hover { color: var(--azul); text-decoration: underline; }
td.nome small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--tinta-fraca); }
td.num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta); }
td.onde { color: var(--tinta-media); }
.quieto { color: #cbd5e1; }

.selo-fonte {
  display: inline-block;
  background: var(--borda-suave);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px; font-weight: 550; color: var(--tinta-media);
  white-space: nowrap;
}
.selo-fonte.conectaimob { background: var(--azul-claro); border-color: #bfdbfe; color: #1d4ed8; }
.selo-fonte.drive_dimas { background: var(--roxo-claro); border-color: #e9d5ff; color: #6d28d9; }
.selo-fonte.orulo { background: var(--verde-claro); border-color: #bbf7d0; color: #15803d; }

.marca-sit {
  display: inline-block; border: 0; border-radius: 999px;
  padding: 3px 11px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--borda-suave); color: var(--tinta-media);
}
.marca-sit.precisa_de_voce { background: var(--ambar-claro); color: #b45309; }
.marca-sit.novo { background: var(--azul-claro); color: #1d4ed8; }
.marca-sit.ja_na_base { background: var(--verde-claro); color: #15803d; }
.marca-sit.entrou_invisivel { background: var(--roxo-claro); color: #6d28d9; }
.marca-sit.segurado { background: var(--rosa-claro); color: #be185d; }
.sit-nota { display: block; margin-top: 4px; font-size: 11.5px; color: var(--tinta-fraca); line-height: 1.45; }

.pede {
  display: inline-block; background: var(--ambar-claro); color: #b45309;
  border-radius: 999px; padding: 3px 11px; font-size: 11.5px; font-weight: 600;
}
.avisos-linha summary {
  cursor: pointer; color: var(--ambar); font-size: 12.5px; font-weight: 550;
  list-style: none;
}
.avisos-linha summary::-webkit-details-marker { display: none; }
.avisos-linha summary::before { content: "▸ "; }
.avisos-linha[open] summary::before { content: "▾ "; }
.avisos-linha ul { margin: 7px 0 0; padding-left: 16px; }
.avisos-linha li { font-size: 12px; color: var(--tinta-media); margin-bottom: 4px; }

.decisao-ultima { font-size: 13px; color: var(--tinta-media); }
.decisao-ultima small { display: block; font-size: 11.5px; color: var(--tinta-fraca); }

.col-acao { text-align: right; white-space: nowrap; }
.acao-linha {
  display: inline-block;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 8px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--tinta-media);
  text-decoration: none;
}
.acao-linha:hover { background: var(--borda-suave); color: var(--tinta); }
.acao-linha.aprovar { background: var(--azul); border-color: var(--azul); color: #fff; }
.acao-linha.aprovar:hover { background: #1d4ed8; color: #fff; }

.vazio { text-align: center; color: var(--tinta-fraca); padding: 40px 16px; font-style: normal; }
.rodape-lista {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 14px; font-size: 12.5px; color: var(--tinta-fraca);
}

/* ── tela 2: o empreendimento ─────────────────────────────────────────────── */

.voltar { display: inline-block; margin-bottom: 10px; font-size: 13px; color: var(--tinta-media); text-decoration: none; }
.voltar:hover { color: var(--azul); }

.cabeca-fonte {
  border-bottom: 1px solid var(--borda);
  padding-bottom: 18px; margin-bottom: 22px;
}
.cabeca-fonte .selos { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; }
.selo {
  display: inline-block; border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 600;
  background: var(--borda-suave); color: var(--tinta-media);
}
.selo.bom, .selo.ok { background: var(--verde-claro); color: #15803d; }
.selo.pede { background: var(--ambar-claro); color: #b45309; }
.selo.aviso { background: var(--ambar-claro); color: #b45309; }
.selo.ruim { background: var(--vermelho-claro); color: #b91c1c; }
.na-base-linha { margin: 8px 0 0; font-size: 13px; color: var(--tinta-media); }
.avisos-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.avisos-lista li {
  background: var(--ambar-fundo); border: 1px solid #fde68a; border-left: 3px solid var(--ambar);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 6px;
  font-size: 12.5px; color: #92400e;
}

.secao { font-size: 18px; font-weight: 650; letter-spacing: -.01em; color: var(--tinta); margin: 28px 0 4px; }
.secao-explica { font-size: 13px; color: var(--tinta-media); margin: 0 0 14px; }

.lado-caixa {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra); overflow: hidden;
}
.lado-a-lado { width: 100%; border-collapse: collapse; }
.lado-a-lado th {
  background: var(--branco); border-bottom: 1px solid var(--borda);
  padding: 11px 14px; text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-fraca);
}
.lado-a-lado td {
  border-bottom: 1px solid var(--borda-suave); padding: 11px 14px;
  font-size: 13.5px; color: var(--tinta-media);
}
.lado-a-lado tr:last-child td { border-bottom: 0; }
.lado-a-lado td.campo { font-weight: 600; color: var(--tinta); }
.lado-a-lado td.porque { font-size: 12.5px; color: var(--tinta-fraca); }
.vazio-valor { color: #cbd5e1; font-style: italic; }
.gaveta-selo {
  display: inline-block; border-radius: 999px; padding: 3px 11px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--verde-claro); color: #15803d;
}
.gaveta-selo.espera, .gaveta-selo.pede { background: var(--ambar-claro); color: #b45309; }
.gaveta-selo.parou, .gaveta-selo.quieto { background: var(--borda-suave); color: var(--tinta-fraca); }

.ficha {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra);
  padding: 16px 18px; margin-bottom: 12px;
}
.ficha.pendente { border-left: 3px solid var(--ambar); }
.cabeca-planta { display: flex; align-items: flex-start; gap: 12px; }
.cabeca-planta h3 { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--tinta); }
.ancora { display: block; font-size: 11.5px; color: var(--tinta-fraca); font-weight: 400; margin-left: 0; }
.estado-planta { margin-left: auto; }
.planta-img {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover;
  background: var(--borda-suave); border: 1px solid var(--borda); flex: none;
}
.planta-desc { font-size: 13px; color: var(--tinta-media); margin: 10px 0 12px; }

.numeros, .tipologia {
  display: flex; flex-wrap: wrap; gap: 22px;
  padding: 12px 0; border-top: 1px solid var(--borda-suave);
}
.numeros .v, .tipologia .v, .valor {
  display: block; font-size: 16px; font-weight: 650; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.numeros .l, .tipologia .l, .rotulo-midia {
  display: block; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-fraca);
}
.preco-lado { display: flex; flex-wrap: wrap; gap: 22px; padding-top: 12px; border-top: 1px solid var(--borda-suave); }

.escolha { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.opcao {
  background: var(--branco); border: 1px solid var(--borda); border-radius: 999px;
  padding: 6px 14px; font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  color: var(--tinta-media); cursor: pointer;
}
.opcao:hover { background: var(--borda-suave); color: var(--tinta); }
.opcao.marcada { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.opcao.sugerida { border-color: var(--ambar); color: #b45309; background: var(--ambar-fundo); }
.opcao.sugerida.marcada { background: var(--azul); border-color: var(--azul); color: #fff; }

.midia-bloco {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra); padding: 16px 18px;
}
.midia-grade { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.mini, .capa {
  border-radius: 10px; border: 1px solid var(--borda); object-fit: cover;
  background: var(--borda-suave);
}
.mini { width: 72px; height: 72px; }
.capa { width: 100%; max-width: 260px; height: auto; }
.documentos { list-style: none; margin: 0; padding: 0; }
.documentos li {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--borda); border-radius: 8px;
  padding: 9px 12px; margin-bottom: 6px; font-size: 13px;
}
.especie {
  background: var(--borda-suave); border-radius: 999px; padding: 2px 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-fraca);
}

/* ── a decisão ────────────────────────────────────────────────────────────── */

.decisao-caixa {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--azul);
  border-radius: var(--raio-g); box-shadow: var(--sombra);
  padding: 18px 20px; margin-top: 12px;
}
.campo-nota {
  width: 100%; min-height: 76px; resize: vertical;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 8px;
  padding: 10px 12px; font-family: var(--sans); font-size: 13.5px; color: var(--tinta);
  margin: 10px 0 14px;
}
.botoes-decisao { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.botao {
  background: var(--azul); border: 1px solid var(--azul); color: #fff;
  border-radius: 8px; padding: 10px 18px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; cursor: pointer;
  box-shadow: var(--sombra);
}
.botao:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }
.botao.fantasma, .botao.anota {
  background: var(--branco); border-color: var(--borda); color: var(--tinta-media); box-shadow: none;
}
.botao.fantasma:hover:not(:disabled), .botao.anota:hover:not(:disabled) {
  background: var(--borda-suave); color: var(--tinta);
}
.botao:disabled {
  opacity: 1; background: var(--borda-suave); border-color: var(--borda);
  color: #94a3b8; cursor: not-allowed; box-shadow: none;
}
.botao small { display: block; font-size: 11px; font-weight: 500; color: #b45309; margin-top: 2px; }
.botao:disabled small { color: #b45309; }

.recibo {
  background: var(--verde-claro); border: 1px solid #bbf7d0; border-left: 3px solid var(--verde);
  border-radius: var(--raio); padding: 13px 16px; margin-top: 14px;
  font-size: 13.5px; color: #14532d;
}
.recibo h4 {
  margin: 0 0 4px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #15803d;
}
.historico { list-style: none; margin: 10px 0 0; padding: 0; }
.historico li {
  border: 1px solid var(--borda); border-radius: 8px; padding: 10px 13px; margin-bottom: 6px;
  font-size: 13px; color: var(--tinta-media); background: var(--branco);
}
.historico .quando { font-size: 11.5px; color: var(--tinta-fraca); }
.nada-hoje { color: var(--tinta-fraca); }
.candidatos { font-size: 13px; color: var(--tinta-media); }
.motivo-decisao { font-size: 12.5px; color: var(--tinta-fraca); margin-top: 8px; }

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

@media (max-width: 900px) {
  .trilho { flex-wrap: wrap; padding: 12px 16px; }
  .abas-telas { order: 3; width: 100%; margin: 10px 0 0; justify-content: flex-start; flex-wrap: wrap; }
  .leds { margin-left: auto; }
  .folha { padding: 20px 16px 56px; }
  .titulo-painel { font-size: 23px; }
}
@media (max-width: 780px) {
  .tabela-emp thead, .tabela-fontes thead { display: none; }
  .tabela-emp tbody tr, .tabela-fontes tbody tr {
    display: block; border: 1px solid var(--borda); border-radius: var(--raio-g);
    margin: 0 0 10px; padding: 6px 2px; background: var(--branco);
  }
  .tabela-emp tbody td, .tabela-fontes tbody td { display: block; border: 0; padding: 6px 14px; }
  .tabela-emp tbody td[data-r]::before {
    content: attr(data-r); display: block;
    font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-fraca);
    margin-bottom: 2px;
  }
  .tabela-emp tbody td:first-child { box-shadow: none; }
  .tabela-emp tr.precisa_de_voce { border-left: 3px solid var(--ambar); }
  .tabela-emp tr.novo { border-left: 3px solid var(--azul); }
  .tabela-emp tr.ja_na_base { border-left: 3px solid var(--verde); }
  .tabela-emp tr.entrou_invisivel { border-left: 3px solid var(--roxo); }
  .tabela-emp tr.segurado { border-left: 3px solid var(--rosa); }
  .col-acao { text-align: left; }
  .lado-a-lado th:nth-child(4), .lado-a-lado td:nth-child(4) { display: none; }
}

/* ── acabamento: o que faltava para ficar igual ao sistema ────────────────── */

/* o quadrado pastel dos cartões leva um ícone, como no Alcateia */
.placa::after { background-repeat: no-repeat; background-position: center; background-size: 19px 19px; }
.placa.precisa::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b45309%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%228%22%20x2%3D%2212%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2216%22%20x2%3D%2212.01%22%20y2%3D%2216%22%2F%3E%3C%2Fsvg%3E"); }
.placa.novo::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231d4ed8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); }
.placa.ja::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2315803d%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2011.08V12a10%2010%200%201%201-5.93-9.14%22%2F%3E%3Cpolyline%20points%3D%2222%204%2012%2014.01%209%2011.01%22%2F%3E%3C%2Fsvg%3E"); }
.placa.invisivel::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236d28d9%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.94%2017.94A10.07%2010.07%200%200%201%2012%2020c-7%200-11-8-11-8a18.45%2018.45%200%200%201%205.06-5.94M9.9%204.24A9.12%209.12%200%200%201%2012%204c7%200%2011%208%2011%208a18.5%2018.5%200%200%201-2.16%203.19m-6.72-1.07a3%203%200%201%201-4.24-4.24%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%221%22%20x2%3D%2223%22%20y2%3D%2223%22%2F%3E%3C%2Fsvg%3E"); }
.placa.segurado::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23be185d%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22%2F%3E%3C%2Fsvg%3E"); }
.placa.zero::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%2F%3E%3C%2Fsvg%3E"); }

/* o título da página com o ícone quadrado do lado, como nas telas do CRM */
.cabeca-pagina { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 4px; }
.titulo-painel { position: relative; padding-left: 56px; min-height: 44px; }
.titulo-painel::before {
  content: ""; position: absolute; left: 0; top: -4px;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--azul-claro) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232563eb%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2022V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v18Z%22%2F%3E%3Cpath%20d%3D%22M6%2012H4a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202h2%22%2F%3E%3Cpath%20d%3D%22M18%209h2a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202h-2%22%2F%3E%3Cpath%20d%3D%22M10%206h4M10%2010h4M10%2014h4M10%2018h4%22%2F%3E%3C%2Fsvg%3E") center/22px 22px no-repeat;
}
.subtitulo-painel { padding-left: 56px; }

/* o sistema não grita: nada de caixa alta em botão, etiqueta ou distintivo */
.led, .acao-linha, .botao, .marca-sit, .selo, .selo-fonte, .pede, .gaveta-selo {
  text-transform: none;
  letter-spacing: 0;
}
.avisos-linha summary { white-space: nowrap; }
td.espera, td.avisos { white-space: nowrap; }

/* o link da linha fica alinhado com o texto, não colado no topo */
.tabela-emp tbody td.col-acao { vertical-align: middle; }

/* ── correções de estrutura (o que o markup real pede) ───────────────────── */

/* .valor é célula no lado a lado e é número na planta — não pode virar bloco
   nos dois: display:block num <td> desmonta a linha da tabela. */
.lado-a-lado td.valor {
  display: table-cell;
  font-size: 13.5px; font-weight: 500; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.lado-a-lado td.fonte-cab, .lado-a-lado th.fonte-cab { width: 18%; }
.lado-a-lado th.base-cab { width: 18%; }
.lado-a-lado td.campo { width: 16%; }
.ficha .valor, .numeros .valor, .preco-lado .valor {
  display: block; font-size: 16px; font-weight: 650;
}

/* .capa é a moldura; a foto vai dentro */
.capa {
  display: block; width: 100%; max-width: 260px;
  border: 1px solid var(--borda); border-radius: 12px;
  background: var(--borda-suave); overflow: hidden;
}
.capa img { display: block; width: 100%; height: auto; }
.capa .sem {
  display: flex; align-items: center; justify-content: center;
  height: 150px; color: var(--tinta-fraca); font-size: 12.5px;
}
.mini img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* .campo-nota é o rótulo que embrulha o campo */
.campo-nota {
  display: block; margin: 14px 0;
  background: none; border: 0; padding: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-fraca);
  min-height: 0;
}
.campo-nota textarea {
  display: block; width: 100%; min-height: 76px; resize: vertical;
  margin-top: 6px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--tinta);
}
.campo-nota textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fundo);
}

/* o botão explica o porquê quando está travado — sem transbordar */
.botao {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; max-width: 340px; text-align: center; white-space: normal; line-height: 1.35;
}
.botao small { max-width: 300px; }

/* as caixas de "trazer as plantas" / "entrar fora da praça" */
.opcoes-decisao { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.opcoes-decisao label {
  display: flex; align-items: flex-start; gap: 9px;
  border: 1px solid var(--borda); border-radius: 8px;
  padding: 10px 13px; background: var(--branco);
  font-size: 13.5px; color: var(--tinta); cursor: pointer;
}
.opcoes-decisao label:hover { background: var(--borda-suave); }
.opcoes-decisao input[type="checkbox"] { margin-top: 2px; accent-color: var(--azul); }
.opcoes-decisao small { display: block; color: var(--tinta-fraca); font-size: 12px; }

/* número dentro da ficha é dado, não indicador: escuro, como nas tabelas do CRM.
   Cor só nos cartões do placar, que é onde ela quer dizer alguma coisa. */
.ficha .n, .ficha .v, .ficha .valor,
.numeros .n, .numeros .v, .tipologia .n, .tipologia .v,
.preco-lado .n, .preco-lado .v, .preco-lado .valor { color: var(--tinta); }
.ficha .l, .numeros .l, .tipologia .l, .preco-lado .l { color: var(--tinta-fraca); }

/* ═══════════════════════════════════════════════════════════════════════════
   v2 — ir agora nas fontes, a agenda, e o bloco "No site oficial"

   Mesma pele do sistema: cartão branco, canto 14, borda slate-200, sombra
   leve, azul só no que é ação, nada em caixa alta.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── o botão "Buscar novidades nas fontes" ────────────────────────────────── */

.botao.buscar {
  flex-direction: row; align-items: center; gap: 8px;
  max-width: none; white-space: nowrap;
  padding: 10px 16px;
}
.botao.buscar .icone { width: 15px; height: 15px; flex: none; }
.botao.buscar.ocupado { background: var(--azul-fundo); border-color: var(--azul-claro); color: #1d4ed8; }
.botao.buscar.ocupado .icone { animation: girando 1.1s linear infinite; }
.botao.buscar:disabled { opacity: 1; cursor: progress; }
.botao.buscar.ocupado:disabled { background: var(--azul-fundo); border-color: var(--azul-claro); color: #1d4ed8; }
@keyframes girando { to { transform: rotate(360deg); } }

/* ── a faixa com o que a busca trouxe ─────────────────────────────────────── */

.faixa-busca {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--azul);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 14px 18px;
  margin: 0 0 16px;
  font-size: 13.5px; color: var(--tinta-media);
}
.faixa-busca b { display: block; font-size: 15px; font-weight: 650; color: var(--tinta); margin-bottom: 2px; }
.faixa-busca > span { display: block; color: var(--tinta-fraca); font-size: 12.5px; }

.faixa-busca.procurando { border-left-color: var(--azul); background: var(--azul-fundo); border-color: var(--azul-claro); }
.faixa-busca.procurando b { color: #1e3a8a; }
.faixa-busca.procurando > span { color: #1d4ed8; }
.faixa-busca.achou { border-left-color: var(--verde); }
.faixa-busca.achou b { color: #14532d; }
.faixa-busca.quieta { border-left-color: var(--borda-forte); }
.faixa-busca.quieta b { color: var(--tinta-media); }
.faixa-busca.ocupado { border-left-color: var(--ambar); background: var(--ambar-fundo); border-color: #fde68a; }
.faixa-busca.ocupado b { color: #92400e; }
.faixa-busca.ocupado > span { color: #b45309; }
.faixa-busca.grave { border-left-color: var(--vermelho); background: #fef2f2; border-color: #fecaca; }
.faixa-busca.grave b { color: #991b1b; }
.faixa-busca.grave > span { color: #b91c1c; }

/* o fio que anda enquanto ele procura — só para não parecer travado */
.faixa-busca .fio {
  margin-top: 10px; height: 3px; border-radius: 999px;
  background: var(--azul-claro); overflow: hidden;
}
.faixa-busca .fio i {
  display: block; height: 100%; width: 34%; border-radius: 999px;
  background: var(--azul);
  animation: fio-anda 1.4s ease-in-out infinite;
}
@keyframes fio-anda {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

.faixa-busca .achados { margin-top: 10px; }
.faixa-busca .achados .rot {
  display: block; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-fraca); margin-bottom: 3px;
}
.faixa-busca .achados ul { list-style: none; margin: 0 0 4px; padding: 0; }
.faixa-busca .achados li { font-size: 12.5px; color: var(--tinta-media); padding: 2px 0; }
.faixa-busca .achados li b { display: inline; font-size: 12.5px; font-weight: 600; color: var(--tinta); }
.faixa-busca .achados li .de {
  display: inline-block; background: var(--borda-suave); border-radius: 999px;
  padding: 1px 8px; font-size: 10.5px; color: var(--tinta-fraca); vertical-align: 1px;
}
.faixa-busca .achados li.mais { color: var(--tinta-fraca); }

/* ── as etiquetas da linha: "no site" e "mudou hoje" ──────────────────────── */

.marca-nosite {
  display: inline-block; vertical-align: 1px; margin-left: 7px;
  background: var(--verde-claro); color: #15803d;
  border-radius: 999px; padding: 2px 9px 2px 21px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2315803d%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%222%22%20y1%3D%2212%22%20x2%3D%2222%22%20y2%3D%2212%22%2F%3E%3Cpath%20d%3D%22M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-position: 7px center; background-size: 10px 10px;
}
.marca-mudou {
  display: inline-block; vertical-align: 1px; margin-left: 6px;
  background: var(--ambar-fundo); color: #b45309; border: 1px solid #fde68a;
  border-radius: 999px; padding: 1px 9px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}

/* ── a linha da agenda, no rodapé ─────────────────────────────────────────── */

.linha-agenda {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 13px 16px; margin-top: 14px;
  font-size: 13px; color: var(--tinta-media);
}
.linha-agenda .relogio {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: var(--azul-claro) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232563eb%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22%2F%3E%3C%2Fsvg%3E") center/14px 14px no-repeat;
}
.linha-agenda.parada { border-left: 3px solid var(--borda-forte); }
.linha-agenda.parada .relogio { background-color: var(--borda-suave); }

/* ── tela 2: o bloco "No site oficial" ────────────────────────────────────── */

.caixa-site {
  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: 18px 20px; margin-top: 12px;
}
.caixa-site.no-site { border-left-color: var(--verde); }
.caixa-site.pode { border-left-color: var(--azul); }
.caixa-site.travada { border-left-color: var(--ambar); }

.site-estado { display: flex; align-items: flex-start; gap: 12px; }
.site-estado .quadro {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: var(--borda-suave) center/22px 22px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2364748b%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.94%2017.94A10.07%2010.07%200%200%201%2012%2020c-7%200-11-8-11-8a18.45%2018.45%200%200%201%205.06-5.94M9.9%204.24A9.12%209.12%200%200%201%2012%204c7%200%2011%208%2011%208a18.5%2018.5%200%200%201-2.16%203.19m-6.72-1.07a3%203%200%201%201-4.24-4.24%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%221%22%20x2%3D%2223%22%20y2%3D%2223%22%2F%3E%3C%2Fsvg%3E");
}
.caixa-site.no-site .site-estado .quadro {
  background-color: var(--verde-claro);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2315803d%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%222%22%20y1%3D%2212%22%20x2%3D%2222%22%20y2%3D%2212%22%2F%3E%3Cpath%20d%3D%22M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10z%22%2F%3E%3C%2Fsvg%3E");
}
.site-estado h3 { margin: 0; font-size: 17px; font-weight: 650; color: var(--tinta); letter-spacing: -.01em; }
.site-estado p { margin: 3px 0 0; font-size: 13px; color: var(--tinta-media); max-width: 74ch; }
.site-estado .endereco-site {
  display: inline-block; margin-top: 6px; font-size: 12.5px;
  font-family: var(--mono); color: var(--azul); word-break: break-all;
}

.site-falta {
  background: var(--ambar-fundo); border: 1px solid #fde68a; border-left: 3px solid var(--ambar);
  border-radius: var(--raio); padding: 12px 15px; margin-top: 14px;
}
.site-falta .rot {
  display: block; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: #b45309; margin-bottom: 5px;
}
.site-falta ul { margin: 0; padding-left: 18px; }
.site-falta li { font-size: 13px; color: #92400e; margin-bottom: 3px; }
.site-falta li.resolvido { color: #15803d; text-decoration: line-through; }

/* os campos que a pessoa preenche aqui mesmo (cidade, bairro… do Drive) */
.completar {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--branco); padding: 14px 15px; margin-top: 12px;
}
.completar .rot {
  display: block; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-fraca); margin-bottom: 3px;
}
.completar .explica { font-size: 12.5px; color: var(--tinta-media); margin: 0 0 10px; }
.completar .grade { display: flex; flex-wrap: wrap; gap: 10px; }
.completar label {
  display: block; flex: 1 1 180px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-fraca);
}
.completar input {
  display: block; width: 100%; margin-top: 5px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--tinta);
}
.completar input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fundo); }
.completar input.faltando { border-color: var(--ambar); background: var(--ambar-fundo); }
.completar .so-vazio { margin: 10px 0 0; font-size: 12px; color: var(--tinta-fraca); }

.site-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-top: 16px; }
.botao.tirar { background: var(--branco); border-color: #fecaca; color: #b91c1c; box-shadow: none; }
.botao.tirar:hover:not(:disabled) { background: #fef2f2; border-color: var(--vermelho); color: #991b1b; }

/* ── o interruptor "deixar ele atualizar sozinho" ─────────────────────────── */

.interruptor {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--branco); padding: 13px 15px; margin-top: 16px;
  cursor: pointer;
}
.interruptor:hover { background: #fafcff; }
.interruptor.ligado { border-color: var(--azul-claro); background: var(--azul-fundo); }
.interruptor.travado { cursor: not-allowed; background: var(--borda-suave); opacity: .8; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor .trilha {
  position: relative; flex: none; margin-top: 2px;
  width: 40px; height: 22px; border-radius: 999px;
  background: #cbd5e1; transition: background .15s ease;
}
.interruptor .trilha i {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .3);
  transition: transform .15s ease;
}
.interruptor.ligado .trilha { background: var(--azul); }
.interruptor.ligado .trilha i { transform: translateX(18px); }
.interruptor input:focus-visible + .trilha { box-shadow: 0 0 0 3px var(--azul-fundo); }
.interruptor .texto b { display: block; font-size: 13.5px; font-weight: 650; color: var(--tinta); }
.interruptor .texto small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--tinta-media); line-height: 1.5; }
.interruptor .texto .continua { display: block; margin-top: 4px; font-size: 12px; color: var(--tinta-fraca); }

/* o selo "no site" no alto da ficha do empreendimento */
.selo.no-site { background: var(--verde-claro); color: #15803d; }
.selo.fora-do-site { background: var(--borda-suave); color: var(--tinta-fraca); }

/* recibo azul: a ação do site não é uma decisão da esteira, é um clique seu */
.recibo.site { background: var(--azul-fundo); border-color: var(--azul-claro); border-left-color: var(--azul); color: #1e3a8a; }
.recibo.site h4 { color: #1d4ed8; }
.recibo.saiu { background: var(--borda-suave); border-color: var(--borda); border-left-color: var(--borda-forte); color: var(--tinta-media); }
.recibo.saiu h4 { color: var(--tinta-fraca); }

@media (max-width: 780px) {
  .botao.buscar { width: 100%; justify-content: center; }
  .filtros-linha #recarregar { flex: 1 1 auto; }
  .marca-nosite, .marca-mudou { margin-left: 0; margin-right: 6px; margin-top: 4px; }
  .site-acoes .botao { width: 100%; max-width: none; }
}

/* ── acabamento v2 ────────────────────────────────────────────────────────── */

/* O `small` do botão explica o que o clique faz. Em botão azul ele estava
   saindo âmbar sobre azul — ilegível. Âmbar é a cor de "está travado, olha o
   porquê"; em botão cheio e habilitado o texto é branco. */
.botao small { color: rgba(255, 255, 255, .82); }
.botao:disabled small { color: #b45309; }
.botao.fantasma small, .botao.anota small { color: var(--tinta-fraca); }
.botao.tirar small { color: #b91c1c; }
.botao.tirar:disabled small { color: #b45309; }

/* botão de publicar/tirar com presença — não um botãozinho perdido no cartão */
.site-acoes .botao { min-width: 250px; }

/* O histórico vinha com a ação e o resultado grudados ("confirmouentrou na
   base"): cada pedaço é uma linha. */
.historico li { display: block; border-left: 3px solid var(--borda-forte); }
.historico .quando { display: block; margin-bottom: 3px; }
.historico .acao { display: block; font-weight: 600; color: var(--tinta); font-size: 13.5px; }
.historico .acao small {
  display: block; margin-top: 1px;
  font-size: 11.5px; font-weight: 400; color: var(--tinta-fraca);
}
.historico .nota { display: block; margin-top: 5px; color: var(--tinta-media); font-style: italic; }
.historico li.confirmar { border-left-color: var(--azul); }
.historico li.publicar { border-left-color: var(--verde); }
.historico li.despublicar { border-left-color: var(--borda-forte); }
.historico li.automacao { border-left-color: var(--roxo); }
.historico li.mais_info, .historico li.nao_mexer { border-left-color: var(--ambar); }

/* o botãozinho segue o checkbox na hora — enquanto o servidor responde, ele
   não fica parado no lugar antigo */
.interruptor input:checked + .trilha { background: var(--azul); }
.interruptor input:checked + .trilha i { transform: translateX(18px); }
.interruptor input:disabled + .trilha { background: #cbd5e1; }

/* O `lista.css` esconde a 3ª e a 4ª coluna no celular — regra feita para a
   OUTRA tabela. Aqui elas são "onde" e "estoque": no cartão do celular, sem
   elas a pessoa não sabe nem em que cidade fica nem quanto sobrou. */
@media (max-width: 780px) {
  .tabela-fontes td.onde,
  .tabela-fontes td:nth-child(4) { display: block; }
  /* no cartão do celular tudo é linha: número à direita fica solto */
  .tabela-fontes td.num { text-align: left; }
}

/* ── três rótulos, não um (25/ago) ─────────────────────────────────────────
   Preencher vazio, trocar valor curado e esperar você eram a mesma pílula
   verde "ele traria". Verde = acontece ao confirmar; azul = só se você marcar;
   âmbar = esperando você; cinza = ele não mexe. */
.gaveta-selo.preenche, .gaveta-selo.traria { background: var(--verde-claro); color: #15803d; }
.gaveta-selo.troca { background: var(--azul-claro); color: #1d4ed8; }
.lado-a-lado td small.onde-vai {
  display: block; margin-top: 4px; font-size: 11px; color: var(--tinta-fraca);
}
.lado-a-lado tr.troca td.campo { box-shadow: inset 3px 0 0 var(--azul); }
.lado-a-lado tr.preenche td.campo { box-shadow: inset 3px 0 0 var(--verde); }

/* o resumo honesto do topo da tabela: "se você confirmar agora, muda N coisas".
   Sai do mesmo `lado_a_lado` que monta as linhas — nunca somado na tela. */
.lado-resumo {
  background: var(--azul-fundo); border: 1px solid var(--azul-claro);
  border-left: 3px solid var(--azul); border-radius: var(--raio-g);
  padding: 12px 15px; margin-bottom: 12px;
}
.lado-resumo.quieto { background: var(--borda-suave); border-color: var(--borda); border-left-color: var(--borda-forte); }
.lado-resumo b { display: block; font-size: 13.5px; font-weight: 650; color: #1e3a8a; line-height: 1.5; }
.lado-resumo.quieto b { color: var(--tinta-media); }
.lado-resumo span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--tinta-media); }

/* de quem é o número: sem isto, "4 plantas" no alto e "6 plantas" embaixo eram
   dois números do mesmo nome sem dono */
.selo.da-fonte { background: var(--roxo-claro); color: #6d28d9; }
.selo.da-base { background: var(--verde-claro); color: #15803d; }

/* o portão da automação, dito na cara do interruptor */
.interruptor .texto .portao {
  display: inline-block; margin-top: 4px; border-radius: 999px; padding: 2px 9px;
  font-size: 11px; font-weight: 600;
}
.interruptor .texto .portao.fechado { background: var(--ambar-claro); color: #b45309; }
.interruptor .texto .portao.aberto { background: var(--verde-claro); color: #15803d; }
.interruptor.so-avisa { border-color: #fde68a; background: var(--ambar-fundo); }
.interruptor.so-avisa.ligado { border-color: var(--ambar); }