/* Mobile-first. Estilos base valem para celular; @media (min-width: 640px) amplia.
   Linguagem visual: "Petróleo" — verde-azulado profundo (cor de livro-caixa e
   patina), identidade própria em vez do Material Design do Google. Títulos e
   cartões-métrica usam um único acento (a cor da marca) em vez de uma paleta
   decorativa girando por posição — a cor, aqui, marca "isto é um dado", não
   tenta dizer mais que isso. Blocos de dados viram cartões-métrica com
   elevação e um leve movimento de entrada. Superfícies brancas sobre um
   fundo neutro com leve viés esverdeado. Cantos generosos (14px nos cartões,
   8px nos controles), título em Fraunces / texto em Source Sans 3, sombras de
   duas camadas tingidas na tinta da marca. */

:root {
  --paper: #f2f5f3;        /* fundo do aplicativo — neutro com um respiro de verde-petróleo */
  --surface: #ffffff;      /* cartões, tabelas, campos, barra do topo */
  --surface-2: #e9eeec;    /* faixa alternada de tabela, cabeçalho, :hover neutro */
  --ink: #17231f;          /* texto principal — preto com viés petróleo */
  --ink-soft: #4e5e58;     /* texto de apoio */
  --ink-faint: #71847d;    /* rótulos, helptext, th (AA sobre branco) */
  --line: #dce4e1;         /* bordas e divisórias finas */
  --line-strong: #b9c7c2;  /* contorno de campo, divisória de seção */

  --accent: #0d6b63;       /* verde-petróleo — ação, foco, marca */
  --accent-ink: #0a5450;   /* petróleo mais fundo — links, hover de botão, texto sobre wash */
  --accent-wash: #dff0ec;  /* petróleo pálido — realce, :hover de linha, banner */
  --on-accent: #ffffff;    /* texto sobre o petróleo cheio (botão primário) */

  --amber: #e8710a;        /* laranja — aviso intermediário */
  --amber-ink: #b06000;
  --amber-wash: #feefc3;
  --critical: #d93025;     /* vermelho — erro, inadimplência */
  --critical-ink: #c5221f;
  --critical-wash: #fce8e6;
  --ok: #1e8e3e;           /* verde — sucesso, "em dia" */
  --ok-ink: #137333;
  --ok-wash: #e6f4ea;

  --wa-ink: #1fa855;       /* verde WhatsApp — selo "Msg" e ícone de contato */
  --wa-wash: rgba(37, 211, 102, 0.14);

  --focus: #0d6b63;
  /* elevação — sombra de duas camadas tingida na tinta da marca (não cinza neutro) */
  --raise: 0 1px 2px 0 rgba(23, 35, 31, 0.24), 0 1px 3px 1px rgba(23, 35, 31, 0.12);
  --raise-hover: 0 2px 6px 0 rgba(23, 35, 31, 0.24), 0 6px 14px 4px rgba(23, 35, 31, 0.14);
  --radius: 14px;          /* cartões, tabelas, painéis, caixas */
  --radius-sm: 8px;        /* campos, botões, cartões-métrica, avisos */
  --radius-pill: 999px;    /* navegação, busca */
  --tap: 44px;
  color-scheme: light dark;
}

