/* Houselog -- casca. Visual claro e didatico, na direcao que a ZFX adotou em 2026:
   o vistoriador usa isto em pe, com uma mao, as vezes no sol. Contraste alto e alvo de
   toque grande valem mais que sofisticacao. */

:root {
  --fundo: #f6f7f5;
  --papel: #ffffff;
  --tinta: #16211f;
  --tinta-fraca: #5d6b68;
  --linha: #dfe4e0;
  --acento: #0f5c4e;
  --acento-claro: #e4f1ec;
  --ok: #157f5c;
  --espera: #9a6b12;
  --alerta: #a3341f;
  --raio: 12px;
  --sombra: 0 1px 2px rgb(22 33 31 / 6%), 0 8px 24px rgb(22 33 31 / 5%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-text-size-adjust: 100%;
}

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: var(--acento); color: #fff;
  position: sticky; top: 0; z-index: 10;
  padding-top: max(10px, env(safe-area-inset-top));
}
.marca { display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: -0.01em; }
.logo { width: 26px; height: 26px; flex: none; }
.topo-dir { display: flex; align-items: center; gap: 10px; min-width: 0; }

#seletor select {
  font: inherit; font-size: 14px; max-width: 46vw;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 35%);
  background: rgb(255 255 255 / 12%); color: #fff;
}
#seletor select option { color: var(--tinta); }

