/* app.css — as telas do sistema Álvaro Júnior, sobre o design system em
   styles.css (que importa os tokens). Regras da marca aplicadas aqui:
     - cards brancos, borda 1px var(--border-default), raio 12px, sem sombra;
     - uma única ação cobalto por tela;
     - maiúsculas sempre com letter-spacing >= 0.16em;
     - numeral tabular em toda cifra/contagem/data (classe .num);
     - sem emoji, sem ícone desenhado à mão, sem gradiente decorativo. */

.num{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- shell */
.cabecalho{
  display:flex;align-items:center;justify-content:space-between;
  /* `wrap` e `gap`: sem eles a barra tinha 540px de largura numa janela de
     375 e a página inteira ganhava rolagem lateral — o sistema nunca tinha
     funcionado num celular, e é onde o corretor mais vai abrir. Descoberto
     medindo a tela de verdade, não lendo o CSS. */
  flex-wrap:wrap;gap:var(--space-3);
  padding:var(--space-4) var(--gutter-page);
  border-bottom:var(--border-hairline);background:var(--surface-page);
}
.cabecalho__logo{height:28px;width:auto;display:block}
.cabecalho__nav{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-5);min-width:0}
.cabecalho__nav a{font:var(--type-body-sm);color:var(--text-secondary);text-decoration:none}
.cabecalho__nav a:hover{color:var(--text-primary)}
.cabecalho__usuario{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.cabecalho__nome{font:var(--type-body-sm);color:var(--text-secondary)}
.cabecalho__descritor{
  font:var(--type-caption);color:var(--text-muted);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
}

.pagina{
  max-width:var(--container-max);margin:0 auto;
  padding:var(--space-8) var(--gutter-page) var(--space-12);
}
.pagina__titulo{margin-bottom:var(--space-2)}
.pagina__subtitulo{font:var(--type-body-sm);color:var(--text-secondary);margin-bottom:var(--space-8)}

[data-eyebrow]{display:block;margin-bottom:var(--space-2)}

/* ---------------------------------------------------------------- cards */
.card{
  background:var(--surface-card);border:var(--border-hairline);
  border-radius:var(--radius-card);box-shadow:var(--shadow-none);
}
.card--pad{padding:var(--space-6)}

/* ------------------------------------------------------------- botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font:var(--type-body-sm);font-weight:var(--weight-medium);
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-control);
  border:var(--rule-width) solid transparent;cursor:pointer;
  transition:var(--transition-control);text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn--primario{background:var(--action-bg);color:var(--action-fg)}
.btn--primario:hover{background:var(--action-bg-hover);color:var(--action-fg)}
.btn--primario:active{background:var(--action-bg-active);transform:scale(var(--press-scale))}
.btn--primario:disabled{background:var(--action-disabled-bg);color:var(--action-disabled-fg);cursor:not-allowed}
.btn--fantasma{background:transparent;color:var(--text-secondary);border-color:var(--border-default)}
.btn--fantasma:hover{background:var(--action-ghost-bg-hover);color:var(--text-primary)}
.btn--fantasma:active{background:var(--action-ghost-bg-active)}
.btn--bloco{width:100%}
.btn--pequeno{padding:var(--space-2) var(--space-4);font:var(--type-caption);font-weight:var(--weight-semibold)}

/* --------------------------------------------------------------- badges */
.badge{
  display:inline-block;font:var(--type-label);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;padding:var(--space-1) var(--space-2);border-radius:var(--radius-1);
}
.badge--esfriando{color:var(--brand-navy);background:var(--neutral-100)}
.badge--nunca-atendido{color:var(--brand-graphite);background:var(--neutral-200)}
.badge--aberto{color:var(--status-reserved);background:var(--status-reserved-soft)}

/* ------------------------------------------------------------- listas */
.bloco{margin-bottom:var(--space-12)}
.bloco__titulo{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-4)}
.bloco__titulo h2{margin:0}
.bloco__contagem{font:var(--type-body-sm);color:var(--text-muted)}

.bloco--nunca-atendido{
  background:var(--surface-subtle);border-radius:var(--radius-sheet);
  padding:var(--space-6);
}