/* ---------- Modo escuro (segue o tema do dispositivo) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1715;
    --surface: #17211f;
    --surface-2: #1e2a27;
    --ink: #e6eeeb;
    --ink-soft: #aec0ba;
    --ink-faint: #84958f;
    --line: #243330;
    --line-strong: #39504b;

    --accent: #4fb8ac;
    --accent-ink: #7cd1c6;
    --accent-wash: #173330;
    --on-accent: #0b1817;

    --amber: #fcad70;
    --amber-ink: #fcad70;
    --amber-wash: #402f1c;
    --critical: #f28b82;
    --critical-ink: #f28b82;
    --critical-wash: #3d2b28;
    --ok: #81c995;
    --ok-ink: #81c995;
    --ok-wash: #1f352a;

    --wa-ink: #4ad17c;
    --wa-wash: rgba(74, 209, 124, 0.18);

    --focus: #4fb8ac;
    --raise: 0 1px 2px 0 rgba(0, 0, 0, 0.6), 0 1px 3px 1px rgba(0, 0, 0, 0.35);
    --raise-hover: 0 2px 6px 0 rgba(0, 0, 0, 0.6), 0 6px 16px 4px rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--paper);
  background-attachment: fixed;
  background-image:
    radial-gradient(900px 320px at 108% -6%, rgba(13, 107, 99, 0.10), transparent 60%),
    radial-gradient(760px 280px at -8% 0%, rgba(13, 107, 99, 0.07), transparent 55%);
  color: var(--ink);
  font: 16px/1.5 "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { body { background-image: none; } }

h1, h2, .brand {
  font-family: "Fraunces", Georgia, "Source Sans 3", serif;
}

a { color: var(--accent-ink); text-decoration: none; transition: color 0.12s ease; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-wash); color: var(--ink); }
a:focus-visible,
.linkish:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--accent-ink);
}

/* ---------- Barra do topo ---------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--raise);
  /* Fixo no topo também no celular — sem isso, dá pra abrir o menu só
     depois de rolar a página inteira de volta pro topo. */
  position: sticky; top: 0; z-index: 20;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.05rem;
  flex: 1 1 0;
  min-width: 0;
  /* Nome longo: uma linha só, com reticências, em vez de quebrar e crescer a barra. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-short { display: none; }
@media (max-width: 639px) {
  .brand { font-size: 1rem; gap: 0.45rem; }
  /* Nome completo não cabe ao lado do menu e do "Sair": versão curta no celular. */
  .brand-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .brand-short { display: inline; }
}
@media (min-width: 640px) { .brand { overflow: visible; } }
.brand:hover { text-decoration: none; }
.brand-mark { flex: none; }
.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: none; order: 1;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-soft);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle-icon .bar {
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: 12px 12px;
}
.nav-toggle-input:checked ~ .nav-toggle .bar-top { transform: translateY(6px) rotate(45deg); }
.nav-toggle-input:checked ~ .nav-toggle .bar-mid { opacity: 0; }
.nav-toggle-input:checked ~ .nav-toggle .bar-bot { transform: translateY(-6px) rotate(-45deg); }
.logout { order: 2; }
.nav {
  display: flex; flex-direction: column; align-items: stretch;
  flex-wrap: wrap; gap: 0.2rem 0.35rem; order: 3; width: 100%;
  overflow: hidden;
  max-height: 0; opacity: 0;
  margin-top: 0; padding-top: 0; border-top: 1px solid transparent;
  transition: max-height 0.3s ease, opacity 0.22s ease, margin-top 0.3s ease, padding-top 0.3s ease, border-color 0.3s ease;
}
.nav-toggle-input:checked ~ .nav {
  max-height: 28rem; opacity: 1;
  margin-top: 0.5rem; padding-top: 0.5rem; border-top-color: var(--line);
}
.nav-toggle-input:checked ~ .nav a { padding: 0.65rem 0.9rem; }
.nav a {
  text-decoration: none;
  color: var(--ink-faint);
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  transition: background 0.12s ease, color 0.12s ease;
}
.nav a:hover { color: var(--accent-ink); background: var(--surface-2); text-decoration: none; }
.nav a.active {
  color: var(--accent-ink);
  background: var(--accent-wash);
  font-weight: 600;
}
.logout { display: flex; align-items: center; gap: 0.55rem; flex: none; }
.whoami { display: none; }
@media (min-width: 640px) {
  .whoami {
    display: inline;
    color: var(--ink-faint);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.linkish {
  background: none; border: none; color: var(--accent-ink);
  cursor: pointer; font: inherit; font-weight: 500; padding: 0.35rem 0.25rem;
  text-decoration: none; border-radius: var(--radius-sm);
  flex: none; white-space: nowrap;
}
/* Alvo de toque de 44px só nos botões da barra (o "estornar" das tabelas fica compacto). */
.logout .linkish { min-height: var(--tap); padding-inline: 0.5rem; }
.linkish:hover { text-decoration: underline; }

@media (min-width: 640px) {
  .topbar {
    flex-wrap: nowrap; gap: 1.5rem; padding: 0.5rem 1.5rem;
  }
  .brand { flex: 0 0 auto; }
  .nav-toggle { display: none; }
  .nav {
    display: flex; flex-direction: row; order: 0; width: auto; flex-wrap: nowrap; gap: 0.35rem; align-items: center;
    overflow: visible; max-height: none; opacity: 1;
    margin-top: 0; padding-top: 0; border-top: none; transition: none;
  }
  .logout { order: 3; margin-left: auto; }
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 640px) {
    .topbar {
      background: color-mix(in srgb, var(--surface) 80%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
  }
}

/* ---------- Layout ---------- */
.wrap { max-width: 960px; margin: 0 auto; padding: 1.35rem 1rem 3.5rem; }
@media (min-width: 640px) { .wrap { padding: 1.9rem 1.5rem 4rem; } }
.wrap.wrap--wide { max-width: 1400px; }
.wrap.wrap--center {
  min-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wrap.wrap--center .login-box { margin-top: 0; margin-bottom: 0; }

h1 {
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
}
h2 {
  font-size: 1.05rem;
  font-weight: 500;
  margin: 2rem 0 0.85rem;
  padding-left: 0.7rem;
  border-left: 4px solid var(--accent);
  line-height: 1.3;
}
.card > h2, .report-heading h2 { border-left: 0; padding-left: 0; margin-top: 0; }
@media (min-width: 640px) { h1 { font-size: 1.8rem; } h2 { font-size: 1.15rem; } }

/* ---------- Mensagens ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.5rem; }
/* Vazia (sem mensagens), a lista fica só como âncora no DOM pras trocas
   fora-de-banda do htmx (ver templates/_mensagens.html) — sem isso ela
   ainda ocupa a margem inferior à toa em toda página. */
.messages:empty { margin: 0; }
.msg {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--raise);
  font-size: 0.9rem;
}
.msg.success { background: var(--ok-wash); border-color: var(--ok); color: var(--ink); }
.msg.error { background: var(--critical-wash); border-color: var(--critical); color: var(--ink); }

/* ---------- Toolbar (busca + ações) ---------- */
.toolbar { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.85rem; }
.toolbar h1 { margin: 0; }
.toolbar form { display: flex; gap: 0.5rem; }
.toolbar input[type=search] {
  flex: 1; min-width: 0;
  border-radius: var(--radius-pill);
  padding-left: 1.1rem;
}
.toolbar input[type=search]:focus {
  border-color: var(--accent);
  box-shadow: 0 1px 10px rgba(32, 33, 36, 0.16);
}
.toolbar form .btn { width: auto; flex: none; }
.toolbar > .btn { width: 100%; }
/* Filtros (selects) no celular: dois lado a lado sem cortar o texto, botão
   "Filtrar" embaixo em largura total. */
@media (max-width: 639px) {
  .toolbar form select { min-width: 0; text-overflow: ellipsis; }
  .toolbar form:has(select + select) { flex-wrap: wrap; }
  .toolbar form:has(select + select) select { flex: 1 1 calc(50% - 0.25rem); width: auto; padding-inline: 0.65rem; }
  .toolbar form:has(select + select) .btn { flex: 1 1 100%; }
}
.spacer { display: none; }
@media (min-width: 640px) {
  .toolbar { flex-direction: row; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
  .toolbar > .btn { width: auto; }
  .spacer { display: block; flex: 1; }
}

.count { margin: 0 0 1rem; color: var(--ink-faint); font-size: 0.85rem; }

/* ---------- Relatórios ---------- */
.report-filter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: end;
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--raise);
}
.report-heading { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1rem; }
.report-heading h2 { margin: 0.1rem 0 0; border: 0; padding: 0; }
.report-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.meta.report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.critical-text { color: var(--critical-ink); font-weight: 600; }
@media (min-width: 640px) {
  .report-filter { grid-template-columns: repeat(4, 1fr) auto; }
  .report-heading { flex-direction: row; align-items: end; justify-content: space-between; }
  .meta.report-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Painel Pix: 5 métricas — número ímpar, sempre sobra um espaço vazio numa
   grade comum de 2 ou 3 colunas. Aqui a grade usa uma unidade mais fina
   (4 no celular, 6 no desktop) pra que o último item (ou os 2 últimos)
   se estiquem e preencham a linha toda, em vez de deixar um buraco. */
.meta.report-metrics.meta--5col { grid-template-columns: repeat(4, 1fr); }
.meta--5col > div:nth-child(-n+4) { grid-column: span 2; }
.meta--5col > div:nth-child(5) { grid-column: span 4; }
@media (min-width: 640px) {
  .meta.report-metrics.meta--5col { grid-template-columns: repeat(6, 1fr); }
  .meta--5col > div:nth-child(-n+3) { grid-column: span 2; }
  .meta--5col > div:nth-child(n+4) { grid-column: span 3; }
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  padding: 0.5rem 1.5rem;
  border: 1px solid transparent;
  background: var(--accent); color: var(--on-accent); text-decoration: none; cursor: pointer;
  font: inherit; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  box-shadow: var(--raise);
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.btn:hover {
  background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent);
  box-shadow: var(--raise-hover); transform: translateY(-1px); text-decoration: none;
}
.btn:active { transform: translateY(0); box-shadow: var(--raise); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn[disabled], .btn:disabled { opacity: 0.5; pointer-events: none; box-shadow: none; }
.btn-block { width: 100%; font-size: 0.9375rem; }

.btn.secondary {
  background: var(--surface); color: var(--accent-ink);
  border-color: var(--line); box-shadow: none;
}
.btn.secondary:hover {
  background: var(--accent-wash); color: var(--accent-ink);
  border-color: var(--line-strong); box-shadow: none; transform: translateY(-1px);
}

/* Botão "Copiar código" (Pix): compacto pra caber numa célula de tabela. */
.btn-copiar-pix {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0.4rem 0.9rem; white-space: nowrap;
  background: var(--surface); color: var(--accent-ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
/* "Cancelar Pix": ação destrutiva, então discreta (texto vermelho, sem fundo) e
   separada do "Copiar código" — nada de botão cheio ao lado de uma ação segura. */
.form-cancelar-pix { display: block; margin-top: 0.4rem; }
.btn-cancelar-pix {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0.35rem 0.4rem; background: none; border: none; cursor: pointer;
  color: var(--critical-ink); font: inherit; font-size: 0.8rem; font-weight: 500;
  border-radius: var(--radius-sm);
}
.btn-cancelar-pix:hover { text-decoration: underline; background: var(--critical-wash); }
.btn-cancelar-pix:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 639px) {
  .envio-cell .form-cancelar-pix { margin-top: 0; flex-basis: 100%; text-align: right; }
}
.btn-copiar-pix:hover { background: var(--accent-wash); border-color: var(--line-strong); }
.btn-copiar-pix:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-copiar-pix.copiado { background: var(--ok-wash); color: var(--ok-ink); border-color: transparent; }

/* ---------- Campos ---------- */
input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=color]):not([type=image])),
select,
textarea {
  box-sizing: border-box;
  font: inherit; font-size: 16px;
  width: 100%;
  height: var(--tap);
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
textarea { height: auto; min-height: 4.5rem; padding: 0.65rem 0.85rem; line-height: 1.5; }
input[type=file] { padding: 0.45rem 0.6rem; }
::placeholder { color: var(--ink-faint); opacity: 1; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 1px var(--accent);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* ---------- Tabelas ---------- */
.tbl-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 0 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--raise);
  transition: box-shadow 0.15s ease;
}
.tbl-wrap:hover { box-shadow: var(--raise-hover); }
table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: 0.875rem; }
th, td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr td { transition: background-color 0.1s ease; }
td.wrap-cell { white-space: normal; min-width: 12rem; }
th {
  background: var(--surface);
  font-size: 0.75rem; letter-spacing: 0;
  color: var(--ink-faint); font-weight: 500;
  border-bottom: 1px solid var(--line-strong);
}
th.num, td.num { text-align: right; }
td a { font-weight: 500; }
tbody tr:nth-child(even) td { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--accent-wash); }

