/* Gás Saint Germain — mobile-first, no padrão visual dos apps da GR. */
:root {
  --bg: #f2f5f7;
  --cartao: #fff;
  --texto: #16222c;
  --fraco: #5d7183;
  --borda: #d9e2e9;
  --marca: #0e7490;
  --marca-esc: #0b5f76;
  --chama: #d97706;
  --verde: #12855f;
  --verde-fundo: #e5f4ee;
  --vermelho: #cf3040;
  --amarelo-fundo: #fdf3e0;
  --raio: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f161d; --cartao: #18222c; --texto: #e7edf3; --fraco: #93a3b4;
    --borda: #273744; --marca: #0d4a5c; --marca-esc: #22a9c4;
    --chama: #fbbf24; --verde: #34d399; --verde-fundo: #12302a;
    --vermelho: #f87171; --amarelo-fundo: #37301c;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 3.5rem;
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------ topo */
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .7rem 1rem; background: var(--marca); color: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,.18);
}
.marca { font-weight: 700; font-size: 1.05rem; color: #fff; text-decoration: none; }
.topo nav { display: flex; gap: .35rem; margin-left: auto; order: 3; width: 100%; }
.topo nav a {
  flex: 1; text-align: center; padding: .5rem .6rem; border-radius: 999px;
  color: #fff; text-decoration: none; font-size: .95rem;
  background: rgba(255,255,255,.14);
}
.topo nav a.atual { background: #fff; color: var(--marca-esc); font-weight: 700; }
.quem { font-size: .8rem; opacity: .92; margin-left: auto; }
.quem a { color: #fff; }
@media (min-width: 620px) {
  .topo nav { order: 0; width: auto; margin-left: 1rem; }
  .quem { margin-left: auto; }
}

main { max-width: 900px; margin: 0 auto; padding: 1rem; }

/* ------------------------------------------------------------ textos e avisos */
h1 { margin: .2rem 0 .1rem; font-size: 1.45rem; }
.resumo { margin: 0; color: var(--fraco); font-size: .92rem; }
.aviso {
  padding: .75rem .9rem; border-radius: 10px; margin: 0 0 1rem; font-size: .95rem;
  border-left: 4px solid var(--marca); background: var(--cartao); color: var(--texto);
}
.aviso.erro { border-left-color: var(--vermelho); }
.aviso.ok { border-left-color: var(--verde); }
.aviso.atencao { border-left-color: var(--chama); background: var(--amarelo-fundo); }
.vazio {
  background: var(--cartao); border: 1px dashed var(--borda);
  border-radius: var(--raio); padding: 1.5rem; text-align: center; color: var(--fraco);
}
.verde { color: var(--verde); } .vermelho { color: var(--vermelho); } .cinza { color: var(--fraco); }

/* ------------------------------------------------------------ botões e campos */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 0; border-radius: 10px; cursor: pointer;
  padding: .62rem 1rem; font: inherit; font-size: .95rem; font-weight: 600;
  background: var(--borda); color: var(--texto); text-decoration: none;
  min-height: 44px;
}
.botao.ok { background: var(--marca); color: #fff; }
.botao.confirmar { background: var(--verde); color: #fff; }
.botao.fraco { background: transparent; color: var(--fraco); border: 1px solid var(--borda); }
.botao.perigo { background: transparent; color: var(--vermelho); border: 1px solid var(--vermelho); }
.botao.pequeno { padding: .4rem .7rem; font-size: .85rem; min-height: 36px; }
.botao.gigante { width: 100%; font-size: 1.2rem; padding: 1rem; border-radius: 16px; min-height: 68px; }
.botao:active { transform: translateY(1px); }
input, select, textarea {
  font: inherit; padding: .55rem .6rem; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--cartao); color: var(--texto);
  min-height: 44px; max-width: 100%; width: 100%;
}
textarea { min-height: 7rem; }
.rotulo { display: grid; gap: .3rem; font-size: .9rem; color: var(--fraco); }
.pilha { display: grid; gap: .6rem; }

/* ------------------------------------------------------------ mês + progresso */
.cabeca-mes { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.cabeca-mes > div { flex: 1; text-align: center; }
.mes-nav {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda); background: var(--cartao); color: var(--texto);
  border-radius: 10px; font-size: 1.1rem; width: 46px; height: 46px;
  text-decoration: none;
}
.mes-nav.off { opacity: .35; }
.barra {
  height: 8px; border-radius: 999px; background: var(--borda);
  overflow: hidden; margin: .4rem 0 1rem;
}
.barra > div { height: 100%; background: var(--verde); border-radius: 999px; }

/* ------------------------------------------------------------ grade de aptos */
.grade-aptos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
@media (max-width: 380px) { .grade-aptos { grid-template-columns: repeat(2, 1fr); } }
.apto-bt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  min-height: 66px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--cartao); color: var(--texto);
  font-size: 1.2rem; font-weight: 700; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.apto-bt small { font-size: .7rem; font-weight: 600; color: var(--fraco); }
.apto-bt.feito { border-color: var(--verde); background: var(--verde-fundo); }
.apto-bt.feito small { color: var(--verde); }
.legenda { margin-top: .9rem; font-size: .85rem; color: var(--fraco); display: flex; gap: 1.2rem; }
.leg { display: inline-block; width: 14px; height: 14px; border-radius: 4px;
       border: 1px solid var(--borda); background: var(--cartao); vertical-align: -2px; margin-right: .3rem; }
.leg.feito { border-color: var(--verde); background: var(--verde-fundo); }

/* ------------------------------------------------------------ tela do apartamento */
.voltar {
  display: inline-block; color: var(--marca-esc); font-weight: 700;
  font-size: 1rem; text-decoration: none; padding: .3rem .3rem .3rem 0; margin-bottom: .3rem;
}
.cartao {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1rem; margin-bottom: .8rem;
}
.cartao.centro { text-align: center; }
.foto-prev { width: 100%; max-width: 420px; border-radius: 10px; display: block; margin: 0 auto .8rem; }

/* odômetro: desenhado como o relógio de verdade — pretos, vírgula, vermelhos */
.odo {
  display: inline-flex; align-items: center; gap: 3px;
  background: #101418; padding: .55rem .65rem; border-radius: 12px; margin: .4rem auto;
}
.odo .dg {
  background: #1d252e; color: #fff; border-radius: 5px;
  font: 700 2rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
  padding: .4rem .3rem; min-width: 2rem; text-align: center;
}
.odo .dg.vm { background: #b91c1c; }
.odo .virg { color: #fff; font-size: 1.7rem; font-weight: 700; align-self: flex-end; padding: 0 1px .1rem; }
.odo-m3 { font-size: 1rem; color: var(--fraco); margin-top: .2rem; }
.consumo-previa { font-size: 1.15rem; margin: .6rem 0; font-weight: 600; }
.consumo-previa b { font-size: 1.5rem; color: var(--marca-esc); }

.girando {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--borda); border-top-color: var(--marca-esc);
  animation: girar 1s linear infinite; vertical-align: -5px; margin-right: .4rem;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 2.5s; } }

/* ------------------------------------------------------------ consumo */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .9rem; }
.tile {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: .7rem .6rem; text-align: center;
}
.tile b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tile span { font-size: .74rem; color: var(--fraco); text-transform: uppercase; letter-spacing: .04em; }
.exportar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rolagem { overflow-x: auto; background: var(--cartao); border: 1px solid var(--borda);
           border-radius: var(--raio); margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
  text-align: right; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fraco); padding: .5rem .6rem; border-bottom: 1px solid var(--borda); white-space: nowrap;
}
th:first-child { text-align: left; }
td { padding: .55rem .6rem; border-bottom: 1px solid var(--borda); text-align: right;
     font-variant-numeric: tabular-nums; white-space: nowrap; }