/* ---------- indicador de copia local (modelo Construct 3) ----------
   Estado permanente e visivel. Em campo, saber se a copia local esta pronta ANTES de
   entrar no imovel e a diferenca entre trabalhar e perder a viagem. */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  background: rgb(255 255 255 / 14%); color: #fff;
}
.ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pill-pronto  { background: #d8f0e4; color: #0c5440; }
.pill-espera  { background: #fbeccd; color: #7a5207; }
.pill-fila    { background: #fde3d5; color: #8b2b14; }
.pill-espera .ponto { animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: 0.25; } }

/* ---------- conteudo ---------- */
.conteudo { max-width: 920px; margin: 0 auto; padding: 24px 16px 48px; }
.carregando { color: var(--tinta-fraca); }

h1 { font-size: 1.5rem; margin: 0 0 4px; letter-spacing: -0.015em; }
.sub { color: var(--tinta-fraca); margin: 0 0 24px; }

.cartao {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra);
  margin-bottom: 16px;
}
.cartao h2 { font-size: 1.05rem; margin: 0 0 10px; }

.grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tile { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.tile .n { font-size: 1.6rem; font-weight: 680; letter-spacing: -0.02em; display: block; }
.tile .r { font-size: 13px; color: var(--tinta-fraca); }

dl.campos { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14.5px; }
dl.campos dt { color: var(--tinta-fraca); }
dl.campos dd { margin: 0; font-weight: 550; }

.etiqueta {
  display: inline-block; font-size: 12px; font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 3px 8px; border-radius: 6px;
  background: var(--acento-claro); color: var(--acento);
}

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
  /* 44px de altura minima: alvo de toque de quem esta de pe segurando o celular. */
  min-height: 44px; padding: 10px 18px;
  border-radius: 10px; border: 1px solid var(--acento);
  background: var(--acento); color: #fff; text-decoration: none;
}
.botao.secundario { background: var(--papel); color: var(--acento); }

ul.lista { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
ul.lista li { padding: 9px 0; border-top: 1px solid var(--linha); display: flex; justify-content: space-between; gap: 12px; }
ul.lista li:first-child { border-top: 0; }
ul.lista .fraco { color: var(--tinta-fraca); }

.aviso { border-left: 3px solid var(--espera); background: #fffaf0; }

.pe { max-width: 920px; margin: 0 auto; padding: 0 16px 32px; font-size: 13px; color: var(--tinta-fraca); }
.pe a { color: var(--tinta-fraca); }

@media (max-width: 480px) {
  .conteudo { padding-top: 18px; }
  #seletor select { max-width: 34vw; }
  /* O rotulo do indicador NAO some no celular: o celular e justamente o aparelho de
     quem vai a campo, e e ali que saber se a copia local esta pronta decide se a
     pessoa entra no imovel ou volta. Encolhe a fonte, nao a informacao. */
  .pill { font-size: 12px; padding: 5px 9px 5px 8px; }
}

/* Tema escuro: respeitado por preferencia do sistema. A conta tem campo de tema no
   banco (usuarios.tema) para a escolha explicita entrar junto com as telas de conta. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #111614; --papel: #19201e; --tinta: #e7ecea; --tinta-fraca: #9aa8a4;
    --linha: #2b3431; --acento: #2f9478; --acento-claro: #1b302a;
    --sombra: 0 1px 2px rgb(0 0 0 / 30%);
  }
  :root:not([data-tema="claro"]) .aviso { background: #241f14; }
}

/* ===================== telas ===================== */

.menu { display:flex; gap:4px; margin-left:auto; }
.menu a {
  color:#fff; text-decoration:none; font-size:14px; font-weight:600;
  padding:6px 12px; border-radius:8px; opacity:.85;
}
.menu a:hover { background:rgb(255 255 255 / 14%); opacity:1; }
.topo-dir { margin-left:12px; }
.marca { color:inherit; text-decoration:none; }
button.pill { border:0; cursor:default; font-family:inherit; }
button.pill.pill-fila { cursor:pointer; }

.linha-titulo { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.acoes { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.acoes.fim { justify-content:flex-end; margin-top:18px; }
.voltar { margin:0 0 10px; font-size:14px; }
.voltar a { color:var(--tinta-fraca); text-decoration:none; }

.campo {
  font:inherit; width:100%; padding:10px 12px; min-height:44px;
  border:1px solid var(--linha); border-radius:10px;
  background:var(--papel); color:var(--tinta);
}
label { display:block; font-size:13.5px; color:var(--tinta-fraca); margin-bottom:10px; }
label .campo { margin-top:4px; }
.dois { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

ul.lista li a { color:inherit; text-decoration:none; display:flex; flex-direction:column; }
ul.lista li a:hover strong { color:var(--acento); text-decoration:underline; }
ul.lista .fraco { font-size:13px; font-weight:400; }

.tag {
  display:inline-block; font-size:12px; font-weight:650; padding:3px 9px;
  border-radius:999px; background:var(--acento-claro); color:var(--acento); white-space:nowrap;
}
.tag.ok { background:#d8f0e4; color:#0c5440; }
.tag.atencao { background:#fbeccd; color:#7a5207; }
.tag.ruim { background:#fde3d5; color:#8b2b14; }
.alerta-tile { border-color:#e8b9a7; }

/* ---------- timeline: a espinha do produto ---------- */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { display:grid; grid-template-columns:86px 1fr; gap:14px; padding:0 0 18px; position:relative; }
.timeline li::before {
  content:''; position:absolute; left:92px; top:20px; bottom:0; width:2px; background:var(--linha);
}
.timeline li:last-child::before { display:none; }
.timeline .quando { font-size:13px; color:var(--tinta-fraca); text-align:right; padding-top:1px; }
.timeline .oque { position:relative; padding-left:18px; }
.timeline .oque::before {
  content:''; position:absolute; left:-5px; top:6px; width:11px; height:11px;
  border-radius:50%; background:var(--acento); border:2px solid var(--papel);
}
/* Intervencao (reforma, manutencao) marcada: e ela que desloca a linha de base. */
.timeline li.intervencao .oque::before { background:#b4820f; }
.timeline .oque strong { display:block; }
.timeline .oque .fraco { display:block; font-size:13px; color:var(--tinta-fraca); }
.timeline .acoes-linha { display:block; font-size:13px; margin-top:4px; }
.timeline .acoes-linha a { color:var(--acento); }

/* ---------- captura em campo ---------- */
.item { padding:12px 0; border-top:1px solid var(--linha); }
.item:first-of-type { border-top:0; }
.item-topo { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.item-nome { font-weight:600; font-size:15px; }
.asterisco { color:var(--alerta); margin-left:3px; }
.foto-btn {
  margin:0; cursor:pointer; font-size:20px; line-height:1;
  min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--linha); border-radius:10px; background:var(--papel);
}
.item.tem-foto .foto-btn { border-color:var(--ok); background:var(--acento-claro); }

/* Botoes de estado grandes: o vistoriador usa de pe, com uma mao, as vezes no sol. */
.estados { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 8px; }
.estado {
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  min-height:40px; padding:8px 13px; border-radius:9px;
  border:1px solid var(--linha); background:var(--papel); color:var(--tinta-fraca);
}
.estado.ativo { border-color:var(--acento); background:var(--acento); color:#fff; }
.estado.ativo.atencao { border-color:#b4820f; background:#b4820f; }
.estado.ativo.ruim { border-color:var(--alerta); background:var(--alerta); }
textarea.obs {
  font:inherit; font-size:14px; width:100%; resize:vertical; min-height:40px;
  padding:9px 11px; border:1px solid var(--linha); border-radius:9px;
  background:var(--papel); color:var(--tinta);
}
.medidor {
  font-weight:700; font-size:15px; padding:8px 14px; border-radius:999px;
  background:var(--acento-claro); color:var(--acento);
}

.tabela { width:100%; border-collapse:collapse; font-size:14px; }
.tabela th, .tabela td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--linha); }
.tabela th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--tinta-fraca); }

dialog.modal {
  border:0; border-radius:14px; padding:24px; max-width:460px; width:calc(100% - 32px);
  background:var(--papel); color:var(--tinta); box-shadow:0 24px 64px rgb(0 0 0 / 28%);
}
dialog.modal::backdrop { background:rgb(10 20 18 / 45%); }
dialog.modal h2 { margin:0 0 14px; font-size:1.1rem; }
dialog.modal select[multiple] { min-height:auto; }

#toast {
  position:fixed; left:50%; bottom:-80px; transform:translateX(-50%);
  background:var(--tinta); color:var(--fundo); padding:12px 20px; border-radius:10px;
  font-size:14px; font-weight:600; z-index:50; transition:bottom .25s ease;
  max-width:calc(100% - 32px); text-align:center;
}
#toast.mostra { bottom:24px; }

@media (max-width:620px) {
  .menu a { padding:6px 9px; font-size:13px; }
  .dois { grid-template-columns:1fr; }
  .timeline li { grid-template-columns:68px 1fr; gap:10px; }
  .timeline li::before { left:74px; }
  .tabela { font-size:13px; }
  .tabela th:nth-child(2), .tabela td:nth-child(2) { display:none; }
}

/* Links herdam a cor da marca. Sem isto o azul padrao do navegador aparece sobre o
   fundo escuro com contraste ruim -- foi o que saiu no "Criar conta ZFX" em producao.
   `a:not([class])` de proposito: quem ja tem classe (.botao, .marca) define a propria
   cor, e uma regra generica de link sobrescreveu as duas na primeira tentativa --
   o botao primario ficou com texto verde sobre verde. */
/* Escopo no CONTEUDO, nao no documento: a primeira versao pintou tambem os links do
   menu no cabecalho verde, deixando verde sobre verde. Regra generica de link so vale
   onde o fundo e o do conteudo. */
.conteudo a:not([class]), .pe a:not([class]), dialog.modal a:not([class]) {
  color: var(--acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.conteudo a:not([class]):hover, .pe a:not([class]):hover { text-decoration-thickness: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .conteudo a:not([class]),
  :root:not([data-tema="claro"]) .pe a:not([class]) { color: #5bc2a4; }
}

/* ===================== ERP: conformidade e financeiro ===================== */

.obrigacao { align-items: flex-start; }
.obrigacao > div:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.obrigacao-dir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Botao que parece link: acao secundaria dentro de lista densa, onde um botao cheio
   competiria visualmente com a informacao. */
.link-acao {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: none; border: 0; padding: 4px 2px; color: var(--acento);
  text-decoration: underline; text-underline-offset: 2px;
}
.link-acao:hover { text-decoration-thickness: 2px; }
.botao.pequeno { min-height: 34px; padding: 6px 12px; font-size: 13px; }

/* O medidor muda de cor pelo indice: 100% nao e "muito bom", e o minimo aceitavel. */
.medidor.ok { background: #d8f0e4; color: #0c5440; }
.medidor.atencao { background: #fbeccd; color: #7a5207; }
.medidor.ruim { background: #fde3d5; color: #8b2b14; }

.nota-inline {
  background: var(--acento-claro); color: var(--acento);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; margin: 4px 0 12px;
}
dialog.modal.largo { max-width: 620px; }
dialog.modal h3 { font-size: .95rem; margin: 16px 0 6px; }

.tabela .obs { display: block; font-size: 12px; color: var(--tinta-fraca); }

@media (max-width: 620px) {
  .obrigacao { flex-direction: column; align-items: stretch; gap: 8px; }
  .obrigacao-dir { justify-content: flex-start; }
  /* Na tabela de faturas, esconder competencia e pago antes de deixar rolar na lateral. */
  .tabela th:nth-child(5), .tabela td:nth-child(5) { display: none; }
}