@media (max-width: 639px) {
  .tbl-wrap.cards {
    border: none; box-shadow: none; overflow: visible; background: transparent;
  }
  .tbl-wrap.cards table,
  .tbl-wrap.cards tbody,
  .tbl-wrap.cards tr,
  .tbl-wrap.cards td { display: block; width: 100%; }
  .tbl-wrap.cards thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .tbl-wrap.cards tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--raise);
    margin-bottom: 0.7rem;
    padding: 0.35rem 1rem 0.5rem;
  }
  /* Acento de cor na borda esquerda do cartão — leitura rápida da situação
     sem precisar ler o texto (mesmo padrão dos cartões-métrica .meta).
     Reaproveitado em qualquer lista com status (Cobrar hoje, Contratos...). */
  .tbl-wrap.cards tr.row-acento--inadimplente { border-left: 4px solid var(--critical-ink); }
  .tbl-wrap.cards tr.row-acento--atrasado { border-left: 4px solid var(--amber-ink); }
  .tbl-wrap.cards tr.row-acento--em_dia { border-left: 4px solid var(--ok-ink); }
  .tbl-wrap.cards tr.row-acento--quitado { border-left: 4px solid var(--ink-faint); }
  .tbl-wrap.cards td {
    border: none;
    padding: 0.3rem 0;
    white-space: normal;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem;
  }
  .tbl-wrap.cards td::before {
    content: attr(data-label);
    flex: none;
    margin-right: auto;
    color: var(--ink-faint);
    font-size: 0.7rem; letter-spacing: 0; font-weight: 500;
  }
  .tbl-wrap.cards td.num { text-align: right; }
  .tbl-wrap.cards td.card-stack {
    flex-direction: column; align-items: stretch; gap: 0.4rem;
  }
  .tbl-wrap.cards td.card-stack::before { margin-right: 0; }
  .tbl-wrap.cards a[href^="tel:"] { white-space: nowrap; }
  /* Alvo de toque: links de texto dentro dos cartões ganham área de ~44px de
     altura sem aumentar o cartão (padding compensado por margem negativa). */
  .tbl-wrap.cards td a:not(.btn):not(.icon-btn) { padding-block: 0.6rem; margin-block: -0.6rem; }
  .tbl-wrap.cards td:first-child {
    font-size: 1rem; padding: 0.3rem 0 0.45rem; margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--line);
  }
  .tbl-wrap.cards td:first-child::before { display: none; }
  .tbl-wrap.cards tr:nth-child(even) td,
  .tbl-wrap.cards tr:hover td { background: var(--surface); }
}