.lista-clientes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.cartao-cliente{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);cursor:pointer;
}
.cartao-cliente:hover{border-color:var(--border-hover)}
.cartao-cliente__nome{font:var(--type-subheading);color:var(--text-brand);display:block}
.cartao-cliente__linha{font:var(--type-caption);color:var(--text-muted);margin-top:var(--space-1)}
.cartao-cliente__medida{text-align:right;flex-shrink:0}
.cartao-cliente__dias{font:var(--type-heading);color:var(--text-brand);display:block}
.cartao-cliente__dias-rotulo{font:var(--type-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}

.vazio{
  padding:var(--space-8);text-align:center;color:var(--text-muted);
  font:var(--type-body-sm);border:1px dashed var(--border-default);border-radius:var(--radius-card);
}

/* -------------------------------------------------------------- drawer */
.drawer-overlay{
  position:fixed;inset:0;background:var(--surface-overlay);
  opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard);
  z-index:40;
}
.drawer-overlay.aberta{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);
  background:var(--surface-page);border-left:var(--border-hairline);
  box-shadow:var(--shadow-lg);transform:translateX(100%);
  transition:transform var(--dur-base) var(--ease-standard);
  overflow-y:auto;z-index:41;
}
.drawer.aberta{transform:translateX(0)}

.drawer__cabecalho{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-6);border-bottom:var(--border-hairline);
}
.drawer__nome{margin-bottom:var(--space-1)}
.drawer__linha{font:var(--type-body-sm);color:var(--text-secondary)}
.drawer__fechar{
  background:none;border:none;color:var(--text-muted);font-size:24px;line-height:1;
  cursor:pointer;padding:var(--space-1) var(--space-2);
}
.drawer__fechar:hover{color:var(--text-primary)}
.drawer__corpo{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-7)}

.secao__titulo{margin-bottom:var(--space-3)}

.par{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) 0}
.par__rotulo{font:var(--type-caption);color:var(--text-muted)}
.par__valor{font:var(--type-body-sm);color:var(--text-primary);text-align:right}
.par__valor--vazio{color:var(--text-disabled);font-style:normal}

/* ------------------------------------------------------------ timeline */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:var(--border-default);
}
.timeline-item{position:relative;padding-left:var(--space-6);padding-bottom:var(--space-5)}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{
  content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--surface-page);border:2px solid var(--brand-navy);
}
.timeline-item__cabecalho{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.timeline-item__tipo{font:var(--type-label);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-brand)}
.timeline-item__data{font:var(--type-caption);color:var(--text-muted)}
.timeline-item__origem{font:var(--type-caption);color:var(--text-muted)}
.timeline-item__resumo{font:var(--type-body-sm);color:var(--text-primary);margin-top:var(--space-1)}

/* --------------------------------------------------------- pendências */
.pendencias{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:560px){.pendencias{grid-template-columns:1fr}}
.pendencia-bloco__titulo{
  font:var(--type-label);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--space-2);display:block;
}
.pendencia-item{font:var(--type-body-sm);padding:var(--space-2) 0;border-bottom:var(--border-hairline)}
.pendencia-item:last-child{border-bottom:none}

/* --------------------------------------------------------------- forms */
.form{display:flex;flex-direction:column;gap:var(--space-5);max-width:var(--container-narrow)}
.campo{display:flex;flex-direction:column;gap:var(--space-2)}
.campo label{
  font:var(--type-label);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-secondary);
}
.campo input,.campo select,.campo textarea{
  font:var(--type-body);padding:var(--space-3) var(--space-4);
  border:var(--rule-width) solid var(--border-default);border-radius:var(--radius-control);
  background:var(--surface-page);color:var(--text-primary);
}
.campo textarea{min-height:120px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--border-focus)}
.campo__erro{font:var(--type-caption);color:var(--field-error-fg)}
.campo__dica{font:var(--type-caption);color:var(--text-muted)}
.form__acoes{display:flex;gap:var(--space-3);align-items:center}

.banner{
  padding:var(--space-4) var(--space-5);border-radius:var(--radius-control);
  font:var(--type-body-sm);margin-bottom:var(--space-6);
}
.banner--erro{background:var(--status-sold-soft);color:var(--status-sold)}
.banner--info{background:var(--surface-subtle);color:var(--text-secondary)}

/* ------------------------------------------------------------- login */
.tela-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--surface-subtle);padding:var(--space-6);
}
.tela-login__cartao{width:100%;max-width:380px;padding:var(--space-8)}
.tela-login__logo{height:32px;width:auto;display:block;margin:0 auto var(--space-8)}

/* ---- Mapa da carteira -------------------------------------------------- */
/* Altura fixa porque Leaflet precisa de caixa medida antes de desenhar; sem
   isso o mapa nasce com 0px e fica invisível. Borda e raio seguem o card do
   sistema — 1px hairline, 12px, sem sombra. */