td:first-child { text-align: left; font-weight: 700; }
td small { display: block; color: var(--fraco); font-size: .72rem; font-weight: 400; }
tr.sem td { color: var(--fraco); }
tr.tem { cursor: pointer; }
tr.total td { font-weight: 700; border-bottom: 0; background: var(--verde-fundo); }
@media (max-width: 460px) { table { font-size: .84rem; } th, td { padding: .45rem .45rem; } }

/* ------------------------------------------------------------ atas */
.busca-linha { display: flex; gap: .5rem; margin-bottom: .8rem; flex-wrap: wrap; }
.busca-linha input { flex: 1; min-width: 12rem; }
.ata {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); margin-bottom: .7rem; overflow: hidden;
}
.ata > summary {
  cursor: pointer; padding: .85rem .9rem; display: flex; align-items: center;
  gap: .5rem; flex-wrap: wrap; list-style: none;
}
.ata > summary::-webkit-details-marker { display: none; }
.ata > summary::before { content: "▸"; color: var(--fraco); transition: transform .15s; }
.ata[open] > summary::before { transform: rotate(90deg); }
.ata .quando { margin-left: auto; color: var(--fraco); font-size: .82rem; }
.ata .corpo { padding: 0 .9rem .9rem; }
.ata pre {
  white-space: pre-wrap; word-break: break-word; font: .9rem/1.5 inherit;
  margin: 0 0 .6rem; max-height: 40vh; overflow-y: auto;
}
mark { background: var(--chama); color: #16222c; border-radius: 3px; padding: 0 2px; }
.trecho { font-size: .88rem; color: var(--fraco); margin: .3rem 0 0; white-space: normal; }
.resposta-ia {
  white-space: pre-wrap; background: var(--cartao); border-left: 4px solid var(--marca-esc);
  border-radius: 10px; padding: .8rem .9rem; margin-bottom: 1rem; font-size: .95rem;
}
.grade-form { display: grid; gap: .6rem; padding-top: .6rem; }
.grade-form label { display: grid; gap: .3rem; font-size: .85rem; color: var(--fraco); }

/* ------------------------------------------------------------ login */
.tela-login { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.cartao-login {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.6rem; width: min(380px, 100%); display: grid; gap: .9rem;
}
.cartao-login h1 { margin: 0; font-size: 1.4rem; text-align: center; }
.cartao-login label { display: grid; gap: .3rem; font-size: .85rem; color: var(--fraco); }