.empty {
  display: grid; justify-items: center; gap: 0.8rem;
  padding: 2.5rem 1.5rem; text-align: center;
  color: var(--ink-faint);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.empty p { margin: 0; }

.helptext { color: var(--ink-faint); font-size: 0.8rem; line-height: 1.4; }

/* ---------- Formulários ---------- */
.form-grid { display: grid; gap: 1.1rem; max-width: 620px; }
.form-grid--full { max-width: none; }
/* Formulário como cartão — tira a cara de página crua. */
.form-grid.form-page,
.form-grid--full {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--raise);
}
@media (min-width: 640px) {
  .form-grid.form-page,
  .form-grid--full { padding: 1.85rem 1.85rem 1.6rem; }
}
.form-row { display: grid; gap: 0.35rem; }
.form-row label { font-weight: 500; font-size: 0.8125rem; color: var(--ink-faint); }
.form-row:focus-within label { color: var(--accent-ink); }
.form-row .helptext { color: var(--ink-faint); font-size: 0.8rem; }
.form-row .errorlist { color: var(--critical-ink); margin: 0.2rem 0 0; padding-left: 1rem; font-size: 0.85rem; }

.note {
  margin: 0 0 1.35rem;
  padding: 0.9rem 1.05rem;
  background: var(--accent-wash);
  border: 1px solid transparent;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.9rem;
}
.note strong { font-weight: 600; }

details.note { padding: 0; }
details.note > summary {
  padding: 0.8rem 1.05rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
details.note > summary::-webkit-details-marker { display: none; }
details.note > summary::before { content: "▸ "; color: var(--accent-ink); }
details.note[open] > summary::before { content: "▾ "; }
details.note > p { margin: 0; padding: 0 1.05rem 0.9rem; }

.zap {
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0; margin-left: 0.15rem; white-space: nowrap;
}
@media (max-width: 639px) {
  /* Telefone e "WhatsApp" nos detalhes: mesma técnica de área de toque ampliada. */
  .meta dd a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
}
.zap::before { content: "·\00a0"; color: var(--ink-faint); font-weight: 400; margin-right: 0.15rem; }

.form-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }
.form-actions .btn { width: 100%; }
.form-page .form-actions {
  position: sticky;
  bottom: 0;
  margin: 1.25rem -1.25rem -1.25rem;
  padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 5;
}
@media (min-width: 640px) {
  .form-actions { flex-direction: row; }
  .form-actions .btn { width: auto; }
  .form-page .form-actions {
    position: static;
    margin: 0.5rem 0 0;
    padding: 0;
    background: none;
    border-top: none;
    border-radius: 0;
  }
}

.form-centered { max-width: 920px; margin-inline: auto; }
.form-centered h1 { margin-bottom: 1rem; }
.form-centered .form-grid { max-width: none; }
@media (min-width: 640px) {
  .form-centered .form-actions { gap: 1rem; }
  .form-centered .form-actions .btn { flex: 1; }
}

