/* =====================================================================
   App do cliente — celular primeiro.
   Cores da casa (web/base.css): tinta, papel, marca e o sage do logo.
   Sem fonte da internet: a do próprio aparelho.
   ===================================================================== */
:root {
  --tinta: #16202B;
  --papel: #F4F5F2;
  --branco: #FFFFFF;
  --linha: #E4E6E1;
  --texto: #182230;
  --texto-2: #57646F;
  --texto-3: #8B959E;
  --marca: #A22431;
  --sage: #C5C4B5;
  --verde: #1F7A4D;
  --ambar: #B7791F;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(24,34,48,.06), 0 4px 16px rgba(24,34,48,.05);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dado: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fonte);
  background: var(--papel);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}
[hidden] { display: none !important; }

button { font: inherit; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--tinta); color: #fff;
}
.topo__logo { width: 36px; height: 36px; border-radius: 9px; }
.topo__txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.topo__txt span { font-size: 13px; opacity: .75; }
.topo__sair {
  margin-left: auto; background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  padding: 6px 14px; font-size: 14px;
}

.faixa-teste {
  background: #FFF4DB; color: #6B4A0C; border-bottom: 1px solid #F0D9A8;
  font-size: 13px; text-align: center; padding: 6px 12px;
}

/* ---------- miolo ---------- */
.tela { max-width: 560px; margin: 0 auto; padding: 16px; }
.carregando { color: var(--texto-2); text-align: center; padding: 40px 0; }
.titulo { font-size: 20px; margin: 4px 0 14px; }
.sub { color: var(--texto-2); margin: -8px 0 16px; font-size: 14px; }

.cartao {
  background: var(--branco); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 16px; margin-bottom: 12px;
}

/* ---------- lista de faturas ---------- */
.fatura {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  width: 100%; text-align: left; border: 0; cursor: pointer;
  background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px; margin-bottom: 12px; color: inherit;
}
.fatura:active { transform: scale(.99); }
.fatura__mes { font-weight: 650; }
.fatura__valor { font-weight: 700; font-size: 18px; text-align: right; }
.fatura__venc { color: var(--texto-2); font-size: 14px; }
.fatura__selo { justify-self: end; }
.fatura__nota { grid-column: 1 / -1; color: var(--texto-2); font-size: 13px; }

.selo {
  display: inline-block; font-size: 12px; font-weight: 650; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px; background: #EEF0EC; color: var(--texto-2);
  text-transform: uppercase;
}
.selo--ok { background: #E3F2EA; color: var(--verde); }
.selo--aviso { background: #FBF0DC; color: #8A5A12; }
.selo--erro { background: #F8E3E5; color: var(--marca); }

/* ---------- uma fatura ---------- */
.voltar {
  background: none; border: 0; color: var(--marca); padding: 4px 0 12px;
  font-weight: 600; cursor: pointer;
}
.cabeca { text-align: center; }
.cabeca__mes { color: var(--texto-2); }
.cabeca__valor { font-size: 34px; font-weight: 750; margin: 2px 0; }
.cabeca__venc { color: var(--texto-2); font-size: 14px; margin-bottom: 8px; }

.pagar h2, .partes h2 { font-size: 15px; margin: 0 0 10px; }
.codigo {
  font-family: var(--dado); font-size: 14px; word-break: break-all;
  background: var(--papel); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
.btn {
  display: block; width: 100%; border: 0; border-radius: 12px;
  padding: 14px; font-weight: 650; font-size: 16px; cursor: pointer;
  background: var(--marca); color: #fff;
}
.btn + .btn { margin-top: 8px; }
.btn--claro { background: var(--papel); color: var(--tinta); }
.nota { color: var(--texto-2); font-size: 14px; margin: 0; }
.pagar .nota + .btn { margin-top: 12px; }
.nota--aviso {
  background: #FBF0DC; color: #6B4A0C; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 10px;
}

.linhas { list-style: none; margin: 0; padding: 0; }
.linhas li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 10px 0; border-top: 1px solid var(--linha);
}
.linhas li:first-child { border-top: 0; }
.linhas small { color: var(--texto-2); font-size: 13px; grid-column: 1; }
.linhas .v { font-weight: 600; text-align: right; }
.linhas .s { justify-self: end; font-size: 12px; color: var(--texto-3); }
.linhas .s--paga { color: var(--verde); }
.total {
  display: flex; justify-content: space-between; font-weight: 750; font-size: 17px;
  border-top: 2px solid var(--tinta); margin-top: 6px; padding-top: 10px;
}

/* ---------- avisos ---------- */
.avisos h2 { font-size: 15px; margin: 0 0 6px; }
.avisos .nota + .btn { margin-top: 12px; }
.avisos--ok { display: flex; flex-direction: column; gap: 10px; }
.avisos__ok { margin: 0; color: var(--verde); font-weight: 600; }

/* ---------- entrada ---------- */
.campo label { display: block; font-weight: 600; margin-bottom: 6px; }
.campo input {
  width: 100%; font: inherit; font-size: 20px; padding: 12px 14px;
  border: 1px solid #CDD2C9; border-radius: 12px; background: #fff; margin-bottom: 12px;
}
.erro { color: var(--marca); font-size: 14px; margin: 0 0 10px; }
.nota--pe { margin-top: 12px; text-align: center; font-size: 13px; }
.btn:disabled { opacity: .6; }

/* ---------- avisos ---------- */
.vazio { text-align: center; color: var(--texto-2); padding: 32px 8px; }
.aviso {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%); background: var(--tinta); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: 14px; z-index: 10;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .fatura:active { transform: none; }
}