.mapa {
  height: 520px;
  border: 1px solid var(--hairline, #E1E4EA);
  border-radius: 12px;
  overflow: hidden;
}

.mapa-balao {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
}

.mapa-balao__codigo {
  font-weight: 600;
  color: var(--navy, #071C43);
  text-decoration: none;
}

.mapa-balao__codigo:hover { text-decoration: underline; }

.mapa-balao__linha {
  font-size: 13px;
  color: var(--grafite-tecnico, #737781);
}

.mapa-balao__situacao {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite-tecnico, #737781);
}

/* ---- Procura x oferta por bairro --------------------------------------- */
.tabela-bairros {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabela-bairros th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite-tecnico, #737781);
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--hairline, #E1E4EA);
}

.tabela-bairros th.num,
.tabela-bairros td.num { text-align: right; padding-right: 24px; }

.tabela-bairros td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--hairline, #E1E4EA);
}

.tabela-bairros tr:last-child td { border-bottom: 0; }

.tabela-bairros__neutro { color: var(--grafite-tecnico, #737781); font-size: 13px; }

.tabela-bairros__ressalva {
  margin-top: 16px;
  font-size: 13px;
  color: var(--grafite-tecnico, #737781);
}

/* Galeria de fotos do imóvel (02/08/2026). Grade que se adapta sozinha: o
   drawer é estreito e a página é larga, e a mesma marcação serve nos dois. */
.galeria {
  list-style: none;
  margin: 0 0 var(--space-4, 16px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2, 8px);
}
.galeria__item { display: flex; flex-direction: column; gap: var(--space-1, 4px); }
.galeria__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm, 6px);
  display: block;
  background: var(--surface-sunken);
}

/* ═══════════════════════════════════════════════════════════════════════
   PAINEL · Bento Grid            Hallmark · tema Álvaro Júnior (travado)

   Hierarquia por variação de TAMANHO, e DENSIDADE de painel operacional —
   não folga de formulário. Todo valor vem de token.
   ═══════════════════════════════════════════════════════════════════════ */

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── cabeçalho: rótulo, não manchete ─────────────────────────────────── */
.painel__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-hairline);
}
.painel__titulo {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
  letter-spacing: -.01em;
}
.painel__meta { font-size: var(--text-2xs); color: var(--text-muted); margin: 0; }
.painel__busca { display: flex; gap: var(--space-2); margin-left: auto; min-width: 0; }
.painel__busca input { min-width: 0; width: 20rem; max-width: 100%; }

/* ── a grade ─────────────────────────────────────────────────────────── */
.bento {
  display: grid;
  /* minmax(0, …) e não 1fr puro: sem isso, conteúdo largo estoura a coluna
     e a página ganha rolagem lateral. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.bento__bloco {
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  background: var(--surface-card);
  min-width: 0;
}
.bento__bloco--dominante {
  grid-column: span 3;
  background: var(--surface-inverse);
  border: var(--border-inverse);
  color: var(--text-inverse);
}
.bento__bloco--alto { grid-column: span 1; }
.bento__bloco--largo { grid-column: span 4; }

/* ── chamada: número grande à esquerda, rótulo e medida empilhados ───── */
.chamada {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-on-dark);
}
.bento__bloco--alto .chamada { border-bottom: var(--border-hairline); }
.chamada__numero {
  grid-row: 1 / span 2;
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: .9;
}
.chamada--medio .chamada__numero { font-size: var(--text-2xl); }
.chamada__rotulo {
  grid-column: 2;
  font-size: var(--text-3xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .68;
}
.chamada__medida { grid-column: 2; font-size: var(--text-2xs); opacity: .74; }

/* ── listas densas: uma linha por pessoa ─────────────────────────────── */
.compacta { list-style: none; margin: 0; padding: 0; }
.compacta__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.compacta__item + .compacta__item { border-top: 1px solid var(--border-on-dark); }
.bento__bloco--alto .compacta__item + .compacta__item { border-top: var(--border-hairline); }
.compacta__nome { font-size: var(--text-sm); font-weight: var(--weight-medium); color: inherit; text-decoration: none; }
.compacta__nome:hover { text-decoration: underline; }
.compacta__detalhe { font-size: var(--text-3xs); opacity: .58; }
.compacta__medida { margin-left: auto; font-size: var(--text-2xs); white-space: nowrap; opacity: .86; }

/* ── faixa de números: UMA barra dividida, não caixas soltas ─────────── */
.faixa { display: flex; flex-wrap: wrap; padding: 0; }
.faixa__item {
  flex: 1 1 0;
  min-width: 7rem;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  color: inherit;
}
.faixa__item + .faixa__item { border-left: var(--border-hairline); }
a.faixa__item:hover .faixa__numero { color: var(--text-accent); }
.faixa__numero { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: 1; }
.faixa__rotulo { font-size: var(--text-3xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ── bairros ─────────────────────────────────────────────────────────── */
.bloco__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.bloco__titulo h2 {
  font-size: var(--text-3xs); font-weight: var(--weight-semibold); margin: 0;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
}
.bloco__link { font-size: var(--text-2xs); color: var(--text-accent); }
.bloco__vazio, .bloco__nota { font-size: var(--text-2xs); color: var(--text-muted); margin: var(--space-2) 0 0; }

.tabela-bairros { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
/* Colunas fixas: sem isto o nome do bairro engole a largura e os números
   ficam boiando longe do rótulo. */
.tabela-bairros th:first-child, .tabela-bairros td:first-child { width: 34%; }
.tabela-bairros th, .tabela-bairros td { padding: var(--space-2) 0; text-align: left; }
.tabela-bairros thead th {
  font-size: var(--text-3xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: var(--weight-medium);
  border-bottom: var(--border-hairline);
}
.tabela-bairros tbody th {
  /* Sobrescreve regra global de `th` (caixa-alta + tracking + risco): aqui o
     conteúdo é DADO — o nome do bairro —, não rótulo de coluna. Cabeçalho de
     linha em versalete largo lê como etiqueta e afasta o nome do número. */
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: normal;
  border-bottom: 0;
  color: var(--text-primary);
}
.tabela-bairros tbody tr + tr th, .tabela-bairros tbody tr + tr td { border-top: var(--border-hairline); }
.tabela-bairros .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: var(--space-6); width: 18%; }
.saldo { color: var(--text-muted); font-size: var(--text-2xs); width: 18%; }
/* Único destaque cromático da tela, e no cobalto da marca — não numa cor
   de alarme nova, que numa marca sóbria seria ruído. */
.saldo--falta { color: var(--text-accent); font-weight: var(--weight-semibold); }

/* ── ritmo: rótulo colado no número ──────────────────────────────────── */
.ritmo { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4); margin: 0; }
.ritmo__par { display: flex; flex-direction: column; gap: 2px; }
.ritmo__par dt { font-size: var(--text-3xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.ritmo__par dd { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.ritmo__par dd .par__valor--vazio { font-size: var(--text-2xs); font-weight: var(--weight-regular); }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__bloco--dominante, .bento__bloco--alto, .bento__bloco--largo { grid-column: span 2; }
  .painel__busca { margin-left: 0; width: 100%; }
  .painel__busca input { width: auto; flex: 1; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__bloco--dominante, .bento__bloco--alto, .bento__bloco--largo { grid-column: span 1; }
  .faixa__item { flex-basis: 50%; }
  .faixa__item + .faixa__item { border-left: 0; }
  .faixa__item:nth-child(2n) { border-left: var(--border-hairline); }
  .faixa__item:nth-child(n+3) { border-top: var(--border-hairline); }
  /* Tabela larga rola dentro do próprio bloco — nunca a página. */
  .bento__bloco--largo { overflow-x: auto; }
}

/* ── agenda: o que foi COMBINADO ─────────────────────────────────────── */
.agenda__lista { list-style: none; margin: 0; padding: 0; }
.agenda__item {
  display: grid;
  grid-template-columns: 10rem 1fr 12rem auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.agenda__item + .agenda__item { border-top: var(--border-hairline); }
.agenda__quando { font-size: var(--text-sm); display: flex; flex-direction: column; gap: 1px; }
.agenda__selo { font-size: var(--text-3xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
/* Vencido é o único que muda de peso: é dívida. Sem cor de alarme — numa
   marca sóbria, vermelho seria ruído (mesma escolha do saldo de bairro). */
.agenda__item--vencido .agenda__quando { font-weight: var(--weight-semibold); }
.agenda__item--vencido .agenda__selo { color: var(--text-accent); }
.agenda__assunto { font-size: var(--text-sm); min-width: 0; }
.agenda__quem { font-size: var(--text-2xs); color: var(--text-muted); min-width: 0; }
.agenda__quem a { color: inherit; }

@media (max-width: 700px) {
  .agenda__item { grid-template-columns: 1fr auto; }
  .agenda__assunto { grid-column: 1 / -1; }
  .agenda__quem { grid-column: 1; }
}

/* Movimento reduzido — respeitado no app INTEIRO. Quem pede menos
   movimento no sistema operacional tem motivo, e o sistema não discute. */
/* Em tela estreita o cabeçalho vira duas faixas: marca de um lado, sessão
   do outro, navegação embaixo ocupando a linha inteira. */
@media (max-width: 560px) {
  .cabecalho { padding-left: var(--space-4); padding-right: var(--space-4); }
  .cabecalho__nav { order: 3; width: 100%; justify-content: space-between; gap: var(--space-3); }
  .cabecalho__nome { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}