.form-centered.centrado h1 { text-align: center; margin-bottom: 1.75rem; }
@media (min-width: 640px) {
  .form-centered.centrado { padding-top: 2rem; }
}

.form-section { display: grid; gap: 1rem; }
.form-section + .form-section {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.35rem;
  margin-top: 0.25rem;
}
.form-section-title {
  margin: 0 0 0.1rem;
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent-ink); font-weight: 600;
}
@media (min-width: 640px) {
  .form-section { gap: 1rem; }
  .form-section + .form-section { padding-top: 1.5rem; }
}

.money-wrap { position: relative; display: block; }
.money-wrap::before {
  content: "R$"; position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); font-size: 0.9rem; pointer-events: none;
}
.money-wrap input { padding-left: 2.4rem; }

/* Some visualmente mas continua no DOM para leitor de tela. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Chips de status ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.28em 0.75em; border-radius: var(--radius-sm);
  font-size: 0.75rem; font-weight: 600;
  border: 1px solid transparent; letter-spacing: 0;
  background: var(--surface-2); color: var(--ink-soft);
}
.pill::before {
  content: ""; width: 0.5em; height: 0.5em; border-radius: 50%;
  background: currentColor; flex: none;
}
.pill.em_dia { background: var(--ok-wash); color: var(--ok-ink); }
.pill.atrasado { background: var(--amber-wash); color: var(--amber-ink); }
.pill.inadimplente { background: var(--critical-wash); color: var(--critical-ink); }
.pill.quitado { background: var(--surface-2); color: var(--ink-faint); }
.pill.quitado::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Selos de situação lado a lado (status + alerta de bloqueio, quando houver)
   numa linha só; o "X dias de atraso" fica destacado numa linha própria
   embaixo — é o dado que muda a decisão de cobrar, então tem mais peso
   tipográfico que os selos. */
.situacao-selos { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pill.alerta-bloqueio { background: var(--critical-wash); color: var(--critical-ink); }
.pill.alerta-bloqueio::before { content: none; }

.status-cell .pill { min-width: 7.25rem; justify-content: center; }

.pill.aberto { background: var(--surface-2); color: var(--ink-faint); }
.pill.parcial { background: var(--amber-wash); color: var(--amber-ink); }
.pill.pago { background: var(--ok-wash); color: var(--ok-ink); }
.pill.pago::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.pill.pendente { background: var(--surface-2); color: var(--ink-faint); }
.pill.enviado { background: var(--amber-wash); color: var(--amber-ink); }
.pill.entregue, .pill.lido { background: var(--ok-wash); color: var(--ok-ink); }
.pill.erro { background: var(--critical-wash); color: var(--critical-ink); }
.pill.vencido { background: var(--critical-wash); color: var(--critical-ink); }
.pill.cancelado { background: var(--surface-2); color: var(--ink-faint); }

/* Selo de canal ("Pix"/"Msg" em Cobrar hoje, status Pix no painel Pix): cor
   do próprio canal — petróleo (a cor do Pix real é bem próxima) e verde
   WhatsApp — em vez do cinza neutro, enquanto não há nada a dizer sobre o
   envio ainda (não gerado/preparado, ou "pendente" = aguardando geração).
   Os :not() cobrem os status que já têm cor própria (pago/vencido/erro...)
   pra essa regra nunca disputar com eles — não pode depender da ordem no
   arquivo, porque o painel Pix usa as mesmas classes de status. */
.pill.pill-pix:not(.aberto):not(.pago):not(.vencido):not(.cancelado):not(.erro) {
  background: var(--accent-wash); color: var(--accent-ink);
}
.pill.pill-msg:not(.enviado):not(.entregue):not(.lido):not(.erro) {
  background: var(--wa-wash); color: var(--wa-ink);
}

/* ─────────── Painel "Cobrar hoje" ─────────── */
/* Cor acompanha a do selo de status (mesma linguagem visual das pills),
   em vez do branco de --ink, que destoava do resto da linha — texto grande
   demais e sem relação de cor com os selos acima dele. */
.atraso-dias {
  display: block; white-space: nowrap; margin-top: 0.3rem;
  color: var(--ink-soft); font-size: 0.85rem; font-weight: 600;
}
.row-acento--atrasado .atraso-dias { color: var(--amber-ink); }
.row-acento--inadimplente .atraso-dias { color: var(--critical-ink); }
.situacao-cell { white-space: normal; min-width: 10rem; }
@media (min-width: 640px) {
  /* Largura suficiente pra "Inadimplente" + "bloquear aparelho" caberem lado
     a lado numa linha só, como no cartão mobile — sem isso os dois selos
     quebram em linhas separadas na tabela do desktop. */
  .situacao-cell { min-width: 18.5rem; }
}
.envio-cell { white-space: normal; }
.envio-vias { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.envio-vias .pill { white-space: nowrap; cursor: help; min-width: 3.25rem; justify-content: center; }
.envio-glifo { margin-left: 0.3em; font-weight: 700; }
.valor-cobrar { font-weight: 600; font-size: 1.1rem; white-space: nowrap; }
.cobrar-cell { white-space: normal; }
.cobrar-cell .helptext { display: block; }
.contrato-cell .estrutura { color: var(--ink-faint); }

/* Contato: linha com os dois ícones (ligar / WhatsApp) e, abaixo, o botão
   "Registrar". O <td> continua sendo célula de tabela (nada de display:flex
   nele, senão perde a largura da coluna e o conteúdo vaza a borda); quem
   empilha é o próprio conteúdo — o .contato-vias vira um bloco flex e o botão
   cai na linha de baixo. min-width reserva espaço para os ícones de 40px. */
.contato-cell {
  white-space: normal;
  min-width: 8.5rem;
  text-align: center;
  vertical-align: top;
}
.contato-vias { display: flex; align-items: center; justify-content: center; gap: 0.45rem; }
.contato-cell .btn-registrar { margin-top: 0.5rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink-soft);
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.icon-btn:hover { transform: translateY(-1px); box-shadow: var(--raise); text-decoration: none; }
.icon-btn:active { transform: translateY(0); box-shadow: none; }
.icon-btn svg { display: block; width: 20px; height: 20px; }
.icon-btn--phone { color: var(--accent-ink); background: var(--accent-wash); border-color: transparent; }
.icon-btn--phone:hover { background: var(--accent-wash); border-color: var(--accent); }
.icon-btn--wa { color: var(--wa-ink); background: var(--wa-wash); border-color: transparent; }
.icon-btn--wa:hover { background: var(--wa-wash); border-color: var(--wa-ink); }

/* Botão "Registrar": a ação principal da linha — cheio, em cápsula, com ícone. */
.btn-registrar {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 38px; padding: 0.45rem 1.15rem;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.28), 0 1px 3px 1px rgba(26, 115, 232, 0.12);
}
.btn-registrar svg { flex: none; width: 16px; height: 16px; }
.btn-registrar:hover { box-shadow: var(--raise-hover); }

@media (max-width: 639px) {
  .tbl-wrap.cards.cobrar-hoje td.cli-cell {
    border-bottom: none; margin-bottom: 0; padding-bottom: 0.15rem;
  }
  .tbl-wrap.cards.cobrar-hoje td.contrato-cell {
    display: block; padding: 0 0 0.6rem; margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--line); font-size: 0.9rem;
  }
  .tbl-wrap.cards.cobrar-hoje td.contrato-cell::before { content: none; }
  .tbl-wrap.cards.cobrar-hoje td.contrato-cell a { font-weight: 500; }

  /* "Situação" repete o que o badge já diz em palavras ("Inadimplente" /
     "Atrasado") — tirar o rótulo economiza uma linha inteira sem perder
     informação. */
  .tbl-wrap.cards.cobrar-hoje td.situacao-cell { align-items: flex-start; gap: 0.4rem; padding-top: 0.55rem; }
  .tbl-wrap.cards.cobrar-hoje td.situacao-cell .atraso-dias { flex-basis: 100%; margin-top: 0.35rem; }
  .tbl-wrap.cards.cobrar-hoje td.situacao-cell::before { content: none; }

  /* "A cobrar" é o número que a Yslane precisa bater o olho e decorar antes
     de ligar — aumenta o peso tipográfico dele em vez de descrevê-lo com
     rótulo (a formatação R$ já deixa claro que é dinheiro). */
  .tbl-wrap.cards.cobrar-hoje td.cobrar-cell { align-items: baseline; }
  .tbl-wrap.cards.cobrar-hoje td.cobrar-cell .valor-cobrar { font-size: 1.3rem; }
  .tbl-wrap.cards.cobrar-hoje td.cobrar-cell .helptext {
    flex-basis: 100%; margin-top: 0.15rem;
  }

  /* "Envio" e "Contato": os rótulos são redundantes no celular (o texto do
     chip já diz "Pix"/"Msg"; os ícones já têm aria-label) — tirar libera
     espaço vertical e reduz o card a um bloco de leitura + uma barra de ação.
     Alinhar à direita gruda essa linha embaixo do valor (mesma coluna do "R$"
     acima) em vez de flutuar solta à esquerda — vira "detalhe do valor",
     não uma linha desgarrada no meio do card. Os chips continuam menores que
     os selos de situação (metadado secundário), mas com fundo e texto claro
     o bastante pra não sumir contra o card. */
  .tbl-wrap.cards.cobrar-hoje td.envio-cell {
    padding-top: 0; padding-bottom: 0.6rem; justify-content: flex-end;
  }
  .tbl-wrap.cards.cobrar-hoje td.envio-cell::before { content: none; }
  .tbl-wrap.cards.cobrar-hoje td.envio-cell .envio-vias { gap: 0.4rem; }
  .tbl-wrap.cards.cobrar-hoje td.envio-cell .pill {
    padding: 0.2em 0.6em; min-width: 0; font-size: 0.72rem;
  }
  .tbl-wrap.cards.cobrar-hoje td.envio-cell .pill::before { width: 0.4em; height: 0.4em; }

  /* Divisória antes da barra de ação: separa "o que aconteceu" (situação,
     valor, envio) de "o que fazer agora" (ligar, WhatsApp, registrar). */
  .tbl-wrap.cards.cobrar-hoje td.contato-cell {
    min-width: 0; align-items: center;
    padding-top: 0.65rem; border-top: 1px solid var(--line);
  }
  .tbl-wrap.cards.cobrar-hoje td.contato-cell::before { content: none; }
  .tbl-wrap.cards.cobrar-hoje td.contato-cell .contato-actions {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
  }
  .tbl-wrap.cards.cobrar-hoje td.contato-cell .contato-vias { flex: none; }
  .tbl-wrap.cards.cobrar-hoje td.contato-cell .icon-btn { width: 46px; height: 46px; }
  .tbl-wrap.cards.cobrar-hoje td.contato-cell .btn-registrar {
    flex: 1; min-height: var(--tap); margin-top: 0; justify-content: center; font-size: 0.88rem;
  }
}

/* ---------- Tela do cliente: cabeçalho, avisos e painel por contrato ---------- */
.cliente-cabecalho h1 { margin: 0.1rem 0 0; }
.cliente-cabecalho .contato-vias { justify-content: flex-start; }
@media (max-width: 639px) {
  .cliente-cabecalho .contato-vias { width: 100%; }
  .cliente-cabecalho .contato-vias .icon-btn { width: 46px; height: 46px; }
  .cliente-cabecalho > .btn { width: 100%; }
}

/* Avisos: o que precisa de atenção neste cliente, antes dos dados. Cor + ícone
   (não só cor) para o nível ficar claro sem depender de distinguir cores. */
.avisos { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.aviso {
  padding: 0.7rem 1rem 0.7rem 2.4rem; position: relative;
  border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-sm);
  background: var(--surface); font-size: 0.9rem;
}
.aviso::before { position: absolute; left: 0.85rem; top: 0.65rem; font-weight: 700; }
.aviso--critico { border-left-color: var(--critical-ink); background: var(--critical-wash); }
.aviso--critico::before { content: "⚠"; color: var(--critical-ink); }
.aviso--atencao { border-left-color: var(--amber-ink); background: var(--amber-wash); }
.aviso--atencao::before { content: "!"; color: var(--amber-ink); }
.aviso--info { border-left-color: var(--accent); background: var(--accent-wash); }
.aviso--info::before { content: "i"; color: var(--accent-ink); }

.painel-contrato {
  margin: 0 0 1rem; padding: 1rem 1.15rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--raise);
}
.painel-contrato.row-acento--inadimplente { border-left-color: var(--critical-ink); }
.painel-contrato.row-acento--atrasado { border-left-color: var(--amber-ink); }
.painel-contrato.row-acento--em_dia { border-left-color: var(--ok-ink); }
.painel-contrato.row-acento--quitado { border-left-color: var(--ink-faint); }
.painel-contrato__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.painel-contrato__topo h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.painel-contrato__dados {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem;
  margin: 0 0 0.9rem;
}
.painel-contrato__dados > div { display: grid; gap: 0.15rem; align-content: start; }
.painel-contrato__dados dt { font-size: 0.75rem; color: var(--ink-faint); font-weight: 600; }
.painel-contrato__dados dd { margin: 0; font-weight: 500; }
.painel-contrato__dados .helptext { display: block; font-weight: 400; }
.painel-contrato__acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
@media (max-width: 639px) {
  .painel-contrato { padding: 0.9rem; }
  .painel-contrato__acoes .btn { flex: 1 1 calc(50% - 0.25rem); }
}

/* Cobrança automática da parcela em aberto: estado à esquerda, ação à direita. */
.cobranca-auto {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
  padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.cobranca-auto--suspensa { border-color: var(--amber-ink); background: var(--amber-wash); }
.cobranca-auto__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; min-width: 0; }
.cobranca-auto .helptext { flex-basis: 100%; }
.cobranca-auto form { flex: none; }
.cobranca-auto .btn-cancelar-pix, .cobranca-auto .btn { min-height: var(--tap); }
/* Título do contrato é link: área de toque de ~44px sem crescer o cartão. */
.painel-contrato__topo h3 a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
@media (max-width: 639px) { .cobranca-auto form, .cobranca-auto form .btn, .cobranca-auto form button { width: 100%; } }

/* ---------- Cartões-métrica (grade de dados do detalhe) ---------- */
.meta {
  display: grid; grid-template-columns: 1fr; gap: 0.75rem;
  margin: 1.1rem 0 1.5rem;
  padding: 0;
  background: none; border: 0; box-shadow: none;
}
.meta > div {
  display: grid; gap: 0.2rem; align-content: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
  box-shadow: var(--raise);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.meta > div:hover { transform: translateY(-2px); box-shadow: var(--raise-hover); }
.meta dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 600; }
.meta dd { margin: 0; color: var(--ink); font-size: 1.05rem; font-weight: 500; }
/* auto-fill (não auto-fit): quando sobra um cartão na última linha ele mantém a
   largura de uma coluna em vez de esticar de ponta a ponta. */
@media (min-width: 520px) { .meta { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
/* "Cobrar hoje": sempre 4 cartões fixos — esticam para ocupar a largura total
   (mesma largura da tabela abaixo), em vez do auto-fill genérico do .meta. */
/* Grade de 4 colunas fixas — pra blocos .meta que sempre têm exatamente 4
   itens (Cobrar hoje, Clientes>Detalhes): estica pra ocupar a largura toda
   em vez do auto-fill genérico, que deixa colunas fantasma sem esticar os
   cartões existentes quando sobra espaço na linha. */
@media (min-width: 640px) { .meta--4col { grid-template-columns: repeat(4, 1fr); } }
/* Celular: 4 cartões em grade 2×2 e mais baixos — em coluna única eles
   empurravam o primeiro cliente pra fora da primeira tela. */
@media (max-width: 639px) {
  .meta--4col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0.6rem 0 0.9rem; }
  .meta--4col > div { padding: 0.55rem 0.7rem; }
  .meta--4col > div:hover { transform: none; }
  .meta--4col dt { font-size: 0.62rem; letter-spacing: 0.04em; line-height: 1.25; }
  .meta--4col dd { font-size: 1.05rem; }
  /* O aviso de "como usar" vira uma linha discreta no celular. */
  #painel-cobrar-hoje > .note { margin-bottom: 0.8rem; padding: 0.55rem 0.8rem; font-size: 0.8rem; }
}

.pagination { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; color: var(--ink-faint); font-size: 0.9rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
  margin: 1rem 0;
  box-shadow: var(--raise);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--raise-hover); }

/* ---------- Tela inicial (painel) ---------- */
/* 6 números-chave: colunas fixas para caírem sempre 3+3 (ou 2+2+2), sem cartão
   órfão esticado na última linha. */
.painel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 519px) {
  /* Celular: 2 colunas compactas (3 linhas) em vez de 6 cartões empilhados. */
  .painel-kpis { gap: 0.5rem; }
  .painel-kpis > div { padding: 0.6rem 0.7rem; }
  .painel-kpis > div:hover { transform: none; }
  .painel-kpis dt { font-size: 0.62rem; letter-spacing: 0.04em; }
  .painel-kpis dd { font-size: 1.15rem; }
}
@media (min-width: 920px) { .painel-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.painel-kpis dd { font-size: 1.35rem; font-weight: 600; line-height: 1.25; }
.painel-kpis .kpi-sub {
  display: block;
  font-size: 0.72rem; font-weight: 500;
  color: var(--ink-faint); margin-top: 0.2rem;
}
/* minmax(0, ...) nas colunas (não só "3fr 2fr") — sem isso, o Chart.js pode
   deixar o <canvas> com uma largura interna maior que a coluna por um
   instante (ex.: ao trocar de layout 2 colunas → 1 coluna no responsive mode
   do DevTools), e uma coluna de grid sem largura mínima zero não encolhe
   abaixo do conteúdo — ela estica a grade (e a página) inteira pros lados
   até a próxima navegação recalcular o gráfico do zero. */
.painel-graficos {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  margin: 0.25rem 0 0.75rem;
}
.painel-graficos .card { margin: 0; min-width: 0; }
.painel-graficos .card:hover { transform: none; box-shadow: var(--raise); }
.painel-graficos .card h2 { margin: 0 0 0.9rem; font-size: 1rem; }
.chart-box { position: relative; width: 100%; height: 260px; overflow: hidden; }
@media (min-width: 900px) {
  .painel-graficos { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* ---------- Login ---------- */
.login-box {
  max-width: 400px;
  margin: 1.75rem auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem 2.25rem;
  box-shadow: var(--raise-hover);
}
.login-box .eyebrow { display: block; margin-bottom: 0.15rem; }
.login-box h1 { font-size: 1.5rem; font-weight: 400; text-align: left; margin: 0.15rem 0 1.5rem; }
.login-box .form-grid { gap: 1.2rem; max-width: none; }
.login-box .msg { margin-bottom: 0.25rem; }
.login-box .fineprint {
  margin: 1.25rem 0 0; text-align: center;
  color: var(--ink-faint); font-size: 0.8rem;
}
@media (min-width: 640px) { .login-box { margin: 3.5rem auto; padding: 2.75rem 2.5rem; } }

/* ---------- Movimento de entrada ---------- */
/* Só no Início (a "capa" do site) — não em toda navegação. Repetir esse
   reveal em cada troca de tela, o dia inteiro, cansa mais do que ajuda;
   como um momento único de chegada, no painel que resume o dia, ele
   continua tendo função. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
  .painel-entrada > * { animation: rise 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .painel-entrada > :nth-child(1) { animation-delay: 0.03s; }
  .painel-entrada > :nth-child(2) { animation-delay: 0.07s; }
  .painel-entrada > :nth-child(3) { animation-delay: 0.11s; }
  .painel-entrada > :nth-child(4) { animation-delay: 0.15s; }
  .painel-entrada > :nth-child(5) { animation-delay: 0.19s; }
  .painel-entrada > :nth-child(n + 6) { animation-delay: 0.22s; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Diálogo "Registrar pagamento" (Cobrar hoje) ---------- */
dialog.dialog-registrar {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(88vh, 760px);
  margin: auto;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--raise-hover);
}
dialog.dialog-registrar::backdrop {
  background: rgba(23, 35, 31, 0.55);
}
dialog.dialog-registrar #dialog-registrar-corpo {
  max-height: min(88vh, 760px);
  overflow-y: auto;
  padding: 1.25rem;
}
dialog.dialog-registrar #dialog-registrar-corpo h1 { margin-top: 0; }
@media (max-width: 639px) {
  /* Dados do contrato em grade compacta (Cliente e Contrato em linha própria,
     Valor da parcela ao lado) e botões lado a lado — sobra espaço pros campos. */
  dialog.dialog-registrar .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin: 0.6rem 0 0.9rem; }
  dialog.dialog-registrar .meta > div { padding: 0.45rem 0.7rem; }
  dialog.dialog-registrar .meta > div:hover { transform: none; }
  dialog.dialog-registrar .meta > div:first-child { grid-column: 1 / -1; }
  dialog.dialog-registrar .meta dd { font-size: 0.95rem; }
  dialog.dialog-registrar .form-page .form-actions { flex-direction: row-reverse; gap: 0.5rem; }
  dialog.dialog-registrar .form-page .form-actions .btn { flex: 1; width: auto; padding-inline: 0.75rem; }
  dialog.dialog-registrar {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    align-self: flex-end;
    border-radius: var(--radius) var(--radius) 0 0;
  }
}